@37signals/lexxy 0.1.21-beta → 0.1.22-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.20.beta' # Need to specify the version since it's a pre-release
+gem 'lexxy', '~> 0.1.21.beta' # Need to specify the version since it's a pre-release
 ```
 
 And then execute:

package/dist/lexxy.esm.js

@@ -1,16 +1,21 @@
 import DOMPurify from 'dompurify';
-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 { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { $isTextNode, TextNode, $isRangeSelection, $getSelection, 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, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-diff';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 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" ];
@@ -115,6 +120,21 @@ function extendConversion(nodeKlass, conversionName, callback = (output => outpu
   }
 }
 
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
+
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
+  }
+}
+
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
+}
+
 class LexicalToolbarElement extends HTMLElement {
   constructor() {
     super();
@@ -267,7 +287,7 @@ 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 isHighlight = isSelectionHighlighted(selection);
     const isInLink = this.#isInLink(anchorNode);
     const isInQuote = $isQuoteNode(topLevelElement);
     const isInHeading = $isHeadingNode(topLevelElement);
@@ -486,6 +506,7 @@ var theme = {
     }
   },
   codeHighlight: {
+    addition: "code-token__selector",
     atrule: "code-token__attr",
     attr: "code-token__attr",
     "attr-name": "code-token__attr",
@@ -500,24 +521,30 @@ var theme = {
     color: "code-token__property",
     comment: "code-token__comment",
     constant: "code-token__property",
-    coord: "code-token__property",
+    coord: "code-token__comment",
     decorator: "code-token__function",
-    deleted: "code-token__property",
+    deleted: "code-token__operator",
+    deletion: "code-token__operator",
+    directive: "code-token__attr",
+    "directive-hash": "code-token__property",
     doctype: "code-token__comment",
     entity: "code-token__operator",
     function: "code-token__function",
     hexcode: "code-token__property",
-    important: "code-token__variable",
+    important: "code-token__function",
     inserted: "code-token__selector",
     italic: "code-token__comment",
     keyword: "code-token__attr",
+    line: "code-token__selector",
     namespace: "code-token__variable",
     number: "code-token__property",
+    macro: "code-token__function",
     operator: "code-token__operator",
     parameter: "code-token__variable",
     prolog: "code-token__comment",
     property: "code-token__property",
     punctuation: "code-token__punctuation",
+    "raw-string": "code-token__operator",
     regex: "code-token__variable",
     script: "code-token__function",
     selector: "code-token__selector",
@@ -526,6 +553,7 @@ var theme = {
     symbol: "code-token__property",
     tag: "code-token__property",
     title: "code-token__function",
+    "type-definition": "code-token__function",
     url: "code-token__operator",
     variable: "code-token__variable",
   }
@@ -3234,27 +3262,37 @@ class Clipboard {
 class Highlighter {
   constructor(editorElement) {
     this.editor = editorElement.editor;
+
+    this.#registerHighlightTransform();
   }
 
   toggle(styles) {
     this.editor.update(() => {
       this.#toggleSelectionStyles(styles);
-      $forEachSelectedTextNode(node => this.#syncHighlightWithStyle(node));
     });
   }
 
   remove() {
-    this.toggle({ "color": undefined, "background-color": undefined });
+    this.toggle({ "color": null, "background-color": null });
+  }
+
+  #registerHighlightTransform() {
+    return this.editor.registerNodeTransform(TextNode, (textNode) => {
+      this.#syncHighlightWithStyle(textNode);
+    })
   }
 
   #toggleSelectionStyles(styles) {
     const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
+    const patch = {};
     for (const property in styles) {
       const oldValue = $getSelectionStyleValueForProperty(selection, property);
-      const patch = { [property]: this.#toggleOrReplace(oldValue, styles[property]) };
-      $patchStyleText(selection, patch);
+      patch[property] = this.#toggleOrReplace(oldValue, styles[property]);
     }
+
+    $patchStyleText(selection, patch);
   }
 
   #toggleOrReplace(oldValue, newValue) {
@@ -3262,15 +3300,10 @@ class Highlighter {
   }
 
   #syncHighlightWithStyle(node) {
-    if (this.#hasHighlightStyles(node) !== node.hasFormat("highlight")) {
+    if (hasHighlightStyles(node.getStyle()) !== node.hasFormat("highlight")) {
       node.toggleFormat("highlight");
     }
   }
-
-  #hasHighlightStyles(node) {
-    const styles = getStyleObjectFromCSS(node.getStyle());
-    return !!(styles.color || styles["background-color"])
-  }
 }
 
 class HighlightNode extends TextNode {
@@ -3923,6 +3956,11 @@ customElements.define("lexxy-link-dialog", LinkDialog);
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
+// Use Symbol instead of null since $getSelectionStyleValueForProperty
+// responds differently for backward selections if null is the default
+// see https://github.com/facebook/lexical/issues/8013
+const NO_STYLE = Symbol("no_style");
+
 class HighlightDialog extends ToolbarDialog {
   connectedCallback() {
     super.connectedCallback();
@@ -3987,16 +4025,16 @@ class HighlightDialog extends ToolbarDialog {
   #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);
+    // Use non-"" default, so "" indicates mixed highlighting
+    const textColor = $getSelectionStyleValueForProperty(selection, "color", NO_STYLE);
+    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
 
     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;
+    const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
     this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
@@ -4578,6 +4616,11 @@ class CodeLanguagePicker extends HTMLElement {
     const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
 
     if (!languages.ruby) languages.ruby = "Ruby";
+    if (!languages.php) languages.php = "PHP";
+    if (!languages.go) languages.go = "Go";
+    if (!languages.bash) languages.bash = "Bash";
+    if (!languages.json) languages.json = "JSON";
+    if (!languages.diff) languages.diff = "Diff";
 
     const sortedEntries = Object.entries(languages)
       .sort(([ , a ], [ , b ]) => a.localeCompare(b));

package/package.json

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