framework7/components/text-editor.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);document,window;var o=t.$,n=(t.Template7,t.utils),r=(t.device,t.support,t.Class),i=(t.Modal,t.ConstructorMethods),a=(t.ModalMethods,{bold:["bold","format_bold","bold"],italic:["italic","format_italic","italic"],underline:["underline","format_underline","underline"],strikeThrough:["strikethrough","strikethrough_s","strikeThrough"],orderedList:["list_number","format_list_numbered","insertOrderedList"],unorderedList:["list_bullet","format_list_bulleted","insertUnorderedList"],link:["link","link","createLink"],image:["photo","image","insertImage"],paragraph:["paragraph",'<i class="icon">¶</i>',"formatBlock.P"],h1:['<i class="icon">H<sub>1</sub></i>','<i class="icon">H<sub>1</sub></i>',"formatBlock.H1"],h2:['<i class="icon">H<sub>2</sub></i>','<i class="icon">H<sub>2</sub></i>',"formatBlock.H2"],h3:['<i class="icon">H<sub>3</sub></i>','<i class="icon">H<sub>3</sub></i>',"formatBlock.H3"],alignLeft:["text_alignleft","format_align_left","justifyLeft"],alignCenter:["text_aligncenter","format_align_center","justifyCenter"],alignRight:["text_alignright","format_align_right","justifyRight"],alignJustify:["text_justify","format_align_justify","justifyFull"],subscript:["textformat_subscript",'<i class="icon">A<sub>1</sub></i>',"subscript"],superscript:["textformat_superscript",'<i class="icon">A<sup>1</sup></i>',"superscript"],indent:["increase_indent","format_indent_increase","indent"],outdent:["decrease_indent","format_indent_decrease","outdent"]}),s=function(t){function e(e,r){t.call(this,r,[e]);var i=this,a=n.extend({},e.params.textEditor);i.useModulesParams(a),i.params=n.extend(a,r);var s=i.params.el;if(!s)return i;var l=o(s);if(0===l.length)return i;if(l[0].f7TextEditor)return l[0].f7TextEditor;var c=l.children(".text-editor-content");if(c.length||(l.append('<div class="text-editor-content" contenteditable></div>'),c=l.children(".text-editor-content")),n.extend(i,{app:e,$el:l,el:l[0],$contentEl:c,contentEl:c[0]}),"value"in r&&(i.value=i.params.value),"keyboard-toolbar"===i.params.mode&&(e.device.cordova||e.device.android||(i.params.mode="popover")),"string"==typeof i.params.buttons)try{i.params.buttons=JSON.parse(i.params.buttons)}catch(t){throw new Error('Framework7: TextEditor: wrong "buttons" parameter format')}return l[0].f7TextEditor=i,i.onButtonClick=i.onButtonClick.bind(i),i.onFocus=i.onFocus.bind(i),i.onBlur=i.onBlur.bind(i),i.onInput=i.onInput.bind(i),i.onPaste=i.onPaste.bind(i),i.onSelectionChange=i.onSelectionChange.bind(i),i.attachEvents=function(){"toolbar"===i.params.mode&&i.$el.find(".text-editor-toolbar").on("click","button",i.onButtonClick),"keyboard-toolbar"===i.params.mode&&i.$keyboardToolbarEl.on("click","button",i.onButtonClick),"popover"===i.params.mode&&i.popover&&i.popover.$el.on("click","button",i.onButtonClick),i.$contentEl.on("paste",i.onPaste),i.$contentEl.on("focus",i.onFocus),i.$contentEl.on("blur",i.onBlur),i.$contentEl.on("input",i.onInput,!0),o(document).on("selectionchange",i.onSelectionChange)},i.detachEvents=function(){"toolbar"===i.params.mode&&i.$el.find(".text-editor-toolbar").off("click","button",i.onButtonClick),"keyboard-toolbar"===i.params.mode&&i.$keyboardToolbarEl.off("click","button",i.onButtonClick),"popover"===i.params.mode&&i.popover&&i.popover.$el.off("click","button",i.onButtonClick),i.$contentEl.off("paste",i.onPaste),i.$contentEl.off("focus",i.onFocus),i.$contentEl.off("blur",i.onBlur),i.$contentEl.off("input",i.onInput,!0),o(document).off("selectionchange",i.onSelectionChange)},i.useModules(),i.init(),i}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setValue=function(t){return this.value===t?this:(this.value=t,this.$contentEl.html(t),this.$el.trigger("texteditor:change",this.value),this.emit("local::change textEditorChange",this,this.value),this)},e.prototype.getValue=function(){return this.value},e.prototype.createLink=function(){var t,e=this,n=window.getSelection(),r=[];if(n&&n.anchorNode&&o(n.anchorNode).parents(e.$el).length){for(var i=n.anchorNode;i;)r.push(i),i.nextSibling&&i!==n.focusNode||(i=null),i&&(i=i.nextSibling);t=o(r).closest("a").add(o(r).children("a"))}if(t&&t.length)return t.each((function(t,e){var o=window.getSelection(),n=document.createRange();n.selectNodeContents(e),o.removeAllRanges(),o.addRange(n),document.execCommand("unlink",!1),o.removeAllRanges()})),e;var a=e.getSelectionRange();return a?(e.app.dialog.prompt(e.params.linkUrlText,"",(function(t){t&&t.trim().length&&(e.setSelectionRange(a),document.execCommand("createLink",!1,t.trim()))})).$el.find("input").focus(),e):e},e.prototype.insertImage=function(){var t=this,e=t.getSelectionRange();return e?(t.app.dialog.prompt(t.params.imageUrlText,"",(function(o){o&&o.trim().length&&(t.setSelectionRange(e),document.execCommand("insertImage",!1,o.trim()))})).$el.find("input").focus(),t):t},e.prototype.removePlaceholder=function(){this.$contentEl.find(".text-editor-placeholder").remove()},e.prototype.insertPlaceholder=function(){this.$contentEl.append('<div class="text-editor-placeholder">'+this.params.placeholder+"</div>")},e.prototype.onSelectionChange=function(){if("toolbar"!==this.params.mode){var t=window.getSelection(),e=o(t.anchorNode).parents(this.contentEl).length||t.anchorNode===this.contentEl;if("keyboard-toolbar"!==this.params.mode){if("popover"===this.params.mode){var n=o(t.anchorNode).parents(this.popover.el).length||t.anchorNode===this.popover.el;if(!e&&!n)return void this.closePopover();if(!t.isCollapsed&&t.rangeCount){var r=t.getRangeAt(0).getBoundingClientRect();this.openPopover(r.x+(window.scrollX||0),r.y+(window.scrollY||0),r.width,r.height)}else t.isCollapsed&&this.closePopover()}}else e?this.openKeyboardToolbar():this.closeKeyboardToolbar()}},e.prototype.onPaste=function(t){if(this.params.clearFormattingOnPaste&&t.clipboardData&&t.clipboardData.getData){var e=t.clipboardData.getData("text/plain");t.preventDefault(),document.execCommand("insertText",!1,e)}},e.prototype.onInput=function(){var t=this.$contentEl.html();this.$el.trigger("texteditor:input"),this.emit("local:input textEditorInput",this),this.value=t,this.$el.trigger("texteditor:change",this.value),this.emit("local::change textEditorChange",this,this.value)},e.prototype.onFocus=function(){this.removePlaceholder(),this.$contentEl.focus(),this.$el.trigger("texteditor:focus"),this.emit("local::focus textEditorFocus",this)},e.prototype.onBlur=function(){if(this.params.placeholder&&""===this.$contentEl.html()&&this.insertPlaceholder(),"popover"===this.params.mode){var t=window.getSelection(),e=o(t.anchorNode).parents(this.contentEl).length||t.anchorNode===this.contentEl;document.activeElement&&this.popover&&o(document.activeElement).closest(this.popover.$el).length||e||this.closePopover()}if("keyboard-toolbar"===this.params.mode){var n=window.getSelection();o(n.anchorNode).parents(this.contentEl).length||n.anchorNode===this.contentEl||this.closeKeyboardToolbar()}this.$el.trigger("texteditor:blur"),this.emit("local::blur textEditorBlur",this)},e.prototype.onButtonClick=function(t){var e=window.getSelection();if(o(e.anchorNode).parents(this.contentEl).length||e.anchorNode===this.contentEl){var n=o(t.target).closest("button");n.parents("form").length&&t.preventDefault();var r=n.attr("data-button"),i=this.params.customButtons&&this.params.customButtons[r];if(r&&(a[r]||i))if(n.trigger("texteditor:buttonclick",r),this.emit("local::buttonClick textEditorButtonClick",this,r),i)i.onClick&&i.onClick();else{var s=a[r][2];if("createLink"!==s)if("insertImage"!==s)if(0!==s.indexOf("formatBlock"))document.execCommand(s,!1);else{var l=s.split(".")[1],c=o(e.anchorNode);c.parents(l.toLowerCase()).length||c.is(l)?document.execCommand("formatBlock",!1,"div"):document.execCommand("formatBlock",!1,l)}else this.insertImage();else this.createLink()}}},e.prototype.getSelectionRange=function(){if(window.getSelection){var t=window.getSelection();if(t.getRangeAt&&t.rangeCount)return t.getRangeAt(0)}else if(document.selection&&document.selection.createRange)return document.selection.createRange();return null},e.prototype.setSelectionRange=function(t){if(t)if(window.getSelection){var e=window.getSelection();e.removeAllRanges(),e.addRange(t)}else document.selection&&t.select&&t.select()},e.prototype.renderButtons=function(){var t=this,e="";function o(e){var o="md"===t.app.theme?"material-icons":"f7-icons";if(t.params.customButtons&&t.params.customButtons[e])return'<button class="text-editor-button" data-button="'+e+'">'+(t.params.customButtons[e].content||"")+"</button>";if(!a[e])return"";var n=a[e]["md"===t.app.theme?1:0];return('<button class="text-editor-button" data-button="'+e+'">'+(n.indexOf("<")>=0?n:'<i class="'+o+'">'+n+"</i>")+"</button>").trim()}return t.params.buttons.forEach((function(n,r){Array.isArray(n)?(n.forEach((function(t){e+=o(t)})),r<t.params.buttons.length-1&&t.params.dividers&&(e+='<div class="text-editor-button-divider"></div>')):e+=o(n)})),e},e.prototype.createToolbar=function(){this.$el.prepend('<div class="text-editor-toolbar">'+this.renderButtons()+"</div>")},e.prototype.createKeyboardToolbar=function(){var t=this.$el.closest(".theme-dark").length>0||"dark"===this.app.device.prefersColorScheme();this.$keyboardToolbarEl=o('<div class="toolbar toolbar-bottom text-editor-keyboard-toolbar '+(t?"theme-dark":"")+'"><div class="toolbar-inner">'+this.renderButtons()+"</div></div>")},e.prototype.createPopover=function(){var t=this.$el.closest(".theme-dark").length>0;this.popover=this.app.popover.create({content:'\n        <div class="popover '+(t?"theme-light":"theme-dark")+' text-editor-popover">\n          <div class="popover-inner">'+this.renderButtons()+"</div>\n        </div>\n      ",closeByOutsideClick:!1,backdrop:!1})},e.prototype.openKeyboardToolbar=function(){this.$keyboardToolbarEl.parent(this.app.root).length||(this.$el.trigger("texteditor:keyboardopen"),this.emit("local::keyboardOpen textEditorKeyboardOpen",this),this.app.root.append(this.$keyboardToolbarEl))},e.prototype.closeKeyboardToolbar=function(){this.$keyboardToolbarEl.remove(),this.$el.trigger("texteditor:keyboardclose"),this.emit("local::keyboardClose textEditorKeyboardClose",this)},e.prototype.openPopover=function(t,e,o,n){var r=this;r.popover&&(Object.assign(r.popover.params,{targetX:t,targetY:e,targetWidth:o,targetHeight:n}),clearTimeout(r.popoverTimeout),r.popoverTimeout=setTimeout((function(){r.popover&&(r.popover.opened?r.popover.resize():(r.$el.trigger("texteditor:popoveropen"),r.emit("local::popoverOpen textEditorPopoverOpen",r),r.popover.open()))}),400))},e.prototype.closePopover=function(){var t=this;clearTimeout(t.popoverTimeout),t.popover&&t.popover.opened&&(t.popoverTimeout=setTimeout((function(){t.popover&&(t.$el.trigger("texteditor:popoverclose"),t.emit("local::popoverClose textEditorPopoverClose",t),t.popover.close())}),400))},e.prototype.init=function(){return this.value?this.$contentEl.html(this.value):this.value=this.$contentEl.html(),this.params.placeholder&&""===this.value&&this.insertPlaceholder(),"toolbar"===this.params.mode?this.createToolbar():"popover"===this.params.mode?this.createPopover():"keyboard-toolbar"===this.params.mode&&this.createKeyboardToolbar(),this.attachEvents(),this},e.prototype.destroy=function(){var t=this;t.$el.trigger("texteditor:beforedestroy"),t.emit("local::beforeDestroy textEditorBeforeDestroy",t),t.detachEvents(),t.popover&&(t.popover.close(!1),t.popover.destroy()),delete t.$el[0].f7TextEditor,n.deleteProps(t),t=null},e}(r),l={name:"textEditor",params:{textEditor:{el:null,mode:"toolbar",value:void 0,customButtons:null,buttons:[["bold","italic","underline","strikeThrough"],["orderedList","unorderedList"],["link","image"],["paragraph","h1","h2","h3"],["alignLeft","alignCenter","alignRight","alignJustify"],["subscript","superscript"],["indent","outdent"]],dividers:!0,imageUrlText:"Insert image URL",linkUrlText:"Insert link URL",placeholder:null,clearFormattingOnPaste:!0}},create:function(){this.textEditor=n.extend(i({defaultSelector:".text-editor",constructor:s,app:this,domProp:"f7TextEditor"}))},static:{TextEditor:s},on:{tabMounted:function(t){var e=this;o(t).find(".text-editor-init").each((function(t,r){var i=o(r).dataset();e.textEditor.create(n.extend({el:r},i||{}))}))},tabBeforeRemove:function(t){o(t).find(".text-editor-init").each((function(t,e){e.f7TextEditor&&e.f7TextEditor.destroy()}))},pageInit:function(t){var e=this;t.$el.find(".text-editor-init").each((function(t,r){var i=o(r).dataset();e.textEditor.create(n.extend({el:r},i||{}))}))},pageBeforeRemove:function(t){t.$el.find(".text-editor-init").each((function(t,e){e.f7TextEditor&&e.f7TextEditor.destroy()}))}},vnode:{"text-editor-init":{insert:function(t){var e=t.elm,r=o(e).dataset();this.textEditor.create(n.extend({el:e},r||{}))},destroy:function(t){var e=t.elm;e.f7TextEditor&&e.f7TextEditor.destroy()}}}};if(e){if(t.prototype.modules&&t.prototype.modules[l.name])return;t.use(l),t.instance&&(t.instance.useModuleParams(l,t.instance.params),t.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))