@maketribe/ms-app 3.2.42 → 3.2.43

package/dist/esm/components/basic/lexical-editor/composables/useLexicalCommandsLog.js

@@ -0,0 +1,37 @@
+import { COMMAND_PRIORITY_HIGH } from "lexical";
+import { ref, readonly } from "vue";
+import { useMounted } from "./utils.js";
+function useLexicalCommandsLog(editor) {
+  const loggedCommands = ref([]);
+  useMounted(() => {
+    const unregisterCommandListeners = /* @__PURE__ */ new Set();
+    for (const [command] of editor._commands) {
+      unregisterCommandListeners.add(
+        editor.registerCommand(
+          command,
+          (payload) => {
+            loggedCommands.value = [
+              ...loggedCommands.value,
+              {
+                payload,
+                type: command.type ? command.type : "UNKNOWN"
+              }
+            ];
+            if (loggedCommands.value.length > 10)
+              loggedCommands.value.shift();
+            return false;
+          },
+          COMMAND_PRIORITY_HIGH
+        )
+      );
+    }
+    return () => {
+      unregisterCommandListeners.forEach((unregister) => unregister());
+    };
+  });
+  return readonly(loggedCommands);
+}
+export {
+  useLexicalCommandsLog
+};
+//# sourceMappingURL=useLexicalCommandsLog.js.map

package/dist/esm/components/basic/lexical-editor/composables/useLexicalCommandsLog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLexicalCommandsLog.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/useLexicalCommandsLog.ts"],"sourcesContent":["import { COMMAND_PRIORITY_HIGH, type LexicalCommand, type LexicalEditor } from 'lexical'\r\nimport { readonly, ref } from 'vue'\r\nimport { useMounted } from './utils'\r\n\r\nexport function useLexicalCommandsLog(\r\n  editor: LexicalEditor,\r\n) {\r\n  const loggedCommands = ref<Array<LexicalCommand<unknown> & { payload: unknown }>>([])\r\n\r\n  useMounted(() => {\r\n    \r\n    const unregisterCommandListeners = new Set<() => void>()\r\n\r\n    for (const [command] of editor._commands) {\r\n      unregisterCommandListeners.add(\r\n        editor.registerCommand(\r\n          command,\r\n          (payload) => {\r\n            loggedCommands.value = [\r\n              ...loggedCommands.value,\r\n              {\r\n                payload,\r\n                type: command.type ? command.type : 'UNKNOWN',\r\n              },\r\n            ]\r\n\r\n            if (loggedCommands.value.length > 10)\r\n              loggedCommands.value.shift()\r\n\r\n            return false\r\n          },\r\n          COMMAND_PRIORITY_HIGH,\r\n        ),\r\n      )\r\n    }\r\n\r\n    return () => {\r\n      unregisterCommandListeners.forEach(unregister => unregister())\r\n    }\r\n  })\r\n\r\n  return readonly(loggedCommands)\r\n}\r\n"],"names":[],"mappings":";;;AAIO,SAAS,sBACd,QACA;AACM,QAAA,iBAAiB,IAA2D,CAAA,CAAE;AAEpF,aAAW,MAAM;AAET,UAAA,iDAAiC;AAEvC,eAAW,CAAC,OAAO,KAAK,OAAO,WAAW;AACb,iCAAA;AAAA,QACzB,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAY;AACX,2BAAe,QAAQ;AAAA,cACrB,GAAG,eAAe;AAAA,cAClB;AAAA,gBACE;AAAA,gBACA,MAAM,QAAQ,OAAO,QAAQ,OAAO;AAAA,cACtC;AAAA,YAAA;AAGE,gBAAA,eAAe,MAAM,SAAS;AAChC,6BAAe,MAAM;AAEhB,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO,MAAM;AACgB,iCAAA,QAAQ,CAAc,eAAA,WAAY,CAAA;AAAA,IAAA;AAAA,EAC/D,CACD;AAED,SAAO,SAAS,cAAc;AAChC;"}

package/dist/esm/components/basic/lexical-editor/composables/useLexicalEditorState.js

