Method connectedCallback

app/javascript/elements/html_editor.js:440–524

()

  ]

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

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

    const tiptap = await loadTiptap()

    const { Editor, Extension, Document, Text, HardBreak, UndoRedo, Gapcursor, Dropcursor } = tiptap

    this.emailDocument = new DOMParser().parseFromString(this.textarea.value, 'text/html')

    const shadow = this.editorElement.attachShadow({ mode: 'open' })

    shadow.adoptedStyleSheets = [editorStylesheet]

    this.emailDocument.head.querySelectorAll('style').forEach((style) => {
      shadow.appendChild(style.cloneNode(true))
    })

    const container = document.createElement('div')
    const bodyStyle = this.emailDocument.body.getAttribute('style')

    if (bodyStyle) container.setAttribute('style', bodyStyle)

    shadow.appendChild(container)

    const LinkShortcut = Extension.create({
      name: 'linkShortcut',
      addKeyboardShortcuts: () => ({
        'Mod-k': () => {
          this.toggleLink()

          return true
        }
      })
    })

    this.editor = new Editor({
      element: container,
      extensions: [
        Document,
        Text,
        HardBreak,
        UndoRedo,
        Gapcursor,
        Dropcursor,
        ...buildExtensions(tiptap),
        LinkShortcut
      ],
      content: this.emailDocument.body.innerHTML,
      injectCSS: false,
      editorProps: {
        attributes: {
          dir: 'auto'
        },
        handleDOMEvents: {
          click: (_, event) => {