@baasix/lexical 0.0.2 → 0.0.4

package/dist/index.js

@@ -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,33 +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
-        );
-      } else {
-        const markdown = $convertToMarkdownString2(
-          PLAYGROUND_TRANSFORMERS,
-          void 0,
-          //node
-          shouldPreserveNewLinesInMarkdown
-        );
-        const codeNode = $createCodeNode("markdown");
-        codeNode.append($createTextNode2(markdown));
-        root.clear().append(codeNode);
-        if (markdown.length === 0) {
-          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",
@@ -872,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
@@ -9833,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";
@@ -9996,7 +10043,7 @@ function FloatingLinkEditor({
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
+        SELECTION_CHANGE_COMMAND2,
         () => {
           $updateLinkEditor();
           return true;
@@ -10203,7 +10250,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsL
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
+        SELECTION_CHANGE_COMMAND2,
         (_payload, newEditor) => {
           $updateToolbar();
           setActiveEditor(newEditor);
@@ -10271,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";
@@ -10441,7 +10488,7 @@ function TextFormatFloatingToolbar({
         });
       }),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND2,
+        SELECTION_CHANGE_COMMAND3,
         () => {
           $updateTextFormatFloatingToolbar();
           return false;
@@ -11494,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";
@@ -12501,7 +12548,7 @@ function TableCellActionMenuContainer({
     return mergeRegister12(
       editor.registerUpdateListener(delayedCallback),
       editor.registerCommand(
-        SELECTION_CHANGE_COMMAND3,
+        SELECTION_CHANGE_COMMAND4,
         delayedCallback,
         COMMAND_PRIORITY_CRITICAL2
       ),
@@ -13831,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
@@ -14516,8 +14563,9 @@ function ToolbarPlugin({
         );
         const theme2 = element.getTheme();
         updateToolbarState("codeTheme", theme2 || "");
-        return;
+        return true;
       }
+      return false;
     },
     [updateToolbarState, isCodeHighlighted, isCodeShiki]
   );
@@ -14561,7 +14609,9 @@ function ToolbarPlugin({
           updateToolbarState("blockType", type);
         } else {
           $handleHeadingNode(element);
-          $handleCodeNode(element);
+          if ($handleCodeNode(element)) {
+            return;
+          }
         }
       }
       updateToolbarState(
@@ -14644,7 +14694,7 @@ function ToolbarPlugin({
   ]);
   useEffect43(() => {
     return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND4,
+      SELECTION_CHANGE_COMMAND5,
       (_payload, newEditor) => {
         setActiveEditor(newEditor);
         $updateToolbar();
@@ -15924,6 +15974,7 @@ function HtmlPlugin({
     lastExternalValue.current = value;
     editor.update(
       () => {
+        $setSelection7(null);
         const root = $getRoot3();
         if (!value || value === "<p></p>" || value === "<p><br></p>") {
           root.clear();