opacacms 0.1.0 → 0.1.2

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}
-        />
-      )}
-    </>
-  );
-}

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

@@ -1,240 +0,0 @@
-import { $createCodeNode } from "@lexical/code";
-import { TOGGLE_LINK_COMMAND } from "@lexical/link";
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-} from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
-import { $setBlocksType } from "@lexical/selection";
-import {
-  $getSelection,
-  $insertNodes,
-  $isRangeSelection,
-  COMMAND_PRIORITY_CRITICAL,
-  FORMAT_ELEMENT_COMMAND,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import {
-  Bold,
-  Code,
-  Heading1,
-  Heading2,
-  Image as ImageIcon,
-  Italic,
-  Link as LinkIcon,
-  List,
-  ListOrdered,
-  Quote,
-  Strikethrough,
-} from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { getCurrentBaseURL } from "../../../../../api-client";
-import { AssetManagerModal } from "../../../media/AssetManagerModal";
-import { $createImageNode } from "../nodes/ImageNode";
-
-export function SimpleToolbarPlugin() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [editor] = useLexicalComposerContext();
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  const [blockType, setBlockType] = useState("paragraph");
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
-      setIsStrikethrough(selection.hasFormat("strikethrough"));
-
-      const anchorNode = selection.anchor.getNode();
-      const element =
-        anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
-      const elementKey = element.getKey();
-      const elementDOM = editor.getElementByKey(elementKey);
-
-      if (elementDOM !== null) {
-        if ($isHeadingNode(element)) {
-          const tag = element.getTag();
-          setBlockType(tag);
-        } else {
-          const type = element.getType();
-          setBlockType(type);
-        }
-      }
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      (_payload) => {
-        updateToolbar();
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL,
-    );
-  }, [editor, updateToolbar]);
-
-  const formatHeading = (level: "h1" | "h2") => {
-    if (blockType !== level) {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode(level));
-        }
-      });
-    } else {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode("h1")); // Default to paragraph logic generally, simplify for now
-        }
-      });
-    }
-  };
-
-  const formatQuote = () => {
-    if (blockType !== "quote") {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createQuoteNode());
-        }
-      });
-    }
-  };
-
-  const formatCode = () => {
-    if (blockType !== "code") {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createCodeNode());
-        }
-      });
-    }
-  };
-
-  const formatList = (type: "bullet" | "number") => {
-    if (type === "bullet") {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    }
-  };
-
-  const insertLink = useCallback(() => {
-    editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
-  }, [editor]);
-
-  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);
-  };
-
-  return (
-    <>
-      <div className="opaca-lexical-toolbar">
-        <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>
-
-        <div className="opaca-lexical-divider" />
-
-        <button
-          type="button"
-          onClick={() => formatHeading("h1")}
-          className={`opaca-lexical-btn ${blockType === "h1" ? "is-active" : ""}`}
-        >
-          <Heading1 size={16} />
-        </button>
-        <button
-          type="button"
-          onClick={() => formatHeading("h2")}
-          className={`opaca-lexical-btn ${blockType === "h2" ? "is-active" : ""}`}
-        >
-          <Heading2 size={16} />
-        </button>
-
-        <button
-          type="button"
-          onClick={() => formatList("bullet")}
-          className={`opaca-lexical-btn ${blockType === "ul" ? "is-active" : ""}`}
-        >
-          <List size={16} />
-        </button>
-        <button
-          type="button"
-          onClick={() => formatList("number")}
-          className={`opaca-lexical-btn ${blockType === "ol" ? "is-active" : ""}`}
-        >
-          <ListOrdered size={16} />
-        </button>
-
-        <button
-          type="button"
-          onClick={formatQuote}
-          className={`opaca-lexical-btn ${blockType === "quote" ? "is-active" : ""}`}
-        >
-          <Quote size={16} />
-        </button>
-        <button
-          type="button"
-          onClick={formatCode}
-          className={`opaca-lexical-btn ${blockType === "code" ? "is-active" : ""}`}
-        >
-          <Code size={16} />
-        </button>
-
-        <div className="opaca-lexical-divider" />
-
-        <button type="button" onClick={insertLink} className={`opaca-lexical-btn`}>
-          <LinkIcon size={16} />
-        </button>
-        <button type="button" onClick={() => setIsModalOpen(true)} className={`opaca-lexical-btn`}>
-          <ImageIcon size={16} />
-        </button>
-      </div>
-
-      {isModalOpen && (
-        <AssetManagerModal
-          bucket={"default"}
-          onClose={() => setIsModalOpen(false)}
-          onSelect={handleInsertImage}
-        />
-      )}
-    </>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect, useRef } from "react";
-import { normalizeEditorState } from "..";
-
-interface ValueSyncPluginProps {
-  value: string;
-}
-
-export function ValueSyncPlugin({ value }: ValueSyncPluginProps) {
-  const [editor] = useLexicalComposerContext();
-  const isFirstRender = useRef(true);
-
-  useEffect(() => {
-    // We only want to sync if the value actually changed from the outside
-    // and specifically when we're moving from empty/initial to having real data.
-    // Lexical's initialConfig.editorState only works once.
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    if (normalizeEditorState(value)) {
-      editor.update(() => {
-        const currentContent = JSON.stringify(editor.getEditorState().toJSON());
-
-        // If the external value is different from internal state, and internal is essentially empty or this is the first real load
-        if (currentContent !== value) {
-          try {
-            const newState = editor.parseEditorState(value);
-            editor.setEditorState(newState);
-          } catch (e) {
-            console.error("Failed to parse editor state in ValueSyncPlugin:", e);
-          }
-        }
-      });
-    }
-  }, [editor, value]);
-
-  return null;
-}

package/src/admin/ui/components/fields/utils.ts

@@ -1 +0,0 @@
-export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);

package/src/admin/ui/components/link.tsx

@@ -1,41 +0,0 @@
-import { getPagePath, openPage } from "@nanostores/router";
-import type React from "react";
-import { $router } from "../../router";
-
-interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-  params?: any;
-  search?: any;
-}
-
-export function Link({ href, params, search, children, onClick, ...props }: LinkProps) {
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (onClick) onClick(e);
-
-    // Check if it's a normal click (no meta keys, left button)
-    if (
-      !e.defaultPrevented &&
-      e.button === 0 &&
-      !e.metaKey &&
-      !e.ctrlKey &&
-      !e.shiftKey &&
-      !e.altKey &&
-      !props.target
-    ) {
-      e.preventDefault();
-      // If href starts with /admin, we use the router
-      if (href.startsWith("/admin")) {
-        // We can either pass the path directly or try to find a route
-        $router.open(href);
-      } else {
-        window.location.href = href;
-      }
-    }
-  };
-
-  return (
-    <a href={href} onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
-}