@progress/kendo-vue-editor 2.7.1 → 2.7.2-dev.202201020746

package/dist/npm/Editor.js

@@ -0,0 +1,738 @@
+"use strict";
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __spreadArrays = undefined && undefined.__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorVue3 = exports.Editor = exports.allTools = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var markRaw = allVue.markRaw;
+
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var kendo_editor_common_1 = require("@progress/kendo-editor-common");
+
+var schema_1 = require("./config/schema");
+
+var defaultStyles_1 = require("./config/defaultStyles");
+
+var toolsSettings_1 = require("./config/toolsSettings");
+
+var insertLink_1 = require("./dialogs/insertLink");
+
+var utils_1 = require("./utils");
+
+var props_key_1 = require("./utils/props-key");
+
+var controlled_value_1 = require("./utils/controlled-value");
+
+var link = toolsSettings_1.EditorToolsSettings.link,
+    bold = toolsSettings_1.EditorToolsSettings.bold,
+    italic = toolsSettings_1.EditorToolsSettings.italic,
+    underline = toolsSettings_1.EditorToolsSettings.underline;
+
+var browser_detection_1 = require("./utils/browser-detection");
+
+var package_metadata_1 = require("./package-metadata");
+
+var Align_1 = require("./tools/Align");
+
+var Indent_1 = require("./tools/Indent");
+
+var lists_1 = require("./tools/lists");
+
+var Outdent_1 = require("./tools/Outdent");
+
+var InlineFormat_1 = require("./tools/InlineFormat");
+
+var fontStyle_1 = require("./tools/fontStyle");
+
+var formatBlock_1 = require("./tools/formatBlock");
+
+var proseMirrorTool_1 = require("./tools/proseMirrorTool");
+
+var insertLink_2 = require("./tools/insertLink");
+
+var unlink_1 = require("./tools/unlink");
+
+var cleanFormatting_1 = require("./tools/cleanFormatting");
+
+var selectAll_1 = require("./tools/selectAll");
+
+var InsertImage_1 = require("./tools/InsertImage");
+
+var tool_1 = require("./tools/insertTable/tool");
+
+var viewHtml_1 = require("./tools/viewHtml");
+
+var pdf_1 = require("./tools/pdf");
+
+var print_1 = require("./tools/print");
+
+var findReplace_1 = require("./tools/findReplace");
+
+var applyColor_1 = require("./tools/applyColor");
+
+exports.allTools = {
+  'Bold': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.bold
+  },
+  'Italic': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.italic
+  },
+  'Underline': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.underline
+  },
+  'Strikethrough': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.strikethrough
+  },
+  'Subscript': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.subscript
+  },
+  'Superscript': {
+    comp: InlineFormat_1.InlineFormat,
+    props: toolsSettings_1.EditorToolsSettings.superscript
+  },
+  'AlignLeft': {
+    comp: Align_1.Align,
+    props: toolsSettings_1.EditorToolsSettings.alignLeft
+  },
+  'AlignCenter': {
+    comp: Align_1.Align,
+    props: toolsSettings_1.EditorToolsSettings.alignCenter
+  },
+  'AlignRight': {
+    comp: Align_1.Align,
+    props: toolsSettings_1.EditorToolsSettings.alignRight
+  },
+  'AlignJustify': {
+    comp: Align_1.Align,
+    props: toolsSettings_1.EditorToolsSettings.alignJustify
+  },
+  'Indent': {
+    comp: Indent_1.Indent,
+    props: toolsSettings_1.EditorToolsSettings.indent
+  },
+  'Outdent': {
+    comp: Outdent_1.Outdent,
+    props: toolsSettings_1.EditorToolsSettings.outdent
+  },
+  'OrderedList': {
+    comp: lists_1.List,
+    props: toolsSettings_1.EditorToolsSettings.orderedList
+  },
+  'UnorderedList': {
+    comp: lists_1.List,
+    props: toolsSettings_1.EditorToolsSettings.bulletList
+  },
+  'FontSize': {
+    comp: fontStyle_1.FontName,
+    props: toolsSettings_1.EditorToolsSettings.fontSize
+  },
+  'FontName': {
+    comp: fontStyle_1.FontName,
+    props: toolsSettings_1.EditorToolsSettings.fontName
+  },
+  'FormatBlock': {
+    comp: formatBlock_1.FormatBlock,
+    props: toolsSettings_1.EditorToolsSettings.formatBlock
+  },
+  'Undo': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.undo
+  },
+  'Redo': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.redo
+  },
+  'Link': {
+    comp: insertLink_2.LinkTool,
+    props: toolsSettings_1.EditorToolsSettings.link
+  },
+  'Unlink': {
+    comp: unlink_1.Unlink,
+    props: toolsSettings_1.EditorToolsSettings.unlink
+  },
+  'InsertImage': {
+    comp: InsertImage_1.InsertImage,
+    props: toolsSettings_1.EditorToolsSettings.image
+  },
+  'ViewHtml': {
+    comp: viewHtml_1.ViewHtml,
+    props: toolsSettings_1.EditorToolsSettings.viewHtml
+  },
+  'CleanFormatting': {
+    comp: cleanFormatting_1.CleanFormatting,
+    props: toolsSettings_1.EditorToolsSettings.cleanFormatting
+  },
+  'SelectAll': {
+    comp: selectAll_1.SelectAll,
+    props: toolsSettings_1.EditorToolsSettings.selectAll
+  },
+  'InsertTable': {
+    comp: tool_1.InsertTable,
+    props: toolsSettings_1.EditorToolsSettings.insertTable
+  },
+  'MergeCells': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.mergeCells
+  },
+  'SplitCell': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.splitCell
+  },
+  'AddRowBefore': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.addRowBefore
+  },
+  'AddRowAfter': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.addRowAfter
+  },
+  'AddColumnBefore': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.addColumnBefore
+  },
+  'AddColumnAfter': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.addColumnAfter
+  },
+  'DeleteRow': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.deleteRow
+  },
+  'DeleteColumn': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.deleteColumn
+  },
+  'DeleteTable': {
+    comp: proseMirrorTool_1.ProseMirror,
+    props: toolsSettings_1.EditorToolsSettings.deleteTable
+  },
+  'Print': {
+    comp: print_1.Print,
+    props: toolsSettings_1.EditorToolsSettings.print
+  },
+  'Pdf': {
+    comp: pdf_1.Pdf,
+    props: toolsSettings_1.EditorToolsSettings.pdf
+  },
+  'InsertFile': {
+    comp: insertLink_2.LinkTool,
+    props: toolsSettings_1.EditorToolsSettings.insertFile
+  },
+  'FindAndReplace': {
+    comp: findReplace_1.FindAndReplace,
+    props: toolsSettings_1.EditorToolsSettings.findAndReplace
+  },
+  'ForeColor': {
+    comp: applyColor_1.ApplyColor,
+    props: toolsSettings_1.EditorToolsSettings.foreColor
+  },
+  'BackColor': {
+    comp: applyColor_1.ApplyColor,
+    props: toolsSettings_1.EditorToolsSettings.backColor
+  }
+}; // tslint:enable:max-line-length
+
+var Editor = {
+  name: 'KendoEditor',
+  props: {
+    defaultContent: String,
+    value: [Object, String],
+    defaultEditMode: {
+      type: String,
+      default: 'iframe',
+      validator: function validator(value) {
+        return ['iframe', 'div'].includes(value);
+      }
+    },
+    contentStyle: Object,
+    dir: String,
+    tools: Array,
+    keyboardNavigation: Boolean,
+    resizable: Boolean,
+    preserveWhitespace: {
+      type: [String, Boolean],
+      default: 'full',
+      validator: function validator(value) {
+        return [true, false, 'full'].includes(value);
+      }
+    }
+  },
+  data: function data() {
+    return {
+      view: undefined,
+      linkDialog: false
+    };
+  },
+  created: function created() {
+    kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
+  },
+  mounted: function mounted() {
+    this.iframe = this.v3 ? this.iframeRef : this.$refs.iframe;
+    this.contentElement = this.v3 ? this.contentElementRef : this.$refs.contentElement;
+
+    if (!this.iframe || !browser_detection_1.firefox) {
+      this.initialize();
+    }
+  },
+  watch: {
+    value: function value(_newNextMatch, oldMatch) {
+      this._prevValue = oldMatch;
+    }
+  },
+  updated: function updated() {
+    var value = this.$props.value;
+    var view = this.view;
+
+    if (value === undefined || !view) {
+      return;
+    }
+
+    controlled_value_1.updateEditorValue(view, value, this._prevValue, this.trOnChange, this.htmlOnChange);
+    this.trOnChange = null;
+    this.htmlOnChange = null;
+  },
+  destroyed: !!gh ? undefined : function () {
+    if (this.view) {
+      this.view.destroy();
+    }
+
+    this.view = undefined;
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.view) {
+      this.view.destroy();
+    }
+
+    this.view = undefined;
+  },
+  computed: {
+    computedValue: function computedValue() {
+      if (this.trOnChange !== null) {
+        return this.trOnChange.doc;
+      } else if (this.$props.value !== undefined) {
+        return this.$props.value;
+      } else if (this.view) {
+        return this.view.state.doc;
+      }
+
+      return this.$props.defaultContent || '';
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        _b = _a.tools,
+        tools = _b === void 0 ? [] : _b,
+        _c = _a.defaultEditMode,
+        defaultEditMode = _c === void 0 ? 'iframe' : _c,
+        _d = _a.preserveWhitespace,
+        preserveWhitespace = _d === void 0 ? 'full' : _d,
+        style = _a.style;
+
+    if (this.view) {
+      var editorProps = props_key_1.editorPropsKey.getState(this.view.state);
+      editorProps.preserveWhitespace = preserveWhitespace;
+    }
+
+    var contentStyle = this.$props.contentStyle;
+
+    if (contentStyle === undefined && (style || {}).height === undefined) {
+      contentStyle = {
+        height: '300px'
+      };
+    }
+
+    var renderDialog = function renderDialog() {
+      return this.linkDialog && // @ts-ignore function children
+      h(insertLink_1.InsertLinkDialog, {
+        view: this.view,
+        attrs: this.v3 ? undefined : {
+          view: this.view,
+          settings: link,
+          dir: this.$props.dir
+        },
+        settings: link,
+        dir: this.$props.dir,
+        onClose: this.handleClose,
+        on: this.v3 ? undefined : {
+          "close": this.handleClose
+        }
+      });
+    };
+
+    var renderTool = function renderTool(currentTool, index) {
+      var ct = exports.allTools[currentTool] || currentTool;
+
+      if (exports.allTools[currentTool]) {
+        var toolProps = __assign({
+          view: this.view,
+          dir: this.$props.dir,
+          key: kendo_vue_common_1.guid(),
+          settings: exports.allTools[currentTool].props
+        }, exports.allTools[currentTool].props);
+
+        return h(this.v3 ? markRaw(exports.allTools[currentTool].comp) : exports.allTools[currentTool].comp, this.v3 ? toolProps : {
+          props: toolProps
+        });
+      } else {
+        var tool = kendo_vue_common_1.templateRendering.call(this, ct, kendo_vue_common_1.getListeners.call(this));
+        return kendo_vue_common_1.getTemplate.call(this, {
+          h: h,
+          template: tool,
+          defaultRendering: null,
+          additionalListeners: {},
+          additionalProps: {
+            view: this.view,
+            dir: this.$props.dir,
+            key: index
+          }
+        });
+      } // return tool.type === ToolbarSeparator ? <Tool key={index} /> : tool;
+
+    };
+
+    var renderTools = function renderTools(item, index) {
+      return item.map(function (it) {
+        return renderTool.call(this, it, index);
+      }, this);
+    };
+
+    var buttons = tools.map(function (item, index) {
+      var _this2 = this;
+
+      return Array.isArray(item) ? // @ts-ignore function children
+      h(kendo_vue_buttons_1.ButtonGroup, {
+        key: index
+      }, this.v3 ? function () {
+        return [renderTools.call(_this2, item, index)];
+      } : [renderTools.call(_this2, item, index)]) : renderTool.call(this, item, index);
+    }, this);
+    return h("div", {
+      "class": kendo_vue_common_1.classNames('k-widget k-editor', {
+        'k-editor-resizable': this.$props.resizable
+      }),
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      }
+    }, [buttons.length > 0 && // @ts-ignore function children
+    h(kendo_vue_buttons_1.Toolbar, {
+      keyboardNavigation: this.$props.keyboardNavigation,
+      attrs: this.v3 ? undefined : {
+        keyboardNavigation: this.$props.keyboardNavigation
+      }
+    }, this.v3 ? function () {
+      return [buttons];
+    } : [buttons]), defaultEditMode === 'iframe' ? h("div", {
+      "class": "k-editor-content"
+    }, [h("iframe", {
+      onLoad: this.iframeLoad,
+      on: this.v3 ? undefined : {
+        "load": this.iframeLoad
+      },
+      ref: this.v3 ? function (el) {
+        _this.iframeRef = el;
+      } : 'iframe',
+      frameBorder: "0",
+      attrs: this.v3 ? undefined : {
+        frameBorder: "0"
+      },
+      style: contentStyle,
+      "class": "k-iframe"
+    })]) : h("div", {
+      style: contentStyle,
+      "class": "k-editor-content"
+    }, [h("div", {
+      ref: this.v3 ? function (el) {
+        _this.contentElementRef = el;
+      } : 'contentElement',
+      suppressContentEditableWarning: true,
+      attrs: this.v3 ? undefined : {
+        suppressContentEditableWarning: true
+      }
+    })]), renderDialog.call(this)]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.view) {
+        this.view.focus();
+      }
+    },
+    updateTools: function updateTools(view) {
+      this.view = view;
+    },
+    iframeLoad: function iframeLoad() {
+      if (browser_detection_1.firefox) {
+        this.initialize();
+      }
+    },
+    initialize: function initialize() {
+      var _this = this;
+
+      var iframeWindow = this.iframe && this.iframe.contentWindow;
+
+      if (iframeWindow) {
+        var iframeDocument_1 = iframeWindow.document;
+        [defaultStyles_1.defaultStyle, defaultStyles_1.tablesStyles, this.$props.dir === 'rtl' ? defaultStyles_1.rtlStyles : undefined].forEach(function (styles) {
+          if (styles) {
+            var style = iframeDocument_1.createElement('style');
+            style.appendChild(iframeDocument_1.createTextNode(styles));
+            iframeDocument_1.head.appendChild(style);
+          }
+        });
+        var meta = iframeDocument_1.createElement('meta');
+        meta.setAttribute('charset', 'utf-8');
+        iframeDocument_1.head.appendChild(meta); // The content has to be wrapped because the `dropCursor`
+        // plugin raises a `body.offsetParent is null` error.
+
+        this.contentElement = iframeDocument_1.createElement('div');
+        iframeDocument_1.body.appendChild(this.contentElement);
+        this.contentElement.classList.add('k-content');
+      }
+
+      var dom = this.contentElement;
+
+      if (!dom) {
+        return;
+      }
+
+      var _a = this.$props.preserveWhitespace,
+          preserveWhitespace = _a === void 0 ? 'full' : _a;
+      var target = this;
+      var plugins = [// https://prosemirror.net/docs/ref/#state.PluginSpec
+      new kendo_editor_common_1.Plugin({
+        view: function view() {
+          return {
+            update: _this.updateTools
+          };
+        },
+        key: new kendo_editor_common_1.PluginKey('toolbar-tools-update-plugin')
+      }), new kendo_editor_common_1.Plugin({
+        filterTransaction: this.filterTransaction,
+        key: new kendo_editor_common_1.PluginKey('onExecute-event-plugin')
+      }), new kendo_editor_common_1.Plugin({
+        key: props_key_1.editorPropsKey,
+        state: {
+          init: function init() {
+            return {
+              preserveWhitespace: preserveWhitespace
+            };
+          },
+          apply: function apply(_, val) {
+            return val;
+          }
+        }
+      }), kendo_editor_common_1.spacesFix(), kendo_editor_common_1.history(), kendo_editor_common_1.dropCursor(), kendo_editor_common_1.gapCursor(), kendo_editor_common_1.tableEditing()];
+
+      var shortcuts = __assign(__assign({}, utils_1.EditorUtils.getShortcuts({
+        types: {
+          listItem: 'list_item',
+          hardBreak: 'hard_break'
+        },
+        toolsSettings: {
+          bold: bold,
+          italic: italic,
+          underline: underline
+        }
+      })), {
+        'Mod-k': function ModK() {
+          var linkDialog = _this.$data.linkDialog;
+          var editorView = _this.view;
+
+          if (editorView) {
+            var editorState = editorView.state;
+            var collapsed = editorState.selection.empty;
+            var linkMark = kendo_editor_common_1.getMark(editorState, editorState.schema.marks[link.mark]);
+            var disabled = collapsed && !linkMark;
+
+            if (!linkDialog && !disabled) {
+              _this.linkDialog = true;
+            }
+          }
+
+          return !linkDialog;
+        }
+      });
+
+      var _b = this.$props,
+          _c = _b.defaultContent,
+          defaultContent = _c === void 0 ? '' : _c,
+          value = _b.value,
+          onMount = _b.onMount;
+      var doc = value && typeof value !== 'string' ? value : utils_1.EditorUtils.createDocument(new kendo_editor_common_1.Schema({
+        nodes: schema_1.nodes,
+        marks: schema_1.marks
+      }), value || defaultContent, {
+        preserveWhitespace: preserveWhitespace
+      });
+      var viewProps = {
+        state: kendo_editor_common_1.EditorState.create({
+          plugins: __spreadArrays(plugins, [kendo_editor_common_1.keymap(shortcuts), kendo_editor_common_1.keymap(kendo_editor_common_1.baseKeymap)]),
+          doc: doc
+        }),
+        transformPastedHTML: this.onPasteHtml,
+        dispatchTransaction: this.dispatchTransaction,
+        handleDOMEvents: {
+          focus: this.onFocus,
+          blur: this.onBlur,
+          paste: this.onPaste
+        }
+      };
+      var mountEvent = {
+        plugins: plugins,
+        shortcuts: shortcuts,
+        target: target,
+        viewProps: viewProps,
+        dom: dom
+      };
+      var view = this.view = onMount && onMount.call(undefined, mountEvent) || new kendo_editor_common_1.EditorView({
+        mount: dom
+      }, viewProps);
+      this.view = view;
+    },
+    filterTransaction: function filterTransaction(transaction, state) {
+      var event = {
+        target: this,
+        transaction: transaction,
+        state: state
+      };
+      return this.$emit('execute', event);
+    },
+    onPasteHtml: function onPasteHtml(html) {
+      if (this.$props.onPasteHtml && this.pasteEvent) {
+        var event_1 = {
+          target: this,
+          pastedHtml: html,
+          nativeEvent: this.pasteEvent
+        };
+        var newHtml = this.$props.onPasteHtml.call(undefined, event_1);
+        this.pasteEvent = undefined;
+
+        if (typeof newHtml === 'string') {
+          return newHtml;
+        }
+      }
+
+      return html;
+    },
+    dispatchTransaction: function dispatchTransaction(transaction) {
+      var docChanged = transaction.docChanged;
+
+      if (docChanged) {
+        this.trOnChange = transaction;
+        var doc_1 = transaction.doc,
+            schema_2 = transaction.doc.type.schema;
+        var target_1 = this;
+        var event_2 = {
+          target: target_1,
+          value: doc_1,
+
+          get html() {
+            target_1.htmlOnChange = utils_1.EditorUtils.getHtml({
+              doc: doc_1,
+              schema: schema_2
+            });
+            return target_1.htmlOnChange;
+          },
+
+          transaction: transaction,
+          schema: schema_2
+        };
+        this.$emit('change', event_2);
+      }
+
+      if (this.view && (this.$props.value === undefined || !docChanged)) {
+        this.view.updateState(this.view.state.apply(transaction));
+      }
+    },
+    onFocus: function onFocus(_view, nativeEvent) {
+      if (this.$props.onFocus) {
+        var event_3 = {
+          target: this,
+          nativeEvent: nativeEvent
+        };
+        this.$emit('focus', event_3);
+      }
+
+      return false;
+    },
+    onBlur: function onBlur(_view, nativeEvent) {
+      if (this.$props.onBlur) {
+        var event_4 = {
+          target: this,
+          nativeEvent: nativeEvent
+        };
+        this.$emit('focus', event_4);
+      }
+
+      return false;
+    },
+    onPaste: function onPaste(_view, nativeEvent) {
+      if (this.$props.onPasteHtml) {
+        this.pasteEvent = nativeEvent;
+      }
+
+      return false;
+    },
+    handleClose: function handleClose() {
+      this.linkDialog = false;
+    }
+  }
+};
+exports.Editor = Editor;
+var EditorVue3 = Editor;
+exports.EditorVue3 = EditorVue3;