@@ -0,0 +1,237 @@
+import { ref } from "vue";
+import { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, $isElementNode, $isNodeSelection, FORMAT_TEXT_COMMAND, $createParagraphNode, UNDO_COMMAND, REDO_COMMAND } from "lexical";
+import { mergeRegister, $findMatchingParent } from "@lexical/utils";
+import { useMounted } from "./utils.js";
+import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from "@lexical/selection";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
+import { useLexicalEditorContext } from "./lexicalEditor.js";
+import "../utils/html.js";
+import { sanitizeUrl } from "../utils/url.js";
+import { showLinkEditDialog } from "../utils/link-edit-dialog.js";
+import "../utils/image.js";
+import "@maketribe/dm";
+import "element-plus";
+import "@element-plus/icons-vue";
+import "@lexical/overflow";
+import "@lexical/text";
+import "./useElementBlockSelection.js";
+const CommandLowPriority = 1;
+const FONT_FAMILY = "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings".split(";");
+const addFontSizeToOptions = function(options, size, rootSize = 14) {
+  options.push({ value: `${Math.round(size / rootSize * 100) / 100}rem`, label: size + "px" });
+};
+const useLexicalEditorState = function(editor, options) {
+  var _a, _b;
+  if (!editor) {
+    editor = useLexicalEditorContext().editor;
+  }
+  if (!options) {
+    options = { rootFontSize: 14, fontfamilyOptoins: [], fontSizeOptions: [] };
+  }
+  options.rootFontSize ?? (options.rootFontSize = 14);
+  if (!((_a = options == null ? void 0 : options.fontSizeOptions) == null ? void 0 : _a.length)) {
+    options.fontSizeOptions = [];
+    for (let i = 0; i < 80; i += 2) {
+      addFontSizeToOptions(options.fontSizeOptions, 10 + i, options.rootFontSize);
+      if (i >= 2 && i < 22) {
+        addFontSizeToOptions(options.fontSizeOptions, 10 + i + 0.5, options.rootFontSize);
+        addFontSizeToOptions(options.fontSizeOptions, 10 + i + 1, options.rootFontSize);
+        addFontSizeToOptions(options.fontSizeOptions, 10 + i + 1.5, options.rootFontSize);
+      }
+    }
+  }
+  if (!((_b = options == null ? void 0 : options.fontfamilyOptoins) == null ? void 0 : _b.length)) {
+    options.fontfamilyOptoins = [{ value: "", label: "默认字体" }].concat(FONT_FAMILY.map((fv) => {
+      let fvl = fv.split("="), label = fvl[0], value = fvl[1] || `'${label}'`;
+      return { value, label };
+    }));
+  }
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+  const fontSize = ref(options.rootFontSize + "px");
+  const fontColor = ref("#000");
+  const bgColor = ref("#fff");
+  const fontFamily = ref(options.fontfamilyOptoins[0]);
+  const canBold = ref(false);
+  const canItalic = ref(false);
+  const canUnderline = ref(false);
+  const canStrikethrough = ref(false);
+  const canSubscript = ref(false);
+  const canSuperscript = ref(false);
+  const alignList = ref(["left", "center", "right", "justify"]);
+  const alignValue = ref(alignList.value[0]);
+  const canLink = ref(false);
+  const linkValue = ref("");
+  const canTextStyleDisabled = ref(false);
+  const contentTypeList = [
+    { value: "paragraph", label: "正文" },
+    { value: "h1", label: "标题 1" },
+    { value: "h2", label: "标题 2" },
+    { value: "h3", label: "标题 3" },
+    { value: "h4", label: "标题 4" },
+    { value: "h5", label: "标题 5" }
+  ];
+  const curContentTypeDesc = ref("正文");
+  const activeNode = ref(null);
+  const setTextStyle = function(token, value) {
+    if (["bold", "italic", "underline", "strikethrough", "subscript", "superscript"].indexOf(token) >= 0) {
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, token);
+    } else if (token == "link") {
+      if (canLink.value) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      } else {
+        showLinkEditDialog("").then((href) => {
+          if (href.trim()) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(href));
+          }
+        });
+      }
+    } else {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (selection !== null) {
+          $patchStyleText(selection, { [token]: value });
+        }
+      }, {});
+    }
+  };
+  const setContentType = function(type) {
+    const contentType = contentTypeList.find((item) => item.value == type);
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, { ["font-size"]: "" });
+        if (contentType.value == "paragraph") {
+          if (canSubscript.value) {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+          } else if (canSuperscript.value) {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+          } else {
+            $setBlocksType(selection, () => $createParagraphNode());
+          }
+        } else {
+          $setBlocksType(selection, () => {
+            return $createHeadingNode(contentType.value);
+          });
+        }
+        curContentTypeDesc.value = contentType.label;
+      }
+    });
+  };
+  useMounted(() => {
+    return mergeRegister(
+      editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+        canUndo.value = payload;
+        return false;
+      }, CommandLowPriority),
+      editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+        canRedo.value = payload;
+        return false;
+      }, CommandLowPriority),
+      // 其他状态
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          var _a2, _b2, _c, _d, _e, _f, _g, _h;
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            let parentNode = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+              const parent2 = e.getParent();
+              return parent2 !== null && $isElementNode(parent2);
+            });
+            if (parentNode === null) {
+              parentNode = anchorNode.getTopLevelElementOrThrow();
+            }
+            let parentDOM = editor.getElementByKey(parentNode.getKey());
+            alignValue.value = (parentDOM == null ? void 0 : parentDOM.style.textAlign) || "left";
+            if (alignValue.value == "start") {
+              alignValue.value = "left";
+            } else if (alignValue.value == "end") {
+              alignValue.value = "right";
+            }
+            canBold.value = selection.hasFormat("bold");
+            canItalic.value = selection.hasFormat("italic");
+            canUnderline.value = selection.hasFormat("underline");
+            canStrikethrough.value = selection.hasFormat("strikethrough");
+            canSubscript.value = selection.hasFormat("subscript");
+            canSuperscript.value = selection.hasFormat("superscript");
+            if (canSubscript.value) {
+              curContentTypeDesc.value = ((_a2 = contentTypeList.find((item) => item.value == "subscript")) == null ? void 0 : _a2.label) ?? "正文";
+            } else if (canSuperscript.value) {
+              curContentTypeDesc.value = ((_b2 = contentTypeList.find((item) => item.value == "superscript")) == null ? void 0 : _b2.label) ?? "正文";
+            } else if (parentDOM !== null) {
+              const type = $isHeadingNode(parentNode) ? parentNode.getTag() : parentNode.getType();
+              curContentTypeDesc.value = ((_c = contentTypeList.find((item) => item.value == type)) == null ? void 0 : _c.label) ?? "正文";
+            }
+            var ff = $getSelectionStyleValueForProperty(selection, "font-family", "");
+            let fs = $getSelectionStyleValueForProperty(selection, "font-size", "");
+            if (fs) {
+              fontSize.value = Math.round(parseFloat(fs) * options.rootFontSize) + "px";
+            } else if (parentDOM) {
+              fontSize.value = ((_e = (_d = editor.getRootElement()) == null ? void 0 : _d.ownerDocument.defaultView) == null ? void 0 : _e.getComputedStyle(parentDOM).fontSize) ?? Math.round(options.rootFontSize) + "px";
+            } else {
+              fontSize.value = Math.round(options.rootFontSize) + "px";
+            }
+            if (!ff && parentDOM) {
+              ff = ((_g = (_f = editor.getRootElement()) == null ? void 0 : _f.ownerDocument.defaultView) == null ? void 0 : _g.getComputedStyle(parentDOM).fontFamily) ?? "";
+            }
+            fontColor.value = $getSelectionStyleValueForProperty(selection, "color", "#000");
+            bgColor.value = $getSelectionStyleValueForProperty(selection, "background-color", "");
+            fontFamily.value = ((_h = options.fontfamilyOptoins) == null ? void 0 : _h.find((item) => item.value == ff)) || options.fontfamilyOptoins[0];
+            canTextStyleDisabled.value = false;
+            const parent = anchorNode.getParent();
+            if (canLink.value = $isLinkNode(parent) || $isLinkNode(anchorNode)) {
+              linkValue.value = $isLinkNode(parent) ? parent.getURL() : anchorNode.getURL();
+            } else {
+              linkValue.value = "";
+            }
+            activeNode.value = anchorNode;
+          } else {
+            canTextStyleDisabled.value = true;
+            activeNode.value = $isNodeSelection(selection) ? selection.getNodes()[0] : null;
+            curContentTypeDesc.value = "正文";
+          }
+        });
+      })
+    );
+  });
+  const undoCommand = () => {
+    editor.dispatchCommand(UNDO_COMMAND, void 0);
+  };
+  const redoCommand = () => {
+    editor.dispatchCommand(REDO_COMMAND, void 0);
+  };
+  return {
+    canUndo,
+    undoCommand,
+    canRedo,
+    redoCommand,
+    canTextStyleDisabled,
+    setTextStyle,
+    fontSize,
+    fontSizeOptions: options.fontSizeOptions,
+    fontColor,
+    bgColor,
+    fontFamily,
+    fontfamilyOptoins: options.fontfamilyOptoins,
+    canBold,
+    canItalic,
+    canUnderline,
+    canStrikethrough,
+    canSubscript,
+    canSuperscript,
+    alignList,
+    alignValue,
+    canLink,
+    linkValue,
+    activeNode,
+    contentTypeList,
+    curContentTypeDesc,
+    setContentType
+  };
+};
+export {
+  useLexicalEditorState
+};
+//# sourceMappingURL=useLexicalEditorState.js.map

