@37signals/lexxy 0.9.20 → 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';
@@ -6486,7 +6486,7 @@ class Clipboard {
     }
 
     if (this.#isPlainTextOrURLPasted(clipboardData)) {
-      this.#pastePlainText(clipboardData);
+      this.#pastePlainTextOrURL(clipboardData);
       event.preventDefault();
       return true
     }
@@ -6524,14 +6524,34 @@ class Clipboard {
     return types.length === 1 && types[0] === "text/plain"
   }
 
+  // Browsers expose a copied URL in several shapes:
+  //   Safari          [ text/plain, text/uri-list ]
+  //   App ShareSheet  [ text/uri-list ]
+  //   Chromium macOS  [ text/plain, text/html, (?:text/link-preview) ]
   #isOnlyURLPasted(clipboardData) {
-    // Safari URLs are copied as a text/plain + text/uri-list object
-    // App ShareSheet URLs are copied as solo text/uri-list object
+    if (this.#isLexicalClipboardData(clipboardData)) return false
+
     const types = Array.from(clipboardData.types);
-    return types.length
-      && types.length <= 2
-      && types.includes("text/uri-list")
-      && (types.length < 2 || types.includes("text/plain"))
+    if (types.includes("text/uri-list")) {
+      return types.every(type => type === "text/plain" || type === "text/uri-list")
+    }
+
+    if (clipboardData.files.length) return false
+
+    const text = clipboardData.getData("text/plain").trim();
+    if (!isAutolinkableURL(text)) return false
+
+    const html = clipboardData.getData("text/html");
+    return !html || this.#htmlIsBareLinkToURL(html, text)
+  }
+
+  #htmlIsBareLinkToURL(html, url) {
+    const doc = parseHtml(html);
+    if (doc.body.textContent.trim() !== url) return false
+
+    const links = doc.body.querySelectorAll("a");
+    if (links.length === 0) return true
+    return links.length === 1 && links[0].getAttribute("href") === url
   }
 
   #isPastingIntoCodeBlock() {
@@ -6565,14 +6585,12 @@ class Clipboard {
     }, { tag: PASTE_TAG });
   }
 
-  #pastePlainText(clipboardData) {
-    const item = clipboardData.items[0];
+  #pastePlainTextOrURL(clipboardData) {
+    const item = this.#plainTextOrURLItem(clipboardData);
     item.getAsString((text) => {
-      if (isAutolinkableURL(text) && this.contents.hasSelectedText()) {
-        this.contents.createLinkWithSelectedText(text);
-      } else if (isAutolinkableURL(text)) {
-        const nodeKey = this.contents.createLink(text);
-        this.#dispatchLinkInsertEvent(nodeKey, { url: text });
+      const url = text.trim();
+      if (isAutolinkableURL(url)) {
+        this.#pasteURL(url);
       } else if (this.editorElement.supportsMarkdown) {
         this.#pasteMarkdown(text);
       } else {
@@ -6581,6 +6599,20 @@ class Clipboard {
     });
   }
 
+  #plainTextOrURLItem(clipboardData) {
+    const items = Array.from(clipboardData.items);
+    return items.find((item) => item.type === "text/plain") || items.find((item) => item.type === "text/uri-list")
+  }
+
+  #pasteURL(url) {
+    if (this.contents.hasSelectedText()) {
+      this.contents.createLinkWithSelectedText(url);
+    } else {
+      const nodeKey = this.contents.createLink(url);
+      this.#dispatchLinkInsertEvent(nodeKey, { url });
+    }
+  }
+
   #insertSingleLinkAt(selection, url) {
     if (!$isRangeSelection(selection)) return
 
@@ -7039,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 {
@@ -8559,6 +8611,7 @@ class LexicalEditorElement extends HTMLElement {
   get baseExtensions() {
     return [
       ProvisionalParagraphExtension,
+      CodeHighlightingExtension,
       HighlightExtension,
       TrixContentExtension,
       TablesExtension,
@@ -8966,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(
@@ -8988,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.20",
+  "version": "0.9.22",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",