opacacms 0.1.0

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

@@ -0,0 +1,211 @@
+import { CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { MarkNode } from "@lexical/mark";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import type { EditorState } from "lexical";
+import { useState } from "react";
+import { ImageNode } from "./nodes/ImageNode";
+import { ComponentPickerPlugin } from "./plugins/ComponentPickerPlugin";
+import { EditableSyncPlugin } from "./plugins/EditableSyncPlugin";
+import { NotionToolbarPlugin } from "./plugins/NotionToolbarPlugin";
+import { SimpleToolbarPlugin } from "./plugins/SimpleToolbarPlugin";
+import { ValueSyncPlugin } from "./plugins/ValueSyncPlugin";
+import "../../../styles/lexical.scss";
+
+export interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  defaultMode?: "simple" | "notion";
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+const theme = {
+  ltr: "ltr",
+  rtl: "rtl",
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5",
+    h6: "editor-heading-h6",
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem",
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem",
+    listitemChecked: "editor-listitem-checked",
+    listitemUnchecked: "editor-listitem-unchecked",
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "editor-text-underline",
+    strikethrough: "editor-text-strikethrough",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code",
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable",
+  },
+};
+
+function Placeholder() {
+  return (
+    <div className="opaca-lexical-placeholder">Press "/" for commands, or start typing...</div>
+  );
+}
+
+export const normalizeEditorState = (value: unknown): string | undefined => {
+  if (!value) return undefined;
+
+  // already string
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed.startsWith("{") ? trimmed : undefined;
+  }
+
+  // object → stringify
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return undefined;
+    }
+  }
+
+  return undefined;
+};
+
+export function RichTextEditor({
+  value,
+  onChange,
+  defaultMode = "simple",
+  disabled,
+  readOnly,
+}: RichTextEditorProps) {
+  const [mode, setMode] = useState<"simple" | "notion">(defaultMode);
+  const isEditable = !disabled && !readOnly;
+
+  const initialConfig = {
+    namespace: "OpacaLexical",
+    theme,
+    editable: isEditable,
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      CodeNode,
+      LinkNode,
+      AutoLinkNode,
+      MarkNode,
+      ImageNode,
+    ],
+    onError: (error: Error) => {
+      console.error(error);
+    },
+    editorState: normalizeEditorState(value),
+  };
+
+  const handleOnChange = (editorState: EditorState) => {
+    // Only call onChange if we have actually serialized new content, otherwise we'll create infinite loops
+    // In Lexical, we generally stringify the JSON
+    const jsonString = JSON.stringify(editorState.toJSON());
+    onChange(jsonString);
+  };
+
+  return (
+    <div className="opaca-lexical-wrapper">
+      {isEditable && (
+        <div className="opaca-lexical-modes">
+          <button
+            type="button"
+            className={`opaca-btn ${mode === "simple" ? "opaca-btn-primary" : "opaca-btn-outline"}`}
+            onClick={() => setMode("simple")}
+          >
+            Simple
+          </button>
+          <button
+            type="button"
+            className={`opaca-btn ${mode === "notion" ? "opaca-btn-primary" : "opaca-btn-outline"}`}
+            onClick={() => setMode("notion")}
+          >
+            Notion-like
+          </button>
+        </div>
+      )}
+
+      <div className={`opaca-lexical-container mode-${mode} ${!isEditable ? "is-readonly" : ""}`}>
+        <LexicalComposer initialConfig={initialConfig}>
+          {mode === "simple" && isEditable && <SimpleToolbarPlugin />}
+          {mode === "notion" && isEditable && <NotionToolbarPlugin />}
+          <div className="opaca-lexical-editor-inner">
+            <RichTextPlugin
+              contentEditable={<ContentEditable className="opaca-lexical-content" />}
+              placeholder={<Placeholder />}
+              ErrorBoundary={LexicalErrorBoundary as any}
+            />
+            <OnChangePlugin onChange={handleOnChange} ignoreSelectionChange />
+            <ValueSyncPlugin value={value} />
+            <EditableSyncPlugin isEditable={isEditable} />
+            <HistoryPlugin />
+            <ListPlugin />
+            <LinkPlugin />
+            <ComponentPickerPlugin />
+          </div>
+        </LexicalComposer>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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