vue-editify 0.0.20 → 0.0.22

package/examples/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div style="padding: 100px 50px 50px 50px">
-		<editify ref="editify" border height="600px" v-model="value" placeholder="Please Enter Text..." allow-paste-html show-word-length :menu="menuConfig"> </editify>
+		<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html border @change="change" :menu="menuConfig" ref="editify"></editify>
 	</div>
 </template>
 <script>
@@ -11,10 +11,13 @@ export default {
 		return {
 			value: '<p><span>这是一个基于 </span><span data-editify-code="true">Vue3 + alex-editor</span><span> 构建的一套</span><span style="font-weight: bold;">精美UI样式</span><span>的</span><span style="font-weight: bold;">开箱即用</span><span>的</span><span style="color: #ec1a0a;">富文本编辑器</span></p>',
 			menuConfig: {
-				mode: 'fixed',
 				sequence: {
 					alert: 100
 				},
+				table: {
+					maxRows: 20,
+					maxColumns: 20
+				},
 				extends: {
 					alert: {
 						title: '自定义菜单按钮',
@@ -60,7 +63,7 @@ export default {
 	},
 	methods: {
 		change() {
-			this.$refs.editify.isSourceView = !this.$refs.editify.isSourceView
+			console.log(this.$refs.editify.textValue)
 		},
 		operate(name, val) {
 			console.log('触发operate事件', name, val)

package/lib/editify.es.js

@@ -3296,7 +3296,7 @@ class AlexEditor {
           const data2 = await blob.text();
           if (data2) {
             if (typeof this.customTextPaste == "function") {
-              this.customTextPaste.apply(this, [data2]);
+              await this.customTextPaste.apply(this, [data2]);
             } else {
               this.insertText(data2);
               this.emit("pasteText", data2);
@@ -3309,7 +3309,7 @@ class AlexEditor {
               return !el.isEmpty();
             });
             if (typeof this.customHtmlPaste == "function") {
-              this.customHtmlPaste.apply(this, [elements, data2]);
+              await this.customHtmlPaste.apply(this, [elements, data2]);
             } else {
               for (let i2 = 0; i2 < elements.length; i2++) {
                 this.formatElement(elements[i2]);
@@ -3326,7 +3326,7 @@ class AlexEditor {
         if (blob.type.startsWith("image/")) {
           const url2 = await blobToBase64(blob);
           if (typeof this.customImagePaste == "function") {
-            this.customImagePaste.apply(this, [url2]);
+            await this.customImagePaste.apply(this, [url2]);
           } else {
             const image = new AlexElement(
               "closed",
@@ -3343,7 +3343,7 @@ class AlexEditor {
         } else if (blob.type.startsWith("video/")) {
           const url2 = await blobToBase64(blob);
           if (typeof this.customVideoPaste == "function") {
-            this.customVideoPaste.apply(this, [url2]);
+            await this.customVideoPaste.apply(this, [url2]);
           } else {
             const video = new AlexElement(
               "closed",
@@ -3361,7 +3361,7 @@ class AlexEditor {
           const data2 = await blob.text();
           if (data2) {
             if (typeof this.customTextPaste == "function") {
-              this.customTextPaste.apply(this, [data2]);
+              await this.customTextPaste.apply(this, [data2]);
             } else {
               this.insertText(data2);
               this.emit("pasteText", data2);
@@ -8282,6 +8282,43 @@ function plaintext(hljs2) {
     disableAutodetect: true
   };
 }
+function json(hljs2) {
+  const ATTRIBUTE = {
+    className: "attr",
+    begin: /"(\\.|[^\\"\r\n])*"(?=\s*:)/,
+    relevance: 1.01
+  };
+  const PUNCTUATION = {
+    match: /[{}[\],:]/,
+    className: "punctuation",
+    relevance: 0
+  };
+  const LITERALS2 = [
+    "true",
+    "false",
+    "null"
+  ];
+  const LITERALS_MODE = {
+    scope: "literal",
+    beginKeywords: LITERALS2.join(" ")
+  };
+  return {
+    name: "JSON",
+    keywords: {
+      literal: LITERALS2
+    },
+    contains: [
+      ATTRIBUTE,
+      PUNCTUATION,
+      hljs2.QUOTE_STRING_MODE,
+      LITERALS_MODE,
+      hljs2.C_NUMBER_MODE,
+      hljs2.C_LINE_COMMENT_MODE,
+      hljs2.C_BLOCK_COMMENT_MODE
+    ],
+    illegal: "\\S"
+  };
+}
 const IDENT_RE$1 = "[A-Za-z$_][0-9A-Za-z$_]*";
 const KEYWORDS$1 = [
   "as",
@@ -15168,6 +15205,7 @@ function python(hljs2) {
 }
 const hljs = "";
 HighlightJS.registerLanguage("plaintext", plaintext);
+HighlightJS.registerLanguage("json", json);
 HighlightJS.registerLanguage("javascript", javascript$1);
 HighlightJS.registerLanguage("java", java);
 HighlightJS.registerLanguage("typescript", typescript);
@@ -15196,7 +15234,7 @@ const getHljsHtml = function(code, language) {
   }
   return HighlightJS.highlightAuto(code).value;
 };
-const languages = ["plaintext", "javascript", "html", "css", "less", "scss", "java", "markdown", "swift", "objectivec", "typescript", "dart", "nginx", "php", "python"];
+const languages = ["plaintext", "json", "javascript", "html", "css", "less", "scss", "java", "markdown", "swift", "objectivec", "typescript", "dart", "nginx", "php", "python"];
 const pasteKeepData = {
   //粘贴html时元素保留的样式（全部元素）
   marks: {
@@ -15581,7 +15619,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h1"),
         value: "h1",
         style: {
-          fontSize: "22px",
+          fontSize: "26px",
           fontWeight: "bold"
         }
       },
@@ -15589,7 +15627,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h2"),
         value: "h2",
         style: {
-          fontSize: "20px",
+          fontSize: "24px",
           fontWeight: "bold"
         }
       },
@@ -15597,7 +15635,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h3"),
         value: "h3",
         style: {
-          fontSize: "18px",
+          fontSize: "22px",
           fontWeight: "bold"
         }
       },
@@ -15605,7 +15643,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h4"),
         value: "h4",
         style: {
-          fontSize: "16px",
+          fontSize: "20px",
           fontWeight: "bold"
         }
       },
@@ -15613,7 +15651,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h5"),
         value: "h5",
         style: {
-          fontSize: "15px",
+          fontSize: "18px",
           fontWeight: "bold"
         }
       },
@@ -15621,7 +15659,7 @@ const getButtonOptionsConfig = function(editTrans, editLocale) {
         label: editTrans("h6"),
         value: "h6",
         style: {
-          fontSize: "14px",
+          fontSize: "16px",
           fontWeight: "bold"
         }
       }
@@ -15806,7 +15844,7 @@ const getToolbarConfig = function(editTrans, editLocale) {
         //按钮默认显示的值
         defaultValue: "p",
         //浮层宽度
-        width: editLocale == "en_US" ? 140 : 120,
+        width: editLocale == "en_US" ? 150 : 130,
         //浮层最大高度
         maxHeight: "",
         //左侧边框是否显示
@@ -16012,7 +16050,7 @@ const getMenuConfig = function(editTrans, editLocale) {
     use: true,
     //是否使用工具提示
     tooltip: true,
-    //菜单栏显示模式，支持default/inner/fixed/custom
+    //菜单栏显示模式，支持default/inner/fixed
     mode: "default",
     //添加额外的按钮禁用判定，回调参数为name，this指向组件实例
     extraDisabled: null,
@@ -16076,7 +16114,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //按钮默认显示的值
       defaultValue: "p",
       //浮层宽度
-      width: editLocale == "en_US" ? 140 : 120,
+      width: editLocale == "en_US" ? 150 : 130,
       //浮层最大高度
       maxHeight: "",
       //左侧边框是否显示
@@ -16333,7 +16371,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       leftBorder: false,
       //右侧边框是否显示
       rightBorder: false,
-      //图片支持上传的类型，不区分大小写
+      //视频支持上传的类型，不区分大小写
       accept: ["mp4", "avi", "mpg", "wmv", "mov", "rm", "swf", "flv"],
       //是否多选视频
       multiple: false,
@@ -17474,8 +17512,8 @@ const _hoisted_4$6 = {
   key: 1,
   class: "editify-button-options"
 };
-const _hoisted_5$5 = ["onClick"];
-const _hoisted_6$5 = {
+const _hoisted_5$6 = ["onClick"];
+const _hoisted_6$6 = {
   key: 1,
   class: "editify-button-option-flex"
 };
@@ -17546,14 +17584,14 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                   _ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
                     key: 0,
                     item
-                  }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_6$5, [
+                  }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_6$6, [
                     item.icon ? (openBlock(), createBlock(_component_Icon, {
                       key: 0,
                       value: item.icon
                     }, null, 8, ["value"])) : createCommentVNode("", true),
                     createElementVNode("span", null, toDisplayString(item.label), 1)
                   ]))
-                ], 14, _hoisted_5$5);
+                ], 14, _hoisted_5$6);
               }), 256))
             ]))
           ], 4)
@@ -17777,7 +17815,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const Colors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-dc6d3d68"]]);
-const Toolbar_vue_vue_type_style_index_0_scoped_c318ca15_lang = "";
+const Toolbar_vue_vue_type_style_index_0_scoped_6b9cdbc6_lang = "";
 const _sfc_main$6 = {
   name: "Toolbar",
   emits: ["update:modelValue"],
@@ -18547,8 +18585,8 @@ const _hoisted_1$6 = {
 const _hoisted_2$5 = { class: "editify-toolbar-link-label" };
 const _hoisted_3$5 = ["placeholder"];
 const _hoisted_4$5 = { class: "editify-toolbar-link-footer" };
-const _hoisted_5$4 = { class: "editify-toolbar-link-operations" };
-const _hoisted_6$4 = ["href"];
+const _hoisted_5$5 = { class: "editify-toolbar-link-operations" };
+const _hoisted_6$5 = ["href"];
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkbox = resolveComponent("Checkbox");
   const _component_Button = resolveComponent("Button");
@@ -18597,7 +18635,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
               color: _ctx.$parent.color,
               size: 10
             }, null, 8, ["onChange", "modelValue", "label", "color"]),
-            createElementVNode("div", _hoisted_5$4, [
+            createElementVNode("div", _hoisted_5$5, [
               createElementVNode("span", {
                 onClick: _cache[5] || (_cache[5] = (...args) => _ctx.$parent.removeLink && _ctx.$parent.removeLink(...args))
               }, toDisplayString($options.$editTrans("removeLink")), 1),
@@ -18605,7 +18643,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 href: $data.linkConfig.url,
                 target: "_blank",
                 style: normalizeStyle({ color: _ctx.$parent.color })
-              }, toDisplayString($options.$editTrans("viewLink")), 13, _hoisted_6$4)
+              }, toDisplayString($options.$editTrans("viewLink")), 13, _hoisted_6$5)
             ])
           ])
         ])) : $props.type == "image" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -19248,7 +19286,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue", "node", "onShow", "useRange"]);
 }
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-c318ca15"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-6b9cdbc6"]]);
 const InsertLink_vue_vue_type_style_index_0_scoped_e6c3c2ee_lang = "";
 const _sfc_main$5 = {
   name: "InsertLink",
@@ -19308,8 +19346,8 @@ const _hoisted_1$5 = { class: "editify-link" };
 const _hoisted_2$4 = { class: "editify-link-label" };
 const _hoisted_3$4 = ["placeholder"];
 const _hoisted_4$4 = ["placeholder"];
-const _hoisted_5$3 = { class: "editify-link-footer" };
-const _hoisted_6$3 = { class: "editify-link-operations" };
+const _hoisted_5$4 = { class: "editify-link-footer" };
+const _hoisted_6$4 = { class: "editify-link-operations" };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkbox = resolveComponent("Checkbox");
   return openBlock(), createElementBlock("div", _hoisted_1$5, [
@@ -19342,7 +19380,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         { trim: true }
       ]
     ]),
