@collabchron/notiq 0.2.0 → 1.0.0

package/src/components/ui/image/image-toolbar.tsx

@@ -1,264 +0,0 @@
-import { $getNodeByKey, LexicalEditor, NodeKey } from "lexical";
-import React, { useCallback, useEffect, useState } from "react";
-import { $isImageNode } from "../../editor/nodes/ImageNode";
-import { Button } from "@/components/ui/button";
-import {
-  AlignCenterVertical,
-  CaptionsIcon,
-  Fullscreen,
-  PanelLeftClose,
-  Radius,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-
-export default function ImageToolBar({
-  editor,
-  nodeKey,
-  height,
-  width,
-}: {
-  editor: LexicalEditor;
-  nodeKey: NodeKey;
-  height: string | number;
-  width: string | number;
-}) {
-  const [showResizeInput, setShowResizeInput] = useState(false);
-  const [widthInput, setWidthInput] = useState(String(width));
-  const [heightInput, setHeightInput] = useState(String(height));
-  const [showInput, setShowInput] = useState(false);
-
-  const toggleResizeInput = useCallback(() => {
-    setShowResizeInput((prev) => !prev);
-  }, []);
-  const setShowCaption = () => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        const currentState = node.__showCaption;
-        node.setShowCaption(!currentState);
-      }
-    });
-  };
-
-  const updateWidthAndHeight = useCallback(() => {
-    const newWidth = Number(widthInput);
-    const newHeight = Number(heightInput);
-    console.log("update", newWidth, newHeight);
-
-    if (isNaN(newWidth) || isNaN(newHeight)) return;
-    if (newWidth > 990 || newHeight > 1800) return;
-    if (newWidth < 140 || newHeight < 90) return;
-
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setWidthAndHeight(newWidth, newHeight);
-      }
-    });
-  }, [editor, nodeKey, widthInput, heightInput]);
-
-  useEffect(() => {
-    const debounceTimeout = setTimeout(() => {
-      updateWidthAndHeight();
-    }, 500);
-    return () => clearTimeout(debounceTimeout);
-  }, [widthInput, heightInput, updateWidthAndHeight]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter") {
-        updateWidthAndHeight();
-      }
-    },
-    [updateWidthAndHeight]
-  );
-
-  const handleWidthChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setWidthInput(e.target.value);
-    },
-    []
-  );
-
-  const handleHeightChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setHeightInput(e.target.value);
-    },
-    []
-  );
-  useEffect(() => {
-    setWidthInput(String(width));
-    setHeightInput(String(height));
-  }, [height, width]);
-
-  const ChangeSideToLeft = useCallback(() => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setAlignment("start");
-      }
-    });
-  }, [editor, nodeKey]);
-
-  const ChangeSideToCenter = useCallback(() => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setAlignment("center");
-      }
-    });
-  }, [editor, nodeKey]);
-
-  const ChangeSideToRight = useCallback(() => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setAlignment("end");
-      }
-    });
-  }, [editor, nodeKey]);
-  const ChangeRounded = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey);
-        if ($isImageNode(node)) {
-          const roundedValue = parseInt(event.target.value);
-          node.setRounded(roundedValue);
-        }
-      });
-    },
-    [editor, nodeKey]
-  );
-  return (
-    <div className="flex flex-row items-center z-50 gap-x-2 absolute top-1 left-1 group-hover:opacity-100 duration-500 opacity-0 transition-all">
-      <div className="p-1 rounded-sm bg-background/40 flex flex-row items-center justify-between">
-        <div className="flex flex-row items-center">
-          <Button
-            onClick={toggleResizeInput}
-            tip="Resize image"
-            variant={"ghost"}
-            size={"sm"}
-            className="p-1 w-6 h-6 "
-          >
-            <Fullscreen className="size-2" />
-          </Button>
-          <div
-            className={cn(
-              "transition-all duration-500  ease-in-out",
-              showResizeInput ? "w-[30px] mx-1" : "w-0"
-            )}
-          >
-            <Input
-              type="number"
-              placeholder="0px"
-              max={990}
-              min={120}
-              value={widthInput}
-              onChange={handleWidthChange}
-              onKeyDown={handleKeyDown}
-              className={cn(
-                "h-5 px-0.5 w-full rounded-sm text-xs outline-none transition-opacity duration-300 ease-in-out",
-                showResizeInput ? "opacity-100" : "opacity-0"
-              )}
-            />
-          </div>
-          <div
-            className={cn(
-              "transition-all duration-500 ease-in-out",
-              showResizeInput ? "w-[30px]" : "w-0"
-            )}
-          >
-            <Input
-              type="number"
-              placeholder="0px"
-              max={1800}
-              min={120}
-              value={heightInput}
-              onChange={handleHeightChange}
-              onKeyDown={handleKeyDown}
-              className={cn(
-                "h-5 px-0.5 w-full text-xs rounded-sm outline-none transition-opacity duration-300 ease-in-out",
-                showResizeInput ? "opacity-100" : "opacity-0"
-              )}
-            />
-          </div>
-        </div>
-        <Separator orientation="vertical" className="mx-1 h-5" />
-        <div className="flex flex-row items-center gap-x-1">
-          <Button
-            onClick={ChangeSideToLeft}
-            variant={"ghost"}
-            size={"sm"}
-            tip="move left"
-            className="w-6 h-6 p-1 "
-          >
-            <PanelLeftClose />
-          </Button>
-          <Button
-            size={"sm"}
-            variant={"ghost"}
-            onClick={ChangeSideToCenter}
-            className=" mx-1 w-6 h-6 p-1 opacity-[0.70] hover:opacity-100 transition-opacity"
-            tip="move center"
-          >
-            <AlignCenterVertical />
-          </Button>
-          <Button
-            size={"sm"}
-            variant={"ghost"}
-            onClick={ChangeSideToRight}
-            className="  w-6 h-6 p-1 opacity-[0.70] hover:opacity-100 transition-opacity"
-            tip="move right"
-          >
-            <PanelLeftClose />
-          </Button>
-        </div>
-        <Separator orientation="vertical" className="mx-1 h-5" />
-
-        <Button
-          size={"sm"}
-          variant={"ghost"}
-          onClick={() => {
-            setShowInput(!showInput);
-          }}
-          className="  w-6 h-6 p-1 opacity-[0.70] hover:opacity-100 transition-opacity"
-          tip="border radius"
-        >
-          <Radius />
-        </Button>
-        <div
-          className={cn(
-            "overflow-hidden transition-all duration-500 ease-in-out ",
-            showInput ? "w-[60px]" : "w-0"
-          )}
-        >
-          <Input
-            type="range"
-            min="0"
-            max="120"
-            defaultValue="0"
-            onChange={ChangeRounded}
-            className={cn(
-              "h-5 px-1 py-0 transition-opacity duration-300 ease-in-out",
-              showInput ? "opacity-100" : "opacity-0"
-            )}
-          />
-        </div>
-
-        <Separator orientation="vertical" className="mx-1 h-5" />
-
-        <Button
-          size={"sm"}
-          variant={"ghost"}
-          onClick={setShowCaption}
-          className="  w-6 h-6 p-1 opacity-[0.70] hover:opacity-100 transition-opacity"
-          tip="add caption"
-        >
-          <CaptionsIcon />
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/image/index.tsx

@@ -1,408 +0,0 @@
-import type {
-  BaseSelection,
-  LexicalCommand,
-  LexicalEditor,
-  NodeKey,
-} from "lexical";
-import type { JSX } from "react";
-
-import { LinkNode } from "@lexical/link";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { mergeRegister } from "@lexical/utils";
-import {
-  $getNodeByKey,
-  $getSelection,
-  $isNodeSelection,
-  $isRangeSelection,
-  $setSelection,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_LOW,
-  createCommand,
-  DRAGSTART_COMMAND,
-  KEY_BACKSPACE_COMMAND,
-  KEY_DELETE_COMMAND,
-  KEY_ENTER_COMMAND,
-  KEY_ESCAPE_COMMAND,
-  LineBreakNode,
-  ParagraphNode,
-  RootNode,
-  SELECTION_CHANGE_COMMAND,
-  TextNode,
-} from "lexical";
-import * as React from "react";
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { $isImageNode } from "../../editor/nodes/ImageNode";
-import { useSharedHistoryContext } from "@/components/providers/SharedHistoryContext";
-import ErrorImage from "./error-image";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import ImageResizer from "./image-resizer";
-import LazyImage from "./lazy-image";
-import LazyVideo from "./lazy-video";
-import ImageToolBar from "./image-toolbar";
-
-export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent> =
-  createCommand("RIGHT_CLICK_IMAGE_COMMAND");
-
-export default function ImageComponent({
-  src,
-  altText,
-  nodeKey,
-  width,
-  height,
-  maxWidth,
-  resizable,
-  showCaption,
-  caption,
-  rounded,
-}: {
-  altText: string;
-  caption: LexicalEditor;
-  height: "inherit" | number;
-  maxWidth: number;
-  nodeKey: NodeKey;
-  resizable: boolean;
-  showCaption: boolean;
-  src: string;
-  width: "inherit" | number;
-  rounded: number;
-  captionsEnabled: boolean;
-}): JSX.Element {
-  const MediaRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null); // Updated type
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const [isSelected, setSelected, clearSelection] =
-    useLexicalNodeSelection(nodeKey);
-  const [isResizing, setIsResizing] = useState<boolean>(false);
-  const [editor] = useLexicalComposerContext();
-  const [selection, setSelection] = useState<BaseSelection | null>(null);
-  const activeEditorRef = useRef<LexicalEditor | null>(null);
-  const [isLoadError, setIsLoadError] = useState<boolean>(false);
-  const isEditable = useLexicalEditable();
-  const [MediaType, setMediaType] = useState<"IMAGE" | "VIDEO">("IMAGE");
-
-  const $onDelete = useCallback(
-    (payload: KeyboardEvent) => {
-      const deleteSelection = $getSelection();
-      if (isSelected && $isNodeSelection(deleteSelection)) {
-        const event: KeyboardEvent = payload;
-        event.preventDefault();
-        deleteSelection.getNodes().forEach((node) => {
-          if ($isImageNode(node)) {
-            node.remove();
-          }
-        });
-      }
-      return false;
-    },
-    [isSelected]
-  );
-
-  const $onEnter = useCallback(
-    (event: KeyboardEvent) => {
-      const latestSelection = $getSelection();
-      const buttonElem = buttonRef.current;
-      if (
-        isSelected &&
-        $isNodeSelection(latestSelection) &&
-        latestSelection.getNodes().length === 1
-      ) {
-        if (showCaption) {
-          // Move focus into nested editor
-          $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: KeyboardEvent) => {
-      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: MouseEvent) => {
-      const event = payload;
-
-      if (isResizing) {
-        return true;
-      }
-      if (event.target === MediaRef.current) {
-        if (event.shiftKey) {
-          setSelected(!isSelected);
-        } else {
-          clearSelection();
-          setSelected(true);
-        }
-        return true;
-      }
-
-      return false;
-    },
-    [isResizing, isSelected, setSelected, clearSelection]
-  );
-
-  const onRightClick = useCallback(
-    (event: MouseEvent): void => {
-      editor.getEditorState().read(() => {
-        const latestSelection = $getSelection();
-        const domElement = event.target as HTMLElement;
-        if (
-          (domElement.tagName === "IMG" || domElement.tagName === "VIDEO") &&
-          $isRangeSelection(latestSelection) &&
-          latestSelection.getNodes().length === 1
-        ) {
-          editor.dispatchCommand(
-            RIGHT_CLICK_IMAGE_COMMAND,
-            event as MouseEvent
-          );
-        }
-      });
-    },
-    [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<MouseEvent>(
-        CLICK_COMMAND,
-        onClick,
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand<MouseEvent>(
-        RIGHT_CLICK_IMAGE_COMMAND,
-        onClick,
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        DRAGSTART_COMMAND,
-        (event) => {
-          if (event.target === MediaRef.current) {
-            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?.addEventListener("contextmenu", onRightClick);
-
-    return () => {
-      isMounted = false;
-      unregister();
-      rootElement?.removeEventListener("contextmenu", onRightClick);
-    };
-  }, [
-    clearSelection,
-    editor,
-    isResizing,
-    isSelected,
-    nodeKey,
-    $onDelete,
-    $onEnter,
-    $onEscape,
-    onClick,
-    onRightClick,
-    setSelected,
-  ]);
-
-  useEffect(() => {
-    if (src.endsWith(".mp4")) {
-      setMediaType("VIDEO");
-    } else if (
-      src.endsWith(".jpg") ||
-      src.endsWith(".jpeg") ||
-      src.endsWith(".png")
-    ) {
-      setMediaType("IMAGE");
-    }
-  }, [src]);
-
-  const onResizeEnd = (
-    nextWidth: "inherit" | number,
-    nextHeight: "inherit" | number
-  ) => {
-    setTimeout(() => {
-      setIsResizing(false);
-    }, 200);
-
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setWidthAndHeight(nextWidth, nextHeight);
-      }
-    });
-  };
-
-  const onResizeStart = () => {
-    setIsResizing(true);
-  };
-
-  const { historyState } = useSharedHistoryContext();
-
-  const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
-  const isFocused = (isSelected || isResizing) && isEditable;
-
-  return (
-    <Suspense fallback={null}>
-      <div className="relative inline-block group">
-        <div draggable={draggable}>
-          {isLoadError ? (
-            <ErrorImage />
-          ) : (
-            <>
-              {MediaType === "IMAGE" ? (
-                <LazyImage
-                  style={{
-                    width: width === "inherit" ? "400px" : `${width}px`,
-                    height: height === "inherit" ? "400px" : `${height}px`,
-                    borderRadius: `${rounded}px`,
-                  }}
-                  src={src}
-                  altText={altText}
-                  imageRef={MediaRef as React.RefObject<HTMLImageElement>}
-                  onError={() => setIsLoadError(true)}
-                />
-              ) : (
-                <LazyVideo
-                  src={src}
-                  style={{
-                    width: width === "inherit" ? "800px" : `${width}px`,
-                    height: height === "inherit" ? "450px" : `${height}px`,
-                    borderRadius: `${rounded}px`,
-                  }}
-                  videoRef={MediaRef as React.RefObject<HTMLVideoElement>}
-                  onError={() => setIsLoadError(true)}
-                  rounded={rounded}
-                  controls={true}
-                />
-              )}
-            </>
-          )}
-        </div>
-        {showCaption && (
-          <div>
-            <LexicalNestedComposer
-              initialEditor={caption}
-              initialNodes={[
-                RootNode,
-                TextNode,
-                LineBreakNode,
-                ParagraphNode,
-                LinkNode,
-              ]}
-            >
-              <AutoFocusPlugin />
-              <LinkPlugin />
-              <HistoryPlugin externalHistoryState={historyState} />
-              <RichTextPlugin
-                contentEditable={
-                  <ContentEditable
-                    aria-placeholder="Enter a caption..."
-                    placeholder={() => (
-                      <span
-                        className="
-                        color-[#999] text-xs overflow-hidden absolute  text-ellipsis
-                        select-none text-nowrap inline-block pointer-events-none
-                         transform -translate-x-1/2 -translate-y-1/2 bottom-[-8px]
-                        "
-                      >
-                        Enter a caption...
-                      </span>
-                    )}
-                    className="text-center relative text-xs text-muted-foreground  outline-none"
-                  />
-                }
-                ErrorBoundary={LexicalErrorBoundary}
-              />
-            </LexicalNestedComposer>
-          </div>
-        )}
-        {isEditable && !isResizing && (
-          <ImageToolBar
-            width={width}
-            height={height}
-            editor={editor}
-            nodeKey={nodeKey}
-          />
-        )}
-
-        {resizable && $isNodeSelection(selection) && isFocused && (
-          <ImageResizer
-            editor={editor}
-            MediaRef={MediaRef}
-            onResizeStart={onResizeStart}
-            onResizeEnd={onResizeEnd}
-          />
-        )}
-      </div>
-    </Suspense>
-  );
-}