@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/fields/EditorClient.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useCallback } from "react";
+import {
+  EditorProvider,
+  PortableTextEditable,
+  useEditor,
+} from "@portabletext/editor";
+import { defineSchema } from "@portabletext/schema";
+import { EventListenerPlugin } from "@portabletext/editor/plugins";
+
+interface EditorClientProps {
+  initialValue: any[];
+  onChange: (blocks: any[]) => void;
+  disabled?: boolean;
+  theme: any;
+}
+
+/**
+ * Sanitize any incoming value into a valid Portable Text block array.
+ * The @portabletext/editor will throw `charCodeAt` errors if it receives
+ * undefined, null, a plain string, or blocks with missing/non-string text.
+ */
+function sanitizeInitialValue(value: any): any[] {
+  if (!value || !Array.isArray(value)) return [];
+  return value.filter((block) => {
+    if (!block || typeof block !== "object") return false;
+    if (!block._type) return false;
+    // For text blocks, ensure every span has a string `text` property
+    if (block._type === "block" && Array.isArray(block.children)) {
+      block.children = block.children.map((child: any) => ({
+        ...child,
+        _type: child._type || "span",
+        text: typeof child.text === "string" ? child.text : "",
+      }));
+    }
+    return true;
+  });
+}
+
+// Define basic portable text schema
+const schemaDefinition = defineSchema({
+  decorators: [
+    { name: "strong", title: "Bold" },
+    { name: "em", title: "Italic" },
+    { name: "underline", title: "Underline" },
+    { name: "strikeThrough", title: "Strikethrough" },
+    { name: "code", title: "Code" },
+  ],
+  styles: [
+    { name: "normal", title: "Paragraph" },
+    { name: "h1", title: "Heading 1" },
+    { name: "h2", title: "Heading 2" },
+    { name: "h3", title: "Heading 3" },
+    { name: "blockquote", title: "Quote" },
+  ],
+  lists: [
+    { name: "bullet", title: "Bullet List" },
+    { name: "number", title: "Numbered List" },
+  ],
+  annotations: [],
+  inlineObjects: [],
+  blockObjects: [],
+});
+
+const Toolbar: React.FC<{ onInsertTag: (tag: string) => void }> = ({
+  onInsertTag,
+}) => {
+  const textColor = "#374151";
+  const textMuted = "#9ca3af";
+
+  return (
+    <div
+      className="flex items-center gap-0.5 p-2 border-b flex-wrap"
+      style={{ backgroundColor: "#f9fafb", borderColor: "#e5e7eb" }}
+    >
+      <button
+        type="button"
+        onClick={() => onInsertTag("strong")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 font-bold"
+        style={{ color: textColor }}
+        title="Bold"
+      >
+        B
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("em")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 italic"
+        style={{ color: textColor }}
+        title="Italic"
+      >
+        I
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("underline")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 underline"
+        style={{ color: textColor }}
+        title="Underline"
+      >
+        U
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("strikeThrough")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 line-through"
+        style={{ color: textColor }}
+        title="Strikethrough"
+      >
+        S
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("code")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 font-mono text-xs"
+        style={{ color: textColor }}
+        title="Code"
+      >
+        {"</>"}
+      </button>
+
+      <div
+        className="w-px h-6 mx-1"
+        style={{ backgroundColor: textMuted + "40" }}
+      />
+
+      <button
+        type="button"
+        onClick={() => onInsertTag("h1")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 font-bold"
+        style={{ color: textColor }}
+        title="Heading 1"
+      >
+        H1
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("h2")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 font-bold"
+        style={{ color: textColor }}
+        title="Heading 2"
+      >
+        H2
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("h3")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200 font-semibold"
+        style={{ color: textColor }}
+        title="Heading 3"
+      >
+        H3
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("blockquote")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200"
+        style={{ color: textColor }}
+        title="Quote"
+      >
+        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
+        </svg>
+      </button>
+
+      <div
+        className="w-px h-6 mx-1"
+        style={{ backgroundColor: textMuted + "40" }}
+      />
+
+      <button
+        type="button"
+        onClick={() => onInsertTag("bullet")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200"
+        style={{ color: textColor }}
+        title="Bullet List"
+      >
+        <svg
+          className="w-4 h-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        onClick={() => onInsertTag("number")}
+        className="px-2 py-1 text-sm rounded hover:bg-gray-200"
+        style={{ color: textColor }}
+        title="Numbered List"
+      >
+        <svg
+          className="w-4 h-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" />
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+const EditorInner: React.FC<{
+  onChange: (blocks: any[]) => void;
+  disabled?: boolean;
+}> = ({ onChange, disabled }) => {
+  const editor = useEditor();
+
+  const handleInsertTag = useCallback(
+    (tag: string) => {
+      if (!editor) return;
+      console.log("Insert tag:", tag, "Editor available:", !!editor);
+    },
+    [editor],
+  );
+
+  return (
+    <>
+      <Toolbar onInsertTag={handleInsertTag} />
+      <PortableTextEditable
+        className="min-h-[200px] p-4 focus:outline-none"
+        style={{ backgroundColor: "white", color: "#333" }}
+        placeholder="Start typing..."
+        readOnly={disabled}
+      />
+    </>
+  );
+};
+
+export const EditorClient: React.FC<EditorClientProps> = ({
+  initialValue,
+  onChange,
+  disabled,
+  theme,
+}) => {
+  // Sanitize on mount — never pass raw/malformed data to EditorProvider
+  const [value, setValue] = useState(() => sanitizeInitialValue(initialValue));
+
+  const handleChange = useCallback(
+    (newValue: any) => {
+      setValue(newValue);
+      onChange(newValue);
+    },
+    [onChange],
+  );
+
+  return (
+    <EditorProvider
+      initialConfig={{
+        schemaDefinition: schemaDefinition as any,
+        initialValue: value,
+      }}
+    >
+      <EventListenerPlugin
+        on={(event: any) => {
+          if (event.type === "mutation" && event.value) {
+            handleChange(event.value);
+          }
+        }}
+      />
+      <EditorInner onChange={handleChange} disabled={disabled} />
+    </EditorProvider>
+  );
+};
+
+export default EditorClient;

package/src/components/fields/FileField.tsx

@@ -0,0 +1,390 @@
+import React, { useState, useEffect, useRef } from "react";
+
+interface FileFieldProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+}
+
+interface MediaItem {
+  id: string;
+  filename: string;
+  url: string;
+  mimeType: string;
+  size?: number;
+  title?: string;
+  folder?: string;
+}
+
+interface MediaFolder {
+  name: string;
+  path: string;
+}
+
+export function FileField({
+  field,
+  value,
+  onChange,
+  disabled,
+}: FileFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
+  const [folders, setFolders] = useState<MediaFolder[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<string>("");
+  const [mediaLoading, setMediaLoading] = useState(false);
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const [urlValue, setUrlValue] = useState("");
+  const [urlError, setUrlError] = useState("");
+
+  const fieldLabel = field?.label || field?.name || "File";
+  const maxCount = field.maxCount || 1;
+  const isMultiple = maxCount > 1;
+  const currentValue = Array.isArray(value) ? value : value ? [value] : [];
+  const canAddMore = currentValue.length < maxCount;
+
+  useEffect(() => {
+    if (showPicker) {
+      loadFolders();
+      loadMedia();
+    }
+  }, [showPicker, selectedFolder]);
+
+  const loadFolders = async () => {
+    try {
+      const resp = await fetch("/api/media/folders?t=" + Date.now(), {
+        credentials: "include",
+      });
+      const result = await resp.json();
+      setFolders(result.folders || []);
+    } catch {
+      setFolders([]);
+    }
+  };
+
+  const loadMedia = async () => {
+    setMediaLoading(true);
+    try {
+      let url = `/api/media?limit=60&sortBy=createdAt&sortDir=desc&t=${Date.now()}&mimeType=application,video,audio`;
+      if (selectedFolder) {
+        url += "&folder=" + encodeURIComponent(selectedFolder);
+      }
+      const resp = await fetch(url, { credentials: "include" });
+      const result = await resp.json();
+      setMediaItems(result.docs || []);
+    } catch {
+      setMediaItems([]);
+    } finally {
+      setMediaLoading(false);
+    }
+  };
+
+  const uploadFile = async (file: File) => {
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      if (selectedFolder) {
+        formData.append("folder", selectedFolder);
+      }
+      const resp = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+        credentials: "include",
+      });
+      if (!resp.ok) throw new Error("Upload failed");
+      const result = await resp.json();
+      const newItem = {
+        id: result.id,
+        filename: result.filename,
+        url: result.url,
+        mimeType: result.mimeType,
+        size: result.size,
+      };
+      if (isMultiple) {
+        onChange([...currentValue, newItem]);
+      } else {
+        onChange(newItem);
+      }
+    } catch (err) {
+      console.error("Upload failed:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const addByUrl = async () => {
+    if (!urlValue.trim()) return;
+    setUrlError("");
+    try {
+      new URL(urlValue);
+    } catch {
+      setUrlError("Invalid URL");
+      return;
+    }
+    const newItem = {
+      id: `url-${Date.now()}`,
+      filename: urlValue.split("/").pop() || "file",
+      url: urlValue,
+      mimeType: "application/octet-stream",
+    };
+    if (isMultiple) {
+      onChange([...currentValue, newItem]);
+    } else {
+      onChange(newItem);
+    }
+    setUrlValue("");
+    setShowUrlInput(false);
+  };
+
+  const removeItem = (index: number) => {
+    const newItems = [...currentValue];
+    newItems.splice(index, 1);
+    onChange(newItems);
+  };
+
+  const formatFileSize = (bytes?: number) => {
+    if (!bytes) return "";
+    const kb = bytes / 1024;
+    if (kb < 1024) return `${kb.toFixed(1)} KB`;
+    const mb = kb / 1024;
+    return `${mb.toFixed(1)} MB`;
+  };
+
+  const getFileIcon = (mimeType?: string) => {
+    if (!mimeType) return "📄";
+    if (mimeType.startsWith("video/")) return "🎬";
+    if (mimeType.startsWith("audio/")) return "🎵";
+    if (mimeType.includes("pdf")) return "📕";
+    if (mimeType.includes("word") || mimeType.includes("document")) return "📝";
+    if (mimeType.includes("spreadsheet") || mimeType.includes("excel"))
+      return "📊";
+    if (mimeType.includes("presentation") || mimeType.includes("powerpoint"))
+      return "📽️";
+    if (mimeType.includes("zip") || mimeType.includes("archive")) return "📦";
+    return "📄";
+  };
+
+  const renderPreview = (item: any, index: number) => (
+    <div
+      key={index}
+      className="flex items-center gap-3 p-3 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-surface)]"
+    >
+      <div className="text-xl">{getFileIcon(item.mimeType)}</div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+          {item.filename || item.title || "Untitled"}
+        </div>
+        {item.size && (
+          <div className="text-xs text-[var(--kyro-text-muted)]">
+            {formatFileSize(item.size)}
+          </div>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => removeItem(index)}
+        className="text-[var(--kyro-text-muted)] hover:text-red-500 p-1"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className="space-y-3">
+      {currentValue.length > 0 && (
+        <div className="space-y-2">
+          {currentValue.map((item, index) => renderPreview(item, index))}
+        </div>
+      )}
+
+      {canAddMore && (
+        <>
+          <div className="flex gap-2 flex-wrap">
+            <button
+              type="button"
+              onClick={() => inputRef.current?.click()}
+              disabled={disabled || uploading}
+              className="px-3 py-1.5 text-xs rounded border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-sidebar-active)] transition-colors disabled:opacity-50"
+            >
+              {uploading ? "Uploading..." : `+ Upload ${fieldLabel}`}
+            </button>
+            <input
+              ref={inputRef}
+              type="file"
+              onChange={handleFileSelect}
+              className="hidden"
+              accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,.mp4,.mov,.avi,.mp3,.wav"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPicker(true)}
+              disabled={disabled}
+              className="px-3 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-sidebar-active)] transition-colors"
+            >
+              Library
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowUrlInput(!showUrlInput)}
+              disabled={disabled}
+              className="px-3 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-sidebar-active)] transition-colors"
+            >
+              URL
+            </button>
+          </div>
+
+          {showUrlInput && (
+            <div className="flex gap-2 items-center">
+              <input
+                ref={urlInputRef}
+                type="url"
+                placeholder="https://example.com/file.pdf"
+                value={urlValue}
+                onChange={(e) => {
+                  setUrlValue(e.target.value);
+                  setUrlError("");
+                }}
+                onKeyDown={(e) => e.key === "Enter" && addByUrl()}
+                className="flex-1 px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)]"
+              />
+              <button
+                type="button"
+                onClick={addByUrl}
+                className="px-3 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded text-sm font-medium"
+              >
+                Add
+              </button>
+              {urlError && (
+                <span className="text-xs text-red-500">{urlError}</span>
+              )}
+            </div>
+          )}
+
+          {showPicker && (
+            <div className="border border-[var(--kyro-border)] rounded-lg p-4 space-y-3 bg-[var(--kyro-surface)]">
+              <div className="flex items-center justify-between">
+                <h3 className="text-sm font-medium">Select File</h3>
+                <button
+                  type="button"
+                  onClick={() => setShowPicker(false)}
+                  className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
+                >
+                  Close
+                </button>
+              </div>
+
+              {folders.length > 0 && (
+                <div className="flex gap-1 flex-wrap">
+                  <button
+                    type="button"
+                    onClick={() => setSelectedFolder("")}
+                    className={`px-2 py-1 text-xs rounded ${
+                      !selectedFolder
+                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                        : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                    }`}
+                  >
+                    All
+                  </button>
+                  {folders.map((folder) => (
+                    <button
+                      key={folder.path}
+                      type="button"
+                      onClick={() => setSelectedFolder(folder.path)}
+                      className={`px-2 py-1 text-xs rounded ${
+                        selectedFolder === folder.path
+                          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                          : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
+                      }`}
+                    >
+                      {folder.name}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {mediaLoading ? (
+                <div className="text-center py-4 text-[var(--kyro-text-muted)]">
+                  Loading...
+                </div>
+              ) : (
+                <div className="grid grid-cols-4 gap-2 max-h-48 overflow-y-auto">
+                  {mediaItems.map((item) => {
+                    const isSelected = currentValue.some(
+                      (v) => v.url === item.url,
+                    );
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => {
+                          if (isMultiple) {
+                            onChange([...currentValue, item]);
+                          } else {
+                            onChange(item);
+                          }
+                          setShowPicker(false);
+                        }}
+                        disabled={isSelected}
+                        className={`p-2 rounded border text-left hover:border-[var(--kyro-sidebar-active)] transition-colors ${
+                          isSelected
+                            ? "border-[var(--kyro-sidebar-active)] bg-[var(--kyro-sidebar-active)]/10"
+                            : "border-[var(--kyro-border)]"
+                        }`}
+                      >
+                        <div className="text-lg mb-1 text-center">
+                          {getFileIcon(item.mimeType)}
+                        </div>
+                        <div className="text-[10px] text-[var(--kyro-text-muted)] truncate">
+                          {item.filename}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+
+              {mediaItems.length === 0 && !mediaLoading && (
+                <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm">
+                  No files found
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}