-    createElementVNode("div", _hoisted_5$3, [
+    createElementVNode("div", _hoisted_5$4, [
       createVNode(_component_Checkbox, {
         modelValue: $data.newOpen,
         "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.newOpen = $event),
@@ -19350,7 +19388,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         color: $props.color,
         size: 10
       }, null, 8, ["modelValue", "label", "color"]),
-      createElementVNode("div", _hoisted_6$3, [
+      createElementVNode("div", _hoisted_6$4, [
         createElementVNode("span", {
           style: normalizeStyle({ color: $props.color }),
           onClick: _cache[7] || (_cache[7] = (...args) => $options.insertLink && $options.insertLink(...args))
@@ -19513,11 +19551,11 @@ const _hoisted_3$3 = {
   class: "editify-image-remote"
 };
 const _hoisted_4$3 = ["placeholder"];
-const _hoisted_5$2 = {
+const _hoisted_5$3 = {
   key: 1,
   class: "editify-image-upload"
 };
-const _hoisted_6$2 = ["multiple"];
+const _hoisted_6$3 = ["multiple"];
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Icon = resolveComponent("Icon");
   return openBlock(), createElementBlock("div", _hoisted_1$4, [
@@ -19559,14 +19597,14 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[5] || (_cache[5] = (...args) => $options.insertRemoteImage && $options.insertRemoteImage(...args))
         }, toDisplayString($options.$editTrans("insert")), 1)
       ], 4)
-    ])) : (openBlock(), createElementBlock("div", _hoisted_5$2, [
+    ])) : (openBlock(), createElementBlock("div", _hoisted_5$3, [
       createVNode(_component_Icon, { value: "upload" }),
       createElementVNode("input", {
         multiple: $props.multiple,
         accept: "image/*",
         onChange: _cache[6] || (_cache[6] = (...args) => $options.selectFile && $options.selectFile(...args)),
         type: "file"
-      }, null, 40, _hoisted_6$2)
+      }, null, 40, _hoisted_6$3)
     ]))
   ]);
 }
@@ -19724,11 +19762,11 @@ const _hoisted_3$2 = {
   class: "editify-video-remote"
 };
 const _hoisted_4$2 = ["placeholder"];
-const _hoisted_5$1 = {
+const _hoisted_5$2 = {
   key: 1,
   class: "editify-video-upload"
 };
-const _hoisted_6$1 = ["multiple"];
+const _hoisted_6$2 = ["multiple"];
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Icon = resolveComponent("Icon");
   return openBlock(), createElementBlock("div", _hoisted_1$3, [
@@ -19770,22 +19808,23 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[5] || (_cache[5] = (...args) => $options.insertRemoteVideo && $options.insertRemoteVideo(...args))
         }, toDisplayString($options.$editTrans("insert")), 1)
       ], 4)
