@baasix/lexical 0.0.3 → 0.0.5

package/dist/index.js

@@ -34,7 +34,7 @@ import {
   ExcalidrawModal,
   ExcalidrawNode,
   Modal
-} from "./chunk-N22RKA5D.js";
+} from "./chunk-RIV43XYA.js";
 import {
   $createPollNode,
   PollNode,
@@ -67,7 +67,7 @@ import { LexicalComposer as LexicalComposer2 } from "@lexical/react/LexicalCompo
 import { OnChangePlugin as OnChangePlugin2 } from "@lexical/react/LexicalOnChangePlugin";
 import { useLexicalComposerContext as useLexicalComposerContext46 } from "@lexical/react/LexicalComposerContext";
 import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
-import { $getRoot as $getRoot3, $insertNodes as $insertNodes6 } from "lexical";
+import { $getRoot as $getRoot3, $insertNodes as $insertNodes6, $setSelection as $setSelection7 } from "lexical";
 
 // src/Editor.tsx
 import { CharacterLimitPlugin } from "@lexical/react/LexicalCharacterLimitPlugin";
@@ -102,7 +102,8 @@ import {
   $getRoot,
   $isParagraphNode as $isParagraphNode2,
   CLEAR_EDITOR_COMMAND,
-  HISTORIC_TAG
+  HISTORIC_TAG,
+  SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback4, useEffect as useEffect4, useState as useState4 } from "react";
 
@@ -752,6 +753,8 @@ function ActionsPlugin({
   const [isEditable, setIsEditable] = useState4(() => editor.isEditable());
   const [isSpeechToText, setIsSpeechToText] = useState4(false);
   const [isEditorEmpty, setIsEditorEmpty] = useState4(true);
+  const [isConverting, setIsConverting] = useState4(false);
+  const [isMarkdown, setIsMarkdown] = useState4(false);
   const [modal, showModal] = useModal();
   const { isFullscreen, toggleFullscreen } = useFullscreen();
   useEffect4(() => {
@@ -770,11 +773,15 @@ function ActionsPlugin({
         editor.getEditorState().read(() => {
           const root = $getRoot();
           const children = root.getChildren();
+          const firstChild = children[0];
+          setIsMarkdown(
+            children.length === 1 && $isCodeNode(firstChild) && firstChild.getLanguage() === "markdown"
+          );
           if (children.length > 1) {
             setIsEditorEmpty(false);
           } else {
-            if ($isParagraphNode2(children[0])) {
-              const paragraphChildren = children[0].getChildren();
+            if ($isParagraphNode2(firstChild)) {
+              const paragraphChildren = firstChild.getChildren();
               setIsEditorEmpty(paragraphChildren.length === 0);
             } else {
               setIsEditorEmpty(false);
@@ -785,32 +792,73 @@ function ActionsPlugin({
     );
   }, [editor, isEditable]);
   const handleMarkdownToggle = useCallback4(() => {
-    editor.update(() => {
+    if (isConverting) return;
+    const currentlyMarkdown = editor.getEditorState().read(() => {
       const root = $getRoot();
       const firstChild = root.getFirstChild();
-      if ($isCodeNode(firstChild) && firstChild.getLanguage() === "markdown") {
-        $convertFromMarkdownString2(
-          firstChild.getTextContent(),
-          PLAYGROUND_TRANSFORMERS,
-          void 0,
-          // node
-          shouldPreserveNewLinesInMarkdown
-        );
-        root.selectEnd();
-      } else {
-        const markdown = $convertToMarkdownString2(
-          PLAYGROUND_TRANSFORMERS,
-          void 0,
-          //node
-          shouldPreserveNewLinesInMarkdown
-        );
-        const codeNode = $createCodeNode("markdown");
-        codeNode.append($createTextNode2(markdown));
-        root.clear().append(codeNode);
-        codeNode.select();
-      }
+      return $isCodeNode(firstChild) && firstChild.getLanguage() === "markdown";
     });
-  }, [editor, shouldPreserveNewLinesInMarkdown]);
+    if (currentlyMarkdown) {
+      setIsConverting(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          try {
+            const markdownText = editor.getEditorState().read(() => {
+              const root = $getRoot();
+              const firstChild = root.getFirstChild();
+              return $isCodeNode(firstChild) ? firstChild.getTextContent() : "";
+            });
+            editor.update(
+              () => {
+                const root = $getRoot();
+                root.clear();
+                $convertFromMarkdownString2(
+                  markdownText,
+                  PLAYGROUND_TRANSFORMERS,
+                  void 0,
+                  // operate on $getRoot()
+                  shouldPreserveNewLinesInMarkdown
+                );
+                $getRoot().selectEnd();
+              },
+              { tag: "historic" }
+            );
+            editor.dispatchCommand(SELECTION_CHANGE_COMMAND, void 0);
+          } finally {
+            setIsConverting(false);
+          }
+        });
+      });
+    } else {
+      setIsConverting(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          try {
+            const markdown = editor.getEditorState().read(
+              () => $convertToMarkdownString2(
+                PLAYGROUND_TRANSFORMERS,
+                void 0,
+                shouldPreserveNewLinesInMarkdown
+              )
+            );
+            editor.update(
+              () => {
+                const root = $getRoot();
+                const codeNode = $createCodeNode("markdown");
+                codeNode.append($createTextNode2(markdown));
+                root.clear().append(codeNode);
+                codeNode.select();
+              },
+              { tag: "historic" }
+            );
+            editor.dispatchCommand(SELECTION_CHANGE_COMMAND, void 0);
+          } finally {
+            setIsConverting(false);
+          }
+        });
+      });
+    }
+  }, [editor, shouldPreserveNewLinesInMarkdown, isConverting]);
   return /* @__PURE__ */ jsxs2("div", { className: "actions", children: [
     /* @__PURE__ */ jsx3(
       "button",
@@ -871,11 +919,11 @@ function ActionsPlugin({
       "button",
       {
         type: "button",
-        className: "action-button",
+        className: `action-button ${isMarkdown ? "active" : ""}`,
         onClick: handleMarkdownToggle,
-        title: "Convert From Markdown",
-        "aria-label": "Convert from markdown",
-        children: /* @__PURE__ */ jsx3("i", { className: "markdown" })
+        title: isMarkdown ? "Convert to Rich Text" : "Convert to Markdown",
+        "aria-label": isMarkdown ? "Convert to rich text" : "Convert to markdown",
+        children: isConverting ? /* @__PURE__ */ jsx3("span", { className: "action-button-spinner" }) : /* @__PURE__ */ jsx3("i", { className: "markdown" })
       }
     ),
     modal
@@ -9832,7 +9880,7 @@ import {
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW8,
   getDOMSelection as getDOMSelection2,
   KEY_ESCAPE_COMMAND as KEY_ESCAPE_COMMAND2,
-  SELECTION_CHANGE_COMMAND
+  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
 import { useCallback as useCallback20, useEffect as useEffect31, useRef as useRef10, useState as useState28 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
@@ -9995,7 +10043,7 @@ function FloatingLinkEditor({
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
+        SELECTION_CHANGE_COMMAND2,
         () => {
           $updateLinkEditor();
           return true;
@@ -10202,7 +10250,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsL
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
+        SELECTION_CHANGE_COMMAND2,
         (_payload, newEditor) => {
           $updateToolbar();
           setActiveEditor(newEditor);
@@ -10270,7 +10318,7 @@ import {
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW9,
   FORMAT_TEXT_COMMAND,
   getDOMSelection as getDOMSelection3,
-  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
+  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
 import { useCallback as useCallback21, useEffect as useEffect32, useRef as useRef11, useState as useState29 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
@@ -10440,7 +10488,7 @@ function TextFormatFloatingToolbar({
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND2,
+        SELECTION_CHANGE_COMMAND3,
         () => {
           $updateTextFormatFloatingToolbar();
           return false;
@@ -11493,7 +11541,7 @@ import {
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   getDOMSelection as getDOMSelection4,
   isDOMNode as isDOMNode2,
-  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
+  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND4
 } from "lexical";
 import { useCallback as useCallback22, useEffect as useEffect37, useRef as useRef13, useState as useState31 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
@@ -12500,7 +12548,7 @@ function TableCellActionMenuContainer({
     return mergeRegister12(
       editor.registerUpdateListener(delayedCallback),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND3,
+        SELECTION_CHANGE_COMMAND4,
         delayedCallback,
         COMMAND_PRIORITY_CRITICAL2
       ),
@@ -13830,7 +13878,7 @@ import {
   INDENT_CONTENT_COMMAND as INDENT_CONTENT_COMMAND2,
   OUTDENT_CONTENT_COMMAND as OUTDENT_CONTENT_COMMAND2,
   REDO_COMMAND as REDO_COMMAND2,
-  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND4,
+  SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND5,
   SKIP_DOM_SELECTION_TAG as SKIP_DOM_SELECTION_TAG2,
   SKIP_SELECTION_FOCUS_TAG as SKIP_SELECTION_FOCUS_TAG2,
   UNDO_COMMAND as UNDO_COMMAND2
@@ -14515,8 +14563,9 @@ function ToolbarPlugin({
         );
         const theme2 = element.getTheme();
         updateToolbarState("codeTheme", theme2 || "");
-        return;
+        return true;
       }
+      return false;
     },
     [updateToolbarState, isCodeHighlighted, isCodeShiki]
   );
@@ -14560,7 +14609,9 @@ function ToolbarPlugin({
           updateToolbarState("blockType", type);
         } else {
           $handleHeadingNode(element);
-          $handleCodeNode(element);
+          if ($handleCodeNode(element)) {
+            return;
+          }
         }
       }
       updateToolbarState(
@@ -14643,7 +14694,7 @@ function ToolbarPlugin({
   ]);
   useEffect43(() => {
     return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND4,
+      SELECTION_CHANGE_COMMAND5,
       (_payload, newEditor) => {
         setActiveEditor(newEditor);
         $updateToolbar();
@@ -15912,17 +15963,18 @@ function HtmlPlugin({
   debounceMs = 300
 }) {
   const [editor] = useLexicalComposerContext46();
-  const isInternalChange = useRef18(false);
-  const lastExternalValue = useRef18(value);
+  const lastSyncedValue = useRef18(null);
+  const hasUserEdited = useRef18(false);
   const debounceTimer = useRef18(null);
   useEffect46(() => {
-    if (isInternalChange.current) {
-      isInternalChange.current = false;
+    if (value === lastSyncedValue.current) {
       return;
     }
-    lastExternalValue.current = value;
+    lastSyncedValue.current = value;
+    hasUserEdited.current = false;
     editor.update(
       () => {
+        $setSelection7(null);
         const root = $getRoot3();
         if (!value || value === "<p></p>" || value === "<p><br></p>") {
           root.clear();
@@ -15939,18 +15991,23 @@ function HtmlPlugin({
     );
   }, [editor, value]);
   const handleChange = useCallback26(
-    (_editorState) => {
+    (_editorState, _editor, tags) => {
+      if (!tags.has("historic")) {
+        hasUserEdited.current = true;
+      }
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
       }
       debounceTimer.current = setTimeout(() => {
         editor.update(() => {
           const html = $generateHtmlFromNodes(editor);
-          if (html === lastExternalValue.current) {
+          if (html === lastSyncedValue.current) {
+            return;
+          }
+          if (!hasUserEdited.current) {
             return;
           }
-          isInternalChange.current = true;
-          lastExternalValue.current = html;
+          lastSyncedValue.current = html;
           onChange(html);
         });
       }, debounceMs);