ant-design-x-vue-next/lib/bubble/EditableContent.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),r=require("ant-design-vue"),b=require("../locale/useLocale.js"),N=n.defineComponent({name:"AXBubbleEditableContent",__name:"EditableContent",props:{content:null,prefixCls:null,okText:null,cancelText:null},emits:["editConfirm","editCancel"],setup(d,{emit:f}){function m(t){const e=getComputedStyle(t).display;return e==="block"||e==="flex"||e==="list-item"||e==="table"}function p(t){var s;const e=[""],o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);for(;o.nextNode();){const l=o.currentNode;if(l.nodeType===Node.TEXT_NODE){e[e.length-1]+=l.textContent;continue}l.tagName==="BR"&&((s=l.parentNode)==null?void 0:s.childElementCount)===1||(l.tagName==="BR"||m(l))&&e.push("")}return e.join(`
`)}const[c]=b.default("Bubble"),a=d,u=f,i=n.ref(null);n.onMounted(()=>{const t=i.value;if(!t)return;t.textContent=a.content,t.focus();const e=window.getSelection();if(!e)return;const o=document.createRange();o.selectNodeContents(t),o.collapse(!1),e.removeAllRanges(),e.addRange(o)});const C=()=>{i.value&&u("editConfirm",p(i.value))},g=()=>u("editCancel");return()=>{if(typeof a.content!="string")throw new Error("Content of editable Bubble should be string");return n.createVNode(n.Fragment,null,[n.createVNode("div",{ref:t=>{i.value=t},contenteditable:"true"},null),n.createVNode(r.Flex,{class:`${a.prefixCls}-editing-opts`,gap:8},{default:()=>[n.createVNode(r.Button,{type:"primary",shape:"round",size:"small",onClick:C},{default:()=>[a.okText||c.value.editableOk]}),n.createVNode(r.Button,{type:"text",shape:"round",size:"small",onClick:g},{default:()=>[a.cancelText||c.value.editableCancel]})]})])}}});exports.default=N;