@scottjgilbert/lexical-blog-editor 0.1.4 → 1.0.0-beta.2

package/build/plugins/EmojiPickerPlugin/index.d.ts

@@ -1,9 +1,2 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 export default function EmojiPickerPlugin(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build/plugins/EmojiPickerPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EmojiPickerPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAoFH,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CA4GxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EmojiPickerPlugin/index.tsx"],"names":[],"mappings":"AA4FA,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CA4GxC"}

package/build/plugins/EmojiPickerPlugin/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/build/plugins/EmojisPlugin/index.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type { JSX } from 'react';
+import type { JSX } from "react";
 export default function EmojisPlugin(): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/build/plugins/EmojisPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EmojisPlugin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AA8D/B,MAAM,CAAC,OAAO,UAAU,YAAY,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EmojisPlugin/index.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AA8DjC,MAAM,CAAC,OAAO,UAAU,YAAY,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAIzD"}

package/build/plugins/EmojisPlugin/index.js

@@ -1,19 +1,13 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TextNode } from 'lexical';
-import { useEffect } from 'react';
-import { $createEmojiNode, EmojiNode } from '../../nodes/EmojiNode';
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { TextNode } from "lexical";
+import { useEffect } from "react";
+import { $createEmojiNode, EmojiNode } from "../../nodes/EmojiNode";
 const emojis = new Map([
-    [':)', ['emoji happysmile', '🙂']],
-    [':D', ['emoji veryhappysmile', '😀']],
-    [':(', ['emoji unhappysmile', '🙁']],
-    ['<3', ['emoji heart', '❤']],
+    [":)", ["emoji happysmile", "🙂"]],
+    [":D", ["emoji veryhappysmile", "😀"]],
+    [":(", ["emoji unhappysmile", "🙁"]],
+    ["<3", ["emoji heart", "❤"]],
 ]);
 function $findAndTransformEmoji(node) {
     const text = node.getTextContent();
@@ -47,7 +41,7 @@ function $textNodeTransform(node) {
 function useEmojis(editor) {
     useEffect(() => {
         if (!editor.hasNodes([EmojiNode])) {
-            throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+            throw new Error("EmojisPlugin: EmojiNode not registered on editor");
         }
         return editor.registerNodeTransform(TextNode, $textNodeTransform);
     }, [editor]);

package/build/plugins/EquationsPlugin/index.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { JSX } from 'react';
-import 'katex/dist/katex.css';
-import { LexicalCommand, LexicalEditor } from 'lexical';
+import type { JSX } from "react";
+import "katex/dist/katex.css";
+import { LexicalCommand, LexicalEditor } from "lexical";
 type CommandPayload = {
     equation: string;
     inline: boolean;

package/build/plugins/EquationsPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EquationsPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,sBAAsB,CAAC;AAI9B,OAAO,EAML,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAOjB,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,cAAc,CAAC,cAAc,CACzB,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,OAAO,GACR,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAUd;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CA4B5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/EquationsPlugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,sBAAsB,CAAC;AAI9B,OAAO,EAML,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAMjB,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,cAAc,CAAC,cAAc,CACzB,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,OAAO,GACR,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAad;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CA4B5D"}

package/build/plugins/EquationsPlugin/index.js

@@ -1,15 +1,19 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'katex/dist/katex.css';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $wrapNodeInElement } from '@lexical/utils';
-import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
-import { useCallback, useEffect } from 'react';
-import { $createEquationNode, EquationNode } from '../../nodes/EquationNode';
-import KatexEquationAlterer from '../../ui/KatexEquationAlterer';
-export const INSERT_EQUATION_COMMAND = createCommand('INSERT_EQUATION_COMMAND');
+import "katex/dist/katex.css";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $wrapNodeInElement } from "@lexical/utils";
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useCallback, useEffect } from "react";
+import { $createEquationNode, EquationNode } from "../../nodes/EquationNode";
+import KatexEquationAlterer from "../../ui/KatexEquationAlterer";
+export const INSERT_EQUATION_COMMAND = createCommand("INSERT_EQUATION_COMMAND");
 export function InsertEquationDialog({ activeEditor, onClose, }) {
     const onEquationConfirm = useCallback((equation, inline) => {
-        activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, { equation, inline });
+        activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {
+            equation,
+            inline,
+        });
         onClose();
     }, [activeEditor, onClose]);
     return _jsx(KatexEquationAlterer, { onConfirm: onEquationConfirm });
