@maketribe/ms-app 3.2.4 → 3.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js +37 -2
  2. package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js.map +1 -1
  3. package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js +2 -37
  4. package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js.map +1 -1
  5. package/dist/cjs/components/basic/doc-editor/plugins/AutoLinkPlugin.vue.js +1 -1
  6. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js +26 -46
  7. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js.map +1 -1
  8. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.js +14 -4
  9. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.js.map +1 -1
  10. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.js +0 -1
  11. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.js.map +1 -1
  12. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js +2 -0
  13. package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js.map +1 -1
  14. package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js +1 -1
  15. package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js.map +1 -1
  16. package/dist/cjs/components/data-model/data-table/views/table/table.js +0 -1
  17. package/dist/cjs/components/data-model/data-table/views/table/table.js.map +1 -1
  18. package/dist/cjs/components/data-model/data-table/views/table-view/header/header.js +12 -9
  19. package/dist/cjs/components/data-model/data-table/views/table-view/header/header.js.map +1 -1
  20. package/dist/cjs/components/data-model/data-table/views/tree/tree-options.js +1 -0
  21. package/dist/cjs/components/data-model/data-table/views/tree/tree-options.js.map +1 -1
  22. package/dist/cjs/components/data-model/data-table/views/tree/tree.js +1 -1
  23. package/dist/cjs/components/data-model/data-table/views/tree/tree.js.map +1 -1
  24. package/dist/cjs/composables/use-single-view.js +2 -0
  25. package/dist/cjs/composables/use-single-view.js.map +1 -1
  26. package/dist/cjs/core/MSAppClient.js +8 -6
  27. package/dist/cjs/core/MSAppClient.js.map +1 -1
  28. package/dist/cjs/core/PageManager.js.map +1 -1
  29. package/dist/cjs/modules/ms/dataviews/ms-material/MsMaterialMan.js +0 -1
  30. package/dist/cjs/modules/ms/dataviews/ms-material/MsMaterialMan.js.map +1 -1
  31. package/dist/cjs/modules/ms/dataviews/ms-menu/MsMenuTree.js.map +1 -1
  32. package/dist/cjs/modules/ms/pages/ms-menu/index.vue2.js +2 -1
  33. package/dist/cjs/modules/ms/pages/ms-menu/index.vue2.js.map +1 -1
  34. package/dist/esm/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js +36 -1
  35. package/dist/esm/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js.map +1 -1
  36. package/dist/esm/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js +1 -36
  37. package/dist/esm/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js.map +1 -1
  38. package/dist/esm/components/basic/doc-editor/plugins/AutoLinkPlugin.vue.js +1 -1
  39. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js +27 -47
  40. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js.map +1 -1
  41. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.js +14 -4
  42. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.js.map +1 -1
  43. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/index.js +0 -1
  44. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/index.js.map +1 -1
  45. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js +2 -0
  46. package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js.map +1 -1
  47. package/dist/esm/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js +1 -1
  48. package/dist/esm/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js.map +1 -1
  49. package/dist/esm/components/data-model/data-table/views/table/table.js +0 -1
  50. package/dist/esm/components/data-model/data-table/views/table/table.js.map +1 -1
  51. package/dist/esm/components/data-model/data-table/views/table-view/header/header.js +12 -9
  52. package/dist/esm/components/data-model/data-table/views/table-view/header/header.js.map +1 -1
  53. package/dist/esm/components/data-model/data-table/views/tree/tree-options.js +1 -0
  54. package/dist/esm/components/data-model/data-table/views/tree/tree-options.js.map +1 -1
  55. package/dist/esm/components/data-model/data-table/views/tree/tree.js +1 -1
  56. package/dist/esm/components/data-model/data-table/views/tree/tree.js.map +1 -1
  57. package/dist/esm/composables/use-single-view.js +2 -0
  58. package/dist/esm/composables/use-single-view.js.map +1 -1
  59. package/dist/esm/core/MSAppClient.js +8 -6
  60. package/dist/esm/core/MSAppClient.js.map +1 -1
  61. package/dist/esm/core/PageManager.js.map +1 -1
  62. package/dist/esm/modules/ms/dataviews/ms-material/MsMaterialMan.js +0 -1
  63. package/dist/esm/modules/ms/dataviews/ms-material/MsMaterialMan.js.map +1 -1
  64. package/dist/esm/modules/ms/dataviews/ms-menu/MsMenuTree.js.map +1 -1
  65. package/dist/esm/modules/ms/pages/ms-menu/index.vue2.js +2 -1
  66. package/dist/esm/modules/ms/pages/ms-menu/index.vue2.js.map +1 -1
  67. package/dist/style/components/index.css +1 -1
  68. package/dist/style/components/material-item.css +1 -1
  69. package/dist/style/index.css +1 -1
  70. package/dist/style/src/components/material-item.scss +3 -2
  71. package/dist/types/components/data-model/data-table/views/tree/index.d.ts +3 -0
  72. package/dist/types/components/data-model/data-table/views/tree/tree-options.d.ts +1 -0
  73. package/dist/types/components/data-model/data-table/views/tree/tree.d.ts +3 -0
  74. package/package.json +5 -5
@@ -1,4 +1,39 @@
1
1
  "use strict";
2
- const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
3
- module.exports = index_vue_vue_type_script_setup_true_lang;
2
+ const vue = require("vue");
3
+ require("@lexical/text");
4
+ require("@lexical/utils");
5
+ require("@lexical/overflow");
6
+ require("lexical");
7
+ require("tiny-invariant");
8
+ require("@lexical/history");
9
+ const useLexicalComposer = require("../../composables/useLexicalComposer.js");
10
+ require("@lexical/list");
11
+ require("@lexical/dragon");
12
+ require("@lexical/plain-text");
13
+ require("@lexical/rich-text");
14
+ require("@lexical/yjs");
15
+ require("yjs");
16
+ const shared = require("./shared.js");
17
+ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
18
+ __name: "index",
19
+ props: {
20
+ matchers: {}
21
+ },
22
+ emits: ["change"],
23
+ setup(__props, { emit: __emit }) {
24
+ const props = __props;
25
+ const emit = __emit;
26
+ const editor = useLexicalComposer.useLexicalComposer();
27
+ shared.useAutoLink(editor, props.matchers, (url, prevUrl) => {
28
+ emit("change", {
29
+ url,
30
+ prevUrl
31
+ });
32
+ });
33
+ return (_ctx, _cache) => {
34
+ return null;
35
+ };
36
+ }
37
+ });
38
+ module.exports = _sfc_main;
4
39
  //# sourceMappingURL=index.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
