@cozeloop/prompt-components 0.0.2 → 0.0.3

package/dist/lib/basic-editor/extensions/search/panel.js

@@ -0,0 +1,429 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var panel_exports = {};
+__export(panel_exports, {
+  SearchPanel: () => SearchPanel
+});
+module.exports = __toCommonJS(panel_exports);
+var import_crelt = __toESM(require("crelt"));
+var import_view = require("@codemirror/view");
+var import_search = require("@codemirror/search");
+var import_match_count = require("./dom/match-count");
+var import_icon = require("./dom/icon");
+class SearchPanel {
+  constructor(view) {
+    this.view = view;
+    this.commit = this.commit.bind(this);
+    this.query = (0, import_search.getSearchQuery)(view.state);
+    this.matchCount = new import_match_count.MatchCount();
+    const searchLine = this.initSearchLine(view);
+    const replaceLine = this.initReplaceLine(view);
+    const replaceLineStatus = () => {
+      var _a;
+      if (view.state.readOnly) {
+        replaceLine.style.display = "none";
+        return;
+      }
+      if (!((_a = this.expand) == null ? void 0 : _a.checked)) {
+        replaceLine.style.display = "none";
+        return;
+      }
+      replaceLine.style.display = "flex";
+    };
+    replaceLineStatus();
+    const expand = this.initExpandButton(view, () => replaceLineStatus());
+    const onMouseDown = useDragSearchPanel(this);
+    this.dom = (0, import_crelt.default)(
+      "div",
+      {
+        onkeydown: (e) => this.keydown(e),
+        class: "cm-custom-search"
+      },
+      [
+        (0, import_crelt.default)("div", {
+          class: "cm-custom-search-drag",
+          onmousedown: onMouseDown
+        }),
+        ...expand,
+        (0, import_crelt.default)(
+          "div",
+          {
+            class: "cm-custom-search-panel-content"
+          },
+          [searchLine, replaceLine]
+        )
+      ]
+    );
+    this.updateMatchCount(view.state, this.query);
+  }
+  initExpandButton(view, onExpandChange) {
+    this.expand = new import_icon.IconChevronRight({
+      name: "expand",
+      title: phrase(view, "展开"),
+      onchange: onExpandChange
+    });
+    return view.state.readOnly ? [] : [
+      (0, import_crelt.default)(
+        "div",
+        {
+          class: "cm-custom-search-panel-expand"
+        },
+        [this.expand.dom]
+      )
+    ];
+  }
+  initSearchLine(view) {
+    const inputWrapperRef = {
+      current: null
+    };
+    const handleInputFocus = () => {
+      var _a;
+      (_a = inputWrapperRef.current) == null ? void 0 : _a.focus();
+      if (inputWrapperRef.current && !inputWrapperRef.current.classList.contains(
+        "cm-custom-search-panel-content-input-wrapper-focus"
+      )) {
+        inputWrapperRef.current.classList.add(
+          "cm-custom-search-panel-content-input-wrapper-focus"
+        );
+      }
+    };
+    const handleInputBlur = () => {
+      var _a;
+      (_a = inputWrapperRef.current) == null ? void 0 : _a.blur();
+      if (inputWrapperRef.current) {
+        inputWrapperRef.current.classList.remove(
+          "cm-custom-search-panel-content-input-wrapper-focus"
+        );
+      }
+    };
+    this.searchField = (0, import_crelt.default)("input", {
+      value: this.query.search,
+      placeholder: phrase(view, "查找"),
+      title: phrase(view, "查找"),
+      class: "cm-custom-text-field",
+      name: "search",
+      form: "",
+      "main-field": "true",
+      onchange: this.commit,
+      onkeyup: this.commit,
+      onfocus: handleInputFocus,
+      onblur: handleInputBlur
+    });
+    this.caseField = new import_icon.IconCaseSensitive({
+      checked: this.query.caseSensitive,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      name: "case",
+      title: phrase(view, "区分大小写")
+    });
+    this.reField = new import_icon.IconRegExp({
+      name: "re",
+      checked: this.query.regexp,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, "正则表达式")
+    });
+    this.wordField = new import_icon.IconWholeWord({
+      name: "word",
+      checked: this.query.wholeWord,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, "全词匹配")
+    });
+    this.arrowUp = new import_icon.IconArrowUp({
+      name: "previous",
+      onclick: () => {
+        (0, import_search.findPrevious)(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "上一个匹配")
+    });
+    this.arrowDown = new import_icon.IconArrowDown({
+      name: "next",
+      onclick: () => {
+        (0, import_search.findNext)(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "下一个匹配")
+    });
+    inputWrapperRef.current = (0, import_crelt.default)(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-input-wrapper"
+      },
+      [
+        this.searchField,
+        // enter.dom,
+        this.caseField.dom,
+        this.reField.dom,
+        this.wordField.dom
+      ]
+    );
+    return (0, import_crelt.default)(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-top"
+      },
+      [
+        inputWrapperRef.current,
+        this.matchCount.dom,
+        (0, import_crelt.default)(
+          "div",
+          {
+            class: "cm-custom-search-action-wrapper"
+          },
+          [
+            this.arrowUp.dom,
+            this.arrowDown.dom,
+            new import_icon.IconClose({
+              name: "close-icon",
+              onclick: () => (0, import_search.closeSearchPanel)(view),
+              title: phrase(view, "关闭")
+            }).dom
+          ]
+        )
+      ]
+    );
+  }
+  initReplaceLine(view) {
+    const inputWrapperRef = {
+      current: null
+    };
+    const handleInputFocus = () => {
+      var _a;
+      (_a = inputWrapperRef.current) == null ? void 0 : _a.focus();
+      if (inputWrapperRef.current && !inputWrapperRef.current.classList.contains(
+        "cm-custom-search-panel-content-input-wrapper-focus"
+      )) {
+        inputWrapperRef.current.classList.add(
+          "cm-custom-search-panel-content-input-wrapper-focus"
+        );
+      }
+    };
+    const handleInputBlur = () => {
+      var _a;
+      (_a = inputWrapperRef.current) == null ? void 0 : _a.blur();
+      if (inputWrapperRef.current) {
+        inputWrapperRef.current.classList.remove(
+          "cm-custom-search-panel-content-input-wrapper-focus"
+        );
+      }
+    };
+    this.replaceField = (0, import_crelt.default)("input", {
+      value: this.query.replace,
+      placeholder: phrase(view, "替换"),
+      title: phrase(view, "替换"),
+      class: "cm-custom-text-field",
+      name: "replace",
+      form: "",
+      onchange: this.commit,
+      onkeyup: this.commit,
+      onfocus: handleInputFocus,
+      onblur: handleInputBlur
+    });
+    this.replace = new import_icon.IconReplace({
+      name: "replace",
+      onclick: () => {
+        (0, import_search.replaceNext)(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "替换")
+    });
+    this.replaceAll = new import_icon.IconReplaceAll({
+      name: "replaceAll",
+      onclick: () => {
+        (0, import_search.replaceAll)(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "替换所有")
+    });
+    inputWrapperRef.current = (0, import_crelt.default)(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-input-wrapper"
+      },
+      [this.replaceField]
+    );
+    return (0, import_crelt.default)(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-bottom"
+      },
+      [inputWrapperRef.current, this.replace.dom, this.replaceAll.dom]
+    );
+  }
+  commit() {
+    const query = new import_search.SearchQuery({
+      search: this.searchField.value,
+      caseSensitive: this.caseField.checked,
+      regexp: this.reField.checked,
+      wholeWord: this.wordField.checked,
+      replace: this.replaceField.value
+    });
+    if (!query.eq(this.query)) {
+      this.query = query;
+      this.view.dispatch({ effects: import_search.setSearchQuery.of(query) });
+    }
+    this.updateMatchCount(this.view.state, this.query);
+  }
+  keydown(e) {
+    if ((0, import_view.runScopeHandlers)(this.view, e, "search-panel")) {
+      e.preventDefault();
+    } else if ((e.keyCode === 13 || e.key === "Enter") && e.target === this.searchField) {
+      e.preventDefault();
+      (e.shiftKey ? import_search.findPrevious : import_search.findNext)(this.view);
+    } else if ((e.keyCode === 13 || e.key === "Enter") && e.target === this.replaceField) {
+      e.preventDefault();
+      (0, import_search.replaceNext)(this.view);
+    }
+  }
+  updateMatchCount(state, query) {
+    this.matchCount.data = __spreadProps(__spreadValues({}, findMatchIndex(state, query)), {
+      searching: !!query.search
+    });
+    if (this.matchCount.data.matchCount > 0) {
+      this.replace.disabled = false;
+      this.replaceAll.disabled = false;
+      this.arrowUp.disabled = false;
+      this.arrowDown.disabled = false;
+    } else {
+      this.replace.disabled = true;
+      this.replaceAll.disabled = true;
+      this.arrowUp.disabled = true;
+      this.arrowDown.disabled = true;
+    }
+  }
+  update(update) {
+    for (const tr of update.transactions) {
+      for (const effect of tr.effects) {
+        if (effect.is(import_search.setSearchQuery) && !effect.value.eq(this.query)) {
+          this.setQuery(effect.value);
+          this.updateMatchCount(update.state, effect.value);
+        }
+      }
+    }
+  }
+  setQuery(query) {
+    this.query = query;
+    this.searchField.value = query.search;
+    this.replaceField.value = query.replace;
+    this.caseField.checked = query.caseSensitive;
+    this.reField.checked = query.regexp;
+    this.wordField.checked = query.wholeWord;
+  }
+  mount() {
+    this.searchField.select();
+  }
+  get top() {
+    return true;
+  }
+}
+function phrase(view, p) {
+  return view.state.phrase(p);
+}
+function findMatchIndex(state, query) {
+  try {
+    const { from, to } = state.selection.main;
+    let index = 0;
+    let matchIndex = -1;
+    const cursor = query.getCursor(state);
+    let data = cursor.next();
+    while (!data.done) {
+      if (data.value.from === from && data.value.to === to) {
+        matchIndex = index;
+      }
+      data = cursor.next();
+      index++;
+    }
+    return { matchIndex, matchCount: index };
+  } catch (e) {
+    return { matchIndex: -1, matchCount: 0 };
+  }
+}
+function useDragSearchPanel(panel) {
+  let isResizing = false;
+  let startX = 0;
+  let startWidth = 0;
+  const onMouseMove = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isResizing || !(panel == null ? void 0 : panel.dom)) {
+      return;
+    }
+    const newWidth = startX - e.clientX + startWidth;
+    panel.dom.style.width = `${newWidth}px`;
+  };
+  const onMouseUp = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    isResizing = false;
+    startX = 0;
+    startWidth = 0;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onMouseDown = (e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    isResizing = true;
+    startX = e.clientX;
+    startWidth = (_a = panel == null ? void 0 : panel.dom.clientWidth) != null ? _a : 0;
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  return onMouseDown;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchPanel
+});

