opacacms 0.1.1 → 0.1.2

package/src/admin/ui/components/fields/richtext-editor/nodes/ImageComponent.tsx

@@ -1,142 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { $getNodeByKey } from "lexical";
-import { Trash2 } from "lucide-react";
-import type * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-// To avoid circular dependency, we'll check for the type property directly if needed
-// or we can just trust the nodeKey refers to an ImageNode.
-
-export default function ImageComponent({
-  src,
-  altText,
-  nodeKey,
-  width,
-  height,
-}: {
-  src: string;
-  altText: string;
-  nodeKey: string;
-  width?: number;
-  height?: number;
-}) {
-  const [editor] = useLexicalComposerContext();
-  const [isSelected, setSelected] = useLexicalNodeSelection(nodeKey);
-  const [isResizing, setIsResizing] = useState(false);
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [resizingWidth, setResizingWidth] = useState<number | undefined>(width);
-
-  const onDelete = useCallback(() => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if (node) {
-        node.remove();
-      }
-    });
-  }, [editor, nodeKey]);
-
-  const onResizeStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-  };
-
-  useEffect(() => {
-    if (!isResizing) return;
-
-    const onMouseMove = (e: MouseEvent) => {
-      if (imageRef.current) {
-        const { left } = imageRef.current.getBoundingClientRect();
-        const newWidth = Math.max(50, e.clientX - left);
-        setResizingWidth(newWidth);
-      }
-    };
-
-    const onMouseUp = () => {
-      setIsResizing(false);
-      if (resizingWidth !== undefined) {
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey);
-          // @ts-expect-error - node has setWidth if it is an ImageNode
-          if (node && typeof node.setWidth === "function") {
-            // @ts-expect-error
-            node.setWidth(resizingWidth);
-          }
-        });
-      }
-    };
-
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [isResizing, resizingWidth, editor, nodeKey]);
-
-  useEffect(() => {
-    setResizingWidth(width);
-  }, [width]);
-
-  return (
-    <div
-      role="button"
-      tabIndex={-1}
-      className={`editor-image-wrapper ${isSelected ? "is-selected" : ""}`}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setSelected(!isSelected);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setSelected(!isSelected);
-        }
-      }}
-      style={{
-        display: "inline-block",
-        position: "relative",
-        cursor: "default",
-        lineHeight: 0,
-        zIndex: isSelected ? 10 : 1,
-      }}
-    >
-      <img
-        ref={imageRef}
-        src={src}
-        alt={altText}
-        style={{
-          width: resizingWidth || (width ? `${width}px` : "auto"),
-          height: height ? `${height}px` : "auto",
-          maxWidth: "100%",
-          display: "block",
-        }}
-        className="editor-image-img"
-      />
-      {isSelected && (
-        <>
-          <button
-            type="button"
-            className="editor-image-resizer"
-            onMouseDown={onResizeStart}
-            aria-label="Resize image"
-          />
-          <button
-            type="button"
-            className="editor-image-delete"
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete();
-            }}
-            aria-label="Delete image"
-          >
-            <Trash2 size={14} />
-          </button>
-        </>
-      )}
-    </div>
-  );
-}

package/src/admin/ui/components/fields/richtext-editor/nodes/ImageNode.tsx

