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

package/dist/esm/dialogs/insertImage.d.ts

@@ -0,0 +1,54 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { EditorToolsSettings } from '../config/toolsSettings';
+import { EditorDialogProps } from './EditorDialogProps';
+export interface InsertImageDialogProps extends EditorDialogProps {
+    /**
+     * The `ImageSettings` object.
+     */
+    settings: EditorToolsSettings.ImageSettings;
+}
+/**
+ * @hidden
+ */
+export interface InsertImageDialogState {
+    src: HTMLInputElement | null;
+    altText: HTMLInputElement | null;
+    title: HTMLInputElement | null;
+    width: HTMLInputElement | null;
+    height: HTMLInputElement | null;
+}
+/**
+ * @hidden
+ */
+export interface InsertImageDialogComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertImageDialogMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertImageDialogData {
+}
+/**
+ * @hidden
+ */
+export interface InsertImageDialogAll extends Vue2type, InsertImageDialogMethods, InsertImageDialogData, InsertImageDialogComputed, InsertImageDialogState {
+}
+/**
+ * @hidden
+ */
+declare let InsertImageDialogVue2: ComponentOptions<InsertImageDialogAll, DefaultData<InsertImageDialogData>, DefaultMethods<InsertImageDialogAll>, InsertImageDialogComputed, RecordPropsDefinition<InsertImageDialogProps>>;
+/**
+ * @hidden
+ */
+declare const InsertImageDialog: DefineComponent<InsertImageDialogProps, any, InsertImageDialogData, InsertImageDialogComputed, InsertImageDialogMethods, {}, {}, {}, string, InsertImageDialogProps, InsertImageDialogProps, {}>;
+export { InsertImageDialog, InsertImageDialogVue2 };

package/dist/esm/dialogs/insertImage.js

