@portabletext/editor 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/internal-utils/values.test.ts

@@ -0,0 +1,289 @@
+import {compileSchema, defineSchema} from '@portabletext/schema'
+import {createTestKeyGenerator} from '@portabletext/test'
+import {describe, expect, test} from 'vitest'
+import {toSlateBlock, VOID_CHILD_KEY} from './values'
+
+describe(toSlateBlock.name, () => {
+  describe('text block', () => {
+    describe('with span', () => {
+      test('with _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const spanKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [{_key: spanKey, _type: 'span', text: 'foo'}],
+            },
+            {
+              schemaTypes: compileSchema(defineSchema({})),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              _key: spanKey,
+              _type: 'span',
+              text: 'foo',
+            },
+          ],
+          style: 'normal',
+        })
+      })
+
+      test('without _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const spanKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [{_key: spanKey, text: 'foo'}],
+            },
+            {
+              schemaTypes: compileSchema(defineSchema({})),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              _key: spanKey,
+              _type: 'span',
+              text: 'foo',
+            },
+          ],
+          style: 'normal',
+        })
+      })
+
+      test('wrong _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const spanKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [{_key: spanKey, _type: 'stock-ticker', text: 'foo'}],
+            },
+            {
+              schemaTypes: compileSchema(defineSchema({})),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              _key: spanKey,
+              _type: 'stock-ticker',
+              children: [
+                {
+                  _key: VOID_CHILD_KEY,
+                  _type: 'span',
+                  text: '',
+                  marks: [],
+                },
+              ],
+              value: {text: 'foo'},
+              __inline: true,
+            },
+          ],
+          style: 'normal',
+        })
+      })
+    })
+
+    describe('with inline object', () => {
+      test('known inline object _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const stockTickerKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [
+                {_type: 'stock-ticker', _key: stockTickerKey, symbol: 'AAPL'},
+              ],
+            },
+            {
+              schemaTypes: compileSchema(
+                defineSchema({inlineObjects: [{name: 'stock-ticker'}]}),
+              ),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              __inline: true,
+              _key: stockTickerKey,
+              _type: 'stock-ticker',
+              children: [
+                {
+                  _key: VOID_CHILD_KEY,
+                  _type: 'span',
+                  text: '',
+                  marks: [],
+                },
+              ],
+              value: {
+                symbol: 'AAPL',
+              },
+            },
+          ],
+          style: 'normal',
+        })
+      })
+
+      test('unknown inline object _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const stockTickerKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [
+                {_type: 'stock-ticker', _key: stockTickerKey, symbol: 'AAPL'},
+              ],
+            },
+            {
+              schemaTypes: compileSchema(defineSchema({})),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              __inline: true,
+              _key: stockTickerKey,
+              _type: 'stock-ticker',
+              children: [
+                {
+                  _key: VOID_CHILD_KEY,
+                  _type: 'span',
+                  text: '',
+                  marks: [],
+                },
+              ],
+              value: {
+                symbol: 'AAPL',
+              },
+            },
+          ],
+          style: 'normal',
+        })
+      })
+    })
+
+    describe('with inline object with text prop', () => {
+      test('known inline object _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const stockTickerKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [
+                {_type: 'stock-ticker', _key: stockTickerKey, text: 'foo'},
+              ],
+            },
+            {
+              schemaTypes: compileSchema(
+                defineSchema({inlineObjects: [{name: 'stock-ticker'}]}),
+              ),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              __inline: true,
+              _key: stockTickerKey,
+              _type: 'stock-ticker',
+              children: [
+                {
+                  _key: VOID_CHILD_KEY,
+                  _type: 'span',
+                  text: '',
+                  marks: [],
+                },
+              ],
+              value: {
+                text: 'foo',
+              },
+            },
+          ],
+          style: 'normal',
+        })
+      })
+
+      test('unknown inline object _type', () => {
+        const keyGenerator = createTestKeyGenerator()
+        const blockKey = keyGenerator()
+        const stockTickerKey = keyGenerator()
+
+        expect(
+          toSlateBlock(
+            {
+              _type: 'block',
+              _key: blockKey,
+              children: [
+                {_type: 'stock-ticker', _key: stockTickerKey, text: 'foo'},
+              ],
+            },
+            {
+              schemaTypes: compileSchema(defineSchema({})),
+            },
+          ),
+        ).toEqual({
+          _type: 'block',
+          _key: blockKey,
+          children: [
+            {
+              __inline: true,
+              _key: stockTickerKey,
+              _type: 'stock-ticker',
+              children: [
+                {
+                  _key: VOID_CHILD_KEY,
+                  _type: 'span',
+                  text: '',
+                  marks: [],
+                },
+              ],
+              value: {
+                text: 'foo',
+              },
+            },
+          ],
+          style: 'normal',
+        })
+      })
+    })
+  })
+})