@@ -1,95 +0,0 @@
-import { DecoratorNode, type NodeKey, type SerializedLexicalNode } from "lexical";
-import type React from "react";
-import ImageComponent from "./ImageComponent";
-
-export interface SerializedImageNode extends SerializedLexicalNode {
-  src: string;
-  altText: string;
-  height?: number;
-  width?: number;
-  type: "image";
-}
-
-export class ImageNode extends DecoratorNode<React.ReactElement> {
-  __src: string;
-  __altText: string;
-  __height?: number;
-  __width?: number;
-
-  static override getType(): string {
-    return "image";
-  }
-
-  static override clone(node: ImageNode): ImageNode {
-    return new ImageNode(node.__src, node.__altText, node.__height, node.__width, node.__key);
-  }
-
-  constructor(src: string, altText: string, height?: number, width?: number, key?: NodeKey) {
-    super(key);
-    this.__src = src;
-    this.__altText = altText;
-    this.__height = height;
-    this.__width = width;
-  }
-
-  override exportJSON(): SerializedImageNode {
-    return {
-      altText: this.__altText,
-      height: this.__height,
-      src: this.__src,
-      type: "image",
-      version: 1,
-      width: this.__width,
-    };
-  }
-
-  static override importJSON(serializedNode: SerializedImageNode): ImageNode {
-    const { altText, height, width, src } = serializedNode;
-    return $createImageNode(src, altText, height, width);
-  }
-
-  override createDOM(_config: unknown): HTMLElement {
-    const span = document.createElement("span");
-    span.className = "editor-image";
-    return span;
-  }
-
-  override updateDOM(): false {
-    return false;
-  }
-
-  setWidth(width: number): void {
-    const writable = this.getWritable();
-    writable.__width = width;
-  }
-
-  setHeight(height: number): void {
-    const writable = this.getWritable();
-    writable.__height = height;
-  }
-
-  override decorate(): React.ReactElement {
-    return (
-      <ImageComponent
-        src={this.__src}
-        altText={this.__altText}
-        nodeKey={this.__key}
-        width={this.__width}
-        height={this.__height}
-      />
-    );
-  }
-}
-
-export function $createImageNode(
-  src: string,
-  altText: string,
-  height?: number,
-  width?: number,
-): ImageNode {
-  return new ImageNode(src, altText, height, width);
-}
-
-export function $isImageNode(node: unknown): node is ImageNode {
-  return node instanceof ImageNode;
-}

package/src/admin/ui/components/fields/richtext-editor/plugins/ComponentPickerPlugin.tsx

