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

package/dist/es/EditorProps.d.ts

@@ -0,0 +1,176 @@
+/// <reference types="prosemirror-model" />
+import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
+import { EditorUtils } from './utils';
+interface EditorEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+}
+/**
+ * Represents the object of the `onChange` Editor event.
+ */
+export interface EditorChangeEvent extends EditorEvent {
+    /**
+     * Represents the [Editor document](https://prosemirror.net/docs/guide/#doc).
+     */
+    value: Node;
+    /**
+     * A getter of the Editor HTML content.
+     * Once called, it will convert the Editor document into HTML string.
+     * Note that, since onChange event is triggered on every key while typing,
+     * this conversion may not be suitable if the Editor is dealing with large amount of content.
+     */
+    html: string;
+    /**
+     * The Editor Schema object.
+     */
+    schema: Schema;
+    /**
+     * The Transaction which causes the change.
+     */
+    transaction: Transaction;
+}
+/**
+ * Represents the object of the `onMount` Editor event.
+ */
+export interface EditorMountEvent extends EditorEvent {
+    /**
+     * The content-editable DOM element of the Editor.
+     */
+    dom: HTMLDivElement;
+    /**
+     * The default plugins collection of the Editor.
+     */
+    plugins: Array<Plugin>;
+    /**
+     * The default key bindings of the Editor.
+     */
+    shortcuts: EditorUtils.Shortcuts;
+    /**
+     * The default [viewProps](https://prosemirror.net/docs/ref/#view.DirectEditorProps) object of the Editor.
+     */
+    viewProps: {
+        state: EditorState;
+        [key: string]: any;
+    };
+}
+/**
+ * Represents the object of the `onPaste` Editor event.
+ */
+export interface EditorPasteEvent extends EditorEvent {
+    /**
+     * The HTML that will be pasted in the Editor.
+     */
+    pastedHtml: string;
+    /**
+     * The native paste event.
+     */
+    nativeEvent: ClipboardEvent;
+}
+/**
+ * Represents the object of the `onExecute` Editor event.
+ */
+export interface EditorExecuteEvent extends EditorEvent {
+    /**
+     * The transaction that will be executed.
+     */
+    transaction: Transaction;
+    /**
+     * The state of the Editor.
+     */
+    state: EditorState;
+}
+/**
+ * Represents the object of the `onFocus` Editor event.
+ */
+export interface EditorFocusEvent extends EditorEvent {
+    /**
+     * The native focus event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the object of the `onBlur` Editor event.
+ */
+export interface EditorBlurEvent extends EditorEvent {
+    /**
+     * The native blur event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue Editor component]({% slug overview_editor %}).
+ */
+export interface EditorProps {
+    /**
+     * Sets the default HTML content of the Editor.
+     */
+    defaultContent?: string;
+    /**
+     * Sets the initial edit mode of the Editor. Defaults to `iframe`.
+     */
+    defaultEditMode?: 'iframe' | 'div' | string;
+    /**
+     * Sets styles to the content element wrapper of the Editor.
+     */
+    contentStyle?: object;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Specifies if the Editor will be resizable.
+     */
+    resizable?: boolean;
+    /**
+     * Sets the tools of the Editor. By default, the Editor renders no tools.
+     */
+    tools?: Array<any>;
+    /**
+     * Fires each time the Editor is about to mount.
+     * Useful for configuring the `EditorView` object.
+     * To initialize `EditorView`, use the properties of the `event` object.
+     */
+    onMount?: (event: EditorMountEvent) => EditorView | void;
+    /**
+     * Fires each time the Editor is about to insert pasted content.
+     * Useful for modifying pasted content.
+     */
+    onPastehtml?: (event: EditorPasteEvent) => string | void;
+    /**
+     * Fires each time the Editor is about to apply a transaction.
+     * To prevent the transaction, return `false`.
+     */
+    onExecute?: (event: EditorExecuteEvent) => boolean | void;
+    /**
+     * Fires when the Editor's content element has received focus.
+     */
+    onFocus?: (event: EditorFocusEvent) => void;
+    /**
+     * Fires when the Editor's content element has lost focus.
+     */
+    onBlur?: (event: EditorBlurEvent) => void;
+    /**
+     * Fires each time the value of the Editor is about to change.
+     */
+    onChange?: (event: EditorChangeEvent) => void;
+    /**
+     * The value of the Editor.
+     */
+    value?: Node | string;
+    /**
+     * If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Defines the options that will be used for parsing the HTML.
+     * If `false` is set, the whitespace is collapsed as per HTML's rules.
+     * Pass `true` to preserve whitespace, but normalize newlines to spaces.
+     * `full` will preserve whitespace entirely.
+     *
+     * Defaults to `full`.
+     */
+    preserveWhitespace?: boolean | 'full' | string;
+}
+export {};

package/dist/es/additionalTypes.ts

@@ -0,0 +1,3 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+export { DefineComponent };

package/dist/es/config/defaultStyles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @hidden
+ */
+export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
+/**
+ * @hidden
+ */
+export declare const tablesStyles = "\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 1em 0;\n  }\n\n  .ProseMirror table {\n    margin: 0;\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td, .ProseMirror th {\n    min-width: 1em;\n    border: 1px solid #ddd;\n    padding: 3px 5px;\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .ProseMirror th {\n    font-weight: bold;\n    text-align: left;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px; top: 0; bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: #adf;\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* Give selected cells a blue overlay */\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: \"\";\n    left: 0; right: 0; top: 0; bottom: 0;\n    background: rgba(200, 200, 255, 0.4);\n    pointer-events: none;\n  }\n";
+/**
+ * @hidden
+ */
+export declare const rtlStyles = "body { direction: rtl }";

package/dist/es/config/defaultStyles.js

@@ -0,0 +1,12 @@
+/**
+ * @hidden
+ */
+export var defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
+/**
+ * @hidden
+ */
+export var tablesStyles = "\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 1em 0;\n  }\n\n  .ProseMirror table {\n    margin: 0;\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td, .ProseMirror th {\n    min-width: 1em;\n    border: 1px solid #ddd;\n    padding: 3px 5px;\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .ProseMirror th {\n    font-weight: bold;\n    text-align: left;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px; top: 0; bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: #adf;\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* Give selected cells a blue overlay */\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: \"\";\n    left: 0; right: 0; top: 0; bottom: 0;\n    background: rgba(200, 200, 255, 0.4);\n    pointer-events: none;\n  }\n";
+/**
+ * @hidden
+ */
+export var rtlStyles = 'body { direction: rtl }';

package/dist/es/config/pasteSettings.d.ts

@@ -0,0 +1,6 @@
+import { PasteCleanupSettings as PasteSettings } from '@progress/kendo-editor-common';
+/**
+ * The settings passed to `pasteCleanup` function ([see example]({% slug paste_editor %})).
+ */
+export interface PasteCleanupSettings extends PasteSettings {
+}

package/dist/es/config/schema.d.ts

@@ -0,0 +1,8 @@
+import { marks } from '@progress/kendo-editor-common';
+declare const nodes: {
+    table: import("prosemirror-model").NodeSpec;
+    table_row: import("prosemirror-model").NodeSpec;
+    table_cell: import("prosemirror-model").NodeSpec;
+    table_header: import("prosemirror-model").NodeSpec;
+};
+export { marks, nodes };

package/dist/es/config/schema.js

@@ -0,0 +1,51 @@
+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);
+};
+import { marks, nodes as commonNodes, tableNodes } from '@progress/kendo-editor-common';
+var cellAttribute = function (name) {
+    var _a;
+    return _a = {},
+        _a[name] = {
+            default: null,
+            getFromDOM: function (cell) {
+                return cell.getAttribute(name);
+            },
+            setDOMAttr: function (value, attrs) {
+                attrs[name] = value;
+            }
+        },
+        _a;
+};
+var getAttrs = function (node) {
+    var attrs = {};
+    Array.from(node.attributes).forEach(function (attr) {
+        attrs[attr.nodeName] = attr.nodeValue;
+    });
+    return attrs;
+};
+var cellAttributes = __assign(__assign(__assign({}, cellAttribute('style')), cellAttribute('class')), cellAttribute('id'));
+var tNodes = tableNodes({ tableGroup: 'block', cellContent: 'block+', cellAttributes: cellAttributes });
+tNodes.table_row.attrs = tNodes.table_row.attrs || {};
+tNodes.table_row.attrs.style = { default: null };
+tNodes.table_row.attrs.class = { default: null };
+tNodes.table_row.attrs.id = { default: null };
+tNodes.table_row.toDOM = function (node) { return ['tr', node.attrs, 0]; };
+tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: getAttrs }];
+tNodes.table.attrs = tNodes.table.attrs || {};
+tNodes.table.attrs.style = { default: null };
+tNodes.table.attrs.class = { default: null };
+tNodes.table.attrs.id = { default: null };
+tNodes.table.toDOM = function (node) {
+    return ['table', node.attrs, ['tbody', 0]];
+};
+tNodes.table.parseDOM = [{ tag: 'table', getAttrs: getAttrs }];
+var nodes = __assign(__assign({}, commonNodes), tNodes);
+export { marks, nodes };

