@37signals/lexxy 0.7.0-beta → 0.7.2-beta

package/dist/lexxy.esm.js

@@ -1,4 +1,4 @@
-import Prism from 'prismjs';
+import 'prismjs';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-markup-templating';
@@ -10,12 +10,15 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $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, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $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, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, PASTE_TAG, CLEAR_HISTORY_COMMAND, $addUpdateTag, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
 import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
-import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, RichTextExtension, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 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 { $getTableCellNodeFromLexicalNode, TableNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableCellNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
+import { createElement, createAttachmentFigure, isPreviewableImage, dispatchCustomEvent, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
+export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
+import { buildEditorFromExtensions } from '@lexical/extension';
 import { registerPlainText } from '@lexical/plain-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
@@ -61,8 +64,15 @@ class Configuration {
   }
 }
 
+function range(from, to) {
+  return [ ...Array(1 + to - from).keys() ].map(i => i + from)
+}
+
 const global = new Configuration({
-  attachmentTagName: "action-text-attachment"
+  attachmentTagName: "action-text-attachment",
+  attachmentContentTypeNamespace: "actiontext",
+  authenticatedUploads: false,
+  extensions: []
 });
 
 const presets = new Configuration({
@@ -72,6 +82,16 @@ const presets = new Configuration({
     multiLine: true,
     richText: true,
     toolbar: true,
+    highlight: {
+      buttons: {
+        color: range(1, 9).map(n => `var(--highlight-${n})`),
+        "background-color": range(1, 9).map(n => `var(--highlight-bg-${n})`),
+      },
+      permit: {
+        color: [],
+        "background-color": []
+      }
+    }
   }
 });
 
@@ -166,15 +186,21 @@ function isPrintableCharacter(event) {
   return event.key.length === 1
 }
 
-function extendTextNodeConversion(conversionName, callback = (textNode => textNode)) {
+function extendTextNodeConversion(conversionName, ...callbacks) {
   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
+
+      if ($isTextNode(childNode)) {
+        childNode = callbacks.reduce(
+          (childNode, callback) => callback(childNode, element) ?? childNode,
+          childNode
+        );
+        return childNode
+      }
     }
   }))
 }
@@ -206,6 +232,58 @@ function hasHighlightStyles(cssOrStyles) {
   return !!(styles.color || styles["background-color"])
 }
 