@@ -1,226 +0,0 @@
-import { $createCodeNode } from "@lexical/code";
-import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  LexicalTypeaheadMenuPlugin,
-  MenuOption,
-  useBasicTypeaheadTriggerMatch,
-} from "@lexical/react/LexicalTypeaheadMenuPlugin";
-import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
-import { $setBlocksType } from "@lexical/selection";
-import { $getSelection, $insertNodes, $isRangeSelection, type TextNode } from "lexical";
-import {
-  Code,
-  Heading1,
-  Heading2,
-  Image as ImageIcon,
-  List,
-  ListOrdered,
-  Quote,
-  Type,
-} from "lucide-react";
-import type * as React from "react";
-import { useCallback, useMemo, useState } from "react";
-import * as ReactDOM from "react-dom";
-import { getCurrentBaseURL } from "../../../../../api-client";
-import { AssetManagerModal } from "../../../media/AssetManagerModal";
-import { ScrollArea } from "../../../ui/scroll-area";
-import { $createImageNode } from "../nodes/ImageNode";
-
-class ComponentPickerOption extends MenuOption {
-  title: string;
-  icon: React.ReactNode;
-  description: string;
-  onSelect: (queryString: string) => void;
-
-  constructor(
-    title: string,
-    options: {
-      icon: React.ReactNode;
-      description: string;
-      onSelect: (queryString: string) => void;
-    },
-  ) {
-    super(title);
-    this.title = title;
-    this.icon = options.icon;
-    this.description = options.description;
-    this.onSelect = options.onSelect;
-  }
-}
-
-export function ComponentPickerPlugin() {
-  const [editor] = useLexicalComposerContext();
-  const [queryString, setQueryString] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
-    minLength: 0,
-  });
-
-  const handleInsertImage = (asset: any) => {
-    const url = asset.url || `${getCurrentBaseURL()}/api/assets/${asset.id || asset.assetId}/view`;
-    editor.update(() => {
-      const imageNode = $createImageNode(url, asset.filename || "Image");
-      $insertNodes([imageNode]);
-    });
-    setIsModalOpen(false);
-  };
-
-  const options = useMemo(() => {
-    const baseOptions = [
-      new ComponentPickerOption("Paragraph", {
-        icon: <Type size={18} />,
-        description: "Just start typing with plain text.",
-        onSelect: () => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createHeadingNode("h1")); // Default logic often involves reset, simplify
-              $setBlocksType(selection, () => $createHeadingNode("h1")); // placeholder
-            }
-          });
-        },
-      }),
-      new ComponentPickerOption("Heading 1", {
-        icon: <Heading1 size={18} />,
-        description: "Large section heading.",
-        onSelect: () => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createHeadingNode("h1"));
-            }
-          });
-        },
-      }),
-      new ComponentPickerOption("Heading 2", {
-        icon: <Heading2 size={18} />,
-        description: "Medium section heading.",
-        onSelect: () => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createHeadingNode("h2"));
-            }
-          });
-        },
-      }),
-      new ComponentPickerOption("Bullet List", {
-        icon: <List size={18} />,
-        description: "Create a simple bullet list.",
-        onSelect: () => {
-          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-        },
-      }),
-      new ComponentPickerOption("Numbered List", {
-        icon: <ListOrdered size={18} />,
-        description: "Create a list with numbering.",
-        onSelect: () => {
-          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-        },
-      }),
-      new ComponentPickerOption("Quote", {
-        icon: <Quote size={18} />,
-        description: "Capture a quotation.",
-        onSelect: () => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createQuoteNode());
-            }
-          });
-        },
-      }),
-      new ComponentPickerOption("Code Block", {
-        icon: <Code size={18} />,
-        description: "Write code snippets.",
-        onSelect: () => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createCodeNode());
-            }
-          });
-        },
-      }),
-      new ComponentPickerOption("Image", {
-        icon: <ImageIcon size={18} />,
-        description: "Insert an image from media library.",
-        onSelect: () => {
-          setIsModalOpen(true);
-        },
-      }),
-    ];
-
-    if (!queryString) return baseOptions;
-
-    return baseOptions.filter((option) =>
-      option.title.toLowerCase().includes(queryString.toLowerCase()),
-    );
-  }, [editor, queryString]);
-
-  const onSelectOption = useCallback(
-    (
-      selectedOption: ComponentPickerOption,
-      nodeToRemove: TextNode | null,
-      closeMenu: () => void,
-    ) => {
-      editor.update(() => {
-        if (nodeToRemove) {
-          nodeToRemove.remove();
-        }
-        selectedOption.onSelect(queryString || "");
-        closeMenu();
-      });
-    },
-    [editor, queryString],
-  );
-
-  return (
-    <>
-      <LexicalTypeaheadMenuPlugin<ComponentPickerOption>
-        onQueryChange={setQueryString}
-        onSelectOption={onSelectOption}
-        triggerFn={checkForTriggerMatch}
-        options={options}
-        menuRenderFn={(
-          anchorElementRef,
-          { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
-        ) =>
-          anchorElementRef.current && options.length > 0
-            ? ReactDOM.createPortal(
-                <ScrollArea className="opaca-slash-menu" maxHeight="300px">
-                  {options.map((option, i) => (
-                    <button
-                      key={option.key}
-                      className={`opaca-slash-menu-item ${
-                        selectedIndex === i ? "is-selected" : ""
-                      }`}
-                      onClick={() => selectOptionAndCleanUp(option)}
-                      onMouseEnter={() => setHighlightedIndex(i)}
-                    >
-                      <div className="opaca-slash-menu-icon">{option.icon}</div>
-                      <div className="opaca-slash-menu-text">
-                        <span className="opaca-slash-menu-title">{option.title}</span>
-                        <span className="opaca-slash-menu-desc">{option.description}</span>
-                      </div>
-                    </button>
-                  ))}
-                </ScrollArea>,
-                anchorElementRef.current,
-              )
-            : null
-        }
-      />
-
-      {isModalOpen && (
-        <AssetManagerModal
-          bucket={"default"}
-          onClose={() => setIsModalOpen(false)}
-          onSelect={handleInsertImage}
-        />
-      )}
-    </>
-  );
-}

package/src/admin/ui/components/fields/richtext-editor/plugins/EditableSyncPlugin.tsx

@@ -1,16 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect } from "react";
-
-interface EditableSyncPluginProps {
-  isEditable: boolean;
-}
-
-export function EditableSyncPlugin({ isEditable }: EditableSyncPluginProps) {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    editor.setEditable(isEditable);
-  }, [editor, isEditable]);
-
-  return null;
-}

package/src/admin/ui/components/fields/richtext-editor/plugins/NotionToolbarPlugin.tsx

