Docs
Third-Party Plugins
WYSIWYG Editor

Tailwind CSS WYSIWYG Editor

WYSIWYG editors are interactive interface that allow users to input and format text as it will appear in its final output. They streamline content creation by providing a visual interface, eliminating the need for direct code manipulation.

Requires Additional Installation

Note that this component requires the use of the third-party Tiptap plugin.

Learn more

Installation

Add TipTap

Include the JavaScript <script type="module"> near the end of your </body> tag:
import { Editor } from 'https://esm.sh/@tiptap/core@2.11.0'; import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.0';
JavaScript
```
                          
                        
```
Add extensions

Add the extensions you plan to use.
import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder'; import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list'; ...
JavaScript
```
                          
                        
```
Initialize TipTap

Initialize TipTap with the options appropriate for your case.
const editor = new Editor({ element: document.querySelector('#hs-editor-tiptap [data-hs-editor-field]'), extensions: [ StarterKit, Placeholder.configure({ placeholder: 'Add a message, if you\'d like.', emptyNodeClass: 'text-foreground' }), OrderedList.configure({ HTMLAttributes: { class: 'list-decimal list-inside text-foreground' } }) ] }); const action = document.querySelector('#hs-editor-tiptap [data-hs-editor-ol]') action.addEventListener('click', () => editor.chain().focus().toggleOrderedList().run());
JavaScript
```
                          
                        
```
Known issues

Some TipTap extensions may be delivered with different versions of the prosemirror-model library. To avoid errors you should map different versions to the one.
<script type="importmap"> { "imports": { "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.21.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.22.1/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.23.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.24.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.24.1/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs" } } </script>
JavaScript
```
                          
                        
```

Default editor

Start with a standard TipTap toolbar for common formatting, lists, quotes, links, and inline code.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">  <style>
  .ProseMirror:focus {
    outline: none;
  }
  
  .tiptap ul p,
  .tiptap ol p {
    display: inline;
  }
  
  .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }
</style>

</head>
                          <body class="w-full max-w-xl mx-auto mt-3">
                        <div class="bg-layer border border-layer-line rounded-xl overflow-hidden">
                          <div id="hs-editor-tiptap">
                            <div class="sticky top-0 bg-layer flex align-middle gap-x-0.5 border-b border-layer-line p-2">
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-bold>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-italic>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-underline>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-strike>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-link>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ol>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ul>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-blockquote>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-code>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                              </button>
                            </div>
    
                            <div class="h-40 overflow-auto" data-hs-editor-field></div>
                          </div>
                        </div>
                        
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script type="module">
                              import { Editor } from 'https://esm.sh/@tiptap/core@2.11.0';
                              import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.0';
                              import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder@2.11.0';
                              import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@2.11.0';
                              import Bold from 'https://esm.sh/@tiptap/extension-bold@2.11.0';
                              import Underline from 'https://esm.sh/@tiptap/extension-underline@2.11.0';
                              import Link from 'https://esm.sh/@tiptap/extension-link@2.11.0';
                              import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@2.11.0';
                              import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@2.11.0';
                              import ListItem from 'https://esm.sh/@tiptap/extension-list-item@2.11.0';
                              import Blockquote from 'https://esm.sh/@tiptap/extension-blockquote@2.11.0';
  
                              const editor = new Editor({
                                element: document.querySelector('#hs-editor-tiptap [data-hs-editor-field]'),
                                editorProps: {
                                  attributes: {
                                    class: 'relative min-h-40 p-3'
                                  }
                                },
                                extensions: [
                                  StarterKit.configure({
                                    history: false
                                  }),
                                  Placeholder.configure({
                                    placeholder: 'Add a message, if you\'d like.',
                                    emptyNodeClass: 'before:text-muted-foreground-1'
                                  }),
                                  Paragraph.configure({
                                    HTMLAttributes: {
                                      class: 'text-sm text-foreground'
                                    }
                                  }),
                                  Bold.configure({
                                    HTMLAttributes: {
                                      class: 'font-bold'
                                    }
                                  }),
                                  Underline,
                                  Link.configure({
                                    HTMLAttributes: {
                                      class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'
                                    }
                                  }),
                                  BulletList.configure({
                                    HTMLAttributes: {
                                      class: 'list-disc list-inside text-foreground'
                                    }
                                  }),
                                  OrderedList.configure({
                                    HTMLAttributes: {
                                      class: 'list-decimal list-inside text-foreground'
                                    }
                                  }),
                                  ListItem.configure({
                                    HTMLAttributes: {
                                      class: 'marker:text-sm'
                                    }
                                  }),
                                  Blockquote.configure({
                                    HTMLAttributes: {
                                      class: 'relative border-s-4 ps-4 sm:ps-6 border-line-7 sm:[&>p]:text-lg'
                                    }
                                  })
                                ]
                              });
                              const actions = [
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-bold]',
                                  fn: () => editor.chain().focus().toggleBold().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-italic]',
                                  fn: () => editor.chain().focus().toggleItalic().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-underline]',
                                  fn: () => editor.chain().focus().toggleUnderline().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-strike]',
                                  fn: () => editor.chain().focus().toggleStrike().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-link]',
                                  fn: () => {
                                    const url = window.prompt('URL');
                                    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                                  }
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-ol]',
                                  fn: () => editor.chain().focus().toggleOrderedList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-ul]',
                                  fn: () => editor.chain().focus().toggleBulletList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-blockquote]',
                                  fn: () => editor.chain().focus().toggleBlockquote().run()
                                },
                                {
                                  id: '#hs-editor-tiptap [data-hs-editor-code]',
                                  fn: () => editor.chain().focus().toggleCode().run()
                                }
                              ];