@@ -0,0 +1,299 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { NodeSelection, insertNode } from '@progress/kendo-editor-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './../messages.js';
+import { getRef, setRef } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var InsertImageDialogVue2 = {
+  name: 'KendoInsertImageDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
+  props: {
+    view: Object,
+    settings: Object,
+    dir: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  mounted: function mounted() {
+    this.src = getRef(this, 'src');
+    this.altText = getRef(this, 'altText');
+    this.title = getRef(this, 'title');
+    this.width = getRef(this, 'width');
+    this.height = getRef(this, 'height');
+
+    if (this.src) {
+      this.src.focus();
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        view = _a.view,
+        settings = _a.settings,
+        dir = _a.dir;
+    var _b = settings.messages,
+        insertImageDialogTitle = _b.insertImageDialogTitle,
+        insertImageAddress = _b.insertImageAddress,
+        insertImageTitle = _b.insertImageTitle,
+        insertImageAltText = _b.insertImageAltText,
+        insertImageWidth = _b.insertImageWidth,
+        insertImageHeight = _b.insertImageHeight,
+        insertImageCancel = _b.insertImageCancel,
+        insertImageInsert = _b.insertImageInsert;
+    var localization = provideLocalizationService(this);
+    var state = view && view.state;
+    var attrs = {};
+
+    if (state && state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes[settings.node]) {
+      attrs = state.selection.node.attrs;
+    }
+
+    var content = h("div", {
+      "class": "k-edit-form-container"
+    }, [h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-image-url",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-image-url"
+      }
+    }, [localization.toLanguageString(insertImageAddress, messages[insertImageAddress])])]), h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      type: "text",
+      attrs: this.v3 ? undefined : {
+        type: "text",
+        id: "k-editor-image-url"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-image-url",
+      value: this.v3 ? attrs.src : null,
+      domProps: this.v3 ? undefined : {
+        "value": attrs.src
+      },
+      ref: setRef(this, 'src')
+    })])]), h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-image-alt",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-image-alt"
+      }
+    }, [localization.toLanguageString(insertImageAltText, messages[insertImageAltText])])]), h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      type: "text",
+      attrs: this.v3 ? undefined : {
+        type: "text",
+        id: "k-editor-image-alt"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-image-alt",
+      value: this.v3 ? attrs.alt : null,
+      domProps: this.v3 ? undefined : {
+        "value": attrs.alt
+      },
+      ref: setRef(this, 'altText')
+    })])]), h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-image-title",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-image-title"
+      }
+    }, [localization.toLanguageString(insertImageTitle, messages[insertImageTitle])])]), h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      type: "text",
+      attrs: this.v3 ? undefined : {
+        type: "text",
+        id: "k-editor-image-title"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-image-title",
+      value: this.v3 ? attrs.title : null,
+      domProps: this.v3 ? undefined : {
+        "value": attrs.title
+      },
+      ref: setRef(this, 'title')
+    })])]), h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-image-width",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-image-width"
+      }
+    }, [localization.toLanguageString(insertImageWidth, messages[insertImageWidth])])]), h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      type: "text",
+      attrs: this.v3 ? undefined : {
+        type: "text",
+        id: "k-editor-image-width"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-image-width",
+      value: this.v3 ? attrs.width : null,
+      domProps: this.v3 ? undefined : {
+        "value": attrs.width
+      },
+      ref: setRef(this, 'width')
+    })])]), h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-image-height",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-image-height"
+      }
+    }, [localization.toLanguageString(insertImageHeight, messages[insertImageHeight])])]), h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      type: "text",
+      attrs: this.v3 ? undefined : {
+        type: "text",
+        id: "k-editor-image-height"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-image-height",
+      value: this.v3 ? attrs.height : null,
+      domProps: this.v3 ? undefined : {
+        "value": attrs.height
+      },
+      ref: setRef(this, 'height')
+    })])])]);
+    var actionButtons = [// @ts-ignore function children
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        dir: dir
+      },
+      onClick: this.onClose,
+      on: this.v3 ? undefined : {
+        "click": this.onClose
+      },
+      dir: dir,
+      key: "cancel"
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(insertImageCancel, messages[insertImageCancel])];
+    } : [localization.toLanguageString(insertImageCancel, messages[insertImageCancel])]), // @ts-ignore function children
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        themeColor: 'primary',
+        dir: dir
+      },
+      onClick: this.onInsert,
+      on: this.v3 ? undefined : {
+        "click": this.onInsert
+      },
+      themeColor: 'primary',
+      dir: dir,
+      key: "insert"
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(insertImageInsert, messages[insertImageInsert])];
+    } : [localization.toLanguageString(insertImageInsert, messages[insertImageInsert])])];
+    var dialog = // @ts-ignore function children
+    h(Dialog, {
+      title: localization.toLanguageString(insertImageDialogTitle, messages[insertImageDialogTitle]),
+      attrs: this.v3 ? undefined : {
+        title: localization.toLanguageString(insertImageDialogTitle, messages[insertImageDialogTitle]),
+        closeIcon: true,
+        dir: dir
+      },
+      onClose: this.onClose,
+      on: this.v3 ? undefined : {
+        "close": this.onClose
+      },
+      key: "dialog",
+      closeIcon: true,
+      dir: dir,
+      style: dir === 'rtl' ? {
+        textAlign: 'right'
+      } : undefined
+    }, this.v3 ? function () {
+      return [content, // @ts-ignore function children
+      h(DialogActionsBar, _this.v3 ? function () {
+        return [actionButtons];
+      } : [actionButtons])];
+    } : [content, h(DialogActionsBar, _this.v3 ? function () {
+      return [actionButtons];
+    } : [actionButtons])]);
+    return dialog;
+  },
+  methods: {
+    onClose: function onClose() {
+      this.$props.view.focus();
+      this.$emit('close');
+    },
+    onInsert: function onInsert() {
+      var _a = this.$props,
+          view = _a.view,
+          settings = _a.settings;
+      var nodes = view.state.schema.nodes;
+      var nodeType = nodes[settings.node];
+      var data = {
+        src: this.src ? this.src.value : null,
+        title: this.title ? this.title.value : null,
+        alt: this.altText ? this.altText.value : null,
+        width: this.width ? this.width.value : null,
+        height: this.height ? this.height.value : null
+      };
+      var attrs = Object.keys(data).filter(function (key) {
+        return data[key] !== null && data[key] !== '';
+      }).reduce(function (acc, curr) {
+        var _a;
+
+        return Object.assign(acc, (_a = {}, _a[curr] = data[curr], _a));
+      }, {});
+      var newImage = nodeType.createAndFill(attrs);
+      var insertImageCmd = insertNode(newImage, true);
+      insertImageCmd(view.state, function (tr) {
+        return view.dispatch(tr.setMeta('commandName', settings.commandName).setMeta('args', attrs));
+      });
+      this.onClose();
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var InsertImageDialog = InsertImageDialogVue2;
+export { InsertImageDialog, InsertImageDialogVue2 };

package/dist/esm/dialogs/insertLink.d.ts

@@ -0,0 +1,52 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { EditorToolsSettings } from '../config/toolsSettings';
+import { EditorDialogProps } from './EditorDialogProps';
+export interface InsertLinkDialogProps extends EditorDialogProps {
+    /**
+     * The `LinkSettings` object.
+     */
+    settings: EditorToolsSettings.LinkSettings;
+}
+/**
+ * @hidden
+ */
+export interface InsertLinkDialogState {
+    href: HTMLInputElement | null;
+    title: HTMLInputElement | null;
+    target: HTMLInputElement | null;
+}
+/**
+ * @hidden
+ */
+export interface InsertLinkDialogComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertLinkDialogMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface InsertLinkDialogData {
+}
+/**
+ * @hidden
+ */
+export interface InsertLinkDialogAll extends Vue2type, InsertLinkDialogMethods, InsertLinkDialogData, InsertLinkDialogComputed, InsertLinkDialogState {
+}
+/**
+ * @hidden
+ */
+declare let InsertLinkDialogVue2: ComponentOptions<InsertLinkDialogAll, DefaultData<InsertLinkDialogData>, DefaultMethods<InsertLinkDialogAll>, InsertLinkDialogComputed, RecordPropsDefinition<InsertLinkDialogProps>>;
+/**
+ * @hidden
+ */
+declare const InsertLinkDialog: DefineComponent<InsertLinkDialogProps, any, InsertLinkDialogData, InsertLinkDialogComputed, InsertLinkDialogMethods, {}, {}, {}, string, InsertLinkDialogProps, InsertLinkDialogProps, {}>;
+export { InsertLinkDialog, InsertLinkDialogVue2 };