@37signals/lexxy 0.1.20-beta → 0.1.21-beta

package/README.md

@@ -23,7 +23,7 @@ A modern rich text editor for Rails.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'lexxy', '~> 0.1.4.beta' # Need to specify the version since it's a pre-release
+gem 'lexxy', '~> 0.1.20.beta' # Need to specify the version since it's a pre-release
 ```
 
 And then execute:
@@ -355,6 +355,11 @@ Each event is dispatched on the `<lexxy-editor>` element.
 Fired when the `<lexxy-editor>` element is attached to the DOM and ready for use.
 This is useful for one-time setup.
 
+### lexxy:focus and lexxy:blur
+
+Fired whenever the editor element gains or loses focus.
+Useful to show or hide accessory UI state.
+
 ### `lexxy:change`
 
 Fired whenever the editor content changes.

package/dist/lexxy.esm.js

@@ -1,8 +1,9 @@
 import DOMPurify from 'dompurify';
-import { $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isTextNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, COMMAND_PRIORITY_NORMAL, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $forEachSelectedTextNode, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { $isTextNode, TextNode, $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, COMMAND_PRIORITY_NORMAL, BLUR_COMMAND, FOCUS_COMMAND, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
 import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
-import { $isCodeNode, CodeNode, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP, normalizeCodeLang } from '@lexical/code';
+import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
@@ -11,12 +12,48 @@ import { DirectUpload } from '@rails/activestorage';
 import { marked } from 'marked';
 import 'prismjs/components/prism-ruby';
 
+const ALLOWED_HTML_TAGS = [ "a", "action-text-attachment", "b", "blockquote", "br", "code", "em",
+  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul" ];
+
+const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
+  "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
+  "previewable", "sgid", "src", "style", "title", "url", "width" ];
+
+const ALLOWED_STYLE_PROPERTIES = [ "color", "background-color" ];
+
+function styleFilterHook(_currentNode, hookEvent) {
+  if (hookEvent.attrName === "style" && hookEvent.attrValue) {
+    const styles = { ...getStyleObjectFromCSS(hookEvent.attrValue) };
+    const sanitizedStyles = { };
+
+    for (const property in styles) {
+      if (ALLOWED_STYLE_PROPERTIES.includes(property)) {
+        sanitizedStyles[property] = styles[property];
+      }
+    }
+
+    if (Object.keys(sanitizedStyles).length) {
+      hookEvent.attrValue = getCSSFromStyleObject(sanitizedStyles);
+    } else {
+      hookEvent.keepAttr = false;
+    }
+  }
+}
+
+DOMPurify.addHook("uponSanitizeAttribute", styleFilterHook);
+
 DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   if (data.tagName === "strong" || data.tagName === "em") {
     node.removeAttribute("class");
   }
 });
 
+DOMPurify.setConfig({
+  ALLOWED_TAGS: ALLOWED_HTML_TAGS,
+  ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
+  SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
+});
+
 function getNonce() {
   const element = document.head.querySelector("meta[name=csp-nonce]");
   return element?.content
@@ -53,6 +90,31 @@ function isPrintableCharacter(event) {
   return event.key.length === 1
 }
 
+function extendTextNodeConversion(conversionName, callback = (textNode => textNode)) {
+  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
+    ...conversionOutput,
+    forChild: (lexicalNode, parentNode) => {
+      const originalForChild = conversionOutput?.forChild ?? (x => x);
+      let childNode = originalForChild(lexicalNode, parentNode);
+
+      if ($isTextNode(childNode)) childNode = callback(childNode, element) ?? childNode;
+      return childNode
+    }
+  }))
+}
+
+function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
+  return (element) => {
+    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
+    if (!converter) return null
+
+    const conversionOutput = converter.conversion(element);
+    if (!conversionOutput) return conversionOutput
+
+    return callback(conversionOutput, element) ?? conversionOutput
+  }
+}
+
 class LexicalToolbarElement extends HTMLElement {
   constructor() {
     super();
@@ -83,6 +145,14 @@ class LexicalToolbarElement extends HTMLElement {
     this.#monitorSelectionChanges();
     this.#monitorHistoryChanges();
     this.#refreshToolbarOverflow();
+
+    this.toggleAttribute("connected", true);
+  }
+
+  get #dialogs() {
+    const dialogButtons = this.querySelectorAll("[data-dialog-target]");
+    const dialogTags = Array.from(dialogButtons).map(button => `lexxy-${button.dataset.dialogTarget}`);
+    return Array.from(this.querySelectorAll(dialogTags))
   }
 
   #bindButtons() {
@@ -108,15 +178,25 @@ class LexicalToolbarElement extends HTMLElement {
 
   // Not using popover because of CSS anchoring still not widely available.
   #toggleDialog(button) {
-    const dialog = this.querySelector("lexxy-link-dialog .link-dialog").parentNode;
+    const dialogTarget = button.dataset.dialogTarget;
+    const dialog = this.querySelector("lexxy-" + dialogTarget);
+    if (!dialog) return
 
     if (dialog.open) {
       dialog.close();
     } else {
-      dialog.show();
+      this.#closeOpenDialogs();
+      dialog.show(button);
     }
   }
 
+  #closeOpenDialogs() {
+    const openDialogs = this.querySelectorAll("dialog[open]");
+    openDialogs.forEach(openDialog => {
+      openDialog.closest(".lexxy-dialog").close();
+    });
+  }
+
   #bindHotkeys() {
     this.editorElement.addEventListener("keydown", (event) => {
       const buttons = this.querySelectorAll("[data-hotkey]");
@@ -154,6 +234,7 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
+        this.#updateDialogStates();
       });
     });
   }
@@ -174,14 +255,6 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
-  #setButtonDisabled(name, isDisabled) {
-    const button = this.querySelector(`[name="${name}"]`);
-    if (button) {
-      button.disabled = isDisabled;
-      button.setAttribute("aria-disabled", isDisabled.toString());
-    }
-  }
-
   #updateButtonStates() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
@@ -194,26 +267,32 @@ class LexicalToolbarElement extends HTMLElement {
     const isBold = selection.hasFormat("bold");
     const isItalic = selection.hasFormat("italic");
     const isStrikethrough = selection.hasFormat("strikethrough");
+    const isHighlight = selection.hasFormat("highlight");
+    const isInLink = this.#isInLink(anchorNode);
+    const isInQuote = $isQuoteNode(topLevelElement);
+    const isInHeading = $isHeadingNode(topLevelElement);
     const isInCode = $isCodeNode(topLevelElement) || selection.hasFormat("code");
     const isInList = this.#isInList(anchorNode);
     const listType = getListType(anchorNode);
-    const isInQuote = $isQuoteNode(topLevelElement);
-    const isInHeading = $isHeadingNode(topLevelElement);
-    const isInLink = this.#isInLink(anchorNode);
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
     this.#setButtonPressed("strikethrough", isStrikethrough);
+    this.#setButtonPressed("highlight", isHighlight);
+    this.#setButtonPressed("link", isInLink);
+    this.#setButtonPressed("quote", isInQuote);
+    this.#setButtonPressed("heading", isInHeading);
     this.#setButtonPressed("code", isInCode);
     this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
     this.#setButtonPressed("ordered-list", isInList && listType === "number");
-    this.#setButtonPressed("quote", isInQuote);
-    this.#setButtonPressed("heading", isInHeading);
-    this.#setButtonPressed("link", isInLink);
 
     this.#updateUndoRedoButtonStates();
   }
 
+  #updateDialogStates() {
+    this.#dialogs.forEach(dialog => dialog.updateStateCallback());
+  }
+
   #isInList(node) {
     let current = node;
     while (current) {
@@ -239,6 +318,14 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
+  #setButtonDisabled(name, isDisabled) {
+    const button = this.querySelector(`[name="${name}"]`);
+    if (button) {
+      button.disabled = isDisabled;
+      button.setAttribute("aria-disabled", isDisabled.toString());
+    }
+  }
+
   #toolbarIsOverflowing() {
     return this.scrollWidth > this.clientWidth
   }
@@ -249,6 +336,9 @@ class LexicalToolbarElement extends HTMLElement {
 
     this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
     this.#overflow.setAttribute("nonce", getNonce());
+
+    const isOverflowing = this.#overflowMenu.children.length > 0;
+    this.toggleAttribute("overflowing", isOverflowing);
   }
 
   get #overflow() {
@@ -266,7 +356,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #compactMenu() {
-    const buttons = this.#buttons.reverse();
+    const buttons = this.#buttonsWithSeparator.reverse();
     let movedToOverflow = false;
 
     for (const button of buttons) {
@@ -281,6 +371,10 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   get #buttons() {
+    return Array.from(this.querySelectorAll(":scope > button"))
+  }
+
+  get #buttonsWithSeparator() {
     return Array.from(this.querySelectorAll(":scope > button, :scope > [role=separator]"))
   }
 
@@ -300,12 +394,22 @@ class LexicalToolbarElement extends HTMLElement {
         </svg>
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
+      <lexxy-highlight-dialog class="lexxy-dialog lexxy-highlight-dialog">
+        <dialog class="highlight-dialog">
+          <div class="lexxy-highlight-dialog-content">
+            <div data-button-group="color" data-values="var(--highlight-1); var(--highlight-2); var(--highlight-3); var(--highlight-4); var(--highlight-5); var(--highlight-6); var(--highlight-7); var(--highlight-8); var(--highlight-9)"></div>
+            <div data-button-group="background-color" data-values="var(--highlight-bg-1); var(--highlight-bg-2); var(--highlight-bg-3); var(--highlight-bg-4); var(--highlight-bg-5); var(--highlight-bg-6); var(--highlight-bg-7); var(--highlight-bg-8); var(--highlight-bg-9)"></div>
+            <button data-command="removeHighlight" class="lexxy-highlight-dialog-reset">Remove all coloring</button>
+          </div>
+        </dialog>
+      </lexxy-highlight-dialog>
+
+      <button class="lexxy-editor__toolbar-button" type="button" name="highlight" title="Color highlight" data-dialog-target="highlight-dialog">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
       </button>
 
-      <lexxy-link-dialog class="lexxy-link-dialog">
-        <dialog class="link-dialog" closedby="any">
+      <lexxy-link-dialog class="lexxy-dialog lexxy-link-dialog">
+        <dialog class="link-dialog">
           <form method="dialog">
             <input type="url" placeholder="Enter a URL…" class="input" required>
             <div class="lexxy-dialog-actions">
@@ -316,6 +420,10 @@ class LexicalToolbarElement extends HTMLElement {
         </dialog>
       </lexxy-link-dialog>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 5C8.985 5 11 7.09 11 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.022.746a.563.563 0 01-.52-.36.602.602 0 01.067-.57l.055-.066.009-.009.041-.048a4.25 4.25 0 00.168-.21c.143-.188.336-.47.53-.84a6.743 6.743 0 00.75-2.605C3.705 13.994 2 12.038 2 9.667 2 7.089 4.015 5 6.5 5zM17.5 5C19.985 5 22 7.09 22 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.023.746a.563.563 0 01-.52-.36.602.602 0 01.068-.57l.055-.066.009-.009.041-.048c.039-.045.097-.115.168-.21a6.16 6.16 0 00.53-.84 6.745 6.745 0 00.75-2.605C14.705 13.994 13 12.038 13 9.667 13 7.089 15.015 5 17.5 5z"/></svg>
       </button>
@@ -343,9 +451,9 @@ class LexicalToolbarElement extends HTMLElement {
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447716 13 0 12.5523 0 12Z"/><path d="M4 5C4 3.89543 4.89543 3 6 3H18C19.1046 3 20 3.89543 20 5C20 6.10457 19.1046 7 18 7H6C4.89543 7 4 6.10457 4 5Z"/><path d="M4 19C4 17.8954 4.89543 17 6 17H18C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19Z"/></svg>
       </button>
-      
+ 
       <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
-      
+ 
       <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo" data-hotkey="cmd+z ctrl+z">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.64648 8.26531C7.93911 6.56386 10.7827 5.77629 13.624 6.05535C16.4655 6.33452 19.1018 7.66079 21.0195 9.77605C22.5839 11.5016 23.5799 13.6516 23.8936 15.9352C24.0115 16.7939 23.2974 17.4997 22.4307 17.4997C21.5641 17.4997 20.8766 16.7915 20.7148 15.9401C20.4295 14.4379 19.7348 13.0321 18.6943 11.8844C17.3 10.3464 15.3835 9.38139 13.3174 9.17839C11.2514 8.97546 9.18359 9.54856 7.5166 10.7858C6.38259 11.6275 5.48981 12.7361 4.90723 13.9997H8.5C9.3283 13.9997 9.99979 14.6714 10 15.4997C10 16.3281 9.32843 16.9997 8.5 16.9997H1.5C0.671573 16.9997 0 16.3281 0 15.4997V8.49968C0.000213656 7.67144 0.671705 6.99968 1.5 6.99968C2.3283 6.99968 2.99979 7.67144 3 8.49968V11.0212C3.7166 9.9704 4.60793 9.03613 5.64648 8.26531Z"/></svg>
       </button>
@@ -370,6 +478,12 @@ var theme = {
     italic: "lexxy-content__italic",
     strikethrough: "lexxy-content__strikethrough",
     underline: "lexxy-content__underline",
+    highlight: "lexxy-content__highlight"
+  },
+  list: {
+    nested: {
+      listitem: "lexxy-nested-listitem",
+    }
   },
   codeHighlight: {
     atrule: "code-token__attr",
@@ -417,24 +531,12 @@ var theme = {
   }
 };
 
-const VISUALLY_RELEVANT_ELEMENTS_SELECTOR = [
-  "img", "video", "audio", "iframe", "embed", "object", "picture", "source", "canvas", "svg", "math",
-  "form", "input", "textarea", "select", "button", "code", "blockquote", "hr"
-].join(",");
-
-const ALLOWED_HTML_TAGS = [ "a", "action-text-attachment", "b", "blockquote", "br", "code", "em",
-  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "ol", "p", "pre", "q", "s", "strong", "ul" ];
-
-const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
-  "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
-  "previewable", "sgid", "src", "title", "url", "width" ];
-
 function createElement(name, properties) {
   const element = document.createElement(name);
   for (const [ key, value ] of Object.entries(properties || {})) {
     if (key in element) {
       element[key] = value;
-    } else if (value !== null && value !== undefined ) {
+    } else if (value !== null && value !== undefined) {
       element.setAttribute(key, value);
     }
   }
@@ -466,18 +568,8 @@ function dispatchCustomEvent(element, name, detail) {
   element.dispatchEvent(event);
 }
 
-function containsVisuallyRelevantChildren(element) {
-  return element.querySelector(VISUALLY_RELEVANT_ELEMENTS_SELECTOR)
-}
-
 function sanitize(html) {
-  const sanitizedHtml = DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: ALLOWED_HTML_TAGS,
-    ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
-    SAFE_FOR_XML: false // So that it does not stripe attributes that contains serialized HTML (like content)
-  });
-
-  return sanitizedHtml
+  return DOMPurify.sanitize(html)
 }
 
 function dispatch(element, eventName, detail = null, cancelable = false) {
@@ -694,11 +786,10 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #createEditableCaption() {
     const caption = createElement("figcaption", { className: "attachment__caption" });
-    const input = createElement("input", {
-      type: "text",
-      class: "input",
+    const input = createElement("textarea", {
       value: this.caption,
-      placeholder: this.fileName
+      placeholder: this.fileName,
+      rows: "1"
     });
 
     input.addEventListener("focusin", () => input.placeholder = "Add caption...");
@@ -990,6 +1081,8 @@ const COMMANDS = [
   "strikethrough",
   "link",
   "unlink",
+  "toggleHighlight",
+  "removeHighlight",
   "rotateHeadingFormat",
   "insertUnorderedList",
   "insertOrderedList",
@@ -1012,6 +1105,7 @@ class CommandDispatcher {
     this.selection = editorElement.selection;
     this.contents = editorElement.contents;
     this.clipboard = editorElement.clipboard;
+    this.highlighter = editorElement.highlighter;
 
     this.#registerCommands();
     this.#registerDragAndDropHandlers();
@@ -1033,6 +1127,14 @@ class CommandDispatcher {
     this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
   }
 
+  dispatchToggleHighlight(styles) {
+    this.highlighter.toggle(styles);
+  }
+
+  dispatchRemoveHighlight() {
+    this.highlighter.remove();
+  }
+
   dispatchLink(url) {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -1133,6 +1235,7 @@ class CommandDispatcher {
     const input = createElement("input", {
       type: "file",
       multiple: true,
+      style: "display: none;",
       onchange: ({ target }) => {
         const files = Array.from(target.files);
         if (!files.length) return
@@ -1143,7 +1246,7 @@ class CommandDispatcher {
       }
     });
 
-    document.body.appendChild(input); // Append and remove just for the sake of making it testeable
+    this.editorElement.appendChild(input); // Append and remove just for the sake of making it testable
     input.click();
     setTimeout(() => input.remove(), 1000);
   }
@@ -1274,8 +1377,10 @@ class Selection {
 
   set current(selection) {
     if ($isNodeSelection(selection)) {
-      this._current = $getSelection();
-      this.#syncSelectedClasses();
+      this.editor.getEditorState().read(() => {
+        this._current = $getSelection();
+        this.#syncSelectedClasses();
+      });
     } else {
       this.editor.update(() => {
         this.#syncSelectedClasses();
@@ -1459,8 +1564,9 @@ class Selection {
 
     this._currentlySelectedKeys = new Set();
 
-    if (this.current) {
-      for (const node of this.current.getNodes()) {
+    const selection = $getSelection();
+    if (selection && $isNodeSelection(selection)) {
+      for (const node of selection.getNodes()) {
         this._currentlySelectedKeys.add(node.getKey());
       }
     }
@@ -2650,8 +2756,6 @@ class Contents {
       elements.forEach((element) => {
         wrappingNode.append(element);
       });
-
-      $setSelection(null);
     });
   }
 
@@ -3127,6 +3231,132 @@ class Clipboard {
   }
 }
 
+class Highlighter {
+  constructor(editorElement) {
+    this.editor = editorElement.editor;
+  }
+
+  toggle(styles) {
+    this.editor.update(() => {
+      this.#toggleSelectionStyles(styles);
+      $forEachSelectedTextNode(node => this.#syncHighlightWithStyle(node));
+    });
+  }
+
+  remove() {
+    this.toggle({ "color": undefined, "background-color": undefined });
+  }
+
+  #toggleSelectionStyles(styles) {
+    const selection = $getSelection();
+
+    for (const property in styles) {
+      const oldValue = $getSelectionStyleValueForProperty(selection, property);
+      const patch = { [property]: this.#toggleOrReplace(oldValue, styles[property]) };
+      $patchStyleText(selection, patch);
+    }
+  }
+
+  #toggleOrReplace(oldValue, newValue) {
+    return oldValue === newValue ? null : newValue
+  }
+
+  #syncHighlightWithStyle(node) {
+    if (this.#hasHighlightStyles(node) !== node.hasFormat("highlight")) {
+      node.toggleFormat("highlight");
+    }
+  }
+
+  #hasHighlightStyles(node) {
+    const styles = getStyleObjectFromCSS(node.getStyle());
+    return !!(styles.color || styles["background-color"])
+  }
+}
+
+class HighlightNode extends TextNode {
+  $config() {
+    return this.config("highlight", { extends: TextNode })
+  }
+
+  static importDOM() {
+    return {
+      mark: () => ({
+        conversion: extendTextNodeConversion("mark", applyHighlightStyle),
+        priority: 1
+      })
+    }
+  }
+}
+
+function applyHighlightStyle(textNode, element) {
+  const textColor = element.style?.color;
+  const backgroundColor = element.style?.backgroundColor;
+
+  let highlightStyle = "";
+  if (textColor && textColor !== "") highlightStyle += `color: ${textColor};`;
+  if (backgroundColor && backgroundColor !== "") highlightStyle += `background-color: ${backgroundColor};`;
+
+  if (highlightStyle.length) {
+    if (!textNode.hasFormat("highlight")) textNode.toggleFormat("highlight");
+    return textNode.setStyle(textNode.getStyle() + highlightStyle)
+  }
+}
+
+const TRIX_LANGUAGE_ATTR = "language";
+
+class TrixTextNode extends TextNode {
+  $config() {
+    return this.config("trix-text", { extends: TextNode })
+  }
+
+  static importDOM() {
+    return {
+      // em, span, and strong elements are directly styled in trix
+      em: (element) => onlyStyledElements(element, {
+        conversion: extendTextNodeConversion("i", applyHighlightStyle),
+        priority: 1
+      }),
+      span: (element) => onlyStyledElements(element, {
+        conversion: extendTextNodeConversion("mark", applyHighlightStyle),
+        priority: 1
+      }),
+      strong: (element) => onlyStyledElements(element, {
+        conversion: extendTextNodeConversion("b", applyHighlightStyle),
+        priority: 1
+      }),
+      // del => s
+      del: () => ({
+        conversion: extendTextNodeConversion("s", applyStrikethrough),
+        priority: 1
+      }),
+      // read "language" attribute and normalize
+      pre: (element) => onlyPreLanguageElements(element, {
+        conversion: extendConversion(CodeNode, "pre", applyLanguage),
+        priority: 1
+      })
+    }
+  }
+}
+
+function onlyStyledElements(element, conversion) {
+  const elementHighlighted = element.style.color !== "" || element.style.backgroundColor !== "";
+  return elementHighlighted ? conversion : null
+}
+
+function applyStrikethrough(textNode, element) {
+  if (!textNode.hasFormat("strikethrough")) textNode.toggleFormat("strikethrough");
+  return applyHighlightStyle(textNode, element)
+}
+
+function onlyPreLanguageElements(element, conversion) {
+  return element.hasAttribute(TRIX_LANGUAGE_ATTR) ? conversion : null
+}
+
+function applyLanguage(conversionOutput, element) {
+  const language = normalizeCodeLang(element.getAttribute(TRIX_LANGUAGE_ATTR));
+  conversionOutput.node.setLanguage(language);
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = true
@@ -3149,6 +3379,7 @@ class LexicalEditorElement extends HTMLElement {
     this.contents = new Contents(this);
     this.selection = new Selection(this);
     this.clipboard = new Clipboard(this);
+    this.highlighter = new Highlighter(this);
 
     CommandDispatcher.configureFor(this);
     this.#initialize();
@@ -3184,6 +3415,10 @@ class LexicalEditorElement extends HTMLElement {
     return this.internals.form
   }
 
+  get name() {
+    return this.getAttribute("name")
+  }
+
   get toolbarElement() {
     if (!this.#hasToolbar) return null
 
@@ -3259,6 +3494,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#registerComponents();
     this.#listenForInvalidatedNodes();
     this.#handleEnter();
+    this.#handleFocus();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#loadInitialValue();
@@ -3284,6 +3520,8 @@ class LexicalEditorElement extends HTMLElement {
 
   get #lexicalNodes() {
     const nodes = [
+      TrixTextNode,
+      HighlightNode,
       QuoteNode,
       HeadingNode,
       ListNode,
@@ -3437,6 +3675,14 @@ class LexicalEditorElement extends HTMLElement {
     );
   }
 
+  #handleFocus() {
+    // Lexxy handles focus and blur as commands
+    // see https://github.com/facebook/lexical/blob/d1a8e84fe9063a4f817655b346b6ff373aa107f0/packages/lexical/src/LexicalEvents.ts#L35
+    // and https://stackoverflow.com/a/72212077
+    this.editor.registerCommand(BLUR_COMMAND, () => { dispatch(this, "lexxy:blur"); }, COMMAND_PRIORITY_NORMAL);
+    this.editor.registerCommand(FOCUS_COMMAND, () => { dispatch(this, "lexxy:focus"); }, COMMAND_PRIORITY_NORMAL);
+  }
+
   #attachDebugHooks() {
     if (!LexicalEditorElement.debug) return
 
@@ -3475,7 +3721,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   get #isEmpty() {
-    return !this.editorContentElement.textContent.trim() && !containsVisuallyRelevantChildren(this.editorContentElement)
+    return [ "<p><br></p>", "<p></p>", "" ].includes(this.value.trim())
   }
 
   #setValidity() {
@@ -3515,33 +3761,98 @@ class LexicalEditorElement extends HTMLElement {
 
 customElements.define("lexxy-editor", LexicalEditorElement);
 
-class LinkDialog extends HTMLElement {
+class ToolbarDialog extends HTMLElement {
   connectedCallback() {
     this.dialog = this.querySelector("dialog");
-    this.input = this.querySelector("input");
+    if ("closedBy" in this.dialog.constructor.prototype) {
+      this.dialog.closedBy = "any";
+    }
+    this.#registerHandlers();
+  }
 
-    this.addEventListener("submit", this.#handleSubmit.bind(this));
-    this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink.bind(this));
-    this.addEventListener("keydown", this.#handleKeyDown.bind(this));
+  disconnectedCallback() {
+    this.#removeClickOutsideHandler();
   }
 
-  show(editor) {
-    this.input.value = this.#selectedLinkUrl;
+  updateStateCallback() { }
+
+  show(triggerButton) {
+    if (this.preventImmediateReopen) { return }
+
+    this.triggerButton = triggerButton;
+    this.#positionDialog();
     this.dialog.show();
+
+    this.#setupClickOutsideHandler();
   }
 
   close() {
     this.dialog.close();
   }
 
-  #handleSubmit(event) {
-    const command = event.submitter?.value;
-    this.#editor.dispatchCommand(command, this.input.value);
+  get toolbar() {
+    return this.closest("lexxy-toolbar")
   }
 
-  #handleUnlink(event) {
-    this.#editor.dispatchCommand("unlink");
-    this.close();
+  get editor() {
+    return this.toolbar.editor
+  }
+
+  get open() { return this.dialog.open }
+
+  #registerHandlers() {
+    this.#setupKeydownHandler();
+    this.dialog.addEventListener("cancel", this.#handleCancel.bind(this));
+    this.dialog.addEventListener("close", this.#handleClose.bind(this));
+  }
+
+  #handleClose() {
+    this.#removeClickOutsideHandler();
+    this.triggerButton = null;
+    this.editor.focus();
+  }
+
+  #handleCancel() {
+    this.preventImmediateReopen = true;
+    requestAnimationFrame(() => this.preventImmediateReopen = undefined);
+  }
+
+  #positionDialog() {
+    const left = this.triggerButton.offsetLeft;
+    this.dialog.style.insetInlineStart = `${left}px`;
+  }
+
+  #setupClickOutsideHandler() {
+    if (this.#browserHandlesClose || this.clickOutsideHandler) return
+
+    this.clickOutsideHandler = this.#handleClickOutside.bind(this);
+    document.addEventListener("click", this.clickOutsideHandler, true);
+  }
+
+  #removeClickOutsideHandler() {
+    if (!this.clickOutsideHandler) return
+
+    document.removeEventListener("click", this.clickOutsideHandler, true);
+    this.clickOutsideHandler = null;
+  }
+
+  #handleClickOutside({ target }) {
+    if (!this.dialog.open) return
+
+    const isClickInsideDialog = this.dialog.contains(target);
+    const isClickOnTrigger = this.triggerButton.contains(target);
+
+    if (!isClickInsideDialog && !isClickOnTrigger) {
+      this.close();
+    }
+  }
+
+  #setupKeydownHandler() {
+    if (!this.#browserHandlesClose) { this.addEventListener("keydown", this.#handleKeyDown.bind(this)); }
+  }
+
+  get #browserHandlesClose() {
+    return this.dialog.closedBy === "any"
   }
 
   #handleKeyDown(event) {
@@ -3550,11 +3861,44 @@ class LinkDialog extends HTMLElement {
       this.close();
     }
   }
+}
+
+class LinkDialog extends ToolbarDialog {
+  connectedCallback() {
+    super.connectedCallback();
+    this.input = this.querySelector("input");
+
+    this.#registerHandlers();
+  }
+
+  updateStateCallback() {
+    this.input.value = this.#selectedLinkUrl;
+  }
+
+  #registerHandlers() {
+    this.dialog.addEventListener("beforetoggle", this.#handleBeforeToggle.bind(this));
+    this.dialog.addEventListener("submit", this.#handleSubmit.bind(this));
+    this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink.bind(this));
+  }
+
+  #handleBeforeToggle({ newState }) {
+    this.input.required = newState === "open";
+  }
+
+  #handleSubmit(event) {
+    const command = event.submitter?.value;
+    this.editor.dispatchCommand(command, this.input.value);
+  }
+
+  #handleUnlink() {
+    this.editor.dispatchCommand("unlink");
+    this.close();
+  }
 
   get #selectedLinkUrl() {
     let url = "";
 
-    this.#editor.getEditorState().read(() => {
+    this.editor.getEditorState().read(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
 
@@ -3570,16 +3914,105 @@ class LinkDialog extends HTMLElement {
 
     return url
   }
-
-  get #editor() {
-    return this.closest("lexxy-toolbar").editor
-  }
 }
 
 // We should extend the native dialog and avoid the intermediary <dialog> but not
 // supported by Safari yet: customElements.define("lexxy-link-dialog", LinkDialog, { extends: "dialog" })
 customElements.define("lexxy-link-dialog", LinkDialog);
 
+const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
+const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
+
+class HighlightDialog extends ToolbarDialog {
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.#setUpButtons();
+    this.#registerHandlers();
+  }
+
+  updateStateCallback() {
+    this.#updateColorButtonStates($getSelection());
+  }
+
+  #registerHandlers() {
+    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick.bind(this));
+    this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick.bind(this)));
+  }
+
+  #setUpButtons() {
+    this.#buttonGroups.forEach(buttonGroup => {
+      this.#populateButtonGroup(buttonGroup);
+    });
+  }
+
+  #populateButtonGroup(buttonGroup) {
+    const values = buttonGroup.dataset.values?.split("; ") || [];
+    const attribute = buttonGroup.dataset.buttonGroup;
+    values.forEach((value, index) => {
+      buttonGroup.appendChild(this.#createButton(attribute, value, index));
+    });
+  }
+
+  #createButton(attribute, value, index) {
+    const button = document.createElement("button");
+    button.dataset.style = attribute;
+    button.style.setProperty(attribute, value);
+    button.dataset.value = value;
+    button.classList.add("lexxy-highlight-button");
+    button.name = attribute + "-" + index;
+    return button
+  }
+
+  #handleColorButtonClick(event) {
+    event.preventDefault();
+
+    const button = event.target.closest(APPLY_HIGHLIGHT_SELECTOR);
+    if (!button) return
+
+    const attribute = button.dataset.style;
+    const value = button.dataset.value;
+
+    this.editor.dispatchCommand("toggleHighlight", { [attribute]: value });
+    this.close();
+  }
+
+  #handleRemoveHighlightClick(event) {
+    event.preventDefault();
+
+    this.editor.dispatchCommand("removeHighlight");
+    this.close();
+  }
+
+  #updateColorButtonStates(selection) {
+    if (!$isRangeSelection(selection)) { return }
+
+    // Use null default, so "" indicates mixed highlighting
+    const textColor = $getSelectionStyleValueForProperty(selection, "color", null);
+    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", null);
+
+    this.#colorButtons.forEach(button => {
+      const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
+      button.setAttribute("aria-pressed", matchesSelection);
+    });
+
+    const hasHighlight = textColor !== null || backgroundColor !== null;
+    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
+  }
+
+  get #buttonGroups() {
+    return this.querySelectorAll("[data-button-group]")
+  }
+
+  get #colorButtons() {
+    return Array.from(this.querySelectorAll(APPLY_HIGHLIGHT_SELECTOR))
+  }
+}
+
+// We should extend the native dialog and avoid the intermediary <dialog> but not
+// supported by Safari yet: customElements.define("lexxy-hightlight-dialog", HighlightDialog, { extends: "dialog" })
+customElements.define("lexxy-highlight-dialog", HighlightDialog);
+
 class BaseSource {
   // Template method to override
   async buildListItems(filter = "") {
@@ -3781,9 +4214,17 @@ class LexicalPromptElement extends HTMLElement {
           const fullText = node.getTextContent();
           const charBeforeCursor = fullText[offset - 1];
 
+          // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
           if (charBeforeCursor === this.trigger) {
-            unregister();
-            this.#showPopover();
+            const isAtStart = offset === 1;
+
+            const charBeforeTrigger = offset > 1 ? fullText[offset - 2] : null;
+            const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+
+            if (isAtStart || isPrecededBySpaceOrNewline) {
+              unregister();
+              this.#showPopover();
+            }
           }
         }
       });
@@ -4028,7 +4469,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #handleSelectedOption(event) {
-    if (event.key !== " ") event.preventDefault();
+    event.preventDefault();
     event.stopPropagation();
     this.#optionWasSelected();
     return true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.20-beta",
+  "version": "0.1.21-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",