@@ -1,184 +0,0 @@
-import { TOGGLE_LINK_COMMAND } from "@lexical/link";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import type { RangeSelection } from "lexical";
-import {
-  $getSelection,
-  $insertNodes,
-  $isRangeSelection,
-  COMMAND_PRIORITY_CRITICAL,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import { Bold, Image as ImageIcon, Italic, LinkIcon, Strikethrough } from "lucide-react";
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import * as ReactDOM from "react-dom";
-import { getCurrentBaseURL } from "../../../../../api-client";
-import { AssetManagerModal } from "../../../media/AssetManagerModal";
-import { $createImageNode } from "../nodes/ImageNode";
-
-export function NotionToolbarPlugin() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [editor] = useLexicalComposerContext();
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  const [showToolbar, setShowToolbar] = useState(false);
-  const toolbarRef = useRef<HTMLDivElement>(null);
-
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
-      setIsStrikethrough(selection.hasFormat("strikethrough"));
-
-      const nativeSelection = window.getSelection();
-      const rootElement = editor.getRootElement();
-
-      if (
-        nativeSelection !== null &&
-        !nativeSelection.isCollapsed &&
-        rootElement !== null &&
-        rootElement.contains(nativeSelection.anchorNode)
-      ) {
-        const range = nativeSelection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-
-        // Calculate position relative to the document or a parent container
-        // To keep it simple, we use fixed positioning for the portal if needed,
-        // but here we'll try to position it above the selection.
-        setPosition({
-          top: rect.top - 45, // 45px above the selection
-          left: rect.left + rect.width / 2,
-        });
-
-        setShowToolbar(true);
-      } else {
-        setShowToolbar(false);
-      }
-    } else {
-      setShowToolbar(false);
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateToolbar();
-      });
-    });
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      (_payload) => {
-        updateToolbar();
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL,
-    );
-  }, [editor, updateToolbar]);
-
-  // Also update on scroll/resize to keep it attached (optional but good)
-  useEffect(() => {
-    const handleUpdate = () => {
-      if (showToolbar) {
-        updateToolbar();
-      }
-    };
-    window.addEventListener("resize", handleUpdate);
-    window.addEventListener("scroll", handleUpdate);
-    return () => {
-      window.removeEventListener("resize", handleUpdate);
-      window.removeEventListener("scroll", handleUpdate);
-    };
-  }, [showToolbar, updateToolbar]);
-
-  const handleInsertImage = (asset: any) => {
-    const url = asset.url || `${getCurrentBaseURL()}/api/assets/${asset.id || asset.assetId}/view`;
-    editor.update(() => {
-      const imageNode = $createImageNode(url, asset.filename || "Image");
-      $insertNodes([imageNode]);
-    });
-    setIsModalOpen(false);
-  };
-
-  if (!showToolbar && !isModalOpen) return null;
-
-  return (
-    <>
-      {showToolbar &&
-        ReactDOM.createPortal(
-          <div
-            ref={toolbarRef}
-            className="opaca-lexical-bubble-menu"
-            style={{
-              position: "fixed",
-              top: position.top - (typeof window !== "undefined" ? window.scrollY : 0),
-              left: position.left,
-              transform: "translateX(-50%)",
-              zIndex: 1000,
-              pointerEvents: "auto",
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => {
-                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-              }}
-              className={`opaca-lexical-btn ${isBold ? "is-active" : ""}`}
-            >
-              <Bold size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-              }}
-              className={`opaca-lexical-btn ${isItalic ? "is-active" : ""}`}
-            >
-              <Italic size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
-              }}
-              className={`opaca-lexical-btn ${isStrikethrough ? "is-active" : ""}`}
-            >
-              <Strikethrough size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
-              }}
-              className={`opaca-lexical-btn`}
-            >
-              <LinkIcon size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => setIsModalOpen(true)}
-              className={`opaca-lexical-btn`}
-            >
-              <ImageIcon size={16} />
-            </button>
-          </div>,
-          document.body,
-        )}
-
-      {isModalOpen && (
-        <AssetManagerModal
-          bucket={"default"}
-          onClose={() => setIsModalOpen(false)}
-          onSelect={handleInsertImage}
-        />
-      )}
-    </>
-  );
-}