@portabletext/editor 1.40.0 → 1.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.40.0",
+  "version": "1.40.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -85,7 +85,7 @@
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
-    "@sanity/pkg-utils": "^7.1.0",
+    "@sanity/pkg-utils": "^7.1.1",
     "@sanity/schema": "^3.79.0",
     "@sanity/types": "^3.79.0",
     "@testing-library/jest-dom": "^6.6.3",

package/src/converters/converter.portable-text.ts

@@ -22,6 +22,15 @@ export const converterPortableText = defineConverter({
       selection,
     })
 
+    if (blocks.length === 0) {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'application/x-portable-text',
+        reason: 'No blocks serialized',
+        originEvent: event.originEvent,
+      }
+    }
+
     return {
       type: 'serialization.success',
       data: JSON.stringify(blocks),

package/src/converters/converter.text-plain.test.ts

@@ -128,7 +128,7 @@ test(converterTextPlain.serialize.name, () => {
       },
     }),
   ).toMatchObject({
-    data: 'foobar\n\n[Object]\n\nbaz',
+    data: 'foobar\n\nbaz',
   })
 
   expect(
@@ -152,7 +152,7 @@ test(converterTextPlain.serialize.name, () => {
       },
     }),
   ).toMatchObject({
-    data: '[Object]',
+    data: '',
   })
 
   expect(
@@ -182,7 +182,7 @@ test(converterTextPlain.serialize.name, () => {
       },
     }),
   ).toMatchObject({
-    data: 'foobar\n\n[Image]\n\nbaz',
+    data: 'foobar\n\nbaz',
   })
 
   expect(
@@ -206,7 +206,7 @@ test(converterTextPlain.serialize.name, () => {
       },
     }),
   ).toMatchObject({
-    data: 'fizz[Object]buzz',
+    data: 'fizzbuzz',
   })
 
   expect(
@@ -236,6 +236,6 @@ test(converterTextPlain.serialize.name, () => {
       },
     }),
   ).toMatchObject({
-    data: 'fizz[Stock Ticker]buzz',
+    data: 'fizzbuzz',
   })
 })

package/src/converters/converter.text-plain.ts

