@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/rich-text-editor.cjs

@@ -1,2 +1,1138 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@tiptap/vue-3"),B=require("@tiptap/extension-blockquote"),j=require("@tiptap/extension-code-block"),L=require("@tiptap/extension-document"),O=require("@tiptap/extension-hard-break"),P=require("@tiptap/extension-paragraph"),D=require("@tiptap/extension-placeholder"),M=require("@tiptap/extension-bold"),$=require("@tiptap/extension-bullet-list"),V=require("@tiptap/extension-italic"),N=require("@tiptap/extension-link"),H=require("@tiptap/extension-list-item"),U=require("@tiptap/extension-ordered-list"),K=require("@tiptap/extension-strike"),F=require("@tiptap/extension-underline"),W=require("@tiptap/extension-text"),z=require("@tiptap/extension-text-align"),u=require("@tiptap/core"),r=require("vue"),p=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),f=require("../chunks/index-IBtQ5jRJ.js"),w=require("@tiptap/pm/state"),X=require("@tiptap/suggestion"),J=require("@dialpad/dialtone-emojis"),Y=require("./list-item.cjs"),C=require("./stack.cjs"),q=require("tippy.js"),R=require("./utils.cjs"),G=require("@tiptap/extension-mention"),Q=require("./link.cjs"),Z=require("./avatar.cjs");require("emoji-regex");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/stack_constants-m9Ickqw0.js");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./presence.cjs");const ee={name:"EmojiComponent",components:{NodeViewWrapper:d.NodeViewWrapper,DtEmoji:f.D},props:d.nodeViewProps};function te(e,t,n,o,i,s){const a=r.resolveComponent("dt-emoji"),c=r.resolveComponent("node-view-wrapper");return r.openBlock(),r.createBlock(c,{class:"d-d-inline-block d-va-bottom d-lh0"},{default:r.withCtx(()=>[r.createVNode(a,{size:"500",code:e.node.attrs.code},null,8,["code"])]),_:1})}const ne=p._(ee,[["render",te]]),re={name:"SuggestionList",components:{DtListItem:Y.DtListItem},props:{items:{type:Array,required:!0},command:{type:Function,required:!0},itemComponent:{type:Object,required:!0},itemType:{type:String,required:!0}},data(){return{selectedIndex:0}},watch:{items(){this.selectedIndex=0}},methods:{onKeyDown({event:e}){return e.key==="ArrowUp"?(this.upHandler(),!0):e.key==="ArrowDown"?(this.downHandler(),!0):e.key==="Enter"||e.key==="Tab"?(e.preventDefault(),this.selectHandler(),e.stopPropagation(),!0):!1},upHandler(){this.selectedIndex=(this.selectedIndex+this.items.length-1)%this.items.length,this.scrollActiveElementIntoView()},downHandler(){this.selectedIndex=(this.selectedIndex+1)%this.items.length,this.scrollActiveElementIntoView()},scrollActiveElementIntoView(){const e=this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");e&&e.scrollIntoView({behaviour:"smooth",block:"center"})},selectHandler(){this.selectItem(this.selectedIndex)},selectItem(e){const t=this.items[e];switch(this.itemType){case"emoji":this.command(t);return;case"mention":this.command({name:t.name,id:t.id,avatarSrc:t.avatarSrc});break}}}},oe={class:"d-popover__dialog"},ie={ref:"suggestionList",class:"dt-suggestion-list"};function se(e,t,n,o,i,s){const a=r.resolveComponent("dt-list-item");return r.openBlock(),r.createElementBlock("div",oe,[r.withDirectives(r.createElementVNode("ul",ie,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(n.items,(c,l)=>(r.openBlock(),r.createBlock(a,{key:c.id,class:r.normalizeClass(["dt-suggestion-list--item",{"dt-list-item--highlighted":l===i.selectedIndex}]),"navigation-type":"arrow-keys",onClick:y=>s.selectItem(l),onKeydown:r.withModifiers(s.onKeyDown,["prevent","stop"])},{default:r.withCtx(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(n.itemComponent),{item:c},null,8,["item"]))]),_:2},1032,["class","onClick","onKeydown"]))),128))],512),[[r.vShow,n.items.length]])])}const S=p._(re,[["render",se]]),ae={name:"EmojiSuggestion",components:{DtEmoji:f.D,DtStack:C.DtStack},props:{item:{type:Object,required:!0}}};function ce(e,t,n,o,i,s){const a=r.resolveComponent("dt-emoji"),c=r.resolveComponent("dt-stack");return r.openBlock(),r.createBlock(c,{direction:"row",gap:"400"},{default:r.withCtx(()=>[r.createVNode(a,{size:"200",code:n.item.code},null,8,["code"]),r.createTextVNode(" "+r.toDisplayString(n.item.code),1)]),_:1})}const ue=p._(ae,[["render",ce]]),de={items:({query:e})=>e.length<2?[]:Object.values(J.emojisIndexed).filter(function(o){return!!o.shortname.substring(1,o.shortname.length-1).startsWith(e.toLowerCase())}).map(o=>({id:o.unicode_character,code:o.shortname})),command:({editor:e,range:t,props:n})=>{var s,a;const o=e.view.state.selection.$to.nodeAfter;((s=o==null?void 0:o.text)==null?void 0:s.startsWith(" "))&&(t.to+=1),e.chain().focus().insertContentAt(t,[{type:"emoji",attrs:n},{type:"text",text:" "}]).run(),(a=window.getSelection())==null||a.collapseToEnd()},render:()=>{let e,t;return{onStart:n=>{e=new d.VueRenderer(S,{props:{itemComponent:r.markRaw(ue),itemType:"emoji",...n},editor:n.editor}),n.clientRect&&(t=q("body",{getReferenceClientRect:n.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"top-start",contentElement:null,zIndex:650}))},onUpdate(n){e.updateProps(n),n.clientRect&&t[0].setProps({getReferenceClientRect:n.clientRect})},onKeyDown(n){var o;return n.event.key==="Escape"?(t[0].hide(),!0):(o=e.ref)==null?void 0:o.onKeyDown(n)},onExit(){t[0].destroy(),e.destroy()}}}},le=new w.PluginKey("emoji"),pe=/:\w+:$/,me=/:\w+:/g,he=/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/,fe=/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g,x=e=>{if(e&&f.o(e[0]))return{index:e.index,text:e[0],match:e}},ge=e=>[...e.matchAll(me)].filter(n=>f.o(n[0])).map(n=>({index:n.index,text:n[0],match:n})),_e=u.Node.create({addOptions(){return{HTMLAttributes:{},suggestion:{char:":",pluginKey:le}}},name:"emoji",group:"inline",inline:!0,selectable:!0,addNodeView(){return d.VueNodeViewRenderer(ne)},addAttributes(){return{code:{default:null},id:{default:null}}},parseHTML(){return[{tag:"emoji-component"}]},renderText({node:e}){return e.attrs.code},renderHTML({HTMLAttributes:e}){return["emoji-component",u.mergeAttributes(this.options.HTMLAttributes,e)]},addInputRules(){return[u.nodeInputRule({find:e=>{const t=e.match(pe);return x(t)},type:this.type,getAttributes(e){return{code:e[0]}}}),u.nodeInputRule({find:e=>{const t=e.match(he);return x(t)},type:this.type,getAttributes(e){const t=f.m(e[0]).unicode_output;return{code:String.fromCodePoint(parseInt(t,16)),label:"emoji"}}})]},addPasteRules(){return[u.nodePasteRule({find:ge,type:this.type,getAttributes(e){return{code:e[0]}}}),u.nodePasteRule({find:fe,type:this.type,getAttributes(e){return{code:e[0]}}})]},addProseMirrorPlugins(){return[X({editor:this.editor,...this.options.suggestion,...de})]}});function ye(e,t,n=()=>!0){const o=[];t.lastIndex=0;let i;for(;i=t.exec(e);)n(e,i)&&o.push(i);return o}function ke(e,t){return!["#","@"].includes(e.charAt(t.index))&&!["#","@"].includes(e.charAt(t.index-1))}function we(e){const t=new RegExp("(?:"+[`[!?.,:;'"]`,"(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$"].join("|"),"g");return e.replace(t,"")}function be(e,t){const n=e.slice(0,t+1).search(/\S+\s*$/),o=e.slice(t).search(/\s/);if(o<0){const i=e.slice(n);return{text:i,from:n,to:n+i.length}}return{text:e.slice(n,o+t),from:n,to:o+t}}function b(e,t,n,o){const i=be(e,t);if(o.lastIndex=0,!o.test(i.text))return i;const s=n==="left"?i.from-1:i.to+1;return s<=0||s>=e.length||s===t?i:b(e,s,n,o)}function xe(e,t,n,o){const i=Math.max(e.from-1,0),s=Math.min(e.to+1,t.content.size),a=u.getMarksBetween(i,s,t);for(const c of a)c.mark.type===o&&n.removeMark(c.from,c.to,o)}const E=R.getPhoneNumberRegex(1,15);function T(e,t,n,o,i,s){if(!e)return;let a=n-t-1;a=a<0?0:a;const c=o-t,l=b(e,a,"left",E),y=b(e,c,"right",E),m=e.slice(l.from,y.to);ye(m,R.linkRegex,ke).forEach(k=>{const h=we(k[0]),_=t+l.from+k.index+1,A=_+h.length;i.addMark(_,A,s.create())})}function Ee(e){let t=!1;return new w.Plugin({key:new w.PluginKey("autolink"),appendTransaction:(n,o,i)=>{const s=n.some(m=>m.docChanged)&&!o.doc.eq(i.doc);if(t&&!s)return;const{tr:a}=i,{textContent:c}=i.doc;t||T(c,0,0,c.length,a,e.type),t=!0;const l=u.combineTransactionSteps(o.doc,[...n]);return u.getChangedRanges(l).forEach(({oldRange:m,newRange:g})=>{xe(g,i.doc,a,e.type),u.findChildrenInRange(i.doc,g,h=>h.isTextblock).forEach(({node:h,pos:_})=>{T(h.textContent,_,m.from,g.to,a,e.type)})}),a}})}const Te={class:"d-link d-c-text d-d-inline-block",rel:"noopener noreferrer nofollow"},Ce=u.Mark.create({name:"Link",renderHTML({HTMLAttributes:e}){return["a",u.mergeAttributes(this.options.HTMLAttributes,e,Te),0]},renderText({node:e}){return e.attrs.text},addProseMirrorPlugins(){return[Ee({type:this.type})]}}),qe={name:"MentionComponent",components:{NodeViewWrapper:d.NodeViewWrapper,DtLink:Q.DtLink},props:d.nodeViewProps,computed:{text(){return"@"+this.$props.node.attrs.name}}};function Re(e,t,n,o,i,s){const a=r.resolveComponent("dt-link"),c=r.resolveComponent("node-view-wrapper");return r.openBlock(),r.createBlock(c,{class:"d-d-inline-block"},{default:r.withCtx(()=>[r.createVNode(a,{kind:"mention"},{default:r.withCtx(()=>[r.createTextVNode(r.toDisplayString(s.text),1)]),_:1})]),_:1})}const Se=p._(qe,[["render",Re]]),ve=G.extend({addNodeView(){return d.VueNodeViewRenderer(Se)},parseHTML(){return[{tag:"mention-component"}]},addAttributes(){return{name:{default:""},avatarSrc:{default:""},id:{default:""}}},renderText({node:e}){return`@${e.attrs.id}`},renderHTML({HTMLAttributes:e}){return["mention-component",u.mergeAttributes(this.options.HTMLAttributes,e),0]}}),v=["text","json","html"],I=["start","end","all"],Ie=["https","http","ftp","ftps","sftp","mailto"],Ae={name:"MentionSuggestion",components:{DtAvatar:Z.DtAvatar,DtStack:C.DtStack},props:{item:{type:Object,required:!0}},computed:{name(){return this.item.name},avatarSrc(){return this.item.avatarSrc}}};function Be(e,t,n,o,i,s){const a=r.resolveComponent("dt-avatar"),c=r.resolveComponent("dt-stack");return r.openBlock(),r.createBlock(c,{direction:"row",gap:"400"},{default:r.withCtx(()=>[r.createVNode(a,{"full-name":s.name,"image-src":s.avatarSrc,"image-alt":s.name,size:"xs"},null,8,["full-name","image-src","image-alt"]),r.createTextVNode(" "+r.toDisplayString(s.name),1)]),_:1})}const je=p._(Ae,[["render",Be]]),Le={allowSpaces:!0,render:()=>{let e,t;return{onStart:n=>{e=new d.VueRenderer(S,{props:{itemComponent:r.markRaw(je),itemType:"mention",...n},editor:n.editor}),n.clientRect&&(t=q("body",{getReferenceClientRect:n.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"top-start"}))},onUpdate(n){e.updateProps(n),n.clientRect&&t[0].setProps({getReferenceClientRect:n.clientRect})},onKeyDown(n){return n.event.key==="Escape"?(t[0].hide(),!0):e==null?void 0:e.ref.onKeyDown(n)},onExit(){t[0].destroy(),e.destroy()}}}},Oe={name:"DtRichTextEditor",components:{EditorContent:d.EditorContent},props:{modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},allowLineBreaks:{type:Boolean,default:!1},inputAriaLabel:{type:String,required:!0},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(e){return typeof e=="string"?I.includes(e):!0}},outputFormat:{type:String,default:"text",validator(e){return v.includes(e)}},placeholder:{type:String,default:""},link:{type:[Boolean,Object],default:!1},mentionSuggestion:{type:Object,default:null},allowBlockquote:{type:Boolean,default:!0},allowBold:{type:Boolean,default:!0},allowBulletList:{type:Boolean,default:!0},allowItalic:{type:Boolean,default:!0},allowStrike:{type:Boolean,default:!0},allowUnderline:{type:Boolean,default:!0}},emits:["input","update:modelValue","blur","focus"],data(){return{editor:null,popoverOpened:!1}},computed:{extensions(){const e=[L,P,W];if(this.link&&e.push(this.getExtension(Ce,this.link)),this.allowBlockquote&&e.push(B),this.allowBold&&e.push(M),this.allowBulletList&&(e.push($),e.push(H),e.push(U.configure({itemTypeName:"listItem"}))),this.allowItalic&&e.push(V),this.allowStrike&&e.push(K),this.allowUnderline&&e.push(F),e.push(D.configure({placeholder:this.placeholder})),this.allowLineBreaks||e.push(O.extend({addKeyboardShortcuts(){return{Enter:()=>!0,"Shift-Enter":()=>this.editor.commands.first(({commands:t})=>[()=>t.newlineInCode(),()=>t.createParagraphNear(),()=>t.liftEmptyBlock(),()=>t.splitBlock()])}}})),e.push(N.extend({inclusive:!1}).configure({autolink:!0,protocols:Ie})),this.mentionSuggestion){const t={...this.mentionSuggestion,...Le};e.push(ve.configure({suggestion:t}))}return e.push(_e),e.push(z.configure({types:["paragraph"],defaultAlignment:"left"})),e.push(j.configure({HTMLAttributes:{class:"dt-rich-text-editor--code-block"}})),e},inputAttrs(){const e={"aria-label":this.inputAriaLabel,"aria-multiline":!0,role:"textbox"};return this.editable||(e["aria-readonly"]=!0),e}},watch:{editable(e){this.editor.setEditable(e),this.updateEditorAttributes({"aria-readonly":!e})},inputClass(e){this.updateEditorAttributes({class:e})},inputAriaLabel(e){this.updateEditorAttributes({"aria-label":e})},extensions(){this.destroyEditor(),this.createEditor()},modelValue(e){let t=this.getOutput();this.outputFormat==="json"&&(e=JSON.stringify(e),t=JSON.stringify(t)),e!==t&&this.editor.commands.setContent(e,!1)}},created(){this.createEditor()},beforeUnmount(){this.destroyEditor()},methods:{createEditor(){this.editor=new d.Editor({autofocus:this.autoFocus,content:this.modelValue,editable:this.editable,extensions:this.extensions,editorProps:{attributes:{...this.inputAttrs,class:this.inputClass}}}),this.addEditorListeners()},destroyEditor(){this.editor.destroy()},addEditorListeners(){this.editor.on("update",()=>{const e=this.getOutput();this.$emit("input",e),this.$emit("update:modelValue",e)}),this.editor.on("focus",({event:e})=>{this.$emit("focus",e)}),this.editor.on("blur",({event:e})=>{this.$emit("blur",e)})},getOutput(){switch(this.outputFormat){case"json":return this.editor.getJSON();case"html":return this.editor.getHTML();case"text":default:return this.editor.getText()}},getExtension(e,t){var n;return typeof t=="boolean"?e:(n=e.configure)==null?void 0:n.call(e,t)},updateEditorAttributes(e){this.editor.setOptions({editorProps:{attributes:e}})},focusEditor(){this.editor.commands.focus()}}};function Pe(e,t,n,o,i,s){const a=r.resolveComponent("editor-content");return r.openBlock(),r.createBlock(a,{editor:i.editor,"data-qa":"dt-rich-text-editor",class:"dt-rich-text-editor"},null,8,["editor"])}const De=p._(Oe,[["render",Pe]]);exports.DtRichTextEditor=De;exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=I;exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=v;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue3 = require("@tiptap/vue-3");
+const Blockquote = require("@tiptap/extension-blockquote");
+const CodeBlock = require("@tiptap/extension-code-block");
+const Document = require("@tiptap/extension-document");
+const HardBreak = require("@tiptap/extension-hard-break");
+const Paragraph = require("@tiptap/extension-paragraph");
+const Placeholder = require("@tiptap/extension-placeholder");
+const Bold = require("@tiptap/extension-bold");
+const BulletList = require("@tiptap/extension-bullet-list");
+const Italic = require("@tiptap/extension-italic");
+const TipTapLink = require("@tiptap/extension-link");
+const ListItem = require("@tiptap/extension-list-item");
+const OrderedList = require("@tiptap/extension-ordered-list");
+const Strike = require("@tiptap/extension-strike");
+const Underline = require("@tiptap/extension-underline");
+const Text = require("@tiptap/extension-text");
+const TextAlign = require("@tiptap/extension-text-align");
+const core = require("@tiptap/core");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_emoji = require("./emoji.cjs");
+const common_emoji = require("../common/emoji.cjs");
+const state = require("@tiptap/pm/state");
+const Suggestion = require("@tiptap/suggestion");
+const dialtoneEmojis = require("@dialpad/dialtone-emojis");
+const lib_listItem = require("./list-item.cjs");
+const lib_stack = require("./stack.cjs");
+const tippy = require("tippy.js");
+const common_utils = require("../common/utils.cjs");
+const Mention = require("@tiptap/extension-mention");
+const lib_link = require("./link.cjs");
+const lib_avatar = require("./avatar.cjs");
+require("./skeleton.cjs");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("emoji-regex");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./presence.cjs");
+const _sfc_main$5 = {
+  name: "EmojiComponent",
+  components: {
+    NodeViewWrapper: vue3.NodeViewWrapper,
+    DtEmoji: lib_emoji.DtEmoji
+  },
+  props: vue3.nodeViewProps
+};
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_emoji = vue.resolveComponent("dt-emoji");
+  const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
+  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_emoji, {
+        size: "500",
+        code: _ctx.node.attrs.code
+      }, null, 8, ["code"])
+    ]),
+    _: 1
+  });
+}
+const EmojiComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const _sfc_main$4 = {
+  name: "SuggestionList",
+  components: {
+    DtListItem: lib_listItem.DtListItem
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    command: {
+      type: Function,
+      required: true
+    },
+    itemComponent: {
+      type: Object,
+      required: true
+    },
+    itemType: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedIndex: 0
+    };
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0;
+    }
+  },
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === "ArrowUp") {
+        this.upHandler();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        this.downHandler();
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        this.selectHandler();
+        event.stopPropagation();
+        return true;
+      }
+      return false;
+    },
+    upHandler() {
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;
+      this.scrollActiveElementIntoView();
+    },
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+      this.scrollActiveElementIntoView();
+    },
+    scrollActiveElementIntoView() {
+      const activeElement = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          behaviour: "smooth",
+          block: "center"
+        });
+      }
+    },
+    selectHandler() {
+      this.selectItem(this.selectedIndex);
+    },
+    selectItem(index) {
+      const item = this.items[index];
+      switch (this.itemType) {
+        case "emoji":
+          this.command(item);
+          return;
+        case "mention":
+          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
+          break;
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "d-popover__dialog" };
+const _hoisted_2 = {
+  ref: "suggestionList",
+  class: "dt-suggestion-list"
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_list_item = vue.resolveComponent("dt-list-item");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.withDirectives(vue.createElementVNode("ul", _hoisted_2, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item, index) => {
+        return vue.openBlock(), vue.createBlock(_component_dt_list_item, {
+          key: item.id,
+          class: vue.normalizeClass([
+            "dt-suggestion-list--item",
+            { "dt-list-item--highlighted": index === $data.selectedIndex }
+          ]),
+          "navigation-type": "arrow-keys",
+          onClick: ($event) => $options.selectItem(index),
+          onKeydown: vue.withModifiers($options.onKeyDown, ["prevent", "stop"])
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.itemComponent), { item }, null, 8, ["item"]))
+          ]),
+          _: 2
+        }, 1032, ["class", "onClick", "onKeydown"]);
+      }), 128))
+    ], 512), [
+      [vue.vShow, $props.items.length]
+    ])
+  ]);
+}
+const SuggestionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
+  name: "EmojiSuggestion",
+  components: {
+    DtEmoji: lib_emoji.DtEmoji,
+    DtStack: lib_stack.DtStack
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_emoji = vue.resolveComponent("dt-emoji");
+  const _component_dt_stack = vue.resolveComponent("dt-stack");
+  return vue.openBlock(), vue.createBlock(_component_dt_stack, {
+    direction: "row",
+    gap: "400"
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_emoji, {
+        size: "200",
+        code: $props.item.code
+      }, null, 8, ["code"]),
+      vue.createTextVNode(" " + vue.toDisplayString($props.item.code), 1)
+    ]),
+    _: 1
+  });
+}
+const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const suggestionOptions = {
+  items: ({ query }) => {
+    if (query.length < 2) {
+      return [];
+    }
+    const emojiList = Object.values(dialtoneEmojis.emojisIndexed);
+    const filteredEmoji = emojiList.filter(function(item) {
+      if (item.shortname.substring(1, item.shortname.length - 1).startsWith(query.toLowerCase())) {
+        return true;
+      }
+      return false;
+    });
+    return filteredEmoji.map((item) => {
+      return { id: item.unicode_character, code: item.shortname };
+    });
+  },
+  command: ({ editor, range, props }) => {
+    var _a, _b;
+    const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+    const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+    if (overrideSpace) {
+      range.to += 1;
+    }
+    editor.chain().focus().insertContentAt(range, [
+      {
+        type: "emoji",
+        attrs: props
+      },
+      {
+        type: "text",
+        text: " "
+      }
+    ]).run();
+    (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+  },
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new vue3.VueRenderer(SuggestionList, {
+          props: {
+            itemComponent: vue.markRaw(EmojiSuggestion),
+            itemType: "emoji",
+            ...props
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start",
+          contentElement: null,
+          zIndex: 650
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        var _a;
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return (_a = component.ref) == null ? void 0 : _a.onKeyDown(props);
+      },
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      }
+    };
+  }
+};
+const EmojiPluginKey = new state.PluginKey("emoji");
+const inputShortCodeRegex = /:\w+:$/;
+const pasteShortCodeRegex = /:\w+:/g;
+const inputUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/;
+const pasteUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
+const inputRuleMatch = (match) => {
+  if (match && common_emoji.codeToEmojiData(match[0])) {
+    return {
+      index: match.index,
+      text: match[0],
+      match
+    };
+  }
+};
+const shortCodePasteMatch = (text) => {
+  const matches = [...text.matchAll(pasteShortCodeRegex)];
+  return matches.filter((match) => common_emoji.codeToEmojiData(match[0])).map((match) => ({
+    index: match.index,
+    text: match[0],
+    match
+  }));
+};
+const Emoji = core.Node.create({
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      suggestion: {
+        char: ":",
+        pluginKey: EmojiPluginKey
+      }
+    };
+  },
+  name: "emoji",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  addNodeView() {
+    return vue3.VueNodeViewRenderer(EmojiComponent);
+  },
+  addAttributes() {
+    return {
+      code: {
+        default: null
+      },
+      id: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "emoji-component"
+      }
+    ];
+  },
+  renderText({ node }) {
+    return node.attrs.code;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["emoji-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  addInputRules() {
+    return [
+      // shortcode input
+      core.nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputShortCodeRegex);
+          return inputRuleMatch(match);
+        },
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      }),
+      core.nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputUnicodeRegex);
+          return inputRuleMatch(match);
+        },
+        type: this.type,
+        getAttributes(attrs) {
+          const unicode = common_emoji.shortcodeToEmojiData(attrs[0]).unicode_output;
+          const emoji = String.fromCodePoint(parseInt(unicode, 16));
+          return {
+            code: emoji,
+            label: "emoji"
+          };
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      core.nodePasteRule({
+        find: shortCodePasteMatch,
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      }),
+      core.nodePasteRule({
+        find: pasteUnicodeRegex,
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+        ...suggestionOptions
+      })
+    ];
+  }
+});
+function getRegexMatches(text, regex, validator = () => true) {
+  const matches = [];
+  regex.lastIndex = 0;
+  let match;
+  while (match = regex.exec(text)) {
+    if (validator(text, match)) {
+      matches.push(match);
+    }
+  }
+  return matches;
+}
+function hasValidPrefix(text, match) {
+  return !["#", "@"].includes(text.charAt(match.index)) && !["#", "@"].includes(text.charAt(match.index - 1));
+}
+function trimEndPunctiation(string) {
+  const endPunctuationRegex = new RegExp(
+    "(?:" + [
+      `[!?.,:;'"]`,
+      "(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$"
+    ].join("|"),
+    "g"
+  );
+  return string.replace(endPunctuationRegex, "");
+}
+function getWordAt(text, index) {
+  const left = text.slice(0, index + 1).search(/\S+\s*$/);
+  const right = text.slice(index).search(/\s/);
+  if (right < 0) {
+    const word = text.slice(left);
+    return {
+      text: word,
+      from: left,
+      to: left + word.length
+    };
+  }
+  return {
+    text: text.slice(left, right + index),
+    from: left,
+    to: right + index
+  };
+}
+function getWordAtUntil(text, index, direction, regex) {
+  const word = getWordAt(text, index);
+  regex.lastIndex = 0;
+  if (!regex.test(word.text)) {
+    return word;
+  }
+  const newIndex = direction === "left" ? word.from - 1 : word.to + 1;
+  if (newIndex <= 0 || newIndex >= text.length || newIndex === index) {
+    return word;
+  }
+  return getWordAtUntil(text, newIndex, direction, regex);
+}
+function removeMarks(range, doc, tr, type) {
+  const from = Math.max(range.from - 1, 0);
+  const to = Math.min(range.to + 1, doc.content.size);
+  const marksInRange = core.getMarksBetween(from, to, doc);
+  for (const mark of marksInRange) {
+    if (mark.mark.type !== type) {
+      continue;
+    }
+    tr.removeMark(mark.from, mark.to, type);
+  }
+}
+const partialPhoneNumberRegex = common_utils.getPhoneNumberRegex(1, 15);
+function addMarks(text, pos, from, to, tr, type) {
+  if (!text) {
+    return;
+  }
+  let rangeFrom = from - pos - 1;
+  rangeFrom = rangeFrom < 0 ? 0 : rangeFrom;
+  const rangeTo = to - pos;
+  const firstWordInRange = getWordAtUntil(
+    text,
+    rangeFrom,
+    "left",
+    partialPhoneNumberRegex
+  );
+  const lastWordInRange = getWordAtUntil(
+    text,
+    rangeTo,
+    "right",
+    partialPhoneNumberRegex
+  );
+  const wordsInRange = text.slice(firstWordInRange.from, lastWordInRange.to);
+  const matches = getRegexMatches(wordsInRange, common_utils.linkRegex, hasValidPrefix);
+  matches.forEach((match) => {
+    const word = trimEndPunctiation(match[0]);
+    const from2 = pos + firstWordInRange.from + match.index + 1;
+    const to2 = from2 + word.length;
+    tr.addMark(from2, to2, type.create());
+  });
+}
+function autolink(options) {
+  let hasInitialized = false;
+  return new state.Plugin({
+    key: new state.PluginKey("autolink"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const contentChanged = transactions.some((tr2) => tr2.docChanged) && !oldState.doc.eq(newState.doc);
+      if (hasInitialized && !contentChanged) {
+        return;
+      }
+      const { tr } = newState;
+      const { textContent } = newState.doc;
+      if (!hasInitialized) {
+        addMarks(textContent, 0, 0, textContent.length, tr, options.type);
+      }
+      hasInitialized = true;
+      const transform = core.combineTransactionSteps(
+        oldState.doc,
+        [...transactions]
+      );
+      const changes = core.getChangedRanges(transform);
+      changes.forEach(({ oldRange, newRange }) => {
+        removeMarks(newRange, newState.doc, tr, options.type);
+        const paragraphs = core.findChildrenInRange(
+          newState.doc,
+          newRange,
+          (node) => node.isTextblock
+        );
+        paragraphs.forEach(({ node, pos }) => {
+          addMarks(
+            node.textContent,
+            pos,
+            oldRange.from,
+            newRange.to,
+            tr,
+            options.type
+          );
+        });
+      });
+      return tr;
+    }
+  });
+}
+const defaultAttributes = {
+  class: "d-link d-c-text d-d-inline-block",
+  rel: "noopener noreferrer nofollow"
+};
+const Link = core.Mark.create({
+  name: "Link",
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      core.mergeAttributes(
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+        defaultAttributes
+      ),
+      0
+    ];
+  },
+  renderText({ node }) {
+    return node.attrs.text;
+  },
+  addProseMirrorPlugins() {
+    return [
+      autolink({ type: this.type })
+    ];
+  }
+});
+const _sfc_main$2 = {
+  name: "MentionComponent",
+  components: {
+    NodeViewWrapper: vue3.NodeViewWrapper,
+    DtLink: lib_link.DtLink
+  },
+  props: vue3.nodeViewProps,
+  computed: {
+    text() {
+      return "@" + this.$props.node.attrs.name;
+    }
+  }
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_link = vue.resolveComponent("dt-link");
+  const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
+  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_link, { kind: "mention" }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString($options.text), 1)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const MentionComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionPlugin = Mention.extend({
+  addNodeView() {
+    return vue3.VueNodeViewRenderer(MentionComponent);
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mention-component"
+      }
+    ];
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: ""
+      },
+      avatarSrc: {
+        default: ""
+      },
+      id: {
+        default: ""
+      }
+    };
+  },
+  renderText({ node }) {
+    return `@${node.attrs.id}`;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mention-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  }
+});
+const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
+  "text",
+  "json",
+  "html"
+];
+const RICH_TEXT_EDITOR_AUTOFOCUS_TYPES = [
+  "start",
+  "end",
+  "all"
+];
+const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
+  "https",
+  "http",
+  "ftp",
+  "ftps",
+  "sftp",
+  "mailto"
+];
+const _sfc_main$1 = {
+  name: "MentionSuggestion",
+  components: {
+    DtAvatar: lib_avatar.DtAvatar,
+    DtStack: lib_stack.DtStack
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    name() {
+      return this.item.name;
+    },
+    avatarSrc() {
+      return this.item.avatarSrc;
+    }
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_avatar = vue.resolveComponent("dt-avatar");
+  const _component_dt_stack = vue.resolveComponent("dt-stack");
+  return vue.openBlock(), vue.createBlock(_component_dt_stack, {
+    direction: "row",
+    gap: "400"
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_avatar, {
+        "full-name": $options.name,
+        "image-src": $options.avatarSrc,
+        "image-alt": $options.name,
+        size: "xs"
+      }, null, 8, ["full-name", "image-src", "image-alt"]),
+      vue.createTextVNode(" " + vue.toDisplayString($options.name), 1)
+    ]),
+    _: 1
+  });
+}
+const MentionSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const suggestion = {
+  // This function comes from the user and passed to the editor directly.
+  // This will also activate the mention plugin on the editor
+  // items: ({ query }) => { return [] },
+  allowSpaces: true,
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new vue3.VueRenderer(SuggestionList, {
+          props: {
+            itemComponent: vue.markRaw(MentionSuggestion),
+            itemType: "mention",
+            ...props
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start"
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return component == null ? void 0 : component.ref.onKeyDown(props);
+      },
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      }
+    };
+  }
+};
+const _sfc_main = {
+  name: "DtRichTextEditor",
+  components: {
+    EditorContent: vue3.EditorContent
+  },
+  props: {
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    modelValue: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for line breaks to be introduced in the text.
+     */
+    allowLineBreaks: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
+      }
+    },
+    /**
+     * The output format that the editor uses when emitting the "@input" event.
+     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
+     * examples.
+     * @values text, json, html
+     */
+    outputFormat: {
+      type: String,
+      default: "text",
+      validator(outputFormat) {
+        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
+      }
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: false
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the contacts for suggestion.
+     * items({ query }) => { return [ContactObject]; }
+     * ContactObject format:
+     * { name: string, avatarSrc: string, id: string }
+     *
+     * When null, it does not add the plugin.
+     */
+    mentionSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Whether the input allows for block quote.
+     */
+    allowBlockquote: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bold to be introduced in the text.
+     */
+    allowBold: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bullet list to be introduced in the text.
+    */
+    allowBulletList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for italic to be introduced in the text.
+     */
+    allowItalic: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for strike to be introduced in the text.
+     */
+    allowStrike: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for underline to be introduced in the text.
+     */
+    allowUnderline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    /**
+     * Editor input event
+     * @event input
+     * @type {String|JSON}
+     */
+    "input",
+    /**
+     * Event to sync the value with the parent
+     * @event input
+     * @type {String|JSON}
+     */
+    "update:modelValue",
+    /**
+     * Editor blur event
+     * @event blur
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Editor focus event
+     * @event focus
+     * @type {FocusEvent}
+     */
+    "focus"
+  ],
+  data() {
+    return {
+      editor: null,
+      popoverOpened: false
+    };
+  },
+  computed: {
+    // eslint-disable-next-line complexity
+    extensions() {
+      const extensions = [Document, Paragraph, Text];
+      if (this.link) {
+        extensions.push(this.getExtension(Link, this.link));
+      }
+      if (this.allowBlockquote) {
+        extensions.push(Blockquote);
+      }
+      if (this.allowBold) {
+        extensions.push(Bold);
+      }
+      if (this.allowBulletList) {
+        extensions.push(BulletList);
+        extensions.push(ListItem);
+        extensions.push(OrderedList.configure({
+          itemTypeName: "listItem"
+        }));
+      }
+      if (this.allowItalic) {
+        extensions.push(Italic);
+      }
+      if (this.allowStrike) {
+        extensions.push(Strike);
+      }
+      if (this.allowUnderline) {
+        extensions.push(Underline);
+      }
+      extensions.push(
+        Placeholder.configure({ placeholder: this.placeholder })
+      );
+      if (!this.allowLineBreaks) {
+        extensions.push(
+          HardBreak.extend({
+            addKeyboardShortcuts() {
+              return {
+                Enter: () => true,
+                "Shift-Enter": () => this.editor.commands.first(({ commands }) => [
+                  () => commands.newlineInCode(),
+                  () => commands.createParagraphNear(),
+                  () => commands.liftEmptyBlock(),
+                  () => commands.splitBlock()
+                ])
+              };
+            }
+          })
+        );
+      }
+      extensions.push(TipTapLink.extend({ inclusive: false }).configure({
+        autolink: true,
+        protocols: RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS
+      }));
+      if (this.mentionSuggestion) {
+        const suggestionObject = { ...this.mentionSuggestion, ...suggestion };
+        extensions.push(MentionPlugin.configure({ suggestion: suggestionObject }));
+      }
+      extensions.push(Emoji);
+      extensions.push(TextAlign.configure({
+        types: ["paragraph"],
+        defaultAlignment: "left"
+      }));
+      extensions.push(CodeBlock.configure({
+        HTMLAttributes: {
+          class: "dt-rich-text-editor--code-block"
+        }
+      }));
+      return extensions;
+    },
+    inputAttrs() {
+      const attrs = {
+        "aria-label": this.inputAriaLabel,
+        "aria-multiline": true,
+        role: "textbox"
+      };
+      if (!this.editable) {
+        attrs["aria-readonly"] = true;
+      }
+      return attrs;
+    }
+  },
+  /**
+    * Because the Editor instance is initialized when mounted it does not get
+    * updated props automatically, so the ones that can change after mount have
+    * to be hooked up to the Editor's own API.
+    */
+  watch: {
+    editable(isEditable) {
+      this.editor.setEditable(isEditable);
+      this.updateEditorAttributes({ "aria-readonly": !isEditable });
+    },
+    inputClass(newClass) {
+      this.updateEditorAttributes({ class: newClass });
+    },
+    inputAriaLabel(newLabel) {
+      this.updateEditorAttributes({ "aria-label": newLabel });
+    },
+    extensions() {
+      this.destroyEditor();
+      this.createEditor();
+    },
+    modelValue(newValue) {
+      let currentValue = this.getOutput();
+      if (this.outputFormat === "json") {
+        newValue = JSON.stringify(newValue);
+        currentValue = JSON.stringify(currentValue);
+      }
+      if (newValue === currentValue) {
+        return;
+      }
+      this.editor.commands.setContent(newValue, false);
+    }
+  },
+  created() {
+    this.createEditor();
+  },
+  beforeUnmount() {
+    this.destroyEditor();
+  },
+  methods: {
+    createEditor() {
+      this.editor = new vue3.Editor({
+        autofocus: this.autoFocus,
+        content: this.modelValue,
+        editable: this.editable,
+        extensions: this.extensions,
+        editorProps: {
+          attributes: {
+            ...this.inputAttrs,
+            class: this.inputClass
+          }
+        }
+      });
+      this.addEditorListeners();
+    },
+    destroyEditor() {
+      this.editor.destroy();
+    },
+    /**
+     * The Editor exposes event hooks that we have to map our emits into. See
+     * https://tiptap.dev/api/events for all events.
+     */
+    addEditorListeners() {
+      this.editor.on("update", () => {
+        const value = this.getOutput();
+        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
+      });
+      this.editor.on("focus", ({ event }) => {
+        this.$emit("focus", event);
+      });
+      this.editor.on("blur", ({ event }) => {
+        this.$emit("blur", event);
+      });
+    },
+    getOutput() {
+      switch (this.outputFormat) {
+        case "json":
+          return this.editor.getJSON();
+        case "html":
+          return this.editor.getHTML();
+        case "text":
+        default:
+          return this.editor.getText();
+      }
+    },
+    getExtension(extension, options) {
+      var _a;
+      if (typeof options === "boolean") {
+        return extension;
+      }
+      return (_a = extension.configure) == null ? void 0 : _a.call(extension, options);
+    },
+    updateEditorAttributes(attributes) {
+      this.editor.setOptions({ editorProps: { attributes } });
+    },
+    focusEditor() {
+      this.editor.commands.focus();
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_editor_content = vue.resolveComponent("editor-content");
+  return vue.openBlock(), vue.createBlock(_component_editor_content, {
+    editor: $data.editor,
+    "data-qa": "dt-rich-text-editor",
+    class: "dt-rich-text-editor"
+  }, null, 8, ["editor"]);
+}
+const DtRichTextEditor = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRichTextEditor = DtRichTextEditor;
+exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES = RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;
+exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS = RICH_TEXT_EDITOR_OUTPUT_FORMATS;
 //# sourceMappingURL=rich-text-editor.cjs.map