FetLife configurable editor + /sandbox/fetlife

app/assets/stylesheets/lexxy-editor.css

@@ -463,6 +463,21 @@
     display: none;
   }
 
+  &[data-tables="false"] button[name="table"] {
+    display: none;
+  }
+
+  &[data-highlight="false"] .lexxy-editor__toolbar-dropdown--highlight {
+    display: none;
+  }
+
+  &[data-disabled-marks~="bold"] button[name="bold"],
+  &[data-disabled-marks~="italic"] button[name="italic"],
+  &[data-disabled-marks~="strikethrough"] button[name="strikethrough"],
+  &[data-disabled-marks~="underline"] button[name="underline"] {
+    display: none;
+  }
+
   &[data-upload="file"] button[name="image"] {
     display: none;
   }

docs/configuration.md

@@ -47,9 +47,13 @@ Editors support the following options, configurable using presets and element at
   - `toolbar.upload`: Control which upload button(s) appear in the toolbar. Accepts `"file"`, `"image"`, or `"both"` (default). The image button restricts the file picker to images and videos (`accept="image/*,video/*"`), which triggers the native photo/video picker on iOS and Android. The file button opens an unrestricted file picker.
 - `attachments`: Pass `false` to disable attachments completely. By default, attachments are supported, including paste and drag & drop support. For finer-grained control — keeping attachments enabled while restricting which content types are accepted — use `permittedAttachmentTypes`.
 - `markdown`: Pass `false` to disable Markdown support.
+- `marks`: Choose which inline marks the editor allows, as an allowlist. Defaults to `["bold", "italic", "strikethrough", "underline"]` (all). Any mark left out is disabled everywhere — its toolbar button is hidden, its keyboard shortcut and Markdown shortcut are inert, and its markup is reduced to plain text on import (paste, `value`, and initial content). Pass `[]` to disable all inline marks. Example: `<lexxy-editor marks='["bold", "italic"]'></lexxy-editor>`.
 - `multiLine`: Pass `false` to force single line editing.
 - `permittedAttachmentTypes`: Restrict the editor to a specific allowlist of attachment content types. Unset (the default) permits any content type. Example: `<lexxy-editor permitted-attachment-types="application/vnd.basecamp.mention application/vnd.basecamp.opengraph-embed"></lexxy-editor>`.
 - `richText`: Pass `false` to disable rich text editing.
+- `tables`: Pass `false` to disable tables entirely. Table insertion is removed, and any existing `<table>` markup is reduced to plain text (cell text preserved) when loaded. By default, tables are enabled.
+- `highlight`: Color highlighting configuration. Pass `{ enabled: false }` (or simply `false`) to disable highlighting entirely (it is enabled by default). See [Highlighting](highlighting.md) for configuring the available colors.
+- `headings`: Choose which heading levels the toolbar offers, as an array of heading tags. Defaults to `["h2", "h3", "h4"]`. Any of `h1`–`h4` listed gets a button in the format dropdown; levels left out are hidden. Pass `[]` to remove every heading button. Markdown shortcuts (`#`…`######`) still produce headings regardless of this setting. Example: `<lexxy-editor headings='["h1", "h2", "h3"]'></lexxy-editor>`.
 
 The toolbar is considered part of the editor for `lexxy:focus` and `lexxy:blur` events. If the toolbar registers event or lexical handlers, it should expose a `dispose()` function which will be called on editor disconnect.
 

docs/highlighting.md

