@coze-editor/preset-chat 0.1.0-alpha.02803c

package/dist/index.js

@@ -0,0 +1,631 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CUSTOM_CLIPBOARD_MIMETYPE: () => CUSTOM_CLIPBOARD_MIMETYPE,
+  default: () => index_default,
+  schemaUtils: () => schemaUtils,
+  useCurrentElement: () => useCurrentElement
+});
+module.exports = __toCommonJS(index_exports);
+var import_preset_universal = __toESM(require("@coze-editor/preset-universal"));
+var import_core2 = require("@coze-editor/core");
+var import_view4 = require("@codemirror/view");
+var import_commands = require("@codemirror/commands");
+
+// src/utils.ts
+function extractElementData(node, text) {
+  const openTag = node.firstChild;
+  let tagName = null;
+  const attributes = {};
+  if (openTag && openTag.name === "OpenTag" && openTag.firstChild) {
+    let sibling = openTag.firstChild.nextSibling;
+    while (true) {
+      if (!sibling) {
+        break;
+      }
+      if (sibling.name === "TagName") {
+        const { from, to } = sibling;
+        tagName = text.slice(from, to);
+      } else if (sibling.name === "Attribute") {
+        const nameNode = sibling.firstChild;
+        const isNode = nameNode == null ? void 0 : nameNode.nextSibling;
+        const valueNode = isNode == null ? void 0 : isNode.nextSibling;
+        if ((nameNode == null ? void 0 : nameNode.name) === "AttributeName" && (isNode == null ? void 0 : isNode.name) === "Is" && ((valueNode == null ? void 0 : valueNode.name) === "AttributeValue" || (valueNode == null ? void 0 : valueNode.name) === "UnquotedAttributeValue")) {
+          const name = text.slice(nameNode.from, nameNode.to);
+          const fullValue = text.slice(valueNode.from, valueNode.to);
+          let value = fullValue;
+          if (valueNode.name === "AttributeValue") {
+            value = fullValue.slice(1, -1);
+          }
+          try {
+            attributes[name] = JSON.parse(decodeURIComponent(value));
+          } catch (e) {
+          }
+        } else if ((nameNode == null ? void 0 : nameNode.name) === "AttributeName" && !isNode && !valueNode) {
+          const name = text.slice(nameNode.from, nameNode.to);
+          attributes[name] = true;
+        }
+      }
+      sibling = sibling.nextSibling;
+    }
+  }
+  if (tagName) {
+    return {
+      tagName,
+      attributes
+    };
+  }
+}
+
+// src/language.ts
+var import_html = require("@lezer/html");
+var import_language = require("@codemirror/language");
+var htmlParser = import_html.parser.configure({
+  dialect: "noMatch"
+});
+function parse(text) {
+  return htmlParser.parse(text);
+}
+var htmlLanguage = import_language.LRLanguage.define({
+  parser: htmlParser
+});
+
+// src/schema.ts
+function isElementRegistered(tagName, validTagNames) {
+  if (!Array.isArray(validTagNames)) {
+    return false;
+  }
+  if (validTagNames.includes(tagName)) {
+    return true;
+  }
+  return false;
+}
+var schemaUtils = {
+  toJSON(text, options) {
+    if (text === "") {
+      return [];
+    }
+    const tree = parse(text);
+    const tags = [];
+    tree.iterate({
+      enter(node) {
+        if (node.name === "Element") {
+          const data = extractElementData(node.node, text);
+          if (data && isElementRegistered(data.tagName, options == null ? void 0 : options.validTagNames)) {
+            tags.push({
+              from: node.from,
+              to: node.to,
+              raw: text.slice(node.from, node.to),
+              ...data
+            });
+          }
+        }
+      }
+    });
+    let pos = 0;
+    const elements = [];
+    for (const tag of tags) {
+      const { from, to, tagName, attributes, raw } = tag;
+      const { cmid, ...restAttributes } = attributes ?? {};
+      if (from < pos) {
+        continue;
+      }
+      if (from > pos) {
+        elements.push({
+          type: "text",
+          value: text.slice(pos, from)
+        });
+      }
+      elements.push({
+        type: "element",
+        tagName,
+        attributes: restAttributes,
+        raw
+      });
+      pos = to;
+    }
+    if (pos < text.length) {
+      elements.push({
+        type: "text",
+        value: text.slice(pos)
+      });
+    }
+    return elements;
+  },
+  fromJSON(elements) {
+    return elements.map((el) => {
+      if (el.type === "element") {
+        return toElementString(el);
+      } else if (el.type === "text") {
+        return el.value;
+      }
+      return "";
+    }).join("");
+  }
+};
+function toElementString(element) {
+  const attrsString = attributesToString(element.attributes);
+  return `<${element.tagName}${attrsString ? ` ${attrsString}` : ""}></${element.tagName}>`;
+}
+var INTERNAL_ID = "cmid";
+function uniqueId() {
+  return `e${Math.random()}`;
+}
+function attributesToString(attributes) {
+  const array = [];
+  let hasId = false;
+  Object.keys(attributes).forEach((key) => {
+    if (key === INTERNAL_ID) {
+      hasId = true;
+    }
+    const value = attributes[key];
+    if (value === true) {
+      array.push(key);
+    } else if (typeof value !== "undefined") {
+      array.push(`${key}="${encodeURIComponent(JSON.stringify(value))}"`);
+    }
+  });
+  if (!hasId) {
+    array.unshift(
+      `${INTERNAL_ID}="${encodeURIComponent(JSON.stringify(uniqueId()))}"`
+    );
+  }
+  return array.join(" ");
+}
+
+// src/plugins.ts
+var import_core = require("@coze-editor/core");
+var import_view2 = require("@codemirror/view");
+var import_state2 = require("@codemirror/state");
+
+// src/extension.ts
+var import_react_dom = require("react-dom");
+var import_react2 = require("react");
+var import_client = require("react-dom/client");
+var import_utils2 = require("@coze-editor/utils");
+var import_react3 = require("@coze-editor/react");
+var import_view = require("@codemirror/view");
+var import_state = require("@codemirror/state");
+var import_language3 = require("@codemirror/language");
+
+// src/context.tsx
+var import_react = __toESM(require("react"));
+var Context = (0, import_react.createContext)("");
+function ElementProvider({
+  internalId,
+  children
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(Context.Provider, { value: internalId }, children);
+}
+function useElementId() {
+  const id = (0, import_react.useContext)(Context);
+  return id;
+}
+
+// src/extension.ts
+var ElementWidget = class extends import_view.WidgetType {
+  constructor(definition, id, props) {
+    super();
+    this.definition = definition;
+    this.id = id;
+    this.props = props;
+    const element = document.createElement("span");
+    this.element = element;
+    this.root = (0, import_client.createRoot)(element);
+  }
+  $$type = "element";
+  root;
+  element;
+  view = null;
+  get elementId() {
+    return `element-${this.id}`;
+  }
+  toDOM(view) {
+    this.view = view;
+    const c = view.state.facet(import_react3.connector);
+    queueMicrotask(() => {
+      (0, import_react_dom.flushSync)(() => {
+        const jsxElement = (0, import_react2.createElement)(ElementProvider, {
+          internalId: this.id,
+          children: (0, import_react2.createElement)(this.definition.render, this.props)
+        });
+        c.connect(this.elementId, (0, import_react_dom.createPortal)(jsxElement, this.element));
+      });
+    });
+    return this.element;
+  }
+  eq(other) {
+    return this.id === other.id && this.props && other.props && JSON.stringify(this.props) === JSON.stringify(other.props);
+  }
+  destroy() {
+    if (this.view) {
+      const c = this.view.state.facet(import_react3.connector);
+      c.disconnect(this.elementId);
+    }
+  }
+  ignoreEvent(event) {
+    return false;
+  }
+};
+var elementsFacet = import_state.Facet.define({
+  combine: import_utils2.FacetCombineStrategy.Last
+});
+var field = import_state.StateField.define({
+  create(state) {
+    return build(state);
+  },
+  update(value, tr) {
+    if (tr.docChanged) {
+      return build(tr.state);
+    }
+    return value;
+  },
+  provide(f) {
+    return [
+      import_view.EditorView.decorations.of((view) => view.state.field(f)),
+      import_view.EditorView.atomicRanges.of((view) => view.state.field(f))
+    ];
+  }
+});
+function build(state) {
+  const allElements = state.facet(elementsFacet);
+  if (!allElements) {
+    return import_view.Decoration.none;
+  }
+  const tree = (0, import_language3.ensureSyntaxTree)(state, state.doc.length) ?? (0, import_language3.syntaxTree)(state);
+  const builder = new import_state.RangeSetBuilder();
+  tree.iterate({
+    enter(node) {
+      const data = extract(node.node, state);
+      if (data) {
+        const definition = allElements[data.tagName];
+        if (definition) {
+          builder.add(
+            node.from,
+            node.to,
+            import_view.Decoration.replace({
+              widget: new ElementWidget(
+                definition,
+                data.internalId,
+                data.props
+              )
+            })
+          );
+        }
+      }
+      return true;
+    }
+  });
+  const decorations = builder.finish();
+  return decorations;
+}
+function extract(node, state) {
+  if (node.name === "Element") {
+    const elementData = extractElementData(node.node, state.doc.toString());
+    if (elementData) {
+      const { tagName, attributes } = elementData;
+      const { [INTERNAL_ID]: internalId, ...props } = attributes ?? {};
+      return {
+        tagName,
+        internalId,
+        props
+      };
+    }
+  }
+}
+var CUSTOM_CLIPBOARD_MIMETYPE = "application/x-with-elements";
+var copyPasteHandler = import_view.EditorView.domEventHandlers({
+  paste(event, view) {
+    var _a;
+    try {
+      let text = (_a = event.clipboardData) == null ? void 0 : _a.getData(CUSTOM_CLIPBOARD_MIMETYPE);
+      if (!text) {
+        return false;
+      }
+      text = text.replace(/\r\n/g, "\n");
+      const definitions = view.state.facet(elementsFacet);
+      const nodes = schemaUtils.toJSON(text, {
+        validTagNames: definitions ? Object.keys(definitions) : void 0
+      });
+      const newText = schemaUtils.fromJSON(
+        nodes.map((node) => {
+          if (node.type === "text") {
+            return node;
+          }
+          if (node.type === "element") {
+            return {
+              ...node,
+              attributes: {
+                ...node.attributes ?? {},
+                cmid: `e${Math.random()}`
+              }
+            };
+          }
+        }).filter((v) => isEditorNode(v))
+      );
+      view.dispatch({
+        changes: {
+          from: view.state.selection.main.from,
+          to: view.state.selection.main.to,
+          insert: newText
+        },
+        selection: import_state.EditorSelection.cursor(
+          view.state.selection.main.from + newText.length
+        )
+      });
+      return true;
+    } catch (e) {
+      return false;
+    }
+  },
+  copy(event, view) {
+    var _a, _b;
+    const definitions = view.state.facet(elementsFacet);
+    if (!definitions) {
+      return false;
+    }
+    try {
+      const { from, to } = view.state.selection.main;
+      const slice = view.state.doc.sliceString(from, to);
+      const nodes = schemaUtils.toJSON(slice, {
+        validTagNames: definitions ? Object.keys(definitions) : void 0
+      });
+      const plainText = nodes.map((node) => {
+        if (node.type === "text") {
+          return node.value;
+        }
+        if (node.type === "element") {
+          const definition = definitions[node.tagName];
+          const toString = definition == null ? void 0 : definition.toString;
+          if (!definition) {
+            return node.raw ?? "";
+          }
+          if (Object.prototype.hasOwnProperty.call(definition, "toString") && typeof toString === "function") {
+            return toString(node);
+          }
+          return `[${node.tagName}]`;
+        }
+        return "";
+      }).join("");
+      (_a = event.clipboardData) == null ? void 0 : _a.setData("text/plain", plainText);
+      (_b = event.clipboardData) == null ? void 0 : _b.setData(CUSTOM_CLIPBOARD_MIMETYPE, slice);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+});
+function isEditorNode(v) {
+  return Boolean(v);
+}
+function chatExtension() {
+  return [
+    field,
+    copyPasteHandler
+    // selectionEnlarger.of(state => {
+    //   const decorations = state.field(field);
+    //   const cursor = decorations.iter();
+    //   const array = [];
+    //   while (cursor.value) {
+    //     const widget = cursor.value.spec?.widget;
+    //     const { from, to } = cursor;
+    //     if (isElementWidget(widget)) {
+    //       array.push({
+    //         source: { from, to },
+    //         target: { from, to },
+    //       });
+    //     }
+    //     cursor.next();
+    //   }
+    //   return array;
+    // }),
+  ];
+}
+
+// src/plugins.ts
+var focusedEffect = import_state2.StateEffect.define();
+var focusedField = import_state2.StateField.define({
+  create() {
+    return false;
+  },
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(focusedEffect)) {
+        return true;
+      }
+    }
+    return value;
+  }
+});
+function insertElement({ view }) {
+  return (element) => {
+    let selection = view.state.selection.main;
+    const hasFocused = view.state.field(focusedField, false);
+    if (hasFocused === false) {
+      selection = import_state2.EditorSelection.cursor(view.state.doc.length);
+    }
+    const insert = toElementString(element);
+    view.dispatch({
+      changes: {
+        from: selection.from,
+        to: selection.to,
+        insert
+      },
+      selection: import_state2.EditorSelection.cursor(selection.from + insert.length)
+    });
+  };
+}
+var plugins = [
+  (0, import_core.extension)([
+    focusedField,
+    import_view2.EditorView.domEventObservers({
+      click(e, view) {
+        view.dispatch({
+          effects: focusedEffect.of(null)
+        });
+      }
+    }),
+    chatExtension()
+  ]),
+  (0, import_core.api)("insertElement", insertElement),
+  (0, import_core.option)(
+    "elements",
+    (elements) => elementsFacet.of(elements)
+  )
+];
+var plugins_default = plugins;
+
+// src/hooks.tsx
+var import_react4 = require("react");
+var import_react5 = require("@coze-editor/react");
+var import_view3 = require("@codemirror/view");
+var import_state3 = require("@codemirror/state");
+function useCurrentElement() {
+  const editor = (0, import_react5.useEditor)();
+  const elementId = useElementId();
+  const injector = (0, import_react5.useInjector)();
+  const [isSelected, setIsSelected] = (0, import_react4.useState)(false);
+  const elementIdRef = (0, import_react4.useRef)(elementId);
+  elementIdRef.current = elementId;
+  function select() {
+    var _a;
+    if (!editor) {
+      return;
+    }
+    const view = editor.$view;
+    const decorations = view.state.field(field);
+    const cursor = decorations.iter();
+    while (cursor.value) {
+      const { spec } = cursor.value;
+      if (((_a = spec == null ? void 0 : spec.widget) == null ? void 0 : _a.id) === elementId) {
+        view.dispatch({
+          selection: import_state3.EditorSelection.range(cursor.from, cursor.to)
+        });
+        break;
+      }
+      cursor.next();
+    }
+  }
+  function remove() {
+    if (!editor) {
+      return;
+    }
+    const view = editor.$view;
+    if (view.state.readOnly) {
+      return;
+    }
+    const range = findElement(view.state, elementId);
+    if (range) {
+      view.dispatch({
+        changes: {
+          from: range.from,
+          to: range.to,
+          insert: ""
+        },
+        selection: import_state3.EditorSelection.cursor(range.from)
+      });
+    }
+  }
+  (0, import_react4.useLayoutEffect)(() => {
+    function selectionContainsCurrentElement(state) {
+      const range = findElement(state, elementId);
+      const { ranges } = state.selection;
+      if (!range) {
+        return false;
+      }
+      for (const r of ranges) {
+        if (r.from <= range.from && r.to >= range.to) {
+          return true;
+        }
+      }
+      return false;
+    }
+    const plugin = import_view3.ViewPlugin.fromClass(
+      class {
+        constructor(view) {
+          const contains = selectionContainsCurrentElement(view.state);
+          setIsSelected(contains);
+        }
+        update(update) {
+          if (update.selectionSet) {
+            const contains = selectionContainsCurrentElement(update.state);
+            setIsSelected(contains);
+          }
+        }
+      }
+    );
+    return injector.inject([plugin]);
+  }, [injector]);
+  return {
+    isSelected,
+    select,
+    remove
+  };
+}
+function findElement(state, elementId) {
+  var _a;
+  const decorations = state.field(field);
+  const cursor = decorations.iter();
+  while (cursor.value) {
+    const { spec } = cursor.value;
+    if (((_a = spec == null ? void 0 : spec.widget) == null ? void 0 : _a.id) === elementId) {
+      return {
+        from: cursor.from,
+        to: cursor.to
+      };
+    }
+    cursor.next();
+  }
+}
+
+// src/index.ts
+var preset = [
+  ...import_preset_universal.default,
+  (0, import_core2.extension)([
+    import_view4.EditorView.theme({
+      "&.cm-focused": {
+        outline: "none"
+      }
+    }),
+    htmlLanguage,
+    (0, import_commands.history)(),
+    import_view4.keymap.of([...import_commands.defaultKeymap, ...import_commands.historyKeymap])
+  ]),
+  ...plugins_default
+];
+var index_default = preset;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CUSTOM_CLIPBOARD_MIMETYPE,
+  schemaUtils,
+  useCurrentElement
+});
+//# sourceMappingURL=index.js.map