+class StyleCanonicalizer {
+  constructor(property, allowedValues= []) {
+    this._property = property;
+    this._allowedValues = allowedValues;
+    this._canonicalValues = this.#allowedValuesIdentityObject;
+  }
+
+  applyCanonicalization(css) {
+    const styles = { ...getStyleObjectFromCSS(css) };
+
+    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
+    if (!styles[this._property]) {
+      delete styles[this._property];
+    }
+
+    return getCSSFromStyleObject(styles)
+  }
+
+  getCanonicalAllowedValue(value) {
+    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  }
+
+  // Private
+
+  get #allowedValuesIdentityObject() {
+    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  }
+
+  #resolveCannonicalValue(value) {
+    let index = this.#computedAllowedValues.indexOf(value);
+    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
+    return index === -1 ? null : this._allowedValues[index]
+  }
+
+  get #computedAllowedValues() {
+    return this._computedAllowedValues ||= this._allowedValues.map(
+      value => getComputedStyleForProperty(this._property, value)
+    )
+  }
+}
+
+function getComputedStyleForProperty(property, value) {
+  const style = `${property}: ${value};`;
+
+  // the element has to be attached to the DOM have computed styles
+  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
+  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
+  element.remove();
+
+  return computedStyle
+}
+
 function handleRollingTabIndex(elements, event) {
   const previousActiveElement = document.activeElement;
 
@@ -629,8 +707,8 @@ class LexicalToolbarElement extends HTMLElement {
           <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>
         </summary>
         <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-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>
+          <div data-button-group="color"></div>
+          <div data-button-group="background-color"></div>
           <button data-command="removeHighlight" class="lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
         </lexxy-highlight-dropdown>
       </details>
@@ -773,59 +851,6 @@ var theme = {
   }
 };
 
-function createElement(name, properties, content = "") {
-  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) {
-      element.setAttribute(key, value);
-    }
-  }
-  if (content) {
-    element.innerHTML = content;
-  }
-  return element
-}
-
-function parseHtml(html) {
-  const parser = new DOMParser();
-  return parser.parseFromString(html, "text/html")
-}
-
-function createAttachmentFigure(contentType, isPreviewable, fileName) {
-  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
-  return createElement("figure", {
-    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
-    "data-content-type": contentType
-  })
-}
-
-function isPreviewableImage(contentType) {
-  return contentType.startsWith("image/") && !contentType.includes("svg")
-}
-
-function dispatchCustomEvent(element, name, detail) {
-  const event = new CustomEvent(name, {
-    detail: detail,
-    bubbles: true,
-  });
-  element.dispatchEvent(event);
-}
-
-function sanitize(html) {
-  return DOMPurify.sanitize(html, buildConfig())
-}
-
-function dispatch(element, eventName, detail = null, cancelable = false) {
-  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
-}
-
-function generateDomId(prefix) {
-  const randomPart = Math.random().toString(36).slice(2, 10);
-  return `${prefix}-${randomPart}`
-}
-
 function bytesToHumanSize(bytes) {
   if (bytes === 0) return "0 B"
   const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
@@ -849,9 +874,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   static importDOM() {
     return {
-      [Lexxy.global.get("attachmentTagName")]: (attachment) => {
+      [this.TAG_NAME]: () => {
         return {
-          conversion: () => ({
+          conversion: (attachment) => ({
             node: new ActionTextAttachmentNode({
               sgid: attachment.getAttribute("sgid"),
               src: attachment.getAttribute("url"),
@@ -864,13 +889,12 @@ class ActionTextAttachmentNode extends DecoratorNode {
               width: attachment.getAttribute("width"),
               height: attachment.getAttribute("height")
             })
-          }),
-          priority: 1
+          }), priority: 1
         }
       },
-      "img": (img) => {
+      "img": () => {
         return {
-          conversion: () => ({
+          conversion: (img) => ({
             node: new ActionTextAttachmentNode({
               src: img.getAttribute("src"),
               caption: img.getAttribute("alt") || "",
@@ -878,32 +902,37 @@ class ActionTextAttachmentNode extends DecoratorNode {
               width: img.getAttribute("width"),
               height: img.getAttribute("height")
             })
-          }),
-          priority: 1
+          }), priority: 1
         }
       },
-      "video": (video) => {
-        const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
-        const fileName = videoSource?.split("/")?.pop();
-        const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
-
+      "video": () => {
         return {
-          conversion: () => ({
-            node: new ActionTextAttachmentNode({
-              src: videoSource,
-              fileName: fileName,
-              contentType: contentType
-            })
-          }),
-          priority: 1
+          conversion: (video) => {
+            const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
+            const fileName = videoSource?.split("/")?.pop();
+            const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
+
+            return {
+              node: new ActionTextAttachmentNode({
+                src: videoSource,
+                fileName: fileName,
+                contentType: contentType
+              })
+            }
+          }, priority: 1
         }
       }
     }
   }
 
-  constructor({ sgid, src, previewable, altText, caption, contentType, fileName, fileSize, width, height }, key) {
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, src, previewable, altText, caption, contentType, fileName, fileSize, width, height }, key) {
     super(key);
 
+    this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
     this.src = src;
     this.previewable = previewable;
@@ -919,7 +948,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
   createDOM() {
     const figure = this.createAttachmentFigure();
 
-    figure.addEventListener("click", (event) => {
+    figure.addEventListener("click", () => {
       this.#select(figure);
     });
 
@@ -939,7 +968,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   getTextContent() {
-    return `[${ this.caption || this.fileName }]\n\n`
+    return `[${this.caption || this.fileName}]\n\n`
   }
 
   isInline() {
@@ -947,7 +976,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const attachment = createElement(Lexxy.global.get("attachmentTagName"), {
+    const attachment = createElement(this.tagName, {
       sgid: this.sgid,
       previewable: this.previewable || null,
       url: this.src,
@@ -968,6 +997,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return {
       type: "action_text_attachment",
       version: 1,
+      tagName: this.tagName,
       sgid: this.sgid,
       src: this.src,
       previewable: this.previewable,
@@ -1105,8 +1135,9 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return null
   }
 
-  constructor({ file, uploadUrl, blobUrlTemplate, editor, progress }, key) {
-    super({ contentType: file.type }, key);
+  constructor(node, key) {
+    const { file, uploadUrl, blobUrlTemplate, editor, progress } = node;
+    super({ ...node, contentType: file.type }, key);
     this.file = file;
     this.uploadUrl = uploadUrl;
     this.blobUrlTemplate = blobUrlTemplate;
@@ -1191,11 +1222,17 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
 
   async #startUpload(progressBar, figure) {
     const { DirectUpload } = await import('@rails/activestorage');
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
 
     const upload = new DirectUpload(this.file, this.uploadUrl, this);
 
     upload.delegate = {
+      directUploadWillCreateBlobWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+      },
       directUploadWillStoreFileWithXHR: (request) => {
+        if (shouldAuthenticateUploads) request.withCredentials = true;
+
         request.upload.addEventListener("progress", (event) => {
           this.editor.update(() => {
             progressBar.value = Math.round(event.loaded / event.total * 100);
@@ -1226,11 +1263,12 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       const image = figure.querySelector("img");
 
       const src = this.blobUrlTemplate
-                    .replace(":signed_id", blob.signed_id)
-                    .replace(":filename", encodeURIComponent(blob.filename));
+        .replace(":signed_id", blob.signed_id)
+        .replace(":filename", encodeURIComponent(blob.filename));
       const latest = $getNodeByKey(this.getKey());
       if (latest) {
         latest.replace(new ActionTextAttachmentNode({
+          tagName: this.tagName,
           sgid: blob.attachable_sgid,
           src: blob.previewable ? blob.url : src,
           altText: blob.filename,
@@ -1769,7 +1807,14 @@ class Selection {
 
   placeCursorAtTheEnd() {
     this.editor.update(() => {
-      $getRoot().selectEnd();
+      const root = $getRoot();
+      const lastDescendant = root.getLastDescendant();
+
+      if (lastDescendant && $isTextNode(lastDescendant)) {
+        lastDescendant.selectEnd();
+      } else {
+        root.selectEnd();
+      }
     });
   }
 
@@ -2384,6 +2429,10 @@ class Selection {
   }
 }
 
+function sanitize(html) {
+  return DOMPurify.sanitize(html, buildConfig())
+}
+
 // Prevent the hardcoded background color
 // A background color value is set by Lexical if background is null:
 // https://github.com/facebook/lexical/blob/5bbbe849bd229e1db0e7b536e6a919520ada7bb2/packages/lexical-table/src/LexicalTableCellNode.ts#L187
@@ -2474,15 +2523,15 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   static importDOM() {
+
     return {
-      [Lexxy.global.get("attachmentTagName")]: (attachment) => {
-        const content = attachment.getAttribute("content");
-        if (!attachment.getAttribute("content")) {
+      [this.TAG_NAME]: (element) => {
+        if (!element.getAttribute("content")) {
           return null
         }
 
         return {
-          conversion: () => {
+          conversion: (attachment) => {
             // Preserve initial space if present since Lexical removes it
             const nodes = [];
             const previousSibling = attachment.previousSibling;
@@ -2492,7 +2541,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
 
             nodes.push(new CustomActionTextAttachmentNode({
               sgid: attachment.getAttribute("sgid"),
-              innerHtml: JSON.parse(content),
+              innerHtml: JSON.parse(attachment.getAttribute("content")),
               contentType: attachment.getAttribute("content-type")
             }));
 
@@ -2506,16 +2555,23 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     }
   }
 
-  constructor({ sgid, contentType, innerHtml }, key) {
+  static get TAG_NAME() {
+    return Lexxy.global.get("attachmentTagName")
+  }
+
+  constructor({ tagName, sgid, contentType, innerHtml }, key) {
     super(key);
 
+    const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+
+    this.tagName = tagName || CustomActionTextAttachmentNode.TAG_NAME;
     this.sgid = sgid;
-    this.contentType = contentType || "application/vnd.actiontext.unknown";
+    this.contentType = contentType || `application/vnd.${contentTypeNamespace}.unknown`;
     this.innerHtml = innerHtml;
   }
 
   createDOM() {
-    const figure = createElement(Lexxy.global.get("attachmentTagName"), { "content-type": this.contentType, "data-lexxy-decorator": true });
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
     figure.addEventListener("click", (event) => {
       dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
@@ -2539,7 +2595,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 
   exportDOM() {
-    const attachment = createElement(Lexxy.global.get("attachmentTagName"), {
+    const attachment = createElement(this.tagName, {
       sgid: this.sgid,
       content: JSON.stringify(this.innerHtml),
       "content-type": this.contentType
@@ -2552,6 +2608,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return {
       type: "custom_action_text_attachment",
       version: 1,
+      tagName: this.tagName,
       sgid: this.sgid,
       contentType: this.contentType,
       innerHtml: this.innerHtml
@@ -3702,133 +3759,203 @@ class Clipboard {
   }
 }
 
-class Highlighter {
-  constructor(editorElement) {
-    this.editor = editorElement.editor;
+class Extensions {
+
+  constructor(lexxyElement) {
+    this.lexxyElement = lexxyElement;
 
-    this.#registerHighlightTransform();
+    this.enabledExtensions = this.#initializeExtensions();
   }
 
-  toggle(styles) {
-    this.editor.update(() => {
-      this.#toggleSelectionStyles(styles);
-    });
+  get lexicalExtensions() {
+    return this.enabledExtensions.map(ext => ext.lexicalExtension).filter(Boolean)
   }
 
-  remove() {
-    this.toggle({ "color": null, "background-color": null });
+  initializeToolbars() {
+    if (this.#lexxyToolbar) {
+      this.enabledExtensions.forEach(ext => ext.initializeToobar(this.#lexxyToolbar));
+    }
   }
 
-  #registerHighlightTransform() {
-    return this.editor.registerNodeTransform(TextNode, (textNode) => {
-      this.#syncHighlightWithStyle(textNode);
-    })
+  get #lexxyToolbar() {
+    return this.lexxyElement.toolbar
   }
 
-  #toggleSelectionStyles(styles) {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return
+  #initializeExtensions() {
+    const extensionDefinitions = Lexxy.global.get("extensions");
 
-    const patch = {};
-    for (const property in styles) {
-      const oldValue = $getSelectionStyleValueForProperty(selection, property);
-      patch[property] = this.#toggleOrReplace(oldValue, styles[property]);
+    return extensionDefinitions.map(
+      extension => new extension(this.lexxyElement)
+    ).filter(extension => extension.enabled)
+  }
+}
+
+const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
+
+const hasPastedStylesState = createState("hasPastedStyles", {
+  parse: (value) => value || false
+});
+
+const HighlightExtension = defineExtension({
+  dependencies: [ RichTextExtension ],
+  name: "lexxy/highlight",
+  config: {
+    color: { buttons: [], permit: [] },
+    "background-color": { buttons: [], permit: [] }
+  },
+  html: {
+    import: {
+      mark: $markConversion
     }
+  },
+  register(editor, config) {
+    const canonicalizers = buildCanonicalizers(config);
 
-    $patchStyleText(selection, patch);
+    editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL);
+    editor.registerNodeTransform(TextNode, $syncHighlightWithStyle);
+    editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers));
   }
+});
 
-  #toggleOrReplace(oldValue, newValue) {
-    return oldValue === newValue ? null : newValue
+function $applyHighlightStyle(textNode, element) {
+  const elementStyles = {
+    color: element.style?.color,
+    "background-color": element.style?.backgroundColor
+  };
+
+  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
+  const highlightStyle = getCSSFromStyleObject(elementStyles);
+
+  if (highlightStyle.length) {
+    return textNode.setStyle(textNode.getStyle() + highlightStyle)
   }
+}
 
-  #syncHighlightWithStyle(node) {
-    if (hasHighlightStyles(node.getStyle()) !== node.hasFormat("highlight")) {
-      node.toggleFormat("highlight");
-    }
+function $markConversion() {
+  return {
+    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+    priority: 1
   }
 }
 
-class HighlightNode extends TextNode {
-  $config() {
-    return this.config("highlight", { extends: TextNode })
+function buildCanonicalizers(config) {
+  return [
+    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
+  ]
+}
+
+function $toggleSelectionStyles(styles) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return
+
+  const patch = {};
+  for (const property in styles) {
+    const oldValue = $getSelectionStyleValueForProperty(selection, property);
+    patch[property] = toggleOrReplace(oldValue, styles[property]);
   }
 
-  static importDOM() {
-    return {
-      mark: () => ({
-        conversion: extendTextNodeConversion("mark", applyHighlightStyle),
-        priority: 1
-      })
-    }
+  $patchStyleText(selection, patch);
+}
+
+function toggleOrReplace(oldValue, newValue) {
+  return oldValue === newValue ? null : newValue
+}
+
+function $syncHighlightWithStyle(textNode) {
+  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
+    textNode.toggleFormat("highlight");
   }
 }
 
-function applyHighlightStyle(textNode, element) {
-  const textColor = element.style?.color;
-  const backgroundColor = element.style?.backgroundColor;
+function $canonicalizePastedStyles(textNode, canonicalizers = []) {
+  if ($hasPastedStyles(textNode)) {
+    $setPastedStyles(textNode, false);
 
-  let highlightStyle = "";
-  if (textColor && textColor !== "") highlightStyle += `color: ${textColor};`;
-  if (backgroundColor && backgroundColor !== "") highlightStyle += `background-color: ${backgroundColor};`;
+    const canonicalizedCSS = canonicalizers.reduce((css, canonicalizer) => {
+      return canonicalizer.applyCanonicalization(css)
+    }, textNode.getStyle());
 
-  if (highlightStyle.length) {
-    if (!textNode.hasFormat("highlight")) textNode.toggleFormat("highlight");
-    return textNode.setStyle(textNode.getStyle() + highlightStyle)
+    textNode.setStyle(canonicalizedCSS);
   }
 }
 
-const TRIX_LANGUAGE_ATTR = "language";
+function $setPastedStyles(textNode, value = true) {
+  $setState(textNode, hasPastedStylesState, value);
+}
+
+function $hasPastedStyles(textNode) {
+  return $getState(textNode, hasPastedStylesState)
+}
+
+class Highlighter {
 
-class TrixTextNode extends TextNode {
-  $config() {
-    return this.config("trix-text", { extends: TextNode })
+  constructor(editorElement) {
+    this.editorElement = editorElement;
   }
 
-  static importDOM() {
-    return {
-      // em, span, and strong elements are directly styled in trix
+  get editor() {
+    return this.editorElement.editor
+  }
+
+  get lexicalExtension() {
+    return [ HighlightExtension, this.editorElement.config.get("highlight") ]
+  }
+
+  toggle(styles) {
+    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
+  }
+
+  remove() {
+    this.toggle({ "color": null, "background-color": null });
+  }
+}
+
+const TRIX_LANGUAGE_ATTR = "language";
+
+const TrixContentExtension = defineExtension({
+  name: "lexxy/trix-content",
+  html: {
+    import: {
       em: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("i", applyHighlightStyle),
+        conversion: extendTextNodeConversion("i", $applyHighlightStyle),
         priority: 1
       }),
       span: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("mark", applyHighlightStyle),
+        conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
         priority: 1
       }),
       strong: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("b", applyHighlightStyle),
+        conversion: extendTextNodeConversion("b", $applyHighlightStyle),
         priority: 1
       }),
-      // del => s
       del: () => ({
-        conversion: extendTextNodeConversion("s", applyStrikethrough),
+        conversion: extendTextNodeConversion("s", $applyStrikethrough, $applyHighlightStyle),
         priority: 1
       }),
-      // read "language" attribute and normalize
       pre: (element) => onlyPreLanguageElements(element, {
-        conversion: extendConversion(CodeNode, "pre", applyLanguage),
+        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) {
+function $applyStrikethrough(textNode) {
   if (!textNode.hasFormat("strikethrough")) textNode.toggleFormat("strikethrough");
-  return applyHighlightStyle(textNode, element)
+  return textNode
 }
 
 function onlyPreLanguageElements(element, conversion) {
   return element.hasAttribute(TRIX_LANGUAGE_ATTR) ? conversion : null
 }
 
-function applyLanguage(conversionOutput, element) {
+function $applyLanguage(conversionOutput, element) {
   const language = normalizeCodeLang(element.getAttribute(TRIX_LANGUAGE_ATTR));
   conversionOutput.node.setLanguage(language);
 }
@@ -3852,11 +3979,14 @@ class LexicalEditorElement extends HTMLElement {
   connectedCallback() {
     this.id ??= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
+    this.extensions = new Extensions(this);
+    this.highlighter = new Highlighter(this);
+
     this.editor = this.#createEditor();
+
     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();
@@ -3864,6 +3994,8 @@ class LexicalEditorElement extends HTMLElement {
     requestAnimationFrame(() => dispatch(this, "lexxy:initialize"));
     this.toggleAttribute("connected", true);
 
+    this.#handleAutofocus();
+
     this.valueBeforeDisconnect = null;
   }
 
@@ -3888,10 +4020,6 @@ class LexicalEditorElement extends HTMLElement {
     this.editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
   }
 
-  focus() {
-    this.editor.focus();
-  }
-
   toString() {
     if (!this.cachedStringValue) {
       this.editor?.getEditorState().read(() => {
@@ -3966,6 +4094,10 @@ class LexicalEditorElement extends HTMLElement {
     return parseInt(this.editorContentElement?.getAttribute("tabindex") ?? "0")
   }
 
+  focus() {
+    this.editor.focus(() => this.#onFocus());
+  }
+
   get value() {
     if (!this.cachedValue) {
       this.editor?.getEditorState().read(() => {
@@ -4028,29 +4160,43 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #createEditor() {
-    this.editorContentElement = this.editorContentElement || this.#createEditorContentElement();
+    this.editorContentElement ||= this.#createEditorContentElement();
 
-    const editor = createEditor({
-      namespace: "LexicalEditor",
-      onError(error) {
-        throw error
+    const editor = buildEditorFromExtensions({
+        name: "lexxy/core",
+        namespace: "Lexxy",
+        theme: theme,
+        nodes: this.#lexicalNodes
       },
-      theme: theme,
-      nodes: this.#lexicalNodes
-    });
+      ...this.#lexicalExtensions
+    );
 
     editor.setRootElement(this.editorContentElement);
 
     return editor
   }
 
+  get #lexicalExtensions() {
+    const extensions = [ ];
+    const richTextExtensions = [
+      this.highlighter.lexicalExtension,
+      TrixContentExtension
+    ];
+
+    if (this.supportsRichText) {
+      extensions.push(...richTextExtensions);
+    }
+
+    extensions.push(...this.extensions.lexicalExtensions);
+
+    return extensions
+  }
+
   get #lexicalNodes() {
     const nodes = [ CustomActionTextAttachmentNode ];
 
     if (this.supportsRichText) {
       nodes.push(
-        TrixTextNode,
-        HighlightNode,
         QuoteNode,
         HeadingNode,
         ListNode,
@@ -4239,6 +4385,20 @@ class LexicalEditorElement extends HTMLElement {
     this.editor.registerCommand(FOCUS_COMMAND, () => { dispatch(this, "lexxy:focus"); }, COMMAND_PRIORITY_NORMAL);
   }
 
+  #onFocus() {
+    if (this.isEmpty) {
+      this.selection.placeCursorAtTheEnd();
+    }
+  }
+
+  #handleAutofocus() {
+    if (!document.querySelector(":focus")) {
+      if (this.hasAttribute("autofocus") && document.querySelector("[autofocus]") === this) {
+        this.focus();
+      }
+    }
+  }
+
   #handleTables() {
     if (this.supportsRichText) {
       this.removeTableSelectionObserver = registerTableSelectionObserver(this.editor, true);
@@ -4353,6 +4513,10 @@ class ToolbarDropdown extends HTMLElement {
     return this.closest("lexxy-toolbar")
   }
 
+  get editorElement() {
+    return this.toolbar.editorElement
+  }
+
   get editor() {
     return this.toolbar.editor
   }
@@ -4484,15 +4648,26 @@ const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 const NO_STYLE = Symbol("no_style");
 
 class HighlightDropdown extends ToolbarDropdown {
+  #initialized = false
+
   connectedCallback() {
     super.connectedCallback();
+    this.#registerToggleHandler();
+  }
+
+  #ensureInitialized() {
+    if (this.#initialized) return
 
     this.#setUpButtons();
-    this.#registerHandlers();
+    this.#registerButtonHandlers();
+    this.#initialized = true;
   }
 
-  #registerHandlers() {
+  #registerToggleHandler() {
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+  }
+
+  #registerButtonHandlers() {
     this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick.bind(this)));
     this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick.bind(this));
   }
@@ -4504,8 +4679,8 @@ class HighlightDropdown extends ToolbarDropdown {
   }
 
   #populateButtonGroup(buttonGroup) {
-    const values = buttonGroup.dataset.values?.split("; ") || [];
     const attribute = buttonGroup.dataset.buttonGroup;
+    const values = this.editorElement.config.get(`highlight.buttons.${attribute}`) || [];
     values.forEach((value, index) => {
       buttonGroup.appendChild(this.#createButton(attribute, value, index));
     });
@@ -4523,6 +4698,8 @@ class HighlightDropdown extends ToolbarDropdown {
 
   #handleToggle({ newState }) {
     if (newState === "open") {
+      this.#ensureInitialized();
+
       this.editor.getEditorState().read(() => {
         this.#updateColorButtonStates($getSelection());
       });
@@ -4616,7 +4793,7 @@ class TableHandler extends HTMLElement {
   }
 
   get #tableHandlerButtons() {
-    return Array.from(this.buttonsContainer.querySelectorAll("button, details > summary"))
+    return Array.from(this.querySelectorAll("button, details > summary"))
   }
 
   #registerKeyboardShortcuts() {
@@ -4629,7 +4806,7 @@ class TableHandler extends HTMLElement {
 
   #handleKeyDown = (event) => {
     if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
-      const firstButton = this.buttonsContainer?.querySelector("button, [tabindex]:not([tabindex='-1'])");
+      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
       this.#setFocusStateOnSelectedCell();
       firstButton?.focus();
     } else if (event.key === "Escape") {
@@ -4654,22 +4831,16 @@ class TableHandler extends HTMLElement {
   }
 
   #setUpButtons() {
-    this.buttonsContainer = createElement("div", {
-      className: "lexxy-table-handle-buttons"
-    });
-
-    this.buttonsContainer.appendChild(this.#createRowButtonsContainer());
-    this.buttonsContainer.appendChild(this.#createColumnButtonsContainer());
+    this.appendChild(this.#createRowButtonsContainer());
+    this.appendChild(this.#createColumnButtonsContainer());
 
     this.moreMenu = this.#createMoreMenu();
-    this.buttonsContainer.appendChild(this.moreMenu);
-    this.buttonsContainer.addEventListener("keydown", this.#handleTableHandlerKeydown);
-
-    this.#editorElement.appendChild(this.buttonsContainer);
+    this.appendChild(this.moreMenu);
+    this.addEventListener("keydown", this.#handleTableHandlerKeydown);
   }
 
   #showTableHandlerButtons() {
-    this.buttonsContainer.style.display = "flex";
+    this.style.display = "flex";
     this.#closeMoreMenu();
 
     this.#updateRowColumnCount();
@@ -4677,7 +4848,7 @@ class TableHandler extends HTMLElement {
   }
 
   #hideTableHandlerButtons() {
-    this.buttonsContainer.style.display = "none";
+    this.style.display = "none";
     this.#closeMoreMenu();
 
     this.#setTableFocusState(false);
@@ -4693,8 +4864,8 @@ class TableHandler extends HTMLElement {
 
     const relativeTop = tableRect.top - editorRect.top;
     const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
-    this.buttonsContainer.style.top = `${relativeTop}px`;
-    this.buttonsContainer.style.left = `${relativeCenter}px`;
+    this.style.top = `${relativeTop}px`;
+    this.style.left = `${relativeCenter}px`;
   }
 
   #updateRowColumnCount() {
@@ -5561,30 +5732,57 @@ class LexicalPromptElement extends HTMLElement {
 
     if (!promptItem) { return }
 
-    const template = promptItem.querySelector("template[type='editor']");
+    const templates = Array.from(promptItem.querySelectorAll("template[type='editor']"));
     const stringToReplace = `${this.trigger}${this.#editorContents.textBackUntil(this.trigger)}`;
 
     if (this.hasAttribute("insert-editable-text")) {
-      this.#insertTemplateAsEditableText(template, stringToReplace);
+      this.#insertTemplatesAsEditableText(templates, stringToReplace);
     } else {
-      this.#insertTemplateAsAttachment(promptItem, template, stringToReplace);
+      this.#insertTemplatesAsAttachments(templates, stringToReplace, promptItem.getAttribute("sgid"));
     }
   }
 
-  #insertTemplateAsEditableText(template, stringToReplace) {
+  #insertTemplatesAsEditableText(templates, stringToReplace) {
     this.#editor.update(() => {
-      const nodes = $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`));
+      const nodes = templates.flatMap(template => this.#buildEditableTextNodes(template));
       this.#editorContents.replaceTextBackUntil(stringToReplace, nodes);
     });
   }
 
-  #insertTemplateAsAttachment(promptItem, template, stringToReplace) {
+  #buildEditableTextNodes(template) {
+    return $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`))
+  }
+
+  #insertTemplatesAsAttachments(templates, stringToReplace, fallbackSgid = null) {
     this.#editor.update(() => {
-      const attachmentNode = new CustomActionTextAttachmentNode({ sgid: promptItem.getAttribute("sgid"), contentType: `application/vnd.actiontext.${this.name}`, innerHtml: template.innerHTML });
-      this.#editorContents.replaceTextBackUntil(stringToReplace, attachmentNode);
+      const attachmentNodes = this.#buildAttachmentNodes(templates, fallbackSgid);
+      const spacedAttachmentNodes = attachmentNodes.flatMap(node => [ node, this.#getSpacerTextNode() ]).slice(0, -1);
+      this.#editorContents.replaceTextBackUntil(stringToReplace, spacedAttachmentNodes);
     });
   }
 
+  #buildAttachmentNodes(templates, fallbackSgid = null) {
+    return templates.map(
+      template => this.#buildAttachmentNode(
+        template.innerHTML,
+        template.getAttribute("content-type") || this.#defaultPromptContentType,
+        template.getAttribute("sgid") || fallbackSgid
+      ))
+  }
+
+  #getSpacerTextNode() {
+    return $createTextNode(" ")
+  }
+
+  get #defaultPromptContentType() {
+    const attachmentContentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+    return `application/vnd.${attachmentContentTypeNamespace}.${this.name}`
+  }
+
+  #buildAttachmentNode(innerHtml, contentType, sgid) {
+    return new CustomActionTextAttachmentNode({ sgid, contentType, innerHtml })
+  }
+
   get #editorContents() {
     return this.#editorElement.contents
   }
@@ -5636,13 +5834,12 @@ class CodeLanguagePicker extends HTMLElement {
       this.#updateCodeBlockLanguage(this.languagePickerElement.value);
     });
 
-    this.languagePickerElement.style.position = "absolute";
     this.languagePickerElement.setAttribute("nonce", getNonce());
-    this.editorElement.appendChild(this.languagePickerElement);
+    this.appendChild(this.languagePickerElement);
   }
 
   #createLanguagePicker() {
-    const selectElement = createElement("select", { hidden: true, className: "lexxy-code-language-picker", "aria-label": "Pick a language…", name: "lexxy-code-language" });
+    const selectElement = createElement("select", { className: "lexxy-code-language-picker", "aria-label": "Pick a language…", name: "lexxy-code-language" });
 
     for (const [ value, label ] of Object.entries(this.#languages)) {
       const option = document.createElement("option");
@@ -5739,43 +5936,49 @@ class CodeLanguagePicker extends HTMLElement {
     const editorRect = this.editorElement.getBoundingClientRect();
     const relativeTop = codeRect.top - editorRect.top;
 
-    this.languagePickerElement.style.top = `${relativeTop}px`;
+    this.style.top = `${relativeTop}px`;
   }
 
   #showLanguagePicker() {
-    this.languagePickerElement.hidden = false;
+    this.hidden = false;
   }
 
   #hideLanguagePicker() {
-    this.languagePickerElement.hidden = true;
+    this.hidden = true;
   }
 }
 
 customElements.define("lexxy-code-language-picker", CodeLanguagePicker);
 
-function highlightAll() {
-  const elements = document.querySelectorAll("pre[data-language]");
+class LexxyExtension {
+  #editorElement
 
-  elements.forEach(preElement => {
-    highlightElement(preElement);
-  });
-}
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+  }
 
-function highlightElement(preElement) {
-  const language = preElement.getAttribute("data-language");
-  let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
+  get editorElement() {
+    return this.#editorElement
+  }
 
-  const grammar = Prism.languages?.[language];
-  if (!grammar) return
+  get editorConfig() {
+    return this.#editorElement.config
+  }
 
-  // unescape HTML entities in the code block
-  code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
+  // optional: defaults to true
+  get enabled() {
+    return true
+  }
+
+  get lexicalExtension() {
+    return null
+  }
+
+  initializeToolbar(_lexxyToolbar) {
 
-  const highlightedHtml = Prism.highlight(code, grammar, language);
-  const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
-  preElement.replaceWith(codeElement);
+  }
 }
 
 const configure = Lexxy.configure;
 
-export { configure, highlightAll };
+export { ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, configure };

package/dist/lexxy_helpers.esm.js

@@ -0,0 +1,75 @@
+import Prism from 'prismjs';
+
+function createElement(name, properties, content = "") {
+  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) {
+      element.setAttribute(key, value);
+    }
+  }
+  if (content) {
+    element.innerHTML = content;
+  }
+  return element
+}
+
+function parseHtml(html) {
+  const parser = new DOMParser();
+  return parser.parseFromString(html, "text/html")
+}
+
+function createAttachmentFigure(contentType, isPreviewable, fileName) {
+  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
+  return createElement("figure", {
+    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
+    "data-content-type": contentType
+  })
+}
+
+function isPreviewableImage(contentType) {
+  return contentType.startsWith("image/") && !contentType.includes("svg")
+}
+
+function dispatchCustomEvent(element, name, detail) {
+  const event = new CustomEvent(name, {
+    detail: detail,
+    bubbles: true,
+  });
+  element.dispatchEvent(event);
+}
+
+function dispatch(element, eventName, detail = null, cancelable = false) {
+  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
+}
+
+function generateDomId(prefix) {
+  const randomPart = Math.random().toString(36).slice(2, 10);
+  return `${prefix}-${randomPart}`
+}
+
+function highlightCode() {
+  const elements = document.querySelectorAll("pre[data-language]");
+
+  elements.forEach(preElement => {
+    highlightElement(preElement);
+  });
+}
+
+function highlightElement(preElement) {
+  const language = preElement.getAttribute("data-language");
+  let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
+
+  const grammar = Prism.languages?.[language];
+  if (!grammar) return
+
+  // unescape HTML entities in the code block
+  code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
+
+  const highlightedHtml = Prism.highlight(code, grammar, language);
+  const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
+  preElement.replaceWith(codeElement);
+}
+
+export { createAttachmentFigure, createElement, dispatch, dispatchCustomEvent, generateDomId, highlightCode, isPreviewableImage, parseHtml };

package/dist/stylesheets/lexxy-content.css

@@ -240,14 +240,6 @@
   }
 }
 
-:where([data-lexical-cursor]) {
-  animation: blink 1s step-end infinite;
-  block-size: 1lh;
-  border-inline-start: 1px solid currentColor;
-  line-height: inherit;
-  margin-block: 1em;
-}
-
 /* Attachments
 /* ------------------------------------------------------------------------ */
 

package/dist/stylesheets/lexxy-editor.css

@@ -102,6 +102,20 @@
   outline: 2px dashed var(--lexxy-color-selected-dark);
 }
 
+:where([data-lexical-cursor]) {
+  animation: blink 1s infinite;
+  block-size: 1lh;
+  border-inline-start: 1.5px solid currentColor;
+  line-height: inherit;
+  margin-block: 0 var(--lexxy-content-margin);
+}
+
+@keyframes blink {
+  0% { opacity: 1; }
+  60% { opacity: 1; }
+  100% { opacity: 0;}
+}
+
 /* Toolbar
 /* -------------------------------------------------------------------------- */
 
@@ -381,7 +395,7 @@
 /* Table handle buttons
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-table-handle-buttons) {
+:where(lexxy-table-handler) {
   --button-size: 2.5lh;
 
   color: var(--lexxy-color-ink-inverted);
@@ -502,28 +516,32 @@
 /* Language picker
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-code-language-picker) {
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: var(--lexxy-color-canvas);
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
-  background-position: center right 1ch;
-  background-repeat: no-repeat;
-  background-size: 1ch;
-  block-size: 1.5lh;
-  border: 1px solid var(--lexxy-color-ink-lighter);
-  border-radius: var(--lexxy-radius);
-  color: var(--lexxy-color-ink);
-  font-family: var(--lexxy-font-base);
-  font-size: var(--lexxy-text-small);
-  font-weight: normal;
+:where(lexxy-code-language-picker) {
   inset-inline-end: var(--lexxy-editor-padding);
-  margin: 0.5ch 0.5ch 0 -0.5ch;
-  padding: 0 2ch 0 1ch;
-  text-align: start;
+  position: absolute;
+
+  select {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--lexxy-color-canvas);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
+    background-position: center right 1ch;
+    background-repeat: no-repeat;
+    background-size: 1ch;
+    block-size: 1.5lh;
+    border: 1px solid var(--lexxy-color-ink-lighter);
+    border-radius: var(--lexxy-radius);
+    color: var(--lexxy-color-ink);
+    font-family: var(--lexxy-font-base);
+    font-size: var(--lexxy-text-small);
+    font-weight: normal;
+    margin: 0.5ch 0.5ch 0 -0.5ch;
+    padding: 0 2ch 0 1ch;
+    text-align: start;
 
-  @media (prefers-color-scheme: dark) {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
+    @media (prefers-color-scheme: dark) {
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
+    }
   }
 }
 

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.7.0-beta",
+  "version": "0.7.2-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
-  "exports": "./dist/lexxy.esm.js",
+  "exports": {
+    ".": "./dist/lexxy.esm.js",
+    "./helpers": "./dist/lexxy_helpers.esm.js"
+  },
   "files": [
     "dist"
   ],