@@ -25,28 +25,21 @@ export const converterTextPlain = defineConverter({
 
     const data = blocks
       .map((block) => {
-        if (isPortableTextTextBlock(block)) {
-          return block.children
-            .map((child) => {
-              if (child._type === snapshot.context.schema.span.name) {
-                return child.text
-              }
-
-              return `[${
-                snapshot.context.schema.inlineObjects.find(
-                  (inlineObjectType) => inlineObjectType.name === child._type,
-                )?.title ?? 'Object'
-              }]`
-            })
-            .join('')
+        if (!isPortableTextTextBlock(block)) {
+          return ''
         }
 
-        return `[${
-          snapshot.context.schema.blockObjects.find(
-            (blockObjectType) => blockObjectType.name === block._type,
-          )?.title ?? 'Object'
-        }]`
+        return block.children
+          .map((child) => {
+            if (child._type === snapshot.context.schema.span.name) {
+              return child.text
+            }
+
+            return ''
+          })
+          .join('')
       })
+      .filter((block) => block !== '')
       .join('\n\n')
 
     return {

package/src/editor/components/Element.tsx

@@ -419,15 +419,10 @@ export const Element: FunctionComponent<ElementProps> = ({
   }
 
   return (
-    <div
-      key={element._key}
-      {...attributes}
-      className={className}
-      draggable={!readOnly}
-    >
+    <div key={element._key} {...attributes} className={className}>
       {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       {children}
-      <div ref={blockRef} contentEditable={false}>
+      <div ref={blockRef} contentEditable={false} draggable={!readOnly}>
         {renderedBlockFromProps ? (
           renderedBlockFromProps
         ) : (

package/src/editor/plugins/create-with-event-listeners.ts

@@ -122,12 +122,9 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'deserialize',
+          type: 'input.*',
           originEvent: {
-            type: 'input.*',
-            originEvent: {
-              dataTransfer,
-            },
+            dataTransfer,
           },
         },
         editor,

package/src/selectors/selector.get-selected-spans.test.ts

@@ -215,4 +215,37 @@ describe(getSelectedSpans.name, () => {
       },
     ])
   })
+
+  test('selecting from block object to empty span', () => {
+    expect(
+      getSelectedSpans(
+        snapshot(
+          [
+            image,
+            baz,
+            {
+              _key: 'b4',
+              _type: 'block',
+              children: [{_key: 's4', _type: 'span', text: ''}],
+            },
+          ],
+          {
+            anchor: {
+              path: [{_key: 'b2'}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: 'b4'}, 'children', {_key: 's4'}],
+              offset: 0,
+            },
+          },
+        ),
+      ),
+    ).toEqual([
+      {
+        node: {_key: 's3', _type: 'span', text: 'baz'},
+        path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+      },
+    ])
+  })
 })

package/src/selectors/selector.get-selected-spans.ts

@@ -50,7 +50,13 @@ export const getSelectedSpans: EditorSelector<
     ? endPoint.path[2]._key
     : undefined
 
+  let startBlockFound = false
+
   for (const block of snapshot.context.value) {
+    if (block._key === startBlockKey) {
+      startBlockFound = true
+    }
+
     if (!isPortableTextTextBlock(block)) {
       continue
     }
@@ -126,7 +132,7 @@ export const getSelectedSpans: EditorSelector<
       break
     }
 
-    if (selectedSpans.length > 0) {
+    if (startBlockFound) {
       for (const child of block.children) {
         if (!isPortableTextSpan(child)) {
           continue

package/src/selectors/selector.is-active-decorator.test.ts

@@ -1,13 +1,25 @@
 import {expect, test} from 'vitest'
-import type {EditorSelection} from '..'
+import type {EditorSelection, PortableTextBlock} from '..'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {isActiveDecorator} from './selector.is-active-decorator'
 
 test(isActiveDecorator.name, () => {
-  function snapshot(selection: EditorSelection) {
+  function snapshot(
+    value: Array<PortableTextBlock>,
+    selection: EditorSelection,
+  ) {
     return createTestSnapshot({
       context: {
-        value: [
+        value,
+        selection,
+      },
+    })
+  }
+
+  expect(
+    isActiveDecorator('strong')(
+      snapshot(
+        [
           {
             _type: '_block',
             _key: 'b1',
@@ -26,37 +38,98 @@ test(isActiveDecorator.name, () => {
             ],
           },
         ],
-        selection,
-      },
-    })
-  }
+        {
+          anchor: {
+            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            offset: 3,
+          },
+        },
+      ),
+    ),
+  ).toBe(true)
 
   expect(
     isActiveDecorator('strong')(
-      snapshot({
-        anchor: {
-          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
-          offset: 0,
-        },
-        focus: {
-          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
-          offset: 3,
+      snapshot(
+        [
+          {
+            _type: '_block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+              },
+            ],
+          },
+        ],
+        {
+          anchor: {
+            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            offset: 2,
+          },
+          focus: {
+            path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+            offset: 3,
+          },
         },
-      }),
+      ),
     ),
-  ).toBe(true)
+  ).toBe(false)
+
   expect(
     isActiveDecorator('strong')(
-      snapshot({
-        anchor: {
-          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
-          offset: 2,
-        },
-        focus: {
-          path: [{_key: 'b1'}, 'children', {_key: 's2'}],
-          offset: 3,
+      snapshot(
+        [
+          {_key: 'b0', _type: 'image'},
+          {
+            _type: '_block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+                marks: ['strong'],
+              },
+            ],
+          },
+          {
+            _key: 'b2',
+            _type: 'block',
+            children: [
+              {_key: 's3', _type: 'span', text: '', marks: ['strong']},
+            ],
+          },
+        ],
+        {
+          anchor: {
+            path: [{_key: 'b0'}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: 'b2'}, 'children', {_key: 's3'}],
+            offset: 0,
+          },
         },
-      }),
+      ),
     ),
-  ).toBe(false)
+  ).toBe(true)
 })