@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/blocks/VStackBlock.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import {
-  useBlockById,
-  useBlockActions,
-} from "../fields/extensions/blocksStore";
-import { ChildrenField } from "../fields/ChildrenField";
-import { BlockWrapper } from "./BlockWrapper";
-
-export const VStackBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
-  block,
-  index,
-}) => {
-  const blockData = useBlockById(block.id);
-  const { updateBlock } = useBlockActions();
-
-  const data = blockData?.data ?? block.data ?? {};
-  const children = blockData?.children ?? block.children ?? [];
-
-  return (
-    <BlockWrapper id={block.id} type="vstack" label="Stack">
-      <ChildrenField
-        blockId={block.id}
-        children={children}
-        onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
-        compact
-      />
-    </BlockWrapper>
-  );
-};

package/src/components/fields/EditorClient.tsx

@@ -1,535 +0,0 @@
-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 "../ui/icons";
-
-interface EditorClientProps {
-  initialValue: Record<string, unknown>[];
-  onChange: (blocks: Record<string, unknown>[]) => void;
-  disabled?: boolean;
-}
-
-function sanitizeInitialValue(value: unknown): Record<string, unknown>[] {
-  if (!value || !Array.isArray(value)) return [];
-  return (value as Record<string, unknown>[]).filter((block) => {
-    if (!block || typeof block !== "object") return false;
-    if (!("_type" in block)) return false;
-    if ((block as { _type?: string })._type === "block" && Array.isArray((block as { children?: unknown[] }).children)) {
-      (block as { children: Record<string, unknown>[] }).children = (block.children as Record<string, unknown>[]).map((child) => ({
-        ...child,
-        _type: (child as { _type?: string })._type || "span",
-        text: typeof (child as { text?: unknown }).text === "string" ? child.text : "",
-      }));
-    }
-    return true;
-  });
-}
-
-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: "Normal" },
-    { name: "h1", title: "H1" },
-    { name: "h2", title: "H2" },
-    { name: "h3", title: "H3" },
-    { name: "blockquote", title: "Quote" },
-  ],
-  lists: [
-    { name: "bullet", title: "Bullet" },
-    { name: "number", title: "Number" },
-  ],
-  annotations: [
-    {
-      name: "link",
-      title: "Link",
-      fields: [{ name: "href", type: "string", title: "URL" }],
-    },
-  ],
-  inlineObjects: [],
-  blockObjects: [],
-});
-
-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 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 string[],
-          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
-      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"
-    >
-      <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>
-  );
-};
-
-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";
-
-  return (
-    <div className="relative">
-      <select
-        value={activeStyle}
-        onChange={(e) => {
-          send({ type: "toggle", style: e.target.value as string });
-          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)]"
-      >
-        {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>
-  );
-};
-
-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"
-      >
-        <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"
-      >
-        <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>
-  );
-};
-
-const EditorInner: React.FC<{
-  onChange: (blocks: Record<string, unknown>[]) => void;
-  disabled?: boolean;
-}> = ({ onChange, disabled }) => {
-  return (
-    <>
-      <Toolbar />
-      <PortableTextEditable
-        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}
-      />
-    </>
-  );
-};
-
-export const EditorClient: React.FC<EditorClientProps> = ({
-  initialValue,
-  onChange,
-  disabled,
-}) => {
-  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: Record<string, unknown>[]) => {
-       setValue(newValue);
-       onChange(newValue);
-     },
-     [onChange],
-   );
-
-  return (
-    <EditorProvider
-      key={JSON.stringify(value)}
-      initialConfig={{
-        schemaDefinition: schemaDefinition as Record<string, unknown>,
-        initialValue: value,
-      }}
-    >
-      <EventListenerPlugin
-        on={(event: Record<string, unknown>) => {
-          if (event.type === "mutation" && event.value) {
-            handleChange(event.value as Record<string, unknown>);
-          }
-        }}
-      />
-<EditorInner onChange={handleChange} disabled={disabled} />
-  </EditorProvider>
-);
-};