@maketribe/ms-app 3.2.23 → 3.2.25

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection } from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrs } from './index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\n\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"Picture\",\r\n    text:\"图片\",\r\n    action:async ()=>{\r\n      // 显示图片编辑面板\r\n      ShowImageEditPanel({\r\n        src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n      } as ImageAttrs).then((data:any)=>{\r\n        editor.dispatchCommand(INSERT_IMAGE_COMMAND,data as ImageAttrs)\r\n      });\r\n    },\r\n    sort:11\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGE_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE,(files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n\r\n        for (const {file, result} of filesResult) {\r\n\r\n          if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {\r\n\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:result,\r\n              alt:file.name,\r\n              maxWidth:\":100%\"\r\n            } as ImageAttrs)\r\n          }\r\n        }\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageNode","RegisterToolbarExtend","ShowImageEditPanel","INSERT_IMAGE_COMMAND","mergeRegister","$insertNodeToNearestRoot","$createImageNode","COMMAND_PRIORITY_EDITOR","DRAG_DROP_PASTE","mediaFileReader","isMimeType","COMMAND_PRIORITY_LOW","onUnmounted"],"mappings":";;;;;;;;;;;;AAUA,UAAM,yBAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,SAASA,WAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AAEIC,4CAAA;AAAA,YACjB,KAAI;AAAA,YAAI,KAAI;AAAA,YAAI,OAAM;AAAA,YAAI,QAAO;AAAA,YAAI,UAAS;AAAA,YAAQ,WAAU;AAAA,YAAI,QAAO;AAAA,UAAA,CAC9D,EAAE,KAAK,CAAC,SAAW;AACzB,mBAAA,gBAAgBC,4BAAqB,IAAkB;AAAA,UAAA,CAC/D;AAAA,QACH;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BD,4BAAqB,CAAC,YAAY;AAC1CE,yCAAAC,MAAAA,iBAAiB,OAAO,CAAC;AAC3C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA,QAGzB,OAAO,gBAAgBC,0BAAgB,CAAC,UAAU;AAEhD,WAAC,YAAY;AAEL,kBAAA,cAAc,MAAMC,sBAAgB,OAAO,CAAC,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3F,uBAAW,EAAC,MAAM,OAAM,KAAK,aAAa;AAEpC,kBAAAC,MAAA,WAAW,MAAM,sBAAsB,GAAG;AAE5C,uBAAO,gBAAgBP,4BAAsB;AAAA,kBAC3C,KAAI;AAAA,kBACJ,KAAI,KAAK;AAAA,kBACT,UAAS;AAAA,gBAAA,CACI;AAAA,cACjB;AAAA,YACF;AAAA,UAAA;AAGK,iBAAA;AAAA,WACPQ,4BAAoB;AAAA,MAAA;AAGZC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,CLICK_COMMAND,$isParagraphNode,\r\n  $getSelection,$createParagraphNode,$isNodeSelection, $getNodeByKey\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { onMounted,  } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrType } from './index'\r\nimport { $isImageTextNode } from '../ImageTextPlugin'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showImageEditDialog,imageUpload } from \"./utils\"\r\nimport {  useElementModule } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\r\n// 图片类型\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n \r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Picture\",\r\n  text:\"图片\",\r\n  action:async ()=>{\r\n    // 显示图片编辑面板\r\n    showImageEditDialog({\r\n      src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n    }).then(async (data:any)=>{\r\n      const result = await uploadhandle([data.src])\r\n      data.src = result[0]\r\n      editor.dispatchCommand(INSERT_IMAGE_COMMAND,data)\r\n    });\r\n  },\r\n  sort:11\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 上传处理函数\r\nconst uploadhandle = async (pathList:Array<string>)=>{\r\n\r\n  if(pathList.length){\r\n\r\n    const loadingInstance = ElLoading.service({ fullscreen: true,text:\"图片上传中...\" })\r\n\r\n    const reesult = await Promise.all(pathList.map(path=>{\r\n      return imageUpload(path)\r\n    }))\r\n\r\n    loadingInstance.close();\r\n\r\n    return reesult;\r\n  }\r\n\r\n  return [];\r\n}\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected,  curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  return el.tagName.toLowerCase() == \"img\" ? el : null\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value) as ImageNode;\r\n\r\n  if(node != null){\r\n  \r\n    const parent = node.getParent();\r\n    const isImageText = $isImageTextNode(parent)\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居左\" : \"左对齐\",icon:`doc-align-left`,action(){\r\n          editor.update(()=>{\r\n            if(isImageText){\r\n              node.setAttrs({float:\"left\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"left\")\r\n            }\r\n\r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent)){\r\n      toolbarList.push({ title: \"居中对齐\",icon:`doc-align-center`,action(){\r\n          editor.update(()=>{  \r\n            parent.setFormat(\"center\")  \r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居右\" : \"右对齐\",icon:`doc-align-right`,action(){\r\n          editor.update(()=>{\r\n\r\n            if(isImageText){\r\n              node.setAttrs({float:\"right\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"right\")\r\n            }\r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    // 编辑\r\n    toolbarList.push({ \r\n      title:\"编辑\",icon:\"Edit\",action:async ()=>{\r\n\r\n        // 显示图片编辑面板\r\n        const data:any = await showImageEditDialog(node.__attrs);\r\n        const result = await uploadhandle([data.src])\r\n        data.src = result[0];\r\n        editor.update(()=>{\r\n          node.setAttrs(data)\r\n          updateActiveViewState(null);\r\n        })\r\n      }\r\n    });\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\n// 编辑器挂载\r\nuseMounted(()=>{\r\n  // 注册事件\r\n  return mergeRegister(\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGE_COMMAND,(payload) => {\r\n      const p = $createParagraphNode()\r\n      p.append($createImageNode(payload))\r\n      $insertNodeToNearestRoot(p)\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE,(files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n        \r\n        const result = await uploadhandle(filesResult.filter(f=>isMimeType(f.file, ACCEPTABLE_IMAGE_TYPES)).map(f=>f.result))\r\n\r\n        result.forEach(path=>{\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:path, alt:\"\",  maxWidth:\":100%\"\r\n            } as ImageAttrType)\r\n        })\r\n\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  )\r\n})\r\n\r\n// 当前插件挂载\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-doc-active-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n  </div>\r\n</template>\r\n"],"names":["registerDocEditorToolbarExtend","showImageEditDialog","INSERT_IMAGE_COMMAND","useLexicalComposer","ElLoading","imageUpload","useElementModule","$getNodeByKey","$isImageTextNode","$isParagraphNode","useMounted","mergeRegister","$createParagraphNode","$createImageNode","$insertNodeToNearestRoot","COMMAND_PRIORITY_EDITOR","DRAG_DROP_PASTE","mediaFileReader","isMimeType","COMMAND_PRIORITY_LOW","onMounted","ImageNode"],"mappings":";;;;;;;;;;;;;;;;AAiBA,UAAM,yBAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAI6BA,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AAEKC,oCAAA;AAAA,UAClB,KAAI;AAAA,UAAI,KAAI;AAAA,UAAI,OAAM;AAAA,UAAI,QAAO;AAAA,UAAI,UAAS;AAAA,UAAQ,WAAU;AAAA,UAAI,QAAO;AAAA,QAAA,CAC5E,EAAE,KAAK,OAAO,SAAW;AACxB,gBAAM,SAAS,MAAM,aAAa,CAAC,KAAK,GAAG,CAAC;AACvC,eAAA,MAAM,OAAO,CAAC;AACZ,iBAAA,gBAAgBC,+BAAqB,IAAI;AAAA,QAAA,CACjD;AAAA,MACH;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAExB,UAAM,SAASC,WAAAA;AAGT,UAAA,eAAe,OAAO,aAAyB;AAEnD,UAAG,SAAS,QAAO;AAEX,cAAA,kBAAkBC,sBAAU,QAAQ,EAAE,YAAY,MAAK,MAAK,YAAY;AAE9E,cAAM,UAAU,MAAM,QAAQ,IAAI,SAAS,IAAI,CAAM,SAAA;AACnD,iBAAOC,QAAAA,YAAY,IAAI;AAAA,QACxB,CAAA,CAAC;AAEF,wBAAgB,MAAM;AAEf,eAAA;AAAA,MACT;AAEA,aAAO;IAAC;AAIV,UAAM,EAAE,YAAa,cAAc,cAAa,0BAA0BC,cAAAA,iBAAiB,CAAI,OAAA;AAC7F,aAAO,GAAG,QAAQ,YAAY,KAAK,QAAQ,KAAK;AAAA,IAClD,GAAE,CAAC,cAAY;AAEP,YAAA,OAAOC,QAAAA,cAAc,aAAa,KAAK;AAE7C,UAAG,QAAQ,MAAK;AAER,cAAA,SAAS,KAAK;AACd,cAAA,cAAcC,+BAAiB,MAAM;AAG3C,cAAM,cAAe,CAAA;AAElB,YAAAC,QAAA,iBAAiB,MAAM,KAAK,aAAY;AACzC,sBAAY,KAAK;AAAA,YAAE,OAAO,cAAc,OAAO;AAAA,YAAM,MAAK;AAAA,YAAiB,SAAQ;AAC/E,qBAAO,OAAO,MAAI;AAChB,oBAAG,aAAY;AACb,uBAAK,SAAS,EAAC,OAAM,OAAO,CAAA;AAAA,gBAAA,OAE1B;AACF,yBAAO,UAAU,MAAM;AAAA,gBACzB;AAEA,sCAAsB,IAAI;AAAA,cAAA,CAC3B;AAAA,YACH;AAAA,UAAA,CACD;AAAA,QACH;AAEG,YAAAA,QAAAA,iBAAiB,MAAM,GAAE;AAC1B,sBAAY,KAAK;AAAA,YAAE,OAAO;AAAA,YAAO,MAAK;AAAA,YAAmB,SAAQ;AAC7D,qBAAO,OAAO,MAAI;AAChB,uBAAO,UAAU,QAAQ;AACzB,sCAAsB,IAAI;AAAA,cAAA,CAC3B;AAAA,YACH;AAAA,UAAA,CACD;AAAA,QACH;AAEG,YAAAA,QAAA,iBAAiB,MAAM,KAAK,aAAY;AACzC,sBAAY,KAAK;AAAA,YAAE,OAAO,cAAc,OAAO;AAAA,YAAM,MAAK;AAAA,YAAkB,SAAQ;AAChF,qBAAO,OAAO,MAAI;AAEhB,oBAAG,aAAY;AACb,uBAAK,SAAS,EAAC,OAAM,QAAQ,CAAA;AAAA,gBAAA,OAE3B;AACF,yBAAO,UAAU,OAAO;AAAA,gBAC1B;AACA,sCAAsB,IAAI;AAAA,cAAA,CAC3B;AAAA,YACH;AAAA,UAAA,CACD;AAAA,QACH;AAGA,oBAAY,KAAK;AAAA,UACf,OAAM;AAAA,UAAK,MAAK;AAAA,UAAO,QAAO,YAAU;AAGtC,kBAAM,OAAW,MAAMR,QAAAA,oBAAoB,KAAK,OAAO;AACvD,kBAAM,SAAS,MAAM,aAAa,CAAC,KAAK,GAAG,CAAC;AACvC,iBAAA,MAAM,OAAO,CAAC;AACnB,mBAAO,OAAO,MAAI;AAChB,mBAAK,SAAS,IAAI;AAClB,oCAAsB,IAAI;AAAA,YAAA,CAC3B;AAAA,UACH;AAAA,QAAA,CACD;AAEM,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAIDS,eAAAA,WAAW,MAAI;AAEN,aAAAC,MAAA;AAAA;AAAA,QAEL,OAAO,gBAA+BT,+BAAqB,CAAC,YAAY;AACtE,gBAAM,IAAIU,QAAAA;AACR,YAAA,OAAOC,2BAAiB,OAAO,CAAC;AAClCC,gBAAA,yBAAyB,CAAC;AACnB,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA,QAGzB,OAAO,gBAAgBC,0BAAgB,CAAC,UAAU;AAEhD,WAAC,YAAY;AAEL,kBAAA,cAAc,MAAMC,sBAAgB,OAAO,CAAC,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3F,kBAAM,SAAS,MAAM,aAAa,YAAY,OAAO,OAAGC,iBAAW,EAAE,MAAM,sBAAsB,CAAC,EAAE,IAAI,CAAG,MAAA,EAAE,MAAM,CAAC;AAEpH,mBAAO,QAAQ,CAAM,SAAA;AACjB,qBAAO,gBAAgBhB,+BAAsB;AAAA,gBAC3C,KAAI;AAAA,gBAAM,KAAI;AAAA,gBAAK,UAAS;AAAA,cAAA,CACZ;AAAA,YAAA,CACrB;AAAA,UAAA;AAII,iBAAA;AAAA,WACPiB,4BAAoB;AAAA,MAAA;AAAA,IACxB,CACD;AAGDC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,UAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAAA,IAAA,CAED;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/{ImageEditPanel.js → utils.js}