@@ -32,3 +32,19 @@ Lexxy.configure({
   }
 })
 ```
+
+## Disabling highlighting
+
+Pass `highlight.enabled: false` to disable color highlighting entirely. The toolbar control is hidden, the commands become inert, and existing highlight markup is reduced to plain text on load.
+
+```javascript
+Lexxy.configure({
+  default: {
+    highlight: { enabled: false }
+  }
+})
+```
+
+Or per editor: `<lexxy-editor highlight='{"enabled":false}'></lexxy-editor>`.
+
+A bare boolean is also accepted as a shorthand — `highlight: false` in a preset, or `<lexxy-editor highlight="false">`.

src/config/lexxy.js

@@ -15,10 +15,15 @@ const presets = new Configuration({
     multiLine: true,
     permittedAttachmentTypes: null,
     richText: true,
+    tables: true,
+    code: true,
+    marks: [ "bold", "italic", "strikethrough", "underline" ],
+    headings: [ "h2", "h3", "h4" ],
     toolbar: {
       upload: "both"
     },
     highlight: {
+      enabled: true,
       buttons: {
         color: range(1, 9).map(n => `var(--highlight-${n})`),
         "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),

src/editor/command_dispatcher.js

@@ -4,6 +4,7 @@ import {
   $isRangeSelection,
   $isTextNode,
   $setSelection,
+  COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_NORMAL,
   FORMAT_TEXT_COMMAND,
   INDENT_CONTENT_COMMAND,
@@ -33,6 +34,7 @@ const COMMANDS = [
   "unlink",
   "toggleHighlight",
   "removeHighlight",
+  "setFormatHeadingHuge",
   "setFormatHeadingLarge",
   "setFormatHeadingMedium",
   "setFormatHeadingSmall",
@@ -68,6 +70,7 @@ export class CommandDispatcher {
     this.contents = editorElement.contents
 
     this.#registerCommands()
+    this.#registerDisabledMarkInterceptor()
     this.#registerKeyboardCommands()
     this.#registerDragAndDropHandlers()
   }
@@ -156,6 +159,8 @@ export class CommandDispatcher {
   }
 
   dispatchInsertCodeBlock() {
+    if (!this.editorElement.supportsCode) return
+
     if (this.selection.hasSelectedWordsInSingleLine) {
       this.#toggleInlineCode()
     } else {
@@ -228,6 +233,10 @@ export class CommandDispatcher {
     $insertNodeToNearestRoot(new HorizontalDividerNode)
   }
 
+  dispatchSetFormatHeadingHuge() {
+    this.contents.applyHeadingFormat("h1")
+  }
+
   dispatchSetFormatHeadingLarge() {
     this.contents.applyHeadingFormat("h2")
   }
@@ -277,6 +286,8 @@ export class CommandDispatcher {
   }
 
   dispatchInsertTable() {
+    if (!this.editorElement.supportsTables) return
+
     this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true })
   }
 
@@ -299,6 +310,23 @@ export class CommandDispatcher {
     }
   }
 
+  // Swallow FORMAT_TEXT_COMMAND for disabled marks at high priority, before
+  // Lexical's rich-text handler (registered at COMMAND_PRIORITY_EDITOR) can apply
+  // them. This single hook covers every path that ends in FORMAT_TEXT_COMMAND:
+  // the toolbar buttons, programmatic dispatch, and the native Cmd+B/I/U shortcuts
+  // Lexical dispatches internally even when the button is gone.
+  #registerDisabledMarkInterceptor() {
+    const disabledMarks = this.editorElement.disabledMarks
+    if (disabledMarks.length === 0) return
+
+    const disabled = new Set(disabledMarks)
+    this.#registerCommandHandler(
+      FORMAT_TEXT_COMMAND,
+      COMMAND_PRIORITY_HIGH,
+      (format) => disabled.has(format)
+    )
+  }
+
   #registerCommandHandler(command, priority, handler) {
     this.#listeners.track(this.editor.registerCommand(command, handler, priority))
   }

src/editor/headings.js

@@ -0,0 +1,11 @@
+// Canonical heading levels the toolbar can offer, ordered largest to smallest.
+// The `name`/`command` for h2-h4 are the original public contract — referenced by
+// host adapters, the toolbar template, and the native `editor-initialized` event —
+// so they must not change. h1 adds a new name/command. Which of these levels are
+// actually offered is driven by the `headings` configuration option.
+export const HEADING_LEVELS = [
+  { tag: "h1", name: "heading-huge", command: "setFormatHeadingHuge", label: "Huge heading" },
+  { tag: "h2", name: "heading-large", command: "setFormatHeadingLarge", label: "Large heading" },
+  { tag: "h3", name: "heading-medium", command: "setFormatHeadingMedium", label: "Medium heading" },
+  { tag: "h4", name: "heading-small", command: "setFormatHeadingSmall", label: "Small heading" },
+]

src/editor/marks.js

@@ -0,0 +1,32 @@
+// Inline marks that can be enabled or disabled through the `marks` option.
+// Frozen because the editor's enabledMarks getter can return it directly.
+export const MARK_TYPES = Object.freeze([ "bold", "italic", "strikethrough", "underline" ])
+
+// Semantic HTML tags each mark is imported from. Deleting these tags from the
+// editor's html conversions strips the mark on import: the default TextNode
+// conversion and the legacy Trix conversion share the same tag key, so dropping
+// the key removes both. (`del` is contributed by the Trix content extension; the
+// rest come from Lexical's TextNode.importDOM.)
+//
+// Note: because the Trix conversion under these keys also carries legacy highlight
+// color (e.g. `<em style="color:…">`), disabling a mark drops that co-located color
+// too — an accepted consequence of stripping a now-disabled feature on load.
+export const MARK_TO_TAGS = {
+  bold: [ "b", "strong" ],
+  italic: [ "i", "em" ],
+  strikethrough: [ "s", "del" ],
+  underline: [ "u" ]
+}
+
+// Drop the markdown transformers that would produce a disabled mark. Text-format
+// transformers expose a `format` array (e.g. ["bold"] or ["bold", "italic"]); a
+// combined transformer is dropped when either of its formats is disabled.
+// Transformers without a `format` (headings, lists, links…) are left untouched.
+export function withoutDisabledMarkTransformers(transformers, disabledMarks) {
+  if (disabledMarks.length === 0) return transformers
+
+  const disabled = new Set(disabledMarks)
+  return transformers.filter((transformer) =>
+    !Array.isArray(transformer.format) || !transformer.format.some((format) => disabled.has(format))
+  )
+}

src/elements/dropdown/highlight.js

@@ -14,6 +14,8 @@ const NO_STYLE = Symbol("no_style")
 
 export class HighlightDropdown extends ToolbarDropdown {
   editorReady() {
+    if (!this.editorElement.supportsHighlight) return
+
     this.#setUpButtons()
     this.#registerButtonHandlers()
   }
@@ -34,6 +36,7 @@ export class HighlightDropdown extends ToolbarDropdown {
     this.#buttonContainer.innerHTML = ""
 
     const colorGroups = this.editorElement.config.get("highlight.buttons")
+    if (!colorGroups) return
 
     this.#populateButtonGroup("color", colorGroups.color)
     this.#populateButtonGroup("background-color", colorGroups["background-color"])