package/dist/esm/components/basic/lexical-editor/composables/useLexicalEditorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLexicalEditorState.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/useLexicalEditorState.ts"],"sourcesContent":["\r\n\r\nimport { ref } from 'vue'\r\nimport type { CommandListenerPriority,ElementFormatType, LexicalEditor, LexicalNode, TextFormatType } from 'lexical'\r\nimport {  $createParagraphNode, $getSelection,$isElementNode,$isRangeSelection, $isNodeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND, } from 'lexical'\r\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\r\nimport { useMounted } from './utils'\r\nimport { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection'\r\nimport { $isLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\r\nimport { $createHeadingNode, $isHeadingNode, HeadingTagType } from '@lexical/rich-text'\r\nimport { useLexicalEditorContext } from './lexicalEditor'\r\nimport { showLinkEditDialog,sanitizeUrl } from \"../utils\" \r\n\r\n/**\r\n * 最低的监听优先级\r\n */\r\nconst CommandLowPriority: CommandListenerPriority = 1\r\n\r\n/**\r\n * 编辑配置项\r\n */\r\ntype LexicalEditOptions = {\r\n  rootFontSize?:number,\r\n  fontSizeOptions?:Array<{value:string,label:string}>,\r\n  fontfamilyOptoins?:Array<{value:string,label:string} >\r\n}\r\n\r\n// 字体\r\nconst FONT_FAMILY = \"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings\".split(\";\")\r\n\r\n// 设置样式\r\nconst addFontSizeToOptions = function(options:Array<{value:string,label:string}>, size:number,rootSize:number = 14){\r\n  options.push({value:`${Math.round(size / rootSize * 100) / 100}rem`,label:size+\"px\"});\r\n}\r\n\r\n/**\r\n * 获取编辑器状态\r\n * @param editorInstance \r\n * @returns \r\n */\r\nexport const useLexicalEditorState = function (editor?: LexicalEditor,options?:LexicalEditOptions) {\r\n\r\n  if (!editor) { editor = useLexicalEditorContext().editor; }\r\n\r\n  // 初始化配置\r\n  if(!options){ options = { rootFontSize:14,fontfamilyOptoins:[],fontSizeOptions:[] }; }\r\n\r\n  // 根文章大小默认14\r\n  options.rootFontSize ??= 14;\r\n\r\n  // 字体大小配置项初始化\r\n  if(!options?.fontSizeOptions?.length){\r\n    options.fontSizeOptions = [];\r\n    // 数据初始化\r\n    for(let i=0;i<80;i+=2){\r\n      addFontSizeToOptions(options.fontSizeOptions,10 + i,options.rootFontSize);\r\n      if(i >= 2 && i < 22){\r\n        addFontSizeToOptions(options.fontSizeOptions,10 + i + 0.5,options.rootFontSize);\r\n        addFontSizeToOptions(options.fontSizeOptions,10 + i + 1,options.rootFontSize);\r\n        addFontSizeToOptions(options.fontSizeOptions,10 + i + 1.5,options.rootFontSize);\r\n      }\r\n    }\r\n  }\r\n\r\n  // 默认字体初始化\r\n  if(!options?.fontfamilyOptoins?.length){\r\n    options.fontfamilyOptoins = [{value:\"\",label:\"默认字体\"}].concat(FONT_FAMILY.map(fv=>{\r\n      let fvl = fv.split(\"=\"),label=fvl[0],value=fvl[1] || `'${label}'`;\r\n      return { value,label}\r\n    }))\r\n  }\r\n\r\n  const canUndo = ref(false)\r\n  const canRedo = ref(false)\r\n  const fontSize = ref(options.rootFontSize+\"px\")\r\n  const fontColor = ref<string>('#000')\r\n  const bgColor = ref<string>('#fff')\r\n  const fontFamily = ref<any>(options.fontfamilyOptoins![0])\r\n  const canBold = ref(false)\r\n  const canItalic = ref(false)\r\n  const canUnderline = ref(false)\r\n  const canStrikethrough = ref(false)\r\n  const canSubscript = ref(false)\r\n  const canSuperscript = ref(false)\r\n\r\n  // 对齐方式\r\n  const alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\n  const alignValue = ref(alignList.value[0])\r\n  const canLink = ref(false)\r\n  const linkValue = ref(\"\");\r\n  const canTextStyleDisabled = ref(false);\r\n\r\n  // 内容类型清单\r\n  const contentTypeList = [\r\n    {value:\"paragraph\",label:\"正文\"},\r\n    {value:\"h1\",label:\"标题 1\"},\r\n    {value:\"h2\",label:\"标题 2\"},\r\n    {value:\"h3\",label:\"标题 3\"},\r\n    {value:\"h4\",label:\"标题 4\"},\r\n    {value:\"h5\",label:\"标题 5\"}\r\n  ];\r\n  //当前选中内容\r\n  const curContentTypeDesc = ref(\"正文\");\r\n\r\n  // 激活的节点\r\n  const activeNode = ref<LexicalNode|null>(null);\r\n\r\n  // 设置文字样式\r\n  const setTextStyle = function(token:string,value?:string){\r\n\r\n    if([\"bold\",\"italic\",\"underline\",\"strikethrough\",\"subscript\",\"superscript\"].indexOf(token) >=0){\r\n      editor.dispatchCommand(FORMAT_TEXT_COMMAND, token as TextFormatType)\r\n    }\r\n    else if(token == \"link\"){\r\n\r\n      if(canLink.value){\r\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n      }\r\n      else{\r\n        showLinkEditDialog(\"\").then((href:any)=>{\r\n          if(href.trim()){\r\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(href))\r\n          }\r\n        })\r\n      }\r\n      \r\n    }\r\n    else{\r\n      editor.update(() => {\r\n\r\n        const selection = $getSelection()\r\n  \r\n        if (selection !== null){\r\n          $patchStyleText(selection,{ [token]:value } as any)\r\n        }\r\n      },{})\r\n    }\r\n  }\r\n\r\n  // 设置内容\r\n  const setContentType = function(type:string){\r\n\r\n    const contentType:any = contentTypeList.find(item=>item.value == type)\r\n    \r\n    editor.update(() => {\r\n  \r\n        const selection = $getSelection()\r\n    \r\n        if ($isRangeSelection(selection)){\r\n\r\n          // 清空字体大小\r\n          $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n    \r\n          if(contentType.value == \"paragraph\"){\r\n\r\n            if(canSubscript.value){\r\n              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript' as TextFormatType)\r\n            }\r\n            else if(canSuperscript.value){\r\n              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript' as TextFormatType)\r\n            }\r\n            else{\r\n              $setBlocksType(selection, () => $createParagraphNode())\r\n            }\r\n          }\r\n          else{\r\n            $setBlocksType(selection, () => {\r\n              return $createHeadingNode(contentType.value as  HeadingTagType)\r\n            })\r\n          }\r\n          curContentTypeDesc.value = contentType.label\r\n        }\r\n    })\r\n  }\r\n\r\n  useMounted(() => {\r\n   \r\n\r\n    return mergeRegister(\r\n      editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean) => {\r\n        canUndo.value = payload\r\n        return false\r\n      }, CommandLowPriority),\r\n      editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean) => {\r\n        canRedo.value = payload\r\n        return false\r\n      },CommandLowPriority),\r\n      // 其他状态\r\n      editor.registerUpdateListener(({ editorState }) => {\r\n        editorState.read(() => {\r\n\r\n          const selection = $getSelection()\r\n\r\n          if ($isRangeSelection(selection)) {\r\n\r\n            const anchorNode = selection.anchor.getNode()\r\n\r\n            let parentNode = anchorNode.getKey() === 'root'\r\n                  ? anchorNode\r\n                  : $findMatchingParent(anchorNode, (e) => {\r\n                    const parent = e.getParent();\r\n                    //  $isRootOrShadowRoot\r\n                    return parent !== null && $isElementNode(parent)\r\n                  });\r\n\r\n\r\n            if (parentNode === null){ parentNode = anchorNode.getTopLevelElementOrThrow() }\r\n\r\n            let parentDOM = editor.getElementByKey(parentNode.getKey());\r\n\r\n            // 文本对齐\r\n            alignValue.value = (parentDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n            if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n            else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n            // Update text format\r\n            canBold.value = selection.hasFormat('bold')\r\n            canItalic.value = selection.hasFormat('italic')\r\n            canUnderline.value = selection.hasFormat('underline')\r\n            canStrikethrough.value = selection.hasFormat('strikethrough')\r\n            canSubscript.value = selection.hasFormat('subscript')\r\n            canSuperscript.value = selection.hasFormat('superscript')\r\n\r\n            if(canSubscript.value){\r\n              curContentTypeDesc.value = contentTypeList.find(item=>item.value == 'subscript')?.label ?? \"正文\"\r\n            }\r\n            else if(canSuperscript.value){\r\n              curContentTypeDesc.value = contentTypeList.find(item=>item.value == 'superscript')?.label ?? \"正文\"\r\n            }\r\n            else if (parentDOM !== null) {\r\n              const type = $isHeadingNode(parentNode) ? parentNode.getTag() : parentNode.getType();\r\n              curContentTypeDesc.value = contentTypeList.find(item=>item.value == type)?.label ?? \"正文\"\r\n            }\r\n\r\n            // Handle buttons\r\n            var ff = $getSelectionStyleValueForProperty(selection, 'font-family', '');\r\n            let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '');\r\n            \r\n            if(fs){\r\n              fontSize.value = Math.round(parseFloat(fs) * (options.rootFontSize!))+\"px\"\r\n            }\r\n            else if(parentDOM){\r\n              fontSize.value = editor.getRootElement()?.ownerDocument.defaultView?.getComputedStyle(parentDOM).fontSize ?? Math.round((options.rootFontSize!))+\"px\";\r\n            }\r\n            else{\r\n              fontSize.value = Math.round((options.rootFontSize!))+\"px\"\r\n            }\r\n\r\n            // 字体\r\n            if(!ff && parentDOM){\r\n              ff = editor.getRootElement()?.ownerDocument.defaultView?.getComputedStyle(parentDOM).fontFamily ?? \"\";\r\n            }\r\n          \r\n            fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n            bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '')\r\n            fontFamily.value = options.fontfamilyOptoins?.find(item=>item.value==ff) || options.fontfamilyOptoins![0];\r\n      \r\n            // 不禁用\r\n            canTextStyleDisabled.value = false;\r\n\r\n            // Update links\r\n            const parent = anchorNode.getParent()\r\n            \r\n            if(canLink.value = $isLinkNode(parent) || $isLinkNode(anchorNode)){\r\n              linkValue.value = $isLinkNode(parent) ? parent.getURL() : (anchorNode as LinkNode).getURL()\r\n            }\r\n            else{\r\n              linkValue.value = \"\";\r\n            }\r\n\r\n            // 节点类型\r\n            activeNode.value = anchorNode;\r\n\r\n          }\r\n          else{\r\n            canTextStyleDisabled.value = true;\r\n            activeNode.value = $isNodeSelection(selection) ? selection.getNodes()[0] : null;\r\n            curContentTypeDesc.value = \"正文\";\r\n          }\r\n        })\r\n      })\r\n    )\r\n  })\r\n\r\n  // undo\r\n  const undoCommand = ()=>{ editor.dispatchCommand(UNDO_COMMAND, undefined) }\r\n  const redoCommand = ()=>{ editor.dispatchCommand(REDO_COMMAND, undefined) }\r\n\r\n  return {\r\n    canUndo,undoCommand,\r\n    canRedo,redoCommand,\r\n    canTextStyleDisabled,\r\n    setTextStyle,\r\n    fontSize,fontSizeOptions:options.fontSizeOptions,\r\n    fontColor,\r\n    bgColor,\r\n    fontFamily,fontfamilyOptoins:options.fontfamilyOptoins,\r\n    canBold,\r\n    canItalic,\r\n    canUnderline,\r\n    canStrikethrough,\r\n    canSubscript,\r\n    canSuperscript,\r\n    alignList,\r\n    alignValue,\r\n    canLink,\r\n    linkValue,\r\n    activeNode,contentTypeList,curContentTypeDesc,setContentType\r\n  }\r\n}\r\n"],"names":["parent","_a","_b"],"mappings":"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"}

package/dist/esm/components/basic/lexical-editor/composables/useLexicalIsTextContentEmpty.js

@@ -0,0 +1,21 @@
+import { ref, readonly } from "vue";
+import { $isRootTextContentEmptyCurry } from "@lexical/text";
+import { useMounted } from "./utils.js";
+function useLexicalIsTextContentEmpty(editor, trim) {
+  const isEmpty = ref(
+    editor.getEditorState().read($isRootTextContentEmptyCurry(editor.isComposing(), trim))
+  );
+  useMounted(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      const isComposing = editor.isComposing();
+      isEmpty.value = editorState.read(
+        $isRootTextContentEmptyCurry(isComposing, trim)
+      );
+    });
+  });
+  return readonly(isEmpty);
+}
+export {
+  useLexicalIsTextContentEmpty
+};
+//# sourceMappingURL=useLexicalIsTextContentEmpty.js.map

