@maketribe/ms-app 3.2.3 → 3.2.4

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

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+const icons = require("@element-plus/icons-vue");
+const MsMaterialTable = require("../../../../../modules/ms/dataviews/ms-material/MsMaterialTable.js");
+require("@maketribe/request");
+const index = require("../../../../../modules/ms/components/material-list/index.js");
+const utils = require("@maketribe/utils");
+require("../../../image-cropper/index.js");
+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 ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
+  name: "ImageEditPanelComponent",
+  props: ["attrs"],
+  setup(props, {
+    expose
+  }) {
+    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 = ["", "", "", ""];
+        }
+        return {
+          t: vals[0],
+          r: vals[1],
+          b: vals[2],
+          l: vals[3]
+        };
+      }
+    });
+    materialTable.selectionChangeEvent.on(() => {
+      var _a;
+      let id = materialTable.getSelection()[0];
+      if (id) {
+        attrs.src = (_a = materialTable.getList().find((item) => item.id == id)) == null ? void 0 : _a.path;
+      } else {
+        attrs.src = "";
+      }
+    });
+    const selectImage = async () => {
+      const file = await utils.fileSelect({
+        accept: "image/*"
+      });
+      if (file) {
+        const fileRender = new FileReader();
+        fileRender.onload = async (data) => {
+          attrs.src = data.target.result;
+        };
+        fileRender.readAsDataURL(file);
+      }
+    };
+    expose({
+      getResult: () => {
+        return {
+          ...attrs
+        };
+      }
+    });
+    return () => {
+      const ImageView = vue.createVNode(elementPlus.ElImage, {
+        "style": "background: #dedede;width: 100%; height: 480px;margin-top:10px",
+        "src": attrs.src,
+        "fit": "contain"
+      }, {
+        error: () => {
+          return vue.createVNode("div", {
+            "style": "font-size: 50px; display: flex; align-content: center; justify-content: center; align-items: center; height: 100%;"
+          }, [vue.createVNode(elementPlus.ElIcon, null, {
+            default: () => [vue.createVNode(icons.Picture, null, null)]
+          })]);
+        }
+      });
+      let panel = vue.createVNode(elementPlus.ElTabs, {
+        "style": "min-height: 520px"
+      }, {
+        default: () => [vue.createVNode(elementPlus.ElTabPane, {
+          "label": "本地选择"
+        }, {
+          default: () => [vue.createVNode(elementPlus.ElButton, {
+            "icon": icons.UploadFilled,
+            "type": "primary",
+            "style": "width: 100%",
+            "onClick": selectImage
+          }, {
+            default: () => [vue.createTextVNode("选择本地文件")]
+          }), ImageView]
+        }), vue.createVNode(elementPlus.ElTabPane, {
+          "label": "素材库选择"
+        }, {
+          default: () => [vue.createVNode(index.MKMaterialList, {
+            "class": "mk-material-select__list",
+            "selectable": true,
+            "materialTable": materialTable
+          }, null)]
+        }), vue.createVNode(elementPlus.ElTabPane, {
+          "label": "网络图片"
+        }, {
+          default: () => [vue.createVNode(elementPlus.ElInput, {
+            "modelValue": attrs.src,
+            "onUpdate:modelValue": ($event) => attrs.src = $event,
+            "prefix-icon": icons.Share,
+            "style": "width: 100%",
+            "placeholder": "请输入链接地址"
+          }, null), ImageView]
+        })]
+      });
+      if (selectState.value == "attrs") {
+        panel = vue.createVNode(elementPlus.ElRow, {
+          "gutter": 20
+        }, {
+          default: () => [vue.createVNode(elementPlus.ElCol, {
+            "span": 14
+          }, _isSlot(ImageView) ? ImageView : {
+            default: () => [ImageView]
+          }), vue.createVNode(elementPlus.ElCol, {
+            "span": 10
+          }, {
+            default: () => [vue.createVNode(elementPlus.ElForm, {
+              "label-position": "top",
+              "model": attrs
+            }, {
+              default: () => [vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片描述"
+              }, {
+                default: () => [vue.createVNode(elementPlus.ElInput, vue.mergeProps({
+                  "modelValue": attrs.alt,
+                  "onUpdate:modelValue": ($event) => attrs.alt = $event,
+                  "type": "textarea"
+                }, {
+                  rows: 3
+                }, {
+                  "style": "width: 100%",
+                  "placeholder": "请输入"
+                }), null)]
+              }), vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片显示宽度"
+              }, {
+                default: () => [vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": attrs.width,
+                  "onUpdate:modelValue": ($event) => attrs.width = $event,
+                  "style": "width: 100%",
+                  "placeholder": "请输入宽度（可支持%）"
+                }, null)]
+              }), vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片显示高度"
+              }, {
+                default: () => [vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": attrs.height,
+                  "onUpdate:modelValue": ($event) => attrs.height = $event,
+                  "style": "width: 100%",
+                  "placeholder": "请输入宽度（可支持%）"
+                }, null)]
+              }), vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片最大显示宽度"
+              }, {
+                default: () => [vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": attrs.maxWidth,
+                  "onUpdate:modelValue": ($event) => attrs.maxWidth = $event,
+                  "style": "width: 100%",
+                  "placeholder": "请输入宽度（可支持%）"
+                }, null)]
+              }), vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片最大显示高度"
+              }, {
+                default: () => [vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": attrs.maxHeight,
+                  "onUpdate:modelValue": ($event) => attrs.maxHeight = $event,
+                  "style": "width: 100%",
+                  "placeholder": "请输入宽度（可支持%）"
+                }, null)]
+              }), vue.createVNode(elementPlus.ElFormItem, {
+                "label": "图片显示外边距"
+              }, {
+                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,
+                  "placeholder": ""
+                }, null)]), vue.createVNode("div", null, [vue.createTextVNode("右:"), vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": margin.value.r,
+                  "onUpdate:modelValue": ($event) => margin.value.r = $event,
+                  "placeholder": ""
+                }, null)]), vue.createVNode("div", null, [vue.createTextVNode("下:"), vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": margin.value.b,
+                  "onUpdate:modelValue": ($event) => margin.value.b = $event,
+                  "placeholder": ""
+                }, null)]), vue.createVNode("div", null, [vue.createTextVNode("左:"), vue.createVNode(elementPlus.ElInput, {
+                  "modelValue": margin.value.l,
+                  "onUpdate:modelValue": ($event) => margin.value.l = $event,
+                  "placeholder": ""
+                }, null)])])]
+              })]
+            })]
+          })]
+        });
+      }
+      return panel;
+    };
+  }
+});
+const ShowImageEditPanel = async (attrs) => {
+  return new Promise((resolve, reject) => {
+    selectState.value = attrs.src ? "attrs" : "select";
+    const imageEditPanelRef = vue.ref(null);
+    const editResult = vue.computed(() => {
+      var _a;
+      return (_a = imageEditPanelRef.value) == null ? void 0 : _a.getResult();
+    });
+    const toCropImageHandle = async () => {
+      if (editResult.value.src) {
+        var result = await imageCropperApi.ImageCropper({
+          src: editResult.value.src
+        });
+        if (result.data) {
+          attrs.src = result.data;
+        }
+        selectState.value = "attrs";
+      }
+    };
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+      reject();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(editResult.value);
+    };
+    const dialogInstance = dm.Dialoger.customRender({
+      title: "素材选择",
+      class: "mk-material-select",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return vue.h(ImageEditPanelComponent, {
+          attrs,
+          ref: (r) => imageEditPanelRef.value = r
+        });
+      },
+      footer: () => {
+        let nextBtns = [vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": toCropImageHandle
+        }, {
+          default: () => [vue.createTextVNode("下一步")]
+        })];
+        if (selectState.value == "attrs") {
+          nextBtns = [vue.createVNode(elementPlus.ElButton, {
+            "type": "primary",
+            "onClick": () => selectState.value = "select"
+          }, {
+            default: () => [vue.createTextVNode("重新选图")]
+          }), vue.createVNode(elementPlus.ElButton, {
+            "type": "primary",
+            "onClick": handleConfirmClick
+          }, {
+            default: () => [vue.createTextVNode("确定")]
+          })];
+        }
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), ...nextBtns]);
+      }
+    });
+  });
+};
+exports.ShowImageEditPanel = ShowImageEditPanel;
+//# sourceMappingURL=ImageEditPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditPanel.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.tsx"],"sourcesContent":["\r\nimport { Fragment,h,onMounted, 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 { MsMaterial, MsMaterialTable } from \"../../../../../modules/ms/dataviews/ms-material\";\r\nimport { MKMaterialList } from \"../../../../../modules/ms/components/material-list\";\r\nimport { MKImageCropperContent } from \"../../../image-cropper\"\r\nimport { fileSelect } from \"@maketribe/utils\"\r\nimport { ImageCropper } from \"../../../image-cropper\"\r\n\r\n// 选择状态\r\nconst selectState = ref(\"select\");\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      set(v){\r\n        attrs.margin = `${v.t} ${v.r} ${v.b} ${v.l}`\r\n      },\r\n      get(){\r\n        var vals = attrs.margin.split(/[\\s]+/g);\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    })\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({ getResult:()=>{ return {...attrs} } });\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 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={margin.value.t} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  <div>\r\n                    右:\r\n                    <ElInput v-model={margin.value.r} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    下:\r\n                    <ElInput v-model={margin.value.b} placeholder=\"\">\r\n                    </ElInput>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    左:\r\n                    <ElInput v-model={margin.value.l} 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 ShowImageEditPanel  = 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\r\n        if(result.data){\r\n          attrs.src = result.data;\r\n        }\r\n        \r\n        selectState.value = 'attrs';\r\n      }\r\n     \r\n    }\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n      reject();\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={toCropImageHandle}>\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={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","ImageEditPanelComponent","defineComponent","name","props","setup","expose","attrs","reactive","materialTable","MsMaterialTable","margin","computed","set","v","t","r","b","l","get","vals","split","length","selectionChangeEvent","on","id","getSelection","src","getList","find","item","path","selectImage","file","fileSelect","accept","fileRender","FileReader","onload","data","target","result","readAsDataURL","getResult","ImageView","_createVNode","ElImage","error","ElIcon","default","Picture","panel","ElTabs","ElTabPane","ElButton","UploadFilled","_createTextVNode","MKMaterialList","ElInput","$event","Share","value","ElRow","ElCol","ElForm","ElFormItem","_mergeProps","alt","rows","width","height","maxWidth","maxHeight","ShowImageEditPanel","Promise","resolve","reject","imageEditPanelRef","editResult","toCropImageHandle","ImageCropper","handleCancelClick","dialogInstance","destroy","handleConfirmClick","Dialoger","customRender","title","class","onClose","body","h","footer","nextBtns","onClick","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,112 @@
+"use strict";
+const vue = require("vue");
+const lexical = require("lexical");
+const utils = require("@lexical/utils");
+require("@lexical/text");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const index = require("./index.js");
+const lowPriority = 1;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "ImageTools",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    const alignList = vue.ref(["left", "center", "right"]);
+    const alignValue = vue.ref("left");
+    const isFloat = vue.ref(false);
+    const setImageAttr = (name, value) => {
+      editor.dispatchCommand(index.IMAGE_ATTRS_CHANGE, { value, name });
+    };
+    vue.onMounted(() => {
+      const unregisterMergeListener = utils.mergeRegister(
+        editor.registerCommand(index.IMAGE_ATTRS_CHANGE, (payload) => {
+          if (payload.name == "align") {
+            alignValue.value = payload.value;
+          }
+          return false;
+        }, lowPriority),
+        editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, (payload, newEditor) => {
+          var _a;
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            if ((node == null ? void 0 : node.__attrs) != null && node.__type == index.ImageNode.getType()) {
+              isFloat.value = node.__attrs.float != null && node.__attrs.float != "";
+              alignValue.value = isFloat.value ? node.__attrs.float : ((_a = node.getParent()) == null ? void 0 : _a.getFormatType()) ?? "left";
+            }
+          }
+          return false;
+        }, lowPriority)
+      );
+      vue.onUnmounted(() => unregisterMergeListener());
+    });
+    return (_ctx, _cache) => {
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      return vue.openBlock(), vue.createBlock(_component_el_button_group, null, {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(alignList.value, (item) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
+              (isFloat.value ? item != "center" : true) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                text: "",
+                class: vue.normalizeClass({ active: alignValue.value == item }),
+                onClick: ($event) => setImageAttr("align", item)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_MKSvgIcon, {
+                    iconClass: `doc-align-${item}`
+                  }, null, 8, ["iconClass"])
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"])) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128)),
+          vue.createVNode(_component_el_button, {
+            text: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => setImageAttr("edit", null))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Edit` })
+            ]),
+            _: 1
+          }),
+          !isFloat.value ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+            key: 0,
+            text: "",
+            type: "danger",
+            onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(index.REMOVE_IMAGE_COMMAND), null))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=ImageTools.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTools.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/ImageTools.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { \r\n  type CommandListenerPriority,\r\n  ElementFormatType,SELECTION_CHANGE_COMMAND,$getSelection,$isNodeSelection } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { ImageAttrData,IMAGE_ATTRS_CHANGE,REMOVE_IMAGE_COMMAND,ImageNode } from './index'\r\n\r\n \r\nconst lowPriority: CommandListenerPriority = 1\r\nconst editor = useLexicalComposer()\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\"])\r\nconst alignValue = ref<any>(\"left\")\r\nconst isFloat = ref<boolean>(false);\r\n\r\n// 设置图片属性\r\nconst setImageAttr = (name:string,value:string|undefined|null)=>{\r\n  editor.dispatchCommand(IMAGE_ATTRS_CHANGE,{value,name} as ImageAttrData)\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(IMAGE_ATTRS_CHANGE, (payload:ImageAttrData) => {\r\n      if(payload.name == \"align\"){\r\n        alignValue.value = payload.value;\r\n      }\r\n      return false;\r\n    },lowPriority),\r\n    editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n        \r\n      const selection = $getSelection();\r\n\r\n      if($isNodeSelection(selection)){\r\n\r\n        const node = selection.getNodes()[0] as ImageNode;\r\n\r\n        // 是图片\r\n        if(node?.__attrs != null && node.__type == ImageNode.getType()){\r\n          // 判断是否有浮动\r\n          isFloat.value = node.__attrs.float != null && node.__attrs.float != \"\";\r\n          alignValue.value = isFloat.value ? node.__attrs.float : node.getParent()?.getFormatType() ?? \"left\"\r\n        }\r\n        \r\n      }\r\n      return false;\r\n    },lowPriority)\r\n  )\r\n\r\n  // 卸载\r\n  onUnmounted(() => unregisterMergeListener())\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <el-button-group>\r\n    <template v-for=\"item in alignList\" :key=\"item\">\r\n      <el-button text :class=\"{active:alignValue == item}\" v-if=\"isFloat ? item != 'center':true\" @click=\"setImageAttr('align',item)\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${item}`\" /> \r\n      </el-button>\r\n    </template>\r\n    <el-button text  @click=\"setImageAttr('edit',null)\">\r\n      <MKSvgIcon :iconClass=\"`Edit`\" /> \r\n    </el-button>\r\n    <el-button text type=\"danger\" v-if=\"!isFloat\" @click=\"editor.dispatchCommand(REMOVE_IMAGE_COMMAND,null)\">\r\n      <MKSvgIcon :iconClass=\"`Delete`\" /> \r\n    </el-button>\r\n  </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","IMAGE_ATTRS_CHANGE","onMounted","mergeRegister","SELECTION_CHANGE_COMMAND","$getSelection","$isNodeSelection","ImageNode","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,cAAuC;;;;AAC7C,UAAM,SAASA,mBAAAA;AAEf,UAAM,YAAYC,IAAAA,IAAyB,CAAC,QAAO,UAAS,OAAO,CAAC;AAC9D,UAAA,aAAaA,QAAS,MAAM;AAC5B,UAAA,UAAUA,QAAa,KAAK;AAG5B,UAAA,eAAe,CAAC,MAAY,UAA8B;AAC9D,aAAO,gBAAgBC,MAAA,oBAAmB,EAAC,OAAM,KAAsB,CAAA;AAAA,IAAA;AAGzEC,QAAAA,UAAU,MAAI;AAEZ,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO,gBAAgBF,0BAAoB,CAAC,YAA0B;AACjE,cAAA,QAAQ,QAAQ,SAAQ;AACzB,uBAAW,QAAQ,QAAQ;AAAA,UAC7B;AACO,iBAAA;AAAA,WACP,WAAW;AAAA,QACb,OAAO,gBAAgBG,QAAAA,0BAA0B,CAAC,SAAS,cAAc;;AAEvE,gBAAM,YAAYC,QAAAA;AAEf,cAAAC,QAAAA,iBAAiB,SAAS,GAAE;AAE7B,kBAAM,OAAO,UAAU,SAAS,EAAE,CAAC;AAGnC,iBAAG,6BAAM,YAAW,QAAQ,KAAK,UAAUC,MAAAA,UAAU,WAAU;AAE7D,sBAAQ,QAAQ,KAAK,QAAQ,SAAS,QAAQ,KAAK,QAAQ,SAAS;AACzD,yBAAA,QAAQ,QAAQ,QAAQ,KAAK,QAAQ,UAAQ,UAAK,UAAA,MAAL,mBAAkB,oBAAmB;AAAA,YAC/F;AAAA,UAEF;AACO,iBAAA;AAAA,WACP,WAAW;AAAA,MAAA;AAIHC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageTools.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const ImageTools_vue_vue_type_script_setup_true_lang = require("./ImageTools.vue.js");
+module.exports = ImageTools_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=ImageTools.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTools.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

@@ -1,11 +1,13 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./DocImageComponent.js");
-require("vue");
+const lexical = require("lexical");
+const vue = require("vue");
 require("@lexical/text");
 require("@lexical/utils");
 require("@lexical/overflow");
-const lexical = require("lexical");
 require("tiny-invariant");
 require("@lexical/history");
 require("@lexical/list");
@@ -20,13 +22,127 @@ require("@lexical/link");
 require("@lexical/mark");
 require("@lexical/table");
 require("@lexical/hashtag");
+const LexicalDecoratorBlockNode = require("../../lexical-vue/components/LexicalDecoratorBlockNode.js");
 require("@lexical/markdown");
 require("../../lexical-vue/composables/useCollaborationContext.js");
 require("../../lexical-vue/components/LexicalMenu/shared.js");
 require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
 require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
-const INSERT_IMAGE_COMMAND = lexical.createCommand(
-  "INSERT_IMAGE_COMMAND"
-);
+const DocImageComponent = require("./DocImageComponent.js");
+const IMAGE_ATTRS_CHANGE = lexical.createCommand("IMAGE_ATTRS_CHANGE");
+const REMOVE_IMAGE_COMMAND = lexical.createCommand("REMOVE_IMAGE_COMMAND");
+const INSERT_IMAGE_COMMAND = lexical.createCommand("INSERT_IMAGE_COMMAND");
+class ImageNode extends LexicalDecoratorBlockNode.DecoratorBlockNode {
+  constructor(attrs, format, key) {
+    super(format, key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "Image";
+  }
+  static clone(node) {
+    return new ImageNode(node.__attrs, node.__format, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createImageNode(serializedNode.attrs);
+    node.setFormat(serializedNode.format);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      version: 1,
+      attrs: this.__attrs
+    };
+  }
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__attrs.src);
+    if (this.__attrs.alt != null) {
+      element.setAttribute("alt", this.__attrs.alt ?? "");
+    }
+    element.setAttribute("style", this.getStyles().join(";"));
+    return { element };
+  }
+  static importDOM() {
+    return {
+      img: (dn) => {
+        return {
+          conversion: (domNode) => {
+            const src = domNode.getAttribute("src");
+            const alt = domNode.getAttribute("alt");
+            console.log(domNode.style.width);
+            return domNode.tagName.toLowerCase() == "img" && src != null ? {
+              node: $createImageNode({
+                src,
+                alt,
+                width: domNode.style.width,
+                height: domNode.style.height,
+                maxWidth: domNode.style.maxWidth || "100%",
+                maxHeight: domNode.style.maxHeight,
+                margin: domNode.style.margin,
+                float: domNode.style.float
+              })
+            } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  setFloat(pos) {
+    this.__attrs.float = pos;
+  }
+  getStyles() {
+    const style = [];
+    if (this.__attrs.width) {
+      style.push("width:" + this.__attrs.width);
+    }
+    if (this.__attrs.height) {
+      style.push("height:" + this.__attrs.height);
+    }
+    if (this.__attrs.float) {
+      style.push("float:" + this.__attrs.float);
+    }
+    if (this.__attrs.maxWidth) {
+      style.push("max-width:" + this.__attrs.maxWidth);
+    }
+    if (this.__attrs.maxHeight) {
+      style.push("max-height:" + this.__attrs.maxHeight);
+    }
+    if (this.__attrs.float) {
+      style.push("float:" + this.__attrs.float);
+    }
+    if (this.__attrs.margin) {
+      style.push("margin:" + this.__attrs.margin);
+    }
+    return style;
+  }
+  updateDOM() {
+    return false;
+  }
+  getTextContent(_includeInert, _includeDirectionless) {
+    return this.__attrs.src;
+  }
+  decorate(_editor, config) {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    return vue.h(DocImageComponent, {
+      baseClass: embedBlockTheme.base || "",
+      focusClass: embedBlockTheme.focus || "",
+      format: this.__format,
+      nodeKey: this.getKey(),
+      attrs: this.__attrs
+    });
+  }
+}
+function $createImageNode(attrs) {
+  return new ImageNode(attrs);
+}
+exports.$createImageNode = $createImageNode;
+exports.IMAGE_ATTRS_CHANGE = IMAGE_ATTRS_CHANGE;
 exports.INSERT_IMAGE_COMMAND = INSERT_IMAGE_COMMAND;
+exports.ImageNode = ImageNode;
+exports.REMOVE_IMAGE_COMMAND = REMOVE_IMAGE_COMMAND;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.ts"],"sourcesContent":["\r\n\r\nimport {\r\n  ImageNode,\r\n  $createImageNode,\r\n  $isImageNode,\r\n} from \"./ImageNode\"\r\n\r\n\r\nimport type { LexicalCommand } from 'lexical'\r\nimport { createCommand } from 'lexical'\r\n\r\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<string> = createCommand(\r\n  'INSERT_IMAGE_COMMAND',\r\n)\r\n\r\nexport {\r\n  ImageNode,\r\n  $createImageNode,\r\n  $isImageNode,\r\n}\r\n"],"names":["createCommand"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,uBAA+CA,QAAA;AAAA,EAC1D;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMConversionOutput,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  ElementFormatType,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  LexicalCommand\r\n} from 'lexical'\r\nimport { createCommand } from 'lexical'\r\nimport { DecoratorBlockNode,type SerializedDecoratorBlockNode  } from '../../lexical-vue'\r\nimport { h ,type Component} from 'vue'\r\nimport DocImageComponent from './DocImageComponent'\r\n\r\n/**\r\n * 图片属性类型\r\n */\r\nexport type ImageAttrs = {\r\n  src:string,\r\n  alt?:string,\r\n  width?:string,\r\n  height?:string,\r\n  float?:string,\r\n  maxWidth?:string,\r\n  maxHeight?:string,\r\n  margin?:string\r\n};\r\n\r\n/**\r\n * 图片属性数据\r\n */\r\nexport type ImageAttrData = { name:string, value:string|null|undefined }\r\n\r\n/**\r\n * 图片属性改变\r\n */\r\nexport const IMAGE_ATTRS_CHANGE: LexicalCommand<ImageAttrData> = createCommand('IMAGE_ATTRS_CHANGE')\r\n\r\n\r\n/**\r\n * 删除图片\r\n */\r\nexport const REMOVE_IMAGE_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_IMAGE_COMMAND')\r\n\r\n\r\n/**\r\n * 插入图片指令\r\n */\r\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<ImageAttrs> = createCommand('INSERT_IMAGE_COMMAND')\r\n\r\n/**\r\n * 图片节点序列化\r\n */\r\nexport type SerializedImageNode = Spread<\r\n  {\r\n    attrs: ImageAttrs\r\n  },\r\n  SerializedDecoratorBlockNode\r\n>\r\n\r\n/**\r\n * 定义图片节点\r\n */\r\nexport class ImageNode extends DecoratorBlockNode {\r\n  __attrs: ImageAttrs\r\n\r\n  static getType(): string {\r\n    return 'Image'\r\n  }\r\n\r\n  static clone(node: ImageNode): ImageNode {\r\n    return new ImageNode(node.__attrs, node.__format, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageNode): ImageNode {\r\n    const node = $createImageNode(serializedNode.attrs)\r\n    node.setFormat(serializedNode.format)\r\n    return node\r\n  }\r\n\r\n  constructor(attrs: ImageAttrs, format?: ElementFormatType, key?: NodeKey) {\r\n    super(format, key)\r\n    this.__attrs = attrs\r\n  }\r\n\r\n  exportJSON(): SerializedImageNode {\r\n\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1,\r\n      attrs: this.__attrs,\r\n    }\r\n  }\r\n\r\n  exportDOM(): DOMExportOutput {\r\n\r\n    const element = document.createElement('img') \r\n\r\n    element.setAttribute('src', this.__attrs.src) \r\n\r\n    if(this.__attrs.alt  != null){\r\n      element.setAttribute('alt', this.__attrs.alt ?? \"\")\r\n    }\r\n\r\n    element.setAttribute(\"style\",this.getStyles().join(\";\"))\r\n    \r\n    return { element }\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (dn: HTMLElement) => {\r\n        return  {\r\n          conversion: (domNode: HTMLElement) => {\r\n            const src = domNode.getAttribute('src');\r\n            const alt = domNode.getAttribute('alt');\r\n            console.log(domNode.style.width);\r\n            return domNode.tagName.toLowerCase() == \"img\" && src != null ?  { \r\n              node:$createImageNode({\r\n                src:src,\r\n                alt:alt,\r\n                width:domNode.style.width,\r\n                height:domNode.style.height,\r\n                maxWidth:domNode.style.maxWidth || \"100%\",\r\n                maxHeight:domNode.style.maxHeight,\r\n                margin:domNode.style.margin,\r\n                float:domNode.style.float\r\n              } as ImageAttrs) \r\n            } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n  setFloat(pos?:string){\r\n    this.__attrs.float = pos;\r\n  }\r\n\r\n  getStyles():string[]{\r\n\r\n    const style : string[] = [];\r\n\r\n    if(this.__attrs.width){\r\n      style.push(\"width:\"+this.__attrs.width)\r\n    }\r\n    if(this.__attrs.height){\r\n      style.push(\"height:\"+this.__attrs.height)\r\n    }\r\n    if(this.__attrs.float){\r\n      style.push(\"float:\"+this.__attrs.float)\r\n    }\r\n    if(this.__attrs.maxWidth){\r\n      style.push(\"max-width:\"+this.__attrs.maxWidth)\r\n    }\r\n    if(this.__attrs.maxHeight){\r\n      style.push(\"max-height:\"+this.__attrs.maxHeight)\r\n    }\r\n    if(this.__attrs.float){\r\n      style.push(\"float:\"+this.__attrs.float)\r\n    }\r\n    if(this.__attrs.margin){\r\n      style.push(\"margin:\"+this.__attrs.margin)\r\n    }\r\n\r\n    return style\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false\r\n  }\r\n\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string {\r\n    return this.__attrs.src\r\n  }\r\n\r\n  decorate(_editor: LexicalEditor, config: EditorConfig): Component {\r\n    const embedBlockTheme = config.theme.embedBlock || {}\r\n    return h(DocImageComponent, {\r\n      baseClass: embedBlockTheme.base || '',\r\n      focusClass: embedBlockTheme.focus || '',\r\n      format: this.__format,\r\n      nodeKey: this.getKey(),\r\n      attrs: this.__attrs\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createImageNode(attrs: ImageAttrs): ImageNode {\r\n  return new ImageNode(attrs)\r\n}\r\n\r\n/**\r\n * 判断是否是图片节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageNode(\r\n  node: ImageNode | LexicalNode | null | undefined,\r\n): node is ImageNode {\r\n  return node instanceof ImageNode\r\n}\r\n"],"names":["createCommand","DecoratorBlockNode","h"],"mappings":"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"}