@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/input-editor.js

@@ -0,0 +1,476 @@
+"use client";
+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);
+var input_editor_exports = {};
+__export(input_editor_exports, {
+  EditorView: () => EditorView,
+  Variable: () => Variable,
+  default: () => input_editor_default,
+  linkText: () => linkText
+});
+module.exports = __toCommonJS(input_editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@tiptap/react");
+var import_menus = require("@tiptap/react/menus");
+var import_state = require("@tiptap/pm/state");
+var import_core = require("@tiptap/core");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_dropdown = __toESM(require("./dropdown"));
+var import_bold = __toESM(require("../icons/bold"));
+var import_italic = __toESM(require("../icons/italic"));
+var import_link = __toESM(require("../icons/link"));
+var import_button = __toESM(require("../shared/button"));
+var import_chevron_down = __toESM(require("../icons/chevron-down"));
+const Variable = import_core.Node.create({
+  name: "variable",
+  group: "inline",
+  inline: true,
+  atom: true,
+  addAttributes: () => ({
+    key: { default: null },
+    label: { default: null }
+  }),
+  parseHTML: () => [{ tag: "span[data-variable]" }],
+  // getText() is the email's text/plain part, interpolated like the html.
+  renderText: ({ node }) => `{{${node.attrs.key}}}`,
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      (0, import_core.mergeAttributes)(HTMLAttributes, {
+        "data-variable": node.attrs.key
+      }),
+      `{{${node.attrs.key}}}`
+    ];
+  },
+  addNodeView: () => ({ node }) => {
+    const dom = document.createElement("span");
+    dom.setAttribute("data-variable", node.attrs.key);
+    dom.className = "inline-block bg-yellow-200 rounded px-1 text-sm select-none cursor-default mx-0.5";
+    dom.contentEditable = "false";
+    dom.textContent = node.attrs.label || node.attrs.key;
+    return { dom };
+  }
+});
+const linkHref = (node) => {
+  var _a;
+  return (node == null ? void 0 : node.isText) && ((_a = node.marks.find((mark) => mark.type.name === "link")) == null ? void 0 : _a.attrs.href);
+};
+const bare = (url) => url.replace(/^https?:\/\//i, "");
+const linkText = ({ node, parent, index }) => {
+  const href = linkHref(node);
+  if (!href || href === linkHref(parent.maybeChild(index + 1)) || bare(href) === bare(node.text)) return node.text;
+  return `${node.text} (${href})`;
+};
+const extensions = [
+  import_starter_kit.default.configure({ link: { defaultProtocol: "https", openOnClick: false }, underline: false }),
+  Variable
+];
+const contentClass = "focus:outline-hidden [&_a]:underline";
+const EditorView = ({ value }) => {
+  const editor = (0, import_react2.useEditor)({
+    content: value || "",
+    editable: false,
+    editorProps: {
+      attributes: {
+        class: contentClass
+      }
+    },
+    extensions,
+    immediatelyRender: false
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.EditorContent,
+    {
+      ...{
+        editor
+      }
+    }
+  );
+};
+const InputEditor = ({
+  disabled,
+  onChange,
+  value,
+  variables
+}) => {
+  const [, forceUpdate] = (0, import_react.useState)(0);
+  const linkFor = (0, import_react.useRef)(null);
+  const linkInput = (0, import_react.useRef)(null);
+  const [draft, setDraft] = (0, import_react.useState)(null);
+  const editor = (0, import_react2.useEditor)({
+    extensions,
+    content: value || "",
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: contentClass
+      }
+    },
+    immediatelyRender: false,
+    onUpdate: ({ editor: editor2 }) => {
+      onChange == null ? void 0 : onChange({ html: editor2.getHTML(), text: editor2.getText({ textSerializers: { text: linkText } }) });
+      forceUpdate((n) => n + 1);
+    },
+    onSelectionUpdate: () => {
+      setDraft(null);
+      forceUpdate((n) => n + 1);
+    }
+  });
+  (0, import_react.useEffect)(
+    () => {
+      editor == null ? void 0 : editor.setEditable(!disabled, false);
+    },
+    [disabled, editor]
+  );
+  const showLinkMenu = (0, import_react.useCallback)(
+    ({ editor: editor2, element, from, to, view }) => {
+      var _a, _b;
+      return (view.hasFocus() || element.contains(document.activeElement)) && (((_a = linkFor.current) == null ? void 0 : _a.from) === from && ((_b = linkFor.current) == null ? void 0 : _b.to) === to ? linkFor.current.show : editor2.isActive("link"));
+    },
+    []
+  );
+  const openLink = () => {
+    if (!editor) return;
+    const { from, to } = editor.state.selection;
+    linkFor.current = { from, to, show: true };
+    editor.view.dispatch(editor.state.tr.setMeta("linkMenu", "show"));
+    requestAnimationFrame(() => {
+      var _a;
+      return (_a = linkInput.current) == null ? void 0 : _a.focus();
+    });
+  };
+  const closeLink = () => {
+    setDraft(null);
+    editor.chain().focus().run();
+    const { from, to } = editor.state.selection;
+    linkFor.current = { from, to, show: false };
+    editor.view.dispatch(editor.state.tr.setMeta("linkMenu", "hide"));
+  };
+  const linkValue = draft ?? (editor == null ? void 0 : editor.getAttributes("link").href) ?? "";
+  const linkTarget = ((input) => {
+    const href = /^[a-z][a-z0-9+.-]*:/i.test(input) ? input : "https://" + input;
+    return input && !/\s/.test(input) && URL.canParse(href) && new URL(href).hostname.includes(".") ? href : null;
+  })(linkValue.trim());
+  const applyLink = () => {
+    if (!linkTarget) return;
+    editor.chain().focus().extendMarkRange("link").setLink({ href: linkTarget }).command(({ tr }) => {
+      tr.setSelection(import_state.TextSelection.create(tr.doc, tr.selection.to));
+      return true;
+    }).run();
+    closeLink();
+  };
+  const removeLink = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    closeLink();
+  };
+  (0, import_react.useEffect)(
+    () => {
+      if (!editor) return;
+      if (value !== editor.getHTML()) {
+        editor.commands.setContent(value || "", { emitUpdate: false });
+      }
+    },
+    [editor, value]
+  );
+  const tool = "flex items-center justify-center w-6 h-6 rounded hover:bg-gray";
+  const active = "bg-green-dark hover:bg-green-dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        // `.disabled` fades the whole field, the message as well as the
+        // toolbar, the way a disabled input fades. The fade-once rule keeps
+        // the toolbar's own [disabled] buttons from fading twice.
+        className: ["w-full border border-inherit rounded overflow-hidden", disabled ? "disabled" : ""].join(" ").trim()
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between p-1 bg-gray-light"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: "flex items-center gap-0.5"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
+                      {
+                        ...{
+                          "aria-pressed": Boolean(editor == null ? void 0 : editor.isActive("bold")),
+                          // Editor commands run whether or not it is editable, so the
+                          // toolbar has to stop them itself.
+                          disabled,
+                          inline: true,
+                          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+                          onMouseDown: (e) => e.preventDefault(),
+                          title: "Bold",
+                          variant: "link"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            ...{
+                              className: [
+                                tool,
+                                (editor == null ? void 0 : editor.isActive("bold")) ? active : ""
+                              ].join(" ")
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_bold.default,
+                              {
+                                ...{
+                                  className: "w-3 h-3"
+                                }
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
+                      {
+                        ...{
+                          "aria-pressed": Boolean(editor == null ? void 0 : editor.isActive("italic")),
+                          disabled,
+                          inline: true,
+                          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
+                          onMouseDown: (e) => e.preventDefault(),
+                          title: "Italic",
+                          variant: "link"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            ...{
+                              className: [
+                                tool,
+                                (editor == null ? void 0 : editor.isActive("italic")) ? active : ""
+                              ].join(" ")
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_italic.default,
+                              {
+                                ...{
+                                  className: "w-3 h-3"
+                                }
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
+                      {
+                        ...{
+                          "aria-pressed": Boolean(editor == null ? void 0 : editor.isActive("link")),
+                          // A new link needs words to sit on. In an existing link it stays
+                          // on, and its menu is already open.
+                          disabled: disabled || !editor || editor.state.selection.empty && !editor.isActive("link"),
+                          inline: true,
+                          onClick: openLink,
+                          onMouseDown: (e) => e.preventDefault(),
+                          title: "Link",
+                          variant: "link"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            ...{
+                              className: [
+                                tool,
+                                (editor == null ? void 0 : editor.isActive("link")) ? active : ""
+                              ].join(" ")
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_link.default,
+                              {
+                                ...{
+                                  className: "w-3 h-3"
+                                }
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              (variables == null ? void 0 : variables.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_dropdown.default,
+                {
+                  ...{
+                    anchor: "bottom end",
+                    // A toolbar tool, not a boxed button: its look is the span below.
+                    button: { variant: "link" },
+                    classNameMenu: "z-20",
+                    items: variables.map((v) => ({
+                      className: "text-xs",
+                      disabled,
+                      element: "button",
+                      onClick: () => {
+                        if (!editor) return;
+                        editor.chain().focus().insertContent({
+                          type: "variable",
+                          attrs: {
+                            key: v.key,
+                            label: v.label
+                          }
+                        }).run();
+                      },
+                      title: v.label
+                    }))
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center space-x-2 text-xs px-2 h-6 rounded hover:bg-gray"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Variables" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_chevron_down.default,
+                          {
+                            ...{
+                              className: "w-3.5 h-3.5"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react2.EditorContent,
+          {
+            ...{
+              className: "w-full px-3 py-2",
+              editor
+            }
+          }
+        ),
+        editor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_menus.BubbleMenu,
+          {
+            ...{
+              className: "z-20 flex items-center gap-1 p-1 bg-white border border-gray rounded shadow-lg",
+              editor,
+              options: { placement: "bottom-start" },
+              pluginKey: "linkMenu",
+              shouldShow: showLinkMenu
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  ...{
+                    className: "w-56 px-2 h-7 text-xs focus:outline-hidden",
+                    onChange: (e) => setDraft(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        applyLink();
+                      }
+                      if (e.key === "Escape") closeLink();
+                    },
+                    placeholder: "Paste or type a link",
+                    ref: linkInput,
+                    type: "text",
+                    value: linkValue
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.default,
+                {
+                  ...{
+                    disabled: !linkTarget,
+                    inline: true,
+                    onClick: applyLink,
+                    onMouseDown: (e) => e.preventDefault(),
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center text-xs px-2 h-7"
+                      },
+                      children: "Apply"
+                    }
+                  )
+                }
+              ),
+              editor.isActive("link") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.default,
+                {
+                  ...{
+                    inline: true,
+                    onClick: removeLink,
+                    onMouseDown: (e) => e.preventDefault(),
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center text-xs px-2 h-7"
+                      },
+                      children: "Remove"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var input_editor_default = InputEditor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditorView,
+  Variable,
+  linkText
+});