1
+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../composables'\r\nimport { type LinkMatcher, useAutoLink } from './shared'\r\n\r\nconst props = defineProps<{\r\n matchers: LinkMatcher[]\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n (e: 'change', value: { url: string | null, prevUrl: string | null }): void\r\n}>()\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nuseAutoLink(editor, props.matchers, (url: string | null, prevUrl: string | null) => {\r\n emit('change', {\r\n url,\r\n prevUrl,\r\n })\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","useAutoLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAId,UAAM,OAAO;AAIb,UAAM,SAASA,mBAAAA;AAEfC,WAAA,YAAY,QAAQ,MAAM,UAAU,CAAC,KAAoB,YAA2B;AAClF,WAAK,UAAU;AAAA,QACb;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;;;;;;;"}
@@ -1,39 +1,4 @@
1
1
  "use strict";
2
- const vue = require("vue");
3
- require("@lexical/text");
4
- require("@lexical/utils");
5
- require("@lexical/overflow");
6
- require("lexical");
7
- require("tiny-invariant");
8
- require("@lexical/history");
9
- const useLexicalComposer = require("../../composables/useLexicalComposer.js");
10
- require("@lexical/list");
11
- require("@lexical/dragon");
12
- require("@lexical/plain-text");
13
- require("@lexical/rich-text");
14
- require("@lexical/yjs");
15
- require("yjs");
16
- const shared = require("./shared.js");
17
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
18
- __name: "index",
19
- props: {
20
- matchers: {}
21
- },
22
- emits: ["change"],
23
- setup(__props, { emit: __emit }) {
24
- const props = __props;
25
- const emit = __emit;
26
- const editor = useLexicalComposer.useLexicalComposer();
27
- shared.useAutoLink(editor, props.matchers, (url, prevUrl) => {
28
- emit("change", {
29
- url,
30
- prevUrl
31
- });
32
- });
33
- return (_ctx, _cache) => {
34
- return null;
35
- };
36
- }
37
- });
38
- module.exports = _sfc_main;
2
+ const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
3
+ module.exports = index_vue_vue_type_script_setup_true_lang;
39
4
  //# sourceMappingURL=index.vue2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.vue2.js","sources":["../../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalAutoLinkPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../composables'\r\nimport { type LinkMatcher, useAutoLink } from './shared'\r\n\r\nconst props = defineProps<{\r\n matchers: LinkMatcher[]\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n (e: 'change', value: { url: string | null, prevUrl: string | null }): void\r\n}>()\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nuseAutoLink(editor, props.matchers, (url: string | null, prevUrl: string | null) => {\r\n emit('change', {\r\n url,\r\n prevUrl,\r\n })\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","useAutoLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAId,UAAM,OAAO;AAIb,UAAM,SAASA,mBAAAA;AAEfC,WAAA,YAAY,QAAQ,MAAM,UAAU,CAAC,KAAoB,YAA2B;AAClF,WAAK,UAAU;AAAA,QACb;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;;;;;;;"}
