@membranehq/react 0.1.0

package/dist/esm/components/ComboBoxElements/Editor/LexicalEditor.mjs

@@ -0,0 +1,114 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import clsx from 'clsx';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
+import { EditorTagNode } from './nodes/EditorTagNode.mjs';
+import { ConfigPlugin } from './plugins/ConfigPlugin.mjs';
+import { EditorTagPlugin } from './plugins/EditorTagPlugin.mjs';
+import { KeyboardPlugin } from './plugins/KeyboardPlugin.mjs';
+import { StateSyncPlugin } from './plugins/StateSyncPlugin.mjs';
+
+const initialConfig = {
+  namespace: "data-input-editor",
+  onError: console.error,
+  nodes: [EditorTagNode]
+};
+function LexicalProvider({ children }) {
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children });
+}
+const PLACEHOLDER_CSS_VARIABLE = "--placeholder-text";
+const editorTagBadgeRecipe = sva({
+  className: "data-input-editor",
+  slots: ["root"],
+  base: {
+    root: {
+      fontSize: "xs",
+      fontWeight: "medium",
+      minWidth: "12",
+      _focus: {
+        outline: "none"
+      },
+      "& [data-lexical-text='true']": {
+        color: "slate.12"
+      },
+      "& p": {
+        my: "1",
+        py: "1",
+        px: "1",
+        rounded: "md",
+        minH: "5",
+        "&:has([data-editor-tag='true'])": {
+          py: "0"
+        },
+        _before: {
+          content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
+          float: "left",
+          pointerEvents: "none",
+          h: 0,
+          color: "gray.9"
+        },
+        "& > *": {
+          verticalAlign: "middle",
+          display: "inline-block",
+          maxW: "full"
+        }
+      },
+      "& p:not(:has(> br:only-child))": {
+        _before: {
+          content: "none"
+        }
+      }
+    }
+  }
+});
+const LexicalEditor = forwardRef(({ onChange, value, schema, placeholder, disabled, ...props }, ref) => {
+  const styles = editorTagBadgeRecipe();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PlainTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            ref,
+            spellCheck: false,
+            ...props,
+            "data-testid": "data-input-editor",
+            "data-editor-container": "true",
+            "data-placeholder": placeholder,
+            className: clsx(styles.root, props.className),
+            style: {
+              [PLACEHOLDER_CSS_VARIABLE]: `"${placeholder}"`
+            }
+          }
+        ),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(EditorTagPlugin, {}),
+    /* @__PURE__ */ jsx(KeyboardPlugin, {}),
+    /* @__PURE__ */ jsx(OnChangePlugin, { ignoreSelectionChange: true, ignoreHistoryMergeTagChange: true, onChange }),
+    /* @__PURE__ */ jsx(StateSyncPlugin, { value, schema }),
+    /* @__PURE__ */ jsx(ConfigPlugin, { disabled })
+  ] });
+});
+LexicalEditor.displayName = "LexicalEditor";
+
+export { LexicalEditor, LexicalProvider, editorTagBadgeRecipe };

package/dist/esm/components/ComboBoxElements/Editor/helpers/clicks.mjs

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { NODE_DATA_ATTR } from '../nodes/EditorTagNode.mjs';
+
+function isClickOnEditorCustomTagComponent(element, rootElement) {
+  if (!element) {
+    return false;
+  }
+  if (element === rootElement) {
+    return false;
+  }
+  return isElementEditorCustomTagComponent(element) || isClickOnEditorCustomTagComponent(element?.parentElement, rootElement);
+}
+function isClickOnEditorComponent(element, rootElement) {
+  if (!element) {
+    return false;
+  }
+  if (element === rootElement) {
+    return false;
+  }
+  return isElementEditorComponent(element) || isClickOnEditorComponent(element?.parentElement, rootElement);
+}
+function isElementEditorCustomTagComponent(element) {
+  return element.hasAttribute(NODE_DATA_ATTR);
+}
+function isElementEditorComponent(element) {
+  return element.hasAttribute("data-editor-container");
+}
+
+export { isClickOnEditorComponent, isClickOnEditorCustomTagComponent };

package/dist/esm/components/ComboBoxElements/Editor/helpers/common.mjs

