UNPKG

@progress/kendo-vue-editor

Version:
9 lines (8 loc) 12.9 kB
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),P=require("@progress/kendo-vue-buttons"),d=require("@progress/kendo-vue-common"),n=require("@progress/kendo-editor-common"),_=require("./config/schema.js"),$=require("./config/defaultStyles.js"),t=require("./config/toolsSettings.js"),D=require("./dialogs/insertLink.js"),b=require("./utils/main.js"),O=require("./utils/props-key.js"),x=require("./utils/controlled-value.js"),q=require("./utils/cleanup.js"),A=require("./package-metadata.js"),L=require("./tools/align.js"),W=require("./tools/indent.js"),B=require("./tools/lists.js"),j=require("./tools/outdent.js"),y=require("./tools/inlineFormat.js"),I=require("./tools/fontStyle.js"),z=require("./tools/formatBlock.js"),g=require("./tools/proseMirrorTool.js"),N=require("./tools/insertLink.js"),G=require("./tools/unlink.js"),K=require("./tools/cleanFormatting.js"),J=require("./tools/selectAll.js"),Q=require("./tools/insertImage.js"),X=require("./tools/insertTable/tool.js"),Y=require("./tools/viewHtml.js"),Z=require("./tools/pdf.js"),ee=require("./tools/print.js"),te=require("./tools/findReplace.js"),R=require("./tools/applyColor.js"),v=require("./messages/main.js"),ie=require("@progress/kendo-vue-intl"),{link:H,bold:oe,italic:se,underline:ne}=t.EditorToolsSettings;function U(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!r.isVNode(e)}const T={Bold:{comp:y.InlineFormat,props:t.EditorToolsSettings.bold},Italic:{comp:y.InlineFormat,props:t.EditorToolsSettings.italic},Underline:{comp:y.InlineFormat,props:t.EditorToolsSettings.underline},Strikethrough:{comp:y.InlineFormat,props:t.EditorToolsSettings.strikethrough},Subscript:{comp:y.InlineFormat,props:t.EditorToolsSettings.subscript},Superscript:{comp:y.InlineFormat,props:t.EditorToolsSettings.superscript},AlignLeft:{comp:L.Align,props:t.EditorToolsSettings.alignLeft},AlignCenter:{comp:L.Align,props:t.EditorToolsSettings.alignCenter},AlignRight:{comp:L.Align,props:t.EditorToolsSettings.alignRight},AlignJustify:{comp:L.Align,props:t.EditorToolsSettings.alignJustify},Indent:{comp:W.Indent,props:t.EditorToolsSettings.indent},Outdent:{comp:j.Outdent,props:t.EditorToolsSettings.outdent},OrderedList:{comp:B.List,props:t.EditorToolsSettings.orderedList},UnorderedList:{comp:B.List,props:t.EditorToolsSettings.bulletList},FontSize:{comp:I.FontName,props:t.EditorToolsSettings.fontSize},FontName:{comp:I.FontName,props:t.EditorToolsSettings.fontName},FormatBlock:{comp:z.FormatBlock,props:t.EditorToolsSettings.formatBlock},Undo:{comp:g.ProseMirror,props:t.EditorToolsSettings.undo},Redo:{comp:g.ProseMirror,props:t.EditorToolsSettings.redo},Link:{comp:N.LinkTool,props:t.EditorToolsSettings.link},Unlink:{comp:G.Unlink,props:t.EditorToolsSettings.unlink},InsertImage:{comp:Q.InsertImage,props:t.EditorToolsSettings.image},ViewHtml:{comp:Y.ViewHtml,props:t.EditorToolsSettings.viewHtml},CleanFormatting:{comp:K.CleanFormatting,props:t.EditorToolsSettings.cleanFormatting},SelectAll:{comp:J.SelectAll,props:t.EditorToolsSettings.selectAll},InsertTable:{comp:X.InsertTable,props:t.EditorToolsSettings.insertTable},MergeCells:{comp:g.ProseMirror,props:t.EditorToolsSettings.mergeCells},SplitCell:{comp:g.ProseMirror,props:t.EditorToolsSettings.splitCell},AddRowBefore:{comp:g.ProseMirror,props:t.EditorToolsSettings.addRowBefore},AddRowAfter:{comp:g.ProseMirror,props:t.EditorToolsSettings.addRowAfter},AddColumnBefore:{comp:g.ProseMirror,props:t.EditorToolsSettings.addColumnBefore},AddColumnAfter:{comp:g.ProseMirror,props:t.EditorToolsSettings.addColumnAfter},DeleteRow:{comp:g.ProseMirror,props:t.EditorToolsSettings.deleteRow},DeleteColumn:{comp:g.ProseMirror,props:t.EditorToolsSettings.deleteColumn},DeleteTable:{comp:g.ProseMirror,props:t.EditorToolsSettings.deleteTable},Print:{comp:ee.Print,props:t.EditorToolsSettings.print},Pdf:{comp:Z.Pdf,props:t.EditorToolsSettings.pdf},InsertFile:{comp:N.LinkTool,props:t.EditorToolsSettings.insertFile},FindAndReplace:{comp:te.FindAndReplace,props:t.EditorToolsSettings.findAndReplace},ForeColor:{comp:R.ApplyColor,props:t.EditorToolsSettings.foreColor},BackColor:{comp:R.ApplyColor,props:t.EditorToolsSettings.backColor}},re=r.defineComponent({name:"KendoEditor",emits:{focus:null,blur:null,change:null,loaded:null,execute:null},inject:{kendoLocalizationService:{default:null}},props:{defaultContent:String,value:[Object,String],defaultEditMode:{type:String,default:"iframe",validator:function(e){return["iframe","div"].includes(e)}},contentStyle:Object,dir:String,tools:Array,keyboardNavigation:{type:Boolean,default:!0},resizable:Boolean,preserveWhitespace:{type:[String,Boolean],default:"full",validator:function(e){return[!0,!1,"full"].includes(e)}},pasteHtml:Function,extendView:Function,ariaDescribedBy:String,ariaLabelledBy:String,ariaLabel:String},data(){return{updateGuid:d.guid(),view:void 0,linkDialog:!1,showLicenseWatermark:!1,licenseMessage:void 0}},created(){this._view=void 0,this.trOnChange=null,this.valueisUpdated=!1,this._prevValue=this.$props.value,this.pluginViews=[],d.validatePackage(A.packageMetadata),this.showLicenseWatermark=d.shouldShowValidationUI(A.packageMetadata),this.licenseMessage=d.getLicenseMessage(A.packageMetadata)},mounted(){this.iframe=d.getRef(this,"iframe"),this.contentElement=d.getRef(this,"contentElement"),this.initialize()},watch:{value:function(e,i){this.valueisUpdated=!0,this._prevValue=i}},updated(){const{value:e}=this.$props,i=this.getView();e===void 0||!this.valueisUpdated||!i||(x.updateEditorValue(i,this.computedValue(),this._prevValue,this.trOnChange,this.htmlOnChange),this.valueisUpdated=!1,this.trOnChange=null,this.htmlOnChange=null)},beforeUnmount(){var p,m;this.iframe&&(this.iframe.src="about:blank");const e=this.iframe,i=this.contentElement,s=this.getView();if(s){(p=this.pluginViews)==null||p.forEach(c=>{var S;(S=c==null?void 0:c.destroy)==null||S.call(c)});const f=q.cleanupAndDestroyProseMirrorView(s);(m=f==null?void 0:f.parentNode)==null||m.removeChild(f)}this.view&&q.nullifyObjectProperties(this.view),this.view=void 0,this._view=null,this.trOnChange=null,this.htmlOnChange=null,this.pasteEvent=void 0,this.valueisUpdated=!1,this._prevValue=void 0,this.pluginViews&&(this.pluginViews.length=0,this.pluginViews=null),this.iframe=void 0,this.contentElement=void 0,e&&q.cleanupIframe(e,i),this.updateGuid=void 0,this.linkDialog=!1},unmounted(){this.view=void 0,this._view=null,this.iframe=void 0,this.contentElement=void 0,this.pluginViews=null},render(){let e=100;const{tools:i=[],defaultEditMode:s="iframe",preserveWhitespace:p="full",style:m,value:f}=this.$props,c=this.getView(),S=ie.provideLocalizationService(this),w=this.showLicenseWatermark?r.createVNode(d.WatermarkOverlay,{message:this.licenseMessage},null):null;if(this.view){const o=O.editorPropsKey.getState(this.view.state);o.preserveWhitespace=p}let k=this.$props.contentStyle;k===void 0&&(m||{}).height===void 0&&(k={height:"300px"});const C=function(){return this.linkDialog&&r.createVNode(D.InsertLinkDialog,{view:c,settings:H,dir:this.$props.dir,onClose:this.handleClose},null)},V=function(o,u){const h=T[o]||o,F=function(){let E;return o==="ForeColor"?E=S.toLanguageString(v.keys.foregroundColorAriaLabel,v.messages[v.keys.foregroundColorAriaLabel]):o==="BackColor"&&(E=S.toLanguageString(v.keys.backgroundColor,v.messages[v.keys.backgroundColor])),E};if(T[o]){e++;const E={view:c,dir:this.$props.dir,key:e,updateGuid:this.updateGuid,settings:T[o].props,...T[o].props,ariaLabel:F()};return r.h(r.markRaw(T[o].comp),E)}else{if(h==="Separator")return r.createVNode(P.ToolbarSeparator,{key:e},null);{const E=d.templateRendering.call(this,h.render,d.getListeners.call(this));return d.getTemplate.call(this,{h:r.h,template:E,defaultRendering:null,additionalListeners:{},additionalProps:{view:c,dir:this.$props.dir,updateGuid:this.updateGuid,key:e,settings:h.props}})}}},l=function(o,u){return o.map(function(h){return V.call(this,h,u)},this)},a=i.map(function(o,u){let h;return Array.isArray(o)?r.createVNode(P.ButtonGroup,{key:`group-${u}-${o.join("-")}`},U(h=l.call(this,o,u))?h:{default:()=>[h]}):V.call(this,o,u)},this);return r.createVNode("div",{class:d.classNames("k-editor",{"k-editor-resizable":this.$props.resizable}),dir:this.$props.dir},[a.length>0&&r.createVNode(P.Toolbar,{overflow:"none",class:"k-editor-toolbar",keyboardNavigation:this.$props.keyboardNavigation},U(a)?a:{default:()=>[a]}),s==="iframe"?r.createVNode("div",{class:"k-editor-content"},[r.createVNode("iframe",{ref:d.setRef(this,"iframe"),title:S.toLanguageString(v.keys.iframeTitle,v.messages[v.keys.iframeTitle]),style:k,class:"k-iframe"},null)]):r.createVNode("div",{style:k,class:"k-editor-content"},[r.createVNode("div",{ref:d.setRef(this,"contentElement"),role:"textbox","aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-label":this.$props.ariaLabel},null)]),C.call(this),w])},methods:{getView(){return this.view},getHTML(){const e=this.getView();return e?b.EditorUtils.getHtml(e.state):""},setHTML(e){const i=this.getView();i&&b.EditorUtils.setHtml(i,e)},focus(){this.getView()&&this.getView().focus()},updateTools(e){this.view=e,this.updateGuid=d.guid()},initialize(){const e=this.iframe&&this.iframe.contentWindow;if(e){const l=e.document;[$.defaultStyle,$.tablesStyles,this.$props.dir==="rtl"?$.rtlStyles:void 0].forEach(o=>{if(o){const u=l.createElement("style");u.appendChild(l.createTextNode(o)),l.head.appendChild(u)}});const a=l.createElement("meta");a.setAttribute("charset","utf-8"),l.head.appendChild(a),this.contentElement=l.createElement("div"),l.body.appendChild(this.contentElement),this.contentElement.classList.add("k-content"),this.contentElement.setAttribute("role","main")}const i=this.contentElement;if(!i)return;const{preserveWhitespace:s="full"}=this.$props,p=this,m=function(l){p.view=l,p.updateGuid=d.guid()};let f=[new n.Plugin({view:l=>{const a={update:m,destroy:()=>{const o=p.pluginViews.indexOf(a);o>-1&&p.pluginViews.splice(o,1)}};return p.pluginViews.push(a),a},key:new n.PluginKey("toolbar-tools-update-plugin")}),new n.Plugin({filterTransaction:this.filterTransaction,key:new n.PluginKey("onExecute-event-plugin")}),new n.Plugin({key:O.editorPropsKey,state:{init:()=>({preserveWhitespace:s}),apply:(l,a)=>a}}),n.spacesFix(),n.history(),n.dropCursor(),n.gapCursor(),n.tableEditing()],c={...b.EditorUtils.getShortcuts({types:{listItem:"list_item",hardBreak:"hard_break"},toolsSettings:{bold:oe,italic:se,underline:ne}}),"Mod-k":()=>{const{linkDialog:l}=this.$data,a=this.getView();if(a){const o=a.state,u=o.selection.empty,h=n.getMark(o,o.schema.marks[H.mark]);!l&&!(u&&!h)&&(this.linkDialog=!0)}return!l}};const{defaultContent:S="",value:w}=this.$props,M=w&&typeof w!="string"?r.toRaw(w):b.EditorUtils.createDocument(new n.Schema({nodes:_.nodes,marks:n.marks}),w||S,{preserveWhitespace:s}),k={state:n.EditorState.create({plugins:[...f,n.keymap(c),n.keymap(n.baseKeymap)],doc:M}),transformPastedHTML:this.onPasteHtml,dispatchTransaction:this.dispatchTransaction,handleDOMEvents:{focus:this.onFocus,blur:this.onBlur,paste:this.onPaste}},C={plugins:f,shortcuts:c,target:p,viewProps:k,dom:i};this.$emit("loaded",C);const V=this.$props.extendView&&this.$props.extendView(C)||new n.EditorView({mount:i},k);this.view=r.markRaw(V)},filterTransaction(e,i){const s={target:this,transaction:e,state:i};return this.$emit("execute",s),!0},onPasteHtml(e){if(this.$props.pasteHtml&&this.pasteEvent){const i={target:this,pastedHtml:e,event:this.pasteEvent},s=this.$props.pasteHtml(i);if(this.pasteEvent=void 0,typeof s=="string")return s}return e},dispatchTransaction(e){const i=e.docChanged;if(i){this.trOnChange=e;const s=e.doc,p=e.doc.type.schema,m=this,f={target:m,value:s,get html(){return m.htmlOnChange=b.EditorUtils.getHtml({doc:s,schema:p}),m.htmlOnChange},transaction:e,schema:p};this.$emit("change",f)}this.getView()&&(this.$props.value===void 0||!i)&&this.getView().updateState(this.getView().state.apply(e))},onFocus(e,i){const s={target:this,event:i};return this.$emit("focus",s),!1},onBlur(e,i){const s={target:this,event:i};return this.$emit("blur",s),!1},onPaste(e,i){return this.$props.pasteHtml&&(this.pasteEvent=i),!1},handleClose(){this.linkDialog=!1},computedValue(){return this.trOnChange!==null?this.trOnChange.doc:this.$props.value!==void 0?this.$props.value:this.getView()?this.getView().state.doc:this.$props.defaultContent||""}}});exports.Editor=re;exports.allTools=T;