How to disable standard functionalities?

[pil0u]

Hi,

In an app I'm building, I would like to disable some of the functionalities of the editor. As an example, suppose I would like to disable the Bold feature. How should I proceed?

The toolbar: false option hides everything, and does not disable the functionality.

An approach would be something in these lines:

document.addEventListener("lexxy:initialize", (event) => {
  event.target.querySelector("lexxy-toolbar button[name=bold]")?.remove()
})

This hides the button, but does not disable the functionality in itself; I could still make my text bold with the keyboard shortcut.

Is there an idiomatic approach to this?

[samuelpecher]

Hey @pil0u, I'd recommend a Lexxy extension to register a Lexical extension to intercept the command and tranforms node, and get a built-in toolbar hook.

For example, to turn-off bold text, I'd start down the path of registering a high priority command handler for FORMAT_TEXT_COMMAND and return true to stop further handling:

// configure Lexxy
import * as Lexxy from "@37signals/lexxy"

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

// No Bold Extension

import { defineExtension, COMMAND_PRIORITY_HIGH, FORMAT_TEXT_COMMAND } from "lexical"
import * as Lexxy from "@37signals/lexxy"

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

  get lexicalExtension() {
    return defineExtension({
      name: "lexxy/no_bold",
      register(editor, _config) {
        return editor.registerCommand(FORMAT_TEXT_COMMAND, (payload) => {
          return payload === "bold"
        }, COMMAND_PRIORITY_HIGH)
      }
    })
  }

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

For a belt-and-braces approach you could also register a node transform on TextNode and remove bold formatting. Don't forget to use mergeRegister to return all the handlers.