Method connectedCallback

app/javascript/elements/markdown_editor.js:143–257

()

  ]

  async connectedCallback () {
    if (!this.textarea || !this.editorElement) return

    this.textarea.style.display = 'none'
    this.adjustShortcutsForPlatform()

    const { Editor, Extension, Bold, Italic, Paragraph, Text, HardBreak, UndoRedo, Document, Link, Underline, Markdown, Plugin, Decoration, DecorationSet } = await loadTiptap()

    const buildDecorations = (doc) => {
      const decorations = []
      const regex = /\{\{?[a-zA-Z0-9_.-]+\}\}?/g

      doc.descendants((node, pos) => {
        if (!node.isText) return

        let match

        while ((match = regex.exec(node.text)) !== null) {
          decorations.push(
            Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
              class: 'bg-amber-100 py-0.5 px-1 rounded'
            })
          )
        }
      })

      return DecorationSet.create(doc, decorations)
    }

    const VariableHighlight = Extension.create({
      name: 'variableHighlight',
      addProseMirrorPlugins () {
        return [new Plugin({
          state: {
            init (_, { doc }) {
              return buildDecorations(doc)
            },
            apply (tr, oldSet) {
              return tr.docChanged ? buildDecorations(tr.doc) : oldSet
            }
          },
          props: {
            decorations (state) {
              return this.getState(state)
            }
          }
        })]
      }
    })

    this.editor = new Editor({
      element: this.editorElement,
      extensions: [
        Markdown,
        Document,
        Paragraph,
        Text,
        Bold,