@portabletext/plugin-sdk-value 3.0.22 → 3.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-sdk-value",
-  "version": "3.0.22",
+  "version": "3.0.24",
   "description": "Synchronizes the Portable Text Editor value with the Sanity SDK, allowing for two-way editing.",
   "keywords": [
     "portabletext",
@@ -34,13 +34,12 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "dependencies": {
     "@sanity/diff-patch": "^6.0.0",
     "@sanity/json-match": "^1.0.5",
-    "react-compiler-runtime": "1.0.0"
+    "react-compiler-runtime": "^1.0.0"
   },
   "devDependencies": {
     "@sanity/schema": "^4.20.3",
@@ -53,9 +52,9 @@
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser": "^4.0.14",
     "@vitest/browser-playwright": "^4.0.14",
-    "babel-plugin-react-compiler": "1.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "playwright": "^1.56.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
@@ -63,14 +62,14 @@
     "typescript": "5.9.3",
     "typescript-eslint": "^8.48.0",
     "vitest": "^4.0.14",
-    "@portabletext/editor": "^3.3.2",
-    "@portabletext/patches": "^2.0.0"
+    "@portabletext/editor": "^3.3.4",
+    "@portabletext/patches": "^2.0.1"
   },
   "peerDependencies": {
     "@sanity/sdk-react": "^2.1.2",
     "react": "^18.3 || ^19",
     "react-dom": "^18.3 || ^19",
-    "@portabletext/editor": "^3.3.2"
+    "@portabletext/editor": "^3.3.4"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"

package/src/index.ts

@@ -1 +0,0 @@
-export * from './plugin.sdk-value'

package/src/plugin.sdk-value.test.tsx

@@ -1,183 +0,0 @@
-import {
-  defineSchema,
-  EditorProvider,
-  PortableTextEditable,
-  useEditor,
-  type Editor,
-  type PortableTextBlock,
-} from '@portabletext/editor'
-import {
-  createDocumentHandle,
-  getDocumentState,
-  ResourceProvider,
-  useEditDocument,
-  type ResourceProviderProps,
-  type SanityConfig,
-  type SanityInstance,
-  type StateSource,
-} from '@sanity/sdk-react'
-import {render, waitFor} from '@testing-library/react'
-import userEvent, {type UserEvent} from '@testing-library/user-event'
-import {useEffect} from 'react'
-import {ErrorBoundary} from 'react-error-boundary'
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  vi,
-  type Mock,
-} from 'vitest'
-import {SDKValuePlugin} from './plugin.sdk-value'
-
-vi.mock('@sanity/sdk-react', async () => {
-  const {createContext, createRef, Suspense, useContext} = await import('react')
-  const Context = createContext<SanityConfig | null>(null)
-  const eventTarget = new EventTarget()
-  const valueRef = createRef<PortableTextBlock[]>()
-
-  return {
-    createDocumentHandle: (value: unknown) => value,
-    useEditDocument: () => {
-      if (!valueRef.current) {
-        // suspend at least once
-        throw new Promise((resolve) => {
-          valueRef.current = []
-          setTimeout(resolve, 0)
-        })
-      }
-
-      return (value: PortableTextBlock[]) => {
-        valueRef.current = value
-        eventTarget.dispatchEvent(new CustomEvent('change'))
-      }
-    },
-    getDocumentState: (): StateSource<PortableTextBlock[] | null> => {
-      return {
-        getCurrent: () => valueRef.current,
-        subscribe: (fn) => {
-          const listener = () => fn?.()
-          eventTarget.addEventListener('change', listener)
-          return () => eventTarget.removeEventListener('change', listener)
-        },
-        get observable(): StateSource<
-          PortableTextBlock[] | null
-        >['observable'] {
-          throw new Error('Not implemented')
-        },
-      }
-    },
-    useSanityInstance: () => useContext(Context)!,
-    ResourceProvider: ({
-      children,
-      fallback,
-      ...config
-    }: ResourceProviderProps) => (
-      <Suspense fallback={fallback}>
-        <Context.Provider value={config}>{children}</Context.Provider>
-      </Suspense>
-    ),
-  }
-})
-
-const schemaDefinition = defineSchema({})
-
-describe(SDKValuePlugin.name, () => {
-  let user: UserEvent
-  let setSdkValue: (value: PortableTextBlock[] | null | undefined) => void
-  let getSdkValue: () => PortableTextBlock[] | null | undefined
-  let getEditorValue: () => PortableTextBlock[] | null | undefined
-  let portableTextEditable: HTMLElement
-  let unmount: () => void
-  let errorHandler: Mock
-
-  beforeEach(async () => {
-    user = userEvent.setup()
-    errorHandler = vi.fn()
-
-    const testId = 'portable-text-editable'
-    const {resolve: resolveEditor, promise: editorPromise} =
-      Promise.withResolvers<Editor>()
-
-    const doc = createDocumentHandle({
-      documentId: 'example-document-id',
-      documentType: 'example-document-type',
-    })
-    const path = 'example-portable-text-field'
-
-    function CaptureEditorPlugin() {
-      const editor = useEditor()
-
-      useEffect(() => {
-        resolveEditor(editor)
-      }, [editor])
-
-      return null
-    }
-
-    const result = render(
-      <ErrorBoundary fallback={null} onError={errorHandler}>
-        <ResourceProvider
-          projectId="example-project"
-          dataset="example-dataset"
-          fallback={<>Loading…</>}
-        >
-          <EditorProvider initialConfig={{schemaDefinition}}>
-            <SDKValuePlugin {...doc} path={path} />
-            <CaptureEditorPlugin />
-            <PortableTextEditable data-testid={testId} />
-          </EditorProvider>
-        </ResourceProvider>
-      </ErrorBoundary>,
-    )
-    portableTextEditable = await waitFor(() => result.getByTestId(testId))
-    unmount = result.unmount
-
-    const editor = await editorPromise
-    setSdkValue = useEditDocument<PortableTextBlock[] | null | undefined>({
-      ...doc,
-      path,
-    })
-
-    getSdkValue = getDocumentState(null as unknown as SanityInstance, {
-      ...doc,
-      path,
-    }).getCurrent
-
-    getEditorValue = () => editor.getSnapshot().context.value
-  })
-
-  afterEach(async () => {
-    // wait one frame before unmounting in the event of errors
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(errorHandler).not.toHaveBeenCalled()
-    unmount?.()
-  })
-
-  it('syncs editor changes to the SDK', async () => {
-    await user.click(portableTextEditable)
-    await user.type(portableTextEditable, 'Hello world!')
-
-    expect(getSdkValue()).toEqual(getEditorValue())
-    expect(getSdkValue()).toMatchObject([{children: [{text: 'Hello world!'}]}])
-  })
-
-  it('syncs SDK changes to the editor', () => {
-    const testValue: PortableTextBlock[] = [
-      {
-        _type: 'block',
-        _key: 'test-key',
-        children: [
-          {_type: 'span', _key: 'span-key', text: 'SDK content', marks: []},
-        ],
-        markDefs: [],
-        style: 'normal',
-      },
-    ]
-
-    setSdkValue(testValue)
-    expect(getEditorValue()).toEqual(getSdkValue())
-    expect(getEditorValue()).toEqual(testValue)
-  })
-})

package/src/plugin.sdk-value.tsx

@@ -1,193 +0,0 @@
-import {
-  useEditor,
-  type PortableTextBlock,
-  type Patch as PtePatch,
-} from '@portabletext/editor'
-import type {
-  JSONValue,
-  Path,
-  PathSegment,
-  InsertPatch as PteInsertPatch,
-} from '@portabletext/patches'
-import {diffValue, type SanityPatchOperations} from '@sanity/diff-patch'
-import {
-  parsePath,
-  type ExprNode,
-  type PathNode,
-  type SegmentNode,
-  type ThisNode,
-} from '@sanity/json-match'
-import {
-  getDocumentState,
-  useEditDocument,
-  useSanityInstance,
-  type DocumentHandle,
-} from '@sanity/sdk-react'
-import {useEffect} from 'react'
-
-interface SDKValuePluginProps extends DocumentHandle {
-  path: string
-}
-
-type InsertPatch = Required<Pick<SanityPatchOperations, 'insert'>>
-
-const ARRAYIFY_ERROR_MESSAGE =
-  'Unexpected path format from diffValue output. Please report this issue.'
-
-function* getSegments(
-  node: PathNode,
-): Generator<Exclude<SegmentNode, ThisNode>> {
-  if (node.base) {
-    yield* getSegments(node.base)
-  }
-  if (node.segment.type !== 'This') {
-    yield node.segment
-  }
-}
-
-function isKeyPath(node: ExprNode): node is PathNode {
-  if (node.type !== 'Path') {
-    return false
-  }
-  if (node.base) {
-    return false
-  }
-  if (node.recursive) {
-    return false
-  }
-  if (node.segment.type !== 'Identifier') {
-    return false
-  }
-  return node.segment.name === '_key'
-}
-
-function arrayifyPath(pathExpr: string): Path {
-  const node = parsePath(pathExpr)
-  if (!node) {
-    return []
-  }
-  if (node.type !== 'Path') {
-    throw new Error(ARRAYIFY_ERROR_MESSAGE)
-  }
-
-  return Array.from(getSegments(node)).map((segment): PathSegment => {
-    if (segment.type === 'Identifier') {
-      return segment.name
-    }
-    if (segment.type !== 'Subscript') {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-    if (segment.elements.length !== 1) {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-
-    const [element] = segment.elements
-    if (element.type === 'Number') {
-      return element.value
-    }
-
-    if (element.type !== 'Comparison') {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-    if (element.operator !== '==') {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-    const keyPathNode = [element.left, element.right].find(isKeyPath)
-    if (!keyPathNode) {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-    const other = element.left === keyPathNode ? element.right : element.left
-    if (other.type !== 'String') {
-      throw new Error(ARRAYIFY_ERROR_MESSAGE)
-    }
-    return {_key: other.value}
-  })
-}
-
-function convertPatches(patches: SanityPatchOperations[]): PtePatch[] {
-  return patches.flatMap((p) => {
-    return Object.entries(p).flatMap(([type, values]): PtePatch[] => {
-      const origin = 'remote'
-
-      switch (type) {
-        case 'set':
-        case 'setIfMissing':
-        case 'diffMatchPatch':
-        case 'inc':
-        case 'dec': {
-          return Object.entries(values).map(
-            ([pathExpr, value]) =>
-              ({type, value, origin, path: arrayifyPath(pathExpr)}) as PtePatch,
-          )
-        }
-        case 'unset': {
-          if (!Array.isArray(values)) {
-            return []
-          }
-          return values.map(arrayifyPath).map((path) => ({type, origin, path}))
-        }
-        case 'insert': {
-          const {items, ...rest} = values as InsertPatch['insert']
-          type InsertPosition = PteInsertPatch['position']
-          const position = Object.keys(rest).at(0) as InsertPosition | undefined
-
-          if (!position) {
-            return []
-          }
-          const pathExpr = (rest as {[K in InsertPosition]: string})[position]
-          const insertPatch: PteInsertPatch = {
-            type,
-            origin,
-            position,
-            path: arrayifyPath(pathExpr),
-            items: items as JSONValue[],
-          }
-
-          return [insertPatch]
-        }
-
-        default: {
-          return []
-        }
-      }
-    })
-  })
-}
-/**
- * @public
- */
-export function SDKValuePlugin(props: SDKValuePluginProps) {
-  // NOTE: the real `useEditDocument` suspends until the document is loaded into the SDK store
-  const setSdkValue = useEditDocument(props)
-  const instance = useSanityInstance(props)
-  const editor = useEditor()
-
-  useEffect(() => {
-    const getEditorValue = () => editor.getSnapshot().context.value
-    const {getCurrent: getSdkValue, subscribe: onSdkValueChange} =
-      getDocumentState<PortableTextBlock[]>(instance, props)
-
-    const editorSubscription = editor.on('patch', () =>
-      setSdkValue(getEditorValue()),
-    )
-    const unsubscribeToEditorChanges = () => editorSubscription.unsubscribe()
-    const unsubscribeToSdkChanges = onSdkValueChange(() => {
-      const snapshot = getEditorValue()
-      const patches = convertPatches(diffValue(snapshot, getSdkValue()))
-
-      if (patches.length) {
-        editor.send({type: 'patches', patches, snapshot})
-      }
-    })
-
-    // update initial value
-    editor.send({type: 'update value', value: getSdkValue() ?? []})
-
-    return () => {
-      unsubscribeToEditorChanges()
-      unsubscribeToSdkChanges()
-    }
-  }, [editor, instance, props, setSdkValue])
-
-  return null
-}