WIP

Author: christianhg

packages/editor/package.json

@@ -35,6 +35,10 @@
       "source": "./src/behaviors/_exports/index.ts",
       "default": "./lib/behaviors/index.js"
     },
+    "./renderers": {
+      "source": "./src/renderers/_exports/index.ts",
+      "default": "./lib/renderers/index.js"
+    },
     "./plugins": {
       "source": "./src/plugins/_exports/index.ts",
       "default": "./lib/plugins/index.js"

packages/editor/src/editor.ts

@@ -6,7 +6,7 @@ import type {EditorDom} from './editor/editor-dom'
 import type {ExternalEditorEvent} from './editor/editor-machine'
 import type {EditorSnapshot} from './editor/editor-snapshot'
 import type {EditorEmittedEvent} from './editor/relay-machine'
-import type {ArrayDefinition, ArraySchemaType} from './types/sanity-types'
+import type {Renderer} from './renderers/renderer.types'
 
 /**
  * @public
@@ -50,6 +50,28 @@ export type Editor = {
    * @beta
    */
   registerBehavior: (config: {behavior: Behavior}) => () => void
+  /**
+   * @beta
+   * Register a custom renderer for a specific node type.
+   *
+   * @example
+   * ```tsx
+   * // Block object renderer (type: 'block', name matches the object type)
+   * const unregister = editor.registerRenderer({
+   *   renderer: defineRenderer<typeof schema>()({
+   *     type: 'block',
+   *     name: 'image',
+   *     render: ({attributes, children, node}) => (
+   *       <figure {...attributes}>
+   *         <img src={node.src} alt={node.alt} />
+   *         {children}
+   *       </figure>
+   *     ),
+   *   }),
+   * })
+   * ```
+   */
+  registerRenderer: (config: {renderer: Renderer}) => () => void
   send: (event: EditorEvent) => void
   on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
 }

packages/editor/src/editor/create-editor.ts

@@ -11,8 +11,8 @@ import {debugWithName} from '../internal-utils/debug'
 import {compileType} from '../internal-utils/schema'
 import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
-import type {EditableAPI} from '../types/editor'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
+import type {Renderer, RendererConfig} from '../renderers/renderer.types'
+import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
 import {defaultKeyGenerator} from '../utils/key-generator'
 import {createEditableAPI} from './create-editable-api'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
@@ -99,6 +99,31 @@ export function createInternalEditor(config: EditorConfig): {
         })
       }
     },
