@luscii-healthtech/web-ui 46.2.2 → 46.2.3

package/dist/index.development.js

@@ -32,11 +32,10 @@ var ReactSelect = require('react-select');
 var RadixSwitch = require('@radix-ui/react-switch');
 var Quill = require('quill');
 require('quill-paste-smart');
-require('quill/dist/quill.snow.css');
+var solid = require('@heroicons/react/20/solid');
 var isFunction = require('lodash/isFunction');
 var isObjectLike = require('lodash/isObjectLike');
 var react = require('@headlessui/react');
-var solid = require('@heroicons/react/20/solid');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -5231,7 +5230,119 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
   ]), style, ref }));
 });
 
-var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}";
+const LinkTooltip = ({ linkElement, quillInstance, onClose }) => {
+  const dialogRef = React.useRef(null);
+  const anchorName = React.useRef(`link-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
+  React.useEffect(() => {
+    var _a;
+    linkElement.style.setProperty("anchor-name", `--${anchorName.current}`);
+    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.show();
+    return () => {
+      linkElement.style.removeProperty("anchor-name");
+    };
+  }, [linkElement]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (linkElement.contains(target) || ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+        return;
+      }
+      (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
+      onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [linkElement, onClose]);
+  const handleEditLink = () => {
+    const currentUrl = linkElement.getAttribute("href") || "";
+    const newUrl = prompt("Link URL:", currentUrl);
+    if (newUrl !== null) {
+      const blot = quillInstance.scroll.find(linkElement);
+      if (blot) {
+        const index = quillInstance.getIndex(blot);
+        const length = blot.length();
+        quillInstance.setSelection(index, length);
+        quillInstance.format("link", newUrl || false);
+      }
+    }
+    onClose();
+  };
+  const handleRemoveLink = () => {
+    const blot = quillInstance.scroll.find(linkElement);
+    if (blot) {
+      const index = quillInstance.getIndex(blot);
+      const length = blot.length();
+      quillInstance.setSelection(index, length);
+      quillInstance.format("link", false);
+    }
+    onClose();
+  };
+  const url = linkElement.getAttribute("href") || "";
+  return jsxRuntime.jsx("dialog", { ref: dialogRef, className: "ui:m-0 ui:p-0 ui:border-0 ui:bg-transparent", style: {
+    position: "absolute",
+    // @ts-expect-error - CSS anchor positioning is not yet in TypeScript types
+    positionAnchor: `--${anchorName.current}`,
+    top: "anchor(bottom)",
+    left: "anchor(left)",
+    marginTop: "8px"
+  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { p: "xs", children: jsxRuntime.jsxs(Text, { children: ["Visit URL:", " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: "xs", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: "Edit", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: "Remove", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: "Close", size: "medium" })] })] }) }) });
+};
+
+const TextEditorToolbarButton = ({ option, hasTextSelected }) => {
+  const buttonClasses = "ui:aria-pressed:bg-primary-background ui:aria-disabled:cursor-not-allowed";
+  if (typeof option === "string") {
+    switch (option) {
+      case "bold":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "bold", className: `ql-bold ${buttonClasses}`, children: jsxRuntime.jsx(solid.BoldIcon, { width: 16 }) });
+      case "italic":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "italic", className: `ql-italic ${buttonClasses}`, children: jsxRuntime.jsx(solid.ItalicIcon, { width: 16 }) });
+      case "underline":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "underline", className: `ql-underline ${buttonClasses}`, children: jsxRuntime.jsx(solid.UnderlineIcon, { width: 16 }) });
+      case "strike":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "strike", className: `ql-strike ${buttonClasses}`, children: jsxRuntime.jsx(solid.StrikethroughIcon, { width: 16 }) });
+      case "link":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "link", className: `ql-link ${buttonClasses}`, disabled: !hasTextSelected, children: jsxRuntime.jsx(solid.LinkIcon, { width: 16 }) });
+      case "video":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "video", className: `ql-video ${buttonClasses}`, children: jsxRuntime.jsx(solid.VideoCameraIcon, { width: 16 }) });
+      default:
+        return null;
+    }
+  } else if (typeof option === "object" && "list" in option) {
+    if (option.list === "ordered") {
+      return jsxRuntime.jsx(TertiaryIconButton, { label: "ordered list", className: `ql-list ${buttonClasses}`, value: "ordered", children: jsxRuntime.jsx(solid.NumberedListIcon, { width: 16 }) });
+    } else if (option.list === "bullet") {
+      return jsxRuntime.jsx(TertiaryIconButton, { label: "bullet list", className: `ql-list ${buttonClasses}`, value: "bullet", children: jsxRuntime.jsx(solid.ListBulletIcon, { width: 16 }) });
+    }
+  }
+  return null;
+};
+
+const getOptionKey = (option, index) => {
+  if (typeof option === "string") {
+    return option;
+  } else if (typeof option === "object" && "list" in option) {
+    return `list-${option.list}`;
+  }
+  return `option-${index}`;
+};
+const getGroupKey = (group) => {
+  return group.map((option) => {
+    if (typeof option === "string") {
+      return option;
+    } else if (typeof option === "object" && "list" in option) {
+      return `list-${option.list}`;
+    }
+    return "";
+  }).join("-");
+};
+const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected }) => {
+  return jsxRuntime.jsx(Stack, { axis: "x", gap: "m", px: "xxxs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", gap: "xxxxs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
+};
+
+var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n}\n.ql-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ql-editor ul,\n.ql-editor ol {\n  padding-left: 1.5rem;\n}\n.ql-editor ul {\n  list-style-type: disc;\n}\n.ql-editor ol {\n  list-style-type: decimal;\n}\n.ql-editor li {\n  margin-bottom: 0.25rem;\n}\n.ql-editor strong {\n  font-weight: 600;\n}\n.ql-editor em {\n  font-style: italic;\n}\n.ql-editor u {\n  text-decoration: underline;\n}\n.ql-editor s {\n  text-decoration: line-through;\n}\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.ql-editor h1:first-child,\n.ql-editor h2:first-child,\n.ql-editor h3:first-child,\n.ql-editor h4:first-child,\n.ql-editor h5:first-child,\n.ql-editor h6:first-child {\n  margin-top: 0;\n}\n.ql-editor h1 {\n  font-size: 2rem;\n}\n.ql-editor h2 {\n  font-size: 1.5rem;\n}\n.ql-editor h3 {\n  font-size: 1.25rem;\n}\n.ql-editor h4 {\n  font-size: 1.125rem;\n}\n.ql-editor h5,\n.ql-editor h6 {\n  font-size: 1rem;\n}";
 styleInject(css_248z$1);
 
 const TextEditor = (_a) => {
@@ -5240,36 +5351,62 @@ const TextEditor = (_a) => {
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
   ], placeholder, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange"]);
+  const rawId = React.useId();
+  const toolbarId = `toolbar-${rawId.replace(/:/g, "")}`;
   const defaultValueRef = React.useRef(defaultValue);
   const onTextChangeRef = React.useRef(onValueChange);
   const editorRef = React.useRef(null);
   const quillRef = React.useRef(null);
+  const [linkTooltip, setLinkTooltip] = React.useState(null);
+  const [hasTextSelected, setHasTextSelected] = React.useState(false);
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
   });
   React.useEffect(() => {
-    if (editorRef.current) {
-      const quill = new Quill__default.default(editorRef.current, {
-        theme: "snow",
-        formats,
-        modules: {
-          toolbar
-        },
-        placeholder
-      });
-      quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
-        var _a2;
-        (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, quill.getSemanticHTML(), value, source);
-      });
-      if (defaultValueRef.current) {
-        quill.setContents(quill.clipboard.convert({
-          html: defaultValueRef.current
-        }));
-      }
-      quillRef.current = quill;
+    if (!editorRef.current || quillRef.current) {
+      return void 0;
+    }
+    const editor = editorRef.current;
+    const quill = new Quill__default.default(editor, {
+      formats,
+      modules: {
+        toolbar: `#${toolbarId}`
+      },
+      placeholder
+    });
+    quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
+      var _a2;
+      (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, quill.getSemanticHTML(), value, source);
+    });
+    const handleSelectionChange = () => {
+      const selection = quill.getSelection();
+      setHasTextSelected(selection ? selection.length > 0 : false);
+    };
+    quill.on(Quill__default.default.events.SELECTION_CHANGE, handleSelectionChange);
+    if (defaultValueRef.current) {
+      quill.setContents(quill.clipboard.convert({
+        html: defaultValueRef.current
+      }));
     }
