@sudowrite/extension-inserted

A TipTap extension used to convert HTML with inline <span class="inserted">...</span> blocks into an inserted mark on each node within the inserted span.

It also does the reverse: renders HTML in which each Node with the inserted mark is rendered inside a <span class="inserted">...</span> HTML block.

An "inserted" block represents a block of text in the editor that was inserted by some external service. You may wish to apply CSS styles to the inserted class to indicate visually to users that the text was inserted.

Using this Package

Install:

npm install @sudowrite/extension-inserted

Use it in your code like any other extension:

import { Editor } from '@tiptap/core'
import Inserted from '@sudowrite/extension-inserted'

new Editor({
  extensions: [
    ...
    Inserted,
  ],
})