@vritti/quantum-ui 0.2.10 → 0.3.0

package/dist/image-component.js

@@ -0,0 +1,614 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, createContext, useRef, useMemo, useEffect, useState, useCallback, Suspense } from 'react';
+import { r, t as t$1, c as co, a as to, b as ct, B as Button, M as Mt, u, o, d as a$1, $ as $r, O as Or, e as $isImageNode, z as zo, w as wr, f as ec, A as Ae, H as Hi, E as Ee, g as Me, P as Pe, h as Re, i as oe, j as re, I as Ii, l as lr, U as Ui, k as o$1, m as a$2, L, n, C as ContentEditable, p as ne, q as Mo } from './index2.js';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const t=[["Cat","rgb(125, 50, 0)"],["Dog","rgb(100, 0, 0)"],["Rabbit","rgb(150, 0, 0)"],["Frog","rgb(200, 0, 0)"],["Fox","rgb(200, 75, 0)"],["Hedgehog","rgb(0, 75, 0)"],["Pigeon","rgb(0, 125, 0)"],["Squirrel","rgb(75, 100, 0)"],["Bear","rgb(125, 100, 0)"],["Tiger","rgb(0, 0, 150)"],["Leopard","rgb(0, 0, 200)"],["Zebra","rgb(0, 0, 250)"],["Wolf","rgb(0, 100, 150)"],["Owl","rgb(0, 100, 100)"],["Gull","rgb(100, 0, 100)"],["Squid","rgb(150, 0, 150)"]],i=t[Math.floor(Math.random()*t.length)],l=createContext(null);function a(){return {color:i[1],isCollabActive:false,name:i[0],yjsDocMap:new Map}}const g=a();function b(r,n){let o=useContext(l);return null==o&&function(r,...n){const e=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",r);for(const r of n)o.append("v",r);e.search=o.toString(),console.warn(`Minified Lexical warning #${r}; visit ${e.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);}(319),o=o??g,o}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function m({initialEditor:m,children:h,initialNodes:u,initialTheme:g,skipCollabChecks:x,skipEditableListener:_}){const v=useRef(false),E=useContext(r);null==E&&function(e,...t){const o=new URL("https://lexical.dev/docs/error"),r=new URLSearchParams;r.append("code",e);for(const e of t)r.append("v",e);throw o.search=r.toString(),Error(`Minified Lexical error #${e}; visit ${o.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(9);const[k,{getTheme:b}]=E,w=useMemo(()=>{const e=g||b()||void 0,t=t$1(E,e);void 0!==e&&(m._config.theme=e),m._parentEditor=m._parentEditor||k;const s=m._createEditorArgs,a=s&&s.namespace;if(u){a||(m._config.namespace=k._config.namespace);for(let e of u){let t=null,o=null;if("function"!=typeof e){const r=e;e=r.replace,t=r.with,o=r.withKlass||null;}const s=co(m,e.getType());m._nodes.set(e.getType(),{exportDOM:s?s.exportDOM:void 0,klass:e,replace:t,replaceWithKlass:o,sharedNodeState:ct(e),transforms:to(e)});}}else if(s&&s.nodes)a||(m._config.namespace=k._config.namespace);else {const e=m._nodes=new Map(k._nodes);a||(m._config.namespace=k._config.namespace);for(const[t,o]of e)m._nodes.set(t,{exportDOM:o.exportDOM,klass:o.klass,replace:o.replace,replaceWithKlass:o.replaceWithKlass,sharedNodeState:ct(o.klass),transforms:to(o.klass)});}return [m,t]},[]),C=useContext(l),{isCollabActive:L,yjsDocMap:M}=C??{},y=x||v.current||M&&M.has(m.getKey());return useEffect(()=>{y&&(v.current=true);},[y]),useEffect(()=>{if(!_){const e=e=>m.setEditable(e);return e(k.isEditable()),k.registerEditableListener(e)}},[m,k,_]),jsx(r.Provider,{value:w,children:!L||y?h:null})}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  buttonRef,
+  imageRef,
+  maxWidth,
+  editor,
+  showCaption,
+  setShowCaption,
+  captionsEnabled
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default"
+  });
+  const positioningRef = useRef({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  const editorRootElement = editor.getRootElement();
+  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = (direction) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty(
+        "cursor",
+        `${cursorDir}-resize`,
+        "important"
+      );
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty(
+        "cursor",
+        `${cursorDir}-resize`,
+        "important"
+      );
+      userSelect.current.value = document.body.style.getPropertyValue(
+        "-webkit-user-select"
+      );
+      userSelect.current.priority = document.body.style.getPropertyPriority(
+        "-webkit-user-select"
+      );
+      document.body.style.setProperty(
+        "-webkit-user-select",
+        `none`,
+        "important"
+      );
+    }
+  };
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty(
+        "-webkit-user-select",
+        userSelect.current.value,
+        userSelect.current.priority
+      );
+    }
+  };
+  const handlePointerDown = (event, direction) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const { width, height } = image.getBoundingClientRect();
+      const zoom = Mt(image);
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX / zoom;
+      positioning.startY = event.clientY / zoom;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add("touch-action-none");
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  const handlePointerMove = (event) => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      const zoom = Mt(image);
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer
+        );
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY / zoom);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(
+          positioning.startHeight + diff,
+          minHeight,
+          maxHeightContainer
+        );
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer
+        );
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove("touch-action-none");
+      setEndCursor();
+      onResizeEnd(width, height);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: controlWrapperRef, children: [
+    !showCaption && captionsEnabled && /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "image-caption-button absolute bottom-1 left-1/2 -translate-x-1/2",
+        ref: buttonRef,
+        variant: "outline",
+        onClick: () => {
+          setShowCaption(!showCaption);
+        },
+        children: "Add Caption"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n bg-primary absolute -top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 cursor-ns-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne bg-primary absolute -top-2.5 -right-2.5 h-2 w-2 cursor-nesw-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e bg-primary absolute top-1/2 -right-2.5 h-2 w-2 -translate-y-1/2 cursor-ew-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se bg-primary absolute -right-2.5 -bottom-2.5 h-2 w-2 cursor-nwse-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s bg-primary absolute -bottom-2.5 left-1/2 h-2 w-2 -translate-x-1/2 cursor-ns-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw bg-primary absolute -bottom-2.5 -left-2.5 h-2 w-2 cursor-nesw-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w bg-primary absolute top-1/2 -left-2.5 h-2 w-2 -translate-y-1/2 cursor-ew-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw bg-primary absolute -top-2.5 -left-2.5 h-2 w-2 cursor-nwse-resize",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.west);
+        }
+      }
+    )
+  ] });
+}
+
+const imageCache = /* @__PURE__ */ new Set();
+const RIGHT_CLICK_IMAGE_COMMAND = ne("RIGHT_CLICK_IMAGE_COMMAND");
+function useSuspenseImage(src) {
+  if (!imageCache.has(src)) {
+    throw new Promise((resolve) => {
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        imageCache.add(src);
+        resolve(null);
+      };
+      img.onerror = () => {
+        imageCache.add(src);
+      };
+    });
+  }
+}
+function LazyImage({
+  altText,
+  className,
+  imageRef,
+  src,
+  width,
+  height,
+  maxWidth,
+  onError
+}) {
+  useSuspenseImage(src);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: className || void 0,
+      src,
+      alt: altText,
+      ref: imageRef,
+      style: {
+        height,
+        maxWidth,
+        width
+      },
+      onError,
+      draggable: "false"
+    }
+  );
+}
+function BrokenImage() {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: "",
+      style: {
+        height: 200,
+        opacity: 0.2,
+        width: 200
+      },
+      draggable: "false"
+    }
+  );
+}
+function ImageComponent({
+  src,
+  altText,
+  nodeKey,
+  width,
+  height,
+  maxWidth,
+  resizable,
+  showCaption,
+  caption,
+  captionsEnabled
+}) {
+  const imageRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [isSelected, setSelected, clearSelection] = u(nodeKey);
+  const [isResizing, setIsResizing] = useState(false);
+  const { isCollabActive } = b();
+  const [editor] = o();
+  const [selection, setSelection] = useState(null);
+  const activeEditorRef = useRef(null);
+  const [isLoadError, setIsLoadError] = useState(false);
+  const isEditable = a$1();
+  const $onDelete = useCallback(
+    (payload) => {
+      const deleteSelection = $r();
+      if (isSelected && Or(deleteSelection)) {
+        const event = payload;
+        event.preventDefault();
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isImageNode(node)) {
+              node.remove();
+            }
+          });
+        });
+      }
+      return false;
+    },
+    [editor, isSelected]
+  );
+  const $onEnter = useCallback(
+    (event) => {
+      const latestSelection = $r();
+      const buttonElem = buttonRef.current;
+      if (isSelected && Or(latestSelection) && latestSelection.getNodes().length === 1) {
+        if (showCaption) {
+          zo(null);
+          event.preventDefault();
+          caption.focus();
+          return true;
+        } else if (buttonElem !== null && buttonElem !== document.activeElement) {
+          event.preventDefault();
+          buttonElem.focus();
+          return true;
+        }
+      }
+      return false;
+    },
+    [caption, isSelected, showCaption]
+  );
+  const $onEscape = useCallback(
+    (event) => {
+      if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+        zo(null);
+        editor.update(() => {
+          setSelected(true);
+          const parentRootElement = editor.getRootElement();
+          if (parentRootElement !== null) {
+            parentRootElement.focus();
+          }
+        });
+        return true;
+      }
+      return false;
+    },
+    [caption, editor, setSelected]
+  );
+  const onClick = useCallback(
+    (payload) => {
+      const event = payload;
+      if (isResizing) {
+        return true;
+      }
+      if (event.target === imageRef.current) {
+        if (event.shiftKey) {
+          setSelected(!isSelected);
+        } else {
+          clearSelection();
+          setSelected(true);
+        }
+        return true;
+      }
+      return false;
+    },
+    [isResizing, isSelected, setSelected, clearSelection]
+  );
+  const onRightClick = useCallback(
+    (event) => {
+      editor.getEditorState().read(() => {
+        const latestSelection = $r();
+        const domElement = event.target;
+        if (domElement.tagName === "IMG" && wr(latestSelection) && latestSelection.getNodes().length === 1) {
+          editor.dispatchCommand(RIGHT_CLICK_IMAGE_COMMAND, event);
+        }
+      });
+    },
+    [editor]
+  );
+  useEffect(() => {
+    let isMounted = true;
+    const rootElement = editor.getRootElement();
+    const unregister = ec(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $r()));
+        }
+      }),
+      editor.registerCommand(
+        re,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor;
+          return false;
+        },
+        Hi
+      ),
+      editor.registerCommand(
+        oe,
+        onClick,
+        Hi
+      ),
+      editor.registerCommand(
+        RIGHT_CLICK_IMAGE_COMMAND,
+        onClick,
+        Hi
+      ),
+      editor.registerCommand(
+        Re,
+        (event) => {
+          if (event.target === imageRef.current) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        Hi
+      ),
+      editor.registerCommand(
+        Pe,
+        $onDelete,
+        Hi
+      ),
+      editor.registerCommand(
+        Me,
+        $onDelete,
+        Hi
+      ),
+      editor.registerCommand(Ee, $onEnter, Hi),
+      editor.registerCommand(
+        Ae,
+        $onEscape,
+        Hi
+      )
+    );
+    rootElement?.addEventListener("contextmenu", onRightClick);
+    return () => {
+      isMounted = false;
+      unregister();
+      rootElement?.removeEventListener("contextmenu", onRightClick);
+    };
+  }, [
+    clearSelection,
+    editor,
+    isResizing,
+    isSelected,
+    nodeKey,
+    $onDelete,
+    $onEnter,
+    $onEscape,
+    onClick,
+    onRightClick,
+    setSelected
+  ]);
+  const setShowCaption = () => {
+    editor.update(() => {
+      const node = Mo(nodeKey);
+      if ($isImageNode(node)) {
+        node.setShowCaption(true);
+      }
+    });
+  };
+  const onResizeEnd = (nextWidth, nextHeight) => {
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+    editor.update(() => {
+      const node = Mo(nodeKey);
+      if ($isImageNode(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
+  const draggable = isSelected && Or(selection) && !isResizing;
+  const isFocused = (isSelected || isResizing) && isEditable;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { draggable, children: isLoadError ? /* @__PURE__ */ jsx(BrokenImage, {}) : /* @__PURE__ */ jsx(
+      LazyImage,
+      {
+        className: `max-w-full cursor-default ${isFocused ? `${Or(selection) ? "draggable cursor-grab active:cursor-grabbing" : ""} focused ring-primary ring-2 ring-offset-2` : null}`,
+        src,
+        altText,
+        imageRef,
+        width,
+        height,
+        maxWidth,
+        onError: () => setIsLoadError(true)
+      }
+    ) }),
+    showCaption && /* @__PURE__ */ jsx("div", { className: "image-caption-container absolute right-0 bottom-1 left-0 m-0 block min-w-[100px] overflow-hidden border-t bg-white/90 p-0", children: /* @__PURE__ */ jsxs(
+      m,
+      {
+        initialEditor: caption,
+        initialNodes: [Ii, lr, Ui],
+        children: [
+          /* @__PURE__ */ jsx(o$1, {}),
+          /* @__PURE__ */ jsx(a$2, {}),
+          /* @__PURE__ */ jsx(
+            L,
+            {
+              contentEditable: /* @__PURE__ */ jsx(
+                ContentEditable,
+                {
+                  className: "ImageNode__contentEditable user-select-text word-break-break-word caret-primary relative block min-h-5 w-[calc(100%-20px)] cursor-text resize-none border-0 p-2.5 text-sm whitespace-pre-wrap outline-none",
+                  placeholderClassName: "ImageNode__placeholder text-sm text-muted-foreground overflow-hidden absolute top-2.5 left-2.5 pointer-events-none text-ellipsis user-select-none whitespace-nowrap inline-block",
+                  placeholder: "Enter a caption..."
+                }
+              ),
+              ErrorBoundary: n
+            }
+          )
+        ]
+      }
+    ) }),
+    resizable && Or(selection) && isFocused && /* @__PURE__ */ jsx(
+      ImageResizer,
+      {
+        showCaption,
+        setShowCaption,
+        editor,
+        buttonRef,
+        imageRef,
+        maxWidth,
+        onResizeStart,
+        onResizeEnd,
+        captionsEnabled: !isLoadError && captionsEnabled
+      }
+    )
+  ] }) });
+}
+
+export { RIGHT_CLICK_IMAGE_COMMAND, ImageComponent as default };
+//# sourceMappingURL=image-component.js.map