package/src/internal-utils/values.ts

@@ -54,11 +54,17 @@ export function toSlateBlock(
       const {_type: childType, _key: childKey, ...childProps} = child
       const propKeys = Object.keys(childProps)
 
-      if (childType !== schemaTypes.span.name) {
+      if (childType === undefined) {
         if (propKeys.length === 1 && propKeys.at(0) === 'text') {
-          return child
+          return {
+            _key: childKey,
+            _type: schemaTypes.span.name,
+            text: childProps.text,
+          }
         }
+      }
 
+      if (childType !== schemaTypes.span.name) {
         // Return 'slate' version of inline object where the actual
         // value is stored in the `value` property.
         // In slate, inline objects are represented as regular

package/src/utils/parse-blocks.test.ts

@@ -1,7 +1,12 @@
 import {compileSchema, defineSchema} from '@portabletext/schema'
 import {createTestKeyGenerator} from '@portabletext/test'
 import {describe, expect, test} from 'vitest'
-import {parseBlock, parseInlineObject, parseSpan} from './parse-blocks'
+import {
+  parseBlock,
+  parseChild,
+  parseInlineObject,
+  parseSpan,
+} from './parse-blocks'
 
 describe(parseBlock.name, () => {
   test('null', () => {
@@ -265,12 +270,6 @@ describe(parseBlock.name, () => {
             text: '',
             marks: ['em'],
           },
-          {
-            _key: 'k6',
-            _type: 'span',
-            text: 'inline object or span?',
-            marks: [],
-          },
         ],
         markDefs: [],
         style: 'normal',
@@ -813,3 +812,41 @@ describe(parseInlineObject.name, () => {
     })
   })
 })
+
+describe(parseChild.name, () => {
+  describe('inline object', () => {
+    describe('looks like text node', () => {
+      test('known inline object _type', () => {
+        expect(
+          parseChild({
+            context: {
+              keyGenerator: createTestKeyGenerator(),
+              schema: compileSchema(
+                defineSchema({inlineObjects: [{name: 'stock-ticker'}]}),
+              ),
+            },
+            markDefKeyMap: new Map(),
+            options: {validateFields: true},
+            child: {_type: 'stock-ticker', text: 'foo'},
+          }),
+        ).toEqual({_key: 'k0', _type: 'stock-ticker'})
+      })
+
+      test('unknown inline object _type', () => {
+        expect(
+          parseChild({
+            context: {
+              keyGenerator: createTestKeyGenerator(),
+              schema: compileSchema(
+                defineSchema({inlineObjects: [{name: 'stock-ticker'}]}),
+              ),
+            },
+            markDefKeyMap: new Map(),
+            options: {validateFields: true},
+            child: {_type: 'image', text: 'foo'},
+          }),
+        ).toBe(undefined)
+      })
+    })
+  })
+})

package/src/utils/parse-blocks.ts

@@ -190,11 +190,7 @@ export function parseTextBlock({
     : []
 
   const parsedChildren = unparsedChildren
-    .map(
-      (child) =>
-        parseSpan({span: child, context, markDefKeyMap, options}) ??
-        parseInlineObject({inlineObject: child, context, options}),
-    )
+    .map((child) => parseChild({child, context, markDefKeyMap, options}))
     .filter((child) => child !== undefined)
   const marks = parsedChildren.flatMap((child) => child.marks ?? [])
 
@@ -288,6 +284,23 @@ export function parseTextBlock({
   return parsedBlock
 }
 
+export function parseChild({
+  child,
+  context,
+  markDefKeyMap,
+  options,
+}: {
+  child: unknown
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>
+  markDefKeyMap: Map<string, string>
+  options: {validateFields: boolean}
+}): PortableTextSpan | PortableTextObject | undefined {
+  return (
+    parseSpan({span: child, context, markDefKeyMap, options}) ??
+    parseInlineObject({inlineObject: child, context, options})
+  )
+}
+
 export function parseSpan({
   span,
   context,
@@ -339,13 +352,15 @@ export function parseSpan({
     return []
   })
 
-  if (span._type !== context.schema.span.name) {
-    if (
-      !context.schema.inlineObjects.some(
-        (inlineObject) => inlineObject.name === span._type,
-      ) &&
-      typeof span.text === 'string'
-    ) {
+  if (
+    typeof span._type === 'string' &&
+    span._type !== context.schema.span.name
+  ) {
+    return undefined
+  }
+
+  if (typeof span._type !== 'string') {
+    if (typeof span.text === 'string') {
       return {
         _type: context.schema.span.name as 'span',
         _key: