@progress/kendo-vue-editor 2.7.1 → 2.7.3-dev.202201070829

package/dist/es/tools/insertTable/popupGrid.js

@@ -0,0 +1,131 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { formatString } from '../utils';
+var cellClass = 'k-ct-cell k-state-disabled';
+var selectedClass = 'k-state-selected'; // tslint:enable:max-line-length
+
+var PopupGrid = {
+  name: 'KendoPopupGrid',
+  props: {
+    rows: Number,
+    columns: Number,
+    createTableMessage: String,
+    createTableHintMessage: String
+  },
+  data: function data() {
+    return {
+      row: -1,
+      col: -1
+    };
+  },
+  // @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 cells = [];
+    var total = this.$props.columns * this.$props.rows;
+    var _a = this.$data,
+        row = _a.row,
+        col = _a.col;
+    var message = this.$props.createTableMessage;
+
+    if (col > -1) {
+      message = formatString(this.$props.createTableHintMessage, row + 1, col + 1);
+    }
+
+    var renderCell = function renderCell(index, selRow, selCol) {
+      var _this = this;
+
+      var currentRow = Math.floor(index / this.$props.columns);
+      var currentCol = index % this.$props.columns;
+      var selected = currentCol <= selCol && currentRow <= selRow;
+      return h("span", {
+        "class": cellClass + (selected ? " " + selectedClass : ''),
+        onMouseenter: function onMouseenter() {
+          return _this.cellMouseEnter({
+            row: currentRow,
+            col: currentCol
+          });
+        },
+        on: this.v3 ? undefined : {
+          "mouseenter": function onMouseenter() {
+            return _this.cellMouseEnter({
+              row: currentRow,
+              col: currentCol
+            });
+          },
+          "click": function click() {
+            return _this.onCellClick(currentRow, currentCol);
+          }
+        },
+        onClick: function click() {
+          return _this.onCellClick(currentRow, currentCol);
+        },
+        key: index
+      });
+    };
+
+    for (var i = 0; i < total; i++) {
+      cells.push(renderCell.call(this, i, row, col));
+    }
+
+    var body = [h("div", {
+      onMouseleave: function onMouseleave() {
+        return _this.handleMouseLeave();
+      },
+      on: this.v3 ? undefined : {
+        "mouseleave": function onMouseleave() {
+          return _this.handleMouseLeave();
+        },
+        "pointerdown": this.onDown,
+        "mousedown": this.onDown
+      },
+      key: "cells",
+      style: {
+        borderColor: 'inherit'
+      },
+      onPointerdown: this.onDown,
+      onMousedown: this.onDown
+    }, [cells]), h("div", {
+      "class": "k-status",
+      key: "status",
+      onPointerdown: this.onDown,
+      on: this.v3 ? undefined : {
+        "pointerdown": this.onDown,
+        "mousedown": this.onDown
+      },
+      onMousedown: this.onDown
+    }, [message])];
+    return h("span", [body]);
+  },
+  methods: {
+    cellMouseEnter: function cellMouseEnter(_a) {
+      var row = _a.row,
+          col = _a.col;
+      this.row = row;
+      this.col = col;
+    },
+    handleMouseLeave: function handleMouseLeave() {
+      this.row = -1;
+      this.col = -1;
+    },
+    onCellClick: function onCellClick(row, col) {
+      this.$emit('cellclick', row, col);
+    },
+    onDown: function onDown(e) {
+      this.$emit('down', e);
+    }
+  }
+};
+var PopupGridVue3 = PopupGrid;
+export { PopupGrid, PopupGridVue3 };

package/dist/es/tools/insertTable/tool.d.ts

@@ -0,0 +1,51 @@
+import { DefineComponent } from '../../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ButtonProps } from '@progress/kendo-vue-buttons';
+import { BasicToolProps, ToolRenderProp } from './../ToolProps';
+/**
+ * @hidden
+ */
+export interface InsertTableProps extends BasicToolProps, ButtonProps, ToolRenderProp {
+    dir?: string;
+}
+/**
+ * @hidden
+ */
+export interface InsertTableToolState {
+    openedPopup: boolean;
+}
+/**
+ * @hidden
+ */
+export interface InsertTableState {
+    buttonRef: string;
+}
+/**
+ * @hidden
+ */
+export interface InsertTableComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertTableMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertTableData {
+}
+/**
+ * @hidden
+ */
+export interface InsertTableAll extends Vue, InsertTableMethods, InsertTableData, InsertTableComputed, InsertTableState {
+}
+declare let InsertTable: ComponentOptions<InsertTableAll, DefaultData<InsertTableData>, DefaultMethods<InsertTableAll>, InsertTableComputed, RecordPropsDefinition<InsertTableProps>>;
+declare const InsertTableVue3: DefineComponent<InsertTableProps, any, InsertTableData, InsertTableComputed, InsertTableMethods, {}, {}, {}, string, InsertTableProps, InsertTableProps, {}>;
+export { InsertTable, InsertTableVue3 };

package/dist/es/tools/insertTable/tool.js

@@ -0,0 +1,165 @@
+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 __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { guid } from '@progress/kendo-vue-common';
+import { InsertTablePopup } from './popup';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './../../messages';
+import { canInsert, createTable, insertNode } from '@progress/kendo-editor-common'; // tslint:enable:max-line-length
+
+var InsertTable = {
+  name: 'KendoInsertTable',
+  props: __assign({
+    view: Object,
+    settings: {
+      type: Object,
+      default: function _default() {
+        return {
+          messages: {}
+        };
+      }
+    },
+    dir: String
+  }, KButton.props),
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.buttonRef = guid();
+  },
+  data: function data() {
+    return {
+      openedPopup: false
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+
+    var _a = this.$props,
+        view = _a.view,
+        settings = _a.settings,
+        other = __rest(_a, ["view", "settings"]);
+
+    var state = view && view.state;
+    var localization = provideLocalizationService(this);
+    var _b = settings.messages,
+        createTableMsgKey = _b.createTable,
+        createTableHint = _b.createTableHint;
+    var createTableMsg = localization.toLanguageString(createTableMsgKey, messages[createTableMsgKey]);
+    var createTableHintMsg = localization.toLanguageString(createTableHint, messages[createTableHint]);
+
+    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+      disabled: !state || !canInsert(state, state.schema.nodes.table),
+      key: 'InsertTable',
+      title: createTableMsg
+    });
+
+    var button = h(KButton, __assign({
+      ref: this.buttonRef,
+      onClick: this.togglePopup,
+      onMousedown: this.preventDefault,
+      onPointerdown: this.preventDefault,
+      on: this.v3 ? undefined : {
+        'click': this.togglePopup,
+        'mousedown': this.preventDefault,
+        'pointerdown': this.preventDefault
+      },
+      attrs: this.v3 ? undefined : buttonProps
+    }, buttonProps));
+    var rendering = [button, view && // @ts-ignore function children
+    h(InsertTablePopup, {
+      key: "insertTablePopup",
+      createTableMessage: createTableMsg,
+      attrs: this.v3 ? undefined : {
+        createTableMessage: createTableMsg,
+        createTableHintMessage: createTableHintMsg,
+        dir: this.dir,
+        anchor: this.buttonRef,
+        show: this.openedPopup
+      },
+      createTableHintMessage: createTableHintMsg,
+      dir: this.dir,
+      anchor: this.buttonRef,
+      show: this.openedPopup,
+      onClose: this.closePopup,
+      on: this.v3 ? undefined : {
+        "close": this.closePopup,
+        "tableinsert": this.onTableInsert
+      },
+      onTableinsert: this.onTableInsert
+    }) || null];
+    return h("span", [rendering]);
+  },
+  methods: {
+    togglePopup: function togglePopup() {
+      this.openedPopup = !this.openedPopup;
+    },
+    closePopup: function closePopup() {
+      if (this.openedPopup) {
+        this.togglePopup();
+      }
+    },
+    onTableInsert: function onTableInsert(row, col) {
+      var view = this.$props.view;
+
+      if (!view) {
+        return;
+      }
+
+      var newTable = createTable(view.state.schema.nodes, row, col);
+
+      if (newTable) {
+        insertNode(newTable, true)(view.state, view.dispatch);
+      }
+
+      view.focus();
+      this.closePopup();
+    },
+    preventDefault: function preventDefault(e) {
+      e.preventDefault();
+    }
+  }
+};
+var InsertTableVue3 = InsertTable;
+export { InsertTable, InsertTableVue3 };