+    quillRef.current = quill;
+    const qlEditor = editor.querySelector(".ql-editor");
+    if (qlEditor) {
+      qlEditor.classList.add("ui:overflow-auto", "ui:resize-y", "ui:min-h-40");
+    }
+    const handleEditorClick = (e) => {
+      const target = e.target;
+      if (target.tagName === "A") {
+        e.preventDefault();
+        const anchor = target;
+        setLinkTooltip(anchor);
+      }
+    };
+    editor.addEventListener("click", handleEditorClick);
+    return () => {
+      editor.removeEventListener("click", handleEditorClick);
+    };
   }, []);
-  return jsxRuntime.jsx("div", Object.assign({}, attrs, { children: jsxRuntime.jsx("div", { ref: editorRef }) }));
+  return jsxRuntime.jsxs(Card, Object.assign({ padding: false, border: true, borderRadius: "xs", backgroundColor: "base" }, attrs, { children: [jsxRuntime.jsx(Card.TopBar, { children: jsxRuntime.jsx(Card.Actions, { className: "ui:justify-start", children: jsxRuntime.jsx(TextEditorToolbar, { toolbarId, toolbar, hasTextSelected }) }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsx("div", { className: "editor", ref: editorRef }), jsxRuntime.jsx("div", { children: linkTooltip && quillRef.current && jsxRuntime.jsx(LinkTooltip, { linkElement: linkTooltip, quillInstance: quillRef.current, onClose: () => setLinkTooltip(null) }) })] }));
 };
 
 const TextLink = (props) => {