canopycms 0.0.0

package/src/editor/editor-utils.ts

@@ -0,0 +1,303 @@
+import type { CollectionItem, ListEntriesResponse } from '../api/entries'
+import type { ContentFormat, EntrySchema, FlatSchemaItem } from '../config'
+import type { FormValue } from './FormRenderer'
+import type { EditorEntry, EditorCollection } from './Editor'
+import type { TreeNodeData } from '@mantine/core'
+// Import directly from normalize to avoid pulling in server-only branch.ts
+import { normalizeCollectionPath } from '../paths/normalize'
+export { normalizeCollectionPath }
+
+export interface PreviewContext {
+  branchName?: string
+  previewBaseByCollection?: Record<string, string>
+}
+
+export const encodeSlug = (value?: string): string =>
+  (value ?? '')
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/')
+
+export const buildPreviewSrc = (
+  entry: {
+    collectionPath?: string
+    collectionName?: string
+    slug?: string
+    itemType?: string
+    previewSrc?: string
+  },
+  { branchName, previewBaseByCollection, contentRoot }: PreviewContext & { contentRoot?: string },
+): string => {
+  if (entry.previewSrc) return entry.previewSrc
+  const appendBranch = (url: string) => {
+    if (!branchName) return url
+    const separator = url.includes('?') ? '&' : '?'
+    return `${url}${separator}branch=${encodeURIComponent(branchName)}`
+  }
+
+  // Root-level entries have collectionPath === contentRoot (e.g., 'content')
+  const isRootEntry = contentRoot && entry.collectionPath === contentRoot
+
+  if (isRootEntry) {
+    // Check for custom preview URL in previewBaseByCollection
+    const customPreview = previewBaseByCollection?.[`${contentRoot}/${entry.slug}`]
+    if (customPreview) {
+      return appendBranch(customPreview)
+    }
+    // Default root entries to root path
+    return appendBranch('/')
+  }
+
+  const base =
+    (entry.collectionPath && previewBaseByCollection?.[entry.collectionPath]) ??
+    (entry.collectionName && previewBaseByCollection?.[entry.collectionName])
+  if (!base) {
+    // Build URL from collection path + slug
+    const collectionPath = entry.collectionPath ? normalizeCollectionPath(entry.collectionPath) : ''
+    const encoded = encodeSlug(entry.slug)
+    const segments = [collectionPath, encoded].filter(Boolean)
+    const url = segments.length > 0 ? `/${segments.join('/')}` : '/'
+    return appendBranch(url)
+  }
+  const trimmed = base.endsWith('/') ? base.slice(0, -1) : base
+  const encoded = encodeSlug(entry.slug)
+  const url = encoded ? `${trimmed}/${encoded}` : trimmed || '/'
+  return appendBranch(url)
+}
+
+export const normalizeContentPayload = (raw: unknown): FormValue => {
+  const candidate = raw as Record<string, unknown> | undefined
+  const data = (candidate?.data as Record<string, unknown> | undefined) ?? candidate
+  if (data && typeof data === 'object' && 'format' in data && 'data' in data) {
+    const format = data.format as ContentFormat
+    const payloadData = (data.data as Record<string, unknown>) ?? {}
+    if (format === 'json') return payloadData
+    return {
+      ...payloadData,
+      body:
+        typeof (data as Record<string, unknown>).body === 'string'
+          ? (data as Record<string, unknown>).body
+          : '',
+    }
+  }
+  return (data as FormValue) ?? {}
+}
+
+export const buildWritePayload = (
+  entry: { collectionPath?: string; slug?: string; format?: ContentFormat },
+  value: FormValue,
+) => {
+  if (!entry.format) return value
+  if (entry.format === 'json') {
+    return {
+      format: 'json' as const,
+      data: value,
+    }
+  }
+  const { body, ...rest } = value
+  return {
+    format: entry.format,
+    data: rest,
+    body: typeof body === 'string' ? body : '',
+  }
+}
+
+interface BuildEntriesFromListParams {
+  response: ListEntriesResponse
+  branchName: string
+  resolvePreviewSrc: (
+    entry: Pick<CollectionItem, 'collectionPath' | 'collectionName' | 'slug' | 'entryType'>,
+  ) => string
+  contentRoot: string
+  flatSchema: FlatSchemaItem[]
+}
+
+export const buildEntriesFromListResponse = ({
+  response,
+  branchName,
+  resolvePreviewSrc,
+  contentRoot,
+  flatSchema,
+}: BuildEntriesFromListParams): EditorEntry[] => {
+  return response.entries.map((entry) => {
+    // Resolve schema from flatSchema using parentPath + name
+    let schema: EntrySchema = []
+    if (entry.collectionPath && entry.entryType) {
+      const entryTypeItem = flatSchema.find(
+        (item) =>
+          item.type === 'entry-type' &&
+          item.parentPath === entry.collectionPath &&
+          item.name === entry.entryType,
+      )
+      if (entryTypeItem && entryTypeItem.type === 'entry-type') {
+        schema = entryTypeItem.schema
+      }
+    }
+
+    const isRootEntry = entry.collectionPath === contentRoot
+    const apiPath = isRootEntry
+      ? `/api/canopycms/${branchName}/content/${encodeURIComponent(entry.slug)}`
+      : `/api/canopycms/${branchName}/content/${encodeURIComponent(entry.collectionPath)}/${encodeURIComponent(entry.slug)}`
+
+    return {
+      path: entry.logicalPath,
+      contentId: entry.contentId,
+      label: entry.title || entry.slug || entry.collectionName || entry.collectionPath,
+      status: entry.exists === false ? 'missing' : (entry.entryType ?? 'entry'),
+      schema: schema,
+      apiPath,
+      previewSrc: resolvePreviewSrc(entry),
+      collectionPath: entry.collectionPath,
+      collectionName: entry.collectionName,
+      slug: entry.slug,
+      format: entry.format,
+      type: 'entry' as const,
+      canEdit: entry.canEdit,
+    }
+  })
+}
+
+/**
+ * Builds a map of collection IDs to their labels for breadcrumb display.
+ * Recursively walks through nested collections to build a flat map.
+ *
+ * @param collections - The collection tree structure
+ * @returns A Map where keys are collection IDs (paths) and values are labels
+ */
+export const buildCollectionLabels = (collections?: EditorCollection[]): Map<string, string> => {
+  const map = new Map<string, string>()
+  if (!collections) return map
+
+  const walk = (nodes: EditorCollection[]) => {
+    for (const c of nodes) {
+      map.set(c.path, c.label ?? c.name)
+      if (c.children) {
+        walk(c.children)
+      }
+    }
+  }
+  walk(collections)
+  return map
+}
+
+/**
+ * Builds breadcrumb segments for an entry based on its collection hierarchy.
+ *
+ * @param currentEntry - The entry to build breadcrumbs for (or undefined for root)
+ * @param collectionLabels - Map of collection IDs to labels
+ * @returns Array of breadcrumb segment strings, starting with 'All Files'
+ *
+ * @example
+ * ```ts
+ * // Entry in nested collection
+ * const entry = { collectionPath: 'content/docs/guides', slug: 'config' }
+ * const labels = new Map([
+ *   ['content', 'Content'],
+ *   ['content/docs', 'Documentation'],
+ *   ['content/docs/guides', 'Guides']
+ * ])
+ * buildBreadcrumbSegments(entry, labels)
+ * // Returns: ['All Files', 'Documentation', 'Guides']
+ * ```
+ */
+export const buildBreadcrumbSegments = (
+  currentEntry: EditorEntry | undefined,
+  collectionLabels: Map<string, string>,
+): string[] => {
+  if (!currentEntry) return ['All Files']
+  const segments = ['All Files']
+
+  // Show collection hierarchy for entries that belong to a collection
+  if (currentEntry.collectionPath) {
+    // Split the collectionPath into path parts and build cumulative paths
+    // e.g., "content/documentation/guides" -> ["content/documentation", "content/documentation/guides"]
+    const parts = currentEntry.collectionPath.split('/').filter(Boolean)
+    for (let i = 1; i < parts.length; i++) {
+      const pathUpToHere = parts.slice(0, i + 1).join('/')
+      const label = collectionLabels.get(pathUpToHere)
+      if (label) {
+        segments.push(label)
+      }
+    }
+  }
+
+  // Add slug path segments (for nested slugs like "folder/file")
+  const slugSegments = (currentEntry.slug ?? '').split('/').filter(Boolean)
+  if (slugSegments.length > 1) {
+    segments.push(...slugSegments.slice(0, -1))
+  }
+
+  return segments
+}
+
+/**
+ * Calculates which collection nodes need to be expanded to show the path to a specific entry.
+ * Recursively walks the tree to find the target entry and marks all ancestor collections as expanded.
+ *
+ * @param entryPath - The entry path to find (e.g., "blog/my-post")
+ * @param treeData - The tree data structure from Mantine Tree
+ * @returns Record<string, boolean> - Expanded state object where keys are collection node values
+ *
+ * @example
+ * ```ts
+ * const treeData = [
+ *   {
+ *     value: 'collection:blog',
+ *     children: [
+ *       { value: 'blog/post-1' },
+ *       {
+ *         value: 'collection:blog/featured',
+ *         children: [{ value: 'blog/featured/my-post' }]
+ *       }
+ *     ]
+ *   }
+ * ]
+ * calculatePathToEntry('blog/featured/my-post', treeData)
+ * // Returns: { 'collection:blog': true, 'collection:blog/featured': true }
+ * ```
+ */
+export const calculatePathToEntry = (
+  entryPath: string | undefined,
+  treeData: TreeNodeData[],
+): Record<string, boolean> => {
+  if (!entryPath) return {}
+
+  const pathToExpand: Record<string, boolean> = {}
+
+  /**
+   * Recursive function to find entry and mark parent collections as expanded.
+   * @param nodes - Current level of tree nodes to search
+   * @param ancestors - Accumulated ancestor node values (collection IDs) from root to current position
+   * @returns true if the target entry was found in this subtree
+   */
+  const findAndMarkPath = (nodes: TreeNodeData[], ancestors: string[]): boolean => {
+    for (const node of nodes) {
+      // Found the target entry
+      if (node.value === entryPath) {
+        // Mark all ancestors as expanded
+        for (const ancestor of ancestors) {
+          pathToExpand[ancestor] = true
+        }
+        return true
+      }
+
+      // Search children recursively if they exist
+      if (node.children && node.children.length > 0) {
+        const currentPath = [...ancestors, node.value]
+        const found = findAndMarkPath(node.children, currentPath)
+
+        if (found) {
+          // Mark this node as expanded since the target was found in its subtree
+          pathToExpand[node.value] = true
+          return true
+        }
+      }
+    }
+
+    return false
+  }
+
+  findAndMarkPath(treeData, [])
+  return pathToExpand
+}

