@progress/kendo-vue-editor 6.4.0 → 6.4.1-develop.1

package/dialogs/FindReplace.mjs

@@ -5,21 +5,22 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as U, createVNode as t, isVNode as V } from "vue";
+import { defineComponent as V, createVNode as t, isVNode as P } from "vue";
 import { Button as f } from "@progress/kendo-vue-buttons";
-import { chevronRightIcon as W, chevronLeftIcon as $ } from "@progress/kendo-svg-icons";
-import { Window as P } from "@progress/kendo-vue-dialogs";
-import { TabStrip as q, TabStripTab as L } from "@progress/kendo-vue-layout";
-import { provideLocalizationService as H } from "@progress/kendo-vue-intl";
-import { messages as o } from "../messages/main.mjs";
-import { EditorToolsSettings as G } from "../config/toolsSettings.mjs";
-import { formatString as J } from "../tools/utils.mjs";
-import { selectedLineTextOnly as Q, textHighlightKey as X, TextSelection as m, find as Y, replace as Z, replaceAll as ee, findAll as te } from "@progress/kendo-editor-common";
-import { Icon as F } from "@progress/kendo-vue-common";
-function N(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !V(e);
+import { chevronRightIcon as $, chevronLeftIcon as F } from "@progress/kendo-svg-icons";
+import { Window as q } from "@progress/kendo-vue-dialogs";
+import { TabStrip as H, TabStripTab as E } from "@progress/kendo-vue-layout";
+import { provideLocalizationService as G } from "@progress/kendo-vue-intl";
+import { messages as l } from "../messages/main.mjs";
+import { EditorToolsSettings as J } from "../config/toolsSettings.mjs";
+import { formatString as Q } from "../tools/utils.mjs";
+import { selectedLineTextOnly as X, textHighlightKey as Y, TextSelection as g, find as Z, replace as ee, replaceAll as te, findAll as ne } from "@progress/kendo-editor-common";
+import { Icon as N } from "@progress/kendo-vue-common";
+import { Error as se } from "@progress/kendo-vue-labels";
+function x(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !P(e);
 }
-const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
+const ae = 13, ce = 27, ie = J.findAndReplace, be = /* @__PURE__ */ V({
   name: "KendoFindAndReplaceDialog",
   emits: {
     close: null
@@ -29,7 +30,7 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
     settings: {
       type: Object,
       default: function() {
-        return ae;
+        return ie;
       }
     },
     dir: String
@@ -45,7 +46,7 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
   data() {
     return {
       selectedTab: 0,
-      searchText: Q(this.$props.view.state),
+      searchText: X(this.$props.view.state),
       replaceText: "",
       matchCase: !1,
       matchWord: !1,
@@ -65,18 +66,18 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
    * @hidden
    */
   updated() {
-    const e = this.matches || [], n = this.nextMatch, c = this.$props.view;
+    const e = this.matches || [], n = this.nextMatch, s = this.$props.view;
     if (this._prevMatch !== n) {
-      const a = c.state, i = a.tr, s = [];
-      e.forEach((l) => {
-        s.push({
-          from: l.from,
-          to: l.to,
+      const a = s.state, i = a.tr, c = [];
+      e.forEach((o) => {
+        c.push({
+          from: o.from,
+          to: o.to,
           attrs: {
-            class: n && l.eq(n) ? "k-text-selected" : "k-text-highlighted"
+            class: n && o.eq(n) ? "k-text-selected" : "k-text-highlighted"
           }
         });
-      }), i.setMeta(X, s), i.setSelection(n || m.create(a.doc, a.selection.from)), c.dispatch(i);
+      }), i.setMeta(Y, c), i.setSelection(n || g.create(a.doc, a.selection.from)), s.dispatch(i);
     }
   },
   unmounted() {
@@ -84,50 +85,51 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
   },
   render() {
     let e, n;
-    const c = H(this), {
+    const s = G(this), {
       findReplaceDialogTitle: a,
       findReplaceTabFind: i,
-      findReplaceTabReplace: s,
-      findReplaceFindWhat: l,
-      findReplaceReplaceWith: p,
-      findReplaceReplace: r,
-      findReplaceReplaceAll: d,
-      findReplaceMatchCase: g,
-      findReplaceMatchWord: x,
-      findReplaceMatchCyclic: k,
-      findReplaceUseRegExp: b,
-      findReplacePrevMatch: C,
-      findReplaceNextMatch: S,
-      findReplaceMatches: v
+      findReplaceTabReplace: c,
+      findReplaceFindWhat: o,
+      findReplaceReplaceWith: r,
+      findReplaceReplace: p,
+      findReplaceReplaceAll: u,
+      findReplaceMatchCase: k,
+      findReplaceMatchWord: b,
+      findReplaceMatchCyclic: S,
+      findReplaceUseRegExp: C,
+      findReplacePrevMatch: v,
+      findReplaceNextMatch: R,
+      findReplaceMatches: M
     } = this.settings.messages, {
-      matchCase: E,
-      matchWord: _,
+      matchCase: _,
+      matchWord: I,
       matchCyclic: j,
       useRegExp: A,
       searchText: B,
-      replaceText: I,
-      nextMatch: R
-    } = this, M = t("div", {
+      replaceText: O,
+      nextMatch: y,
+      error: m
+    } = this, T = t("div", {
       class: "k-search-options"
     }, [t("span", null, [t("input", {
       class: "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       id: "match-case",
-      checked: E,
+      checked: _,
       onChange: this.onMatchCaseChecked
     }, null), t("label", {
       for: "match-case",
       class: "k-checkbox-label"
-    }, [c.toLanguageString(g, o[g])])]), t("span", null, [t("input", {
+    }, [s.toLanguageString(k, l[k])])]), t("span", null, [t("input", {
       class: "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       id: "match-whole",
-      checked: _,
+      checked: I,
       onChange: this.onMatchWordChecked
     }, null), t("label", {
       for: "match-whole",
       class: "k-checkbox-label"
-    }, [c.toLanguageString(x, o[x])])]), t("span", null, [t("input", {
+    }, [s.toLanguageString(b, l[b])])]), t("span", null, [t("input", {
       class: "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       id: "match-cyclic",
@@ -136,7 +138,7 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
     }, null), t("label", {
       for: "match-cyclic",
       class: "k-checkbox-label"
-    }, [c.toLanguageString(k, o[k])])]), t("span", null, [t("input", {
+    }, [s.toLanguageString(S, l[S])])]), t("span", null, [t("input", {
       class: "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       id: "regular-expression",
@@ -145,58 +147,61 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
     }, null), t("label", {
       for: "regular-expression",
       class: "k-checkbox-label"
-    }, [c.toLanguageString(b, o[b])])])]), y = function(h) {
-      const u = this.$props.dir === "rtl", D = t(f, {
+    }, [s.toLanguageString(C, l[C])])])]), w = function(d) {
+      const h = this.$props.dir === "rtl", K = t(f, {
         fillMode: "flat",
         themeColor: "primary",
         onClick: this.onFindPrev
       }, {
-        default: () => [t(F, {
-          name: `chevron-${u ? "right" : "left"}`,
-          icon: u ? W : $
-        }, null), c.toLanguageString(C, o[C])]
-      }), K = t(f, {
+        default: () => [t(N, {
+          name: `chevron-${h ? "right" : "left"}`,
+          icon: h ? $ : F
+        }, null), s.toLanguageString(v, l[v])]
+      }), U = t(f, {
         fillMode: "flat",
         themeColor: "primary",
         onClick: this.onFindNext
       }, {
-        default: () => [c.toLanguageString(S, o[S]), t(F, {
-          name: `chevron-${u ? "left" : "right"}`,
-          icon: u ? $ : W
+        default: () => [s.toLanguageString(R, l[R]), t(N, {
+          name: `chevron-${h ? "left" : "right"}`,
+          icon: h ? F : $
         }, null)]
       });
       return t("div", {
         class: "k-matches-container"
-      }, [D, this.hasMounted && t("span", {
-        ref: h
-      }, [this.matchesMessage(c.toLanguageString(v, o[v]))]), K]);
-    }, T = function(h) {
+      }, [K, this.hasMounted && t("span", {
+        ref: d
+      }, [this.matchesMessage(s.toLanguageString(M, l[M]))]), U]);
+    }, W = function(d) {
       return t("div", {
         class: "k-edit-label"
       }, [t("label", {
-        ref: h,
-        for: h
-      }, [c.toLanguageString(l, o[l])])]);
-    }, w = function(h) {
+        ref: d,
+        for: d
+      }, [s.toLanguageString(o, l[o])])]);
+    }, L = function(d) {
+      let h;
       return t("div", {
         class: "k-edit-field"
       }, [t("span", {
         class: "k-textbox k-input k-input-md k-rounded-md k-input-solid"
       }, [t("input", {
-        id: h,
-        ref: h,
+        id: d,
+        ref: d,
         type: "text",
         class: "k-input-inner",
         value: B,
         onInput: this.onSearchChange,
         onFocus: this.onSearchChange,
         onKeydown: this.onKeyDown
-      }, null)])]);
-    }, O = t("div", {
+      }, null)]), m && t(se, null, x(h = s.toLanguageString(m, l[m])) ? h : {
+        default: () => [h]
+      })]);
+    }, z = t("div", {
       class: "k-edit-label"
     }, [t("label", {
       for: "replaceWith"
-    }, [c.toLanguageString(p, o[p])])]), z = t("div", {
+    }, [s.toLanguageString(r, l[r])])]), D = t("div", {
       class: "k-edit-field"
     }, [t("span", {
       class: "k-textbox k-input k-input-md k-rounded-md k-input-solid"
@@ -204,11 +209,11 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
       id: "replaceWith",
       class: "k-input-inner",
       type: "text",
-      value: I,
+      value: O,
       onInput: this.onReplaceChange
     }, null)])]);
