@37signals/lexxy 0.9.21 → 0.9.22

package/README.md

@@ -2,7 +2,7 @@
 
 A modern rich text editor for Rails.
 
-**[Try it out!](https://basecamp.github.io/lexxy/try-it)**
+[Documentation](https://basecamp.github.io/lexxy/docs/) | <mark>[Try it out!](https://basecamp.github.io/lexxy/sandbox/)</mark>
 
 ## Features
 
@@ -15,24 +15,7 @@ A modern rich text editor for Rails.
 - Preview attachments like PDFs and Videos in the editor.
 - Works seamlessly with Action Text, generating the same canonical HTML format it expects for attachments.
 
-![Lexxy editor screenshot](docs/images/home.screenshot.png)
-
-## Documentation
-
-Visit the **[documentation site](https://basecamp.github.io/lexxy)**.
-
-## Roadmap
-
-This is a beta. Here's what's coming next:
-
-- [x] Configurable editors in Action Text: Choose your editor like you choose your database.
-- [x] More editing features:
-    - [x] Tables
-    - [x] Text highlighting
-- [x] Configuration hooks.
-- [x] Standalone JS package: to use in non-Rails environments.
-- [x] Image galleries: The only remaining feature for full Action Text compatibility
-- [ ] Install task that generates the necessary JS and adds stylesheets.
+![Lexxy editor screenshot](home/docs/images/home.screenshot.png)
 
 ## Contributing
 

package/dist/lexxy.esm.js

@@ -10,7 +10,7 @@ import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, QuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { HistoryExtension } from '@lexical/history';
-import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { marked } from 'marked';
@@ -7071,6 +7071,26 @@ function $getAllProvisionalParagraphs(rootNode = $getRoot()) {
   return $descendantsMatching(rootNode.getChildren(), $isProvisionalParagraphNode)
 }
 
+// Registers code highlighting through the extension system so its node
+// transforms exist before the initial editor state is applied. Registering
+// after editor creation misses code blocks loaded from the initial value:
+// their transform pass has already run, and Lexical's catch-up dirtying
+// only sees the committed (still empty) state.
+class CodeHighlightingExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/code-highlighting",
+      register(editor) {
+        return registerCodeHighlighting(editor)
+      }
+    })
+  }
+}
+
 const TRIX_LANGUAGE_ATTR = "language";
 
 class TrixContentExtension extends LexxyExtension {
@@ -8591,6 +8611,7 @@ class LexicalEditorElement extends HTMLElement {
   get baseExtensions() {
     return [
       ProvisionalParagraphExtension,
+      CodeHighlightingExtension,
       HighlightExtension,
       TrixContentExtension,
       TablesExtension,
@@ -8998,7 +9019,7 @@ class LexicalEditorElement extends HTMLElement {
         registerList(this.editor)
       );
       this.#registerTableComponents();
-      this.#registerCodeHiglightingComponents();
+      this.#registerCodeLanguagePicker();
       if (this.supportsMarkdown) {
         const transformers = [ ...TRANSFORMERS, HORIZONTAL_DIVIDER ];
         registered.push(
@@ -9020,8 +9041,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(tableTools);
   }
 
-  #registerCodeHiglightingComponents() {
-    registerCodeHighlighting(this.editor);
+  #registerCodeLanguagePicker() {
     let codeLanguagePicker = this.querySelector("lexxy-code-language-picker");
     codeLanguagePicker ??= createElement("lexxy-code-language-picker");
     this.append(codeLanguagePicker);

package/package.json

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