+    registerRenderer: (rendererConfig: {renderer: Renderer}) => {
+      const priority = createEditorPriority({
+        name: 'custom',
+        reference: {
+          priority: corePriority,
+          importance: 'higher',
+        },
+      })
+      const rendererConfigWithPriority = {
+        ...rendererConfig,
+        priority,
+      } satisfies RendererConfig
+
+      editorActor.send({
+        type: 'add renderer',
+        rendererConfig: rendererConfigWithPriority,
+      })
+
+      return () => {
+        editorActor.send({
+          type: 'remove renderer',
+          rendererConfig: rendererConfigWithPriority,
+        })
+      }
+    },
     send: (event) => {
       switch (event.type) {
         case 'update value':

packages/editor/src/editor/editor-machine.ts

@@ -22,6 +22,7 @@ import type {Converter} from '../converters/converter.types'
 import {debugWithName} from '../internal-utils/debug'
 import type {EventPosition} from '../internal-utils/event-position'
 import {sortByPriority} from '../priority/priority.sort'
+import {getRendererKey, type RendererConfig} from '../renderers/renderer.types'
 import type {NamespaceEvent, OmitFromUnion} from '../type-utils'
 import type {
   EditorSelection,
@@ -82,6 +83,14 @@ export type InternalEditorEvent =
       type: 'remove behavior'
       behaviorConfig: BehaviorConfig
     }
+  | {
+      type: 'add renderer'
+      rendererConfig: RendererConfig
+    }
+  | {
+      type: 'remove renderer'
+      rendererConfig: RendererConfig
+    }
   | {
       type: 'blur'
       editor: PortableTextSlateEditor
@@ -185,6 +194,7 @@ export const editorMachine = setup({
       keyGenerator: () => string
       pendingEvents: Array<InternalPatchEvent | MutationEvent>
       pendingIncomingPatchesEvents: Array<PatchesEvent>
+      renderers: Map<string, RendererConfig[]>
       schema: EditorSchema
       initialReadOnly: boolean
       selection: EditorSelection
@@ -225,6 +235,44 @@ export const editorMachine = setup({
         return new Set([...context.behaviors])
       },
     }),
+    'add renderer to context': assign({
+      renderers: ({context, event}) => {
+        assertEvent(event, 'add renderer')
+
+        const key = getRendererKey(
+          event.rendererConfig.renderer.type,
+          event.rendererConfig.renderer.name,
+        )
+
+        const newRenderers = new Map(context.renderers)
+        const existing = newRenderers.get(key) ?? []
+        // Add to the array - renderers are evaluated in order, first match wins
+        newRenderers.set(key, [...existing, event.rendererConfig])
+        return newRenderers
+      },
+    }),
+    'remove renderer from context': assign({
+      renderers: ({context, event}) => {
+        assertEvent(event, 'remove renderer')
+
+        const key = getRendererKey(
+          event.rendererConfig.renderer.type,
+          event.rendererConfig.renderer.name,
+        )
+
+        const newRenderers = new Map(context.renderers)
+        const existing = newRenderers.get(key)
+        if (existing) {
+          const filtered = existing.filter((r) => r !== event.rendererConfig)
+          if (filtered.length === 0) {
+            newRenderers.delete(key)
+          } else {
+            newRenderers.set(key, filtered)
+          }
+        }
+        return newRenderers
+      },
+    }),
     'add slate editor to context': assign({
       slateEditor: ({context, event}) => {
         return event.type === 'add slate editor'
@@ -388,6 +436,7 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     pendingIncomingPatchesEvents: [],
+    renderers: new Map<string, RendererConfig[]>(),
     schema: input.schema,
     selection: null,
     initialReadOnly: input.readOnly ?? false,
@@ -396,6 +445,8 @@ export const editorMachine = setup({
   on: {
     'add behavior': {actions: 'add behavior to context'},
     'remove behavior': {actions: 'remove behavior from context'},
+    'add renderer': {actions: 'add renderer to context'},
+    'remove renderer': {actions: 'remove renderer from context'},
     'add slate editor': {actions: 'add slate editor to context'},
     'update selection': {
       actions: [

packages/editor/src/editor/render.block-object.tsx

@@ -1,18 +1,22 @@
 import type {PortableTextObject} from '@portabletext/schema'
-import {useRef, useState, type ReactElement} from 'react'
+import {useContext, useRef, useState, type ReactElement} from 'react'
 import {Range, type Element as SlateElement} from 'slate'
 import {
   useSelected,
   useSlateSelector,
+  useSlateStatic,
   type RenderElementProps,
 } from 'slate-react'
 import type {EventPositionBlock} from '../internal-utils/event-position'
+import {findMatchingRenderer, useRenderers} from '../renderers/use-renderer'
 import type {
   BlockRenderProps,
   PortableTextMemberSchemaTypes,
   RenderBlockFunction,
 } from '../types/editor'
+import {EditorActorContext} from './editor-actor-context'
 import type {EditorSchema} from './editor-schema'
+import {getEditorSnapshot} from './editor-selector'
 import {RenderDefaultBlockObject} from './render.default-object'
 import {DropIndicator} from './render.drop-indicator'
 import {useCoreBlockElementBehaviors} from './use-core-block-element-behaviors'
@@ -30,6 +34,8 @@ export function RenderBlockObject(props: {
   const [dragPositionBlock, setDragPositionBlock] =
     useState<EventPositionBlock>()
   const blockObjectRef = useRef<HTMLDivElement>(null)
+  const slateEditor = useSlateStatic()
+  const editorActor = useContext(EditorActorContext)
   const selected = useSelected()
   const focused = useSlateSelector(
     (editor) =>
@@ -43,6 +49,16 @@ export function RenderBlockObject(props: {
     onSetDragPositionBlock: setDragPositionBlock,
   })
 
+  // Get registered renderers
+  const registeredRenderers = useRenderers('block', props.element._type)
+
+  // Lazy snapshot getter - only compute when guards need it
+  const getSnapshot = () =>
+    getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor,
+    })
+
   const legacySchemaType = props.legacySchema.blockObjects.find(
     (schemaType) => schemaType.name === props.element._type,
   )
@@ -58,6 +74,54 @@ export function RenderBlockObject(props: {
     _type: props.element._type,
   }
 
+  // Find matching renderer (first whose guard passes)
+  const match = findMatchingRenderer(
+    registeredRenderers,
+    blockObject,
+    getSnapshot,
+  )
+
+  // If there's a matching renderer, use it (full DOM control)
+  if (match) {
+    const renderDefault = () => (
+      <div
+        {...props.attributes}
+        className="pt-block pt-object-block"
+        data-block-key={props.element._key}
+        data-block-name={props.element._type}
+        data-block-type="object"
+      >
+        {dragPositionBlock === 'start' ? <DropIndicator /> : null}
+        {props.children}
+        <div
+          ref={blockObjectRef}
+          contentEditable={false}
+          draggable={!props.readOnly}
+        >
+          <RenderDefaultBlockObject blockObject={blockObject} />
+        </div>
+        {dragPositionBlock === 'end' ? <DropIndicator /> : null}
+      </div>
+    )
+
+    const renderHidden = () => (
+      <div {...props.attributes} style={{display: 'none'}}>
+        {props.children}
+      </div>
+    )
+
+    return match.renderer.renderer.render(
+      {
+        attributes: props.attributes,
+        children: props.children,
+        node: blockObject,
+        renderDefault,
+        renderHidden,
+      },
+      match.guardResponse,
+    )
+  }
+
   return (
     <div
       {...props.attributes}

packages/editor/src/editor/render.inline-object.tsx

@@ -1,4 +1,4 @@
-import {useRef, type ReactElement} from 'react'
+import {useContext, useRef, type ReactElement} from 'react'
 import {Range, type Element as SlateElement} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import {
@@ -8,12 +8,15 @@ import {
   type RenderElementProps,
 } from 'slate-react'
 import {getPointBlock} from '../internal-utils/slate-utils'
+import {findMatchingRenderer, useRenderers} from '../renderers/use-renderer'
 import type {
   BlockChildRenderProps,
   PortableTextMemberSchemaTypes,
   RenderChildFunction,
 } from '../types/editor'
+import {EditorActorContext} from './editor-actor-context'
 import type {EditorSchema} from './editor-schema'
+import {getEditorSnapshot} from './editor-selector'
 import {RenderDefaultInlineObject} from './render.default-object'
 
 export function RenderInlineObject(props: {
@@ -27,6 +30,7 @@ export function RenderInlineObject(props: {
 }) {
   const inlineObjectRef = useRef<HTMLElement>(null)
   const slateEditor = useSlateStatic()
+  const editorActor = useContext(EditorActorContext)
   const selected = useSelected()
   const focused = useSlateSelector(
     (editor) =>
@@ -35,6 +39,16 @@ export function RenderInlineObject(props: {
       Range.isCollapsed(editor.selection),
   )
 
+  // Get registered renderers
+  const registeredRenderers = useRenderers('inline', props.element._type)
+
+  // Lazy snapshot getter - only compute when guards need it
+  const getSnapshot = () =>
+    getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor,
+    })
+
   const legacySchemaType = props.legacySchema.inlineObjects.find(
     (inlineObject) => inlineObject.name === props.element._type,
   )
@@ -68,6 +82,49 @@ export function RenderInlineObject(props: {
       : {}),
   }
 
+  // Find matching renderer (first whose guard passes)
+  const match = findMatchingRenderer(
+    registeredRenderers,
+    inlineObject,
+    getSnapshot,
+  )
+
+  // If there's a matching renderer, use it (full DOM control)
+  if (match) {
+    const renderDefault = () => (
+      <span
+        {...props.attributes}
+        draggable={!props.readOnly}
+        className="pt-inline-object"
+        data-child-key={inlineObject._key}
+        data-child-name={inlineObject._type}
+        data-child-type="object"
+      >
+        {props.children}
+        <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
+          <RenderDefaultInlineObject inlineObject={inlineObject} />
+        </span>
+      </span>
+    )
+
+    const renderHidden = () => (
+      <span {...props.attributes} style={{display: 'none'}}>
+        {props.children}
+      </span>
+    )
+
+    return match.renderer.renderer.render(
+      {
+        attributes: props.attributes,
+        children: props.children,
+        node: inlineObject,
+        renderDefault,
+        renderHidden,
+      },
+      match.guardResponse,
+    )
+  }
+
   return (
     <span
       {...props.attributes}