-    ])) : (openBlock(), createElementBlock("div", _hoisted_5$1, [
+    ])) : (openBlock(), createElementBlock("div", _hoisted_5$2, [
       createVNode(_component_Icon, { value: "upload" }),
       createElementVNode("input", {
         multiple: $props.multiple,
         accept: "video/*",
         onChange: _cache[6] || (_cache[6] = (...args) => $options.selectFile && $options.selectFile(...args)),
         type: "file"
-      }, null, 40, _hoisted_6$1)
+      }, null, 40, _hoisted_6$2)
     ]))
   ]);
 }
 const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-cbc84525"]]);
-const InsertTable_vue_vue_type_style_index_0_scoped_0277a84c_lang = "";
+const InsertTable_vue_vue_type_style_index_0_scoped_cd5ad93c_lang = "";
 const _sfc_main$2 = {
   name: "InsertTable",
   emits: ["insert"],
+  inject: ["$editTrans"],
   props: {
     //主题色
     color: {
@@ -19808,6 +19847,25 @@ const _sfc_main$2 = {
       tableGrids: this.getTableGrids()
     };
   },
+  computed: {
+    //表格规格
+    specification() {
+      return this.tableGrids.flat().filter((item) => {
+        return item.inside;
+      }).sort((a, b) => {
+        if (a.x > b.x && a.y > b.y) {
+          return -1;
+        }
+        if (a.x > b.x) {
+          return -1;
+        }
+        if (a.y > b.y) {
+          return -1;
+        }
+        return 1;
+      })[0];
+    }
+  },
   methods: {
     //确认创立表格
     createTable(data2) {
@@ -19845,13 +19903,16 @@ const _sfc_main$2 = {
     }
   }
 };
-const _withScopeId = (n) => (pushScopeId("data-v-0277a84c"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-cd5ad93c"), n = n(), popScopeId(), n);
 const _hoisted_1$2 = { class: "editify-table" };
 const _hoisted_2$1 = ["onMouseenter", "onClick"];
 const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
 const _hoisted_4$1 = [
   _hoisted_3$1
 ];
+const _hoisted_5$1 = { class: "editify-table-footer" };
+const _hoisted_6$1 = { key: 0 };
+const _hoisted_7 = { key: 1 };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$2, [
     createElementVNode("table", null, [
@@ -19866,11 +19927,14 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           }), 256))
         ]);
       }), 256))
