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

package/dist/es/Editor.js

@@ -0,0 +1,697 @@
+var __assign = this && this.__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 = this && this.__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;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var markRaw = allVue.markRaw;
+import { ButtonGroup, Toolbar } from '@progress/kendo-vue-buttons';
+import { classNames, validatePackage, getTemplate, getListeners, templateRendering, guid } from '@progress/kendo-vue-common';
+import { EditorState, Plugin, PluginKey, EditorView, Schema, baseKeymap, keymap, history, dropCursor, gapCursor, getMark, spacesFix, tableEditing } from '@progress/kendo-editor-common';
+import { marks, nodes } from './config/schema';
+import { defaultStyle, tablesStyles, rtlStyles } from './config/defaultStyles';
+import { EditorToolsSettings } from './config/toolsSettings';
+import { InsertLinkDialog } from './dialogs/insertLink';
+import { EditorUtils } from './utils';
+import { editorPropsKey } from './utils/props-key';
+import { updateEditorValue } from './utils/controlled-value';
+var link = EditorToolsSettings.link,
+    bold = EditorToolsSettings.bold,
+    italic = EditorToolsSettings.italic,
+    underline = EditorToolsSettings.underline;
+import { firefox } from './utils/browser-detection';
+import { packageMetadata } from './package-metadata';
+import { Align } from './tools/Align';
+import { Indent } from './tools/Indent';
+import { List } from './tools/lists';
+import { Outdent } from './tools/Outdent';
+import { InlineFormat } from './tools/InlineFormat';
+import { FontName } from './tools/fontStyle';
+import { FormatBlock } from './tools/formatBlock';
+import { ProseMirror } from './tools/proseMirrorTool';
+import { LinkTool } from './tools/insertLink';
+import { Unlink } from './tools/unlink';
+import { CleanFormatting } from './tools/cleanFormatting';
+import { SelectAll } from './tools/selectAll';
+import { InsertImage } from './tools/InsertImage';
+import { InsertTable } from './tools/insertTable/tool';
+import { ViewHtml } from './tools/viewHtml';
+import { Pdf } from './tools/pdf';
+import { Print } from './tools/print';
+import { FindAndReplace } from './tools/findReplace';
+import { ApplyColor } from './tools/applyColor';
+export var allTools = {
+  'Bold': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.bold
+  },
+  'Italic': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.italic
+  },
+  'Underline': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.underline
+  },
+  'Strikethrough': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.strikethrough
+  },
+  'Subscript': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.subscript
+  },
+  'Superscript': {
+    comp: InlineFormat,
+    props: EditorToolsSettings.superscript
+  },
+  'AlignLeft': {
+    comp: Align,
+    props: EditorToolsSettings.alignLeft
+  },
+  'AlignCenter': {
+    comp: Align,
+    props: EditorToolsSettings.alignCenter
+  },
+  'AlignRight': {
+    comp: Align,
+    props: EditorToolsSettings.alignRight
+  },
+  'AlignJustify': {
+    comp: Align,
+    props: EditorToolsSettings.alignJustify
+  },
+  'Indent': {
+    comp: Indent,
+    props: EditorToolsSettings.indent
+  },
+  'Outdent': {
+    comp: Outdent,
+    props: EditorToolsSettings.outdent
+  },
+  'OrderedList': {
+    comp: List,
+    props: EditorToolsSettings.orderedList
+  },
+  'UnorderedList': {
+    comp: List,
+    props: EditorToolsSettings.bulletList
+  },
+  'FontSize': {
+    comp: FontName,
+    props: EditorToolsSettings.fontSize
+  },
+  'FontName': {
+    comp: FontName,
+    props: EditorToolsSettings.fontName
+  },
+  'FormatBlock': {
+    comp: FormatBlock,
+    props: EditorToolsSettings.formatBlock
+  },
+  'Undo': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.undo
+  },
+  'Redo': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.redo
+  },
+  'Link': {
+    comp: LinkTool,
+    props: EditorToolsSettings.link
+  },
+  'Unlink': {
+    comp: Unlink,
+    props: EditorToolsSettings.unlink
+  },
+  'InsertImage': {
+    comp: InsertImage,
+    props: EditorToolsSettings.image
+  },
+  'ViewHtml': {
+    comp: ViewHtml,
+    props: EditorToolsSettings.viewHtml
+  },
+  'CleanFormatting': {
+    comp: CleanFormatting,
+    props: EditorToolsSettings.cleanFormatting
+  },
+  'SelectAll': {
+    comp: SelectAll,
+    props: EditorToolsSettings.selectAll
+  },
+  'InsertTable': {
+    comp: InsertTable,
+    props: EditorToolsSettings.insertTable
+  },
+  'MergeCells': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.mergeCells
+  },
+  'SplitCell': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.splitCell
+  },
+  'AddRowBefore': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.addRowBefore
+  },
+  'AddRowAfter': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.addRowAfter
+  },
+  'AddColumnBefore': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.addColumnBefore
+  },
+  'AddColumnAfter': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.addColumnAfter
+  },
+  'DeleteRow': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.deleteRow
+  },
+  'DeleteColumn': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.deleteColumn
+  },
+  'DeleteTable': {
+    comp: ProseMirror,
+    props: EditorToolsSettings.deleteTable
+  },
+  'Print': {
+    comp: Print,
+    props: EditorToolsSettings.print
+  },
+  'Pdf': {
+    comp: Pdf,
+    props: EditorToolsSettings.pdf
+  },
+  'InsertFile': {
+    comp: LinkTool,
+    props: EditorToolsSettings.insertFile
+  },
+  'FindAndReplace': {
+    comp: FindAndReplace,
+    props: EditorToolsSettings.findAndReplace
+  },
+  'ForeColor': {
+    comp: ApplyColor,
+    props: EditorToolsSettings.foreColor
+  },
+  'BackColor': {
+    comp: ApplyColor,
+    props: 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() {
+    validatePackage(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 || !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;
+    }
+
+    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 = 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(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 = allTools[currentTool] || currentTool;
+
+      if (allTools[currentTool]) {
+        var toolProps = __assign({
+          view: this.view,
+          dir: this.$props.dir,
+          key: guid(),
+          settings: allTools[currentTool].props
+        }, allTools[currentTool].props);
+
+        return h(this.v3 ? markRaw(allTools[currentTool].comp) : allTools[currentTool].comp, this.v3 ? toolProps : {
+          props: toolProps
+        });
+      } else {
+        var tool = templateRendering.call(this, ct, getListeners.call(this));
+        return 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(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": 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(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 (firefox) {
+        this.initialize();
+      }
+    },
+    initialize: function initialize() {
+      var _this = this;
+
+      var iframeWindow = this.iframe && this.iframe.contentWindow;
+
+      if (iframeWindow) {
+        var iframeDocument_1 = iframeWindow.document;
+        [defaultStyle, tablesStyles, this.$props.dir === 'rtl' ? 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 Plugin({
+        view: function view() {
+          return {
+            update: _this.updateTools
+          };
+        },
+        key: new PluginKey('toolbar-tools-update-plugin')
+      }), new Plugin({
+        filterTransaction: this.filterTransaction,
+        key: new PluginKey('onExecute-event-plugin')
+      }), new Plugin({
+        key: editorPropsKey,
+        state: {
+          init: function init() {
+            return {
+              preserveWhitespace: preserveWhitespace
+            };
+          },
+          apply: function apply(_, val) {
+            return val;
+          }
+        }
+      }), spacesFix(), history(), dropCursor(), gapCursor(), tableEditing()];
+
+      var shortcuts = __assign(__assign({}, 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 = 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 : EditorUtils.createDocument(new Schema({
+        nodes: nodes,
+        marks: marks
+      }), value || defaultContent, {
+        preserveWhitespace: preserveWhitespace
+      });
+      var viewProps = {
+        state: EditorState.create({
+          plugins: __spreadArrays(plugins, [keymap(shortcuts), keymap(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 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_1 = transaction.doc.type.schema;
+        var target_1 = this;
+        var event_2 = {
+          target: target_1,
+          value: doc_1,
+
+          get html() {
+            target_1.htmlOnChange = EditorUtils.getHtml({
+              doc: doc_1,
+              schema: schema_1
+            });
+            return target_1.htmlOnChange;
+          },
+
+          transaction: transaction,
+          schema: schema_1
+        };
+        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;
+    }
+  }
+};
+var EditorVue3 = Editor;
+export { Editor, EditorVue3 };