package/dist/esm/components/basic/lexical-editor/composables/useLexicalIsTextContentEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLexicalIsTextContentEmpty.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/useLexicalIsTextContentEmpty.ts"],"sourcesContent":["import { readonly, ref } from 'vue'\r\nimport { $isRootTextContentEmptyCurry } from '@lexical/text'\r\nimport type { LexicalEditor } from 'lexical'\r\nimport { useMounted } from './utils'\r\n\r\nexport function useLexicalIsTextContentEmpty(editor: LexicalEditor, trim?: boolean) {\r\n  const isEmpty = ref(\r\n    editor\r\n      .getEditorState()\r\n      .read($isRootTextContentEmptyCurry(editor.isComposing(), trim)),\r\n  )\r\n\r\n  useMounted(() => {\r\n    return editor.registerUpdateListener(({ editorState }) => {\r\n      const isComposing = editor.isComposing()\r\n      isEmpty.value = editorState.read(\r\n        $isRootTextContentEmptyCurry(isComposing, trim),\r\n      )\r\n    })\r\n  })\r\n\r\n  return readonly(isEmpty)\r\n}\r\n"],"names":[],"mappings":";;;AAKgB,SAAA,6BAA6B,QAAuB,MAAgB;AAClF,QAAM,UAAU;AAAA,IACd,OACG,eACA,EAAA,KAAK,6BAA6B,OAAO,YAAA,GAAe,IAAI,CAAC;AAAA,EAAA;AAGlE,aAAW,MAAM;AACf,WAAO,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AAClD,YAAA,cAAc,OAAO;AAC3B,cAAQ,QAAQ,YAAY;AAAA,QAC1B,6BAA6B,aAAa,IAAI;AAAA,MAAA;AAAA,IAChD,CACD;AAAA,EAAA,CACF;AAED,SAAO,SAAS,OAAO;AACzB;"}

