@cozeloop/prompt-components 0.0.2 → 0.0.3

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

@@ -0,0 +1,418 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
+import createEle from "crelt";
+import {
+  runScopeHandlers
+} from "@codemirror/view";
+import {
+  closeSearchPanel,
+  findNext,
+  findPrevious,
+  getSearchQuery,
+  replaceAll,
+  replaceNext,
+  SearchQuery,
+  setSearchQuery
+} from "@codemirror/search";
+import { MatchCount } from "./dom/match-count";
+import {
+  IconCaseSensitive,
+  IconRegExp,
+  IconWholeWord,
+  IconArrowUp,
+  IconArrowDown,
+  IconReplace,
+  IconReplaceAll,
+  IconClose,
+  IconChevronRight
+} from "./dom/icon";
+class SearchPanel {
+  constructor(view) {
+    this.view = view;
+    this.commit = this.commit.bind(this);
+    this.query = getSearchQuery(view.state);
+    this.matchCount = new 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 = createEle(
+      "div",
+      {
+        onkeydown: (e) => this.keydown(e),
+        class: "cm-custom-search"
+      },
+      [
+        createEle("div", {
+          class: "cm-custom-search-drag",
+          onmousedown: onMouseDown
+        }),
+        ...expand,
+        createEle(
+          "div",
+          {
+            class: "cm-custom-search-panel-content"
+          },
+          [searchLine, replaceLine]
+        )
+      ]
+    );
+    this.updateMatchCount(view.state, this.query);
+  }
+  initExpandButton(view, onExpandChange) {
+    this.expand = new IconChevronRight({
+      name: "expand",
+      title: phrase(view, "展开"),
+      onchange: onExpandChange
+    });
+    return view.state.readOnly ? [] : [
+      createEle(
+        "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 = createEle("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 IconCaseSensitive({
+      checked: this.query.caseSensitive,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      name: "case",
+      title: phrase(view, "区分大小写")
+    });
+    this.reField = new IconRegExp({
+      name: "re",
+      checked: this.query.regexp,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, "正则表达式")
+    });
+    this.wordField = new IconWholeWord({
+      name: "word",
+      checked: this.query.wholeWord,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, "全词匹配")
+    });
+    this.arrowUp = new IconArrowUp({
+      name: "previous",
+      onclick: () => {
+        findPrevious(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "上一个匹配")
+    });
+    this.arrowDown = new IconArrowDown({
+      name: "next",
+      onclick: () => {
+        findNext(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "下一个匹配")
+    });
+    inputWrapperRef.current = createEle(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-input-wrapper"
+      },
+      [
+        this.searchField,
+        // enter.dom,
+        this.caseField.dom,
+        this.reField.dom,
+        this.wordField.dom
+      ]
+    );
+    return createEle(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-top"
+      },
+      [
+        inputWrapperRef.current,
+        this.matchCount.dom,
+        createEle(
+          "div",
+          {
+            class: "cm-custom-search-action-wrapper"
+          },
+          [
+            this.arrowUp.dom,
+            this.arrowDown.dom,
+            new IconClose({
+              name: "close-icon",
+              onclick: () => 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 = createEle("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 IconReplace({
+      name: "replace",
+      onclick: () => {
+        replaceNext(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "替换")
+    });
+    this.replaceAll = new IconReplaceAll({
+      name: "replaceAll",
+      onclick: () => {
+        replaceAll(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, "替换所有")
+    });
+    inputWrapperRef.current = createEle(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-input-wrapper"
+      },
+      [this.replaceField]
+    );
+    return createEle(
+      "div",
+      {
+        class: "cm-custom-search-panel-content-bottom"
+      },
+      [inputWrapperRef.current, this.replace.dom, this.replaceAll.dom]
+    );
+  }
+  commit() {
+    const query = new 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: setSearchQuery.of(query) });
+    }
+    this.updateMatchCount(this.view.state, this.query);
+  }
+  keydown(e) {
+    if (runScopeHandlers(this.view, e, "search-panel")) {
+      e.preventDefault();
+    } else if ((e.keyCode === 13 || e.key === "Enter") && e.target === this.searchField) {
+      e.preventDefault();
+      (e.shiftKey ? findPrevious : findNext)(this.view);
+    } else if ((e.keyCode === 13 || e.key === "Enter") && e.target === this.replaceField) {
+      e.preventDefault();
+      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(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;
+}
+export {
+  SearchPanel
+};

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

@@ -0,0 +1,184 @@
+import { EditorView } from "@codemirror/view";
+import { Prec } from "@codemirror/state";
+const theme = Prec.high(
+  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"
+    }
+  })
+);
+export {
+  theme
+};

package/dist/es/basic-editor/extensions/validation.js

@@ -0,0 +1,84 @@
+import { useLayoutEffect } from "react";
+import { useInjector } from "@coze-editor/editor/react";
+import { astDecorator } from "@coze-editor/editor";
+import { VARIABLE_MAX_LEN } from "../../consts";
+import styles from "./validation.module";
+function validate(text) {
+  const regex = new RegExp(`^[a-zA-Z][\\w]{0,${VARIABLE_MAX_LEN - 1}}$`, "gm");
+  if (regex.test(text)) {
+    return true;
+  }
+  return false;
+}
+function Validation({
+  variables,
+  isNormalTemplate
+}) {
+  const injector = useInjector();
+  useLayoutEffect(
+    () => injector.inject([
+      astDecorator.whole.of((cursor, state) => {
+        var _a, _b, _c, _d;
+        if (cursor.name === "JinjaExpression" && ((_a = cursor.node.firstChild) == null ? void 0 : _a.name) === "JinjaExpressionStart" && ((_b = cursor.node.lastChild) == null ? void 0 : _b.name) === "JinjaExpressionEnd") {
+          const from = cursor.node.firstChild.to;
+          const to = cursor.node.lastChild.from;
+          const text = state.sliceDoc(from, to);
+          if (validate(text) && isNormalTemplate) {
+            return {
+              type: "className",
+              className: styles.valid,
+              from,
+              to
+            };
+          }
+          if (!isNormalTemplate) {
+            const item = variables == null ? void 0 : variables.find((variable) => variable.key === text);
+            if (item) {
+              return {
+                type: "className",
+                className: styles.valid,
+                from,
+                to
+              };
+            }
+          }
+          return {
+            type: "className",
+            className: styles.invalid,
+            from,
+            to
+          };
+        }
+        if (cursor.name === "JinjaStatement" && ((_c = cursor.node.firstChild) == null ? void 0 : _c.name) === "JinjaStatementStart" && ((_d = cursor.node.lastChild) == null ? void 0 : _d.name) === "JinjaStatementEnd" && !isNormalTemplate) {
+          const from = cursor.node.firstChild.to;
+          const to = cursor.node.lastChild.from;
+          const text = state.sliceDoc(from, to);
+          return (variables || []).map((variable) => {
+            if (variable.key) {
+              const index = text.indexOf(variable.key);
+              if (index !== -1) {
+                return {
+                  type: "className",
+                  className: styles.valid,
+                  from: from + index,
+                  to: from + index + variable.key.length + 1
+                };
+              }
+            }
+            return void 0;
+          }).filter(
+            (item) => item !== void 0
+          );
+        }
+        return void 0;
+      })
+    ]),
+    [injector, variables]
+  );
+  return null;
+}
+var validation_default = Validation;
+export {
+  Validation,
+  validation_default as default
+};

package/dist/es/basic-editor/extensions/validation.module.js

@@ -0,0 +1,5 @@
+import "./validation_module.css";
+var validation_default = { "valid": "valid_5e57b", "invalid": "invalid_5e57b" };
+export {
+  validation_default as default
+};

package/dist/es/basic-editor/extensions/validation_module.css

@@ -0,0 +1,7 @@
+.valid_5e57b {
+  color: var(--Green-COZColorGreen7, #00A136);
+}
+
+.invalid_5e57b {
+  color: #0607094D;
+}