actions.forEach(({ id, fn }) => {
                                const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                              });
                            </script>
                          </body>
                        </html>

<div class="bg-layer border border-layer-line rounded-xl overflow-hidden">
                          <div id="hs-editor-tiptap">
                            <div class="sticky top-0 bg-layer flex align-middle gap-x-0.5 border-b border-layer-line p-2">
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-bold>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-italic>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-underline>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-strike>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-link>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ol>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ul>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-blockquote>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-code>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                              </button>
                            </div>
    
                            <div class="h-40 overflow-auto" data-hs-editor-field></div>
                          </div>
                        </div>

actions.forEach(({ id, fn }) => {
                            const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                          });
                        </script>

Custom blockquote style

Replace the default blockquote with a custom node view for a more decorative quote treatment.

const CustomBlockquote = Node.create({
                                name: 'customBlockquote',
                                group: 'block',
                                content: 'block+',
                                defining: true,
                                parseHTML() {
                                  return [{ tag: 'blockquote' }]
                                },
                                addOptions() {
                                  return {
                                    HTMLAttributes: {},
                                  }
                                },
                                addNodeView() {
                                  return ({ node }) => {
                                    const blockquote = document.createElement('blockquote');

Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
                                      blockquote.setAttribute(key, value);
                                    });

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                                    svg.setAttribute('class', 'absolute top-0 inset-s-0 size-16 text-gray-100 dark:text-neutral-700');
                                    svg.setAttribute('width', '16');
                                    svg.setAttribute('height', '16');
                                    svg.setAttribute('viewBox', '0 0 16 16');
                                    svg.setAttribute('fill', 'none');
                                    svg.setAttribute('aria-hidden', 'true');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                                    path.setAttribute('d', 'M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z');
                                    path.setAttribute('fill', 'currentColor');
                                    svg.appendChild(path);

blockquote.appendChild(svg);

const contentWrapper = document.createElement('div');
                                    contentWrapper.classList.add('relative', 'z-10', 'italic');
                                    blockquote.appendChild(contentWrapper);

return {
                                      dom: blockquote,
                                      contentDOM: contentWrapper
                                    }
                                  }
                                }
                              });
  
                              const editor = new Editor({
                                element: document.querySelector('#hs-editor-tiptap-blockquote-alt [data-hs-editor-field]'),
                                editorProps: {
                                  attributes: {
                                    class: 'relative min-h-40 p-3'
                                  }
                                },
                                extensions: [
                                  StarterKit.configure({
                                    blockquote: false,
                                    history: false
                                  }),
                                  Placeholder.configure({
                                    placeholder: 'Add a message, if you\'d like.',
                                    emptyNodeClass: 'before:text-muted-foreground-1'
                                  }),
                                  Paragraph.configure({
                                    HTMLAttributes: {
                                      class: 'text-sm text-foreground'
                                    }
                                  }),
                                  Bold.configure({
                                    HTMLAttributes: {
                                      class: 'font-bold'
                                    }
                                  }),
                                  Underline,
                                  Link.configure({
                                    HTMLAttributes: {
                                      class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'
                                    }
                                  }),
                                  BulletList.configure({
                                    HTMLAttributes: {
                                      class: 'list-disc list-inside text-foreground'
                                    }
                                  }),
                                  OrderedList.configure({
                                    HTMLAttributes: {
                                      class: 'list-decimal list-inside text-foreground'
                                    }
                                  }),
                                  ListItem.configure({
                                    HTMLAttributes: {
                                      class: 'marker:text-sm'
                                    }
                                  }),
                                  CustomBlockquote.configure({
                                    HTMLAttributes: {
                                      class: 'relative sm:[&>div>p]:text-xl pt-6 pb-4 pe-4 ps-8'
                                    }
                                  })
                                ]
                              });
                              const actions = [
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-bold]',
                                  fn: () => editor.chain().focus().toggleBold().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-italic]',
                                  fn: () => editor.chain().focus().toggleItalic().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-underline]',
                                  fn: () => editor.chain().focus().toggleUnderline().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-strike]',
                                  fn: () => editor.chain().focus().toggleStrike().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-link]',
                                  fn: () => {
                                    const url = window.prompt('URL');
                                    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                                  }
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-ol]',
                                  fn: () => editor.chain().focus().toggleOrderedList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-ul]',
                                  fn: () => editor.chain().focus().toggleBulletList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-blockquote]',
                                  fn: () => editor.chain().focus().toggleWrap('customBlockquote').run()
                                },
                                {
                                  id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-code]',
                                  fn: () => editor.chain().focus().toggleCode().run()
                                }
                              ];