-    return t(P, {
-      title: c.toLanguageString(a, o[a]),
+    return t(q, {
+      title: s.toLanguageString(a, l[a]),
       onClose: this.onClose,
       windowStyle: {
         width: "auto",
@@ -220,39 +225,39 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
       maximizeButton: () => null,
       dir: this.$props.dir
     }, {
-      default: () => [t(q, {
+      default: () => [t(H, {
         dir: this.$props.dir,
         selected: this.selectedTab,
         class: "k-editor-find-replace",
         onSelect: this.onTabSelect,
         animation: !1
       }, {
-        default: () => [t(L, {
-          title: c.toLanguageString(i, o[i])
+        default: () => [t(E, {
+          title: s.toLanguageString(i, l[i])
         }, {
           default: () => [t("div", {
             class: "k-edit-form-container"
-          }, [T.call(this, "findWhatFind"), w.call(this, "findWhatFind")]), t("div", {
+          }, [W.call(this, "findWhatFind"), L.call(this, "findWhatFind")]), t("div", {
             class: "k-actions k-hstack k-justify-content-end"
-          }, null), M, y.call(this, "findWhatFind")]
-        }), t(L, {
-          title: c.toLanguageString(s, o[s])
+          }, null), T, w.call(this, "findWhatFind")]
+        }), t(E, {
+          title: s.toLanguageString(c, l[c])
         }, {
           default: () => [t("div", {
             class: "k-edit-form-container"
-          }, [T.call(this, "findWhatReplace"), w.call(this, "findWhatReplace"), O, z]), t("div", {
+          }, [W.call(this, "findWhatReplace"), L.call(this, "findWhatReplace"), z, D]), t("div", {
             class: "k-actions k-hstack k-justify-content-end"
           }, [t(f, {
-            disabled: !R,
+            disabled: !y,
             onClick: this.onReplace
-          }, N(e = c.toLanguageString(r, o[r])) ? e : {
+          }, x(e = s.toLanguageString(p, l[p])) ? e : {
             default: () => [e]
           }), t(f, {
-            disabled: !R,
+            disabled: !y,
             onClick: this.onReplaceAll
-          }, N(n = c.toLanguageString(d, o[d])) ? n : {
+          }, x(n = s.toLanguageString(u, l[u])) ? n : {
             default: () => [n]
-          })]), M, y.call(this, "findWhatReplace")]
+          })]), T, w.call(this, "findWhatReplace")]
         })]
       })]
     });
@@ -262,17 +267,17 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
       this.selectedTab = e.selected;
     },
     onClose() {
-      const e = this.$props.view, n = e.state, c = n.tr.setSelection(m.create(n.doc, n.selection.from, n.selection.to));
-      e.updateState(n.apply(c)), e.focus(), this.$emit("close");
+      const e = this.$props.view, n = e.state, s = n.tr.setSelection(g.create(n.doc, n.selection.from, n.selection.to));
+      e.updateState(n.apply(s)), e.focus(), this.$emit("close");
     },
     matchesMessage(e) {
-      const n = this.matches, c = this.nextMatch;
+      const n = this.matches, s = this.nextMatch;
       let a = 0, i = 0;
-      if (n && c) {
-        const s = n.findIndex((l) => l.eq(c));
-        a = s === -1 ? n.length : s + 1, i = n.length;
+      if (n && s) {
+        const c = n.findIndex((o) => o.eq(s));
+        a = c === -1 ? n.length : c + 1, i = n.length;
       }
-      return J(e, a, i);
+      return Q(e, a, i);
     },
     onFindNext() {
       this.onFind();
@@ -282,50 +287,50 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
     },
     onFind(e = !1) {
       const n = this.$props.view, {
-        searchText: c,
+        searchText: s,
         matchCase: a,
         matchCyclic: i,
-        matchWord: s,
-        useRegExp: l
-      } = this.$data, p = {
-        text: c,
-        matchWord: s,
+        matchWord: c,
+        useRegExp: o
+      } = this.$data, r = {
+        text: s,
+        matchWord: c,
         matchCase: a,
-        useRegExp: l,
+        useRegExp: o,
         backward: e,
         matchCyclic: i
-      }, r = Y(n.state, p);
-      if (r) {
-        const d = n.state.tr.setSelection(r);
-        d.scrollIntoView(), n.updateState(n.state.apply(d)), this._prevMatch = this.nextMatch, this.nextMatch = r, this._prevMatch !== this.nextMatch && this.$forceUpdate();
+      }, p = Z(n.state, r);
+      if (p) {
+        const u = n.state.tr.setSelection(p);
+        u.scrollIntoView(), n.updateState(n.state.apply(u)), this._prevMatch = this.nextMatch, this.nextMatch = p, this._prevMatch !== this.nextMatch && this.$forceUpdate();
       }
     },
     onReplace() {
       const e = this.$props.view, n = e.state.selection, {
-        replaceText: c
+        replaceText: s
       } = this.$data;
       if (!n.empty) {
-        const a = n.from, i = a + c.length, s = Z(n, c, e.state.tr);
-        s.setSelection(m.create(s.doc, a, i)), s.scrollIntoView(), e.dispatch(s), this.setNextState({});
+        const a = n.from, i = a + s.length, c = ee(n, s, e.state.tr);
+        c.setSelection(g.create(c.doc, a, i)), c.scrollIntoView(), e.dispatch(c), this.onFind(), this.setNextState({});
       }
     },
     onReplaceAll() {
       const e = this.$props.view, {
         searchText: n,
-        replaceText: c,
+        replaceText: s,
         matchCase: a,
         matchWord: i,
-        useRegExp: s
-      } = this.$data, l = {
+        useRegExp: c
+      } = this.$data, o = {
         text: n,
         matchWord: i,
         matchCase: a,
-        useRegExp: s
-      };
-      e.dispatch(ee(e.state, c, l)), this.setNextState({});
+        useRegExp: c
+      }, r = te(e.state, s, o);
+      r && (e.dispatch(r), this.setNextState({}));
     },
     onKeyDown(e) {
-      e.keyCode === ne ? this.onFindNext() : e.keyCode === ce && this.onClose();
+      e.keyCode === ae ? this.onFindNext() : e.keyCode === ce && this.onClose();
     },
     onMatchCaseChecked(e) {
       this.matchCase = e.target.checked, this.setNextState();
@@ -353,14 +358,20 @@ const ne = 13, ce = 27, ae = G.findAndReplace, ge = /* @__PURE__ */ U({
           matchWord: this.matchWord,
           matchCase: this.matchCase,
           useRegExp: this.useRegExp
-        }, c = e.state.selection, a = te(e.state.doc, n);
-        let i = !this.searchText && a[0] || a.find((s) => s.from >= c.from) || this.matchCyclic && a[0] || void 0;
-        this._prevMatch = this.nextMatch, this.matches = a, this.nextMatch = i;
+        }, s = e.state.selection;
+        let a = [], i;
+        try {
+          a = ne(e.state.doc, n);
+        } catch (o) {
+          o instanceof SyntaxError && (i = this.settings.messages.findReplaceInvalidRegExp);
+        }
+        const c = !this.searchText && a[0] || a.find((o) => o.from >= s.from) || this.matchCyclic && a[0] || void 0;
+        this._prevMatch = this.nextMatch, this.matches = a, this.nextMatch = c, this.error = i;
       } else
-        this._prevMatch = this.nextMatch, this.matches = [], this.nextMatch = void 0;
+        this._prevMatch = this.nextMatch, this.matches = [], this.nextMatch = void 0, this.error = void 0;
     }
   }
 });
 export {
-  ge as FindAndReplaceDialog
+  be as FindAndReplaceDialog
 };