+    ]),
+    createElementVNode("div", _hoisted_5$1, [
+      $options.specification ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString($options.specification.x) + " x " + toDisplayString($options.specification.y), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString($options.$editTrans("insertTable")), 1))
     ])
   ]);
 }
-const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-0277a84c"]]);
-const Menu_vue_vue_type_style_index_0_scoped_4c7850ff_lang = "";
+const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-cd5ad93c"]]);
+const Menu_vue_vue_type_style_index_0_scoped_3fc2d533_lang = "";
 const _sfc_main$1 = {
   name: "Menu",
   props: {
@@ -20941,8 +21005,6 @@ const _sfc_main$1 = {
         if (!this.$parent.isSourceView) {
           this.$parent.editor.rangeRender();
         }
-      } else {
-        this.$parent.$emit("menu-operate", name, val);
       }
     },
     //处理光标更新
@@ -21090,8 +21152,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }), 256))
   ], 14, _hoisted_1$1);
 }
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-4c7850ff"]]);
-const Editify_vue_vue_type_style_index_0_scoped_bcab43d0_lang = "";
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-3fc2d533"]]);
+const Editify_vue_vue_type_style_index_0_scoped_e9c5b94e_lang = "";
 const _sfc_main = {
   name: "editify",
   props: { ...editorProps },
@@ -22242,7 +22304,7 @@ const _sfc_main = {
       this.editor.rangeRender();
     },
     //api：插入图片
-    insertImage(url2) {
+    insertImage(url2, isRender = true) {
       if (this.disabled) {
         return;
       }
@@ -22262,12 +22324,14 @@ const _sfc_main = {
         null
       );
       this.editor.insertElement(image);
-      this.editor.formatElementStack();
-      this.editor.domRender();
-      this.editor.rangeRender();
+      if (isRender) {
+        this.editor.formatElementStack();
+        this.editor.domRender();
+        this.editor.rangeRender();
+      }
     },
     //api：插入视频
-    insertVideo(url2) {
+    insertVideo(url2, isRender = true) {
       if (this.disabled) {
         return;
       }
@@ -22293,9 +22357,11 @@ const _sfc_main = {
       this.editor.addElementBefore(leftSpace, video);
       this.editor.range.anchor.moveToEnd(rightSpace);
       this.editor.range.focus.moveToEnd(rightSpace);
-      this.editor.formatElementStack();
-      this.editor.domRender();
-      this.editor.rangeRender();
+      if (isRender) {
+        this.editor.formatElementStack();
+        this.editor.domRender();
+        this.editor.rangeRender();
+      }
     },
     //api：选区是否含有代码块样式
     hasPreStyle() {
@@ -22684,7 +22750,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ]);
 }
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-bcab43d0"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e9c5b94e"]]);
 const iconfont = "";
 const en_US = {
   textWrapUp: "Up feed",
@@ -22863,7 +22929,7 @@ const i18n = (locale) => {
     return translations[locale][key];
   };
 };
-const version = "0.0.20";
+const version = "0.0.22";
 const install = (app, props) => {
   const locale = (props ? props.locale : "zh_CN") || "zh_CN";
   app.provide("$editTrans", i18n(locale));