vue-editify 0.1.20 → 0.1.21

package/examples/App.vue

@@ -1,10 +1,10 @@
 <template>
 	<div style="padding: 10px; height: 100%; box-sizing: border-box">
-		<Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." locale="zh_CN" :customTextPaste="customTextPaste"></Editify>
+		<Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." locale="zh_CN" :customTextPaste="customTextPaste" show-word-length></Editify>
 	</div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { h, ref } from 'vue'
 import { AlexElement, Editify, insertImage, insertVideo } from '../src/index'
 import { MenuConfigType } from '../src/index'
 const val = ref<string>('<p><br></p>')
@@ -12,14 +12,54 @@ const editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({
 	use: true,
 	mode: 'inner',
+	sequence: {
+		imgList: 101
+	},
 	image: {
-		accept: ['jpg'],
+		accept: ['png'],
 		handleError: (error, file) => {
 			console.log(error, file)
 		}
 	},
+	sourceView: {
+		show: true
+	},
 	fullScreen: {
 		show: true
+	},
+	extends: {
+		imgList: {
+			title: '自定义菜单按钮',
+			leftBorder: true,
+			rightBorder: false,
+			disabled: false,
+			active: false,
+			type: 'select',
+			options: [
+				{
+					label: '自定义功能1',
+					value: '1',
+					style: {
+						color: '#f30'
+					}
+				},
+				{
+					label: '自定义功能2',
+					value: '2',
+					style: {
+						fontWeight: 'bold'
+					}
+				},
+				{
+					label: '自定义功能3',
+					value: '3'
+				}
+			],
+			onOperate: function (name, val, instance) {
+				console.log(name, val, instance)
+			},
+			default: () => h('span', {}, '自定义菜单')
+		}
 	}
 })
 const customTextPaste = function (data: string) {

package/lib/core/tool.d.ts

@@ -1,5 +1,5 @@
 import { default as Button } from '../components/button/button.vue';
-import { Slot } from 'vue';
+import { VNode } from 'vue';
 import { InsertImageUploadErrorType } from '../components/insertImage/props';
 import { LocaleType } from '../locale';
 import { ButtonOptionsItemType, ButtonTypeType } from '../components/button/props';
@@ -52,7 +52,7 @@ export interface MenuTableButtonType extends MenuButtonType {
     maxColumns?: number;
 }
 export type MenuCustomButtonType = {
-    type: ButtonTypeType;
+    type?: ButtonTypeType;
     title?: string;
     leftBorder?: boolean;
     rightBorder?: boolean;
@@ -67,9 +67,9 @@ export type MenuCustomButtonType = {
     onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void;
     onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void;
     onOperate?: (name: string, value: string | number | undefined, btnInstance: InstanceType<typeof Button>) => void;
-    default?: Slot;
-    layer?: Slot;
-    option?: Slot;
+    default?: () => VNode;
+    layer?: () => VNode;
+    option?: () => VNode;
 };
 export type CodeBlockToolbarType = {
     languages?: MenuSelectButtonType;
@@ -103,36 +103,36 @@ export type ToolbarConfigType = {
     extraDisabled?: ((name: string) => boolean) | null;
 };
 export type MenuSequenceType = {
-    [key: string]: number;
-    undo: number;
-    redo: number;
-    heading: number;
-    indent: number;
-    quote: number;
-    align: number;
-    orderList: number;
-    unorderList: number;
-    task: number;
-    bold: number;
-    underline: number;
-    italic: number;
-    strikethrough: number;
-    code: number;
-    super: number;
-    sub: number;
-    formatClear: number;
-    fontSize: number;
-    fontFamily: number;
-    lineHeight: number;
-    foreColor: number;
-    backColor: number;
-    link: number;
-    image: number;
-    video: number;
-    table: number;
-    codeBlock: number;
-    sourceView: number;
-    fullScreen: number;
+    [key: string]: number | undefined;
+    undo?: number;
+    redo?: number;
+    heading?: number;
+    indent?: number;
+    quote?: number;
+    align?: number;
+    orderList?: number;
+    unorderList?: number;
+    task?: number;
+    bold?: number;
+    underline?: number;
+    italic?: number;
+    strikethrough?: number;
+    code?: number;
+    super?: number;
+    sub?: number;
+    formatClear?: number;
+    fontSize?: number;
+    fontFamily?: number;
+    lineHeight?: number;
+    foreColor?: number;
+    backColor?: number;
+    link?: number;
+    image?: number;
+    video?: number;
+    table?: number;
+    codeBlock?: number;
+    sourceView?: number;
+    fullScreen?: number;
 };
 export type MenuModeType = 'default' | 'inner' | 'fixed';
 export type MenuConfigType = {

package/lib/editify.es.js

@@ -20613,7 +20613,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               ref_key: "wrapRef",
               ref: wrapRef,
-              class: normalizeClass(["editify-layer-wrap", { border: _ctx.border }]),
+              class: normalizeClass(["editify-layer-wrap", { "editify-border": _ctx.border }]),
               style: normalizeStyle(wrapStyle.value)
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -20625,7 +20625,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Layer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-ac221d1e"]]);
+const Layer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-09578d83"]]);
 const TooltipProps = {
   //提示内容
   content: {
@@ -20668,7 +20668,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["editify-tooltip", { block: _ctx.block }])
+        class: normalizeClass(["editify-tooltip", { "editify-block": _ctx.block }])
       }, [
         createElementVNode("div", {
           ref_key: "targetRef",
@@ -20701,7 +20701,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8372de0b"]]);
+const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-7b5e30d1"]]);
 const IconProps = {
   //图标值
   value: {
@@ -20953,7 +20953,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("div", {
-          class: normalizeClass(["editify-button-wrap", { "right-border": _ctx.rightBorder, "left-border": _ctx.leftBorder }])
+          class: normalizeClass(["editify-button-wrap", { "editify-right-border": _ctx.rightBorder, "editify-left-border": _ctx.leftBorder }])
         }, [
           createVNode(Tooltip, {
             content: _ctx.title,
@@ -20964,7 +20964,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 ref_key: "btnRef",
                 ref: btnRef,
                 style: normalizeStyle(btnStyle.value),
-                class: normalizeClass(["editify-button-el", { disabled: _ctx.disabled, active: _ctx.active }]),
+                class: normalizeClass(["editify-button-el", { "editify-disabled": _ctx.disabled, "editify-active": _ctx.active }]),
                 onMouseenter: _cache[0] || (_cache[0] = ($event) => status.value = "hover"),
                 onMouseleave: _cache[1] || (_cache[1] = ($event) => status.value = null),
                 onMousedown: _cache[2] || (_cache[2] = ($event) => status.value = "down"),
@@ -20977,7 +20977,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 _ctx.type == "select" || _ctx.type == "display" ? (openBlock(), createBlock(Icon, {
                   key: 2,
                   value: "caret-down",
-                  class: normalizeClass(["editify-button-caret", { rotate: show.value }])
+                  class: normalizeClass(["editify-button-caret", { "editify-rotate": show.value }])
                 }, null, 8, ["class"])) : createCommentVNode("", true)
               ], 38)
             ]),
@@ -21010,7 +21010,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   (openBlock(true), createElementBlock(Fragment, null, renderList(cmpOptions.value, (item) => {
                     return openBlock(), createElementBlock("div", {
                       onClick: ($event) => select(item),
-                      class: normalizeClass(["editify-button-option", { active: _ctx.type == "display" ? item.value == parseDisplayConfig.value.value : false }]),
+                      class: normalizeClass(["editify-button-option", { "editify-active": _ctx.type == "display" ? item.value == parseDisplayConfig.value.value : false }]),
                       style: normalizeStyle(item.style || "")
                     }, [
                       _ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
@@ -21035,7 +21035,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-b31edeb8"]]);
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-3656b737"]]);
 const CheckboxProps = {
   //是否禁用
   disabled: {
@@ -21130,7 +21130,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(["editify-checkbox", { disabled: _ctx.disabled }])
+        class: normalizeClass(["editify-checkbox", { "editify-disabled": _ctx.disabled }])
       }, [
         _ctx.placement == "left" && _ctx.label ? (openBlock(), createElementBlock("span", {
           key: 0,
@@ -21146,7 +21146,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           type: "checkbox"
         }, null, 40, _hoisted_2$7),
         createElementVNode("span", {
-          class: normalizeClass(["editify-checkbox-item", { reverse: !_ctx.color, round: _ctx.round, checked: check.value && !_ctx.disabled }]),
+          class: normalizeClass(["editify-checkbox-item", { "editify-reverse": !_ctx.color, "editify-round": _ctx.round, "editify-checked": check.value && !_ctx.disabled }]),
           style: normalizeStyle(itemStyle.value)
         }, [
           createVNode(Icon, {
@@ -21164,7 +21164,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-09512b2d"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d99c609b"]]);
 const ColorsProps = {
   //颜色数组
   data: {
@@ -21217,7 +21217,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["editify-color", { active: _ctx.value == item.value }]),
+              class: normalizeClass(["editify-color", { "editify-active": _ctx.value == item.value }]),
               style: normalizeStyle({ borderColor: _ctx.value == item.value ? _ctx.color : "" })
             }, [
               createVNode(Tooltip, {
@@ -21241,7 +21241,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Colors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e09149c7"]]);
+const Colors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-514d2263"]]);
 const ToolbarProps = {
   //是否显示
   modelValue: {
@@ -23026,16 +23026,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$3, [
           createElementVNode("div", {
             onClick: _cache[0] || (_cache[0] = ($event) => current.value = "upload"),
-            class: normalizeClass(["editify-image-header-item", { active: current.value == "upload" }]),
+            class: normalizeClass(["editify-image-header-item", { "editify-active": current.value == "upload" }]),
             style: normalizeStyle(activeStyle.value("upload"))
           }, toDisplayString(unref($editTrans)("uploadImage")), 7),
           createElementVNode("div", {
             onClick: _cache[1] || (_cache[1] = ($event) => current.value = "remote"),
-            class: normalizeClass(["editify-image-header-item", { active: current.value == "remote" }]),
+            class: normalizeClass(["editify-image-header-item", { "editify-active": current.value == "remote" }]),
             style: normalizeStyle(activeStyle.value("remote"))
           }, toDisplayString(unref($editTrans)("remoteImage")), 7),
           createElementVNode("div", {
-            class: normalizeClass(["editify-image-header-slider", current.value]),
+            class: normalizeClass(["editify-image-header-slider", "editify-" + current.value]),
             style: normalizeStyle({ backgroundColor: _ctx.color || "" })
           }, null, 6)
         ]),
@@ -23072,7 +23072,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-20eec429"]]);
+const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-735f42e9"]]);
 const InsertVideoProps = {
   //主题色
   color: {
@@ -23224,16 +23224,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$2, [
           createElementVNode("div", {
             onClick: _cache[0] || (_cache[0] = ($event) => current.value = "upload"),
-            class: normalizeClass(["editify-video-header-item", { active: current.value == "upload" }]),
+            class: normalizeClass(["editify-video-header-item", { "editify-active": current.value == "upload" }]),
             style: normalizeStyle(activeStyle.value("upload"))
           }, toDisplayString(unref($editTrans)("uploadVideo")), 7),
           createElementVNode("div", {
             onClick: _cache[1] || (_cache[1] = ($event) => current.value = "remote"),
-            class: normalizeClass(["editify-video-header-item", { active: current.value == "remote" }]),
+            class: normalizeClass(["editify-video-header-item", { "editify-active": current.value == "remote" }]),
             style: normalizeStyle(activeStyle.value("remote"))
           }, toDisplayString(unref($editTrans)("remoteVideo")), 7),
           createElementVNode("div", {
-            class: normalizeClass(["editify-video-header-slider", current.value]),
+            class: normalizeClass(["editify-video-header-slider", "editify-" + current.value]),
             style: normalizeStyle({ backgroundColor: _ctx.color || "" })
           }, null, 6)
         ]),
@@ -23270,7 +23270,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d90909eb"]]);
+const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4d375427"]]);
 const InsertTableProps = {
   //主题色
   color: {
@@ -23288,7 +23288,7 @@ const InsertTableProps = {
     default: 10
   }
 };
-const _withScopeId = (n) => (pushScopeId("data-v-961451b7"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-9a40c4f5"), 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));
@@ -23364,7 +23364,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             return openBlock(), createElementBlock("tr", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(row, (column) => {
                 return openBlock(), createElementBlock("td", {
-                  class: normalizeClass({ inside: column.inside }),
+                  class: normalizeClass({ "editify-inside": column.inside }),
                   onMouseenter: ($event) => changeTableSize(column),
                   onClick: ($event) => createTable(column)
                 }, _hoisted_4$1, 42, _hoisted_2$1);
@@ -23379,7 +23379,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-961451b7"]]);
+const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9a40c4f5"]]);
 const MenuProps = {
   //菜单栏配置
   config: {
@@ -24707,7 +24707,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["editify-menu", { border: menuShowBorder.value, source: unref(isSourceView) && menuMode.value == "inner", fullscreen: unref(isFullScreen) }]),
+        class: normalizeClass(["editify-menu", { "editify-border": menuShowBorder.value, "editify-source": unref(isSourceView) && menuMode.value == "inner", "editify-fullscreen": unref(isFullScreen) }]),
         "data-editify-mode": menuMode.value,
         style: normalizeStyle(_ctx.config.style || "")
       }, [
@@ -24721,7 +24721,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-226bbacd"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-67392864"]]);
 const EditifyProps = {
   //国际化语言类型
   locale: {
@@ -25693,7 +25693,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["editify", { fullscreen: isFullScreen.value, autoheight: !isFullScreen.value && _ctx.autoheight }]),
+        class: normalizeClass(["editify", { "editify-fullscreen": isFullScreen.value, "editify-autoheight": !isFullScreen.value && _ctx.autoheight }]),
         ref_key: "elRef",
         ref: elRef
       }, [
@@ -25707,13 +25707,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "bodyRef",
           ref: bodyRef,
-          class: normalizeClass(["editify-body", { border: showBorder.value, menu_inner: menuConfig.value.use && menuConfig.value.mode == "inner" }]),
+          class: normalizeClass(["editify-body", { "editify-border": showBorder.value, "editify-menu_inner": menuConfig.value.use && menuConfig.value.mode == "inner" }]),
           "data-editify-uid": unref(instance).uid
         }, [
           createElementVNode("div", {
             ref_key: "contentRef",
             ref: contentRef,
-            class: normalizeClass(["editify-content", { placeholder: showPlaceholder.value, disabled: _ctx.disabled }]),
+            class: normalizeClass(["editify-content", { "editify-placeholder": showPlaceholder.value, "editify-disabled": _ctx.disabled }]),
             onKeydown: handleEditorKeydown,
             onClick: handleEditorClick,
             onCompositionstart: _cache[0] || (_cache[0] = ($event) => isInputChinese.value = true),
@@ -25724,7 +25724,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             value: value.value,
             readonly: "",
-            class: "editify-source"
+            class: "editify-sourceview"
           }, null, 8, _hoisted_3)) : createCommentVNode("", true),
           createVNode(Toolbar, {
             ref_key: "toolbarRef",
@@ -25739,7 +25739,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ], 10, _hoisted_1),
         _ctx.showWordLength ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass(["editify-footer", { fullscreen: isFullScreen.value && !isSourceView.value }]),
+          class: normalizeClass(["editify-footer", { "editify-fullscreen": isFullScreen.value && !isSourceView.value }]),
           ref_key: "footerRef",
           ref: footerRef
         }, [
@@ -25749,8 +25749,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c794ee6c"]]);
-const version = "0.1.20";
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f87ab8c"]]);
+const version = "0.1.21";
 const install = (app) => {
   app.component(Editify.name, Editify);
 };