ct-rich-text-editor 1.2.4 → 1.2.5

package/dist/index-7c4c0170.js

@@ -0,0 +1,655 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { CodeNode } from "@lexical/code";
+import { LinkNode } from "@lexical/link";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { useCollaborationContext } from "@lexical/react/LexicalCollaborationContext";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
+import { $getSelection, $isNodeSelection, $setSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, RootNode, TextNode, LineBreakNode, ParagraphNode, createCommand, $getNodeByKey } from "lexical";
+import { useRef, useState, useCallback, useEffect, Suspense } from "react";
+import { $ as $isImageNode, L as LocalStoragePlugin, i as initialConfig } from "./index-c98eb13a.js";
+import "axios";
+import "@emotion/styled";
+import "@lexical/html";
+import "@lexical/react/LexicalCheckListPlugin";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalTablePlugin";
+import "@mui/material/Stack";
+import "react-dom";
+import "@lexical/list";
+import "@lexical/rich-text";
+import "@lexical/selection";
+import "@lexical/table";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@mui/icons-material/Description";
+import "@mui/icons-material/FolderZip";
+import "@mui/icons-material/InsertChart";
+import "@mui/icons-material/InsertDriveFile";
+import "@mui/icons-material/PictureAsPdf";
+import "@lexical/react/LexicalDecoratorBlockNode";
+import "emoji-picker-react";
+import "@mui/icons-material/Code";
+import "@mui/icons-material/ContentCopy";
+import "@mui/icons-material/CropOriginal";
+import "@mui/icons-material/Delete";
+import "@mui/icons-material/FormatAlignCenter";
+import "@mui/icons-material/FormatAlignLeft";
+import "@mui/icons-material/FormatAlignRight";
+import "@mui/icons-material/Link";
+import "@mui/icons-material/OpenInNew";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalTypeaheadMenuPlugin";
+const imageCaptionStyles = "";
+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 = calculateZoomLevel(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("image-control-wrapper--resizing");
+      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 = calculateZoomLevel(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("image-control-wrapper--resizing");
+      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",
+        ref: buttonRef,
+        onClick: () => {
+          setShowCaption(!showCaption);
+        },
+        children: "Add Caption"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.west);
+        }
+      }
+    )
+  ] });
+}
+const imageCache = /* @__PURE__ */ new Set();
+const RIGHT_CLICK_IMAGE_COMMAND = createCommand("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] = useLexicalNodeSelection(nodeKey);
+  const [isResizing, setIsResizing] = useState(false);
+  useCollaborationContext();
+  const [editor] = useLexicalComposerContext();
+  const [selection, setSelection] = useState(null);
+  const activeEditorRef = useRef(null);
+  const [isLoadError, setIsLoadError] = useState(false);
+  const isEditable = useLexicalEditable();
+  const $onDelete = useCallback(
+    (payload) => {
+      const deleteSelection = $getSelection();
+      if (isSelected && $isNodeSelection(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 = $getSelection();
+      const buttonElem = buttonRef.current;
+      if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+        if (showCaption) {
+          $setSelection(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) {
+        $setSelection(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 = $getSelection();
+        const domElement = event.target;
+        if (domElement.tagName === "IMG" && $isRangeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+          editor.dispatchCommand(
+            RIGHT_CLICK_IMAGE_COMMAND,
+            event
+          );
+        }
+      });
+    },
+    [editor]
+  );
+  useEffect(() => {
+    let isMounted = true;
+    const rootElement = editor.getRootElement();
+    const unregister = mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()));
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        onClick,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        RIGHT_CLICK_IMAGE_COMMAND,
+        onClick,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          if (event.target === imageRef.current) {
+            alert("s");
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_DELETE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        $onEscape,
+        COMMAND_PRIORITY_LOW
+      )
+    );
+    rootElement == null ? void 0 : rootElement.addEventListener("contextmenu", onRightClick);
+    return () => {
+      isMounted = false;
+      unregister();
+      rootElement == null ? void 0 : rootElement.removeEventListener("contextmenu", onRightClick);
+    };
+  }, [
+    clearSelection,
+    editor,
+    isResizing,
+    isSelected,
+    nodeKey,
+    $onDelete,
+    $onEnter,
+    $onEscape,
+    onClick,
+    onRightClick,
+    setSelected
+  ]);
+  const setShowCaption = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setShowCaption(true);
+      }
+    });
+  };
+  const onResizeEnd = (nextWidth, nextHeight) => {
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
+  const draggable = isSelected && $isNodeSelection(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: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+        src,
+        altText,
+        imageRef,
+        width,
+        height,
+        maxWidth,
+        onError: () => setIsLoadError(true)
+      }
+    ) }),
+    showCaption && /* @__PURE__ */ jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ jsxs(
+      LexicalNestedComposer,
+      {
+        initialEditor: caption,
+        initialNodes: [
+          RootNode,
+          TextNode,
+          LineBreakNode,
+          ParagraphNode,
+          LinkNode,
+          CodeNode
+        ],
+        children: [
+          /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
+          /* @__PURE__ */ jsx(
+            RichTextPlugin,
+            {
+              contentEditable: /* @__PURE__ */ jsx(
+                ContentEditable,
+                {
+                  "aria-placeholder": "Enter a caption...",
+                  placeholder: () => /* @__PURE__ */ jsx("span", { children: "Enter a caption..." }),
+                  className: "ImageNode__contentEditable"
+                }
+              ),
+              ErrorBoundary: LexicalErrorBoundary
+            }
+          ),
+          /* @__PURE__ */ jsx(OnChangePlugin, { onChange: (e) => console.log("e") }),
+          /* @__PURE__ */ jsx(HistoryPlugin, {}),
+          /* @__PURE__ */ jsx(LocalStoragePlugin, { namespace: initialConfig.namespace })
+        ]
+      }
+    ) }),
+    resizable && $isNodeSelection(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=index-7c4c0170.js.map