Skip to main content
Version: 1.1

Configuring and Extending Extensions

In this example we will configure some extensions. Each bridge comes with the configureExtension function, that configures it's underline tiptap extension. For full list of available configurations for each bridge please see BridgeExtensions.

First we can check which options are available to extend on the tiptap docs. Links to them are available here In our case let's extend the placeholder to show custom text, and the link extension to not open links when clicking them

const editor = useEditorBridge({
  bridgeExtensions: [
    ...TenTapStartKit,
    PlaceholderBridge.configureExtension({
      placeholder: 'Type something...',
    }),
    LinkBridge.configureExtension({ openOnClick: false }),
  ],
});

Bridges are deduplicated by name and the last one wins, so spread TenTapStartKit first and the configured bridges after it.

Extending Extension and updating Document Schema​

We can also extend the main tiptapExtension of each bridge with extendExtension. Let's say we want to update the Document extension of the CoreBridge to mandate a heading as the first node:

We could do

CoreBridge.extendExtension({ content: 'heading block+' });

Now the Document extension will be configured to have a heading node first followed by one or many "blocks"

Inline Images​

Images are block nodes by default, so an <img> inside a <p> in your initialContent is moved out of the paragraph, leaving an empty <p></p> behind. To keep images inside paragraphs, configure the ImageBridge:

const editor = useEditorBridge({
  bridgeExtensions: [
    ...TenTapStartKit,
    ImageBridge.configureExtension({ inline: true }),
  ],
  initialContent: '<p>Some text <img src="https://example.com/cat.png" /> more text</p>',
});

Because extensions are deduplicated by name and the last one wins, the configured ImageBridge replaces the one from TenTapStartKit. Attributes like style or width on <img> are dropped unless you add them with ImageBridge.extendExtension.