@@ -18,7 +22,7 @@ export default function EquationsPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([EquationNode])) {
-            throw new Error('EquationsPlugins: EquationsNode not registered on editor');
+            throw new Error("EquationsPlugins: EquationsNode not registered on editor");
         }
         return editor.registerCommand(INSERT_EQUATION_COMMAND, (payload) => {
             const { equation, inline } = payload;

package/build/plugins/FigmaPlugin/index.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { JSX } from 'react';
-import { LexicalCommand } from 'lexical';
+import type { JSX } from "react";
+import { LexicalCommand } from "lexical";
 export declare const INSERT_FIGMA_COMMAND: LexicalCommand<string>;
 export default function FigmaPlugin(): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/build/plugins/FigmaPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FigmaPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAyC,cAAc,EAAC,MAAM,SAAS,CAAC;AAK/E,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAAC,MAAM,CAEvD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoBxD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FigmaPlugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EAGL,cAAc,EACf,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAAC,MAAM,CAEvD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoBxD"}

package/build/plugins/FigmaPlugin/index.js

@@ -1,21 +1,15 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $insertNodeToNearestRoot } from '@lexical/utils';
-import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
-import { useEffect } from 'react';
-import { $createFigmaNode, FigmaNode } from '../../nodes/FigmaNode';
-export const INSERT_FIGMA_COMMAND = createCommand('INSERT_FIGMA_COMMAND');
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createFigmaNode, FigmaNode } from "../../nodes/FigmaNode/FigmaNode";
+export const INSERT_FIGMA_COMMAND = createCommand("INSERT_FIGMA_COMMAND");
 export default function FigmaPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([FigmaNode])) {
-            throw new Error('FigmaPlugin: FigmaNode not registered on editor');
+            throw new Error("FigmaPlugin: FigmaNode not registered on editor");
         }
         return editor.registerCommand(INSERT_FIGMA_COMMAND, (payload) => {
             const figmaNode = $createFigmaNode(payload);

package/build/plugins/FloatingLinkEditorPlugin/index.css

@@ -39,3 +39,14 @@
   width: 20px;
   vertical-align: -0.25em;
 }
+
+@media (prefers-color-scheme: dark) {
+  .link-editor {
+    background-color: #2b2b2b;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  .link-editor .button.hovered {
+    background-color: #3a3a3a;
+  }
+}

package/build/plugins/FloatingLinkEditorPlugin/index.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { JSX } from 'react';
-import './index.css';
-import { Dispatch } from 'react';
+import type { JSX } from "react";
+import "./index.css";
+import { Dispatch } from "react";
 export default function FloatingLinkEditorPlugin({ anchorElem, isLinkEditMode, setIsLinkEditMode, }: {
     anchorElem?: HTMLElement;
     isLinkEditMode: boolean;

package/build/plugins/FloatingLinkEditorPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FloatingLinkEditorPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,aAAa,CAAC;AAyBrB,OAAO,EAAC,QAAQ,EAA2C,MAAM,OAAO,CAAC;AAiazE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAA0B,EAC1B,cAAc,EACd,iBAAiB,GAClB,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACtC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAQrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FloatingLinkEditorPlugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,CAAC;AAyBrB,OAAO,EAAE,QAAQ,EAA4C,MAAM,OAAO,CAAC;AAka3E,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAA0B,EAC1B,cAAc,EACd,iBAAiB,GAClB,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACtC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAQrB"}

package/build/plugins/FloatingLinkEditorPlugin/index.js

@@ -1,22 +1,23 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import './index.css';
-import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from '@lexical/link';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $findMatchingParent, mergeRegister } from '@lexical/utils';
-import { $getSelection, $isLineBreakNode, $isNodeSelection, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, getDOMSelection, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { getSelectedNode } from '../../utils/getSelectedNode';
-import { setFloatingElemPositionForLinkEditor } from '../../utils/setFloatingElemPositionForLinkEditor';
-import { sanitizeUrl } from '../../utils/url';
+import "./index.css";
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import { $getSelection, $isLineBreakNode, $isNodeSelection, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, getDOMSelection, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
+import { sanitizeUrl } from "../../utils/url";
 function preventDefault(event) {
     event.preventDefault();
 }
 function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, }) {
     const editorRef = useRef(null);
     const inputRef = useRef(null);
-    const [linkUrl, setLinkUrl] = useState('');
-    const [editedLinkUrl, setEditedLinkUrl] = useState('https://');
+    const [linkUrl, setLinkUrl] = useState("");
+    const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
     const [lastSelection, setLastSelection] = useState(null);
     const $updateLinkEditor = useCallback(() => {
         var _a, _b;
@@ -31,7 +32,7 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
                 setLinkUrl(node.getURL());
             }
             else {
-                setLinkUrl('');
+                setLinkUrl("");
             }
             if (isLinkEditMode) {
                 setEditedLinkUrl(linkUrl);
@@ -49,7 +50,7 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
                     setLinkUrl(node.getURL());
                 }
                 else {
-                    setLinkUrl('');
+                    setLinkUrl("");
                 }
                 if (isLinkEditMode) {
                     setEditedLinkUrl(linkUrl);
@@ -85,13 +86,13 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
             }
             setLastSelection(selection);
         }
-        else if (!activeElement || activeElement.className !== 'link-input') {
+        else if (!activeElement || activeElement.className !== "link-input") {
             if (rootElement !== null) {
                 setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
             }
             setLastSelection(null);
             setIsLinkEditMode(false);
-            setLinkUrl('');
+            setLinkUrl("");
         }
         return true;
     }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
@@ -102,14 +103,14 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
                 $updateLinkEditor();
             });
         };
