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