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

package/dist/esm/dialogs/insertLink.js

@@ -0,0 +1,313 @@
+// @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 { getMark, applyLink } 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 InsertLinkDialogVue2 = {
+  name: 'KendoInsertLinkDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
+  props: {
+    view: Object,
+    settings: Object,
+    dir: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  mounted: function mounted() {
+    this.href = getRef(this, 'href');
+    this.title = getRef(this, 'title');
+    this.target = getRef(this, 'target');
+
+    if (this.href) {
+      this.href.focus();
+    }
+  },
+  // @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 localization = provideLocalizationService(this);
+    var _b = settings.messages,
+        insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle,
+        insertHyperlinkAddress = _b.insertHyperlinkAddress,
+        insertHyperlinkTitle = _b.insertHyperlinkTitle,
+        insertHyperlinkNewWindow = _b.insertHyperlinkNewWindow,
+        insertHyperlinkCancel = _b.insertHyperlinkCancel,
+        insertHyperlinkInsert = _b.insertHyperlinkInsert;
+    var linkMark = view ? getMark(view.state, view.state.schema.marks[settings.mark]) : false;
+    var content = h("div", {
+      "class": "k-edit-form-container"
+    }, [h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "k-editor-link-url",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-link-url"
+      }
+    }, [localization.toLanguageString(insertHyperlinkAddress, messages[insertHyperlinkAddress])])]), 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-link-url"
+      },
+      "class": "k-input-inner",
+      ref: setRef(this, 'href'),
+      id: "k-editor-link-url",
+      value: this.v3 ? linkMark && linkMark.attrs.href || undefined : null,
+      domProps: this.v3 ? undefined : {
+        "value": linkMark && linkMark.attrs.href || undefined
+      }
+    })])]), h("div", {
+      "class": "k-edit-label k-editor-link-text-row"
+    }, [h("label", {
+      "for": "k-editor-link-text",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-link-text"
+      }
+    }, [localization.toLanguageString(insertHyperlinkTitle, messages[insertHyperlinkTitle])])]), h("div", {
+      "class": "k-edit-field k-editor-link-text-row"
+    }, [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-link-text"
+      },
+      "class": "k-input-inner",
+      id: "k-editor-link-text",
+      ref: setRef(this, 'title'),
+      value: this.v3 ? linkMark && linkMark.attrs.title || undefined : null,
+      domProps: this.v3 ? undefined : {
+        "value": linkMark && linkMark.attrs.title || undefined
+      }
+    })])]), settings.linkTarget !== false && h("div", {
+      "class": "k-edit-field"
+    }, [h("input", {
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        id: "k-editor-link-target"
+      },
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      id: "k-editor-link-target",
+      ref: setRef(this, 'target'),
+      checked: this.v3 ? linkMark && !!linkMark.attrs.target || undefined : null,
+      domProps: this.v3 ? undefined : {
+        "checked": linkMark && !!linkMark.attrs.target || undefined
+      }
+    }), h("label", {
+      "for": "k-editor-link-target",
+      attrs: this.v3 ? undefined : {
+        "for": "k-editor-link-target"
+      },
+      "class": "k-checkbox-label"
+    }, [localization.toLanguageString(insertHyperlinkNewWindow, messages[insertHyperlinkNewWindow])])])]);
+    var dialog = // @ts-ignore function children
+    h(Dialog, {
+      title: localization.toLanguageString(insertHyperlinkDialogTitle, messages[insertHyperlinkDialogTitle]),
+      attrs: this.v3 ? undefined : {
+        title: localization.toLanguageString(insertHyperlinkDialogTitle, messages[insertHyperlinkDialogTitle]),
+        closeIcon: true,
+        dir: dir
+      },
+      onClose: this.onClose,
+      on: this.v3 ? undefined : {
+        "close": this.onClose
+      },
+      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 [// @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(insertHyperlinkCancel, messages[insertHyperlinkCancel])];
+        } : [localization.toLanguageString(insertHyperlinkCancel, messages[insertHyperlinkCancel])]), // @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(insertHyperlinkInsert, messages[insertHyperlinkInsert])];
+        } : [localization.toLanguageString(insertHyperlinkInsert, messages[insertHyperlinkInsert])])];
+      } : [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(insertHyperlinkCancel, messages[insertHyperlinkCancel])];
+      } : [localization.toLanguageString(insertHyperlinkCancel, messages[insertHyperlinkCancel])]), 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(insertHyperlinkInsert, messages[insertHyperlinkInsert])];
+      } : [localization.toLanguageString(insertHyperlinkInsert, messages[insertHyperlinkInsert])])])];
+    } : [content, h(DialogActionsBar, _this.v3 ? function () {
+      return [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(insertHyperlinkCancel, messages[insertHyperlinkCancel])];
+      } : [localization.toLanguageString(insertHyperlinkCancel, messages[insertHyperlinkCancel])]), 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(insertHyperlinkInsert, messages[insertHyperlinkInsert])];
+      } : [localization.toLanguageString(insertHyperlinkInsert, messages[insertHyperlinkInsert])])];
+    } : [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(insertHyperlinkCancel, messages[insertHyperlinkCancel])];
+    } : [localization.toLanguageString(insertHyperlinkCancel, messages[insertHyperlinkCancel])]), 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(insertHyperlinkInsert, messages[insertHyperlinkInsert])];
+    } : [localization.toLanguageString(insertHyperlinkInsert, messages[insertHyperlinkInsert])])])]);
+    return dialog;
+  },
+  methods: {
+    onClose: function onClose() {
+      this.$props.view.focus();
+      this.$emit('close');
+    },
+    onInsert: function onInsert() {
+      var view = this.$props.view;
+      var mark = this.$props.settings.mark;
+      var attrs = {
+        href: this.href ? this.href.value : undefined,
+        title: this.title ? this.title.value : undefined,
+        target: this.target && this.target.checked ? '_blank' : undefined
+      };
+      applyLink({
+        mark: mark,
+        attrs: attrs
+      }, this.$props.settings.commandName)(view.state, view.dispatch);
+      this.onClose();
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var InsertLinkDialog = InsertLinkDialogVue2;
+export { InsertLinkDialog, InsertLinkDialogVue2 };

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

@@ -0,0 +1 @@
+

package/dist/esm/dialogs/main.js

@@ -0,0 +1,42 @@
+// import { InsertLinkDialog as LinkDialog, InsertLinkDialogProps as LinkDialogProps } from './insertLink.js';
+// import { InsertImageDialog as ImageDialog, InsertImageDialogProps as ImageDialogProps } from './insertImage.js';
+// import { ViewHtmlDialog as ViewHtmlDialogX, ViewHtmlDialogProps as ViewHtmlDialogPropsX } from './viewHtml.js';
+// import { FindAndReplaceDialog as FindAndReplaceDialogX,
+// FindAndReplaceDialogProps as FindAndReplaceDialogPropsX } from './FindReplace.js';
+// /**
+//  * Represents a wrapping namespace for the dialog components and props of the Editor.
+//  */
+// export namespace EditorDialogs {
+//     /**
+//      * The InsertLinkDialog component.
+//      */
+//     export class InsertLinkDialog extends LinkDialog { }
+//     /**
+//      * The props for the InsertLinkDialog component.
+//      */
+//     export interface InsertLinkDialogProps extends LinkDialogProps { }
+//     /**
+//      * The InsertImageDialog component.
+//      */
+//     export class InsertImageDialog extends ImageDialog { }
+//     /**
+//      * The props for the InsertImageDialog component.
+//      */
+//     export interface InsertImageDialogProps extends ImageDialogProps { }
+//     /**
+//      * The ViewHtmlDialog component.
+//      */
+//     export class ViewHtmlDialog extends ViewHtmlDialogX { }
+//     /**
+//      * The props for the ViewHtmlDialog component.
+//      */
+//     export interface ViewHtmlDialogProps extends ViewHtmlDialogPropsX { }
+//     /**
+//      * The FindAndReplaceDialog component.
+//      */
+//     export class FindAndReplaceDialog extends FindAndReplaceDialogX { }
+//     /**
+//      * The props for the FindAndReplaceDialog component.
+//      */
+//     export interface FindAndReplaceDialogProps extends FindAndReplaceDialogPropsX { }
+// }

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

@@ -0,0 +1,51 @@
+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 ViewHtmlDialogProps extends EditorDialogProps {
+    /**
+     * The `ViewHtmlSettings` object.
+     */
+    settings: EditorToolsSettings.ViewHtmlSettings;
+}
+/**
+ * @hidden
+ */
+export interface ViewHtmlDialogState {
+    htmlArea: HTMLTextAreaElement | null;
+}
+/**
+ * @hidden
+ */
+export interface ViewHtmlDialogComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ViewHtmlDialogMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ViewHtmlDialogData {
+    currentActive: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ViewHtmlDialogAll extends Vue2type, ViewHtmlDialogMethods, ViewHtmlDialogData, ViewHtmlDialogComputed, ViewHtmlDialogState {
+}
+/**
+ * @hidden
+ */
+declare let ViewHtmlDialogVue2: ComponentOptions<ViewHtmlDialogAll, DefaultData<ViewHtmlDialogData>, DefaultMethods<ViewHtmlDialogAll>, ViewHtmlDialogComputed, RecordPropsDefinition<ViewHtmlDialogProps>>;
+/**
+ * @hidden
+ */
+declare const ViewHtmlDialog: DefineComponent<ViewHtmlDialogProps, any, ViewHtmlDialogData, ViewHtmlDialogComputed, ViewHtmlDialogMethods, {}, {}, {}, string, ViewHtmlDialogProps, ViewHtmlDialogProps, {}>;
+export { ViewHtmlDialog, ViewHtmlDialogVue2 };

package/dist/esm/dialogs/viewHtml.js

@@ -0,0 +1,149 @@
+// @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 { getHtml, setHtml, indentHtml, trimWhitespace } from '@progress/kendo-editor-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './../messages.js';
+import { editorPropsKey } from './../utils/props-key.js';
+import { getRef, setRef } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ViewHtmlDialogVue2 = {
+  name: 'KendoViewHtmlDialog',
+  props: {
+    view: Object,
+    settings: Object,
+    dir: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  mounted: function mounted() {
+    this.htmlArea = getRef(this, 'htmlArea');
+  },
+  // @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 localization = provideLocalizationService(this);
+    var _b = settings.messages,
+        viewHtmlDialogTitle = _b.viewHtmlDialogTitle,
+        viewHtmlCancel = _b.viewHtmlCancel,
+        viewHtmlUpdate = _b.viewHtmlUpdate;
+    var content = h("textarea", {
+      "class": "k-textarea k-editor-textarea",
+      style: {
+        height: '280px',
+        width: '490px'
+      },
+      ref: setRef(this, 'htmlArea'),
+      value: this.v3 ? indentHtml(getHtml(view.state)) : null,
+      domProps: this.v3 ? undefined : {
+        "value": indentHtml(getHtml(view.state))
+      }
+    });
+    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(viewHtmlCancel, messages[viewHtmlCancel])];
+    } : [localization.toLanguageString(viewHtmlCancel, messages[viewHtmlCancel])]), // @ts-ignore function children
+    h(KButton, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        themeColor: 'primary',
+        dir: dir
+      },
+      onClick: this.onUpdate,
+      on: this.v3 ? undefined : {
+        "click": this.onUpdate
+      },
+      themeColor: 'primary',
+      dir: dir,
+      key: "update"
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(viewHtmlUpdate, messages[viewHtmlUpdate])];
+    } : [localization.toLanguageString(viewHtmlUpdate, messages[viewHtmlUpdate])])];
+    var dialog = // @ts-ignore function children
+    h(Dialog, {
+      title: localization.toLanguageString(viewHtmlDialogTitle, messages[viewHtmlDialogTitle]),
+      attrs: this.v3 ? undefined : {
+        title: localization.toLanguageString(viewHtmlDialogTitle, messages[viewHtmlDialogTitle]),
+        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: {
+    onUpdate: function onUpdate() {
+      var _a = this.$props,
+          view = _a.view,
+          settings = _a.settings;
+      var html = trimWhitespace(this.htmlArea ? this.htmlArea.value : '');
+      var preserveWhitespace = editorPropsKey.getState(view.state).preserveWhitespace;
+      setHtml(html, settings.commandName, {
+        preserveWhitespace: preserveWhitespace
+      })(view.state, view.dispatch);
+      this.onClose();
+    },
+    onClose: function onClose() {
+      this.$props.view.focus();
+      this.$emit('close');
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ViewHtmlDialog = ViewHtmlDialogVue2;
+export { ViewHtmlDialog, ViewHtmlDialogVue2 };