@kyro-cms/admin 0.1.7 → 0.1.9

package/src/components/fields/EditorClient.tsx

@@ -1,30 +1,58 @@
-import React, { useState, useCallback } from "react";
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
 import {
   EditorProvider,
   PortableTextEditable,
   useEditor,
+  type RenderStyleFunction,
+  type RenderDecoratorFunction,
+  type RenderBlockFunction,
+  type RenderListItemFunction,
+  type RenderAnnotationFunction,
 } from "@portabletext/editor";
 import { defineSchema } from "@portabletext/schema";
 import { EventListenerPlugin } from "@portabletext/editor/plugins";
+import {
+  useToolbarSchema,
+  useDecoratorButton,
+  useListButton,
+  useStyleSelector,
+  useHistoryButtons,
+  useAnnotationButton,
+  useAnnotationPopover,
+} from "@portabletext/toolbar";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Link,
+  List,
+  ListOrdered,
+  Undo,
+  Redo,
+  ChevronDown,
+  X,
+  ExternalLink,
+} from "lucide-react";
 
 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,
@@ -36,7 +64,6 @@ function sanitizeInitialValue(value: any): any[] {
   });
 }
 
-// Define basic portable text schema
 const schemaDefinition = defineSchema({
   decorators: [
     { name: "strong", title: "Bold" },
@@ -46,161 +73,397 @@ const schemaDefinition = defineSchema({
     { 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: "normal", title: "Normal" },
+    { name: "h1", title: "H1" },
+    { name: "h2", title: "H2" },
+    { name: "h3", title: "H3" },
     { name: "blockquote", title: "Quote" },
   ],
   lists: [
-    { name: "bullet", title: "Bullet List" },
-    { name: "number", title: "Numbered List" },
+    { name: "bullet", title: "Bullet" },
+    { name: "number", title: "Number" },
+  ],
+  annotations: [
+    {
+      name: "link",
+      title: "Link",
+      fields: [{ name: "href", type: "string", title: "URL" }],
+    },
   ],
-  annotations: [],
   inlineObjects: [],
   blockObjects: [],
 });
 
-const Toolbar: React.FC<{ onInsertTag: (tag: string) => void }> = ({
-  onInsertTag,
+const renderStyle: RenderStyleFunction = (props) => {
+  if (props.schemaType.value === "h1") {
+    return <h1 className="text-2xl font-bold mb-2">{props.children}</h1>;
+  }
+  if (props.schemaType.value === "h2") {
+    return <h2 className="text-xl font-bold mb-2">{props.children}</h2>;
+  }
+  if (props.schemaType.value === "h3") {
+    return <h3 className="text-lg font-semibold mb-1">{props.children}</h3>;
+  }
+  if (props.schemaType.value === "blockquote") {
+    return (
+      <blockquote className="border-l-2 border-[var(--kyro-primary)] pl-4 italic text-[var(--kyro-text-muted)] my-2">
+        {props.children}
+      </blockquote>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+const renderDecorator: RenderDecoratorFunction = (props) => {
+  if (props.value === "strong") {
+    return <strong>{props.children}</strong>;
+  }
+  if (props.value === "em") {
+    return <em>{props.children}</em>;
+  }
+  if (props.value === "underline") {
+    return <u>{props.children}</u>;
+  }
+  if (props.value === "strikeThrough") {
+    return <s>{props.children}</s>;
+  }
+  if (props.value === "code") {
+    return (
+      <code className="px-1 py-0.5 rounded bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] text-sm font-mono">
+        {props.children}
+      </code>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+const renderBlock: RenderBlockFunction = (props) => {
+  return <div>{props.children}</div>;
+};
+
+const renderListItem: RenderListItemFunction = (props) => {
+  if (props.schemaType.value === "bullet") {
+    return <li className="list-disc ml-4">{props.children}</li>;
+  }
+  if (props.schemaType.value === "number") {
+    return <li className="list-decimal ml-4">{props.children}</li>;
+  }
+  return <li>{props.children}</li>;
+};
+
+const renderAnnotation: RenderAnnotationFunction = (props) => {
+  if (props.schemaType.name === "link") {
+    return (
+      <a
+        href={props.value.href as string}
+        className="text-[var(--kyro-primary)] underline hover:opacity-80"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {props.children}
+      </a>
+    );
+  }
+  return <>{props.children}</>;
+};
+
+function FocusRestoringButton({
+  onClick,
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const editor = useEditor();
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onClick?.(e);
+        editor.send({ type: "focus" });
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+const decoratorIcons: Record<
+  string,
+  React.ComponentType<{ className?: string }>
+> = {
+  strong: Bold,
+  em: Italic,
+  underline: Underline,
+  strikeThrough: Strikethrough,
+  code: Code,
+};
+
+const DecoratorButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
+}) => {
+  const schema = useToolbarSchema({});
+  const decoratorSchema = schema.decorators?.find((d) => d.name === name);
+  if (!decoratorSchema) return null;
+  const { snapshot, send } = useDecoratorButton({
+    schemaType: decoratorSchema,
+  });
+  const Icon = decoratorIcons[name];
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() => send({ type: "toggle" })}
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const ListButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
+}) => {
+  const schema = useToolbarSchema({});
+  const listSchema = schema.lists?.find((l) => l.name === name);
+  if (!listSchema) return null;
+  const { snapshot, send } = useListButton({ schemaType: listSchema });
+  const Icon = name === "bullet" ? List : ListOrdered;
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() => send({ type: "toggle" })}
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const AnnotationButton: React.FC<{ name: string; title: string }> = ({
+  name,
+  title,
 }) => {
-  const textColor = "#374151";
-  const textMuted = "#9ca3af";
+  const schema = useToolbarSchema({});
+  const annotationSchema = schema.annotations?.find((a) => a.name === name);
+  if (!annotationSchema) return null;
+  const { snapshot, send } = useAnnotationButton({
+    schemaType: annotationSchema,
+  });
+  const isActive =
+    snapshot.matches({ enabled: "active" }) ||
+    snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+  const isShowingDialog = snapshot.matches({
+    enabled: { inactive: "showing dialog" },
+  });
+
+  return (
+    <FocusRestoringButton
+      disabled={!isEnabled}
+      data-state={isActive ? "on" : "off"}
+      onClick={() =>
+        send({
+          type: isShowingDialog ? "close dialog" : "open dialog",
+        })
+      }
+      title={title}
+      className="p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]"
+    >
+      {name === "link" && <Link className="w-4 h-4" />}
+    </FocusRestoringButton>
+  );
+};
+
+const LinkDialog: React.FC = () => {
+  const schema = useToolbarSchema({});
+  const popover = useAnnotationPopover({
+    schemaTypes: schema.annotations || [],
+  });
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (popover.snapshot.matches({ enabled: "active" }) && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [popover.snapshot]);
+
+  if (!popover.snapshot.matches({ enabled: "active" })) return null;
+
+  const activeAnnotations = popover.snapshot.context.annotations || [];
+  const activeLink = activeAnnotations.find(
+    (a) => a.schemaType.name === "link",
+  );
+  const currentHref = activeLink?.value?.href as string | undefined;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const href = formData.get("href") as string;
+
+    if (activeLink) {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: activeLink.at,
+          props: { href: href.trim() },
+        });
+      } else {
+        popover.send({
+          type: "remove",
+          schemaType: activeLink.schemaType,
+        });
+      }
+    } else {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: [] as any,
+          props: { href: href.trim() },
+        });
+      }
+    }
+    popover.send({ type: "close" });
+  };
+
+  const handleRemove = () => {
+    if (activeLink) {
+      popover.send({
+        type: "remove",
+        schemaType: activeLink.schemaType,
+      });
+    }
+    popover.send({ type: "close" });
+  };
 
   return (
     <div
-      className="flex items-center gap-0.5 p-2 border-b flex-wrap"
-      style={{ backgroundColor: "#f9fafb", borderColor: "#e5e7eb" }}
+      ref={dialogRef}
+      className="absolute top-full left-0 z-50 mt-1 w-72 p-3 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-bg-primary)] shadow-lg"
     >
-      <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="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+          Link
+        </span>
+        <button
+          type="button"
+          onClick={() => popover.send({ type: "close" })}
+          className="p-1 rounded hover:bg-[var(--kyro-surface-accent)]"
+        >
+          <X className="w-3.5 h-3.5 text-[var(--kyro-text-muted)]" />
+        </button>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <div className="flex gap-1.5">
+          <input
+            ref={inputRef}
+            name="href"
+            type="url"
+            defaultValue={currentHref || "https://"}
+            placeholder="Enter URL..."
+            className="flex-1 px-2.5 py-1.5 text-sm rounded border border-[var(--kyro-border)] bg-transparent text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
+          />
+          <button
+            type="submit"
+            className="px-2.5 py-1.5 text-sm rounded bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+          >
+            {activeLink ? "Update" : "Add"}
+          </button>
+        </div>
+        {activeLink && (
+          <button
+            type="button"
+            onClick={handleRemove}
+            className="w-full text-xs text-[var(--kyro-error)] hover:opacity-80 flex items-center justify-center gap-1 py-1"
+          >
+            <ExternalLink className="w-3 h-3" />
+            Remove link
+          </button>
+        )}
+      </form>
+    </div>
+  );
+};
 
-      <div
-        className="w-px h-6 mx-1"
-        style={{ backgroundColor: textMuted + "40" }}
-      />
+const StyleSelector: React.FC = () => {
+  const schema = useToolbarSchema({});
+  const editor = useEditor();
+  const { snapshot, send } = useStyleSelector({
+    schemaTypes: schema.styles || [],
+  });
+  if (!snapshot.matches("enabled")) return null;
+  const activeStyle = snapshot.context.activeStyle || "normal";
 
-      <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"
+  return (
+    <div className="relative">
+      <select
+        value={activeStyle}
+        onChange={(e) => {
+          send({ type: "toggle", style: e.target.value as any });
+          editor.send({ type: "focus" });
+        }}
+        className="appearance-none bg-transparent text-sm pr-6 pl-2 py-1 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
       >
-        <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" }}
-      />
+        {schema.styles?.map((s) => (
+          <option key={s.name} value={s.name}>
+            {s.title}
+          </option>
+        ))}
+      </select>
+      <ChevronDown className="w-3 h-3 absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]" />
+    </div>
+  );
+};
 
-      <button
-        type="button"
-        onClick={() => onInsertTag("bullet")}
-        className="px-2 py-1 text-sm rounded hover:bg-gray-200"
-        style={{ color: textColor }}
-        title="Bullet List"
+const Toolbar: React.FC = () => {
+  const { snapshot: historySnapshot, send: historySend } = useHistoryButtons();
+  return (
+    <div className="relative flex items-center gap-0.5 p-1.5 border-b border-[var(--kyro-border)]">
+      <FocusRestoringButton
+        disabled={!historySnapshot.matches("enabled")}
+        onClick={() => historySend({ type: "history.undo" })}
+        title="Undo"
+        className="p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30"
       >
-        <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"
+        <Undo className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+      </FocusRestoringButton>
+      <FocusRestoringButton
+        disabled={!historySnapshot.matches("enabled")}
+        onClick={() => historySend({ type: "history.redo" })}
+        title="Redo"
+        className="p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30"
       >
-        <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>
+        <Redo className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
+      </FocusRestoringButton>
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <StyleSelector />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <DecoratorButton name="strong" title="Bold" />
+      <DecoratorButton name="em" title="Italic" />
+      <DecoratorButton name="underline" title="Underline" />
+      <DecoratorButton name="strikeThrough" title="Strikethrough" />
+      <DecoratorButton name="code" title="Code" />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <AnnotationButton name="link" title="Link" />
+      <div className="w-px h-5 bg-[var(--kyro-border)] mx-1" />
+      <ListButton name="bullet" title="Bullet List" />
+      <ListButton name="number" title="Numbered List" />
+      <LinkDialog />
     </div>
   );
 };
@@ -209,24 +472,18 @@ 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} />
+      <Toolbar />
       <PortableTextEditable