package/dist/lib/basic-editor/extensions/search/theme.js

@@ -0,0 +1,208 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+  theme: () => theme
+});
+module.exports = __toCommonJS(theme_exports);
+var import_view = require("@codemirror/view");
+var import_state = require("@codemirror/state");
+const theme = import_state.Prec.high(
+  import_view.EditorView.theme({
+    "& .cm-panels.cm-panels-top": {
+      borderBottom: "none",
+      backgroundColor: "transparent"
+    },
+    "& .cm-panels.cm-panels-bottom": {
+      borderTop: "none",
+      backgroundColor: "transparent",
+      border: "1px solid rgba(28, 31, 35, .08)"
+    },
+    "& .cm-searchMatch": {
+      outline: "none"
+    },
+    "& .cm-custom-search": {
+      position: "absolute",
+      top: 0,
+      right: "10px",
+      backgroundColor: "#f3f3f3",
+      display: "flex",
+      padding: "4px",
+      boxSizing: "border-box",
+      minWidth: "360px",
+      maxWidth: "calc(100% - 30px)",
+      borderRadius: "4px",
+      boxShadow: "0 2px 8px 2px rgba(0, 0, 0, 0.16)",
+      overflow: "hidden"
+    },
+    "& .cm-custom-search button": {
+      borderWidth: 0
+    },
+    "& .cm-custom-search input": {
+      outline: "none"
+    },
+    "& .cm-custom-search .cm-custom-search-drag": {
+      width: "3px",
+      height: "100%",
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      backgroundColor: "#c8c8c8"
+    },
+    "& .cm-custom-search .cm-custom-search-drag:hover": {
+      backgroundColor: "#0090f1",
+      cursor: "col-resize"
+    },
+    "& .cm-custom-text-field": {
+      backgroundColor: "inherit",
+      padding: 0,
+      border: "none",
+      color: "#444d56",
+      fontSize: "12px",
+      lineHeight: "16px",
+      verticalAlign: "middle",
+      width: "calc(100% - 58px)"
+    },
+    "& .cm-custom-search-panel-icon": {
+      display: "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      padding: "4px",
+      "border-radius": "2px",
+      "background-color": "transparent",
+      "box-sizing": "border-box",
+      width: "20px",
+      height: "20px",
+      cursor: "pointer"
+    },
+    "& .cm-custom-search-panel-icon:hover": {
+      color: "rgba(0, 100, 250, 1)",
+      backgroundColor: "rgba(46, 60, 56, .09)"
+    },
+    "& .cm-custom-search-panel-icon:active": {
+      backgroundColor: "rgba(46, 50, 56, .13)"
+    },
+    "& .cm-custom-search-panel-icon span": {
+      display: "inline-flex",
+      lineHeight: "12px",
+      fontSize: "12px"
+    },
+    "& .cm-custom-search-panel-icon-active": {
+      color: "rgba(0, 100, 250, 1)",
+      backgroundColor: "rgba(46, 50, 56, .05)"
+    },
+    "& .cm-custom-search-panel-icon-disabled": {
+      color: "rgba(28, 31, 35, .35)",
+      backgroundColor: "transparent"
+    },
+    "& .cm-custom-search-panel-icon-disabled:hover": {
+      color: "rgba(28, 31, 35, .35)",
+      backgroundColor: "transparent"
+    },
+    "& .cm-custom-search-panel-icon-disabled:active": {
+      color: "rgba(28, 31, 35, .35)",
+      backgroundColor: "transparent"
+    },
+    "& .cm-custom-search-panel-expand": {
+      display: "flex",
+      padding: "4px"
+    },
+    "& .cm-custom-search-panel-content": {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1
+    },
+    "& .cm-custom-search-panel-content-top": {
+      display: "flex",
+      alignItems: "center"
+    },
+    "& .cm-custom-search-action-wrapper": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "end"
+    },
+    "& .cm-custom-search-panel-content-input-wrapper": {
+      display: "flex",
+      alignItems: "center",
+      flex: 1,
+      position: "relative",
+      border: "1px solid #555",
+      padding: "4px",
+      minWidth: "170px",
+      marginLeft: "4px",
+      marginRight: "6px",
+      borderRadius: "2px"
+    },
+    "& .cm-custom-search-panel-content-input-wrapper-focus": {
+      borderColor: "rgba(0, 100, 250, 1)"
+    },
+    "& .cm-custom-search-panel-content-input-wrapper .cm-custom-search-panel-icon": {
+      position: "absolute",
+      top: "4px",
+      right: "4px",
+      padding: "2px",
+      width: "16px",
+      height: "16px !important"
+    },
+    "& .cm-panel.cm-custom-search [name=word]": {
+      right: "22px"
+    },
+    "& .cm-panel.cm-custom-search [name=case]": {
+      right: "40px"
+    },
+    "& .cm-panel.cm-custom-search [name=enter]": {
+      right: "58px"
+    },
+    "& .cm-panel.cm-custom-search [name=previous]": {
+      marginRight: "2px"
+    },
+    "& .cm-panel.cm-custom-search [name=next]": {
+      marginRight: "2px"
+    },
+    "& .cm-panel.cm-custom-search [name=close-icon]": {
+      marginRight: "2px"
+    },
+    "& .cm-panel.cm-custom-search [name=replace]": {
+      marginRight: "2px"
+    },
+    "& .cm-panel.cm-custom-search  [name=expand]": {
+      transform: "rotate(0deg)"
+    },
+    "& .cm-panel.cm-custom-search  [name=expand].cm-custom-search-panel-icon-active": {
+      transform: "rotate(90deg)"
+    },
+    "& .cm-custom-search-match-count": {
+      fontSize: "12px",
+      width: "80px",
+      overflow: "hidden"
+    },
+    "& .cm-custom-search-panel-content-bottom": {
+      marginRight: "104px",
+      display: "flex",
+      alignItems: "center"
+    },
+    "& .cm-custom-search-panel-content-bottom .cm-custom-search-panel-content-input-wrapper": {
+      marginTop: "6px"
+    }
+  })
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  theme
+});