package/dist/esm/components/basic/lexical-editor/composables/useTableOfContents.js

@@ -0,0 +1,176 @@
+import { $isHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { mergeRegister, $getNextRightPreorderNode } from "@lexical/utils";
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from "lexical";
+import { ref } from "vue";
+import { useMounted } from "./utils.js";
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null)
+    return currentTableOfContents;
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key)
+      newTableOfContents.push(heading);
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey())
+      newTableOfContents.push(toEntry(heading));
+    else
+      newTableOfContents.push(oldHeading);
+  }
+  return newTableOfContents;
+}
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading)
+    newTableOfContents.push(newEntry);
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey())
+      continue;
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey())
+      newTableOfContents.push(newEntry);
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading))
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  return prevHeading;
+}
+function useTableOfContents(editor) {
+  const tableOfContents = ref([]);
+  editor.getEditorState().read(() => {
+    const root = $getRoot();
+    const rootChildren = root.getChildren();
+    for (const child of rootChildren) {
+      if ($isHeadingNode(child)) {
+        tableOfContents.value.push([
+          child.getKey(),
+          child.getTextContent(),
+          child.getTag()
+        ]);
+      }
+    }
+  });
+  const removeRootUpdateListener = editor.registerUpdateListener(
+    ({ editorState, dirtyElements }) => {
+      editorState.read(() => {
+        const updateChildHeadings = (node) => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              tableOfContents.value = $updateHeadingPosition(
+                prevHeading,
+                child,
+                tableOfContents.value
+              );
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+        $getRoot().getChildren().forEach((node) => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key))
+            updateChildHeadings(node);
+        });
+      });
+    }
+  );
+  const removeHeaderMutationListener = editor.registerMutationListener(
+    HeadingNode,
+    (mutatedNodes) => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === "created") {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              tableOfContents.value = $insertHeadingIntoTableOfContents(
+                prevHeading,
+                newHeading,
+                tableOfContents.value
+              );
+            }
+          } else if (mutation === "destroyed") {
+            tableOfContents.value = $deleteHeadingFromTableOfContents(
+              nodeKey,
+              tableOfContents.value
+            );
+          } else if (mutation === "updated") {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              tableOfContents.value = $updateHeadingPosition(
+                prevHeading,
+                newHeading,
+                tableOfContents.value
+              );
+            }
+          }
+        }
+      });
+    }
+  );
+  const removeTextNodeMutationListener = editor.registerMutationListener(
+    TextNode,
+    (mutatedNodes) => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === "updated") {
+            const currNode = $getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if ($isHeadingNode(parentNode)) {
+                tableOfContents.value = $updateHeadingInTableOfContents(
+                  parentNode,
+                  tableOfContents.value
+                );
+              }
+            }
+          }
+        }
+      });
+    }
+  );
+  useMounted(() => mergeRegister(
+    removeRootUpdateListener,
+    removeHeaderMutationListener,
+    removeTextNodeMutationListener
+  ));
+  return tableOfContents;
+}
+export {
+  useTableOfContents
+};
+//# sourceMappingURL=useTableOfContents.js.map