actions.forEach(({ id, fn }) => {
                                const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                              });
                            </script>
                          </body>
                        </html>

<div class="bg-layer border border-layer-line rounded-xl overflow-hidden">
                          <div id="hs-editor-tiptap-blockquote-alt">
                            <div class="sticky top-0 bg-layer flex align-middle gap-x-0.5 border-b border-layer-line p-2">
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-bold>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-italic>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-underline>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-strike>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-link>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ol>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ul>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-blockquote>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                              </button>
                              <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-code>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                              </button>
                            </div>
    
                            <div class="h-40 overflow-auto" data-hs-editor-field></div>
                          </div>
                        </div>

const CustomBlockquote = Node.create({
                            name: 'customBlockquote',
                            group: 'block',
                            content: 'block+',
                            defining: true,
                            parseHTML() {
                              return [{ tag: 'blockquote' }]
                            },
                            addOptions() {
                              return {
                                HTMLAttributes: {},
                              }
                            },
                            addNodeView() {
                              return ({ node }) => {
                                const blockquote = document.createElement('blockquote');

Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
                                  blockquote.setAttribute(key, value);
                                });

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                                svg.setAttribute('class', 'absolute top-0 inset-s-0 size-16 text-gray-100 dark:text-neutral-700');
                                svg.setAttribute('width', '16');
                                svg.setAttribute('height', '16');
                                svg.setAttribute('viewBox', '0 0 16 16');
                                svg.setAttribute('fill', 'none');
                                svg.setAttribute('aria-hidden', 'true');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                                path.setAttribute('d', 'M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z');
                                path.setAttribute('fill', 'currentColor');
                                svg.appendChild(path);

blockquote.appendChild(svg);

const contentWrapper = document.createElement('div');
                                contentWrapper.classList.add('relative', 'z-10', 'italic');
                                blockquote.appendChild(contentWrapper);

return {
                                  dom: blockquote,
                                  contentDOM: contentWrapper
                                }
                              }
                            }
                          });
  
                          const editor = new Editor({
                            element: document.querySelector('#hs-editor-tiptap-blockquote-alt [data-hs-editor-field]'),
                            editorProps: {
                              attributes: {
                                class: 'relative min-h-40 p-3'
                              }
                            },
                            extensions: [
                              StarterKit.configure({
                                blockquote: false,
                                history: false
                              }),
                              Placeholder.configure({
                                placeholder: 'Add a message, if you\'d like.',
                                emptyNodeClass: 'before:text-muted-foreground-1'
                              }),
                              Paragraph.configure({
                                HTMLAttributes: {
                                  class: 'text-sm text-foreground'
                                }
                              }),
                              Bold.configure({
                                HTMLAttributes: {
                                  class: 'font-bold'
                                }
                              }),
                              Underline,
                              Link.configure({
                                HTMLAttributes: {
                                  class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'
                                }
                              }),
                              BulletList.configure({
                                HTMLAttributes: {
                                  class: 'list-disc list-inside text-foreground'
                                }
                              }),
                              OrderedList.configure({
                                HTMLAttributes: {
                                  class: 'list-decimal list-inside text-foreground'
                                }
                              }),
                              ListItem.configure({
                                HTMLAttributes: {
                                  class: 'marker:text-sm'
                                }
                              }),
                              CustomBlockquote.configure({
                                HTMLAttributes: {
                                  class: 'relative sm:[&>div>p]:text-xl pt-6 pb-4 pe-4 ps-8'
                                }
                              })
                            ]
                          });
                          const actions = [
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-bold]',
                              fn: () => editor.chain().focus().toggleBold().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-italic]',
                              fn: () => editor.chain().focus().toggleItalic().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-underline]',
                              fn: () => editor.chain().focus().toggleUnderline().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-strike]',
                              fn: () => editor.chain().focus().toggleStrike().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-link]',
                              fn: () => {
                                const url = window.prompt('URL');
                                editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                              }
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-ol]',
                              fn: () => editor.chain().focus().toggleOrderedList().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-ul]',
                              fn: () => editor.chain().focus().toggleBulletList().run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-blockquote]',
                              fn: () => editor.chain().focus().toggleWrap('customBlockquote').run()
                            },
                            {
                              id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-code]',
                              fn: () => editor.chain().focus().toggleCode().run()
                            }
                          ];