@@ -8,11 +8,34 @@ const MsMaterialTable = require("../../../../../modules/ms/dataviews/ms-material
 const index = require("../../../../../modules/ms/components/material-list/index.js");
 const utils = require("@maketribe/utils");
 require("../../../image-cropper/index.js");
+const request = require("@maketribe/request");
 const imageCropperApi = require("../../../image-cropper/image-cropper-api.js");
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 const selectState = vue.ref("select");
+const imageUpload = (src) => {
+  const webFileUpload = new request.WebFileUpload();
+  return new Promise((resolve, reject) => {
+    if (src && src.indexOf("data:image/") == 0) {
+      const blob = utils.base64ToBlob(src);
+      webFileUpload.upload(new File([blob], `${utils.md5(Math.random().toString())}.${blob.type.toString().replace("image/", "") || "png"}`, {
+        type: blob.type
+      })).then((result) => {
+        if (result.data.code !== 200) {
+          dm.Messager.error({
+            message: result.data.msg
+          });
+          reject(new Error(result.data.msg));
+        } else {
+          resolve(result.data.data.path);
+        }
+      });
+    } else {
+      resolve(src);
+    }
+  });
+};
 const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
   name: "ImageEditPanelComponent",
   props: ["attrs"],
@@ -21,42 +44,69 @@ const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
   }) {
     const attrs = vue.reactive(props.attrs);
     const materialTable = vue.reactive(new MsMaterialTable.MsMaterialTable());
-    const margin = vue.computed({
-      set(v) {
-        attrs.margin = `${v.t} ${v.r} ${v.b} ${v.l}`;
-      },
-      get() {
-        var vals = attrs.margin.split(/[\s]+/g);
-        if (vals.length == 1) {
-          return {
-            t: vals[0],
-            r: vals[0],
-            b: vals[0],
-            l: vals[0]
-          };
-        } else if (vals.length == 2) {
-          return {
-            t: vals[0],
-            r: vals[1],
-            b: vals[0],
-            l: vals[1]
-          };
-        } else if (vals.length == 3) {
-          return {
-            t: vals[0],
-            r: vals[1],
-            b: vals[2],
-            l: vals[1]
-          };
-        } else if (vals.length <= 0) {
-          vals = ["", "", "", ""];
-        }
+    const margin = vue.computed(() => {
+      var vals = attrs.margin.split(/[\s]+/g);
+      if (vals.length == 1) {
+        return {
+          t: vals[0],
+          r: vals[0],
+          b: vals[0],
+          l: vals[0]
+        };
+      } else if (vals.length == 2) {
+        return {
+          t: vals[0],
+          r: vals[1],
+          b: vals[0],
+          l: vals[1]
+        };
+      } else if (vals.length == 3) {
         return {
           t: vals[0],
           r: vals[1],
           b: vals[2],
-          l: vals[3]
+          l: vals[1]
         };
+      } else if (vals.length <= 0) {
+        vals = ["", "", "", ""];
+      }
+      return {
+        t: vals[0],
+        r: vals[1],
+        b: vals[2],
+        l: vals[3]
+      };
+    });
+    const marginT = vue.computed({
+      set(v) {
+        attrs.margin = `${v} ${margin.value.r} ${margin.value.b} ${margin.value.l}`;
+      },
+      get() {
+        return margin.value.t;
+      }
+    });
+    const marginR = vue.computed({
+      set(v) {
+        attrs.margin = `${margin.value.t} ${v} ${margin.value.b} ${margin.value.l}`;
+      },
+      get() {
+        return margin.value.r;
+      }
+    });
+    const marginB = vue.computed({
+      set(v) {
+        attrs.margin = `${margin.value.t} ${margin.value.r} ${v} ${margin.value.l}`;
+      },
+      get() {
+        return margin.value.b;
+      }
+    });
+    const marginL = vue.computed({
+      set(v) {
+        attrs.margin = `${margin.value.t} ${margin.value.r}  ${margin.value.b} ${v}`;
+      },
+      get() {
+        return margin.value.l;
       }
     });
     materialTable.selectionChangeEvent.on(() => {
@@ -124,6 +174,7 @@ const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
           default: () => [vue.createVNode(index.MKMaterialList, {
             "class": "mk-material-select__list",
             "selectable": true,
+            "allowMaterialTypeValues": [1],
             "materialTable": materialTable
           }, null)]
         }), vue.createVNode(elementPlus.ElTabPane, {
@@ -208,20 +259,20 @@ const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
                 default: () => [vue.createVNode("div", {
                   "style": "display: flex;flex-wrap: nowrap;gap: 10px;justify-content: space-around;"
                 }, [vue.createVNode("div", null, [vue.createTextVNode("上:"), vue.createVNode(elementPlus.ElInput, {
-                  "modelValue": margin.value.t,
-                  "onUpdate:modelValue": ($event) => margin.value.t = $event,
+                  "modelValue": marginT.value,
+                  "onUpdate:modelValue": ($event) => marginT.value = $event,
                   "placeholder": ""
                 }, null)]), vue.createVNode("div", null, [vue.createTextVNode("右:"), vue.createVNode(elementPlus.ElInput, {
-                  "modelValue": margin.value.r,
-                  "onUpdate:modelValue": ($event) => margin.value.r = $event,
+                  "modelValue": marginR.value,
+                  "onUpdate:modelValue": ($event) => marginR.value = $event,
                   "placeholder": ""
                 }, null)]), vue.createVNode("div", null, [vue.createTextVNode("下:"), vue.createVNode(elementPlus.ElInput, {
-                  "modelValue": margin.value.b,
-                  "onUpdate:modelValue": ($event) => margin.value.b = $event,
+                  "modelValue": marginB.value,
+                  "onUpdate:modelValue": ($event) => marginB.value = $event,
                   "placeholder": ""
                 }, null)]), vue.createVNode("div", null, [vue.createTextVNode("左:"), vue.createVNode(elementPlus.ElInput, {
-                  "modelValue": margin.value.l,
-                  "onUpdate:modelValue": ($event) => margin.value.l = $event,
+                  "modelValue": marginL.value,
+                  "onUpdate:modelValue": ($event) => marginL.value = $event,
                   "placeholder": ""
                 }, null)])])]
               })]
@@ -233,7 +284,7 @@ const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ShowImageEditPanel = async (attrs) => {
+const showImageEditDialog = async (attrs) => {
   return new Promise((resolve, reject) => {
     selectState.value = attrs.src ? "attrs" : "select";
     const imageEditPanelRef = vue.ref(null);
@@ -308,5 +359,6 @@ const ShowImageEditPanel = async (attrs) => {
     });
   });
 };
-exports.ShowImageEditPanel = ShowImageEditPanel;
-//# sourceMappingURL=ImageEditPanel.js.map
+exports.imageUpload = imageUpload;
+exports.showImageEditDialog = showImageEditDialog;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,h,unref, onUnmounted,ref,reactive,defineComponent, computed } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport { \r\n  ElButton,ElTabs,ElTabPane,ElInput,ElImage,ElIcon,\r\n  ElForm,ElFormItem,ElRow,ElCol\r\n} from \"element-plus\";\r\nimport { Crop,Share,UploadFilled,Picture } from \"@element-plus/icons-vue\";\r\nimport { MsMaterialTable } from \"../../../../../modules/ms/dataviews/ms-material\";\r\nimport { MKMaterialList } from \"../../../../../modules/ms/components/material-list\";\r\nimport { fileSelect } from \"@maketribe/utils\"\r\nimport { ImageCropper } from \"../../../image-cropper\"\r\nimport {  WebFileUpload } from \"@maketribe/request\";\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { Messager } from \"@maketribe/dm\";\r\n\r\n// 选择状态\r\nconst selectState = ref(\"select\");\r\n\r\n/**\r\n * 图片加载\r\n * @param src \r\n * @returns \r\n */\r\nexport const imageLoad = (src:string)=>{\r\n  // 加载文案\r\n  return new Promise((resolve,reject)=>{\r\n    // 加载一下\r\n    const image = new Image();\r\n    const loadComplete = ()=>{\r\n      resolve(image.src);\r\n    }\r\n    image.onload = ()=>loadComplete()\r\n    image.onerror = reject\r\n    image.src = src;\r\n    if(image.complete){\r\n      loadComplete();\r\n    }\r\n  })\r\n}\r\n\r\n/**\r\n * 图片上传\r\n * @param src \r\n */\r\nexport const imageUpload = (src:string)=>{\r\n\r\n  // 上传\r\n  const webFileUpload = new WebFileUpload();\r\n  return new Promise((resolve,reject)=>{\r\n\r\n    if(src && src.indexOf(\"data:image/\") == 0){\r\n\r\n      // 开始上传\r\n      const blob = base64ToBlob(src); \r\n  \r\n      // 上传\r\n      webFileUpload.upload(\r\n        new File([blob], `${md5(Math.random().toString())}.${blob.type.toString().replace(\"image/\",\"\") || \"png\"}`, { type: blob.type })\r\n      ).then(result=>{\r\n  \r\n        if (result.data.code !== 200) {\r\n          Messager.error({ message: result.data.msg });\r\n          reject(new Error(result.data.msg ));\r\n        }\r\n        else{\r\n          resolve(result.data.data.path);\r\n        }\r\n        \r\n      });\r\n    }\r\n    else{\r\n      resolve(src);\r\n    }\r\n  })\r\n\r\n  \r\n}\r\n\r\n\r\n/**\r\n * 图片编辑面板\r\n */\r\nconst ImageEditPanelComponent = defineComponent({\r\n  name: 'ImageEditPanelComponent',\r\n  props: ['attrs'],\r\n  setup(props,{ expose }){\r\n\r\n    const attrs = reactive(props.attrs)\r\n    const materialTable = reactive(new MsMaterialTable()) as MsMaterialTable;\r\n    const margin = computed<any>(()=>{\r\n      var vals = attrs.margin.split(/[\\s]+/g);\r\n    \r\n        if(vals.length == 1){\r\n          return {t:vals[0],r:vals[0],b:vals[0],l:vals[0]}\r\n        }\r\n        else if(vals.length == 2){\r\n          return {t:vals[0],r:vals[1],b:vals[0],l:vals[1]}\r\n        }\r\n        else if(vals.length == 3){\r\n          return {t:vals[0],r:vals[1],b:vals[2],l:vals[1]}\r\n        }\r\n        else if(vals.length <= 0){\r\n          vals = [\"\",\"\",\"\",\"\"];\r\n        }\r\n        return {t:vals[0],r:vals[1],b:vals[2],l:vals[3]}\r\n    })\r\n    const marginT = computed<any>({\r\n      set(v){\r\n        attrs.margin = `${v} ${margin.value.r} ${margin.value.b} ${margin.value.l}`\r\n      },\r\n      get(){\r\n        return margin.value.t\r\n      }\r\n    })\r\n    const marginR = computed<any>({\r\n      set(v){\r\n        attrs.margin = `${margin.value.t} ${v} ${margin.value.b} ${margin.value.l}`\r\n      },\r\n      get(){\r\n        return margin.value.r\r\n      }\r\n    })\r\n    const marginB = computed<any>({\r\n      set(v){\r\n        attrs.margin = `${margin.value.t} ${margin.value.r} ${v} ${margin.value.l}`\r\n      },\r\n      get(){\r\n        return margin.value.b\r\n      }\r\n    })\r\n    const marginL = computed<any>({\r\n      set(v){\r\n        attrs.margin = `${margin.value.t} ${margin.value.r}  ${margin.value.b} ${v}`\r\n      },\r\n      get(){\r\n        return margin.value.l\r\n      }\r\n    })\r\n\r\n    // 选择素材\r\n    materialTable.selectionChangeEvent.on(()=>{\r\n      let id = materialTable.getSelection()[0];\r\n      if(id){\r\n        attrs.src = materialTable.getList().find(item=>item.id == id)?.path;\r\n      }\r\n      else{\r\n        attrs.src = \"\";\r\n      }\r\n    })\r\n\r\n    //\r\n    const selectImage = async ()=>{\r\n\r\n      const file = await fileSelect({ accept:\"image/*\"});\r\n        \r\n      if (file) {\r\n\r\n        const fileRender = new FileReader();\r\n        fileRender.onload = async (data:any)=>{\r\n          attrs.src = data.target.result;\r\n         \r\n        }\r\n        fileRender.readAsDataURL(file)\r\n      }\r\n    }\r\n\r\n    // 导出可用的方法\r\n    expose({ \r\n      getResult:()=>{ return {...attrs} } ,\r\n      setSrc:(src:string)=>{  attrs.src = src }\r\n    });\r\n\r\n    return ()=>{\r\n\r\n      // 图片预览\r\n      const ImageView = <ElImage style=\"background: #dedede;width: 100%; height: 480px;margin-top:10px\" src={attrs.src} fit=\"contain\" v-slots={{\r\n        error:()=>{\r\n          return <div style=\"\r\n              font-size: 50px;\r\n              display: flex;\r\n              align-content: center;\r\n              justify-content: center;\r\n              align-items: center;\r\n              height: 100%;\r\n          \">\r\n            <ElIcon><Picture /></ElIcon>\r\n          </div>\r\n        }\r\n      }}>\r\n      </ElImage>\r\n     \r\n      // 面板内容\r\n      let panel = <ElTabs style=\"min-height: 520px\">\r\n        <ElTabPane label=\"本地选择\">\r\n          <ElButton icon={UploadFilled} type=\"primary\" style=\"width: 100%\" onClick={selectImage}>\r\n            选择本地文件\r\n          </ElButton>\r\n          {ImageView}\r\n        </ElTabPane>\r\n        <ElTabPane label=\"素材库选择\">\r\n          <MKMaterialList class=\"mk-material-select__list\" selectable  allowMaterialTypeValues={[1]}  materialTable={materialTable} />\r\n        </ElTabPane>\r\n        <ElTabPane label=\"网络图片\">\r\n          <ElInput v-model={attrs.src} prefix-icon={Share} style=\"width: 100%\" placeholder=\"请输入链接地址\">\r\n          </ElInput>\r\n          {ImageView}\r\n        </ElTabPane>\r\n      </ElTabs>\r\n\r\n      if(selectState.value == \"attrs\"){\r\n        panel = <ElRow gutter={20}>\r\n          <ElCol span={14}>\r\n            {ImageView}\r\n          </ElCol>\r\n          <ElCol span={10}>\r\n            <ElForm label-position=\"top\" model={attrs}>\r\n              <ElFormItem label=\"图片描述\">\r\n                <ElInput v-model={attrs.alt} type=\"textarea\" {...{ rows:3 }} style=\"width: 100%\" placeholder=\"请输入\">\r\n                </ElInput>\r\n              </ElFormItem>\r\n              <ElFormItem label=\"图片显示宽度\">\r\n                <ElInput v-model={attrs.width} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n                </ElInput>\r\n              </ElFormItem>\r\n              <ElFormItem label=\"图片显示高度\">\r\n                <ElInput v-model={attrs.height} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n                </ElInput>\r\n              </ElFormItem>\r\n              <ElFormItem label=\"图片最大显示宽度\">\r\n                <ElInput v-model={attrs.maxWidth} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n                </ElInput>\r\n              </ElFormItem>\r\n              <ElFormItem label=\"图片最大显示高度\">\r\n                <ElInput v-model={attrs.maxHeight} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n                </ElInput>\r\n              </ElFormItem>\r\n              <ElFormItem label=\"图片显示外边距\">\r\n                <div style=\"display: flex;flex-wrap: nowrap;gap: 10px;justify-content: space-around;\">\r\n                  <div>\r\n                    上:\r\n                    <ElInput v-model={marginT.value} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  <div>\r\n                    右:\r\n                    <ElInput v-model={marginR.value} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    下:\r\n                    <ElInput v-model={marginB.value} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    左:\r\n                    <ElInput v-model={marginL.value} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                </div>\r\n              </ElFormItem>\r\n            </ElForm>\r\n          </ElCol>\r\n        </ElRow>\r\n      }\r\n\r\n      return panel;\r\n    }\r\n  }\r\n})\r\n\r\n/**\r\n * \r\n * @param attrs 显示图片编辑面板\r\n * @returns \r\n */\r\nexport const showImageEditDialog = async  (attrs:any) => {\r\n  return new Promise((resolve,reject) => {\r\n\r\n    // 初始化\r\n    selectState.value = attrs.src ? \"attrs\":\"select\";\r\n\r\n    const imageEditPanelRef = ref<any>(null);\r\n    const editResult = computed<any>(()=>imageEditPanelRef.value?.getResult())\r\n\r\n    // 去裁切\r\n    const toCropImageHandle = async ()=>{\r\n      \r\n      if(editResult.value.src){\r\n        var result = await ImageCropper({ src: editResult.value.src});\r\n        if(result.data){\r\n          imageEditPanelRef.value?.setSrc(result.data);\r\n        }\r\n      }\r\n     \r\n    }\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve({...editResult.value});\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"素材选择\",\r\n      class: \"mk-material-select\",\r\n      width: \"70%\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return h(ImageEditPanelComponent,{attrs,ref:r=>imageEditPanelRef.value = r});\r\n      },\r\n      footer: () => {\r\n\r\n        // 下一步按钮\r\n        let nextBtns = [\r\n          <ElButton type=\"primary\" onClick={()=>selectState.value = 'attrs'}>\r\n            下一步\r\n          </ElButton>\r\n        ]\r\n\r\n        if(selectState.value == \"attrs\"){\r\n          nextBtns = [\r\n            <ElButton type=\"primary\" onClick={()=>selectState.value='select'}>\r\n              重新选图\r\n            </ElButton>,\r\n            <ElButton type=\"primary\" onClick={toCropImageHandle}>\r\n              裁切图\r\n            </ElButton>,\r\n            <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n              确定\r\n            </ElButton>\r\n          ];\r\n        }\r\n\r\n        return (\r\n          <Fragment>\r\n            <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n            {...nextBtns}\r\n          </Fragment>\r\n        );\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","selectState","ref","imageUpload","src","webFileUpload","WebFileUpload","Promise","resolve","reject","indexOf","blob","base64ToBlob","upload","File","md5","Math","random","type","replace","then","result","data","code","Messager","error","message","msg","Error","path","ImageEditPanelComponent","defineComponent","name","props","setup","expose","attrs","reactive","materialTable","MsMaterialTable","margin","computed","vals","split","length","t","r","b","l","marginT","set","v","value","get","marginR","marginB","marginL","selectionChangeEvent","on","id","getSelection","getList","find","item","selectImage","file","fileSelect","accept","fileRender","FileReader","onload","target","readAsDataURL","getResult","setSrc","ImageView","_createVNode","ElImage","ElIcon","default","Picture","panel","ElTabs","ElTabPane","ElButton","UploadFilled","_createTextVNode","MKMaterialList","ElInput","$event","Share","ElRow","ElCol","ElForm","ElFormItem","_mergeProps","alt","rows","width","height","maxWidth","maxHeight","showImageEditDialog","imageEditPanelRef","editResult","toCropImageHandle","ImageCropper","handleCancelClick","dialogInstance","destroy","handleConfirmClick","Dialoger","customRender","title","class","onClose","body","h","footer","nextBtns","onClick","_Fragment"],"mappings":";;;;;;;;;;;;AAgBA,SAAAA,QAAAC,GAAA;AAAA,SAAA,OAAAA,MAAA,cAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,CAAA,MAAAK,qBAAAA,CAAAA,IAAA,QAAAL,CAAA;AAAA;AACA,MAAMM,cAAcC,IAAAA,IAAI,QAAQ;AA4BnBC,MAAAA,cAAeC,SAAa;AAGvC,QAAMC,gBAAgB,IAAIC,QAAAA;AAC1B,SAAO,IAAIC,QAAQ,CAACC,SAAQC,WAAS;AAEnC,QAAGL,OAAOA,IAAIM,QAAQ,aAAa,KAAK,GAAE;AAGxC,YAAMC,OAAOC,mBAAaR,GAAG;AAG7BC,oBAAcQ,OACZ,IAAIC,KAAK,CAACH,IAAI,GAAG,GAAGI,MAAG,IAACC,KAAKC,SAASnB,UAAU,CAAC,IAAIa,KAAKO,KAAKpB,SAAU,EAACqB,QAAQ,UAAS,EAAE,KAAK,KAAK,IAAI;AAAA,QAAED,MAAMP,KAAKO;AAAAA,MAAK,CAAC,CAChI,EAAEE,KAAKC,YAAQ;AAEb,YAAIA,OAAOC,KAAKC,SAAS,KAAK;AAC5BC,aAAAA,SAASC,MAAM;AAAA,YAAEC,SAASL,OAAOC,KAAKK;AAAAA,UAAI,CAAC;AAC3ClB,iBAAO,IAAImB,MAAMP,OAAOC,KAAKK,GAAI,CAAC;AAAA,QACpC,OACI;AACFnB,kBAAQa,OAAOC,KAAKA,KAAKO,IAAI;AAAA,QAC/B;AAAA,MAEF,CAAC;AAAA,IACH,OACI;AACFrB,cAAQJ,GAAG;AAAA,IACb;AAAA,EACF,CAAC;AAGH;AAMA,MAAM0B,0BAA0BC,oBAAAA,gBAAgB;AAAA,EAC9CC,MAAM;AAAA,EACNC,OAAO,CAAC,OAAO;AAAA,EACfC,MAAMD,OAAM;AAAA,IAAEE;AAAAA,EAAO,GAAE;AAErB,UAAMC,QAAQC,IAAAA,SAASJ,MAAMG,KAAK;AAClC,UAAME,gBAAgBD,IAAAA,SAAS,IAAIE,gBAAAA,gBAAiB,CAAA;AACpD,UAAMC,SAASC,IAAAA,SAAc,MAAI;AAC/B,UAAIC,OAAON,MAAMI,OAAOG,MAAM,QAAQ;AAEpC,UAAGD,KAAKE,UAAU,GAAE;AAClB,eAAO;AAAA,UAACC,GAAEH,KAAK,CAAC;AAAA,UAAEI,GAAEJ,KAAK,CAAC;AAAA,UAAEK,GAAEL,KAAK,CAAC;AAAA,UAAEM,GAAEN,KAAK,CAAC;AAAA;MAChD,WACQA,KAAKE,UAAU,GAAE;AACvB,eAAO;AAAA,UAACC,GAAEH,KAAK,CAAC;AAAA,UAAEI,GAAEJ,KAAK,CAAC;AAAA,UAAEK,GAAEL,KAAK,CAAC;AAAA,UAAEM,GAAEN,KAAK,CAAC;AAAA;MAChD,WACQA,KAAKE,UAAU,GAAE;AACvB,eAAO;AAAA,UAACC,GAAEH,KAAK,CAAC;AAAA,UAAEI,GAAEJ,KAAK,CAAC;AAAA,UAAEK,GAAEL,KAAK,CAAC;AAAA,UAAEM,GAAEN,KAAK,CAAC;AAAA;MAChD,WACQA,KAAKE,UAAU,GAAE;AACvBF,eAAO,CAAC,IAAG,IAAG,IAAG,EAAE;AAAA,MACrB;AACA,aAAO;AAAA,QAACG,GAAEH,KAAK,CAAC;AAAA,QAAEI,GAAEJ,KAAK,CAAC;AAAA,QAAEK,GAAEL,KAAK,CAAC;AAAA,QAAEM,GAAEN,KAAK,CAAC;AAAA;IAClD,CAAC;AACD,UAAMO,UAAUR,IAAAA,SAAc;AAAA,MAC5BS,IAAIC,GAAE;AACJf,cAAMI,SAAS,GAAGW,CAAC,IAAIX,OAAOY,MAAMN,CAAC,IAAIN,OAAOY,MAAML,CAAC,IAAIP,OAAOY,MAAMJ,CAAC;AAAA,MAC1E;AAAA,MACDK,MAAK;AACH,eAAOb,OAAOY,MAAMP;AAAAA,MACtB;AAAA,IACF,CAAC;AACD,UAAMS,UAAUb,IAAAA,SAAc;AAAA,MAC5BS,IAAIC,GAAE;AACJf,cAAMI,SAAS,GAAGA,OAAOY,MAAMP,CAAC,IAAIM,CAAC,IAAIX,OAAOY,MAAML,CAAC,IAAIP,OAAOY,MAAMJ,CAAC;AAAA,MAC1E;AAAA,MACDK,MAAK;AACH,eAAOb,OAAOY,MAAMN;AAAAA,MACtB;AAAA,IACF,CAAC;AACD,UAAMS,UAAUd,IAAAA,SAAc;AAAA,MAC5BS,IAAIC,GAAE;AACJf,cAAMI,SAAS,GAAGA,OAAOY,MAAMP,CAAC,IAAIL,OAAOY,MAAMN,CAAC,IAAIK,CAAC,IAAIX,OAAOY,MAAMJ,CAAC;AAAA,MAC1E;AAAA,MACDK,MAAK;AACH,eAAOb,OAAOY,MAAML;AAAAA,MACtB;AAAA,IACF,CAAC;AACD,UAAMS,UAAUf,IAAAA,SAAc;AAAA,MAC5BS,IAAIC,GAAE;AACJf,cAAMI,SAAS,GAAGA,OAAOY,MAAMP,CAAC,IAAIL,OAAOY,MAAMN,CAAC,KAAKN,OAAOY,MAAML,CAAC,IAAII,CAAC;AAAA,MAC3E;AAAA,MACDE,MAAK;AACH,eAAOb,OAAOY,MAAMJ;AAAAA,MACtB;AAAA,IACF,CAAC;AAGDV,kBAAcmB,qBAAqBC,GAAG,MAAI;;AACxC,UAAIC,KAAKrB,cAAcsB,aAAc,EAAC,CAAC;AACvC,UAAGD,IAAG;AACJvB,cAAMhC,OAAMkC,mBAAcuB,UAAUC,KAAKC,UAAMA,KAAKJ,MAAMA,EAAE,MAAhDrB,mBAAmDT;AAAAA,MACjE,OACI;AACFO,cAAMhC,MAAM;AAAA,MACd;AAAA,IACF,CAAC;AAGD,UAAM4D,cAAc,YAAU;AAE5B,YAAMC,OAAO,MAAMC,iBAAW;AAAA,QAAEC,QAAO;AAAA,MAAS,CAAC;AAEjD,UAAIF,MAAM;AAER,cAAMG,aAAa,IAAIC;AACvBD,mBAAWE,SAAS,OAAOhD,SAAW;AACpCc,gBAAMhC,MAAMkB,KAAKiD,OAAOlD;AAAAA;AAG1B+C,mBAAWI,cAAcP,IAAI;AAAA,MAC/B;AAAA;AAIF9B,WAAO;AAAA,MACLsC,WAAUA,MAAI;AAAE,eAAO;AAAA,UAAC,GAAGrC;AAAAA;MAAQ;AAAA,MACnCsC,QAAQtE,SAAa;AAAGgC,cAAMhC,MAAMA;AAAAA,MAAI;AAAA,IAC1C,CAAC;AAED,WAAO,MAAI;AAGT,YAAMuE,YAASC,IAAA,YAAAC,qBAAA;AAAA,QAAA,SAAA;AAAA,QAAA,OAAwFzC,MAAMhC;AAAAA,QAAG,OAAA;AAAA,SAAyB;AAAA,QACvIqB,OAAMA,MAAI;AACR,iBAAAmD,IAAAA,YAAA,OAAA;AAAA,YAAA,SAAA;AAAA,aAAAA,CAAAA,IAAAA,YAAAE,YAAA,QAAA,MAAA;AAAA,YAAAC,SAAAA,MAAAH,CAAAA,IAAA,YAAAI,QAAA,SAAA,MAAA,IAAA,CAAA;AAAA,UAAA,CAAA,CAAA,CAAA;AAAA,QAUF;AAAA,MACF,CAAC;AAID,UAAIC,QAAKL,IAAA,YAAAM,oBAAA;AAAA,QAAA,SAAA;AAAA,MAAA,GAAA;AAAA,QAAAH,SAAAA,MAAAH,CAAAA,IAAA,YAAAO,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAH,CAAAA,IAAA,YAAAQ,sBAAA;AAAA,YAAA,QAEWC,QAAY;AAAA,YAAA,QAAA;AAAA,YAAA,SAAA;AAAA,YAAA,WAA8CrB;AAAAA,UAAW,GAAA;AAAA,YAAAe,SAAAA,MAAA,CAAAO,oBAAA,QAAA,CAAA;AAAA,UAAA,CAAA,GAGpFX,SAAS;AAAA,SAAAC,GAAAA,IAAA,YAAAO,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAH,CAAAA,IAAA,YAAAW,sBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,cAAA;AAAA,YAAA,2BAG4E,CAAC,CAAC;AAAA,YAAC,iBAAkBjD;AAAAA,UAAa,GAAA,IAAA,CAAA;AAAA,SAAAsC,GAAAA,IAAA,YAAAO,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAH,CAAAA,IAAA,YAAAY,qBAAA;AAAA,YAAA,cAGtGpD,MAAMhC;AAAAA,YAAG,uBAAAqF,YAATrD,MAAMhC,MAAGqF;AAAAA,YAAA,eAAeC,QAAK;AAAA,YAAA,SAAA;AAAA,YAAA,eAAA;AAAA,UAAA,GAAA,IAAA,GAE9Cf,SAAS;AAAA,QAAA,CAAA,CAAA;AAAA,OAEL;AAET,UAAG1E,YAAYmD,SAAS,SAAQ;AAC9B6B,gBAAKL,IAAA,YAAAe,mBAAA;AAAA,UAAA,UAAkB;AAAA,QAAE,GAAA;AAAA,UAAAZ,SAAAA,MAAAH,CAAAA,IAAA,YAAAgB,mBAAA;AAAA,YAAA,QACV;AAAA,UAAE,GAAAlG,QACZiF,SAAS,IAATA,YAAS;AAAA,YAAAI,SAAAA,MAAA,CAATJ,SAAS;AAAA,WAAAC,GAAAA,IAAA,YAAAgB,mBAAA;AAAA,YAAA,QAEC;AAAA,UAAE,GAAA;AAAA,YAAAb,SAAAA,MAAAH,CAAAA,IAAA,YAAAiB,oBAAA;AAAA,cAAA,kBAAA;AAAA,cAAA,SACuBzD;AAAAA,YAAK,GAAA;AAAA,cAAA2C,SAAAA,MAAAH,CAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAA,CAAAH,gBAAAY,YAAAA,SAAAO,IAAAA,WAAA;AAAA,kBAAA,cAEnB3D,MAAM4D;AAAAA,kBAAG,uBAAAP,YAATrD,MAAM4D,MAAGP;AAAAA,kBAAA,QAAA;AAAA,gBAAA,GAAA;AAAA,kBAAwBQ,MAAK;AAAA,gBAAC,GAAA;AAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,eAAArB,GAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAAH,CAAAA,IAAA,YAAAY,qBAAA;AAAA,kBAAA,cAIvCpD,MAAM8D;AAAAA,kBAAK,uBAAAT,YAAXrD,MAAM8D,QAAKT;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAb,GAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAAH,CAAAA,IAAA,YAAAY,qBAAA;AAAA,kBAAA,cAIXpD,MAAM+D;AAAAA,kBAAM,uBAAAV,YAAZrD,MAAM+D,SAAMV;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAb,GAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAAH,CAAAA,IAAA,YAAAY,qBAAA;AAAA,kBAAA,cAIZpD,MAAMgE;AAAAA,kBAAQ,uBAAAX,YAAdrD,MAAMgE,WAAQX;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAb,GAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAAH,CAAAA,IAAA,YAAAY,qBAAA;AAAA,kBAAA,cAIdpD,MAAMiE;AAAAA,kBAAS,uBAAAZ,YAAfrD,MAAMiE,YAASZ;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAb,GAAAA,IAAA,YAAAkB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAf,SAAAA,MAAA,CAAAH,IAAA,YAAA,OAAA;AAAA,kBAAA,SAAA;AAAA,gBAAA,GAAA,CAAAA,IAAAA,YAAAU,OAAAA,MAAAA,CAAAA,IAAAA,gBAAAV,IAAAA,GAAAA,IAAA,YAAAY,qBAAA;AAAA,kBAAA,cAOXvC,QAAQG;AAAAA,kBAAK,uBAAAqC,YAAbxC,QAAQG,QAAKqC;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAb,IAAAA,YAAAU,OAAAA,MAAAA,CAAAA,oBAAAV,IAAAA,GAAAA,IAAAA,YAAAY,YAAAA,SAAA;AAAA,kBAAA,cAKblC,QAAQF;AAAAA,kBAAK,uBAAAqC,YAAbnC,QAAQF,QAAKqC;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAb,IAAAA,YAAAU,OAAAA,MAAAA,CAAAA,oBAAAV,IAAAA,GAAAA,IAAAA,YAAAY,YAAAA,SAAA;AAAA,kBAAA,cAMbjC,QAAQH;AAAAA,kBAAK,uBAAAqC,YAAblC,QAAQH,QAAKqC;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAb,IAAAA,YAAAU,OAAAA,MAAAA,CAAAA,oBAAAV,IAAAA,GAAAA,IAAAA,YAAAY,YAAAA,SAAA;AAAA,kBAAA,cAMbhC,QAAQJ;AAAAA,kBAAK,uBAAAqC,YAAbjC,QAAQJ,QAAKqC;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,cAAA,CAAA,CAAA;AAAA,YAAA,CAAA,CAAA;AAAA,UAAA,CAAA,CAAA;AAAA,SAOnC;AAAA,MACV;AAEA,aAAOR;AAAAA;EAEX;AACF,CAAC;AAOYqB,MAAAA,sBAAsB,OAAQlE,UAAc;AACvD,SAAO,IAAI7B,QAAQ,CAACC,SAAQC,WAAW;AAGrCR,gBAAYmD,QAAQhB,MAAMhC,MAAM,UAAQ;AAExC,UAAMmG,oBAAoBrG,QAAS,IAAI;AACvC,UAAMsG,aAAa/D,IAAAA,SAAc,MAAA;;AAAI8D,qCAAkBnD,UAAlBmD,mBAAyB9B;AAAAA,KAAW;AAGzE,UAAMgC,oBAAoB,YAAU;;AAElC,UAAGD,WAAWpD,MAAMhD,KAAI;AACtB,YAAIiB,SAAS,MAAMqF,6BAAa;AAAA,UAAEtG,KAAKoG,WAAWpD,MAAMhD;AAAAA,QAAG,CAAC;AAC5D,YAAGiB,OAAOC,MAAK;AACbiF,kCAAkBnD,UAAlBmD,mBAAyB7B,OAAOrD,OAAOC;AAAAA,QACzC;AAAA,MACF;AAAA;AAKF,UAAMqF,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAAA;AAIxB,UAAMC,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBrG,cAAQ;AAAA,QAAC,GAAGgG,WAAWpD;AAAAA,MAAK,CAAC;AAAA;AAG/B,UAAMwD,iBAAiBG,GAAQ,SAACC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPhB,OAAO;AAAA,MACPiB,SAASA,MAAM;AACbP,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDO,MAAMA,MAAM;AACV,eAAOC,IAAAA,EAAEvF,yBAAwB;AAAA,UAACM;AAAAA,UAAMlC,KAAI4C,OAAGyD,kBAAkBnD,QAAQN;AAAAA,QAAC,CAAC;AAAA,MAC5E;AAAA,MACDwE,QAAQA,MAAM;AAGZ,YAAIC,WAAW,CAAA3C,IAAA,YAAAQ,sBAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACqBoC,MAAIvH,YAAYmD,QAAQ;AAAA,QAAO,GAAA;AAAA,UAAA2B,SAAAA,MAAA,CAAAO,oBAAA,KAAA,CAAA;AAAA,QAGlE,CAAA,CAAA;AAED,YAAGrF,YAAYmD,SAAS,SAAQ;AAC9BmE,qBAAW,CAAA3C,IAAA,YAAAQ,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WACyBoC,MAAIvH,YAAYmD,QAAM;AAAA,UAAQ,GAAA;AAAA,YAAA2B,SAAAA,MAAA,CAAAO,oBAAA,MAAA,CAAA;AAAA,WAAAV,GAAAA,IAAA,YAAAQ,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WAG9BqB;AAAAA,UAAiB,GAAA;AAAA,YAAA1B,SAAAA,MAAA,CAAAO,oBAAA,KAAA,CAAA;AAAA,WAAAV,GAAAA,IAAA,YAAAQ,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WAGjB0B;AAAAA,UAAkB,GAAA;AAAA,YAAA/B,SAAAA,MAAA,CAAAO,oBAAA,IAAA,CAAA;AAAA,UAGrD,CAAA,CAAA;AAAA,QACH;AAEA,eAAAV,IAAA,YAAA6C,IAAA,UAAA7C,MAAAA,CAAAA,IAAAA,YAAAQ,YAAAA,UAAA;AAAA,UAAA,WAEuBuB;AAAAA,QAAiB,GAAA;AAAA,UAAA5B,SAAAA,MAAA,CAAAO,oBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,GAAA,GAChCiC,QAAQ,CAAA;AAAA,MAGlB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/ImageTextNode.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+require("../ImagePlugin/commands.js");
+const ImageNode = require("../ImagePlugin/ImageNode.js");
+const INSERT_IMAGETEXT_COMMAND = lexical.createCommand("INSERT_IMAGETEXT_COMMAND");
+const MarkClassName = "mk-doc__image-text";
+class ImageTextNode extends lexical.ElementNode {
+  static getType() {
+    return "image-text";
+  }
+  static clone(node) {
+    return new ImageTextNode(node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createImageTextNode();
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return domNode.classList.contains(MarkClassName) ? {
+          conversion: () => {
+            return { node: $createImageTextNode() };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  constructor(key) {
+    super(key);
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      version: 1
+    };
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    if (!element.classList.contains(MarkClassName)) {
+      element.classList.add(MarkClassName);
+    }
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = this.exportDOM().element;
+    el.setAttribute("node-key", this.__key);
+    el.setAttribute("contenteditable", "true");
+    el.setAttribute("data-lexical-decorator", "true");
+    return el;
+  }
+  /**
+   * 更新DOM
+   * @param prevNode 
+   * @param dom 
+   * @param config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    return false;
+  }
+  /* 不允许空
+   * @returns 
+   */
+  canBeEmpty() {
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+}
+function $createImageTextNode(attrs) {
+  const imageText = new ImageTextNode();
+  if (attrs != null) {
+    imageText.append(new ImageNode.InlineImageNode(attrs));
+    imageText.append(lexical.$createParagraphNode());
+  }
+  return imageText;
+}
+function $isImageTextNode(node) {
+  return node instanceof ImageTextNode;
+}
+exports.$createImageTextNode = $createImageTextNode;
+exports.$isImageTextNode = $isImageTextNode;
+exports.INSERT_IMAGETEXT_COMMAND = INSERT_IMAGETEXT_COMMAND;
+exports.ImageTextNode = ImageTextNode;
+//# sourceMappingURL=ImageTextNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/ImageTextNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTextNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/ImageTextNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey,EditorConfig, Spread,SerializedElementNode, DOMExportOutput } from 'lexical'\r\nimport { createCommand,$createParagraphNode,ElementNode } from 'lexical'\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\n\r\n/**\r\n * 插入图文\r\n */\r\nexport const INSERT_IMAGETEXT_COMMAND: LexicalCommand<ImageAttrType> = createCommand('INSERT_IMAGETEXT_COMMAND')\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedImageTextNode = Spread<{},SerializedElementNode>\r\n\r\n\r\n// 类标识\r\nconst MarkClassName = \"mk-doc__image-text\";\r\n\r\n/**\r\n * 图文节点\r\n */\r\nexport class ImageTextNode extends ElementNode{\r\n\r\n  static getType(): string {\r\n    return \"image-text\";\r\n  }\r\n\r\n  static clone(node: ImageTextNode): ImageTextNode {\r\n    return new ImageTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageTextNode): ImageTextNode {\r\n    return $createImageTextNode()\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n        return domNode.classList.contains(MarkClassName) ? {\r\n          conversion: ()=>{ \r\n            return  { node:$createImageTextNode() };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(key?: NodeKey) {\r\n    super(key)\r\n  }\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedImageTextNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n   \r\n    const element = document.createElement('div')\r\n\r\n    if (!element.classList.contains(MarkClassName)) {\r\n      element.classList.add(MarkClassName);\r\n    }\r\n\r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const el = this.exportDOM().element as HTMLElement;\r\n    el.setAttribute(\"node-key\",this.__key)\r\n    el.setAttribute(\"contenteditable\",\"true\")\r\n    el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n    return el;\r\n  }\r\n\r\n  /**\r\n   * 更新DOM\r\n   * @param prevNode \r\n   * @param dom \r\n   * @param config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: ImageTextNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    return false\r\n  }\r\n\r\n  /* 不允许空\r\n   * @returns \r\n   */\r\n  canBeEmpty(): boolean {\r\n    return false\r\n  }\r\n\r\n  /**\r\n   * 非内联\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return false;\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图文节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createImageTextNode(attrs?: ImageAttrType): ImageTextNode {\r\n\r\n  const imageText = new ImageTextNode()\r\n\r\n  if(attrs != null){\r\n    imageText.append(new InlineImageNode(attrs))\r\n    imageText.append($createParagraphNode())\r\n  }\r\n\r\n  return imageText;\r\n}\r\n\r\n/**\r\n * 判断是否是图文节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageTextNode(\r\n  node: ImageTextNode | LexicalNode | null | undefined,\r\n): node is ImageTextNode {\r\n  return node instanceof ImageTextNode\r\n}\r\n"],"names":["createCommand","ElementNode","InlineImageNode","$createParagraphNode"],"mappings":";;;;;AAYa,MAAA,2BAA0DA,sBAAc,0BAA0B;AAS/G,MAAM,gBAAgB;AAKf,MAAM,sBAAsBC,QAAAA,YAAW;AAAA,EAE5C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AACxC,WAAA,IAAI,cAAc,KAAK,KAAK;AAAA,EACrC;AAAA,EAEA,OAAO,WAAW,gBAAwD;AACxE,WAAO,qBAAqB;AAAA,EAC9B;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAC9B,eAAO,QAAQ,UAAU,SAAS,aAAa,IAAI;AAAA,UACjD,YAAY,MAAI;AACN,mBAAA,EAAE,MAAK,qBAAA;UACjB;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,KAAe;AACzB,UAAM,GAAG;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAsC;AAC7B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,QAAI,CAAC,QAAQ,UAAU,SAAS,aAAa,GAAG;AACtC,cAAA,UAAU,IAAI,aAAa;AAAA,IACrC;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK,UAAA,EAAY;AACzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAClC,OAAA,aAAa,mBAAkB,MAAM;AACrC,OAAA,aAAa,0BAAyB,MAAM;AACxC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAyB,KAAkB,QAA+B;AAC3E,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,aAAsB;AACb,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoB;AACX,WAAA;AAAA,EACT;AACF;AAOO,SAAS,qBAAqB,OAAsC;AAEnE,QAAA,YAAY,IAAI;AAEtB,MAAG,SAAS,MAAK;AACf,cAAU,OAAO,IAAIC,0BAAgB,KAAK,CAAC;AACjC,cAAA,OAAOC,8BAAsB;AAAA,EACzC;AAEO,SAAA;AACT;AAOO,SAAS,iBACd,MACuB;AACvB,SAAO,gBAAgB;AACzB;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js

@@ -1,54 +1,40 @@
 "use strict";
 const vue = require("vue");
-const lexicalVue = require("lexical-vue");
 const utils = require("@lexical/utils");
 const lexical = require("lexical");
-const index = require("./index.js");
-const defines = require("../ToolbarPlugin/defines.js");
+const lexicalVue = require("lexical-vue");
+const index = require("../../core/index.js");
+const ImageTextNode = require("./ImageTextNode.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
+    index.registerDocEditorToolbarExtend({
+      icon: "richtext-outline",
+      text: "图文",
+      action: async () => {
+        editor.dispatchCommand(ImageTextNode.INSERT_IMAGETEXT_COMMAND, {
+          src: "",
+          float: "left",
+          width: "200px",
+          margin: "0 10px 10px 0"
+        });
+      },
+      sort: 10
+    });
     const editor = lexicalVue.useLexicalComposer();
-    vue.onMounted(() => {
-      if (!editor.hasNodes([index.ImageTextNode])) {
-        throw new Error("ImageTextPlugin: 图文节点未注册！");
-      }
-      defines.RegisterToolbarExtend({
-        icon: "richtext-outline",
-        text: "图文",
-        action: async () => {
-          editor.dispatchCommand(index.INSERT_IMAGETEXT_COMMAND, {
-            src: "",
-            float: "left",
-            width: "200px",
-            margin: "0 10px 10px 0"
-          });
-        },
-        sort: 10
-      });
-      const unregister = utils.mergeRegister(
-        // 插入图片
-        editor.registerCommand(index.INSERT_IMAGETEXT_COMMAND, (payload) => {
-          utils.$insertNodeToNearestRoot(index.$createImageTextNode(payload));
+    lexicalVue.useMounted(() => {
+      return utils.mergeRegister(
+        // 插入图文
+        editor.registerCommand(ImageTextNode.INSERT_IMAGETEXT_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(ImageTextNode.$createImageTextNode(payload));
           return true;
         }, lexical.COMMAND_PRIORITY_EDITOR)
-        // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {
-        //   let dom = event.target as HTMLElement
-        //   let block = dom.parentElement
-        //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){
-        //     event.preventDefault();
-        //     console.log(block);
-        //     // if (!event.shiftKey){ clearSelection() }
-        //     // setSelected(true)
-        //     // updateImageActiveBox();
-        //     return true
-        //   }
-        //   // if (event.target === selfElRef.value) {
-        //   // }
-        //   return false
-        // },COMMAND_PRIORITY_LOW),
       );
-      vue.onUnmounted(() => unregister());
+    });
+    vue.onMounted(() => {
+      if (!editor.hasNodes([ImageTextNode.ImageTextNode])) {
+        throw new Error("ImageTextPlugin: 图文节点未注册！");
+      }
     });
     return (_ctx, _cache) => {
       return null;

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGETEXT_COMMAND,ImageTextNode,$createImageTextNode } from './index'\r\nimport { ImageAttrs } from '../ImagePlugin/index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\n\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageTextNode])){\r\n    throw new Error('ImageTextPlugin: 图文节点未注册！')\r\n  }\r\n \r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"richtext-outline\",\r\n    text:\"图文\",\r\n    action:async ()=>{\r\n      editor.dispatchCommand(INSERT_IMAGETEXT_COMMAND,{\r\n        src:\"\",\r\n        float:\"left\",\r\n        width:\"200px\",\r\n        margin:\"0 10px 10px 0\"\r\n      })\r\n    },\r\n    sort:10\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGETEXT_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageTextNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n    //   let dom = event.target as HTMLElement\r\n    //   let block = dom.parentElement\r\n\r\n    //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){\r\n\r\n    //     event.preventDefault();\r\n    //     console.log(block);\r\n\r\n    //     // if (!event.shiftKey){ clearSelection() }\r\n        \r\n    //     // setSelected(true)\r\n    //     // updateImageActiveBox();\r\n\r\n    //     return true\r\n    //   }\r\n\r\n    //   // if (event.target === selfElRef.value) {\r\n\r\n    \r\n    //   // }\r\n    //   return false\r\n    // },COMMAND_PRIORITY_LOW),\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageTextNode","RegisterToolbarExtend","INSERT_IMAGETEXT_COMMAND","mergeRegister","$insertNodeToNearestRoot","$createImageTextNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;AAWA,UAAM,SAASA,WAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,2BAA2B;AAAA,MAC7C;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AACf,iBAAO,gBAAgBC,gCAAyB;AAAA,YAC9C,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,UAAA,CACR;AAAA,QACH;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BD,gCAAyB,CAAC,YAAY;AAC9CE,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AA2BfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport {  useElementModule } from '../../core'\r\nimport { ImageAttrType } from '../ImagePlugin'\r\nimport { INSERT_IMAGETEXT_COMMAND,ImageTextNode,$createImageTextNode } from './index'\r\n\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"richtext-outline\",\r\n  text:\"图文\",\r\n  action:async ()=>{ \r\n    editor.dispatchCommand(INSERT_IMAGETEXT_COMMAND,{\r\n      src:\"\",\r\n      float:\"left\",\r\n      width:\"200px\",\r\n      margin:\"0 10px 10px 0\"\r\n    })\r\n  },\r\n  sort:10\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\n// const { isSelected,  curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  \r\n//   var imageTextEl:any = el\r\n\r\n//   while (imageTextEl != null && !imageTextEl.classList.contains(\"mk-doc-block-image-text\")) {\r\n//     imageTextEl = imageTextEl.parentElement;\r\n//   }\r\n\r\n//   return imageTextEl\r\n\r\n// },[\r\n//   {\r\n//     title:\"编辑\",icon:\"Edit\",action:()=>{\r\n//       // 编辑的节点\r\n//       editor.getEditorState().read(async () => {\r\n       \r\n        \r\n//       })\r\n//     } \r\n//   }\r\n// ])\r\n\r\n\r\nuseMounted(()=>{\r\n  return mergeRegister(\r\n    // 插入图文\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGETEXT_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageTextNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n  )\r\n})\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageTextNode])){\r\n    throw new Error('ImageTextPlugin: 图文节点未注册！')\r\n  }\r\n})\r\n</script>\r\n\r\n\r\n<template>\r\n  <!-- <div class=\"mk-doc-active-mark mk-doc-active-box-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div> -->\r\n</template>\r\n\r\n"],"names":["registerDocEditorToolbarExtend","INSERT_IMAGETEXT_COMMAND","useLexicalComposer","useMounted","mergeRegister","$insertNodeToNearestRoot","$createImageTextNode","COMMAND_PRIORITY_EDITOR","onMounted","ImageTextNode"],"mappings":";;;;;;;;;;AAY+BA,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgBC,wCAAyB;AAAA,UAC9C,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,QAAA,CACR;AAAA,MACH;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAExB,UAAM,SAASC,WAAAA;AA0BfC,eAAAA,WAAW,MAAI;AACN,aAAAC,MAAA;AAAA;AAAA,QAEL,OAAO,gBAA+BH,wCAAyB,CAAC,YAAY;AACjDI,yCAAAC,cAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA,MAAA;AAAA,IAC3B,CACD;AAEDC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,cAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,2BAA2B;AAAA,MAC7C;AAAA,IAAA,CACD;;;;;;;"}