-        className="min-h-[200px] p-4 focus:outline-none"
-        style={{ backgroundColor: "white", color: "#333" }}
+        className="min-h-[200px] p-4 focus:outline-none text-[var(--kyro-text-primary)]"
         placeholder="Start typing..."
         readOnly={disabled}
+        renderStyle={renderStyle}
+        renderDecorator={renderDecorator}
+        renderBlock={renderBlock}
+        renderListItem={renderListItem}
+        renderAnnotation={renderAnnotation}
       />
     </>
   );
@@ -236,10 +493,18 @@ 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 prevInitialValueRef = useRef(initialValue);
+
+  useEffect(() => {
+    const sanitized = sanitizeInitialValue(initialValue);
+    const prevSanitized = sanitizeInitialValue(prevInitialValueRef.current);
+    if (JSON.stringify(sanitized) !== JSON.stringify(prevSanitized)) {
+      setValue(sanitized);
+      prevInitialValueRef.current = initialValue;
+    }
+  }, [initialValue]);
 
   const handleChange = useCallback(
     (newValue: any) => {
@@ -251,6 +516,7 @@ export const EditorClient: React.FC<EditorClientProps> = ({
 
   return (
     <EditorProvider
+      key={JSON.stringify(value)}
       initialConfig={{
         schemaDefinition: schemaDefinition as any,
         initialValue: value,