-        window.addEventListener('resize', update);
+        window.addEventListener("resize", update);
         if (scrollerElem) {
-            scrollerElem.addEventListener('scroll', update);
+            scrollerElem.addEventListener("scroll", update);
         }
         return () => {
-            window.removeEventListener('resize', update);
+            window.removeEventListener("resize", update);
             if (scrollerElem) {
-                scrollerElem.removeEventListener('scroll', update);
+                scrollerElem.removeEventListener("scroll", update);
             }
         };
     }, [anchorElem.parentElement, editor, $updateLinkEditor]);
@@ -150,16 +151,16 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
                 setIsLinkEditMode(false);
             }
         };
-        editorElement.addEventListener('focusout', handleBlur);
+        editorElement.addEventListener("focusout", handleBlur);
         return () => {
-            editorElement.removeEventListener('focusout', handleBlur);
+            editorElement.removeEventListener("focusout", handleBlur);
         };
     }, [editorRef, setIsLink, setIsLinkEditMode, isLink]);
     const monitorInputInteraction = (event) => {
-        if (event.key === 'Enter') {
+        if (event.key === "Enter") {
             handleLinkSubmission(event);
         }
-        else if (event.key === 'Escape') {
+        else if (event.key === "Escape") {
             event.preventDefault();
             setIsLinkEditMode(false);
         }
@@ -167,7 +168,7 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
     const handleLinkSubmission = (event) => {
         event.preventDefault();
         if (lastSelection !== null) {
-            if (linkUrl !== '') {
+            if (linkUrl !== "") {
                 editor.update(() => {
                     editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
                     const selection = $getSelection();
@@ -184,7 +185,7 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditM
                     }
                 });
             }
-            setEditedLinkUrl('https://');
+            setEditedLinkUrl("https://");
             setIsLinkEditMode(false);
         }
     };
@@ -266,7 +267,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsL
                 const node = getSelectedNode(selection);
                 const linkNode = $findMatchingParent(node, $isLinkNode);
                 if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
-                    window.open(linkNode.getURL(), '_blank');
+                    window.open(linkNode.getURL(), "_blank");
                     return true;
                 }
             }

package/build/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -31,6 +31,7 @@
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
+  align-items: center;
 }
 
 .floating-text-format-popup button.popup-item:disabled {
@@ -76,6 +77,7 @@
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   width: 70px;
   font-size: 14px;
   color: #777;
@@ -139,3 +141,16 @@
     display: none;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .floating-text-format-popup {
+    background: #2a2a2a;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  }
+  .floating-text-format-popup button.popup-item:hover:not([disabled]) {
+    background-color: #3a3a3a;
+  }
+  .floating-text-format-popup .divider {
+    background-color: #3a3a3a;
+  }
+}

package/build/plugins/FloatingTextFormatToolbarPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FloatingTextFormatToolbarPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,CAAC;AAiBrB,OAAO,EAAE,QAAQ,EAA4C,MAAM,OAAO,CAAC;AAga3E,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,UAA0B,EAC1B,iBAAiB,GAClB,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACtC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAGrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/FloatingTextFormatToolbarPlugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,CAAC;AAiBrB,OAAO,EAAE,QAAQ,EAA4C,MAAM,OAAO,CAAC;AA+Z3E,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,UAA0B,EAC1B,iBAAiB,GAClB,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACtC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAGrB"}

package/build/plugins/FloatingTextFormatToolbarPlugin/index.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "./index.css";
-import { $isCodeHighlightNode } from "@lexical/code";
+import { $isCodeHighlightNode } from "../../nodes/CodeNode/CodeHighlightNode";
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";

package/build/plugins/ImagesPlugin/index.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { JSX } from 'react';
-import { LexicalCommand, LexicalEditor } from 'lexical';
-import { ImagePayload } from '../../nodes/ImageNode';
+import type { JSX } from "react";
+import { LexicalCommand, LexicalEditor } from "lexical";
+import { ImagePayload } from "../../nodes/ImageNode";
 export type InsertImagePayload = Readonly<ImagePayload>;
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 export declare function InsertImageUriDialogBody({ onClick, }: {

package/build/plugins/ImagesPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/ImagesPlugin/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAc/B,OAAO,EAiBL,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAMjB,OAAO,EAIL,YAAY,EACb,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAAC,kBAAkB,CAC7B,CAAC;AAExC,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,GACR,EAAE;IACD,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,2CAgCA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,GACR,EAAE;IACD,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,2CA4CA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,OAAO,GACR,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA0Dd;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,GAChB,EAAE;IACD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+CrB;AAuGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,IAAI,CAAC;KACpB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/ImagesPlugin/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAcjC,OAAO,EAiBL,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAKjB,OAAO,EAIL,YAAY,EACb,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAAC,kBAAkB,CAC7B,CAAC;AAExC,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,GACR,EAAE;IACD,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,2CAiCA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,GACR,EAAE;IACD,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,2CA6CA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,OAAO,GACR,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA6Dd;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,GAChB,EAAE;IACD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+CrB;AAuGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,IAAI,CAAC;KACpB;CACF"}

package/build/plugins/ImagesPlugin/index.js

@@ -1,34 +1,35 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from '@lexical/link';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $findMatchingParent, $wrapNodeInElement, mergeRegister, } from '@lexical/utils';
-import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, getDOMSelectionFromTarget, isHTMLElement, } from 'lexical';
-import { useEffect, useRef, useState } from 'react';
-import landscapeImage from '../../images/landscape.jpg';
-import yellowFlowerImage from '../../images/yellow-flower.jpg';
-import { $createImageNode, $isImageNode, ImageNode, } from '../../nodes/ImageNode';
-import Button from '../../ui/Button';
-import { DialogActions, DialogButtonsList } from '../../ui/Dialog';
-import FileInput from '../../ui/FileInput';
-import TextInput from '../../ui/TextInput';
-export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, $wrapNodeInElement, mergeRegister, } from "@lexical/utils";
+import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, getDOMSelectionFromTarget, isHTMLElement, } from "lexical";
+import { useEffect, useRef, useState } from "react";
+import landscapeImage from "../../images/landscape.jpg";
+import yellowFlowerImage from "../../images/yellow-flower.jpg";
+import { $createImageNode, $isImageNode, ImageNode, } from "../../nodes/ImageNode";
+import Button from "../../ui/Button";
+import { DialogActions, DialogButtonsList } from "../../ui/Dialog";
+import FileInput from "../../ui/FileInput";
+import TextInput from "../../ui/TextInput";
+export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 export function InsertImageUriDialogBody({ onClick, }) {
-    const [src, setSrc] = useState('');
-    const [altText, setAltText] = useState('');
-    const isDisabled = src === '';
+    const [src, setSrc] = useState("");
+    const [altText, setAltText] = useState("");
+    const isDisabled = src === "";
     return (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: "Image URL", placeholder: "i.e. https://source.unsplash.com/random", onChange: setSrc, value: src, "data-test-id": "image-modal-url-input" }), _jsx(TextInput, { label: "Alt Text", placeholder: "Random unsplash image", onChange: setAltText, value: altText, "data-test-id": "image-modal-alt-text-input" }), _jsx(DialogActions, { children: _jsx(Button, { "data-test-id": "image-modal-confirm-btn", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Confirm" }) })] }));
 }
 export function InsertImageUploadedDialogBody({ onClick, }) {
-    const [src, setSrc] = useState('');
-    const [altText, setAltText] = useState('');
-    const isDisabled = src === '';
+    const [src, setSrc] = useState("");
+    const [altText, setAltText] = useState("");
+    const isDisabled = src === "";
     const loadImage = (files) => {
         const reader = new FileReader();
         reader.onload = function () {
-            if (typeof reader.result === 'string') {
+            if (typeof reader.result === "string") {
                 setSrc(reader.result);
             }
-            return '';
+            return "";
         };
         if (files !== null) {
             reader.readAsDataURL(files[0]);
@@ -44,9 +45,9 @@ export function InsertImageDialog({ activeEditor, onClose, }) {
         const handler = (e) => {
             hasModifier.current = e.altKey;
         };
-        document.addEventListener('keydown', handler);
+        document.addEventListener("keydown", handler);
         return () => {
-            document.removeEventListener('keydown', handler);
+            document.removeEventListener("keydown", handler);
         };
     }, [activeEditor]);
     const onClick = (payload) => {
@@ -55,19 +56,19 @@ export function InsertImageDialog({ activeEditor, onClose, }) {
     };
     return (_jsxs(_Fragment, { children: [!mode && (_jsxs(DialogButtonsList, { children: [_jsx(Button, { "data-test-id": "image-modal-option-sample", onClick: () => onClick(hasModifier.current
                             ? {
-                                altText: 'Daylight fir trees forest glacier green high ice landscape',
+                                altText: "Daylight fir trees forest glacier green high ice landscape",
                                 src: landscapeImage,
                             }
                             : {
-                                altText: 'Yellow flower in tilt shift lens',
+                                altText: "Yellow flower in tilt shift lens",
                                 src: yellowFlowerImage,
-                            }), children: "Sample" }), _jsx(Button, { "data-test-id": "image-modal-option-url", onClick: () => setMode('url'), children: "URL" }), _jsx(Button, { "data-test-id": "image-modal-option-file", onClick: () => setMode('file'), children: "File" })] })), mode === 'url' && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === 'file' && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] }));
+                            }), children: "Sample" }), _jsx(Button, { "data-test-id": "image-modal-option-url", onClick: () => setMode("url"), children: "URL" }), _jsx(Button, { "data-test-id": "image-modal-option-file", onClick: () => setMode("file"), children: "File" })] })), mode === "url" && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === "file" && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] }));
 }
 export default function ImagesPlugin({ captionsEnabled, }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([ImageNode])) {
-            throw new Error('ImagesPlugin: ImageNode not registered on editor');
+            throw new Error("ImagesPlugin: ImageNode not registered on editor");
         }
         return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
             const imageNode = $createImageNode(payload);