package/dist/es/tools/lists.d.ts

@@ -0,0 +1,52 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ToolProps } from './ToolProps';
+/**
+ * @hidden
+ */
+export interface ListToolProps extends ToolProps {
+}
+/**
+ * @hidden
+ */
+export interface OrderedListProps extends ListToolProps {
+}
+/**
+ * @hidden
+ */
+export interface UnorderedListProps extends ListToolProps {
+}
+/**
+ * @hidden
+ */
+export interface ListState {
+}
+/**
+ * @hidden
+ */
+export interface ListComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListData {
+}
+/**
+ * @hidden
+ */
+export interface ListAll extends Vue, ListMethods, ListData, ListComputed, ListState {
+}
+declare let List: ComponentOptions<ListAll, DefaultData<ListData>, DefaultMethods<ListAll>, ListComputed, RecordPropsDefinition<ListToolProps>>;
+declare const ListVue3: DefineComponent<ListToolProps, any, ListData, ListComputed, ListMethods, {}, {}, {}, string, ListToolProps, ListToolProps, {}>;
+export { List, ListVue3 };

package/dist/es/tools/lists.js

@@ -0,0 +1,132 @@
+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 __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { Button as kbutton } from '@progress/kendo-vue-buttons';
+import { hasNode, toggleList } from '@progress/kendo-editor-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './../messages'; // tslint:enable:max-line-length
+
+var List = {
+  name: 'KendoList',
+  props: __assign({
+    view: Object,
+    settings: {
+      type: Object,
+      default: function _default() {
+        return {
+          messages: {}
+        };
+      }
+    }
+  }, kbutton.props),
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+
+    var _a = this.$props,
+        view = _a.view,
+        render = _a.render,
+        settings = _a.settings,
+        other = __rest(_a, ["view", "render", "settings"]);
+
+    var isActive = false;
+    var localization = provideLocalizationService(this);
+    var titleKey = settings.messages.title;
+    var types = settings.types;
+    var listType = settings.listType;
+
+    if (view) {
+      var state = view.state;
+      var nodes = state.schema.nodes;
+      var hasOl = hasNode(state, nodes[types.orderedList]),
+          hasUl = hasNode(state, nodes[types.bulletList]);
+
+      if (listType === types.orderedList) {
+        isActive = hasOl && !hasUl;
+      } else {
+        isActive = !hasOl && hasUl;
+      }
+    }
+
+    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+      selected: isActive,
+      togglable: true,
+      title: localization.toLanguageString(titleKey, messages[titleKey])
+    });
+
+    var button = h(kbutton, __assign({
+      onClick: this.handleClick,
+      onMousedown: this.preventDefault,
+      onPointerdown: this.preventDefault,
+      on: this.v3 ? undefined : {
+        'click': this.handleClick,
+        'mousedown': this.preventDefault,
+        'pointerdown': this.preventDefault
+      },
+      attrs: this.v3 ? undefined : buttonProps
+    }, buttonProps));
+    return button;
+  },
+  methods: {
+    handleClick: function handleClick() {
+      var _a = this.$props,
+          view = _a.view,
+          settings = _a.settings;
+      var types = settings.types;
+      var listType = settings.listType;
+
+      if (this.view) {
+        toggleList(view.state, view.dispatch, view, __assign({
+          listType: listType
+        }, types), settings.commandName);
+      }
+    },
+    preventDefault: function preventDefault(e) {
+      e.preventDefault();
+    }
+  }
+};
+var ListVue3 = List;
+export { List, ListVue3 };

package/dist/es/tools/main.d.ts