@@ -0,0 +1,103 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { isCustomFieldValue } from '../../../ComboBox/options-factories/custom-field/constants.mjs';
+import { regExpTag, TAG_MARK_START, TAG_MARK_END, getTagString } from './tag-template-composition.mjs';
+
+function getTemplateFromTplValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (isValueTemplate(value)) {
+    return value.$tpl.template;
+  }
+  return "";
+}
+function getValuesFromTplValue(value) {
+  if (isValueTemplate(value)) {
+    return value.$tpl.values;
+  }
+  return {};
+}
+function transformValueToTpl(value) {
+  if (value === void 0 || value === null) {
+    return "";
+  }
+  if (isCustomFieldValue(value)) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (isValueTemplate(value)) {
+    return value;
+  }
+  return {
+    $tpl: {
+      template: "{10000000}",
+      values: {
+        1e7: value
+      }
+    }
+  };
+}
+const isValueTemplate = (value) => {
+  return value?.$tpl !== void 0;
+};
+function transformTplToValue(template, values) {
+  if (template === "" || template === void 0 || template === null) {
+    return void 0;
+  }
+  const valuesExistInTemplate = getValuesExistInTemplate(template, values);
+  const cleanedTemplate = getTemplateWithExistingTags(template, valuesExistInTemplate);
+  if (!strContainsTagChunk(cleanedTemplate)) {
+    return cleanedTemplate ? cleanedTemplate : void 0;
+  }
+  if (Object.keys(valuesExistInTemplate).length === 1 && isTagChunk(cleanedTemplate)) {
+    return Object.values(valuesExistInTemplate)[0];
+  }
+  return {
+    $tpl: {
+      template: cleanedTemplate,
+      values: valuesExistInTemplate
+    }
+  };
+}
+function splitStringToChunks(line) {
+  return line.split(regExpTag).filter((l) => l !== "");
+}
+function isTagChunk(chunk) {
+  return strContainsTagChunk(chunk) && chunk.startsWith(TAG_MARK_START) && chunk.endsWith(TAG_MARK_END);
+}
+function isValueEmpty(value) {
+  return value === void 0 || value === null;
+}
+function strContainsTagChunk(str) {
+  return str ? !!str.match(regExpTag) : false;
+}
+function getTagChunkIdentifier(chunk) {
+  return chunk.substring(1, chunk.length - 1);
+}
+function getValuesExistInTemplate(template, values) {
+  return Object.keys(values).reduce((acc, valueId) => {
+    return !isValueEmpty(values[valueId]) && template.includes(getTagString(valueId)) ? { ...acc, [valueId]: values[valueId] } : acc;
+  }, {});
+}
+function getTemplateWithExistingTags(template, values) {
+  return splitStringToChunks(template ?? "").map((string) => {
+    if (isTagChunk(string) && isValueEmpty(values[getTagChunkIdentifier(string)])) {
+      return "";
+    }
+    return string;
+  }).join("");
+}
+
+export { getTagChunkIdentifier, getTemplateFromTplValue, getTemplateWithExistingTags, getValuesExistInTemplate, getValuesFromTplValue, isTagChunk, isValueTemplate, splitStringToChunks, transformTplToValue, transformValueToTpl };

package/dist/esm/components/ComboBoxElements/Editor/helpers/tag-template-composition.mjs

@@ -0,0 +1,17 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+const TAG_MARK_END = "}";
+const TAG_MARK_START = "{";
+const regExpStr = `(${TAG_MARK_START}(?:[^${TAG_MARK_START}${TAG_MARK_END}\\s]*)${TAG_MARK_END})`;
+const regExpTag = new RegExp(regExpStr, "gm");
+function getTagString(id) {
+  return `${TAG_MARK_START}${id}${TAG_MARK_END}`;
+}
+
+export { TAG_MARK_END, TAG_MARK_START, getTagString, regExpTag };

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.mjs

@@ -0,0 +1,61 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { $getRoot, $isParagraphNode } from 'lexical';
+import { $isEditorTagNode } from '../nodes/EditorTagNode.mjs';
+import { transformTplToValue } from './common.mjs';
+import { getTagString } from './tag-template-composition.mjs';
+
+function transformEditorSchemaToValue(editorState) {
+  const transformed = {
+    template: "",
+    values: {}
+  };
+  editorState.read(() => {
+    const root = $getRoot();
+    const paragraphs = [];
+    for (const node of root.getChildren()) {
+      if ($isParagraphNode(node)) {
+        const paragraphContent = processParagraphNode(node);
+        paragraphs.push(paragraphContent.join(""));
+        transformed.values = {
+          ...transformed.values,
+          ...extractTagValues(node)
+        };
+      }
+    }
+    transformed.template = paragraphs.join("\n");
+  });
+  if (Object.keys(transformed.values).length === 0) {
+    return transformed.template || "";
+  }
+  return transformTplToValue(transformed.template, transformed.values);
+}
+function processParagraphNode(node) {
+  const contentParts = [];
+  for (const child of node.getChildren()) {
+    if ($isEditorTagNode(child)) {
+      const id = child.id;
+      contentParts.push(getTagString(id));
+    } else {
+      contentParts.push(child.getTextContent());
+    }
+  }
+  return contentParts;
+}
+function extractTagValues(node) {
+  const values = {};
+  for (const child of node.getChildren()) {
+    if ($isEditorTagNode(child)) {
+      values[child.id] = child.value;
+    }
+  }
+  return values;
+}
+
+export { transformEditorSchemaToValue };