@@ -86,10 +87,10 @@ export default function ImagesPlugin({ captionsEnabled, }) {
     }, [captionsEnabled, editor]);
     return null;
 }
-const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-const img = document.createElement('img');
-img.src = TRANSPARENT_IMAGE;
 function $onDragStart(event) {
+    const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+    const img = document.createElement("img");
+    img.src = TRANSPARENT_IMAGE;
     const node = $getImageNodeInSelection();
     if (!node) {
         return false;
@@ -98,9 +99,9 @@ function $onDragStart(event) {
     if (!dataTransfer) {
         return false;
     }
-    dataTransfer.setData('text/plain', '_');
+    dataTransfer.setData("text/plain", "_");
     dataTransfer.setDragImage(img, 0, 0);
-    dataTransfer.setData('application/x-lexical-drag', JSON.stringify({
+    dataTransfer.setData("application/x-lexical-drag", JSON.stringify({
         data: {
             altText: node.__altText,
             caption: node.__caption,
@@ -111,7 +112,7 @@ function $onDragStart(event) {
             src: node.__src,
             width: node.__width,
         },
-        type: 'image',
+        type: "image",
     }));
     return true;
 }
@@ -162,12 +163,12 @@ function $getImageNodeInSelection() {
 }
 function getDragImageData(event) {
     var _a;
-    const dragData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('application/x-lexical-drag');
+    const dragData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/x-lexical-drag");
     if (!dragData) {
         return null;
     }
     const { type, data } = JSON.parse(dragData);
-    if (type !== 'image') {
+    if (type !== "image") {
         return null;
     }
     return data;
@@ -175,9 +176,9 @@ function getDragImageData(event) {
 function canDropImage(event) {
     const target = event.target;
     return !!(isHTMLElement(target) &&
-        !target.closest('code, span.editor-image') &&
+        !target.closest("code, span.editor-image") &&
         isHTMLElement(target.parentElement) &&
-        target.parentElement.closest('div.ContentEditable__root'));
+        target.parentElement.closest("div.ContentEditable__root"));
 }
 function getDragSelection(event) {
     let range;

package/build/plugins/KeywordsPlugin/index.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type { JSX } from 'react';
+import type { JSX } from "react";
 export default function KeywordsPlugin(): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/build/plugins/KeywordsPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/KeywordsPlugin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAW/B,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoC3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/KeywordsPlugin/index.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWjC,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoC3D"}