opacacms 0.1.0 → 0.1.2

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

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

@@ -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;
-}