opacacms 0.1.1 → 0.1.2

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

package/src/admin/ui/components/media/AssetManagerModal.tsx

@@ -1,334 +0,0 @@
-import { useStore } from '@nanostores/react';
-import {
-  ChevronRight,
-  File,
-  FileText,
-  FolderPlus,
-  Image as ImageIcon,
-  Loader2,
-  Upload,
-  X,
-} from 'lucide-react';
-import React, { useMemo, useRef, useState } from 'react';
-import { api, getCurrentBaseURL } from '../../../api-client';
-import { $config } from '../../../stores/config';
-import {
-  $assets,
-  $mediaCurrentFolder,
-  $mediaSelectedBucket,
-  $mediaViewMode,
-  type AssetDoc,
-  setMediaBucket,
-  setMediaFolder,
-} from '../../../stores/media';
-import '../../styles/asset-manager.scss';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from '../ui';
-
-interface AssetManagerProps {
-  onSelect: (asset: {
-    assetId: string;
-    url: string;
-    filename: string;
-    mimeType: string;
-    filesize: number;
-  }) => void;
-  onClose: () => void;
-  allowedmime_types?: string[];
-  maxFileSize?: number;
-  bucket?: string;
-}
-
-export const AssetManagerModal: React.FC<AssetManagerProps> = ({
-  onSelect,
-  onClose,
-  allowedmime_types,
-  maxFileSize,
-  bucket = 'default',
-}) => {
-  const { data, loading: isLoading } = useStore($assets);
-  const selectedBucket = useStore($mediaSelectedBucket);
-  const currentFolder = useStore($mediaCurrentFolder);
-  const viewMode = useStore($mediaViewMode);
-  const config = useStore($config);
-
-  const [isUploading, setIsUploading] = useState<boolean>(false);
-  const [isDragActive, setIsDragActive] = useState<boolean>(false);
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const buckets = useMemo(() => {
-    return Object.keys(config?.storages || {});
-  }, [config?.storages]);
-
-  const assets = data?.docs || [];
-  const folders = data?.folders || [];
-
-  const handleUpload = async (file: File) => {
-    // ... same logic but use selectedBucket and currentFolder
-    if (allowedmime_types && !allowedmime_types.includes(file.type)) {
-      alert(`Invalid file type. Allowed: ${allowedmime_types.join(', ')}`);
-      return;
-    }
-    if (maxFileSize && file.size > maxFileSize) {
-      alert(`File too large. Max size: ${maxFileSize / 1024 / 1024}MB`);
-      return;
-    }
-
-    setIsUploading(true);
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const bucketToUse = selectedBucket === 'all' ? 'default' : selectedBucket;
-      const resp = await api
-        .post(
-          `api/__system/assets/upload?bucket=${bucketToUse}&folder=${currentFolder}`,
-          {
-            body: formData,
-            onDownloadProgress: (_progress: unknown) => {
-              // Ky uses onDownloadProgress, but xhr.upload.onprogress is for upload.
-            },
-          },
-        )
-        .json<AssetDoc>();
-
-      setIsUploading(false);
-      $assets.revalidate(); // Refresh the list
-      // Auto select the new file
-      onSelect({
-        assetId: resp.id,
-        url: resp.url || `${getCurrentBaseURL()}/api/assets/${resp.id}/view`,
-        filename: resp.filename,
-        mimeType: resp.mimeType || resp.mime_type || '',
-        filesize: resp.filesize,
-      });
-    } catch (err: unknown) {
-      alert(
-        `Upload failed: ${err instanceof Error ? err.message : 'Unknown error'}`,
-      );
-      setIsUploading(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragActive(false);
-    if (
-      e.dataTransfer.files &&
-      e.dataTransfer.files.length > 0 &&
-      e.dataTransfer.files[0]
-    ) {
-      handleUpload(e.dataTransfer.files[0]);
-    }
-  };
-
-  const getFileIcon = (mime: string) => {
-    if (!mime) return <File size={40} className="text-gray-400" />;
-    if (mime.startsWith('image/'))
-      return <ImageIcon size={40} className="text-blue-400" />;
-    if (mime.startsWith('video/'))
-      return <FileText size={40} className="text-purple-400" />;
-    if (mime.includes('pdf'))
-      return <FileText size={40} className="text-red-400" />;
-    return <File size={40} className="text-gray-400" />;
-  };
-
-  return (
-    <div className="asset-manager-overlay">
-      <div className="asset-manager-container">
-        {/* Header */}
-        <div className="asset-manager-header">
-          <div>
-            <h2>Media Library</h2>
-            <div className="asset-manager-breadcrumbs">
-              <button type="button" onClick={() => setMediaFolder('')}>
-                Home
-              </button>
-              {currentFolder
-                .split('/')
-                .filter(Boolean)
-                .map((part: string, i: number, arr: string[]) => (
-                  <React.Fragment key={part || i}>
-                    <ChevronRight size={14} className="breadcrumb-separator" />
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setMediaFolder(arr.slice(0, i + 1).join('/'))
-                      }
-                    >
-                      {part}
-                    </button>
-                  </React.Fragment>
-                ))}
-            </div>
-          </div>
-          <div className="header-actions">
-            <Select
-              value={selectedBucket}
-              onValueChange={(val: string) => setMediaBucket(val)}
-            >
-              <SelectTrigger className="bucket-selector">
-                <SelectValue placeholder="Bucket" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Buckets</SelectItem>
-                <SelectSeparator />
-                <SelectLabel>Storage</SelectLabel>
-                {buckets.map((b) => (
-                  <SelectItem key={b} value={b}>
-                    {b.toUpperCase()}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <button type="button" onClick={onClose} className="close-button">
-              <X size={20} />
-            </button>
-          </div>
-        </div>
-
-        {/* Upload Zone */}
-        <button
-          type="button"
-          onDragOver={(e) => {
-            e.preventDefault();
-            setIsDragActive(true);
-          }}
-          onDragLeave={() => setIsDragActive(false)}
-          onDrop={handleDrop}
-          onClick={() => !isUploading && fileInputRef.current?.click()}
-          aria-label="Upload file"
-          className={`asset-manager-upload-zone ${isDragActive ? 'is-drag-active' : ''} ${isUploading ? 'uploading' : ''}`}
-        >
-          <input
-            type="file"
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            accept={allowedmime_types?.join(',')}
-            onChange={(e) => {
-              if (
-                e.target.files &&
-                e.target.files.length > 0 &&
-                e.target.files[0]
-              ) {
-                handleUpload(e.target.files[0]);
-              }
-            }}
-          />
-          {isUploading ? (
-            <div className="uploading-status">
-              <Loader2 className="opaca-spin" size={24} />
-              <span className="status-text">Uploading...</span>
-            </div>
-          ) : (
-            <>
-              <Upload size={24} className="upload-icon" />
-              <p className="upload-prompt">
-                Drag & drop a file here, or <span>click to browse</span>.
-              </p>
-            </>
-          )}
-        </button>
-
-        {/* Grid */}
-        <div className="asset-manager-grid-container">
-          {isLoading ? (
-            <div className="loading-assets">
-              <Loader2 className="opaca-spin" size={32} />
-              <p>Loading assets...</p>
-            </div>
-          ) : assets.length === 0 && folders.length === 0 ? (
-            <div className="no-assets">
-              <ImageIcon size={48} className="empty-icon" />
-              <p>No assets found here.</p>
-            </div>
-          ) : (
-            <div className={`asset-manager-grid mode-${viewMode}`}>
-              {/* Folders */}
-              {folders.map((folder: any) => (
-                <button
-                  type="button"
-                  key={`folder-${folder.name}`}
-                  className="asset-manager-card folder-card"
-                  onClick={() =>
-                    setMediaFolder(
-                      currentFolder
-                        ? `${currentFolder}/${folder.name}`
-                        : folder.name,
-                    )
-                  }
-                >
-                  <div className="asset-thumb">
-                    <FolderPlus size={40} className="folder-icon" />
-                  </div>
-                  <div className="asset-info">
-                    <span className="filename">{folder.name}</span>
-                    <span className="file-meta">Folder</span>
-                  </div>
-                </button>
-              ))}
-
-              {/* Assets */}
-              {assets.map((asset: AssetDoc) => (
-                <button
-                  type="button"
-                  key={asset.id}
-                  className="asset-manager-card asset-card"
-                  onClick={() => {
-                    const baseUrl = getCurrentBaseURL();
-                    onSelect({
-                      assetId: asset.id,
-                      url: `${baseUrl}/api/assets/${asset.id}/view`,
-                      filename: asset.filename,
-                      mimeType: asset.mimeType || asset.mime_type || '',
-                      filesize: asset.filesize,
-                    });
-                  }}
-                >
-                  <div className="asset-thumb">
-                    {(() => {
-                      const mime = asset.mimeType || asset.mime_type;
-                      return mime?.startsWith('image/') ? (
-                        <img
-                          src={`${getCurrentBaseURL()}/api/assets/${asset.id}/view`}
-                          alt={asset.filename}
-                        />
-                      ) : (
-                        getFileIcon(mime || '')
-                      );
-                    })()}
-                  </div>
-
-                  <div className="asset-info">
-                    <span className="filename" title={asset.filename}>
-                      {asset.filename}
-                    </span>
-                    <span className="file-meta">
-                      {(asset.mimeType || asset.mime_type || '')
-                        .split('/')[1]
-                        ?.toUpperCase() || 'FILE'}{' '}
-                      • {((asset.filesize || 0) / 1024).toFixed(1)} KB
-                    </span>
-                  </div>
-
-                  <div className="selection-overlay">
-                    <div className="select-badge">Select</div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};