package/src/editor/env.ts

@@ -0,0 +1,4 @@
+/**
+ * Tiny helper to check for browser environment.
+ */
+export const isBrowser = (): boolean => typeof window !== 'undefined'

package/src/editor/fields/BlockField.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+import type { BlockConfig, FieldConfig } from '../../config'
+import type { BlockInstance } from './BlockField'
+import { BlockField } from './BlockField'
+import { MarkdownField } from './MarkdownField'
+import { TextField } from './TextField'
+
+const meta: Meta<typeof BlockField> = {
+  title: 'Editor/Fields/Block',
+  component: BlockField,
+}
+
+export default meta
+type Story = StoryObj<typeof BlockField>
+
+export const Default: Story = {
+  render: () => {
+    const templates: BlockConfig[] = [
+      {
+        name: 'hero',
+        label: 'Hero',
+        fields: [
+          { name: 'headline', type: 'string' },
+          { name: 'body', type: 'markdown' },
+        ],
+      },
+      {
+        name: 'cta',
+        label: 'CTA',
+        fields: [
+          { name: 'title', type: 'string' },
+          { name: 'ctaText', type: 'string' },
+        ],
+      },
+    ]
+    const [blocks, setBlocks] = useState<BlockInstance[]>([
+      { template: 'hero', value: { headline: 'Hello', body: 'Intro text' } },
+      {
+        template: 'cta',
+        value: { title: 'Call to action', ctaText: 'Click me' },
+      },
+    ])
+
+    const renderWidget = (field: FieldConfig, value: unknown, onChange: (v: unknown) => void) => {
+      if (field.type === 'string') {
+        return (
+          <TextField
+            label={field.label ?? field.name}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(v) => onChange(v)}
+          />
+        )
+      }
+      if (field.type === 'markdown' || field.type === 'mdx') {
+        return (
+          <MarkdownField
+            label={field.label ?? field.name}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(v) => onChange(v)}
+          />
+        )
+      }
+      return <div className="text-xs text-gray-500">Unsupported field: {field.type}</div>
+    }
+
+    return (
+      <BlockField
+        label="Blocks"
+        templates={templates}
+        value={blocks}
+        onChange={(next) => setBlocks(next)}
+        renderField={(field, val, update, _path) => renderWidget(field, val, update)}
+        path={['blocks']}
+      />
+    )
+  },
+}