package/dist/esm/components/basic/lexical-editor/composables/useTableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableOfContents.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/useTableOfContents.ts"],"sourcesContent":["import { $isHeadingNode, HeadingNode, type HeadingTagType } from '@lexical/rich-text'\r\nimport { $getNextRightPreorderNode, mergeRegister } from '@lexical/utils'\r\nimport {\r\n  $getNodeByKey,\r\n  $getRoot,\r\n  $isElementNode,\r\n  type ElementNode,\r\n  type LexicalEditor,\r\n  type NodeKey,\r\n  type NodeMutation,\r\n  TextNode,\r\n} from 'lexical'\r\nimport { ref } from 'vue'\r\nimport { useMounted } from './utils'\r\n\r\nexport type TableOfContentsEntry = [\r\n  key: NodeKey,\r\n  text: string,\r\n  tag: HeadingTagType,\r\n]\r\n\r\nfunction toEntry(heading: HeadingNode): TableOfContentsEntry {\r\n  return [heading.getKey(), heading.getTextContent(), heading.getTag()]\r\n}\r\n\r\nfunction $insertHeadingIntoTableOfContents(\r\n  prevHeading: HeadingNode | null,\r\n  newHeading: HeadingNode | null,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  if (newHeading === null)\r\n    return currentTableOfContents\r\n\r\n  const newEntry: TableOfContentsEntry = toEntry(newHeading)\r\n  let newTableOfContents: Array<TableOfContentsEntry> = []\r\n  if (prevHeading === null) {\r\n    // check if key already exists\r\n    if (\r\n      currentTableOfContents.length > 0\r\n      && currentTableOfContents[0][0] === newHeading.__key\r\n    ) {\r\n      return currentTableOfContents\r\n    }\r\n\r\n    newTableOfContents = [newEntry, ...currentTableOfContents]\r\n  }\r\n  else {\r\n    for (let i = 0; i < currentTableOfContents.length; i++) {\r\n      const key = currentTableOfContents[i][0]\r\n      newTableOfContents.push(currentTableOfContents[i])\r\n      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {\r\n        // check if key already exists\r\n        if (\r\n          i + 1 < currentTableOfContents.length\r\n          && currentTableOfContents[i + 1][0] === newHeading.__key\r\n        ) {\r\n          return currentTableOfContents\r\n        }\r\n\r\n        newTableOfContents.push(newEntry)\r\n      }\r\n    }\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $deleteHeadingFromTableOfContents(\r\n  key: NodeKey,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents = []\r\n  for (const heading of currentTableOfContents) {\r\n    if (heading[0] !== key)\r\n      newTableOfContents.push(heading)\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $updateHeadingInTableOfContents(\r\n  heading: HeadingNode,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents: Array<TableOfContentsEntry> = []\r\n  for (const oldHeading of currentTableOfContents) {\r\n    if (oldHeading[0] === heading.getKey())\r\n      newTableOfContents.push(toEntry(heading))\r\n\r\n    else\r\n      newTableOfContents.push(oldHeading)\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\n/**\r\n * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`\r\n * is undefined, `heading` is placed at the start of table of contents\r\n */\r\nfunction $updateHeadingPosition(\r\n  prevHeading: HeadingNode | null,\r\n  heading: HeadingNode,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents: Array<TableOfContentsEntry> = []\r\n  const newEntry: TableOfContentsEntry = toEntry(heading)\r\n\r\n  if (!prevHeading)\r\n    newTableOfContents.push(newEntry)\r\n\r\n  for (const oldHeading of currentTableOfContents) {\r\n    if (oldHeading[0] === heading.getKey())\r\n      continue\r\n\r\n    newTableOfContents.push(oldHeading)\r\n    if (prevHeading && oldHeading[0] === prevHeading.getKey())\r\n      newTableOfContents.push(newEntry)\r\n  }\r\n\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $getPreviousHeading(node: HeadingNode): HeadingNode | null {\r\n  let prevHeading = $getNextRightPreorderNode(node)\r\n  while (prevHeading !== null && !$isHeadingNode(prevHeading))\r\n    prevHeading = $getNextRightPreorderNode(prevHeading)\r\n\r\n  return prevHeading\r\n}\r\n\r\nexport function useTableOfContents(editor: LexicalEditor) {\r\n  const tableOfContents = ref<Array<TableOfContentsEntry>>([])\r\n  // Set table of contents initial state\r\n  editor.getEditorState().read(() => {\r\n    const root = $getRoot()\r\n    const rootChildren = root.getChildren()\r\n    for (const child of rootChildren) {\r\n      if ($isHeadingNode(child)) {\r\n        tableOfContents.value.push([\r\n          child.getKey(),\r\n          child.getTextContent(),\r\n          child.getTag(),\r\n        ])\r\n      }\r\n    }\r\n  })\r\n\r\n  const removeRootUpdateListener = editor.registerUpdateListener(\r\n    ({ editorState, dirtyElements }) => {\r\n      editorState.read(() => {\r\n        const updateChildHeadings = (node: ElementNode) => {\r\n          for (const child of node.getChildren()) {\r\n            if ($isHeadingNode(child)) {\r\n              const prevHeading = $getPreviousHeading(child)\r\n              tableOfContents.value = $updateHeadingPosition(\r\n                prevHeading,\r\n                child,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n            else if ($isElementNode(child)) {\r\n              updateChildHeadings(child)\r\n            }\r\n          }\r\n        }\r\n\r\n        // If a node is changes, all child heading positions need to be updated\r\n        $getRoot()\r\n          .getChildren()\r\n          .forEach((node) => {\r\n            if ($isElementNode(node) && dirtyElements.get(node.__key))\r\n              updateChildHeadings(node)\r\n          })\r\n      })\r\n    },\r\n  )\r\n\r\n  // Listen to updates to heading mutations and update state\r\n  const removeHeaderMutationListener = editor.registerMutationListener(\r\n    HeadingNode,\r\n    (mutatedNodes: Map<string, NodeMutation>) => {\r\n      editor.getEditorState().read(() => {\r\n        for (const [nodeKey, mutation] of mutatedNodes) {\r\n          if (mutation === 'created') {\r\n            const newHeading = $getNodeByKey<HeadingNode>(nodeKey)\r\n            if (newHeading !== null) {\r\n              const prevHeading = $getPreviousHeading(newHeading)\r\n              tableOfContents.value = $insertHeadingIntoTableOfContents(\r\n                prevHeading,\r\n                newHeading,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n          }\r\n          else if (mutation === 'destroyed') {\r\n            tableOfContents.value = $deleteHeadingFromTableOfContents(\r\n              nodeKey,\r\n              tableOfContents.value,\r\n            )\r\n          }\r\n          else if (mutation === 'updated') {\r\n            const newHeading = $getNodeByKey<HeadingNode>(nodeKey)\r\n            if (newHeading !== null) {\r\n              const prevHeading = $getPreviousHeading(newHeading)\r\n              tableOfContents.value = $updateHeadingPosition(\r\n                prevHeading,\r\n                newHeading,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n          }\r\n        }\r\n      })\r\n    },\r\n  )\r\n\r\n  // Listen to text node mutation updates\r\n  const removeTextNodeMutationListener = editor.registerMutationListener(\r\n    TextNode,\r\n    (mutatedNodes: Map<string, NodeMutation>) => {\r\n      editor.getEditorState().read(() => {\r\n        for (const [nodeKey, mutation] of mutatedNodes) {\r\n          if (mutation === 'updated') {\r\n            const currNode = $getNodeByKey(nodeKey)\r\n            if (currNode !== null) {\r\n              const parentNode = currNode.getParentOrThrow()\r\n              if ($isHeadingNode(parentNode)) {\r\n                tableOfContents.value = $updateHeadingInTableOfContents(\r\n                  parentNode,\r\n                  tableOfContents.value,\r\n                )\r\n              }\r\n            }\r\n          }\r\n        }\r\n      })\r\n    },\r\n  )\r\n\r\n  useMounted(() => mergeRegister(\r\n    removeRootUpdateListener,\r\n    removeHeaderMutationListener,\r\n    removeTextNodeMutationListener,\r\n  ))\r\n\r\n  return tableOfContents\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/lexical-editor/composables/utils.js

@@ -0,0 +1,24 @@
+import { watchEffect, onMounted, onUnmounted } from "vue";
+function useEffect(cb, options) {
+  watchEffect((onInvalidate) => {
+    const unregister = cb();
+    onInvalidate(() => unregister == null ? void 0 : unregister());
+  }, {
+    flush: "post",
+    ...options
+  });
+}
+function useMounted(cb) {
+  let unregister;
+  onMounted(() => {
+    unregister = cb();
+  });
+  onUnmounted(() => {
+    unregister == null ? void 0 : unregister();
+  });
+}
+export {
+  useEffect,
+  useMounted
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/basic/lexical-editor/composables/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/utils.ts"],"sourcesContent":["import type { WatchOptionsBase } from 'vue'\r\nimport { watchEffect,onMounted, onUnmounted } from 'vue'\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function useEffect(cb: () => (() => any) | undefined, options?: WatchOptionsBase) {\r\n  watchEffect((onInvalidate) => {\r\n    const unregister = cb()\r\n\r\n    onInvalidate(() => unregister?.())\r\n  }, {\r\n    flush: 'post',\r\n    ...options,\r\n  })\r\n}\r\n\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function useMounted(cb: () => undefined | (() => any)) {\r\n    \r\n  let unregister: (() => void) | undefined\r\n\r\n  onMounted(() => {\r\n    unregister = cb()\r\n  })\r\n\r\n  onUnmounted(() => {\r\n    unregister?.()\r\n  })\r\n}\r\n"],"names":[],"mappings":";AAMgB,SAAA,UAAU,IAAmC,SAA4B;AACvF,cAAY,CAAC,iBAAiB;AAC5B,UAAM,aAAa;AAEN,iBAAA,MAAM,0CAAc;AAAA,EAAA,GAChC;AAAA,IACD,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,CACJ;AACH;AAMO,SAAS,WAAW,IAAmC;AAExD,MAAA;AAEJ,YAAU,MAAM;AACd,iBAAa,GAAG;AAAA,EAAA,CACjB;AAED,cAAY,MAAM;AACH;AAAA,EAAA,CACd;AACH;"}