Bubblemenus in Svelte

[NormandoHall]

Description

Sorry, but I have no time to packed or upload to Github, but here is my Svelte component HTML editor, used for post in Telegram (parse mode HTML). Using bubblemenu. Is you found a better way to do it, suggestions are welcome.

Installation

<script>
  import { onMount, onDestroy } from 'svelte';
  import { Editor } from '@tiptap/core';
  import Document from '@tiptap/extension-document';
  import Paragraph from '@tiptap/extension-paragraph';
  import HardBreak from '@tiptap/extension-hard-break';
  import Text from '@tiptap/extension-text';
  import Bold from '@tiptap/extension-bold';
  import Code from '@tiptap/extension-code';
  import Italic from '@tiptap/extension-italic';
  import Strike from '@tiptap/extension-strike';
  import Underline from '@tiptap/extension-underline';
  import Link from '@tiptap/extension-link';
  import Placeholder from '@tiptap/extension-placeholder';
  import BubbleMenu from '@tiptap/extension-bubble-menu';
  import CharacterCount from '@tiptap/extension-character-count';

  export let content = '';
  export let output;
  export let limit = 100;

  export let bold = true;
  export let italic = true;
  export let strike = false;
  export let underline = false;
  export let link = false;
  export let code = false;
  export let placeholder = '';

  let element;
  let bmenu;
  let editor;

  const CustomBold = Bold.extend({
    renderHTML({ HTMLAttributes }) {
      // Original:
      // return ['strong', HTMLAttributes, 0]
      return ['b', HTMLAttributes, 0];
    }
  });

  const setLink = () => {
    if (editor.isActive('link')) {
      editor.chain().focus().extendMarkRange('link').unsetLink().run();

      return;
    }

    const previousUrl = editor.getAttributes('link').href;
    const url = window.prompt('URL', previousUrl);

    // cancelled
    if (url === null) {
      return;
    }

    // empty
    if (url === '') {
      editor.chain().focus().extendMarkRange('link').unsetLink().run();

      return;
    }

    if (!/^https?:\/\//.test(url)) {
      window.alert('DIRECCIÓN INVÁLIDA!!');
      return;
    }

    // update link
    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
  };

  onMount(() => {
    editor = new Editor({
      element: element,
      extensions: [
        Document,
        Paragraph,
        Text,
        //Bold,
        CustomBold,
        Code,
        Italic,
        Strike,
        Underline,
        Link.configure({
          validate: (href) => /^https?:\/\//.test(href),
          HTMLAttributes: { rel: null, target: null }
        }),
        BubbleMenu.configure({
          element: bmenu,
          tippyOptions: { duration: 100, theme: 'local', maxWidth: 450, appendTo: document.body }
        }),
        CharacterCount.configure({
          limit
        }),
        HardBreak.extend({
          addKeyboardShortcuts() {
            return {
              Enter: () => this.editor.commands.setHardBreak()
            };
          }
        }).configure({ keepMarks: false }),
        Placeholder.configure({ placeholder })
      ],
      content,
      editorProps: {
        attributes: {
          class: 'border border-gray-300 rounded p-3 outline-none text-base'
        }
      },
      onCreate({ editor }) {
        // The editor is ready.
        const html = editor.getHTML();
        // send the content to an API here
        output = html;
      },
      onTransaction: () => {
        // force re-render so `editor.isActive` works as expected
        editor = editor;
      },
      onUpdate: ({ editor }) => {
        const html = editor.getHTML();
        // send the content to an API here
        output = html;
      }
    });
  });

  onDestroy(() => {
    if (editor) {
      editor.destroy();
    }
  });
</script>

<div bind:this={bmenu}>
  {#if editor}
    {#if bold}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('bold')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={() => editor.chain().focus().toggleBold().run()}
      >
        Negrita
      </button>
    {/if}

    {#if italic}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('italic')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={() => editor.chain().focus().toggleItalic().run()}
      >
        Cursiva
      </button>
    {/if}

    {#if strike}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('strike')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={() => editor.chain().focus().toggleStrike().run()}
      >
        Tachado
      </button>
    {/if}

    {#if underline}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('underline')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={() => editor.chain().focus().toggleUnderline().run()}
      >
        Subrayado
      </button>
    {/if}

    {#if code}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('code')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={() => editor.chain().focus().toggleCode().run()}
      >
        Código
      </button>
    {/if}

    {#if link}
      <button
        class="mx-1 px-1 text-sm text-gray-300 hover:text-white {editor.isActive('link')
          ? 'ring ring-gray-100 text-white rounded'
          : ''}"
        on:click|preventDefault={setLink}
      >
        Link
      </button>
    {/if}
  {/if}
</div>

<div bind:this={element} />

{#if editor}
  <div class="text-sm text-gray-500">
    {editor.storage.characterCount.characters({ mode: 'textSize' })}/{limit} caracteres
  </div>
{/if}

Usage

Because Telegram, the outputHTML will need to remove <p></p> tags and replace all <br> with \n.

Usage is simple as:

<script>
  import TelegramHTML from '$lib/components/Editors/TelegramHTML.svelte';
  let outputHTML = '',
  // ...
</script>

<!-- any svelte html code -->
<!-- ... -->
<!-- I am using in a form -->
  <input type="hidden" name="outputHTML" id="outputHTML" bind:value={outputHTML} />

  <main class="my-2">
    <TelegramHTML
      code={true}
      link={true}
      limit="1024"
      bind:output={outputHTML}
      content={formState.post.text}  // this comes from vest validator
      placeholder="Texto de la publicación..."
    />
  </main>

If you are using Tailwind, put these selectors in you tailwind.css file, one for links, and the other is for placeholder.

.ProseMirror a {
  @apply text-blue-600 underline cursor-pointer;
}

.ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

Type

Other

Other

May be this can help anyone who want to quick start using Tiptap with Bubblemenu in Svelte without installing svelte-tiptap package.

Improvements are welcome!

[bdbch]

Hey @NormandoHall thanks for your example post! I moved it into Showcases & renamed the title to make it easier to find for others!

[NormandoHall]

You're welcome @bdbch! Thanks you