opacacms 0.1.0

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

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,240 @@
+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

@@ -0,0 +1,40 @@
+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

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

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

@@ -0,0 +1,41 @@
+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>
+  );
+}