Define extensions with pinned lexxy

[arthurwozniak]

Hi,

inspired by #721 (comment), I tried to add an extension in an app with no JS bundler, where lexxy is pinned via importmaps.

Defining an extension needs imports from lexical (e.g. defineExtension, FORMAT_TEXT_COMMAND, COMMAND_PRIORITY_HIGH), so I also pinned lexical. The extension loads and register(editor) runs on the same editor instance the host uses. But the command is never invoked.

defineExtension itself works fine cross-copy, and registerNodeTransform works too. So this isn't a defineExtension problem, it's specifically anything keyed by object identity or module state.

Is there already a supported way to define extensions with a pinned lexxy? It would be great if lexxy re-exported the Lexical API needed for extensions (defineExtension, commands, priorities, $ helpers, node classes) from lexxy.js, so import { FORMAT_TEXT_COMMAND } from "lexxy" resolves to the same copy.

I assume the original snippet works because it targets a bundler setup. It imports @37signals/lexxy and lexical through the same bundler, so both resolve to a single shared Lexical copy from node_modules, where command object identity lines up.

import { defineExtension, mergeRegister, COMMAND_PRIORITY_HIGH, FORMAT_TEXT_COMMAND, TextNode } from "lexical"
import * as Lexxy from "lexxy"

export class NoBoldExtension extends Lexxy.Extension {
  get enabled() {
    return this.editorElement.supportsRichText
  }

  get lexicalExtension() {
    return defineExtension({
      name: "lexxy/no-bold",
      register(editor) {
        // Node transform matches by getType() STRING
        const transform = editor.registerNodeTransform(TextNode, (n) => {
          if (n.hasFormat("bold")) console.log("transform fires (string match works)")
        })

        // Command matches by OBJECT identity and never fires (imported command != editor's)
        const command = editor.registerCommand(FORMAT_TEXT_COMMAND, () => {
          console.log("command HIT (never prints)")
          return true
        }, COMMAND_PRIORITY_HIGH)

        return mergeRegister(transform, command)
      }
    })
  }

  initializeToolbar(toolbar) {
    toolbar.querySelector("button[name=bold]")?.remove()
  }
}

Lexxy.configure(
  {
    global: {
      extensions: [
        NoBoldExtension
      ]
    }
  }
)

# Gemfile
gem "lexxy", "0.9.15.alpha.4" # Need to specify the version since it's a pre-release

# importmap
pin "lexical", to: "https://ga.jspm.io/npm:lexical@0.45.0/dist/Lexical.prod.mjs"

[arthurwozniak]

Relates to #1047