1
+ {"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -22,7 +22,7 @@ require("@lexical/markdown");
22
22
  require("../lexical-vue/composables/useCollaborationContext.js");
23
23
  require("../lexical-vue/components/LexicalMenu/shared.js");
24
24
  require("../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
25
- const index_vue_vue_type_script_setup_true_lang = require("../lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js");
25
+ const index_vue_vue_type_script_setup_true_lang = require("../lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js");
26
26
  require("../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
27
27
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
28
28
  __name: "AutoLinkPlugin",
@@ -74,21 +74,27 @@ const DocImageComponent = /* @__PURE__ */ vue.defineComponent({
74
74
  loading.value = true;
75
75
  return new Promise((resolve, reject) => {
76
76
  const image = new Image();
77
- image.onload = () => resolve(image.src);
77
+ const loadComplete = () => {
78
+ viewSrc.value = image.src;
79
+ attrs.src = src;
80
+ loadingText.value = "";
81
+ loading.value = false;
82
+ resolve(image.src);
83
+ };
84
+ image.onload = () => loadComplete();
78
85
  image.onerror = reject;
79
86
  image.src = src;
80
87
  if (image.complete) {
81
- resolve(image.src);
88
+ loadComplete();
82
89
  }
83
90
  });
84
91
  };
85
- vue.onMounted(() => {
92
+ vue.watch(() => attrs.src, (src) => {
86
93
  loadingText.value = "";
87
- if (props.attrs.src && props.attrs.src.indexOf("data:image/") == 0) {
94
+ if (src && src.indexOf("data:image/") == 0) {
88
95
  loadingText.value = "上传中...";
89
- const blob = utils.base64ToBlob(props.attrs.src);
90
- console.log(blob.type);
91
- webFileUpload.upload(new File([blob], `${utils.md5(Math.random().toString())}.png`, {
96
+ const blob = utils.base64ToBlob(src);
97
+ webFileUpload.upload(new File([blob], `${utils.md5(Math.random().toString())}.${blob.type.toString().replace("image/", "") || "png"}`, {
92
98
  type: blob.type
93
99
  })).then((result) => {
94
100
  if (result.data.code !== 200) {
@@ -97,50 +103,19 @@ const DocImageComponent = /* @__PURE__ */ vue.defineComponent({
97
103
  });
98
104
  return;
99
105
  }
100
- imageLoad(props.attrs.src).then((src) => {
101
- viewSrc.value = src;
102
- }).finally(() => {
103
- loading.value = false;
104
- });
106
+ imageLoad(result.data.data.path);
105
107
  });
108
+ } else if (src) {
109
+ imageLoad(src);
106
110
  } else {
107
- imageLoad(props.attrs.src).then((src) => {
108
- viewSrc.value = src;
109
- }).finally(() => {
110
- loading.value = false;
111
- });
111
+ loading.value = true;
112
+ loadingText.value = "无图片内容";
112
113
  }
114
+ }, {
115
+ immediate: true
113
116
  });
114
117
  useMounted.useMounted(() => {
115
118
  return utils$1.mergeRegister(
116
- // editor.registerCommand<ElementFormatType>(FORMAT_ELEMENT_COMMAND,(formatType) => {
117
- // if (isSelected.value) {
118
- // const selection = $getSelection()
119
- // if ($isNodeSelection(selection)) {
120
- // const node = $getNodeByKey(props.nodeKey)
121
- // if (node && $isImageNode(node)){
122
- // node.setFormat(formatType)
123
- // }
124
- // }
125
- // else if ($isRangeSelection(selection)) {
126
- // const nodes = selection.getNodes()
127
- // for (const node of nodes) {
128
- // if ($isImageNode(node)) {
129
- // node.setFormat(formatType)
130
- // }
131
- // else {
132
- // const element = $getNearestBlockElementAncestorOrThrow(node)
133
- // element.setFormat(formatType)
134
- // }
135
- // }
136
- // }
137
- // setTimeout(()=>updateImageActiveBox(),10)
138
- // return true
139
- // }
140
- // return false
141
- // },
142
- // COMMAND_PRIORITY_LOW,
143
- // ),
144
119
  // 选中图
145
120
  editor.registerCommand(lexical.CLICK_COMMAND, (event) => {
146
121
  if (event.target === selfElRef.value) {
@@ -182,8 +157,13 @@ const DocImageComponent = /* @__PURE__ */ vue.defineComponent({
182
157
  (_a = node == null ? void 0 : node.getParent()) == null ? void 0 : _a.setFormat(payload.value);
183
158
  }
184
159
  } else if (payload.name == "edit") {
185
- ImageEditPanel.ShowImageEditPanel(attrs).then((data) => {
160
+ ImageEditPanel.ShowImageEditPanel({
161
+ ...attrs
162
+ }).then((data) => {
186
163
  Object.assign(attrs, data || {});
164
+ setTimeout(() => updateImageActiveBox(), 10);
165
+ }).catch((err) => {
166
+ console.log(err);
187
167
  });
188
168
  } else {
189
169
  attrs[payload.name] = payload.value;
@@ -1 +1 @@
1
- {"version":3,"file":"DocImageComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from 'lexical'\r\nimport { $getSelection,$isNodeSelection, CLICK_COMMAND,COMMAND_PRIORITY_LOW } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer,useLexicalNodeSelection,useMounted } from '../../lexical-vue'\r\nimport { defineComponent, ref,reactive,computed,onMounted } from 'vue'\r\nimport { Messager } from \"@maketribe/dm\";\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { REMOVE_IMAGE_COMMAND,ImageAttrData,IMAGE_ATTRS_CHANGE,ImageNode } from './index'\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\nimport ImageTools from './ImageTools.vue'\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,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\";\r\n\r\n/**\r\n * 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n name: 'DocImageComponent',\r\n props: ['format','baseClass','focusClass', 'nodeKey', 'attrs'],\r\n setup(props) {\r\n\r\n const editor = useLexicalComposer()\r\n const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey)\r\n const selfElRef = ref<any>(null);\r\n const imageActiveBoxStyle = reactive({ width:\"\", height:\"\", top:\"\", left:\"\" });\r\n const updateImageActiveBox = ()=>{\r\n let stageRect = selfElRef.value.parentElement.getBoundingClientRect();\r\n let rect = selfElRef.value.getBoundingClientRect();\r\n imageActiveBoxStyle.width = rect.width+ \"px\";\r\n imageActiveBoxStyle.height = rect.height+ \"px\";\r\n imageActiveBoxStyle.left = rect.x - stageRect.x + \"px\";\r\n imageActiveBoxStyle.top = \"0px\";\r\n }\r\n\r\n const styles = computed<string[]>(()=>{\r\n return Object.keys(attrs).filter(k=>attrs[k] && k != \"float\" && k!=\"margin\" && k!=\"src\" && k!=\"alt\").map(k=>{\r\n return k.replace(/([A-Z])/g,\"-$1\").toLowerCase()+\":\"+attrs[k]\r\n });\r\n })\r\n\r\n // 显示的图\r\n const viewSrc = ref<string>(ImageDefaultSrc)\r\n const loading = ref(true);\r\n const loadingText = ref(\"\");\r\n const attrs = reactive(props.attrs)\r\n const webFileUpload = new WebFileUpload();\r\n // 图片加载\r\n const imageLoad = (src:string)=>{\r\n // 加载文案\r\n loadingText.value = \"加载中...\";\r\n loading.value = true;\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n image.onload = ()=>resolve(image.src)\r\n image.onerror = reject\r\n image.src = src;\r\n if(image.complete){\r\n resolve(image.src);\r\n }\r\n })\r\n }\r\n\r\n onMounted(()=>{\r\n // 初始化\r\n loadingText.value = \"\";\r\n // 多半 base64\r\n if(props.attrs.src && props.attrs.src.indexOf(\"data:image/\") == 0){\r\n\r\n // 文件上传\r\n loadingText.value = \"上传中...\";\r\n\r\n // 开始上传\r\n const blob = base64ToBlob(props.attrs.src); \r\n\r\n console.log(blob.type);\r\n\r\n webFileUpload.upload(new File([blob], `${md5(Math.random().toString())}.png`, { type: blob.type })).then(result=>{\r\n\r\n if (result.data.code !== 200) {\r\n Messager.error({ message: result.data.msg });\r\n return;\r\n }\r\n\r\n // 加载一下\r\n imageLoad(props.attrs.src).then(src=>{\r\n viewSrc.value = src as string;\r\n }).finally(()=>{\r\n loading.value = false;\r\n });\r\n\r\n });\r\n\r\n \r\n }\r\n else{\r\n // 加载一下\r\n imageLoad(props.attrs.src).then(src=>{\r\n viewSrc.value = src as string;\r\n }).finally(()=>{\r\n loading.value = false;\r\n });\r\n }\r\n })\r\n\r\n useMounted(() => {\r\n return mergeRegister(\r\n // editor.registerCommand<ElementFormatType>(FORMAT_ELEMENT_COMMAND,(formatType) => {\r\n // if (isSelected.value) {\r\n\r\n // const selection = $getSelection()\r\n\r\n // if ($isNodeSelection(selection)) {\r\n\r\n // const node = $getNodeByKey(props.nodeKey)\r\n\r\n // if (node && $isImageNode(node)){ \r\n // node.setFormat(formatType) \r\n // }\r\n // }\r\n // else if ($isRangeSelection(selection)) {\r\n\r\n // const nodes = selection.getNodes()\r\n \r\n // for (const node of nodes) {\r\n // if ($isImageNode(node)) {\r\n // node.setFormat(formatType)\r\n // }\r\n // else {\r\n // const element = $getNearestBlockElementAncestorOrThrow(node)\r\n // element.setFormat(formatType)\r\n // }\r\n // }\r\n // }\r\n // setTimeout(()=>updateImageActiveBox(),10)\r\n // return true\r\n // }\r\n // return false\r\n // },\r\n // COMMAND_PRIORITY_LOW,\r\n // ),\r\n // 选中图\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n if (event.target === selfElRef.value) {\r\n\r\n event.preventDefault();\r\n\r\n if (!event.shiftKey){ clearSelection() }\r\n \r\n setSelected(true)\r\n updateImageActiveBox();\r\n \r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,{ \r\n el:selfElRef.value,\r\n component:ImageTools\r\n } as ComponentSelectEvent);\r\n return true\r\n }\r\n\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n return false\r\n },\r\n COMMAND_PRIORITY_LOW,\r\n ),\r\n // 删除\r\n editor.registerCommand(REMOVE_IMAGE_COMMAND, () => {\r\n \r\n const selection = $getSelection();\r\n \r\n if($isNodeSelection(selection)){\r\n \r\n selection.getNodes().forEach(node=>node.remove());\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n }\r\n return false;\r\n },COMMAND_PRIORITY_LOW),\r\n // 修改图片属性\r\n editor.registerCommand(IMAGE_ATTRS_CHANGE,(payload:ImageAttrData) => {\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.__key == props.nodeKey){\r\n\r\n // 对齐方式的改变\r\n if(payload.name == \"align\"){\r\n\r\n // 有浮动走浮动的逻辑\r\n if(attrs.float != null && attrs.float != \"\"){ attrs.float = payload.value }\r\n else{\r\n // 否则走文本对齐\r\n node?.getParent()?.setFormat(payload.value as ElementFormatType)\r\n }\r\n }\r\n else if(payload.name==\"edit\"){\r\n // 更新属性\r\n ShowImageEditPanel(attrs).then(data=>{\r\n Object.assign(attrs,data||{});\r\n });\r\n }\r\n else{\r\n // 单个其他属性的改变\r\n attrs[payload.name] = payload.value\r\n }\r\n }\r\n }\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW),\r\n editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n return () =>{\r\n return <div class={`${props.baseClass} ${isSelected.value ? props.focusClass : ''}`}\r\n style={`text-align: ${props.format};float:${ attrs.float };margin:${attrs.margin}`}>\r\n <img ref={el=>selfElRef.value=el} src={viewSrc.value} style={styles.value.join(\";\")} class={attrs.className} />\r\n {isSelected.value ? <div style={imageActiveBoxStyle} class=\"mk-doc-active-mark\"></div> : null}\r\n {loading.value ? <div class=\"mk-doc-loading-mark\">\r\n {loadingText.value}\r\n </div> : null}\r\n </div>\r\n }\r\n },\r\n})\r\n"],"names":["ImageDefaultSrc","defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","imageActiveBoxStyle","reactive","width","height","top","left","updateImageActiveBox","stageRect","value","parentElement","getBoundingClientRect","rect","x","styles","computed","Object","keys","attrs","filter","k","map","replace","toLowerCase","viewSrc","loading","loadingText","webFileUpload","WebFileUpload","imageLoad","src","Promise","resolve","reject","image","Image","onload","onerror","complete","onMounted","indexOf","blob","base64ToBlob","console","log","type","upload","File","md5","Math","random","toString","then","result","data","code","Messager","error","message","msg","finally","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","target","preventDefault","shiftKey","dispatchCommand","SELECTED_COMPONENT_COMMAND","el","component","ImageTools","COMMAND_PRIORITY_LOW","REMOVE_IMAGE_COMMAND","selection","$getSelection","$isNodeSelection","getNodes","forEach","node","remove","IMAGE_ATTRS_CHANGE","payload","__key","float","getParent","setFormat","ShowImageEditPanel","assign","setTimeout","DEVICE_VIEW_MODE","_createVNode","baseClass","focusClass","format","margin","join","className"],"mappings":"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"}
1
+ {"version":3,"file":"DocImageComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from 'lexical'\r\nimport { $getSelection,$isNodeSelection, CLICK_COMMAND,COMMAND_PRIORITY_LOW } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer,useLexicalNodeSelection,useMounted } from '../../lexical-vue'\r\nimport { defineComponent, ref,reactive,computed,onMounted,watch } from 'vue'\r\nimport { Messager } from \"@maketribe/dm\";\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { REMOVE_IMAGE_COMMAND,ImageAttrData,IMAGE_ATTRS_CHANGE,ImageNode } from './index'\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\nimport ImageTools from './ImageTools.vue'\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,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\";\r\n\r\n/**\r\n * 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n name: 'DocImageComponent',\r\n props: ['format','baseClass','focusClass', 'nodeKey', 'attrs'],\r\n setup(props) {\r\n\r\n const editor = useLexicalComposer()\r\n const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey)\r\n const selfElRef = ref<any>(null);\r\n const imageActiveBoxStyle = reactive({ width:\"\", height:\"\", top:\"\", left:\"\" });\r\n const updateImageActiveBox = ()=>{\r\n let stageRect = selfElRef.value.parentElement.getBoundingClientRect();\r\n let rect = selfElRef.value.getBoundingClientRect();\r\n imageActiveBoxStyle.width = rect.width+ \"px\";\r\n imageActiveBoxStyle.height = rect.height+ \"px\";\r\n imageActiveBoxStyle.left = rect.x - stageRect.x + \"px\";\r\n imageActiveBoxStyle.top = \"0px\";\r\n }\r\n\r\n const styles = computed<string[]>(()=>{\r\n return Object.keys(attrs).filter(k=>attrs[k] && k != \"float\" && k!=\"margin\" && k!=\"src\" && k!=\"alt\").map(k=>{\r\n return k.replace(/([A-Z])/g,\"-$1\").toLowerCase()+\":\"+attrs[k]\r\n });\r\n })\r\n\r\n // 显示的图\r\n const viewSrc = ref<string>(ImageDefaultSrc)\r\n const loading = ref(true);\r\n const loadingText = ref(\"\");\r\n const attrs = reactive(props.attrs)\r\n const webFileUpload = new WebFileUpload();\r\n // 图片加载\r\n const imageLoad = (src:string)=>{\r\n // 加载文案\r\n loadingText.value = \"加载中...\";\r\n loading.value = true;\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n const loadComplete = ()=>{\r\n viewSrc.value = image.src;\r\n attrs.src = src;\r\n loadingText.value = \"\";\r\n loading.value = false;\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 // .finally(()=>{\r\n // loading.value = false;\r\n // });\r\n }\r\n\r\n // 图片路径变更的时候\r\n watch(()=>attrs.src,(src:string)=>{\r\n // 初始化\r\n loadingText.value = \"\";\r\n // 多半 base64\r\n if(src && src.indexOf(\"data:image/\") == 0){\r\n\r\n // 文件上传 \r\n loadingText.value = \"上传中...\";\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 return;\r\n }\r\n // 加载一下\r\n imageLoad(result.data.data.path);\r\n });\r\n }\r\n else if(src){\r\n // 加载一下\r\n imageLoad(src);\r\n }\r\n else{\r\n // 文件上传\r\n loading.value = true;\r\n loadingText.value = \"无图片内容\";\r\n }\r\n },{ immediate:true })\r\n \r\n // 编辑器挂载的时候\r\n useMounted(() => {\r\n return mergeRegister(\r\n // 选中图\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n if (event.target === selfElRef.value) {\r\n\r\n event.preventDefault();\r\n\r\n if (!event.shiftKey){ clearSelection() }\r\n \r\n setSelected(true)\r\n updateImageActiveBox();\r\n \r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,{ \r\n el:selfElRef.value,\r\n component:ImageTools\r\n } as ComponentSelectEvent);\r\n return true\r\n }\r\n\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n return false\r\n },\r\n COMMAND_PRIORITY_LOW,\r\n ),\r\n // 删除\r\n editor.registerCommand(REMOVE_IMAGE_COMMAND, () => {\r\n \r\n const selection = $getSelection();\r\n \r\n if($isNodeSelection(selection)){\r\n \r\n selection.getNodes().forEach(node=>node.remove());\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n }\r\n return false;\r\n },COMMAND_PRIORITY_LOW),\r\n // 修改图片属性\r\n editor.registerCommand(IMAGE_ATTRS_CHANGE,(payload:ImageAttrData) => {\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.__key == props.nodeKey){\r\n\r\n // 对齐方式的改变\r\n if(payload.name == \"align\"){\r\n\r\n // 有浮动走浮动的逻辑\r\n if(attrs.float != null && attrs.float != \"\"){ attrs.float = payload.value }\r\n else{\r\n // 否则走文本对齐\r\n node?.getParent()?.setFormat(payload.value as ElementFormatType)\r\n }\r\n }\r\n // 属性编辑\r\n else if(payload.name == \"edit\"){\r\n // 更新属性\r\n ShowImageEditPanel({...attrs}).then((data:any)=>{\r\n Object.assign(attrs,data||{});\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n }).catch(err=>{\r\n console.log(err);\r\n });\r\n \r\n }\r\n else{\r\n // 单个其他属性的改变\r\n attrs[payload.name] = payload.value\r\n }\r\n }\r\n }\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW),\r\n editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n return () =>{\r\n return <div class={`${props.baseClass} ${isSelected.value ? props.focusClass : ''}`}\r\n style={`text-align: ${props.format};float:${ attrs.float };margin:${attrs.margin}`}>\r\n <img ref={el=>selfElRef.value=el} src={viewSrc.value} style={styles.value.join(\";\")} class={attrs.className} />\r\n {isSelected.value ? <div style={imageActiveBoxStyle} class=\"mk-doc-active-mark\"></div> : null}\r\n {loading.value ? <div class=\"mk-doc-loading-mark\">\r\n {loadingText.value}\r\n </div> : null}\r\n </div>\r\n }\r\n },\r\n})\r\n"],"names":["ImageDefaultSrc","defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","imageActiveBoxStyle","reactive","width","height","top","left","updateImageActiveBox","stageRect","value","parentElement","getBoundingClientRect","rect","x","styles","computed","Object","keys","attrs","filter","k","map","replace","toLowerCase","viewSrc","loading","loadingText","webFileUpload","WebFileUpload","imageLoad","src","Promise","resolve","reject","image","Image","loadComplete","onload","onerror","complete","watch","indexOf","blob","base64ToBlob","upload","File","md5","Math","random","toString","type","then","result","data","code","Messager","error","message","msg","path","immediate","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","target","preventDefault","shiftKey","dispatchCommand","SELECTED_COMPONENT_COMMAND","el","component","ImageTools","COMMAND_PRIORITY_LOW","REMOVE_IMAGE_COMMAND","selection","$getSelection","$isNodeSelection","getNodes","forEach","node","remove","IMAGE_ATTRS_CHANGE","payload","__key","float","getParent","setFormat","ShowImageEditPanel","assign","setTimeout","catch","err","console","log","DEVICE_VIEW_MODE","_createVNode","baseClass","focusClass","format","margin","join","className"],"mappings":"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"}
@@ -86,6 +86,9 @@ const ImageEditPanelComponent = /* @__PURE__ */ vue.defineComponent({
86
86
  return {
87
87
  ...attrs
88
88
  };
89
+ },
90
+ setSrc: (src) => {
91
+ attrs.src = src;
89
92
  }
90
93
  });
91
94
  return () => {
@@ -240,14 +243,14 @@ const ShowImageEditPanel = async (attrs) => {
240
243
  return (_a = imageEditPanelRef.value) == null ? void 0 : _a.getResult();
241
244
  });
242
245
  const toCropImageHandle = async () => {
246
+ var _a;
243
247
  if (editResult.value.src) {
244
248
  var result = await imageCropperApi.ImageCropper({
245
249
  src: editResult.value.src
246
250
  });
247
251
  if (result.data) {
248
- attrs.src = result.data;
252
+ (_a = imageEditPanelRef.value) == null ? void 0 : _a.setSrc(result.data);
249
253
  }
250
- selectState.value = "attrs";
251
254
  }
252
255
  };
253
256
  const handleCancelClick = () => {
@@ -256,7 +259,9 @@ const ShowImageEditPanel = async (attrs) => {
256
259
  };
257
260
  const handleConfirmClick = () => {
258
261
  dialogInstance.destroy();
259
- resolve(editResult.value);
262
+ resolve({
263
+ ...editResult.value
264
+ });
260
265
  };
261
266
  const dialogInstance = dm.Dialoger.customRender({
262
267
  title: "素材选择",
@@ -274,7 +279,7 @@ const ShowImageEditPanel = async (attrs) => {
274
279
  footer: () => {
275
280
  let nextBtns = [vue.createVNode(elementPlus.ElButton, {
276
281
  "type": "primary",
277
- "onClick": toCropImageHandle
282
+ "onClick": () => selectState.value = "attrs"
278
283
  }, {
279
284
  default: () => [vue.createTextVNode("下一步")]
280
285
  })];
@@ -284,6 +289,11 @@ const ShowImageEditPanel = async (attrs) => {
284
289
  "onClick": () => selectState.value = "select"
285
290
  }, {
286
291
  default: () => [vue.createTextVNode("重新选图")]
292
+ }), vue.createVNode(elementPlus.ElButton, {
293
+ "type": "primary",
294
+ "onClick": toCropImageHandle
295
+ }, {
296
+ default: () => [vue.createTextVNode("裁切图")]
287
297
  }), vue.createVNode(elementPlus.ElButton, {
288
298
  "type": "primary",
289
299
  "onClick": handleConfirmClick
@@ -1 +1 @@
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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"}
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({ \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 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 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 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={()=>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","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","setSrc","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":";;;;;;;;;;;;AAcA,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;AAKhC,MAAMC,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;AAAA,MAC3BC,IAAIC,GAAE;AACJP,cAAMI,SAAS,GAAGG,EAAEC,CAAC,IAAID,EAAEE,CAAC,IAAIF,EAAEG,CAAC,IAAIH,EAAEI,CAAC;AAAA,MAC3C;AAAA,MACDC,MAAK;AACH,YAAIC,OAAOb,MAAMI,OAAOU,MAAM,QAAQ;AACtC,YAAGD,KAAKE,UAAU,GAAE;AAClB,iBAAO;AAAA,YAACP,GAAEK,KAAK,CAAC;AAAA,YAAEJ,GAAEI,KAAK,CAAC;AAAA,YAAEH,GAAEG,KAAK,CAAC;AAAA,YAAEF,GAAEE,KAAK,CAAC;AAAA;QAChD,WACQA,KAAKE,UAAU,GAAE;AACvB,iBAAO;AAAA,YAACP,GAAEK,KAAK,CAAC;AAAA,YAAEJ,GAAEI,KAAK,CAAC;AAAA,YAAEH,GAAEG,KAAK,CAAC;AAAA,YAAEF,GAAEE,KAAK,CAAC;AAAA;QAChD,WACQA,KAAKE,UAAU,GAAE;AACvB,iBAAO;AAAA,YAACP,GAAEK,KAAK,CAAC;AAAA,YAAEJ,GAAEI,KAAK,CAAC;AAAA,YAAEH,GAAEG,KAAK,CAAC;AAAA,YAAEF,GAAEE,KAAK,CAAC;AAAA;QAChD,WACQA,KAAKE,UAAU,GAAE;AACvBF,iBAAO,CAAC,IAAG,IAAG,IAAG,EAAE;AAAA,QACrB;AACA,eAAO;AAAA,UAACL,GAAEK,KAAK,CAAC;AAAA,UAAEJ,GAAEI,KAAK,CAAC;AAAA,UAAEH,GAAEG,KAAK,CAAC;AAAA,UAAEF,GAAEE,KAAK,CAAC;AAAA;MAChD;AAAA,IACF,CAAC;AAGDX,kBAAcc,qBAAqBC,GAAG,MAAI;;AACxC,UAAIC,KAAKhB,cAAciB,aAAc,EAAC,CAAC;AACvC,UAAGD,IAAG;AACJlB,cAAMoB,OAAMlB,mBAAcmB,UAAUC,KAAKC,UAAMA,KAAKL,MAAMA,EAAE,MAAhDhB,mBAAmDsB;AAAAA,MACjE,OACI;AACFxB,cAAMoB,MAAM;AAAA,MACd;AAAA,IACF,CAAC;AAGD,UAAMK,cAAc,YAAU;AAE5B,YAAMC,OAAO,MAAMC,iBAAW;AAAA,QAAEC,QAAO;AAAA,MAAS,CAAC;AAEjD,UAAIF,MAAM;AAER,cAAMG,aAAa,IAAIC;AACvBD,mBAAWE,SAAS,OAAOC,SAAW;AACpChC,gBAAMoB,MAAMY,KAAKC,OAAOC;AAAAA;AAG1BL,mBAAWM,cAAcT,IAAI;AAAA,MAC/B;AAAA;AAIF3B,WAAO;AAAA,MACLqC,WAAUA,MAAI;AAAE,eAAO;AAAA,UAAC,GAAGpC;AAAAA;MAAQ;AAAA,MACnCqC,QAAQjB,SAAa;AAAGpB,cAAMoB,MAAMA;AAAAA,MAAI;AAAA,IAC1C,CAAC;AAED,WAAO,MAAI;AAGT,YAAMkB,YAASC,IAAA,YAAAC,qBAAA;AAAA,QAAA,SAAA;AAAA,QAAA,OAAwFxC,MAAMoB;AAAAA,QAAG,OAAA;AAAA,SAAyB;AAAA,QACvIqB,OAAMA,MAAI;AACR,iBAAAF,IAAAA,YAAA,OAAA;AAAA,YAAA,SAAA;AAAA,aAAAA,CAAAA,IAAAA,YAAAG,YAAA,QAAA,MAAA;AAAA,YAAAC,SAAAA,MAAAJ,CAAAA,IAAA,YAAAK,MAAA,SAAA,MAAA,IAAA,CAAA;AAAA,UAAA,CAAA,CAAA,CAAA;AAAA,QAUF;AAAA,MACF,CAAC;AAID,UAAIC,QAAKN,IAAA,YAAAO,oBAAA;AAAA,QAAA,SAAA;AAAA,MAAA,GAAA;AAAA,QAAAH,SAAAA,MAAAJ,CAAAA,IAAA,YAAAQ,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAJ,CAAAA,IAAA,YAAAS,sBAAA;AAAA,YAAA,QAEWC,MAAY;AAAA,YAAA,QAAA;AAAA,YAAA,SAAA;AAAA,YAAA,WAA8CxB;AAAAA,UAAW,GAAA;AAAA,YAAAkB,SAAAA,MAAA,CAAAO,oBAAA,QAAA,CAAA;AAAA,UAAA,CAAA,GAGpFZ,SAAS;AAAA,SAAAC,GAAAA,IAAA,YAAAQ,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAJ,CAAAA,IAAA,YAAAY,sBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,cAAA;AAAA,YAAA,iBAGiEjD;AAAAA,UAAa,GAAA,IAAA,CAAA;AAAA,SAAAqC,GAAAA,IAAA,YAAAQ,uBAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA;AAAA,UAAAJ,SAAAA,MAAAJ,CAAAA,IAAA,YAAAa,qBAAA;AAAA,YAAA,cAGtEpD,MAAMoB;AAAAA,YAAG,uBAAAiC,YAATrD,MAAMoB,MAAGiC;AAAAA,YAAA,eAAeC,MAAK;AAAA,YAAA,SAAA;AAAA,YAAA,eAAA;AAAA,UAAA,GAAA,IAAA,GAE9ChB,SAAS;AAAA,QAAA,CAAA,CAAA;AAAA,OAEL;AAET,UAAG9C,YAAY+D,SAAS,SAAQ;AAC9BV,gBAAKN,IAAA,YAAAiB,mBAAA;AAAA,UAAA,UAAkB;AAAA,QAAE,GAAA;AAAA,UAAAb,SAAAA,MAAAJ,CAAAA,IAAA,YAAAkB,mBAAA;AAAA,YAAA,QACV;AAAA,UAAE,GAAAxE,QACZqD,SAAS,IAATA,YAAS;AAAA,YAAAK,SAAAA,MAAA,CAATL,SAAS;AAAA,WAAAC,GAAAA,IAAA,YAAAkB,mBAAA;AAAA,YAAA,QAEC;AAAA,UAAE,GAAA;AAAA,YAAAd,SAAAA,MAAAJ,CAAAA,IAAA,YAAAmB,oBAAA;AAAA,cAAA,kBAAA;AAAA,cAAA,SACuB1D;AAAAA,YAAK,GAAA;AAAA,cAAA2C,SAAAA,MAAAJ,CAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAA,CAAAJ,gBAAAa,YAAAA,SAAAQ,IAAAA,WAAA;AAAA,kBAAA,cAEnB5D,MAAM6D;AAAAA,kBAAG,uBAAAR,YAATrD,MAAM6D,MAAGR;AAAAA,kBAAA,QAAA;AAAA,gBAAA,GAAA;AAAA,kBAAwBS,MAAK;AAAA,gBAAC,GAAA;AAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,eAAAvB,GAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAAJ,CAAAA,IAAA,YAAAa,qBAAA;AAAA,kBAAA,cAIvCpD,MAAM+D;AAAAA,kBAAK,uBAAAV,YAAXrD,MAAM+D,QAAKV;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAd,GAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAAJ,CAAAA,IAAA,YAAAa,qBAAA;AAAA,kBAAA,cAIXpD,MAAMgE;AAAAA,kBAAM,uBAAAX,YAAZrD,MAAMgE,SAAMX;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAd,GAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAAJ,CAAAA,IAAA,YAAAa,qBAAA;AAAA,kBAAA,cAIZpD,MAAMiE;AAAAA,kBAAQ,uBAAAZ,YAAdrD,MAAMiE,WAAQZ;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAd,GAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAAJ,CAAAA,IAAA,YAAAa,qBAAA;AAAA,kBAAA,cAIdpD,MAAMkE;AAAAA,kBAAS,uBAAAb,YAAfrD,MAAMkE,YAASb;AAAAA,kBAAA,SAAA;AAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA;AAAA,eAAAd,GAAAA,IAAA,YAAAoB,wBAAA;AAAA,gBAAA,SAAA;AAAA,cAAA,GAAA;AAAA,gBAAAhB,SAAAA,MAAA,CAAAJ,IAAA,YAAA,OAAA;AAAA,kBAAA,SAAA;AAAA,gBAAA,GAAA,CAAAA,IAAAA,YAAAW,OAAAA,MAAAA,CAAAA,IAAAA,gBAAAX,IAAAA,GAAAA,IAAA,YAAAa,qBAAA;AAAA,kBAAA,cAOXhD,OAAOmD,MAAM/C;AAAAA,kBAAC,uBAAA6C,YAAdjD,OAAOmD,MAAM/C,IAAC6C;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAd,IAAAA,YAAAW,OAAAA,MAAAA,CAAAA,oBAAAX,IAAAA,GAAAA,IAAAA,YAAAa,YAAAA,SAAA;AAAA,kBAAA,cAKdhD,OAAOmD,MAAM9C;AAAAA,kBAAC,uBAAA4C,YAAdjD,OAAOmD,MAAM9C,IAAC4C;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAd,IAAAA,YAAAW,OAAAA,MAAAA,CAAAA,oBAAAX,IAAAA,GAAAA,IAAAA,YAAAa,YAAAA,SAAA;AAAA,kBAAA,cAMdhD,OAAOmD,MAAM7C;AAAAA,kBAAC,uBAAA2C,YAAdjD,OAAOmD,MAAM7C,IAAC2C;AAAAA,kBAAA,eAAA;AAAA,gBAAA,GAAA,IAAA,CAAA,CAAA,GAAAd,IAAAA,YAAAW,OAAAA,MAAAA,CAAAA,oBAAAX,IAAAA,GAAAA,IAAAA,YAAAa,YAAAA,SAAA;AAAA,kBAAA,cAMdhD,OAAOmD,MAAM5C;AAAAA,kBAAC,uBAAA0C,YAAdjD,OAAOmD,MAAM5C,IAAC0C;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,SAOpC;AAAA,MACV;AAEA,aAAOR;AAAAA;EAEX;AACF,CAAC;AAOYsB,MAAAA,qBAAqB,OAAQnE,UAAc;AACtD,SAAO,IAAIoE,QAAQ,CAACC,SAAQC,WAAW;AAGrC9E,gBAAY+D,QAAQvD,MAAMoB,MAAM,UAAQ;AAExC,UAAMmD,oBAAoB9E,QAAS,IAAI;AACvC,UAAM+E,aAAanE,IAAAA,SAAc,MAAA;;AAAIkE,qCAAkBhB,UAAlBgB,mBAAyBnC;AAAAA,KAAW;AAGzE,UAAMqC,oBAAoB,YAAU;;AAElC,UAAGD,WAAWjB,MAAMnC,KAAI;AACtB,YAAIc,SAAS,MAAMwC,6BAAa;AAAA,UAAEtD,KAAKoD,WAAWjB,MAAMnC;AAAAA,QAAG,CAAC;AAC5D,YAAGc,OAAOF,MAAK;AACbuC,kCAAkBhB,UAAlBgB,mBAAyBlC,OAAOH,OAAOF;AAAAA,QACzC;AAAA,MACF;AAAA;AAKF,UAAM2C,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AACtBP;;AAIF,UAAMQ,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBR,cAAQ;AAAA,QAAC,GAAGG,WAAWjB;AAAAA,MAAK,CAAC;AAAA;AAG/B,UAAMqB,iBAAiBG,GAAQ,SAACC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPnB,OAAO;AAAA,MACPoB,SAASA,MAAM;AACbP,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDO,MAAMA,MAAM;AACV,eAAOC,IAAAA,EAAE3F,yBAAwB;AAAA,UAACM;AAAAA,UAAMP,KAAIgB,OAAG8D,kBAAkBhB,QAAQ9C;AAAAA,QAAC,CAAC;AAAA,MAC5E;AAAA,MACD6E,QAAQA,MAAM;AAGZ,YAAIC,WAAW,CAAAhD,IAAA,YAAAS,sBAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACqBwC,MAAIhG,YAAY+D,QAAQ;AAAA,QAAO,GAAA;AAAA,UAAAZ,SAAAA,MAAA,CAAAO,oBAAA,KAAA,CAAA;AAAA,QAGlE,CAAA,CAAA;AAED,YAAG1D,YAAY+D,SAAS,SAAQ;AAC9BgC,qBAAW,CAAAhD,IAAA,YAAAS,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WACyBwC,MAAIhG,YAAY+D,QAAM;AAAA,UAAQ,GAAA;AAAA,YAAAZ,SAAAA,MAAA,CAAAO,oBAAA,MAAA,CAAA;AAAA,WAAAX,GAAAA,IAAA,YAAAS,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WAG9ByB;AAAAA,UAAiB,GAAA;AAAA,YAAA9B,SAAAA,MAAA,CAAAO,oBAAA,KAAA,CAAA;AAAA,WAAAX,GAAAA,IAAA,YAAAS,sBAAA;AAAA,YAAA,QAAA;AAAA,YAAA,WAGjB8B;AAAAA,UAAkB,GAAA;AAAA,YAAAnC,SAAAA,MAAA,CAAAO,oBAAA,IAAA,CAAA;AAAA,UAGrD,CAAA,CAAA;AAAA,QACH;AAEA,eAAAX,IAAA,YAAAkD,IAAA,UAAAlD,MAAAA,CAAAA,IAAAA,YAAAS,YAAAA,UAAA;AAAA,UAAA,WAEuB2B;AAAAA,QAAiB,GAAA;AAAA,UAAAhC,SAAAA,MAAA,CAAAO,oBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,GAAA,GAChCqC,QAAQ,CAAA;AAAA,MAGlB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;;"}
@@ -73,7 +73,6 @@ class ImageNode extends LexicalDecoratorBlockNode.DecoratorBlockNode {
73
73
  conversion: (domNode) => {
74
74
  const src = domNode.getAttribute("src");
75
75
  const alt = domNode.getAttribute("alt");
76
- console.log(domNode.style.width);
77
76
  return domNode.tagName.toLowerCase() == "img" && src != null ? {
78
77
  node: $createImageNode({
79
78
  src,
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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 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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"}
@@ -54,6 +54,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
54
54
  maxWidth: "100%",
55
55
  maxHeight: "",
56
56
  margin: ""
57
+ }).then((data) => {
58
+ editor.dispatchCommand(index.INSERT_IMAGE_COMMAND, data);
57
59
  });
58
60
  },
59
61
  sort: 11
@@ -1 +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);\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","mergeRegister","INSERT_IMAGE_COMMAND","$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,mBAAAA;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;AAAA,QACjB;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BC,4BAAqB,CAAC,YAAY;AAC1CC,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,gBAAgBN,4BAAsB;AAAA,kBAC3C,KAAI;AAAA,kBACJ,KAAI,KAAK;AAAA,kBACT,UAAS;AAAA,gBAAA,CACI;AAAA,cACjB;AAAA,YACF;AAAA,UAAA;AAGK,iBAAA;AAAA,WACPO,4BAAoB;AAAA,MAAA;AAGZC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}
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,mBAAAA;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;;;;;;;"}
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
39
39
  text: "图文",
40
40
  action: async () => {
41
41
  editor.dispatchCommand(index.INSERT_IMAGETEXT_COMMAND, {
42
- src: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&amp;h=479&amp;m=6&amp;x=142&amp;y=148&amp;s=131&amp;d=131",
42
+ src: "",
43
43
  float: "left",
44
44
  width: "200px",
45
45
  margin: "0 10px 10px 0"
@@ -1 +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:\"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&amp;h=479&amp;m=6&amp;x=142&amp;y=148&amp;s=131&amp;d=131\",\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,mBAAAA;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;;;;;;;"}
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,mBAAAA;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;;;;;;;"}
@@ -19,7 +19,6 @@ const Table = /* @__PURE__ */ vue.defineComponent({
19
19
  const dataTableContext = vue.inject(token.DATA_TABLE_CONTEXT_KEY);
20
20
  const dataTableEl = vue.computed(() => (dataTableContext == null ? void 0 : dataTableContext.el) ?? null);
21
21
  const tableEl = vue.ref(null);
22
- window.tableEl = tableEl;
23
22
  const dataTable = vue.computed(() => props.dataTable ?? dataTableContext.dataTable);
24
23
  const rowKey = vue.computed(() => props.rowKey || vue.unref(dataTable).primaryKey);
25
24
  const list = vue.computed(() => props.getList(vue.unref(dataTable)));