@progress/kendo-vue-editor 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/Editor.js

@@ -0,0 +1,813 @@
+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 __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var markRaw = allVue.markRaw;
+import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-vue-buttons';
+import { classNames, validatePackage, getTemplate, getListeners, templateRendering, guid, setRef, getRef } 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.js';
+import { defaultStyle, tablesStyles, rtlStyles } from './config/defaultStyles.js';
+import { EditorToolsSettings } from './config/toolsSettings.js';
+import { InsertLinkDialog } from './dialogs/insertLink.js';
+import { EditorUtils } from './utils.js';
+import { editorPropsKey } from './utils/props-key.js';
+import { updateEditorValue } from './utils/controlled-value.js';
+var link = EditorToolsSettings.link,
+    bold = EditorToolsSettings.bold,
+    italic = EditorToolsSettings.italic,
+    underline = EditorToolsSettings.underline;
+import { firefox } from './utils/browser-detection.js';
+import { packageMetadata } from './package-metadata.js';
+import { Align } from './tools/align.js';
+import { Indent } from './tools/indent.js';
+import { List } from './tools/lists.js';
+import { Outdent } from './tools/outdent.js';
+import { InlineFormat } from './tools/inlineFormat.js';
+import { FontName } from './tools/fontStyle.js';
+import { FormatBlock } from './tools/formatBlock.js';
+import { ProseMirror } from './tools/proseMirrorTool.js';
+import { LinkTool } from './tools/insertLink.js';
+import { Unlink } from './tools/unlink.js';
+import { CleanFormatting } from './tools/cleanFormatting.js';
+import { SelectAll } from './tools/selectAll.js';
+import { InsertImage } from './tools/insertImage.js';
+import { InsertTable } from './tools/insertTable/tool.js';
+import { ViewHtml } from './tools/viewHtml.js';
+import { Pdf } from './tools/pdf.js';
+import { Print } from './tools/print.js';
+import { FindAndReplace } from './tools/findReplace.js';
+import { ApplyColor } from './tools/applyColor.js';
+/** @hidden */
+
+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
+  }
+};
+/**
+ * @hidden
+ */
+
+var EditorVue2 = {
+  name: 'KendoEditor',
+  // @ts-ignore
+  emits: {
+    focus: null,
+    blur: null,
+    change: null,
+    loaded: null,
+    execute: null
+  },
+  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: {
+      type: Boolean,
+      default: true
+    },
+    resizable: Boolean,
+    preserveWhitespace: {
+      type: [String, Boolean],
+      default: 'full',
+      validator: function validator(value) {
+        return [true, false, 'full'].includes(value);
+      }
+    },
+    pasteHtml: Function,
+    extendView: Function
+  },
+  data: function data() {
+    return {
+      updateGuid: guid(),
+      view: undefined,
+      linkDialog: false
+    };
+  },
+  created: function created() {
+    this._view = undefined;
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this.iframe = getRef(this, 'iframe');
+    this.contentElement = getRef(this, '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.getView();
+
+    if (value === undefined || !view) {
+      return;
+    }
+
+    updateEditorValue(view, value, this._prevValue, this.trOnChange, this.htmlOnChange);
+    this.trOnChange = null;
+    this.htmlOnChange = null;
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.getView()) {
+      this.getView().destroy();
+    }
+
+    this.view = undefined;
+    this._view = undefined;
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.getView()) {
+      this.getView().destroy();
+    }
+
+    this.view = undefined;
+    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.getView()) {
+        return this.getView().state.doc;
+      }
+
+      return this.$props.defaultContent || '';
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var toolindex = 100;
+    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;
+    var view = this.getView();
+
+    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: view,
+        attrs: this.v3 ? undefined : {
+          view: 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]) {
+        toolindex++;
+
+        var toolProps = __assign({
+          view: view,
+          dir: this.$props.dir,
+          key: toolindex,
+          updateGuid: this.updateGuid,
+          settings: allTools[currentTool].props
+        }, allTools[currentTool].props);
+
+        return h(this.v3 ? markRaw(allTools[currentTool].comp) : allTools[currentTool].comp, this.v3 ? toolProps : {
+          props: toolProps
+        });
+      } else if (ct === 'Separator') {
+        return (// @ts-ignore
+          h(ToolbarSeparator, {
+            key: toolindex
+          })
+        );
+      } else {
+        var tool = templateRendering.call(this, ct.render, getListeners.call(this));
+        return getTemplate.call(this, {
+          h: h,
+          template: tool,
+          defaultRendering: null,
+          additionalListeners: {},
+          additionalProps: {
+            view: view,
+            dir: this.$props.dir,
+            updateGuid: this.updateGuid,
+            key: toolindex,
+            settings: ct.props
+          }
+        });
+      }
+    };
+
+    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: setRef(this, '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: setRef(this, 'contentElement')
+    })]), renderDialog.call(this)]);
+  },
+  methods: {
+    getView: function getView() {
+      return this.v3 ? this.view : this._view;
+    },
+    getHTML: function getHTML() {
+      var view = this.getView();
+
+      if (view) {
+        return EditorUtils.getHtml(view.state);
+      }
+
+      return '';
+    },
+    setHTML: function setHTML(value) {
+      var view = this.getView();
+
+      if (view) {
+        EditorUtils.setHtml(view, value);
+      }
+    },
+    focus: function focus() {
+      if (this.getView()) {
+        this.getView().focus();
+      }
+    },
+    updateTools: function updateTools(view) {
+      if (this.v3) {
+        this.view = view;
+      } else {
+        this._view = view;
+      }
+
+      if (this.v3) {
+        this.updateGuid = guid();
+      }
+    },
+    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.getView();
+
+          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;
+      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: __spreadArray(__spreadArray([], plugins, true), [keymap(shortcuts), keymap(baseKeymap)], false),
+          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
+      };
+      this.$emit('loaded', mountEvent);
+      var view = this.$props.extendView && this.$props.extendView(mountEvent) || new EditorView({
+        mount: dom
+      }, viewProps);
+
+      if (this.v3) {
+        this.view = markRaw(view);
+      } else {
+        this._view = view;
+      }
+    },
+    filterTransaction: function filterTransaction(transaction, state) {
+      var event = {
+        target: this,
+        transaction: transaction,
+        state: state
+      };
+      this.$emit('execute', event);
+      return true;
+    },
+    onPasteHtml: function onPasteHtml(html) {
+      if (this.$props.pasteHtml && this.pasteEvent) {
+        var event_1 = {
+          target: this,
+          pastedHtml: html,
+          event: this.pasteEvent
+        };
+        var newHtml = this.$props.pasteHtml(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.getView() && (this.$props.value === undefined || !docChanged)) {
+        this.getView().updateState(this.getView().state.apply(transaction));
+      }
+    },
+    onFocus: function onFocus(_view, e) {
+      var event = {
+        target: this,
+        event: e
+      };
+      this.$emit('focus', event);
+      return false;
+    },
+    onBlur: function onBlur(_view, e) {
+      var event = {
+        target: this,
+        event: e
+      };
+      this.$emit('blur', event);
+      return false;
+    },
+    onPaste: function onPaste(_view, nativeEvent) {
+      if (this.$props.pasteHtml) {
+        this.pasteEvent = nativeEvent;
+      }
+
+      return false;
+    },
+    handleClose: function handleClose() {
+      this.linkDialog = false;
+    }
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Editor component]({% slug overview_editor %}).
+ *
+ *  ```jsx
+ *  <template>
+ *    <div>
+ *      <Editor
+ *        :tools="tools"
+ *        :content-style="{
+ *          height: '690px',
+ *        }"
+ *        :default-content="content"
+ *      />
+ *    </div>
+ *  </template>
+ *
+ *  <script>
+ *  import { Editor } from "@progress/kendo-vue-editor";
+ *  import content from "./content-overview";
+ *
+ *  export default {
+ *    components: {
+ *      Editor,
+ *    },
+ *    data() {
+ *      return {
+ *        tools: [
+ *          ["Bold", "Italic", "Underline", "Strikethrough"],
+ *          ["Subscript", "Superscript"],
+ *          ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
+ *          ["Indent", "Outdent"],
+ *          ["OrderedList", "UnorderedList"],
+ *          "FontSize",
+ *          "FontName",
+ *          "FormatBlock",
+ *          ["Undo", "Redo"],
+ *          ["Link", "Unlink", "InsertImage", "ViewHtml"],
+ *          ["InsertTable"],
+ *          ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
+ *          ["DeleteRow", "DeleteColumn", "DeleteTable"],
+ *          ["MergeCells", "SplitCell"],
+ *        ],
+ *        content: content,
+ *      };
+ *    },
+ *  };
+ *  </script>
+ *  ```
+ *
+ *
+ *
+ *  ### props <span class='code'>Readonly&lt;[EditorProps]({% slug api_editor_editorprops %})</span>
+ *  The props of the Editor component.
+ *
+ *  ### contentElement <span class='code'>HTMLDivElement</span>
+ *  Returns the content-editable DOM element of the Editor.
+ *
+ *  ### element <span class='code'>HTMLElement</span>
+ *  Returns the DOM element of the Editor.
+ *
+ *  ### value <span class='code'>Node | string</span>
+ *  The value of the Editor.
+ *
+ *  ### view <span class='code'>EditorView&lt;any&gt;</span>
+ *  Returns the `view` object of the Editor.
+ */
+
+var Editor = EditorVue2;
+export { Editor, EditorVue2 };