actions.forEach(({ id, fn }) => {
                            const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                          });
                        </script>

Use the editor inside a modal dialog for compose and edit flows that open on demand.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">    <style>
  .ProseMirror:focus {
    outline: none;
  }
  
  .tiptap ul p,
  .tiptap ol p {
    display: inline;
  }
  
  .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }
</style>

</head>
                            <body class="w-full max-w-xl mx-auto mt-4"><div class="flex justify-center">
                            
                            <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-example" data-hs-overlay="#hs-modal-example">
                              Open modal
                            </button>
                            
                          </div>
  
                          
                          <div id="hs-modal-example" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-modal-example-label">
                            <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                              <div class="flex flex-col bg-overlay border border-overlay-line shadow-2xs rounded-xl pointer-events-auto">
                                <div class="flex justify-between items-center py-3 px-4 border-b border-overlay-header">
                                  <h3 id="hs-modal-example-label" class="font-semibold text-foreground">
                                    Modal example
                                  </h3>
                                  <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-modal-example">
                                    <span class="sr-only">Close</span>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  </button>
                                </div>
                                <div class="p-4 min-h-32 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  
                                  <div class="bg-layer border border-layer-line rounded-xl overflow-hidden">
                                    <div id="hs-editor-tiptap-modal">
                                      <div class="sticky top-0 bg-layer flex align-middle gap-x-0.5 border-b border-layer-line p-2">
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-bold>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-italic>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-underline>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-strike>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-link>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ol>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ul>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-blockquote>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-code>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                        </button>
                                      </div>
                                      <div class="h-40 overflow-auto" data-hs-editor-field></div>
                                    </div>
                                  </div>
                                  
                                </div>
                                <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-overlay-footer">
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-modal-example">
                                    Close
                                  </button>
                                  <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                    Save changes
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script type="module">
                              import { Editor } from 'https://esm.sh/@tiptap/core@2.11.0';
                              import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.0';
                              import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder@2.11.0';
                              import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@2.11.0';
                              import Bold from 'https://esm.sh/@tiptap/extension-bold@2.11.0';
                              import Underline from 'https://esm.sh/@tiptap/extension-underline@2.11.0';
                              import Link from 'https://esm.sh/@tiptap/extension-link@2.11.0';
                              import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@2.11.0';
                              import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@2.11.0';
                              import ListItem from 'https://esm.sh/@tiptap/extension-list-item@2.11.0';
                              import Blockquote from 'https://esm.sh/@tiptap/extension-blockquote@2.11.0';
  
                              const editor = new Editor({
                                element: document.querySelector('#hs-editor-tiptap-modal [data-hs-editor-field]'),
                                editorProps: {
                                  attributes: {
                                    class: 'relative min-h-40 p-3'
                                  }
                                },
                                extensions: [
                                  StarterKit.configure({
                                    history: false
                                  }),
                                  Placeholder.configure({
                                    placeholder: 'Add a message, if you\'d like.',
                                    emptyNodeClass: 'before:text-muted-foreground-1'
                                  }),
                                  Paragraph.configure({
                                    HTMLAttributes: {
                                      class: 'text-sm text-foreground'
                                    }
                                  }),
                                  Bold.configure({
                                    HTMLAttributes: {
                                      class: 'font-bold'
                                    }
                                  }),
                                  Underline,
                                  Link.configure({
                                    HTMLAttributes: {
                                      class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'
                                    }
                                  }),
                                  BulletList.configure({
                                    HTMLAttributes: {
                                      class: 'list-disc list-inside text-foreground'
                                    }
                                  }),
                                  OrderedList.configure({
                                    HTMLAttributes: {
                                      class: 'list-decimal list-inside text-foreground'
                                    }
                                  }),
                                  ListItem.configure({
                                    HTMLAttributes: {
                                      class: 'marker:text-sm'
                                    }
                                  }),
                                  Blockquote.configure({
                                    HTMLAttributes: {
                                      class: 'relative border-s-4 ps-4 sm:ps-6 border-line-7 sm:[&>p]:text-lg'
                                    }
                                  })
                                ]
                              });
                              const actions = [
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-bold]',
                                  fn: () => editor.chain().focus().toggleBold().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-italic]',
                                  fn: () => editor.chain().focus().toggleItalic().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-underline]',
                                  fn: () => editor.chain().focus().toggleUnderline().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-strike]',
                                  fn: () => editor.chain().focus().toggleStrike().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-link]',
                                  fn: () => {
                                    const url = window.prompt('URL');
                                    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                                  }
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-ol]',
                                  fn: () => editor.chain().focus().toggleOrderedList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-ul]',
                                  fn: () => editor.chain().focus().toggleBulletList().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-blockquote]',
                                  fn: () => editor.chain().focus().toggleBlockquote().run()
                                },
                                {
                                  id: '#hs-editor-tiptap-modal [data-hs-editor-code]',
                                  fn: () => editor.chain().focus().toggleCode().run()
                                }
                              ];