package/src/editor/fields/BlockField.tsx

@@ -0,0 +1,267 @@
+import React, { useMemo, useState } from 'react'
+
+let blockKeyCounter = 0
+
+import { ActionIcon, Button, Group, Paper, Select, Stack, Text } from '@mantine/core'
+import {
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+import type { BlockConfig, FieldConfig } from '../../config'
+import { formatCanopyPath } from '../canopy-path'
+
+export interface BlockInstance {
+  template: string
+  value: Record<string, unknown>
+}
+
+export type RenderField = (
+  field: FieldConfig,
+  value: unknown,
+  onChange: (v: unknown) => void,
+  path: Array<string | number>,
+) => React.ReactNode
+
+export interface BlockFieldProps {
+  label?: string
+  templates: BlockConfig[]
+  value: BlockInstance[]
+  onChange: (blocks: BlockInstance[]) => void
+  renderField: RenderField
+  path: Array<string | number>
+  dataCanopyField?: string
+}
+
+const findTemplate = (templates: BlockConfig[], name: string) =>
+  templates.find((t) => t.name === name)
+
+const SortableBlock: React.FC<{
+  id: string
+  children: React.ReactNode
+}> = ({ id, children }) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.85 : 1,
+  }
+
+  return (
+    <Paper ref={setNodeRef} withBorder radius="md" p="sm" shadow="xs" style={style}>
+      <Group align="flex-start" gap="sm">
+        <ActionIcon
+          key="drag-handle"
+          variant="subtle"
+          aria-label="Drag to reorder"
+          {...attributes}
+          {...listeners}
+          style={{ cursor: 'grab' }}
+        >
+          ⇅
+        </ActionIcon>
+        <div key="content" style={{ flex: 1, minWidth: 0, width: '100%' }}>
+          {children}
+        </div>
+      </Group>
+    </Paper>
+  )
+}
+
+export const BlockField: React.FC<BlockFieldProps> = ({
+  label,
+  templates,
+  value,
+  onChange,
+  renderField,
+  path,
+  dataCanopyField,
+}) => {
+  const [itemKeys, setItemKeys] = useState<string[]>(() =>
+    value.map(() => `block-${blockKeyCounter++}`),
+  )
+  const [pendingTemplate, setPendingTemplate] = useState<string | null>(null)
+
+  // Sync itemKeys length with value length (adjust state during render)
+  if (value.length > itemKeys.length) {
+    const extras = Array.from(
+      { length: value.length - itemKeys.length },
+      () => `block-${blockKeyCounter++}`,
+    )
+    setItemKeys((prev) => [...prev, ...extras])
+  } else if (value.length < itemKeys.length) {
+    setItemKeys((prev) => prev.slice(0, value.length))
+  }
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  )
+
+  const addBlock = (templateName: string) => {
+    const template = findTemplate(templates, templateName)
+    if (!template) return
+    onChange([...value, { template: templateName, value: {} }])
+    setItemKeys((prev) => [
+      ...prev,
+      `block-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    ])
+  }
+
+  const moveBlock = (from: number, to: number) => {
+    if (from === to || from < 0 || to < 0 || from >= value.length || to >= value.length) return
+    onChange(arrayMove(value, from, to))
+    setItemKeys((prev) => arrayMove(prev, from, to))
+  }
+
+  const removeBlock = (index: number) => {
+    onChange(value.filter((_, idx) => idx !== index))
+    setItemKeys((prev) => prev.filter((_, idx) => idx !== index))
+  }
+
+  const updateBlockValue = (index: number, val: Record<string, unknown>) => {
+    const next = [...value]
+    next[index] = { ...next[index], value: val }
+    onChange(next)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+
+    const oldIndex = itemKeys.indexOf(String(active.id))
+    const newIndex = itemKeys.indexOf(String(over.id))
+    if (oldIndex === -1 || newIndex === -1) return
+    moveBlock(oldIndex, newIndex)
+  }
+
+  const selectableTemplates = useMemo(
+    () => templates.map((t) => ({ value: t.name, label: t.label ?? t.name })),
+    [templates],
+  )
+
+  return (
+    <Paper
+      withBorder
+      radius="md"
+      p="md"
+      bg="gray.0"
+      data-canopy-field={dataCanopyField ?? formatCanopyPath(path)}
+      shadow="xs"
+    >
+      <Stack gap="sm">
+        <Group justify="space-between">
+          <Text size="xs" fw={700} c="dimmed">
+            {label ?? 'Blocks'}
+          </Text>
+          <Select
+            aria-label="Add block"
+            placeholder="Add block..."
+            data={selectableTemplates}
+            value={pendingTemplate}
+            onChange={(next) => {
+              if (next) {
+                addBlock(next)
+              }
+              setPendingTemplate(null)
+            }}
+            allowDeselect
+            size="xs"
+            w={180}
+          />
+        </Group>
+
+        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+          <SortableContext items={itemKeys} strategy={verticalListSortingStrategy}>
+            <Stack gap="sm">
+              {value.map((block, idx) => {
+                const template = findTemplate(templates, block.template)
+                const currentPath = [...path, idx]
+
+                return (
+                  <SortableBlock key={itemKeys[idx]} id={itemKeys[idx]}>
+                    <Stack gap="xs">
+                      <Group justify="space-between" align="flex-start">
+                        <Text size="sm" fw={600}>
+                          {template?.label ?? block.template ?? 'Unknown block'}
+                        </Text>
+                        <Group gap={4}>
+                          <ActionIcon
+                            variant="light"
+                            aria-label="Move block up"
+                            disabled={idx === 0}
+                            onClick={() => moveBlock(idx, idx - 1)}
+                          >
+                            ↑
+                          </ActionIcon>
+                          <ActionIcon
+                            variant="light"
+                            aria-label="Move block down"
+                            disabled={idx === value.length - 1}
+                            onClick={() => moveBlock(idx, idx + 1)}
+                          >
+                            ↓
+                          </ActionIcon>
+                          <Button
+                            variant="subtle"
+                            color="red"
+                            size="xs"
+                            onClick={() => removeBlock(idx)}
+                          >
+                            Remove
+                          </Button>
+                        </Group>
+                      </Group>
+
+                      {template ? (
+                        <Stack gap="sm">
+                          {template.fields.map((f: FieldConfig) => (
+                            <React.Fragment key={f.name}>
+                              {renderField(
+                                f,
+                                block.value?.[f.name],
+                                (next) =>
+                                  updateBlockValue(idx, {
+                                    ...block.value,
+                                    [f.name]: next,
+                                  }),
+                                [...currentPath, f.name],
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </Stack>
+                      ) : (
+                        <Text size="xs" c="red">
+                          No template found for &quot;{block.template}&quot;
+                        </Text>
+                      )}
+                    </Stack>
+                  </SortableBlock>
+                )
+              })}
+            </Stack>
+          </SortableContext>
+        </DndContext>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default BlockField

package/src/editor/fields/CodeField.tsx

@@ -0,0 +1,41 @@
+import React, { useId } from 'react'
+
+import { Textarea } from '@mantine/core'
+
+export interface CodeFieldProps {
+  id?: string
+  label?: string
+  value: string
+  onChange: (value: string) => void
+  language?: string
+  dataCanopyField?: string
+}
+
+// Placeholder for Monaco integration; host app can provide custom renderer for production.
+export const CodeField: React.FC<CodeFieldProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  language,
+  dataCanopyField,
+}) => {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  return (
+    <Textarea
+      id={inputId}
+      label={label}
+      value={value}
+      onChange={(e) => onChange(e.currentTarget.value)}
+      placeholder={language ? `Code (${language})` : 'Code'}
+      autosize
+      minRows={6}
+      size="sm"
+      data-canopy-field={dataCanopyField}
+      styles={{ input: { fontFamily: 'Menlo, Consolas, monospace' } }}
+    />
+  )
+}
+
+export default CodeField