@shenjipo/mention-vue2 2.7.0 → 2.8.0

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var $=Object.defineProperty;var y=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var h=(n,e,t)=>e in n?$(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,M=(n,e)=>{for(var t in e||(e={}))q.call(e,t)&&h(n,t,e[t]);if(y)for(var t of y(e))b.call(e,t)&&h(n,t,e[t]);return n};var C=(n,e,t)=>new Promise((l,u)=>{var s=o=>{try{d(t.next(o))}catch(a){u(a)}},r=o=>{try{d(t.throw(o))}catch(a){u(a)}},d=o=>o.done?l(o.value):Promise.resolve(o.value).then(s,r);d((t=t.apply(n,e)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("@shenjipo/mention-editor"),i=require("vue-demi"),v=require("@floating-ui/dom"),E=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},w=E(k);function m(n,e,t,l,u,s,r,d){var o=typeof n=="function"?n.options:n;e&&(o.render=e,o.staticRenderFns=t,o._compiled=!0),l&&(o.functional=!0),s&&(o._scopeId="data-v-"+s);var a;if(r?(a=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),u&&u.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(r)},o._ssrRegister=a):u&&(a=d?function(){u.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:u),a)if(o.functional){o._injectStyles=a;var f=o.render;o.render=function(g,p){return a.call(p),f(g,p)}}else{var _=o.beforeCreate;o.beforeCreate=_?[].concat(_,a):[a]}return{exports:n,options:o}}const R={name:"MEditorVue2",props:{value:{type:String,default:""},options:{type:Object,default:()=>({placeholder:"请输入内容，可粘贴图片到此处，按下/唤起快捷指令，",lineBreak:"enter"})}},emits:["input","fileReject","imageInput","deleteMention","enter"],setup(n,{emit:e,expose:t}){const l=i.ref(null),u=i.ref(null);i.provide("editor",l),i.onMounted(()=>{u.value&&(l.value=new w.default({element:u.value,content:n.value,placeholder:n.options.placeholder,onChange:r=>{e("input",r)},onFileInput:r=>{e("fileInput",r)},onMentionDelete(r){e("deleteMention",r)},lineBreak:n.options.lineBreak,onEnter:()=>{e("enter")}}))});const s=()=>{l.value.clear(),e("update:modelValue","")};return t({editor:l,clear:s}),{editor:l,editorRef:u,clear:s}}};var x=function(){var e=this,t=e._self._c;return t("div",{staticClass:"mention-editor-wrapper"},[e._t("header"),t("div",{ref:"editorRef",staticClass:"mention-editor"},[e.editor?e._t("default"):e._e()],2),e._t("footer")],2)},F=[],Q=m(R,x,F,!1,null,"c620f459",null,null);const S=Q.exports;const U={name:"SuggestionMenu",props:{items:{type:Array,required:!0},loadingState:{type:String,default:"idle"},selectedIndex:{type:Number,default:0}},methods:{handleItemClick(n){this.$emit("itemClick",n)}}};var D=function(){var e=this,t=e._self._c;return t("div",{staticClass:"bn-suggestion-menu"},[e.items.length?e._l(e.items,function(l,u){return t("div",{key:l.id,staticClass:"suggestion-menu-item",class:{active:u===e.selectedIndex},on:{mousedown:function(s){return s.preventDefault(),e.handleItemClick(l)}}},[e._v(" "+e._s(l.label)+" ")])}):t("div",{staticClass:"suggestion-menu-item disabled"},[e._v("无数据")])],2)},A=[],L=m(U,D,A,!1,null,"af9205e7",null,null);const N=L.exports;function V(n,e,t,l){const u=i.ref(0),s=r=>r.key==="ArrowUp"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value-1+t.value.length)%t.value.length),!0):r.key==="ArrowDown"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value+1)%t.value.length),!0):r.key==="Enter"&&!r.isComposing?(r.preventDefault(),t.value&&t.value.length&&l&&l(t.value[u.value]),!0):!1;return i.onMounted(()=>{n&&n.domElement&&n.domElement.addEventListener("keydown",s,!0)}),i.onBeforeUnmount(()=>{n&&n.domElement&&n.domElement.removeEventListener("keydown",s,!0)}),i.watch(()=>e,()=>{u.value=0}),u}function B(n,e,t,l=8){const u=i.ref(0);return i.watch([n,e],([s,r])=>{r!=null&&(s&&s.length>0?u.value=r.length:r.length-u.value>l&&t())}),{lastUsefulQueryLength:u}}const T={name:"SuggestionMenuWrapper",components:{SuggestionMenu:N},props:{query:{type:String,required:!0},getItems:{type:Function,required:!0},onItemClick:{type:Function},closeMenu:{type:Function,required:!0},clearQuery:{type:Function,required:!0},insertMention:{type:Function,required:!0}},setup(n){const e=i.ref([]),t=i.ref("idle"),l=i.ref(""),u=i.inject("editor"),s=o=>{n.closeMenu(),n.clearQuery(),n.insertMention(o)},r=V(u.value,n.query,e,s);B(e,l,n.closeMenu);const d=()=>{const o=n.query;l.value=n.query,t.value="loading",n.getItems(n.query).then(a=>{l.value===o&&(e.value=a,t.value="loaded")})};return i.onMounted(d),i.watch(()=>n.query,()=>{d()}),{items:e,loadingState:t,selectedIndex:r,onItemClickInternal:s}}};var W=function(){var e=this,t=e._self._c;return t("SuggestionMenu",{attrs:{items:e.items,"loading-state":e.loadingState,"selected-index":e.selectedIndex},on:{itemClick:e.onItemClickInternal}})},j=[],O=m(T,W,j,!1,null,"e4189e8f",null,null);const P=O.exports;function z(n,e,t,l={}){const u=i.ref(null),s=i.ref(null),r=i.ref({});let d=null;i.watch(e,c=>{c&&(u.value={getBoundingClientRect:()=>c},o())},{immediate:!0}),i.watch(n,c=>C(this,null,function*(){if(!c){f();return}yield i.nextTick(),!(!u.value||!s.value)&&(o(),a())}));const o=()=>{const c=u.value,g=s.value;!c||!g||v.computePosition(c,g,{placement:l.placement||"bottom-start",middleware:[v.offset(l.offset||8),v.flip(),v.shift({padding:8})]}).then(({x:p,y:I})=>{r.value={position:"absolute",left:`${p}px`,top:`${I}px`}})};function a(){!u.value||!s.value||(d=v.autoUpdate(u.value,s.value,o))}function f(){d&&(d(),d=null)}const _=i.computed(()=>M({display:"flex",zIndex:t},r.value));return{floatingRef:s,style:_}}const K={name:"SuggestionMenuController",components:{SuggestionMenuWrapper:P},props:{triggerCharacter:{type:String,required:!0},minQueryLength:{type:Number},getItems:{type:Function,required:!0},onItemClick:{type:Function}},setup(n){const e=i.inject("editor"),t=i.ref(null),l=i.computed(()=>{var _;const f=((_=t.value)==null?void 0:_.show)&&(!n.minQueryLength||t.value.ignoreQueryLength||!t.value.query.startsWith(" ")&&t.value.query.length>=n.minQueryLength);return f!=null?f:!1}),{floatingRef:u,style:s}=z(()=>l.value,()=>{var f;return((f=t.value)==null?void 0:f.referencePos)||null},2e3,{placement:"bottom-start",middleware:[v.offset(10),v.flip({mainAxis:!0,crossAxis:!1}),v.shift(),v.size({apply({availableHeight:f,elements:_}){Object.assign(_.floating.style,{maxHeight:`${f-10}px`})}})],onDismiss(){}});let r=null;return i.onMounted(()=>{r=e.value.suggestionMenus.onUpdate(n.triggerCharacter,f=>{t.value=f})}),i.onBeforeUnmount(()=>{r&&r()}),{state:t,floatingRef:u,style:s,showDom:l,closeMenu:()=>{e.value.suggestionMenus.closeMenu()},clearQuery:()=>{e.value.suggestionMenus.clearQuery()},insertMention:f=>{e.value.suggestionMenus.insertMention(f)}}}};var X=function(){var e=this,t=e._self._c;return e.showDom?t("div",{ref:"floatingRef",style:e.style},[t("SuggestionMenuWrapper",{attrs:{query:e.state.query,getItems:e.getItems,onItemClick:e.onItemClick,closeMenu:e.closeMenu,clearQuery:e.clearQuery,insertMention:e.insertMention}})],1):e._e()},H=[],G=m(K,X,H,!1,null,"f5b73a66",null,null);const J=G.exports;exports.MEditorVue2=S;exports.SuggestionMenuController=J;exports.default=S;
+"use strict";var $=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var h=(n,e,t)=>e in n?$(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,y=(n,e)=>{for(var t in e||(e={}))w.call(e,t)&&h(n,t,e[t]);if(m)for(var t of m(e))E.call(e,t)&&h(n,t,e[t]);return n};var M=(n,e,t)=>new Promise((f,r)=>{var c=o=>{try{d(t.next(o))}catch(i){r(i)}},l=o=>{try{d(t.throw(o))}catch(i){r(i)}},d=o=>o.done?f(o.value):Promise.resolve(o.value).then(c,l);d((t=t.apply(n,e)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@shenjipo/mention-editor"),s=require("vue-demi"),p=require("@floating-ui/dom"),U=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},q=U(S);function C(n,e,t,f,r,c,l,d){var o=typeof n=="function"?n.options:n;e&&(o.render=e,o.staticRenderFns=t,o._compiled=!0),f&&(o.functional=!0),c&&(o._scopeId="data-v-"+c);var i;if(l?(i=function(u){u=u||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!u&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(u=__VUE_SSR_CONTEXT__),r&&r.call(this,u),u&&u._registeredComponents&&u._registeredComponents.add(l)},o._ssrRegister=i):r&&(i=d?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),i)if(o.functional){o._injectStyles=i;var a=o.render;o.render=function(v,g){return i.call(g),a(v,g)}}else{var _=o.beforeCreate;o.beforeCreate=_?[].concat(_,i):[i]}return{exports:n,options:o}}const Q={name:"MEditorVue2",props:{value:{type:String,default:""},options:{type:Object,default:()=>({placeholder:"请输入内容，可粘贴图片到此处，按下/唤起快捷指令，",lineBreak:"enter"})}},emits:["input","fileReject","imageInput","deleteMention","enter"],setup(n,{emit:e,expose:t}){const f=s.ref(null),r=s.ref(null);s.provide("editor",f),s.onMounted(()=>{r.value&&(f.value=new q.default({element:r.value,content:n.value,placeholder:n.options.placeholder,onChange:l=>{e("input",l)},onFileInput:l=>{e("fileInput",l)},onMentionDelete(l){e("deleteMention",l)},lineBreak:n.options.lineBreak,onEnter:()=>{e("enter")}}))});const c=()=>{f.value.clear(),e("update:modelValue","")};return t({editor:f,clear:c}),{editor:f,editorRef:r,clear:c}}};var V=function(){var e=this,t=e._self._c;return t("div",{staticClass:"mention-editor-wrapper"},[e._t("header"),t("div",{ref:"editorRef",staticClass:"mention-editor"},[e.editor?e._t("default"):e._e()],2),e._t("footer")],2)},D=[],T=C(Q,V,D,!1,null,"c620f459",null,null);const b=T.exports;function k(n,e,t,f={}){const r=s.ref(null),c=s.ref(null),l=s.ref({});let d=null;s.watch(e,u=>{u&&(r.value={getBoundingClientRect:()=>u},o())},{immediate:!0}),s.watch(n,u=>M(this,null,function*(){if(!u){a();return}yield s.nextTick(),!(!r.value||!c.value)&&(o(),i())}));const o=()=>{const u=r.value,v=c.value;!u||!v||p.computePosition(u,v,{placement:f.placement||"bottom-start",middleware:[p.offset(f.offset||8),p.flip(),p.shift({padding:8})]}).then(({x:g,y:R})=>{l.value={position:"absolute",left:`${g}px`,top:`${R}px`}})};function i(){!r.value||!c.value||(d=p.autoUpdate(r.value,c.value,o))}function a(){d&&(d(),d=null)}const _=s.computed(()=>y({zIndex:t},l.value));return{floatingRef:c,style:_}}const A={name:"SuggestionMenuController",props:{triggerCharacter:{type:String,required:!0},minQueryLength:{type:Number}},setup(n){const e=s.inject("editor"),t=s.ref(null),f=s.computed(()=>{var _;const a=((_=t.value)==null?void 0:_.show)&&(!n.minQueryLength||t.value.ignoreQueryLength||!t.value.query.startsWith(" ")&&t.value.query.length>=n.minQueryLength);return a!=null?a:!1}),{floatingRef:r,style:c}=k(()=>f.value,()=>{var a;return((a=t.value)==null?void 0:a.referencePos)||null},2e3,{placement:"bottom-start",middleware:[p.offset(10),p.flip({mainAxis:!0,crossAxis:!1}),p.shift(),p.size({apply({availableHeight:a,elements:_}){Object.assign(_.floating.style,{maxHeight:`${a-10}px`})}})],onDismiss(){}});let l=null;s.onMounted(()=>{l=e.value.suggestionMenus.onUpdate(n.triggerCharacter,a=>{t.value=a})}),s.onBeforeUnmount(()=>{l&&l()});const d=()=>{e.value.suggestionMenus.closeMenu()},o=()=>{e.value.suggestionMenus.clearQuery()},i=a=>{e.value.suggestionMenus.insertMention(a)};return{floatingRef:r,style:c,showDom:f,editor:e.value,state:t,closeMenu:d,clearQuery:o,insertMention:i}}};var B=function(){var e=this,t=e._self._c;return e.showDom?t("div",{ref:"floatingRef",style:e.style},[e._t("default",null,{query:e.state.query,editor:e.editor,closeMenu:e.closeMenu,clearQuery:e.clearQuery,insertMention:e.insertMention})],2):e._e()},O=[],P=C(A,B,O,!1,null,"5eadb932",null,null);const j=P.exports;exports.MEditorVue2=b;exports.SuggestionMenuController=j;exports.default=b;

package/dist/index.css

@@ -1 +1 @@
-.mention-editor-wrapper{border:1px solid #d9d9d9;padding:8px 12px;transition:border-color .2s,box-shadow .2s;border-radius:6px}.mention-editor-wrapper:focus-within{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.mention-editor-wrapper .mention-editor{min-height:80px}.mention-editor-wrapper .mention-editor .tiptap{outline:none;max-height:200px;overflow:auto}.mention-editor-wrapper .mention-editor .tiptap p{margin:0}.mention-editor-wrapper .mention-editor .tiptap p.is-editor-empty:before{content:attr(data-placeholder);color:#aaa;float:left;height:0;pointer-events:none}.mention-editor-wrapper .mention-editor .tiptap .mention{padding:2px 6px;border-radius:8px;color:#4971f5;background-color:#ecf5ff;display:inline-block;margin-right:4px}.mention-editor-wrapper .mention-editor .bn-suggestion-menu{width:180px;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;overflow:hidden;font-size:14px;padding:4px}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item:hover{background-color:#f1f5f9}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item span{flex:1}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item.active{background-color:#f1f5f9}.mention-editor-wrapper .mention-editor .bn-suggestion-menu .suggestion-menu-item.disabled{background-color:unset;cursor:not-allowed}
+.mention-editor-wrapper{border:1px solid #d9d9d9;padding:8px 12px;transition:border-color .2s,box-shadow .2s;border-radius:6px}.mention-editor-wrapper:focus-within{border-color:#409eff;box-shadow:0 0 0 2px #409eff33}.mention-editor-wrapper .mention-editor{min-height:80px}.mention-editor-wrapper .mention-editor .tiptap{outline:none;max-height:200px;overflow:auto}.mention-editor-wrapper .mention-editor .tiptap p{margin:0}.mention-editor-wrapper .mention-editor .tiptap p.is-editor-empty:before{content:attr(data-placeholder);color:#aaa;float:left;height:0;pointer-events:none}.mention-editor-wrapper .mention-editor .tiptap .mention{padding:2px 6px;border-radius:8px;color:#4971f5;background-color:#ecf5ff;display:inline-block;margin-right:4px}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,wBAAwB,MAAM,0DAA0D,CAAA;AAG/F,OAAO,EACH,WAAW,EACX,wBAAwB,GAC3B,CAAA;AACD,eAAe,WAAW,CAAA;AAE1B,OAAO,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,wBAAwB,MAAM,0DAA0D,CAAA;AAI/F,OAAO,EACH,WAAW,EACX,wBAAwB,GAE3B,CAAA;AACD,eAAe,WAAW,CAAA;AAE1B,OAAO,qBAAqB,CAAA"}

package/dist/index.esm.js

@@ -1,63 +1,63 @@
-var x = Object.defineProperty;
-var h = Object.getOwnPropertySymbols;
-var w = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
-var M = (n, e, t) => e in n ? x(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, C = (n, e) => {
+var Q = Object.defineProperty;
+var g = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var m = (o, e, t) => e in o ? Q(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, h = (o, e) => {
   for (var t in e || (e = {}))
-    w.call(e, t) && M(n, t, e[t]);
-  if (h)
-    for (var t of h(e))
-      F.call(e, t) && M(n, t, e[t]);
-  return n;
+    S.call(e, t) && m(o, t, e[t]);
+  if (g)
+    for (var t of g(e))
+      V.call(e, t) && m(o, t, e[t]);
+  return o;
 };
-var I = (n, e, t) => new Promise((o, u) => {
-  var i = (l) => {
+var y = (o, e, t) => new Promise((s, r) => {
+  var c = (n) => {
     try {
-      d(t.next(l));
-    } catch (s) {
-      u(s);
+      f(t.next(n));
+    } catch (u) {
+      r(u);
     }
-  }, r = (l) => {
+  }, l = (n) => {
     try {
-      d(t.throw(l));
-    } catch (s) {
-      u(s);
+      f(t.throw(n));
+    } catch (u) {
+      r(u);
     }
-  }, d = (l) => l.done ? o(l.value) : Promise.resolve(l.value).then(i, r);
-  d((t = t.apply(n, e)).next());
+  }, f = (n) => n.done ? s(n.value) : Promise.resolve(n.value).then(c, l);
+  f((t = t.apply(o, e)).next());
 });
-import Q from "@shenjipo/mention-editor";
-import { ref as f, provide as U, onMounted as p, onBeforeUnmount as S, watch as v, inject as $, nextTick as D, computed as k } from "vue-demi";
-import { computePosition as A, offset as q, flip as b, shift as R, autoUpdate as L, size as N } from "@floating-ui/dom";
-function y(n, e, t, o, u, i, r, d) {
-  var l = typeof n == "function" ? n.options : n;
-  e && (l.render = e, l.staticRenderFns = t, l._compiled = !0), o && (l.functional = !0), i && (l._scopeId = "data-v-" + i);
-  var s;
-  if (r ? (s = function(a) {
-    a = a || // cached call
+import k from "@shenjipo/mention-editor";
+import { ref as _, provide as q, onMounted as C, watch as M, nextTick as A, computed as R, inject as B, onBeforeUnmount as T } from "vue-demi";
+import { computePosition as x, offset as $, flip as b, shift as w, autoUpdate as D, size as F } from "@floating-ui/dom";
+function E(o, e, t, s, r, c, l, f) {
+  var n = typeof o == "function" ? o.options : o;
+  e && (n.render = e, n.staticRenderFns = t, n._compiled = !0), s && (n.functional = !0), c && (n._scopeId = "data-v-" + c);
+  var u;
+  if (l ? (u = function(i) {
+    i = i || // cached call
     this.$vnode && this.$vnode.ssrContext || // stateful
-    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !a && typeof __VUE_SSR_CONTEXT__ != "undefined" && (a = __VUE_SSR_CONTEXT__), u && u.call(this, a), a && a._registeredComponents && a._registeredComponents.add(r);
-  }, l._ssrRegister = s) : u && (s = d ? function() {
-    u.call(
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !i && typeof __VUE_SSR_CONTEXT__ != "undefined" && (i = __VUE_SSR_CONTEXT__), r && r.call(this, i), i && i._registeredComponents && i._registeredComponents.add(l);
+  }, n._ssrRegister = u) : r && (u = f ? function() {
+    r.call(
       this,
-      (l.functional ? this.parent : this).$root.$options.shadowRoot
+      (n.functional ? this.parent : this).$root.$options.shadowRoot
     );
-  } : u), s)
-    if (l.functional) {
-      l._injectStyles = s;
-      var c = l.render;
-      l.render = function(g, m) {
-        return s.call(m), c(g, m);
+  } : r), u)
+    if (n.functional) {
+      n._injectStyles = u;
+      var a = n.render;
+      n.render = function(p, v) {
+        return u.call(v), a(p, v);
       };
     } else {
-      var _ = l.beforeCreate;
-      l.beforeCreate = _ ? [].concat(_, s) : [s];
+      var d = n.beforeCreate;
+      n.beforeCreate = d ? [].concat(d, u) : [u];
     }
   return {
-    exports: n,
-    options: l
+    exports: o,
+    options: n
   };
 }
-const V = {
+const I = {
   name: "MEditorVue2",
   props: {
     value: { type: String, default: "" },
@@ -70,249 +70,132 @@ const V = {
     }
   },
   emits: ["input", "fileReject", "imageInput", "deleteMention", "enter"],
-  setup(n, { emit: e, expose: t }) {
-    const o = f(null), u = f(null);
-    U("editor", o), p(() => {
-      u.value && (o.value = new Q({
-        element: u.value,
-        content: n.value,
-        placeholder: n.options.placeholder,
-        onChange: (r) => {
-          e("input", r);
+  setup(o, { emit: e, expose: t }) {
+    const s = _(null), r = _(null);
+    q("editor", s), C(() => {
+      r.value && (s.value = new k({
+        element: r.value,
+        content: o.value,
+        placeholder: o.options.placeholder,
+        onChange: (l) => {
+          e("input", l);
         },
-        onFileInput: (r) => {
-          e("fileInput", r);
+        onFileInput: (l) => {
+          e("fileInput", l);
         },
-        onMentionDelete(r) {
-          e("deleteMention", r);
+        onMentionDelete(l) {
+          e("deleteMention", l);
         },
-        lineBreak: n.options.lineBreak,
+        lineBreak: o.options.lineBreak,
         onEnter: () => {
           e("enter");
         }
       }));
     });
-    const i = () => {
-      o.value.clear(), e("update:modelValue", "");
+    const c = () => {
+      s.value.clear(), e("update:modelValue", "");
     };
-    return t({ editor: o, clear: i }), {
-      editor: o,
-      editorRef: u,
-      clear: i
+    return t({ editor: s, clear: c }), {
+      editor: s,
+      editorRef: r,
+      clear: c
     };
   }
 };
-var W = function() {
+var L = function() {
   var e = this, t = e._self._c;
   return t("div", { staticClass: "mention-editor-wrapper" }, [e._t("header"), t("div", { ref: "editorRef", staticClass: "mention-editor" }, [e.editor ? e._t("default") : e._e()], 2), e._t("footer")], 2);
-}, B = [], T = /* @__PURE__ */ y(
-  V,
-  W,
-  B,
-  !1,
-  null,
-  "c620f459",
-  null,
-  null
-);
-const ce = T.exports;
-const O = {
-  name: "SuggestionMenu",
-  props: {
-    items: { type: Array, required: !0 },
-    loadingState: { type: String, default: "idle" },
-    selectedIndex: { type: Number, default: 0 }
-  },
-  methods: {
-    handleItemClick(n) {
-      this.$emit("itemClick", n);
-    }
-  }
-};
-var P = function() {
-  var e = this, t = e._self._c;
-  return t("div", { staticClass: "bn-suggestion-menu" }, [e.items.length ? e._l(e.items, function(o, u) {
-    return t("div", { key: o.id, staticClass: "suggestion-menu-item", class: { active: u === e.selectedIndex }, on: { mousedown: function(i) {
-      return i.preventDefault(), e.handleItemClick(o);
-    } } }, [e._v(" " + e._s(o.label) + " ")]);
-  }) : t("div", { staticClass: "suggestion-menu-item disabled" }, [e._v("无数据")])], 2);
-}, j = [], z = /* @__PURE__ */ y(
+}, O = [], P = /* @__PURE__ */ E(
+  I,
+  L,
   O,
-  P,
-  j,
-  !1,
-  null,
-  "af9205e7",
-  null,
-  null
-);
-const K = z.exports;
-function X(n, e, t, o) {
-  const u = f(0), i = (r) => r.key === "ArrowUp" ? (r.preventDefault(), t.value && t.value.length && (u.value = (u.value - 1 + t.value.length) % t.value.length), !0) : r.key === "ArrowDown" ? (r.preventDefault(), t.value && t.value.length && (u.value = (u.value + 1) % t.value.length), !0) : r.key === "Enter" && !r.isComposing ? (r.preventDefault(), t.value && t.value.length && o && o(t.value[u.value]), !0) : !1;
-  return p(() => {
-    n && n.domElement && n.domElement.addEventListener("keydown", i, !0);
-  }), S(() => {
-    n && n.domElement && n.domElement.removeEventListener("keydown", i, !0);
-  }), v(
-    () => e,
-    () => {
-      u.value = 0;
-    }
-  ), u;
-}
-function H(n, e, t, o = 8) {
-  const u = f(0);
-  return v(
-    [n, e],
-    ([i, r]) => {
-      r != null && (i && i.length > 0 ? u.value = r.length : r.length - u.value > o && t());
-    }
-  ), {
-    lastUsefulQueryLength: u
-  };
-}
-const G = {
-  name: "SuggestionMenuWrapper",
-  components: {
-    SuggestionMenu: K
-  },
-  props: {
-    query: { type: String, required: !0 },
-    getItems: { type: Function, required: !0 },
-    onItemClick: { type: Function },
-    closeMenu: { type: Function, required: !0 },
-    clearQuery: { type: Function, required: !0 },
-    insertMention: { type: Function, required: !0 }
-  },
-  setup(n) {
-    const e = f([]), t = f("idle"), o = f(""), u = $("editor"), i = (l) => {
-      n.closeMenu(), n.clearQuery(), n.insertMention(l);
-    }, r = X(
-      u.value,
-      n.query,
-      e,
-      i
-    );
-    H(e, o, n.closeMenu);
-    const d = () => {
-      const l = n.query;
-      o.value = n.query, t.value = "loading", n.getItems(n.query).then((s) => {
-        o.value === l && (e.value = s, t.value = "loaded");
-      });
-    };
-    return p(d), v(
-      () => n.query,
-      () => {
-        d();
-      }
-    ), {
-      items: e,
-      loadingState: t,
-      selectedIndex: r,
-      onItemClickInternal: i
-    };
-  }
-};
-var J = function() {
-  var e = this, t = e._self._c;
-  return t("SuggestionMenu", { attrs: { items: e.items, "loading-state": e.loadingState, "selected-index": e.selectedIndex }, on: { itemClick: e.onItemClickInternal } });
-}, Y = [], Z = /* @__PURE__ */ y(
-  G,
-  J,
-  Y,
   !1,
   null,
-  "e4189e8f",
+  "c620f459",
   null,
   null
 );
-const ee = Z.exports;
-function te(n, e, t, o = {}) {
-  const u = f(null), i = f(null), r = f({});
-  let d = null;
-  v(
+const Y = P.exports;
+function N(o, e, t, s = {}) {
+  const r = _(null), c = _(null), l = _({});
+  let f = null;
+  M(
     e,
-    (a) => {
-      a && (u.value = {
-        getBoundingClientRect: () => a
-      }, l());
+    (i) => {
+      i && (r.value = {
+        getBoundingClientRect: () => i
+      }, n());
     },
     { immediate: !0 }
-  ), v(
-    n,
-    (a) => I(this, null, function* () {
-      if (!a) {
-        c();
+  ), M(
+    o,
+    (i) => y(this, null, function* () {
+      if (!i) {
+        a();
         return;
       }
-      yield D(), !(!u.value || !i.value) && (l(), s());
+      yield A(), !(!r.value || !c.value) && (n(), u());
     })
   );
-  const l = () => {
-    const a = u.value, g = i.value;
-    !a || !g || A(a, g, {
-      placement: o.placement || "bottom-start",
+  const n = () => {
+    const i = r.value, p = c.value;
+    !i || !p || x(i, p, {
+      placement: s.placement || "bottom-start",
       middleware: [
-        q(o.offset || 8),
+        $(s.offset || 8),
         b(),
-        R({ padding: 8 })
+        w({ padding: 8 })
       ]
-    }).then(({ x: m, y: E }) => {
-      r.value = {
+    }).then(({ x: v, y: U }) => {
+      l.value = {
         position: "absolute",
-        left: `${m}px`,
-        top: `${E}px`
+        left: `${v}px`,
+        top: `${U}px`
       };
     });
   };
-  function s() {
-    !u.value || !i.value || (d = L(u.value, i.value, l));
+  function u() {
+    !r.value || !c.value || (f = D(r.value, c.value, n));
   }
-  function c() {
-    d && (d(), d = null);
+  function a() {
+    f && (f(), f = null);
   }
-  const _ = k(() => C({
-    display: "flex",
+  const d = R(() => h({
     zIndex: t
-  }, r.value));
+  }, l.value));
   return {
-    floatingRef: i,
-    style: _
+    floatingRef: c,
+    style: d
   };
 }
-const ne = {
+const j = {
   name: "SuggestionMenuController",
-  components: {
-    SuggestionMenuWrapper: ee
-  },
   props: {
     triggerCharacter: { type: String, required: !0 },
-    minQueryLength: { type: Number },
-    getItems: { type: Function, required: !0 },
-    onItemClick: { type: Function }
+    minQueryLength: { type: Number }
   },
-  setup(n) {
-    const e = $("editor"), t = f(null), o = k(() => {
-      var _;
-      const c = ((_ = t.value) == null ? void 0 : _.show) && (!n.minQueryLength || t.value.ignoreQueryLength || !t.value.query.startsWith(" ") && t.value.query.length >= n.minQueryLength);
-      return c != null ? c : !1;
-    }), { floatingRef: u, style: i } = te(
-      () => o.value,
+  setup(o) {
+    const e = B("editor"), t = _(null), s = R(() => {
+      var d;
+      const a = ((d = t.value) == null ? void 0 : d.show) && (!o.minQueryLength || t.value.ignoreQueryLength || !t.value.query.startsWith(" ") && t.value.query.length >= o.minQueryLength);
+      return a != null ? a : !1;
+    }), { floatingRef: r, style: c } = N(
+      () => s.value,
       () => {
-        var c;
-        return ((c = t.value) == null ? void 0 : c.referencePos) || null;
+        var a;
+        return ((a = t.value) == null ? void 0 : a.referencePos) || null;
       },
       2e3,
       {
         placement: "bottom-start",
         middleware: [
-          q(10),
+          $(10),
           b({ mainAxis: !0, crossAxis: !1 }),
-          R(),
-          N({
-            apply({ availableHeight: c, elements: _ }) {
-              Object.assign(_.floating.style, {
-                maxHeight: `${c - 10}px`
+          w(),
+          F({
+            apply({ availableHeight: a, elements: d }) {
+              Object.assign(d.floating.style, {
+                maxHeight: `${a - 10}px`
               });
             }
           })
@@ -321,49 +204,52 @@ const ne = {
         }
       }
     );
-    let r = null;
-    return p(() => {
-      r = e.value.suggestionMenus.onUpdate(
-        n.triggerCharacter,
-        (c) => {
-          t.value = c;
+    let l = null;
+    C(() => {
+      l = e.value.suggestionMenus.onUpdate(
+        o.triggerCharacter,
+        (a) => {
+          t.value = a;
         }
       );
-    }), S(() => {
-      r && r();
-    }), {
+    }), T(() => {
+      l && l();
+    });
+    const f = () => {
+      e.value.suggestionMenus.closeMenu();
+    }, n = () => {
+      e.value.suggestionMenus.clearQuery();
+    }, u = (a) => {
+      e.value.suggestionMenus.insertMention(a);
+    };
+    return {
+      floatingRef: r,
+      style: c,
+      showDom: s,
+      editor: e.value,
       state: t,
-      floatingRef: u,
-      style: i,
-      showDom: o,
-      closeMenu: () => {
-        e.value.suggestionMenus.closeMenu();
-      },
-      clearQuery: () => {
-        e.value.suggestionMenus.clearQuery();
-      },
-      insertMention: (c) => {
-        e.value.suggestionMenus.insertMention(c);
-      }
+      closeMenu: f,
+      clearQuery: n,
+      insertMention: u
     };
   }
 };
-var ue = function() {
+var z = function() {
   var e = this, t = e._self._c;
-  return e.showDom ? t("div", { ref: "floatingRef", style: e.style }, [t("SuggestionMenuWrapper", { attrs: { query: e.state.query, getItems: e.getItems, onItemClick: e.onItemClick, closeMenu: e.closeMenu, clearQuery: e.clearQuery, insertMention: e.insertMention } })], 1) : e._e();
-}, re = [], le = /* @__PURE__ */ y(
-  ne,
-  ue,
-  re,
+  return e.showDom ? t("div", { ref: "floatingRef", style: e.style }, [e._t("default", null, { query: e.state.query, editor: e.editor, closeMenu: e.closeMenu, clearQuery: e.clearQuery, insertMention: e.insertMention })], 2) : e._e();
+}, W = [], X = /* @__PURE__ */ E(
+  j,
+  z,
+  W,
   !1,
   null,
-  "f5b73a66",
+  "5eadb932",
   null,
   null
 );
-const de = le.exports;
+const Z = X.exports;
 export {
-  ce as MEditorVue2,
-  de as SuggestionMenuController,
-  ce as default
+  Y as MEditorVue2,
+  Z as SuggestionMenuController,
+  Y as default
 };

package/dist/types/index.d.ts

@@ -4,4 +4,15 @@ export type MEditorVue2Type = Vue & {
     editor: MEditor;
     clear: () => void;
 };
+export interface SuggestionItem {
+    id: string;
+    label: string;
+}
+export interface SuggestionMenuProps {
+    editor: MEditor;
+    query: string;
+    closeMenu: () => void;
+    clearQuery: () => void;
+    insertMention: (item: SuggestionItem) => void;
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,GAAG,MAAM,KAAK,CAAA;AAErB,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,GAAG,MAAM,KAAK,CAAA;AAGrB,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;CAChD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shenjipo/mention-vue2",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -18,7 +18,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -27,7 +28,7 @@
     "@floating-ui/dom": "^1.1.9",
     "vue": "^2.7.7",
     "vue-demi": "^0.14.10",
-    "@shenjipo/mention-editor": "2.7.0"
+    "@shenjipo/mention-editor": "2.8.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.45",

package/src/assets/index.scss

@@ -0,0 +1,45 @@
+.mention-editor-wrapper {
+    border: 1px solid #d9d9d9; // 默认边框颜色
+    padding: 8px 12px; // 内边距
+    transition:
+        border-color 0.2s,
+        box-shadow 0.2s; // 平滑过渡
+    border-radius: 6px;
+
+    &:focus-within {
+        border-color: #409eff; // 高亮颜色
+        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); // 柔和高亮光晕
+    }
+
+    .mention-editor {
+        min-height: 80px;
+
+        .tiptap {
+            outline: none;
+            max-height: 200px;
+            overflow: auto;
+            p {
+                margin: 0;
+            }
+
+            p.is-editor-empty::before {
+                content: attr(data-placeholder);
+                color: #aaa;
+                float: left;
+                height: 0;
+                pointer-events: none;
+            }
+
+            .mention {
+                padding: 2px 6px;
+                border-radius: 8px;
+                color: #4971f5;
+                background-color: #ecf5ff;
+                display: inline-block;
+                margin-right: 4px;
+            }
+        }
+
+       
+    }
+}

package/src/components/MEditorVue2.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="mention-editor-wrapper">
+        <slot name="header"></slot>
+        <div ref="editorRef" class="mention-editor">
+            <slot v-if="editor"></slot>
+        </div>
+        <slot name="footer"></slot>
+    </div>
+</template>
+
+<script>
+import MEditor from '@shenjipo/mention-editor'
+import { ref, onMounted, provide } from 'vue-demi'
+
+export default {
+    name: 'MEditorVue2',
+    props: {
+        value: { type: String, default: '' },
+        options: {
+            type: Object,
+            default: () => ({
+                placeholder: '请输入内容，可粘贴图片到此处，按下/唤起快捷指令，',
+                lineBreak: 'enter',
+            }),
+        },
+    },
+    emits: ['input', 'fileReject', 'imageInput', 'deleteMention', 'enter'],
+    setup(props, { emit, expose }) {
+        const editor = ref(null)
+        const editorRef = ref(null)
+
+        provide('editor', editor)
+
+        onMounted(() => {
+            if (editorRef.value) {
+                editor.value = new MEditor({
+                    element: editorRef.value,
+                    content: props.value,
+                    placeholder: props.options.placeholder,
+                    onChange: (val) => {
+                        emit('input', val)
+                    },
+                    onFileInput: (payload) => {
+                        emit('fileInput', payload)
+                    },
+                    onMentionDelete(item) {
+                        emit('deleteMention', item)
+                    },
+                    lineBreak: props.options.lineBreak,
+                    onEnter: () => {
+                        emit('enter')
+                    },
+                })
+            }
+        })
+
+        const clear = () => {
+            editor.value.clear()
+            emit('update:modelValue', '')
+        }
+
+        expose({ editor, clear })
+
+        return {
+            editor,
+            editorRef,
+            clear,
+        }
+    },
+}
+</script>
+
+<style scoped></style>

package/src/components/SuggestionMenu/SuggestionMenuController.vue

@@ -0,0 +1,96 @@
+<template>
+    <div v-if="showDom" ref="floatingRef" :style="style">
+        <slot :query="state.query" :editor="editor" :closeMenu="closeMenu" :clearQuery="clearQuery"
+            :insertMention="insertMention">
+        </slot>
+    </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onBeforeUnmount, inject } from 'vue-demi'
+import { useUIElementPositioning } from '@/hooks/useUIElementPositioning'
+import { offset, flip, shift, size } from '@floating-ui/dom'
+
+export default {
+    name: 'SuggestionMenuController',
+    props: {
+        triggerCharacter: { type: String, required: true },
+        minQueryLength: { type: Number },
+    },
+
+    setup(props) {
+        const editor = inject('editor')
+        const state = ref(null)
+
+        const showDom = computed(() => {
+            const res = state.value?.show &&
+                (!props.minQueryLength ||
+                    state.value.ignoreQueryLength ||
+                    (!state.value.query.startsWith(' ') &&
+                        state.value.query.length >= props.minQueryLength))
+            return res ?? false
+        })
+
+        const { floatingRef, style } = useUIElementPositioning(
+            () => showDom.value,
+            () => state.value?.referencePos || null,
+            2000,
+            {
+                placement: 'bottom-start',
+                middleware: [
+                    offset(10),
+                    flip({ mainAxis: true, crossAxis: false }),
+                    shift(),
+                    size({
+                        apply({ availableHeight, elements }) {
+                            Object.assign(elements.floating.style, {
+                                maxHeight: `${availableHeight - 10}px`,
+                            })
+                        },
+                    }),
+                ],
+                onDismiss() {
+                    // 可以触发关闭逻辑
+                },
+            }
+        )
+
+        let unsubscribe = null
+        onMounted(() => {
+            unsubscribe = editor.value.suggestionMenus.onUpdate(
+                props.triggerCharacter,
+                (newState) => {
+                    state.value = newState
+                }
+            )
+        })
+
+        onBeforeUnmount(() => {
+            unsubscribe && unsubscribe()
+        })
+
+        const closeMenu = () => {
+            editor.value.suggestionMenus.closeMenu()
+        }
+        const clearQuery = () => {
+            editor.value.suggestionMenus.clearQuery()
+        }
+        const insertMention = (item) => {
+            editor.value.suggestionMenus.insertMention(item)
+        }
+
+        return {
+            floatingRef,
+            style,
+            showDom,
+            editor: editor.value,
+            state,
+            closeMenu,
+            clearQuery,
+            insertMention,
+        }
+    },
+}
+</script>
+
+<style scoped></style>

package/src/hooks/useSuggestionMenuKeyboardNavigation.js

@@ -0,0 +1,55 @@
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue-demi'
+
+export function useSuggestionMenuKeyboardNavigation(editor, query, items, onItemClick) {
+    const selectedIndex = ref(0)
+
+    const handleMenuNavigationKeys = (event) => {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            if (items.value && items.value.length) {
+                selectedIndex.value = (selectedIndex.value - 1 + items.value.length) % items.value.length
+            }
+            return true
+        }
+
+        if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            if (items.value && items.value.length) {
+                selectedIndex.value = (selectedIndex.value + 1) % items.value.length
+            }
+            return true
+        }
+
+        if (event.key === 'Enter' && !event.isComposing) {
+            event.preventDefault()
+            if (items.value && items.value.length) {
+                onItemClick && onItemClick(items.value[selectedIndex.value])
+            }
+            return true
+        }
+
+        return false
+    }
+
+    onMounted(() => {
+        if (editor && editor.domElement) {
+            editor.domElement.addEventListener('keydown', handleMenuNavigationKeys, true)
+        }
+    })
+
+    onBeforeUnmount(() => {
+        if (editor && editor.domElement) {
+            editor.domElement.removeEventListener('keydown', handleMenuNavigationKeys, true)
+        }
+    })
+
+    // query 变化时重置选中索引
+    watch(
+        () => query,
+        () => {
+            selectedIndex.value = 0
+        }
+    )
+
+    return selectedIndex
+}

package/src/hooks/useUIElementPositioning.js

@@ -0,0 +1,81 @@
+import { ref, computed, watch, nextTick } from 'vue-demi'
+import { computePosition, autoUpdate, offset, flip, shift } from '@floating-ui/dom'
+
+export function useUIElementPositioning(show, referencePos, zIndex, options = {}) {
+    const reference = ref(null)
+    const floatingRef = ref(null)
+    const floatingStyles = ref({})
+    let cleanupAutoUpdate = null
+
+    watch(
+        referencePos,
+        (pos) => {
+            if (!pos) return
+            reference.value = {
+                getBoundingClientRect: () => pos,
+            }
+            updatePosition()
+        },
+        { immediate: true }
+    )
+
+    watch(
+        show,
+        async (visible) => {
+            if (!visible) {
+                stopAutoUpdate()
+                return
+            }
+            await nextTick()
+            if (!reference.value || !floatingRef.value) return
+            updatePosition()
+            startAutoUpdate()
+        }
+    )
+
+
+    const updatePosition = () => {
+
+        const refEl = reference.value
+        const floatEl = floatingRef.value
+        if (!refEl || !floatEl) return
+
+        // computePosition 支持虚拟元素
+        computePosition(refEl, floatEl, {
+            placement: options.placement || 'bottom-start',
+            middleware: [
+                offset(options.offset || 8),
+                flip(),
+                shift({ padding: 8 }),
+            ],
+        }).then(({ x, y }) => {
+            floatingStyles.value = {
+                position: 'absolute',
+                left: `${x}px`,
+                top: `${y}px`,
+            }
+        })
+    }
+
+    function startAutoUpdate() {
+        if (!reference.value || !floatingRef.value) return
+        cleanupAutoUpdate = autoUpdate(reference.value, floatingRef.value, updatePosition)
+    }
+
+    function stopAutoUpdate() {
+        if (cleanupAutoUpdate) {
+            cleanupAutoUpdate()
+            cleanupAutoUpdate = null
+        }
+    }
+
+    const style = computed(() => ({
+        zIndex,
+        ...floatingStyles.value,
+    }))
+
+    return {
+        floatingRef: floatingRef,
+        style,
+    }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import MEditorVue2 from './components/MEditorVue2.vue'
+import SuggestionMenuController from './components/SuggestionMenu/SuggestionMenuController.vue'
+
+
+// 导出组件
+export {
+    MEditorVue2,
+    SuggestionMenuController,
+   
+}
+export default MEditorVue2
+
+import './assets/index.scss'

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue'
+    export default Vue
+}

package/src/types/index.ts

@@ -0,0 +1,21 @@
+import MEditor from "@shenjipo/mention-editor"
+import Vue from "vue"
+
+
+export type MEditorVue2Type = Vue & {
+    editor: MEditor
+    clear: () => void
+}
+
+export interface SuggestionItem {
+    id: string
+    label: string
+}
+
+export interface SuggestionMenuProps {
+    editor: MEditor
+    query: string
+    closeMenu: () => void
+    clearQuery: () => void
+    insertMention: (item: SuggestionItem) => void
+}