@@ -0,0 +1,137 @@
+import { ToolProps } from './ToolProps';
+import { TableEditNS } from './tableEdit';
+import { PrintProps as PrintToolProps } from './print';
+import { PdfProps as PdfToolProps } from './pdf';
+import { FindAndReplaceProps as FindAndReplaceToolProps } from './findReplace';
+/**
+ * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
+ */
+export declare namespace EditorTools {
+    /**
+     * The props for the Align tool component of the Editor.
+     */
+    interface AlignToolProps extends ToolProps {
+    }
+    /**
+     * The props for the AlignLeft tool component of the Editor.
+     */
+    interface AlignLeftProps extends AlignToolProps {
+    }
+    /**
+     * The props for the AlignRight tool component of the Editor.
+     */
+    interface AlignRightProps extends AlignToolProps {
+    }
+    /**
+     * The props for the AlignCenter tool component of the Editor.
+     */
+    interface AlignCenterProps extends AlignToolProps {
+    }
+    /**
+     * The props for the AlignJustify tool component of the Editor.
+     */
+    interface AlignJustifyProps extends AlignToolProps {
+    }
+    /**
+     * The props for the Print tool component of the Editor.
+     */
+    interface PrintProps extends PrintToolProps {
+    }
+    /**
+     * The Print tool component.
+     * Designed to work only if Editor's defaultEditMode prop is set to 'iframe'.
+     */
+    /**
+     * The props for the Export to PDF tool component of the Editor.
+     */
+    interface PdfProps extends PdfToolProps {
+    }
+    /**
+     * The Export to PDF tool component.
+     *
+     * To modify the default PDF export options, see the following example:
+     *
+     * @example
+     * ```tsx-no-run
+     * import { Editor, EditorTools } from '@progress/kendo-vue-editor';
+     * const { Bold, Italic, Pdf } = EditorTools;
+     *
+     * const PdfTool = (props: EditorTools.PdfProps) => (
+     *     <Pdf
+     *         {...props}
+     *         // https://www.telerik.com/kendo-vue-ui/components/pdfprocessing/api/PDFExportProps/
+     *         savePdfOptions={{
+     *             fileName: 'editor-export.pdf',
+     *             paperSize: 'A5',
+     *             margin: '1cm'
+     *         }}
+     *     />
+     * );
+     *
+     * class App extends React.Component<any, any> {
+     *     render() {
+     *         return (
+     *             <Editor
+     *                 tools={[[ Bold, Italic, PdfTool ]]}
+     *                 contentStyle={{ height: 100 }}
+     *                 defaultContent="<p>text</p>"
+     *             />
+     *         );
+     *     }
+     * }
+     * ```
+     */
+    /**
+     * The props for the AddRowBefore tool component of the Editor.
+     */
+    interface AddRowBeforeProps extends TableEditNS.AddRowBeforeProps {
+    }
+    /**
+     * The props for the AddRowAfter tool component of the Editor.
+     */
+    interface AddRowAfterProps extends TableEditNS.AddRowAfterProps {
+    }
+    /**
+     * The props for the AddColumnBefore tool component of the Editor.
+     */
+    interface AddColumnBeforeProps extends TableEditNS.AddColumnBeforeProps {
+    }
+    /**
+     * The props for the AddColumnAfter tool component of the Editor.
+     */
+    interface AddColumnAfterProps extends TableEditNS.AddColumnAfterProps {
+    }
+    /**
+     * The props for the DeleteRow tool component of the Editor.
+     */
+    interface DeleteRowProps extends TableEditNS.DeleteRowProps {
+    }
+    /**
+     * The props for the DeleteColumn tool component of the Editor.
+     */
+    interface DeleteColumnProps extends TableEditNS.DeleteColumnProps {
+    }
+    /**
+     * The props for the DeleteTable tool component of the Editor.
+     */
+    interface DeleteTableProps extends TableEditNS.DeleteTableProps {
+    }
+    /**
+     * The props for the MergeCells tool component of the Editor.
+     */
+    interface MergeCellsProps extends TableEditNS.MergeCellsProps {
+    }
+    /**
+     * The props for the SplitCell tool component of the Editor.
+     */
+    interface SplitCellProps extends TableEditNS.SplitCellProps {
+    }
+    /**
+     * The FindAndReplace tool component.
+     */
+    /**
+     * The props for the FindAndReplace tool component of the Editor.
+     */
+    interface FindAndReplaceProps extends FindAndReplaceToolProps {
+    }
+}