@mnykj/wangeditoroptimize-for-vue 1.0.0

package/README.md

@@ -0,0 +1,18 @@
+# @mnykj/wangeditoroptimize-for-vue
+
+Vue3 组件封装，配合 [`@mnykj/wangeditoroptimize`](https://www.npmjs.com/package/@mnykj/wangeditoroptimize) 使用。
+
+基于官方 `@wangeditor/editor-for-vue` fork，peer 依赖指向本组织编辑器包，避免与官方 `@wangeditor/*` 冲突。
+
+## 安装
+
+```bash
+npm install @mnykj/wangeditoroptimize @mnykj/wangeditoroptimize-for-vue --save
+```
+
+## 使用
+
+```ts
+import { Editor, Toolbar } from '@mnykj/wangeditoroptimize-for-vue'
+import '@mnykj/wangeditoroptimize/dist/css/style.css'
+```

package/dist/index.esm.js

@@ -0,0 +1,213 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, ref, shallowRef, onMounted, watch, toRaw, openBlock, createElementBlock, watchEffect } from "vue";
+import { createEditor, DomEditor, createToolbar } from "@mnykj/wangeditoroptimize";
+function genErrorInfo(fnName) {
+  let info = `\u8BF7\u4F7F\u7528 '@${fnName}' \u4E8B\u4EF6\uFF0C\u4E0D\u8981\u653E\u5728 props \u4E2D`;
+  info += `
+Please use '@${fnName}' event instead of props`;
+  return info;
+}
+var _export_sfc = (sfc, props) => {
+  for (const [key, val] of props) {
+    sfc[key] = val;
+  }
+  return sfc;
+};
+const _sfc_main$1 = defineComponent({
+  props: {
+    mode: {
+      type: String,
+      default: "default"
+    },
+    defaultContent: {
+      type: Array,
+      default: []
+    },
+    defaultHtml: {
+      type: String,
+      default: ""
+    },
+    defaultConfig: {
+      type: Object,
+      default: {}
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, context) {
+    const box = ref(null);
+    const editorRef = shallowRef(null);
+    const curValue = ref("");
+    const initEditor = () => {
+      if (!box.value)
+        return;
+      const defaultContent = toRaw(props.defaultContent);
+      createEditor({
+        selector: box.value,
+        mode: props.mode,
+        content: defaultContent || [],
+        html: props.defaultHtml || props.modelValue || "",
+        config: __spreadProps(__spreadValues({}, props.defaultConfig), {
+          onCreated(editor) {
+            editorRef.value = editor;
+            context.emit("onCreated", editor);
+            if (props.defaultConfig.onCreated) {
+              const info = genErrorInfo("onCreated");
+              throw new Error(info);
+            }
+          },
+          onChange(editor) {
+            const editorHtml = editor.getHtml();
+            curValue.value = editorHtml;
+            context.emit("update:modelValue", editorHtml);
+            context.emit("onChange", editor);
+            if (props.defaultConfig.onChange) {
+              const info = genErrorInfo("onChange");
+              throw new Error(info);
+            }
+          },
+          onDestroyed(editor) {
+            context.emit("onDestroyed", editor);
+            if (props.defaultConfig.onDestroyed) {
+              const info = genErrorInfo("onDestroyed");
+              throw new Error(info);
+            }
+          },
+          onMaxLength(editor) {
+            context.emit("onMaxLength", editor);
+            if (props.defaultConfig.onMaxLength) {
+              const info = genErrorInfo("onMaxLength");
+              throw new Error(info);
+            }
+          },
+          onFocus(editor) {
+            context.emit("onFocus", editor);
+            if (props.defaultConfig.onFocus) {
+              const info = genErrorInfo("onFocus");
+              throw new Error(info);
+            }
+          },
+          onBlur(editor) {
+            context.emit("onBlur", editor);
+            if (props.defaultConfig.onBlur) {
+              const info = genErrorInfo("onBlur");
+              throw new Error(info);
+            }
+          },
+          customAlert(info, type) {
+            context.emit("customAlert", info, type);
+            if (props.defaultConfig.customAlert) {
+              const info2 = genErrorInfo("customAlert");
+              throw new Error(info2);
+            }
+          },
+          customPaste: (editor, event) => {
+            if (props.defaultConfig.customPaste) {
+              const info = genErrorInfo("customPaste");
+              throw new Error(info);
+            }
+            let res;
+            context.emit("customPaste", editor, event, (val) => {
+              res = val;
+            });
+            return res;
+          }
+        })
+      });
+    };
+    function setHtml(newHtml) {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      editor.setHtml(newHtml);
+    }
+    onMounted(() => {
+      initEditor();
+    });
+    watch(() => props.modelValue, (newVal) => {
+      if (newVal === curValue.value)
+        return;
+      setHtml(newVal);
+    });
+    return {
+      box
+    };
+  }
+});
+const _hoisted_1$1 = {
+  ref: "box",
+  style: { "height": "100%" }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, null, 512);
+}
+var Editor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = defineComponent({
+  props: {
+    editor: {
+      type: Object
+    },
+    mode: {
+      type: String,
+      default: "default"
+    },
+    defaultConfig: {
+      type: Object,
+      default: {}
+    }
+  },
+  setup(props) {
+    const selector = ref(null);
+    const create = (editor) => {
+      if (!selector.value)
+        return;
+      if (editor == null) {
+        throw new Error("Not found instance of Editor when create <Toolbar/> component");
+      }
+      if (DomEditor.getToolbar(editor))
+        return;
+      createToolbar({
+        editor,
+        selector: selector.value || "<div></div>",
+        mode: props.mode,
+        config: props.defaultConfig
+      });
+    };
+    watchEffect(() => {
+      const { editor } = props;
+      if (editor == null)
+        return;
+      create(editor);
+    });
+    return {
+      selector
+    };
+  }
+});
+const _hoisted_1 = { ref: "selector" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, null, 512);
+}
+var Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Editor, Toolbar };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/utils/create-info.ts","../plugin-vue:export-helper","../src/components/Editor.vue","../src/components/Toolbar.vue"],"sourcesContent":["/**\n * @description 错误提示信息\n * @author liuqh\n */\nexport function genErrorInfo(fnName: string): string {\n  let info = `请使用 '@${fnName}' 事件，不要放在 props 中`\n  info += `\\nPlease use '@${fnName}' event instead of props`\n  return info\n}","\nexport default (sfc, props) => {\n  for (const [key, val] of props) {\n    sfc[key] = val\n  }\n  return sfc\n}\n","<template>\n  <div ref=\"box\" style=\"height: 100%\"></div>\n</template>\n\n<script lang=\"ts\">\nimport { onMounted, defineComponent, ref, PropType, toRaw, watch, shallowRef } from 'vue'\nimport { createEditor, IEditorConfig, SlateDescendant, IDomEditor } from '@mnykj/wangeditoroptimize'\nimport { genErrorInfo } from '../utils/create-info'\n\nexport default defineComponent({\n  props: {\n    /** 编辑器模式 */\n    mode: {\n      type: String,\n      default: 'default',\n    },\n    /** 编辑器默认内容 */\n    defaultContent: {\n      type: Array as PropType<SlateDescendant[]>,\n      default: [],\n    },\n    defaultHtml: {\n      type: String,\n      default: '',\n    },\n    /** 编辑器默认配置 */\n    defaultConfig: {\n      type: Object as PropType<Partial<IEditorConfig>>,\n      default: {},\n    },\n    /* 自定义 v-model */\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, context) {\n    const box = ref(null) // 编辑器容器\n\n    const editorRef = shallowRef<null | IDomEditor>(null) // editor 实例，必须用 shallowRef\n\n    const curValue = ref('') // 记录 editor 当前 html 内容\n\n    /**\n     * 初始化编辑器\n     */\n    const initEditor = () => {\n      if (!box.value) return\n      // 获取原始数据，解除响应式特性\n      const defaultContent = toRaw(props.defaultContent)\n\n      createEditor({\n        selector: box.value! as Element,\n        mode: props.mode,\n        content: defaultContent || [],\n        html: props.defaultHtml || props.modelValue || '',\n        config: {\n          ...props.defaultConfig,\n          onCreated(editor) {\n            editorRef.value = editor // 记录 editor 实例\n\n            context.emit('onCreated', editor)\n\n            if (props.defaultConfig.onCreated) {\n              const info = genErrorInfo('onCreated')\n              throw new Error(info)\n            }\n          },\n          onChange(editor) {\n            const editorHtml = editor.getHtml()\n            curValue.value = editorHtml // 记录当前内容\n            context.emit('update:modelValue', editorHtml) // 触发 v-model 值变化\n\n            context.emit('onChange', editor)\n            if (props.defaultConfig.onChange) {\n              const info = genErrorInfo('onChange')\n              throw new Error(info)\n            }\n          },\n          onDestroyed(editor) {\n            context.emit('onDestroyed', editor)\n            if (props.defaultConfig.onDestroyed) {\n              const info = genErrorInfo('onDestroyed')\n              throw new Error(info)\n            }\n          },\n          onMaxLength(editor) {\n            context.emit('onMaxLength', editor)\n            if (props.defaultConfig.onMaxLength) {\n              const info = genErrorInfo('onMaxLength')\n              throw new Error(info)\n            }\n          },\n          onFocus(editor) {\n            context.emit('onFocus', editor)\n            if (props.defaultConfig.onFocus) {\n              const info = genErrorInfo('onFocus')\n              throw new Error(info)\n            }\n          },\n          onBlur(editor) {\n            context.emit('onBlur', editor)\n            if (props.defaultConfig.onBlur) {\n              const info = genErrorInfo('onBlur')\n              throw new Error(info)\n            }\n          },\n          customAlert(info, type) {\n            context.emit('customAlert', info, type)\n            // @ts-ignore\n            if (props.defaultConfig.customAlert) {\n              const info = genErrorInfo('customAlert')\n              throw new Error(info)\n            }\n          },\n          customPaste: (editor, event): any => {\n            if (props.defaultConfig.customPaste) {\n              const info = genErrorInfo('customPaste')\n              throw new Error(info)\n            }\n            let res\n            context.emit('customPaste', editor, event, (val: boolean) => {\n              res = val\n            })\n            return res\n          },\n        },\n      })\n    }\n\n    /**\n     * 设置 HTML\n     * @param newHtml new html\n     */\n    function setHtml(newHtml: string) {\n      const editor = editorRef.value\n      if (editor == null) return\n      editor.setHtml(newHtml)\n    }\n\n    /**\n     * 元素挂在后初始化编辑器\n     */\n    onMounted(() => {\n      initEditor()\n    })\n\n    // 监听 v-model 值变化\n    watch(\n      () => props.modelValue,\n      newVal => {\n        if (newVal === curValue.value) return // 和当前内容一样，则忽略\n\n        // 重新设置 HTML\n        setHtml(newVal)\n      }\n    )\n\n    return {\n      box,\n    }\n  },\n})\n</script>\n","<template>\n  <div ref=\"selector\"></div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, watchEffect, PropType } from 'vue'\nimport { createToolbar, IToolbarConfig, IDomEditor, DomEditor } from '@mnykj/wangeditoroptimize'\n\nexport default defineComponent({\n  props: {\n    // editor 实例\n    editor: {\n      type: Object as PropType<IDomEditor>\n    },\n    /** 编辑器模式 */\n    mode: {\n      type: String,\n      default: 'default',\n    },\n    /** 编辑器默认配置 */\n    defaultConfig: {\n      type: Object as PropType<Partial<IToolbarConfig>>,\n      default: {},\n    },\n  },\n  setup(props) {\n    // toolbar 容器\n    const selector = ref(null)\n\n    /**\n     * 初始化 toolbar\n     */\n    const create = (editor: IDomEditor) => {\n      if (!selector.value) return\n      if (editor == null) {\n        throw new Error('Not found instance of Editor when create <Toolbar/> component')\n      }\n      if (DomEditor.getToolbar(editor)) return // 不重复创建\n\n      createToolbar({\n        editor,\n        selector: (selector.value! as Element) || '<div></div>',\n        mode: props.mode,\n        config: props.defaultConfig,\n      })\n    }\n\n    watchEffect( () => {\n      const { editor } = props\n      if (editor == null) return\n      create(editor) // 初始化 toolbar\n    })\n\n    return {\n      selector,\n    }\n  },\n})\n</script>\n"],"names":["_sfc_main","_hoisted_1"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,3 @@
+var M=Object.defineProperty,H=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var E=(o,e,f)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:f}):o[e]=f,w=(o,e)=>{for(var f in e||(e={}))S.call(e,f)&&E(o,f,e[f]);if(C)for(var f of C(e))V.call(e,f)&&E(o,f,e[f]);return o},_=(o,e)=>H(o,P(e));(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@mnykj/wangeditoroptimize")):typeof define=="function"&&define.amd?define(["exports","vue","@mnykj/wangeditoroptimize"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.WangEditorForVue={},o.Vue,o.editor))})(this,function(o,e,f){"use strict";function a(t){let n=`\u8BF7\u4F7F\u7528 '@${t}' \u4E8B\u4EF6\uFF0C\u4E0D\u8981\u653E\u5728 props \u4E2D`;return n+=`
+Please use '@${t}' event instead of props`,n}var h=(t,n)=>{for(const[l,i]of n)t[l]=i;return t};const y=e.defineComponent({props:{mode:{type:String,default:"default"},defaultContent:{type:Array,default:[]},defaultHtml:{type:String,default:""},defaultConfig:{type:Object,default:{}},modelValue:{type:String,default:""}},setup(t,n){const l=e.ref(null),i=e.shallowRef(null),s=e.ref(""),m=()=>{if(!l.value)return;const d=e.toRaw(t.defaultContent);f.createEditor({selector:l.value,mode:t.mode,content:d||[],html:t.defaultHtml||t.modelValue||"",config:_(w({},t.defaultConfig),{onCreated(r){if(i.value=r,n.emit("onCreated",r),t.defaultConfig.onCreated){const u=a("onCreated");throw new Error(u)}},onChange(r){const u=r.getHtml();if(s.value=u,n.emit("update:modelValue",u),n.emit("onChange",r),t.defaultConfig.onChange){const c=a("onChange");throw new Error(c)}},onDestroyed(r){if(n.emit("onDestroyed",r),t.defaultConfig.onDestroyed){const u=a("onDestroyed");throw new Error(u)}},onMaxLength(r){if(n.emit("onMaxLength",r),t.defaultConfig.onMaxLength){const u=a("onMaxLength");throw new Error(u)}},onFocus(r){if(n.emit("onFocus",r),t.defaultConfig.onFocus){const u=a("onFocus");throw new Error(u)}},onBlur(r){if(n.emit("onBlur",r),t.defaultConfig.onBlur){const u=a("onBlur");throw new Error(u)}},customAlert(r,u){if(n.emit("customAlert",r,u),t.defaultConfig.customAlert){const c=a("customAlert");throw new Error(c)}},customPaste:(r,u)=>{if(t.defaultConfig.customPaste){const g=a("customPaste");throw new Error(g)}let c;return n.emit("customPaste",r,u,g=>{c=g}),c}})})};function D(d){const r=i.value;r!=null&&r.setHtml(d)}return e.onMounted(()=>{m()}),e.watch(()=>t.modelValue,d=>{d!==s.value&&D(d)}),{box:l}}}),b={ref:"box",style:{height:"100%"}};function F(t,n,l,i,s,m){return e.openBlock(),e.createElementBlock("div",b,null,512)}var $=h(y,[["render",F]]);const B=e.defineComponent({props:{editor:{type:Object},mode:{type:String,default:"default"},defaultConfig:{type:Object,default:{}}},setup(t){const n=e.ref(null),l=i=>{if(!!n.value){if(i==null)throw new Error("Not found instance of Editor when create <Toolbar/> component");f.DomEditor.getToolbar(i)||f.createToolbar({editor:i,selector:n.value||"<div></div>",mode:t.mode,config:t.defaultConfig})}};return e.watchEffect(()=>{const{editor:i}=t;i!=null&&l(i)}),{selector:n}}}),p={ref:"selector"};function T(t,n,l,i,s,m){return e.openBlock(),e.createElementBlock("div",p,null,512)}var v=h(B,[["render",T]]);o.Editor=$,o.Toolbar=v,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils/create-info.ts","../plugin-vue:export-helper","../src/components/Editor.vue","../src/components/Toolbar.vue"],"sourcesContent":["/**\n * @description 错误提示信息\n * @author liuqh\n */\nexport function genErrorInfo(fnName: string): string {\n  let info = `请使用 '@${fnName}' 事件，不要放在 props 中`\n  info += `\\nPlease use '@${fnName}' event instead of props`\n  return info\n}","\nexport default (sfc, props) => {\n  for (const [key, val] of props) {\n    sfc[key] = val\n  }\n  return sfc\n}\n","<template>\n  <div ref=\"box\" style=\"height: 100%\"></div>\n</template>\n\n<script lang=\"ts\">\nimport { onMounted, defineComponent, ref, PropType, toRaw, watch, shallowRef } from 'vue'\nimport { createEditor, IEditorConfig, SlateDescendant, IDomEditor } from '@mnykj/wangeditoroptimize'\nimport { genErrorInfo } from '../utils/create-info'\n\nexport default defineComponent({\n  props: {\n    /** 编辑器模式 */\n    mode: {\n      type: String,\n      default: 'default',\n    },\n    /** 编辑器默认内容 */\n    defaultContent: {\n      type: Array as PropType<SlateDescendant[]>,\n      default: [],\n    },\n    defaultHtml: {\n      type: String,\n      default: '',\n    },\n    /** 编辑器默认配置 */\n    defaultConfig: {\n      type: Object as PropType<Partial<IEditorConfig>>,\n      default: {},\n    },\n    /* 自定义 v-model */\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, context) {\n    const box = ref(null) // 编辑器容器\n\n    const editorRef = shallowRef<null | IDomEditor>(null) // editor 实例，必须用 shallowRef\n\n    const curValue = ref('') // 记录 editor 当前 html 内容\n\n    /**\n     * 初始化编辑器\n     */\n    const initEditor = () => {\n      if (!box.value) return\n      // 获取原始数据，解除响应式特性\n      const defaultContent = toRaw(props.defaultContent)\n\n      createEditor({\n        selector: box.value! as Element,\n        mode: props.mode,\n        content: defaultContent || [],\n        html: props.defaultHtml || props.modelValue || '',\n        config: {\n          ...props.defaultConfig,\n          onCreated(editor) {\n            editorRef.value = editor // 记录 editor 实例\n\n            context.emit('onCreated', editor)\n\n            if (props.defaultConfig.onCreated) {\n              const info = genErrorInfo('onCreated')\n              throw new Error(info)\n            }\n          },\n          onChange(editor) {\n            const editorHtml = editor.getHtml()\n            curValue.value = editorHtml // 记录当前内容\n            context.emit('update:modelValue', editorHtml) // 触发 v-model 值变化\n\n            context.emit('onChange', editor)\n            if (props.defaultConfig.onChange) {\n              const info = genErrorInfo('onChange')\n              throw new Error(info)\n            }\n          },\n          onDestroyed(editor) {\n            context.emit('onDestroyed', editor)\n            if (props.defaultConfig.onDestroyed) {\n              const info = genErrorInfo('onDestroyed')\n              throw new Error(info)\n            }\n          },\n          onMaxLength(editor) {\n            context.emit('onMaxLength', editor)\n            if (props.defaultConfig.onMaxLength) {\n              const info = genErrorInfo('onMaxLength')\n              throw new Error(info)\n            }\n          },\n          onFocus(editor) {\n            context.emit('onFocus', editor)\n            if (props.defaultConfig.onFocus) {\n              const info = genErrorInfo('onFocus')\n              throw new Error(info)\n            }\n          },\n          onBlur(editor) {\n            context.emit('onBlur', editor)\n            if (props.defaultConfig.onBlur) {\n              const info = genErrorInfo('onBlur')\n              throw new Error(info)\n            }\n          },\n          customAlert(info, type) {\n            context.emit('customAlert', info, type)\n            // @ts-ignore\n            if (props.defaultConfig.customAlert) {\n              const info = genErrorInfo('customAlert')\n              throw new Error(info)\n            }\n          },\n          customPaste: (editor, event): any => {\n            if (props.defaultConfig.customPaste) {\n              const info = genErrorInfo('customPaste')\n              throw new Error(info)\n            }\n            let res\n            context.emit('customPaste', editor, event, (val: boolean) => {\n              res = val\n            })\n            return res\n          },\n        },\n      })\n    }\n\n    /**\n     * 设置 HTML\n     * @param newHtml new html\n     */\n    function setHtml(newHtml: string) {\n      const editor = editorRef.value\n      if (editor == null) return\n      editor.setHtml(newHtml)\n    }\n\n    /**\n     * 元素挂在后初始化编辑器\n     */\n    onMounted(() => {\n      initEditor()\n    })\n\n    // 监听 v-model 值变化\n    watch(\n      () => props.modelValue,\n      newVal => {\n        if (newVal === curValue.value) return // 和当前内容一样，则忽略\n\n        // 重新设置 HTML\n        setHtml(newVal)\n      }\n    )\n\n    return {\n      box,\n    }\n  },\n})\n</script>\n","<template>\n  <div ref=\"selector\"></div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, watchEffect, PropType } from 'vue'\nimport { createToolbar, IToolbarConfig, IDomEditor, DomEditor } from '@mnykj/wangeditoroptimize'\n\nexport default defineComponent({\n  props: {\n    // editor 实例\n    editor: {\n      type: Object as PropType<IDomEditor>\n    },\n    /** 编辑器模式 */\n    mode: {\n      type: String,\n      default: 'default',\n    },\n    /** 编辑器默认配置 */\n    defaultConfig: {\n      type: Object as PropType<Partial<IToolbarConfig>>,\n      default: {},\n    },\n  },\n  setup(props) {\n    // toolbar 容器\n    const selector = ref(null)\n\n    /**\n     * 初始化 toolbar\n     */\n    const create = (editor: IDomEditor) => {\n      if (!selector.value) return\n      if (editor == null) {\n        throw new Error('Not found instance of Editor when create <Toolbar/> component')\n      }\n      if (DomEditor.getToolbar(editor)) return // 不重复创建\n\n      createToolbar({\n        editor,\n        selector: (selector.value! as Element) || '<div></div>',\n        mode: props.mode,\n        config: props.defaultConfig,\n      })\n    }\n\n    watchEffect( () => {\n      const { editor } = props\n      if (editor == null) return\n      create(editor) // 初始化 toolbar\n    })\n\n    return {\n      selector,\n    }\n  },\n})\n</script>\n"],"names":["_sfc_main","defineComponent","ref","shallowRef","toRaw","_hoisted_1","editor","DomEditor"],"mappings":"6wBAI6B,EAAwB,IAC/C,GAAO,wBAAS,uEACZ;AAAA,eAAkB,4BACnB,QCNM,CAAC,EAAK,IAAU,CAC7B,SAAW,CAAC,EAAK,IAAQ,GACvB,EAAI,GAAO,EAEb,MAAO,ICIT,KAAKA,GAAaC,kBAAa,CAC7B,MAAO,CAEL,KAAM,CACJ,KAAM,OACN,QAAS,WAGX,eAAgB,CACd,KAAM,MACN,QAAS,IAEX,YAAa,CACX,KAAM,OACN,QAAS,IAGX,cAAe,CACb,KAAM,OACN,QAAS,IAGX,WAAY,CACV,KAAM,OACN,QAAS,KAGb,MAAM,EAAO,EAAS,MACd,GAAMC,MAAI,MAEV,EAAYC,aAA8B,MAE1C,EAAWD,MAAI,IAKf,EAAa,IAAM,IACnB,CAAC,EAAI,kBAEH,GAAiBE,QAAM,EAAM,+BAEtB,CACX,SAAU,EAAI,MACd,KAAM,EAAM,KACZ,QAAS,GAAkB,GAC3B,KAAM,EAAM,aAAe,EAAM,YAAc,GAC/C,OAAQ,OACH,EAAM,eADH,CAEN,UAAU,EAAQ,MACN,MAAQ,IAEV,KAAK,YAAa,GAEtB,EAAM,cAAc,UAAW,MAC3B,GAAO,EAAa,kBACpB,IAAI,OAAM,KAGpB,SAAS,EAAQ,MACT,GAAa,EAAO,eACjB,MAAQ,IACT,KAAK,oBAAqB,KAE1B,KAAK,WAAY,GACrB,EAAM,cAAc,SAAU,MAC1B,GAAO,EAAa,iBACpB,IAAI,OAAM,KAGpB,YAAY,EAAQ,MACV,KAAK,cAAe,GACxB,EAAM,cAAc,YAAa,MAC7B,GAAO,EAAa,oBACpB,IAAI,OAAM,KAGpB,YAAY,EAAQ,MACV,KAAK,cAAe,GACxB,EAAM,cAAc,YAAa,MAC7B,GAAO,EAAa,oBACpB,IAAI,OAAM,KAGpB,QAAQ,EAAQ,MACN,KAAK,UAAW,GACpB,EAAM,cAAc,QAAS,MACzB,GAAO,EAAa,gBACpB,IAAI,OAAM,KAGpB,OAAO,EAAQ,MACL,KAAK,SAAU,GACnB,EAAM,cAAc,OAAQ,MACxB,GAAO,EAAa,eACpB,IAAI,OAAM,KAGpB,YAAY,EAAM,EAAM,MACd,KAAK,cAAe,EAAM,GAE9B,EAAM,cAAc,YAAa,MAC7B,GAAO,EAAa,oBACpB,IAAI,OAAM,KAGpB,YAAa,CAAC,EAAQ,IAAe,IAC/B,EAAM,cAAc,YAAa,MAC7B,GAAO,EAAa,oBACpB,IAAI,OAAM,MAEd,YACI,KAAK,cAAe,EAAQ,EAAO,AAAC,GAAiB,GACrD,IAED,mBAUE,EAAiB,MAC1B,GAAS,EAAU,MACrB,GAAU,QACP,QAAQ,sBAMP,IAAM,eAMd,IAAM,EAAM,WACZ,GAAU,CACJ,IAAW,EAAS,SAGhB,KAIL,CACL,UA9JIC,EAAM,CAAC,IAAoB,0CAAnC,UAA0C,uFCM5C,KAAK,GAAaJ,kBAAa,CAC7B,MAAO,CAEL,OAAQ,CACN,KAAM,QAGR,KAAM,CACJ,KAAM,OACN,QAAS,WAGX,cAAe,CACb,KAAM,OACN,QAAS,KAGb,MAAM,EAAO,MAEL,GAAWC,MAAI,MAKf,EAAS,AAACI,GAAuB,IACjC,EAAC,EAAS,UACVA,GAAU,UACN,IAAI,OAAM,iEAEdC,YAAU,WAAWD,oBAEX,QACZA,EACA,SAAW,EAAS,OAAsB,cAC1C,KAAM,EAAM,KACZ,OAAQ,EAAM,uCAIL,IAAM,MACX,CAAE,UAAW,EACf,GAAU,QACP,KAGF,CACL,+CApDJ,UAA0B"}

package/dist/src/components/Editor.vue.d.ts

@@ -0,0 +1,48 @@
+import { PropType } from 'vue';
+import { IEditorConfig, SlateDescendant } from '@mnykj/wangeditoroptimize';
+declare const _default: import("vue").DefineComponent<{
+    /** 编辑器模式 */
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 编辑器默认内容 */
+    defaultContent: {
+        type: PropType<SlateDescendant[]>;
+        default: never[];
+    };
+    defaultHtml: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 编辑器默认配置 */
+    defaultConfig: {
+        type: PropType<Partial<IEditorConfig>>;
+        default: {};
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    box: import("vue").Ref<null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    mode?: unknown;
+    defaultContent?: unknown;
+    defaultHtml?: unknown;
+    defaultConfig?: unknown;
+    modelValue?: unknown;
+} & {
+    mode: string;
+    defaultContent: SlateDescendant[];
+    defaultHtml: string;
+    defaultConfig: Partial<IEditorConfig>;
+    modelValue: string;
+} & {}>, {
+    mode: string;
+    defaultContent: SlateDescendant[];
+    defaultHtml: string;
+    defaultConfig: Partial<IEditorConfig>;
+    modelValue: string;
+}>;
+export default _default;

package/dist/src/components/Toolbar.vue.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { IToolbarConfig, IDomEditor } from '@mnykj/wangeditoroptimize';
+declare const _default: import("vue").DefineComponent<{
+    editor: {
+        type: PropType<IDomEditor>;
+    };
+    /** 编辑器模式 */
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 编辑器默认配置 */
+    defaultConfig: {
+        type: PropType<Partial<IToolbarConfig>>;
+        default: {};
+    };
+}, {
+    selector: import("vue").Ref<null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    editor?: unknown;
+    mode?: unknown;
+    defaultConfig?: unknown;
+} & {
+    mode: string;
+    defaultConfig: Partial<IToolbarConfig>;
+} & {
+    editor?: IDomEditor | undefined;
+}>, {
+    mode: string;
+    defaultConfig: Partial<IToolbarConfig>;
+}>;
+export default _default;

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+import Editor from './components/Editor.vue';
+import Toolbar from './components/Toolbar.vue';
+export { Editor, Toolbar };

package/dist/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/dist/src/utils/create-info.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description 错误提示信息
+ * @author liuqh
+ */
+export declare function genErrorInfo(fnName: string): string;

package/dist/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@mnykj/wangeditoroptimize-for-vue",
+  "version": "1.0.0",
+  "description": "wangEditorOptimize Vue3 wrapper (fork of @wangeditor/editor-for-vue for @mnykj/wangeditoroptimize)",
+  "author": "mnykj",
+  "homepage": "https://www.npmjs.com/org/mnykj",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "license": "MIT",
+  "types": "dist/src/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "wangEditor",
+    "wangeditoroptimize",
+    "富文本编辑器",
+    "vue3",
+    "mnykj"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wangeditor-team/wangEditor-for-vue3.git"
+  },
+  "peerDependencies": {
+    "@mnykj/wangeditoroptimize": "^1.0.0",
+    "vue": "^3.0.5"
+  },
+  "dependencies": {},
+  "scripts": {
+    "build": "node -e \"console.log('prebuilt dist; no build step')\""
+  }
+}