package/dist/esm/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.mjs

@@ -0,0 +1,90 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { getReferenceCollectionPointerForSchema } from '@membranehq/sdk';
+import { EditorTagNode } from '../nodes/EditorTagNode.mjs';
+import { transformValueToTpl, getTemplateFromTplValue, getValuesFromTplValue, splitStringToChunks, isTagChunk, getTagChunkIdentifier, isValueTemplate } from './common.mjs';
+
+function transformValueToEditorSchema(value, schema) {
+  const paragraph = {
+    children: getParagraphNodes(value, schema),
+    direction: "ltr",
+    format: "",
+    indent: 0,
+    textFormat: 0,
+    textStyle: "",
+    type: "paragraph",
+    version: 1
+  };
+  return {
+    root: {
+      children: [paragraph],
+      direction: "ltr",
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  };
+}
+const getParagraphNodes = (value, schema) => {
+  const safeValue = transformValueToTpl(value);
+  const template = getTemplateFromTplValue(safeValue);
+  const templateValues = getValuesFromTplValue(safeValue);
+  const chunks = splitStringToChunks(template);
+  if (!chunks.length) {
+    return [];
+  }
+  const schemaHasRefCollection = !!getReferenceCollectionPointerForSchema(schema);
+  if (chunks.length === 1 && schemaHasRefCollection) {
+    const [chunk] = chunks;
+    return [
+      {
+        type: EditorTagNode.getType(),
+        value: { value: chunk, autoOpen: false, id: "" },
+        version: 1
+      }
+    ];
+  }
+  const nodes = chunks.map((chunk) => {
+    if (isTagChunk(chunk)) {
+      const tagIdentifier = getTagChunkIdentifier(chunk);
+      const value2 = templateValues[tagIdentifier];
+      if (value2) {
+        return {
+          type: EditorTagNode.getType(),
+          value: { value: value2, autoOpen: false, id: tagIdentifier },
+          version: 1
+        };
+      }
+    }
+    return {
+      type: "text",
+      version: 1,
+      detail: 0,
+      format: 0,
+      mode: "normal",
+      style: "",
+      text: chunk
+    };
+  });
+  const valueHasTags = nodes.some((node) => node.type === EditorTagNode.getType());
+  return valueHasTags ? nodes : [
+    {
+      type: "text",
+      version: 1,
+      detail: 0,
+      format: 0,
+      mode: "normal",
+      style: "",
+      text: isValueTemplate(value) ? value.$tpl.template : value
+    }
+  ];
+};
+
+export { transformValueToEditorSchema };

package/dist/esm/components/ComboBoxElements/Editor/nodes/EditorTagBinding.mjs

@@ -0,0 +1,56 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { $getNodeByKey } from 'lexical';
+import { ComboBox } from '../../../ComboBox/ComboBox.mjs';
+import { useComboBox } from '../../../ComboBox/context/combobox-context.mjs';
+import { $isEditorTagNode } from './EditorTagNode.mjs';
+import useDataBuilder from '../../../DataBuilder/data-builder-context.mjs';
+import { usIsFieldFrozen } from '../../../DataBuilder/hooks.mjs';
+
+const EditorTagBinding = ({
+  internalKey,
+  value,
+  autoOpen
+}) => {
+  const { isReadOnly } = useDataBuilder();
+  const isFrozenField = usIsFieldFrozen();
+  const { variablesSchema, schema } = useComboBox();
+  const [editor] = useLexicalComposerContext();
+  const [isSelected] = useLexicalNodeSelection(internalKey);
+  const handleChange = (value2) => {
+    editor.update(() => {
+      const node = $getNodeByKey(internalKey);
+      if ($isEditorTagNode(node)) {
+        if (value2 === void 0) {
+          node.remove();
+        } else {
+          node.setValue(value2);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      value,
+      schema,
+      variablesOnly: true,
+      disabled: isReadOnly || isFrozenField,
+      variablesSchema,
+      onChange: handleChange,
+      autoOpen,
+      "data-selected": isSelected
+    }
+  );
+};
+
+export { EditorTagBinding };

package/dist/esm/components/ComboBoxElements/Editor/nodes/EditorTagNode.mjs

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { DecoratorNode } from 'lexical';
+import { EditorTagBinding } from './EditorTagBinding.mjs';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const NODE_DATA_ATTR = "data-editor-tag";
+class EditorTagNode extends DecoratorNode {
+  constructor(value, key) {
+    super(key);
+    __publicField(this, "__value");
+    __publicField(this, "__id");
+    __publicField(this, "__autoOpen");
+    this.__value = value.value;
+    this.__autoOpen = value.autoOpen;
+    this.__id = value.id;
+  }
+  static getType() {
+    return "editor-tag-node";
+  }
+  static clone(node) {
+    return new EditorTagNode({ value: node.__value, autoOpen: node.__autoOpen, id: node.__id }, node.__key);
+  }
+  createDOM() {
+    const element = document.createElement("span");
+    element.setAttribute(NODE_DATA_ATTR, "true");
+    element.setAttribute("contenteditable", "false");
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  setValue(value) {
+    const writable = this.getWritable();
+    writable.__value = value;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsx(EditorTagBinding, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
+  }
+  static importJSON(serializedNode) {
+    const node = $createEditorTagNode(serializedNode.value);
+    return node;
+  }
+  exportJSON() {
+    return {
+      type: EditorTagNode.getType(),
+      value: this.__value,
+      version: 1
+    };
+  }
+  isKeyboardSelectable() {
+    return false;
+  }
+  isIsolated() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  get id() {
+    return this.__id;
+  }
+  get value() {
+    return this.__value;
+  }
+}
+function $createEditorTagNode(value) {
+  return new EditorTagNode(value);
+}
+function $isEditorTagNode(node) {
+  return node instanceof EditorTagNode;
+}
+
+export { $createEditorTagNode, $isEditorTagNode, EditorTagNode, NODE_DATA_ATTR };

package/dist/esm/components/ComboBoxElements/Editor/plugins/ConfigPlugin.mjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+function ConfigPlugin({ disabled = false }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled, editor]);
+  return null;
+}
+
+export { ConfigPlugin };

package/dist/esm/components/ComboBoxElements/Editor/plugins/EditorTagPlugin.mjs

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodes, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { INSERT_EDITOR_TAG_COMMAND } from './commands.mjs';
+import { EditorTagNode, $createEditorTagNode } from '../nodes/EditorTagNode.mjs';
+
+function EditorTagPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([EditorTagNode])) {
+      throw new Error("EditorTagPlugin: EditorTagNode not registered on editor");
+    }
+    editor.registerCommand(
+      INSERT_EDITOR_TAG_COMMAND,
+      (payload) => {
+        editor.update(() => {
+          $insertNodes([$createEditorTagNode(payload)]);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+
+export { EditorTagPlugin };

package/dist/esm/components/ComboBoxElements/Editor/plugins/KeyboardPlugin.mjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';
+
+function KeyboardPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (!event.shiftKey) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor]);
+  return null;
+}
+
+export { KeyboardPlugin };

package/dist/esm/components/ComboBoxElements/Editor/plugins/StateSyncPlugin.mjs

@@ -0,0 +1,40 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, HISTORY_MERGE_TAG, $setSelection } from 'lexical';
+import { transformValueToEditorSchema } from '../helpers/transformValueToEditorSchema.mjs';
+
+const getRootParagraphNodes = (editorState) => {
+  const paragraph = editorState.toJSON().root.children[0];
+  if (paragraph.type !== "paragraph") return [];
+  return paragraph.children;
+};
+function StateSyncPlugin({ value, schema }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editor.update(() => {
+      const currentState = editor.getEditorState();
+      const newState = editor.parseEditorState(transformValueToEditorSchema(value, schema));
+      const currentRootParagraph = JSON.stringify(getRootParagraphNodes(currentState));
+      const newRootParagraph = JSON.stringify(getRootParagraphNodes(newState));
+      if (currentRootParagraph !== newRootParagraph) {
+        const selection = $getSelection();
+        editor.setEditorState(newState, {
+          tag: HISTORY_MERGE_TAG
+        });
+        const selectionClone = selection?.clone();
+        $setSelection(selectionClone ?? null);
+      }
+    });
+  }, [JSON.stringify(value)]);
+  return null;
+}
+
+export { StateSyncPlugin };