@37signals/lexxy 0.1.8-beta → 0.1.9-beta

package/dist/lexxy.esm.js

@@ -5,9 +5,10 @@ import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, Quo
 import { $isCodeNode, $isCodeHighlightNode, CodeNode, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP, normalizeCodeLang } from '@lexical/code';
 import { $isLinkNode, $toggleLink, LinkNode, AutoLinkNode } from '@lexical/link';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
-import { $convertFromMarkdownString, TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
+import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { registerHistory, createEmptyHistoryState } from '@lexical/history';
 import { DirectUpload } from '@rails/activestorage';
+import { marked } from 'marked';
 import 'prismjs/components/prism-ruby';
 
 DOMPurify.addHook("uponSanitizeElement", (node, data) => {
@@ -16,6 +17,11 @@ DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   }
 });
 
+const getNonce = () => {
+  const element = document.head.querySelector("meta[name=csp-nonce]");
+  return element?.content
+};
+
 function getNearestListItemNode(node) {
   let current = node;
   while (current !== null) {
@@ -209,6 +215,7 @@ class LexicalToolbarElement extends HTMLElement {
     this.#compactMenu();
 
     this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
+    this.#overflow.setAttribute("nonce", getNonce());
   }
 
   get #overflow() {
@@ -1399,6 +1406,7 @@ class Selection {
     marker.style.width = "1px";
     marker.style.height = "1em";
     marker.style.lineHeight = "normal";
+    marker.setAttribute("nonce", getNonce());
     return marker
   }
 
@@ -2062,9 +2070,8 @@ class Clipboard {
   }
 
   #pasteMarkdown(text) {
-    this.editor.update(() => {
-      $convertFromMarkdownString(text, TRANSFORMERS);
-    });
+    const html = marked(text);
+    this.contents.insertHtml(html);
   }
 
   #handlePastedFiles(clipboardData) {
@@ -3065,6 +3072,7 @@ class LexicalPromptElement extends HTMLElement {
     const popoverContainer = createElement("ul", { role: "listbox", id: generateDomId("prompt-popover") }); // Avoiding [popover] due to not being able to position at an arbitrary X, Y position.
     popoverContainer.classList.add("lexxy-prompt-menu");
     popoverContainer.style.position = "absolute";
+    popoverContainer.setAttribute("nonce", getNonce());
     popoverContainer.append(...(await this.source.buildListItems()));
     popoverContainer.addEventListener("click", this.#handlePopoverClick);
     this.#editorElement.appendChild(popoverContainer);
@@ -3099,6 +3107,7 @@ class CodeLanguagePicker extends HTMLElement {
     });
 
     this.languagePickerElement.style.position = "absolute";
+    this.languagePickerElement.setAttribute("nonce", getNonce());
     this.editorElement.appendChild(this.languagePickerElement);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.8-beta",
+  "version": "0.1.9-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -37,6 +37,7 @@
     "@lexical/table": "^0.32.1",
     "@lexical/utils": "^0.32.1",
     "dompurify": "^3.2.6",
+    "marked": "^16.3.0",
     "prismjs": "^1.30.0"
   },
   "peerDependencies": {