@portabletext/editor 1.43.0 → 1.44.0

package/package.json

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

package/src/behavior-actions/behavior.actions.ts

@@ -19,18 +19,14 @@ import type {PickFromUnion} from '../type-utils'
 import {blockSetBehaviorActionImplementation} from './behavior.action.block.set'
 import {blockUnsetBehaviorActionImplementation} from './behavior.action.block.unset'
 import {blurActionImplementation} from './behavior.action.blur'
-import {dataTransferSetActionImplementation} from './behavior.action.data-transfer-set'
 import {decoratorAddActionImplementation} from './behavior.action.decorator.add'
 import {deleteActionImplementation} from './behavior.action.delete'
 import {deleteBackwardActionImplementation} from './behavior.action.delete.backward'
 import {deleteBlockActionImplementation} from './behavior.action.delete.block'
 import {deleteForwardActionImplementation} from './behavior.action.delete.forward'
 import {deleteTextActionImplementation} from './behavior.action.delete.text'
-import {deserializationFailureActionImplementation} from './behavior.action.deserialization.failure'
-import {deserializationSuccessActionImplementation} from './behavior.action.deserialization.success'
 import {effectActionImplementation} from './behavior.action.effect'
 import {focusActionImplementation} from './behavior.action.focus'
-import {insertBlocksActionImplementation} from './behavior.action.insert-blocks'
 import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
@@ -39,25 +35,11 @@ import {insertInlineObjectActionImplementation} from './behavior.action.insert-i
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import {insertBlockActionImplementation} from './behavior.action.insert.block'
 import {insertTextActionImplementation} from './behavior.action.insert.text'
-import {
-  addListItemActionImplementation,
-  removeListItemActionImplementation,
-  toggleListItemActionImplementation,
-} from './behavior.action.list-item'
 import {moveBlockActionImplementation} from './behavior.action.move.block'
 import {moveBlockDownActionImplementation} from './behavior.action.move.block-down'
 import {moveBlockUpActionImplementation} from './behavior.action.move.block-up'
 import {noopActionImplementation} from './behavior.action.noop'
 import {selectActionImplementation} from './behavior.action.select'
-import {selectNextBlockActionImplementation} from './behavior.action.select.next-block'
-import {selectPreviousBlockActionImplementation} from './behavior.action.select.previous-block'
-import {serializationFailureActionImplementation} from './behavior.action.serialization.failure'
-import {serializationSuccessActionImplementation} from './behavior.action.serialization.success'
-import {
-  addStyleActionImplementation,
-  removeStyleActionImplementation,
-  toggleStyleActionImplementation,
-} from './behavior.action.style'
 
 const debug = debugWithName('behaviors:action')
 
@@ -88,7 +70,6 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'block.set': blockSetBehaviorActionImplementation,
   'block.unset': blockUnsetBehaviorActionImplementation,
   'blur': blurActionImplementation,
-  'data transfer.set': dataTransferSetActionImplementation,
   'decorator.add': decoratorAddActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
   'decorator.toggle': toggleDecoratorActionImplementation,
@@ -98,33 +79,20 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'delete.forward': deleteForwardActionImplementation,
   'delete.block': deleteBlockActionImplementation,
   'delete.text': deleteTextActionImplementation,
-  'deserialization.failure': deserializationFailureActionImplementation,
-  'deserialization.success': deserializationSuccessActionImplementation,
   'history.redo': historyRedoActionImplementation,
   'history.undo': historyUndoActionImplementation,
   'insert.block': insertBlockActionImplementation,
-  'insert.blocks': insertBlocksActionImplementation,
   'insert.break': insertBreakActionImplementation,
   'insert.inline object': insertInlineObjectActionImplementation,
   'insert.soft break': insertSoftBreakActionImplementation,
   'insert.span': insertSpanActionImplementation,
   'insert.text': insertTextActionImplementation,
   'effect': effectActionImplementation,