actions.forEach(({ id, fn }) => {
                                const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                              });
                            </script>
                          </body>
                        </html>

<div class="flex justify-center">
                            
                            <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-example" data-hs-overlay="#hs-modal-example">
                              Open modal
                            </button>
                            
                          </div>
  
                          
                          <div id="hs-modal-example" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-modal-example-label">
                            <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                              <div class="flex flex-col bg-overlay border border-overlay-line shadow-2xs rounded-xl pointer-events-auto">
                                <div class="flex justify-between items-center py-3 px-4 border-b border-overlay-header">
                                  <h3 id="hs-modal-example-label" class="font-semibold text-foreground">
                                    Modal example
                                  </h3>
                                  <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-modal-example">
                                    <span class="sr-only">Close</span>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  </button>
                                </div>
                                <div class="p-4 min-h-32 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  
                                  <div class="bg-layer border border-layer-line rounded-xl overflow-hidden">
                                    <div id="hs-editor-tiptap-modal">
                                      <div class="sticky top-0 bg-layer flex align-middle gap-x-0.5 border-b border-layer-line p-2">
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-bold>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-italic>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-underline>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-strike>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-link>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ol>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-ul>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-blockquote>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                        </button>
                                        <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" type="button" data-hs-editor-code>
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                        </button>
                                      </div>
                                      <div class="h-40 overflow-auto" data-hs-editor-field></div>
                                    </div>
                                  </div>
                                  
                                </div>
                                <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-overlay-footer">
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-modal-example">
                                    Close
                                  </button>
                                  <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                    Save changes
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>

actions.forEach(({ id, fn }) => {
                            const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                          });
                        </script>

Installation

Add TipTap

Add extensions

Initialize TipTap

Known issues

Default editor

Custom blockquote style

Editor in modal