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

package/dist/esm/dialogs/FindReplace.js

@@ -0,0 +1,880 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Window } from '@progress/kendo-vue-dialogs';
+import { TabStrip, TabStripTab } from '@progress/kendo-vue-layout';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './../messages.js';
+import { EditorToolsSettings } from './../config/toolsSettings.js';
+import { formatString } from './../tools/utils.js';
+import { find, replace, replaceAll, findAll, TextSelection, textHighlightKey, selectedLineTextOnly } from '@progress/kendo-editor-common';
+var enter = 13,
+    esc = 27;
+var settings = EditorToolsSettings.findAndReplace;
+/**
+ * @hidden
+ */
+
+var FindAndReplaceDialogVue2 = {
+  name: 'KendoFindAndReplaceDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
+  props: {
+    view: Object,
+    settings: {
+      type: Object,
+      default: function _default() {
+        return settings;
+      }
+    },
+    dir: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    this._prevMatch = undefined;
+    this.nextMatch = undefined;
+  },
+  data: function data() {
+    return {
+      selectedTab: 0,
+      searchText: selectedLineTextOnly(this.$props.view.state),
+      replaceText: '',
+      matchCase: false,
+      matchWord: false,
+      matchCyclic: false,
+      useRegExp: false,
+      matches: [],
+      hasMounted: false
+    };
+  },
+  mounted: function mounted() {
+    if (this.$el) {
+      document.body.append(this.$el);
+    }
+
+    this.setNextState();
+    this.hasMounted = true;
+    setTimeout(function () {
+      var findInput = document.getElementById('findWhatFind');
+
+      if (findInput) {
+        findInput.focus();
+      }
+    }, 10);
+  },
+
+  /**
+   * @hidden
+   */
+  updated: function updated() {
+    var matches = this.matches || [];
+    var nextMatch = this.nextMatch;
+    var view = this.$props.view;
+
+    if (this._prevMatch !== nextMatch) {
+      var state = view.state; // highlight selection
+
+      var tr = state.tr;
+      var highlights_1 = [];
+      matches.forEach(function (m) {
+        highlights_1.push({
+          from: m.from,
+          to: m.to,
+          attrs: {
+            class: nextMatch && m.eq(nextMatch) ? 'k-text-selected' : 'k-text-highlighted'
+          }
+        });
+      });
+      tr.setMeta(textHighlightKey, highlights_1);
+      tr.setSelection(nextMatch || TextSelection.create(state.doc, state.selection.from));
+      view.dispatch(tr);
+    }
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.$el) {
+      this.$el.remove();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.$el) {
+      this.$el.remove();
+    }
+  },
+  // @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 localization = provideLocalizationService(this);
+    var _a = this.settings.messages,
+        findReplaceDialogTitle = _a.findReplaceDialogTitle,
+        findReplaceTabFind = _a.findReplaceTabFind,
+        findReplaceTabReplace = _a.findReplaceTabReplace,
+        findReplaceFindWhat = _a.findReplaceFindWhat,
+        findReplaceReplaceWith = _a.findReplaceReplaceWith,
+        findReplaceReplace = _a.findReplaceReplace,
+        findReplaceReplaceAll = _a.findReplaceReplaceAll,
+        findReplaceMatchCase = _a.findReplaceMatchCase,
+        findReplaceMatchWord = _a.findReplaceMatchWord,
+        findReplaceMatchCyclic = _a.findReplaceMatchCyclic,
+        findReplaceUseRegExp = _a.findReplaceUseRegExp,
+        findReplacePrevMatch = _a.findReplacePrevMatch,
+        findReplaceNextMatch = _a.findReplaceNextMatch,
+        findReplaceMatches = _a.findReplaceMatches;
+
+    var _b = this,
+        matchCase = _b.matchCase,
+        matchWord = _b.matchWord,
+        matchCyclic = _b.matchCyclic,
+        useRegExp = _b.useRegExp,
+        searchText = _b.searchText,
+        replaceText = _b.replaceText,
+        nextMatch = _b.nextMatch;
+
+    var checkboxes = h("div", {
+      "class": "k-search-options"
+    }, [h("span", [h("input", {
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        id: "match-case"
+      },
+      id: "match-case",
+      checked: this.v3 ? matchCase : null,
+      domProps: this.v3 ? undefined : {
+        "checked": matchCase
+      },
+      onChange: this.onMatchCaseChecked,
+      on: this.v3 ? undefined : {
+        "change": this.onMatchCaseChecked
+      }
+    }), h("label", {
+      "for": "match-case",
+      attrs: this.v3 ? undefined : {
+        "for": "match-case"
+      },
+      "class": "k-checkbox-label"
+    }, [localization.toLanguageString(findReplaceMatchCase, messages[findReplaceMatchCase])])]), h("span", [h("input", {
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        id: "match-whole"
+      },
+      id: "match-whole",
+      checked: this.v3 ? matchWord : null,
+      domProps: this.v3 ? undefined : {
+        "checked": matchWord
+      },
+      onChange: this.onMatchWordChecked,
+      on: this.v3 ? undefined : {
+        "change": this.onMatchWordChecked
+      }
+    }), h("label", {
+      "for": "match-whole",
+      attrs: this.v3 ? undefined : {
+        "for": "match-whole"
+      },
+      "class": "k-checkbox-label"
+    }, [localization.toLanguageString(findReplaceMatchWord, messages[findReplaceMatchWord])])]), h("span", [h("input", {
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        id: "match-cyclic"
+      },
+      id: "match-cyclic",
+      checked: this.v3 ? matchCyclic : null,
+      domProps: this.v3 ? undefined : {
+        "checked": matchCyclic
+      },
+      onChange: this.onMatchCyclicChecked,
+      on: this.v3 ? undefined : {
+        "change": this.onMatchCyclicChecked
+      }
+    }), h("label", {
+      "for": "match-cyclic",
+      attrs: this.v3 ? undefined : {
+        "for": "match-cyclic"
+      },
+      "class": "k-checkbox-label"
+    }, [localization.toLanguageString(findReplaceMatchCyclic, messages[findReplaceMatchCyclic])])]), h("span", [h("input", {
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        id: "regular-expression"
+      },
+      id: "regular-expression",
+      checked: this.v3 ? useRegExp : null,
+      domProps: this.v3 ? undefined : {
+        "checked": useRegExp
+      },
+      onChange: this.onUseRegExpChecked,
+      on: this.v3 ? undefined : {
+        "change": this.onUseRegExpChecked
+      }
+    }), h("label", {
+      "for": "regular-expression",
+      attrs: this.v3 ? undefined : {
+        "for": "regular-expression"
+      },
+      "class": "k-checkbox-label"
+    }, [localization.toLanguageString(findReplaceUseRegExp, messages[findReplaceUseRegExp])])])]);
+
+    var navigation = function navigation(findWhatRef) {
+      var isRtl = this.$props.dir === 'rtl';
+      var prevButton = // @ts-ignore function children
+      h(Button, {
+        fillMode: 'flat',
+        attrs: this.v3 ? undefined : {
+          fillMode: 'flat',
+          themeColor: 'primary'
+        },
+        themeColor: 'primary',
+        onClick: this.onFindPrev,
+        on: this.v3 ? undefined : {
+          "click": this.onFindPrev
+        }
+      }, this.v3 ? function () {
+        return [h("span", {
+          "class": "k-icon k-i-arrow-chevron-".concat(isRtl ? 'right' : 'left')
+        }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])];
+      } : [h("span", {
+        "class": "k-icon k-i-arrow-chevron-".concat(isRtl ? 'right' : 'left')
+      }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])]);
+      var nextButton = // @ts-ignore function children
+      h(Button, {
+        fillMode: 'flat',
+        attrs: this.v3 ? undefined : {
+          fillMode: 'flat',
+          themeColor: 'primary'
+        },
+        themeColor: 'primary',
+        onClick: this.onFindNext,
+        on: this.v3 ? undefined : {
+          "click": this.onFindNext
+        }
+      }, this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h("span", {
+          "class": "k-icon k-i-arrow-chevron-".concat(isRtl ? 'left' : 'right')
+        })];
+      } : [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h("span", {
+        "class": "k-icon k-i-arrow-chevron-".concat(isRtl ? 'left' : 'right')
+      })]);
+      return h("div", {
+        "class": "k-matches-container"
+      }, [prevButton, this.hasMounted && h("span", {
+        ref: findWhatRef
+      }, [this.matchesMessage(localization.toLanguageString(findReplaceMatches, messages[findReplaceMatches]))]), nextButton]);
+    };
+
+    var findWhatLabel = function findWhatLabel(findWhatId) {
+      return h("div", {
+        "class": "k-edit-label"
+      }, [h("label", {
+        ref: findWhatId,
+        "for": findWhatId,
+        attrs: this.v3 ? undefined : {
+          "for": findWhatId
+        }
+      }, [localization.toLanguageString(findReplaceFindWhat, messages[findReplaceFindWhat])])]);
+    };
+
+    var findWhat = function findWhat(findWhatId) {
+      return h("div", {
+        "class": "k-edit-field"
+      }, [h("span", {
+        "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+      }, [h("input", {
+        id: findWhatId,
+        attrs: this.v3 ? undefined : {
+          id: findWhatId,
+          type: "text"
+        },
+        ref: findWhatId,
+        type: "text",
+        "class": "k-input-inner",
+        value: this.v3 ? searchText : null,
+        domProps: this.v3 ? undefined : {
+          "value": searchText
+        },
+        onInput: this.onSearchChange,
+        on: this.v3 ? undefined : {
+          "input": this.onSearchChange,
+          "focus": this.onSearchChange,
+          "keydown": this.onKeyDown
+        },
+        onFocus: this.onSearchChange,
+        onKeydown: this.onKeyDown
+      })])]);
+    };
+
+    var replaceWithLabel = h("div", {
+      "class": "k-edit-label"
+    }, [h("label", {
+      "for": "replaceWith",
+      attrs: this.v3 ? undefined : {
+        "for": "replaceWith"
+      }
+    }, [localization.toLanguageString(findReplaceReplaceWith, messages[findReplaceReplaceWith])])]);
+    var replaceWith = h("div", {
+      "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+    }, [h("input", {
+      id: "replaceWith",
+      attrs: this.v3 ? undefined : {
+        id: "replaceWith",
+        type: "text"
+      },
+      "class": "k-input-inner",
+      type: "text",
+      value: this.v3 ? replaceText : null,
+      domProps: this.v3 ? undefined : {
+        "value": replaceText
+      },
+      onInput: this.onReplaceChange,
+      on: this.v3 ? undefined : {
+        "input": this.onReplaceChange
+      }
+    })])]);
+    return (// @ts-ignore function children
+      h(Window, {
+        title: localization.toLanguageString(findReplaceDialogTitle, messages[findReplaceDialogTitle]),
+        attrs: this.v3 ? undefined : {
+          title: localization.toLanguageString(findReplaceDialogTitle, messages[findReplaceDialogTitle]),
+          windowStyle: {
+            width: 'auto',
+            height: 'auto',
+            userSelect: 'none'
+          },
+          resizable: false,
+          minimizeButton: function minimizeButton() {
+            return null;
+          },
+          maximizeButton: function maximizeButton() {
+            return null;
+          },
+          dir: this.$props.dir
+        },
+        onClose: this.onClose,
+        on: this.v3 ? undefined : {
+          "close": this.onClose
+        },
+        windowStyle: {
+          width: 'auto',
+          height: 'auto',
+          userSelect: 'none'
+        },
+        resizable: false,
+        minimizeButton: function minimizeButton() {
+          return null;
+        },
+        maximizeButton: function maximizeButton() {
+          return null;
+        },
+        dir: this.$props.dir
+      }, this.v3 ? function () {
+        return [// @ts-ignore function children
+        h(TabStrip, {
+          dir: _this.$props.dir,
+          attrs: _this.v3 ? undefined : {
+            dir: _this.$props.dir,
+            selected: _this.selectedTab,
+            animation: false
+          },
+          selected: _this.selectedTab,
+          "class": "k-editor-find-replace",
+          onSelect: _this.onTabSelect,
+          on: _this.v3 ? undefined : {
+            "select": _this.onTabSelect
+          },
+          animation: false
+        }, _this.v3 ? function () {
+          return [// @ts-ignore function children
+          h(TabStripTab, {
+            title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind]),
+            attrs: _this.v3 ? undefined : {
+              title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind])
+            }
+          }, _this.v3 ? function () {
+            return [h("div", {
+              "class": "k-edit-form-container"
+            }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
+          } : [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), // @ts-ignore function children
+          h(TabStripTab, {
+            title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace]),
+            attrs: _this.v3 ? undefined : {
+              title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace])
+            }
+          }, _this.v3 ? function () {
+            return [h("div", {
+              "class": "k-edit-form-container"
+            }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+              "class": "k-actions k-hstack k-justify-content-end"
+            }, [// @ts-ignore function children
+            h(Button, {
+              disabled: !Boolean(nextMatch),
+              attrs: _this.v3 ? undefined : {
+                disabled: !Boolean(nextMatch)
+              },
+              onClick: _this.onReplace,
+              on: _this.v3 ? undefined : {
+                "click": _this.onReplace
+              }
+            }, _this.v3 ? function () {
+              return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+            } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), // @ts-ignore function children
+            h(Button, {
+              disabled: !Boolean(nextMatch),
+              attrs: _this.v3 ? undefined : {
+                disabled: !Boolean(nextMatch)
+              },
+              onClick: _this.onReplaceAll,
+              on: _this.v3 ? undefined : {
+                "click": _this.onReplaceAll
+              }
+            }, _this.v3 ? function () {
+              return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+            } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
+          } : [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+            "class": "k-actions k-hstack k-justify-content-end"
+          }, [h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplace,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplace
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplaceAll,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplaceAll
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])];
+        } : [h(TabStripTab, {
+          title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind]),
+          attrs: _this.v3 ? undefined : {
+            title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind])
+          }
+        }, _this.v3 ? function () {
+          return [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
+        } : [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(TabStripTab, {
+          title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace]),
+          attrs: _this.v3 ? undefined : {
+            title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace])
+          }
+        }, _this.v3 ? function () {
+          return [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+            "class": "k-actions k-hstack k-justify-content-end"
+          }, [h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplace,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplace
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplaceAll,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplaceAll
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
+        } : [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+          "class": "k-actions k-hstack k-justify-content-end"
+        }, [h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplace,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplace
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplaceAll,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplaceAll
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])])];
+      } : [h(TabStrip, {
+        dir: _this.$props.dir,
+        attrs: _this.v3 ? undefined : {
+          dir: _this.$props.dir,
+          selected: _this.selectedTab,
+          animation: false
+        },
+        selected: _this.selectedTab,
+        "class": "k-editor-find-replace",
+        onSelect: _this.onTabSelect,
+        on: _this.v3 ? undefined : {
+          "select": _this.onTabSelect
+        },
+        animation: false
+      }, _this.v3 ? function () {
+        return [h(TabStripTab, {
+          title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind]),
+          attrs: _this.v3 ? undefined : {
+            title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind])
+          }
+        }, _this.v3 ? function () {
+          return [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
+        } : [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(TabStripTab, {
+          title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace]),
+          attrs: _this.v3 ? undefined : {
+            title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace])
+          }
+        }, _this.v3 ? function () {
+          return [h("div", {
+            "class": "k-edit-form-container"
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+            "class": "k-actions k-hstack k-justify-content-end"
+          }, [h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplace,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplace
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+            disabled: !Boolean(nextMatch),
+            attrs: _this.v3 ? undefined : {
+              disabled: !Boolean(nextMatch)
+            },
+            onClick: _this.onReplaceAll,
+            on: _this.v3 ? undefined : {
+              "click": _this.onReplaceAll
+            }
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
+        } : [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+          "class": "k-actions k-hstack k-justify-content-end"
+        }, [h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplace,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplace
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplaceAll,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplaceAll
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])];
+      } : [h(TabStripTab, {
+        title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind]),
+        attrs: _this.v3 ? undefined : {
+          title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind])
+        }
+      }, _this.v3 ? function () {
+        return [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
+      } : [h("div", {
+        "class": "k-edit-form-container"
+      }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(TabStripTab, {
+        title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace]),
+        attrs: _this.v3 ? undefined : {
+          title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace])
+        }
+      }, _this.v3 ? function () {
+        return [h("div", {
+          "class": "k-edit-form-container"
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+          "class": "k-actions k-hstack k-justify-content-end"
+        }, [h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplace,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplace
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+          disabled: !Boolean(nextMatch),
+          attrs: _this.v3 ? undefined : {
+            disabled: !Boolean(nextMatch)
+          },
+          onClick: _this.onReplaceAll,
+          on: _this.v3 ? undefined : {
+            "click": _this.onReplaceAll
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
+      } : [h("div", {
+        "class": "k-edit-form-container"
+      }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
+        "class": "k-actions k-hstack k-justify-content-end"
+      }, [h(Button, {
+        disabled: !Boolean(nextMatch),
+        attrs: _this.v3 ? undefined : {
+          disabled: !Boolean(nextMatch)
+        },
+        onClick: _this.onReplace,
+        on: _this.v3 ? undefined : {
+          "click": _this.onReplace
+        }
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])];
+      } : [localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])]), h(Button, {
+        disabled: !Boolean(nextMatch),
+        attrs: _this.v3 ? undefined : {
+          disabled: !Boolean(nextMatch)
+        },
+        onClick: _this.onReplaceAll,
+        on: _this.v3 ? undefined : {
+          "click": _this.onReplaceAll
+        }
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])];
+      } : [localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])])])
+    ); //    document.body);
+  },
+  methods: {
+    onTabSelect: function onTabSelect(event) {
+      this.selectedTab = event.selected;
+    },
+    onClose: function onClose() {
+      var view = this.$props.view;
+      var state = view.state;
+      var transaction = state.tr.setSelection(TextSelection.create(state.doc, state.selection.from, state.selection.to));
+      view.updateState(state.apply(transaction));
+      view.focus();
+      this.$emit('close');
+    },
+    matchesMessage: function matchesMessage(locMessage) {
+      var matches = this.matches;
+      var nextMatch = this.nextMatch;
+      var cur = 0,
+          all = 0;
+
+      if (matches && nextMatch) {
+        var current = matches.findIndex(function (s) {
+          return s.eq(nextMatch);
+        });
+        cur = current === -1 ? matches.length : current + 1;
+        all = matches.length;
+      }
+
+      return formatString(locMessage, cur, all);
+    },
+    onFindNext: function onFindNext() {
+      this.onFind();
+    },
+    onFindPrev: function onFindPrev() {
+      this.onFind(true);
+    },
+    onFind: function onFind(backward) {
+      if (backward === void 0) {
+        backward = false;
+      }
+
+      var view = this.$props.view;
+      var _a = this.$data,
+          text = _a.searchText,
+          matchCase = _a.matchCase,
+          matchCyclic = _a.matchCyclic,
+          matchWord = _a.matchWord,
+          useRegExp = _a.useRegExp;
+      var searchOptions = {
+        text: text,
+        matchWord: matchWord,
+        matchCase: matchCase,
+        useRegExp: useRegExp,
+        backward: backward,
+        matchCyclic: matchCyclic
+      };
+      var selectionResult = find(view.state, searchOptions);
+
+      if (selectionResult) {
+        var transaction = view.state.tr.setSelection(selectionResult);
+        transaction.scrollIntoView();
+        view.updateState(view.state.apply(transaction));
+        this._prevMatch = this.nextMatch;
+        this.nextMatch = selectionResult;
+
+        if (this._prevMatch !== this.nextMatch) {
+          this.$forceUpdate();
+        }
+      }
+    },
+    onReplace: function onReplace() {
+      var view = this.$props.view;
+      var selection = view.state.selection;
+      var replaceText = this.$data.replaceText;
+
+      if (!selection.empty) {
+        var start = selection.from;
+        var end = start + replaceText.length;
+        var transaction = replace(selection, replaceText, view.state.tr);
+        transaction.setSelection(TextSelection.create(transaction.doc, start, end));
+        transaction.scrollIntoView();
+        view.dispatch(transaction);
+        this.setNextState({});
+      }
+    },
+    onReplaceAll: function onReplaceAll() {
+      var view = this.$props.view;
+      var _a = this.$data,
+          searchText = _a.searchText,
+          replaceText = _a.replaceText,
+          matchCase = _a.matchCase,
+          matchWord = _a.matchWord,
+          useRegExp = _a.useRegExp;
+      var searchOptions = {
+        text: searchText,
+        matchWord: matchWord,
+        matchCase: matchCase,
+        useRegExp: useRegExp
+      };
+      view.dispatch(replaceAll(view.state, replaceText, searchOptions));
+      this.setNextState({});
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.keyCode === enter) {
+        this.onFindNext();
+      } else if (event.keyCode === esc) {
+        this.onClose();
+      }
+    },
+    onMatchCaseChecked: function onMatchCaseChecked(e) {
+      this.matchCase = e.target.checked;
+      this.setNextState();
+    },
+    onMatchWordChecked: function onMatchWordChecked(e) {
+      this.matchWord = e.target.checked;
+      this.setNextState();
+    },
+    onMatchCyclicChecked: function onMatchCyclicChecked(e) {
+      this.matchCyclic = e.target.checked;
+      this.setNextState();
+    },
+    onUseRegExpChecked: function onUseRegExpChecked(e) {
+      this.useRegExp = e.target.checked;
+      this.setNextState();
+    },
+    onSearchChange: function onSearchChange(e) {
+      this.searchText = e.target.value;
+      this.setNextState();
+    },
+    onReplaceChange: function onReplaceChange(e) {
+      this.replaceText = e.target.value;
+      this.setNextState();
+    },
+    setNextState: function setNextState() {
+      var view = this.$props.view;
+
+      if (this.searchText) {
+        var searchOptions = {
+          text: this.searchText,
+          matchWord: this.matchWord,
+          matchCase: this.matchCase,
+          useRegExp: this.useRegExp
+        };
+        var selection_1 = view.state.selection;
+        var matches = findAll(view.state.doc, searchOptions);
+        var nextMatch = !this.searchText && matches[0] || matches.find(function (match) {
+          return match.from >= selection_1.from;
+        }) || this.matchCyclic && matches[0] || undefined;
+        this._prevMatch = this.nextMatch;
+        this.matches = matches;
+        this.nextMatch = nextMatch;
+      } else {
+        this._prevMatch = this.nextMatch;
+        this.matches = [];
+        this.nextMatch = undefined;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var FindAndReplaceDialog = FindAndReplaceDialogVue2;
+export { FindAndReplaceDialog, FindAndReplaceDialogVue2 };