package/dist/es/config/shortcuts.d.ts

@@ -0,0 +1,22 @@
+import { EditorState, Transaction, EditorView } from '@progress/kendo-editor-common';
+import { EditorToolsSettings } from './toolsSettings';
+/**
+ * @hidden
+ */
+export interface Shortcuts {
+    [key: string]: (state: EditorState, dispatch: (tr: Transaction) => void, view: EditorView) => boolean;
+}
+/**
+ * @hidden
+ */
+export declare const getShortcuts: (settings?: {
+    types?: {
+        listItem: string;
+        hardBreak: string;
+    };
+    toolsSettings?: {
+        bold?: EditorToolsSettings.InlineFormatOptions;
+        italic?: EditorToolsSettings.InlineFormatOptions;
+        underline?: EditorToolsSettings.InlineFormatOptions;
+    };
+}) => Shortcuts;

package/dist/es/config/shortcuts.js

@@ -0,0 +1,70 @@
+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);
+};
+
+import { chainCommands, exitCode, splitListItem, undo, redo, undoInputRule, goToNextCell, toggleInlineFormat } from '@progress/kendo-editor-common';
+import { EditorToolsSettings } from './toolsSettings';
+var bold = EditorToolsSettings.bold,
+    underline = EditorToolsSettings.underline,
+    italic = EditorToolsSettings.italic;
+var mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false;
+/**
+ * @hidden
+ */
+
+export var getShortcuts = function getShortcuts(settings) {
+  var insertBr = chainCommands(exitCode, function (state, dispatch) {
+    var hardBreak = settings && settings.types && settings.types.hardBreak || 'hard_break';
+    var br = state.schema.nodes[hardBreak];
+
+    if (dispatch) {
+      dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+    }
+
+    return true;
+  });
+  var listItem = settings && settings.types && settings.types.listItem || 'list_item';
+  var toolsSettings = settings && settings.toolsSettings || {};
+
+  var shortcutsSettings = __assign(__assign(__assign(__assign({
+    'Mod-b': function ModB(state, dispatch) {
+      return toggleInlineFormat(toolsSettings.bold || bold)(state, dispatch);
+    },
+    'Mod-i': function ModI(state, dispatch) {
+      return toggleInlineFormat(toolsSettings.italic || italic)(state, dispatch);
+    },
+    'Mod-u': function ModU(state, dispatch) {
+      return toggleInlineFormat(toolsSettings.underline || underline)(state, dispatch);
+    },
+    'Mod-z': undo,
+    'Shift-Mod-z': redo
+  }, __assign({}, !mac ? {
+    'Mod-y': redo
+  } : {})), {
+    'Backspace': undoInputRule,
+    'Mod-Enter': insertBr,
+    'Shift-Enter': insertBr
+  }), __assign({}, mac ? {
+    'Ctrl-Enter': insertBr
+  } : {})), {
+    'Enter': function Enter(state, dispatch) {
+      return splitListItem(state.schema.nodes[listItem])(state, dispatch);
+    },
+    'Tab': goToNextCell(1),
+    'Shift-Tab': goToNextCell(-1)
+  });
+
+  return shortcutsSettings;
+};