-  'list item.add': addListItemActionImplementation,
-  'list item.remove': removeListItemActionImplementation,
-  'list item.toggle': toggleListItemActionImplementation,
   'move.block': moveBlockActionImplementation,
   'move.block down': moveBlockDownActionImplementation,
   'move.block up': moveBlockUpActionImplementation,
   'noop': noopActionImplementation,
   'select': selectActionImplementation,
-  'select.previous block': selectPreviousBlockActionImplementation,
-  'select.next block': selectNextBlockActionImplementation,
-  'serialization.failure': serializationFailureActionImplementation,
-  'serialization.success': serializationSuccessActionImplementation,
-  'style.toggle': toggleStyleActionImplementation,
-  'style.add': addStyleActionImplementation,
-  'style.remove': removeStyleActionImplementation,
 }
 
 export function performAction({
@@ -179,13 +147,6 @@ export function performAction({
       })
       break
     }
-    case 'data transfer.set': {
-      behaviorActionImplementations['data transfer.set']({
-        context,
-        action,
-      })
-      break
-    }
     case 'decorator.add': {
       behaviorActionImplementations['decorator.add']({
         context,
@@ -242,20 +203,6 @@ export function performAction({
       })
       break
     }
-    case 'deserialization.failure': {
-      behaviorActionImplementations['deserialization.failure']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'deserialization.success': {
-      behaviorActionImplementations['deserialization.success']({
-        context,
-        action,
-      })
-      break
-    }
     case 'effect': {
       behaviorActionImplementations.effect({
         context,
@@ -291,13 +238,6 @@ export function performAction({
       })
       break
     }
-    case 'insert.blocks': {
-      behaviorActionImplementations['insert.blocks']({
-        context,
-        action,
-      })
-      break
-    }
     case 'insert.inline object': {
       behaviorActionImplementations['insert.inline object']({
         context,
@@ -333,27 +273,6 @@ export function performAction({
       })
       break
     }
-    case 'list item.add': {
-      behaviorActionImplementations['list item.add']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'list item.remove': {
-      behaviorActionImplementations['list item.remove']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'list item.toggle': {
-      behaviorActionImplementations['list item.toggle']({
-        context,
-        action,
-      })
-      break
-    }
     case 'move.block': {
       behaviorActionImplementations['move.block']({
         context,
@@ -382,57 +301,8 @@ export function performAction({
       })
       break
     }
-    case 'select': {
-      behaviorActionImplementations.select({
-        context,
-        action,
-      })
-      break
-    }
-    case 'select.previous block': {
-      behaviorActionImplementations['select.previous block']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'select.next block': {
-      behaviorActionImplementations['select.next block']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'serialization.failure': {
-      behaviorActionImplementations['serialization.failure']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'serialization.success': {
-      behaviorActionImplementations['serialization.success']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'style.add': {
-      behaviorActionImplementations['style.add']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'style.remove': {
-      behaviorActionImplementations['style.remove']({
-        context,
-        action,
-      })
-      break
-    }
     default: {
-      behaviorActionImplementations['style.toggle']({
+      behaviorActionImplementations.select({
         context,
         action,
       })

package/src/behaviors/behavior.default.ts

@@ -2,6 +2,10 @@ import {isTextBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
 import {blockOffsetsToSelection, getTextBlockText} from '../utils'
 import {raiseInsertSoftBreak} from './behavior.default.raise-soft-break'
+import {internalInsertBehaviors} from './behavior.internal.insert'
+import {internalListItemBehaviors} from './behavior.internal.list-item'
+import {internalSelectBehaviors} from './behavior.internal.select'
+import {internalStyleBehaviors} from './behavior.internal.style'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
@@ -70,46 +74,6 @@ const toggleDecoratorOn = defineBehavior({
   ],
 })
 
-const toggleListItemOff = defineBehavior({
-  on: 'list item.toggle',
-  guard: ({snapshot, event}) =>
-    selectors.isActiveListItem(event.listItem)(snapshot),
-  actions: [
-    ({event}) => [
-      raise({
-        type: 'list item.remove',
-        listItem: event.listItem,
-      }),
-    ],
-  ],
-})
-
-const toggleListItemOn = defineBehavior({
-  on: 'list item.toggle',
-  guard: ({snapshot, event}) =>
-    !selectors.isActiveListItem(event.listItem)(snapshot),
-  actions: [
-    ({event}) => [
-      raise({
-        type: 'list item.add',
-        listItem: event.listItem,
-      }),
-    ],
-  ],
-})
-
-const toggleStyleOff = defineBehavior({
-  on: 'style.toggle',
-  guard: ({snapshot, event}) => selectors.isActiveStyle(event.style)(snapshot),
-  actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
-})
-
-const toggleStyleOn = defineBehavior({
-  on: 'style.toggle',
-  guard: ({snapshot, event}) => !selectors.isActiveStyle(event.style)(snapshot),
-  actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
-})
-
 const raiseDeserializationSuccessOrFailure = defineBehavior({
   on: 'deserialize',
   guard: ({snapshot, event}) => {
@@ -265,12 +229,30 @@ export const defaultBehaviors = [
     on: 'serialization.success',
     actions: [
       ({event}) => [
-        raise({
-          type: 'data transfer.set',
-          data: event.data,
-          dataTransfer: event.originEvent.originEvent.dataTransfer,
-          mimeType: event.mimeType,
-        }),
+        {
+          type: 'effect',
+          effect: () => {
+            event.originEvent.originEvent.dataTransfer.setData(
+              event.mimeType,
+              event.data,
+            )
+          },
+        },
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'serialization.failure',
+    actions: [
+      ({event}) => [
+        {
+          type: 'effect',
+          effect: () => {
+            console.warn(
+              `Serialization of ${event.mimeType} failed with reason "${event.reason}"`,
+            )
+          },
+        },
       ],
     ],
   }),
@@ -465,6 +447,21 @@ export const defaultBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'deserialization.failure',
+    actions: [
+      ({event}) => [
+        {
+          type: 'effect',
+          effect: () => {
+            console.warn(
+              `Deserialization of ${event.mimeType} failed with reason "${event.reason}"`,
+            )
+          },
+        },
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'clipboard.paste',
     guard: ({snapshot}) => {
@@ -508,14 +505,14 @@ export const defaultBehaviors = [
       ],
     ],
   }),
+  ...internalInsertBehaviors,
+  ...internalListItemBehaviors,
+  ...internalStyleBehaviors,
+  ...internalSelectBehaviors,
   toggleAnnotationOff,
   toggleAnnotationOn,
   toggleDecoratorOff,
   toggleDecoratorOn,
-  toggleListItemOff,
-  toggleListItemOn,
-  toggleStyleOff,
-  toggleStyleOn,
   raiseDeserializationSuccessOrFailure,
   raiseSerializationSuccessOrFailure,
   raiseInsertSoftBreak,

package/src/behaviors/behavior.internal.insert.ts

@@ -0,0 +1,118 @@
+import {getFocusTextBlock} from '../selectors'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalInsertBehaviors = [
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({event}) => event.placement === 'before',
+    actions: [
+      ({event}) =>
+        event.blocks.map((block, index) =>
+          raise({
+            type: 'insert.block',
+            block,
+            placement: index === 0 ? 'before' : 'after',
+            select: 'end',
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({event}) => event.placement === 'after',
+    actions: [
+      ({event}) =>
+        event.blocks.map((block) =>
+          raise({
+            type: 'insert.block',
+            block,
+            placement: 'after',
+            select: 'end',
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({snapshot, event}) => {
+      if (event.placement !== 'auto') {
+        return false
+      }
+
+      const focusTextBlock = getFocusTextBlock(snapshot)
+
+      if (!focusTextBlock) {
+        return false
+      }
+
+      return true
+    },
+    actions: [
+      ({event}) =>
+        event.blocks.length === 1
+          ? [
+              raise({
+                type: 'insert.block',
+                block: event.blocks[0],
+                placement: 'auto',
+                select: 'end',
+              }),
+            ]
+          : event.blocks.flatMap((block, index) =>
+              index === 0
+                ? [
+                    raise({
+                      type: 'insert.break',
+                    }),
+                    raise({
+                      type: 'select.previous block',
+                      select: 'end',
+                    }),
+                    raise({
+                      type: 'insert.block',
+                      block,
+                      placement: 'auto',
+                      select: 'end',
+                    }),
+                  ]
+                : index === event.blocks.length - 1
+                  ? [
+                      raise({
+                        type: 'select.next block',
+                        select: 'start',
+                      }),
+                      raise({
+                        type: 'insert.block',
+                        block,
+                        placement: 'auto',
+                        select: 'end',
+                      }),
+                    ]
+                  : [
+                      raise({
+                        type: 'insert.block',
+                        block,
+                        placement: 'after',
+                        select: 'end',
+                      }),
+                    ],
+            ),
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({event}) => event.placement === 'auto',
+    actions: [
+      ({event}) =>
+        event.blocks.map((block, index) =>
+          raise({
+            type: 'insert.block',
+            block,
+            placement: index === 0 ? 'auto' : 'after',
+            select: 'end',
+          }),
+        ),
+    ],
+  }),
+]

package/src/behaviors/behavior.internal.list-item.ts

@@ -0,0 +1,61 @@
+import {getSelectedTextBlocks, isActiveListItem} from '../selectors'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalListItemBehaviors = [
+  defineBehavior({
+    on: 'list item.add',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      ({event}, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.set',
+            at: block.path,
+            props: {
+              level: 1,
+              listItem: event.listItem,
+            },
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.remove',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      (_, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.unset',
+            at: block.path,
+            props: ['level', 'listItem'],
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.toggle',
+    guard: ({snapshot, event}) => isActiveListItem(event.listItem)(snapshot),
+    actions: [
+      ({event}) => [
+        raise({type: 'list item.remove', listItem: event.listItem}),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.toggle',
+    guard: ({snapshot, event}) => !isActiveListItem(event.listItem)(snapshot),
+    actions: [
+      ({event}) => [raise({type: 'list item.add', listItem: event.listItem})],
+    ],
+  }),
+]

package/src/behaviors/behavior.internal.select.ts

@@ -0,0 +1,62 @@
+import {getNextBlock, getPreviousBlock} from '../selectors'
+import {getBlockEndPoint, getBlockStartPoint} from '../utils'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalSelectBehaviors = [
+  defineBehavior({
+    on: 'select.previous block',
+    guard: ({snapshot, event}) => {
+      const previousBlock = getPreviousBlock(snapshot)
+
+      if (!previousBlock) {
+        return false
+      }
+
+      const point =
+        event.select === 'end'
+          ? getBlockEndPoint(previousBlock)
+          : getBlockStartPoint(previousBlock)
+
+      return {
+        selection: {
+          anchor: point,
+          focus: point,
+        },
+      }
+    },
+    actions: [
+      (_, {selection}) => [
+        raise({
+          type: 'select',
+          selection,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'select.next block',
+    guard: ({snapshot, event}) => {
+      const nextBlock = getNextBlock(snapshot)
+
+      if (!nextBlock) {
+        return false
+      }
+
+      const point =
+        event.select === 'end'
+          ? getBlockEndPoint(nextBlock)
+          : getBlockStartPoint(nextBlock)
+
+      return {selection: {anchor: point, focus: point}}
+    },
+    actions: [
+      (_, {selection}) => [
+        raise({
+          type: 'select',
+          selection,
+        }),
+      ],
+    ],
+  }),
+]

package/src/behaviors/behavior.internal.style.ts

@@ -0,0 +1,54 @@
+import {getSelectedTextBlocks, isActiveStyle} from '../selectors'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalStyleBehaviors = [
+  defineBehavior({
+    on: 'style.add',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      ({event}, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.set',
+            at: block.path,
+            props: {
+              style: event.style,
+            },
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'style.remove',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      (_, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.unset',
+            at: block.path,
+            props: ['style'],
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'style.toggle',
+    guard: ({snapshot, event}) => isActiveStyle(event.style)(snapshot),
+    actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
+  }),
+  defineBehavior({
+    on: 'style.toggle',
+    guard: ({snapshot, event}) => !isActiveStyle(event.style)(snapshot),
+    actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
+  }),
+]