@portabletext/editor 1.36.6 → 1.38.0

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

@@ -1,9 +1,4 @@
-import {deleteForward, insertText, Path, Transforms} from 'slate'
-import {ReactEditor} from 'slate-react'
-import type {
-  InternalBehaviorAction,
-  SyntheticBehaviorEvent,
-} from '../behaviors/behavior.types'
+import type {InternalBehaviorAction} from '../behaviors/behavior.types'
 import type {EditorContext} from '../editor/editor-snapshot'
 import {
   addAnnotationActionImplementation,
@@ -18,18 +13,21 @@ import {
   historyRedoActionImplementation,
   historyUndoActionImplementation,
 } from '../editor/plugins/createWithUndoRedo'
-import {toSlatePath} from '../internal-utils/paths'
-import {toSlateRange} from '../internal-utils/ranges'
-import {toSlateValue} from '../internal-utils/values'
 import type {PickFromUnion} from '../type-utils'
-import {insertBlock} from './behavior.action-utils.insert-block'
 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 {insertBlockObjectActionImplementation} from './behavior.action.insert-block-object'
+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,
@@ -38,11 +36,23 @@ import {
 import {insertInlineObjectActionImplementation} from './behavior.action.insert-inline-object'
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import {insertBlockActionImplementation} from './behavior.action.insert.block'
+import {insertBlockObjectActionImplementation} from './behavior.action.insert.block-object'
+import {insertTextActionImplementation} from './behavior.action.insert.text'
+import {insertTextBlockActionImplementation} from './behavior.action.insert.text-block'
 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,
@@ -75,58 +85,19 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'annotation.toggle': toggleAnnotationActionImplementation,
   'block.set': blockSetBehaviorActionImplementation,
   'block.unset': blockUnsetBehaviorActionImplementation,
-  'blur': ({action}) => {
-    ReactEditor.blur(action.editor)
-  },
+  'blur': blurActionImplementation,
   'data transfer.set': dataTransferSetActionImplementation,
   'decorator.add': decoratorAddActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
   'decorator.toggle': toggleDecoratorActionImplementation,
-  'focus': ({action}) => {
-    ReactEditor.focus(action.editor)
-  },
+  'focus': focusActionImplementation,
   'delete': deleteActionImplementation,
-  'delete.backward': ({action}) => {
-    action.editor.deleteBackward(action.unit)
-  },
-  'delete.forward': ({action}) => {
-    deleteForward(action.editor, action.unit)
-  },
-  'delete.block': ({action}) => {
-    const range = toSlateRange(
-      {
-        anchor: {path: action.blockPath, offset: 0},
-        focus: {path: action.blockPath, offset: 0},
-      },
-      action.editor,
-    )
-
-    if (!range) {
-      console.error('Unable to find Slate range from selection points')
-      return
-    }
-
-    Transforms.removeNodes(action.editor, {
-      at: range,
-    })
-  },
+  'delete.backward': deleteBackwardActionImplementation,
+  'delete.forward': deleteForwardActionImplementation,
+  'delete.block': deleteBlockActionImplementation,
   'delete.text': deleteTextActionImplementation,
-  'deserialization.failure': ({action}) => {
-    console.warn(
-      `Deserialization of ${action.mimeType} failed with reason "${action.reason}"`,
-    )
-  },
-  'deserialization.success': ({context, action}) => {
-    insertBlocksActionImplementation({
-      context,
-      action: {
-        type: 'insert.blocks',
-        blocks: action.data,
-        editor: action.editor,
-        placement: 'auto',
-      },
-    })
-  },
+  'deserialization.failure': deserializationFailureActionImplementation,
+  'deserialization.success': deserializationSuccessActionImplementation,
   'history.redo': historyRedoActionImplementation,
   'history.undo': historyUndoActionImplementation,
   'insert.block': insertBlockActionImplementation,
@@ -136,132 +107,21 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'insert.inline object': insertInlineObjectActionImplementation,
   'insert.soft break': insertSoftBreakActionImplementation,
   'insert.span': insertSpanActionImplementation,
-  'insert.text': ({action}) => {
-    insertText(action.editor, action.text)
-  },
-  'insert.text block': ({context, action}) => {
-    const block = toSlateValue(
-      [
-        {
-          _key: context.keyGenerator(),
-          _type: context.schema.block.name,
-          style: context.schema.styles[0].value ?? 'normal',
-          markDefs: [],
-          children: action.textBlock?.children?.map((child) => ({
-            ...child,
-            _key: context.keyGenerator(),
-          })) ?? [
-            {
-              _type: context.schema.span.name,
-              _key: context.keyGenerator(),
-              text: '',
-            },
-          ],
-        },
-      ],
-      {schemaTypes: context.schema},
-    )[0]
-
-    insertBlock({
-      block,
-      editor: action.editor,
-      schema: context.schema,
-      placement: action.placement,
-    })
-  },
-  'effect': ({action}) => {
-    action.effect()
-  },
+  'insert.text': insertTextActionImplementation,
+  'insert.text block': insertTextBlockActionImplementation,
+  'effect': effectActionImplementation,
   'list item.add': addListItemActionImplementation,
   'list item.remove': removeListItemActionImplementation,
   'list item.toggle': toggleListItemActionImplementation,
-  'move.block': ({action}) => {
-    const at = [toSlatePath(action.at, action.editor)[0]]
-    const to = [toSlatePath(action.to, action.editor)[0]]
-
-    Transforms.moveNodes(action.editor, {
-      at,
-      to,
-      mode: 'highest',
-    })
-  },
-  'move.block down': ({action}) => {
-    const at = [toSlatePath(action.at, action.editor)[0]]
-    const to = [Path.next(at)[0]]
-
-    Transforms.moveNodes(action.editor, {
-      at,
-      to,
-      mode: 'highest',
-    })
-  },
-  'move.block up': ({action}) => {
-    const at = [toSlatePath(action.at, action.editor)[0]]
-
-    if (!Path.hasPrevious(at)) {
-      return
-    }
-
-    const to = [Path.previous(at)[0]]
-
-    Transforms.moveNodes(action.editor, {
-      at,
-      to,
-      mode: 'highest',
-    })
-  },
-  'noop': () => {},
-  'select': ({action}) => {
-    const newSelection = toSlateRange(action.selection, action.editor)
-
-    if (newSelection) {
-      Transforms.select(action.editor, newSelection)
-    } else {
-      Transforms.deselect(action.editor)
-    }
-  },
-  'select.previous block': ({action}) => {
-    if (!action.editor.selection) {
-      console.error('Unable to select previous block without a selection')
-      return
-    }
-
-    const blockPath = action.editor.selection.focus.path.slice(0, 1)
-
-    if (!Path.hasPrevious(blockPath)) {
-      console.error("There's no previous block to select")
-      return
-    }
-
-    const previousBlockPath = Path.previous(blockPath)
-
-    Transforms.select(action.editor, previousBlockPath)
-  },
-  'select.next block': ({action}) => {
-    if (!action.editor.selection) {
-      console.error('Unable to select next block without a selection')
-      return
-    }
-
-    const blockPath = action.editor.selection.focus.path.slice(0, 1)
-    const nextBlockPath = [blockPath[0] + 1]
-
-    Transforms.select(action.editor, nextBlockPath)
-  },
-  'serialization.failure': ({action}) => {
-    console.warn(
-      `Serialization of ${action.mimeType} failed with reason "${action.reason}"`,
-    )
-  },
-  'serialization.success': ({context, action}) => {
-    dataTransferSetActionImplementation({
-      context,
-      action: {
-        ...action,
-        type: 'data transfer.set',
-      },
-    })
-  },
+  '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,
@@ -273,38 +133,6 @@ export function performAction({
 }: {
   context: BehaviorActionImplementationContext
   action: InternalBehaviorAction
-}) {
-  switch (action.type) {
-    case 'noop': {
-      behaviorActionImplementations.noop({
-        context,
-        action,
-      })
-      break
-    }
-    case 'effect': {
-      behaviorActionImplementations.effect({
-        context,
-        action,
-      })
-      break
-    }
-    default: {
-      performDefaultAction({context, action})
-    }
-  }
-}
-
-function performDefaultAction({
-  context,
-  action,
-}: {
-  context: BehaviorActionImplementationContext
-  action: PickFromUnion<
-    InternalBehaviorAction,
-    'type',
-    SyntheticBehaviorEvent['type']
-  >
 }) {
   switch (action.type) {
     case 'annotation.add': {
@@ -426,6 +254,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'effect': {
+      behaviorActionImplementations.effect({
+        context,
+        action,
+      })
+      break
+    }
     case 'focus': {
       behaviorActionImplementations.focus({
         context,
@@ -552,6 +387,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'noop': {
+      behaviorActionImplementations.noop({
+        context,
+        action,
+      })
+      break
+    }
     case 'select': {
       behaviorActionImplementations.select({
         context,

package/src/behaviors/behavior.core.block-objects.ts

@@ -25,12 +25,7 @@ const arrowUpOnLonelyBlockObject = defineBehavior({
 
     return isArrowUp && focusBlockObject && !previousBlock
   },
-  actions: [
-    () => [
-      raise({type: 'insert.text block', placement: 'before'}),
-      raise({type: 'select.previous block'}),
-    ],
-  ],
+  actions: [() => [raise({type: 'insert.text block', placement: 'before'})]],
 })
 
 const breakingBlockObject = defineBehavior({
@@ -44,6 +39,38 @@ const breakingBlockObject = defineBehavior({
   actions: [() => [raise({type: 'insert.text block', placement: 'after'})]],
 })
 
+const clickingAboveLonelyBlockObject = defineBehavior({
+  on: 'mouse.click',
+  guard: ({snapshot, event}) => {
+    const focusBlockObject = selectors.getFocusBlockObject(snapshot)
+    const previousBlock = selectors.getPreviousBlock(snapshot)
+
+    return (
+      event.position.isEditor &&
+      event.position.block === 'start' &&
+      focusBlockObject &&
+      !previousBlock
+    )
+  },
+  actions: [() => [raise({type: 'insert.text block', placement: 'before'})]],
+})
+
+const clickingBelowLonelyBlockObject = defineBehavior({
+  on: 'mouse.click',
+  guard: ({snapshot, event}) => {
+    const focusBlockObject = selectors.getFocusBlockObject(snapshot)
+    const nextBlock = selectors.getNextBlock(snapshot)
+
+    return (
+      event.position.isEditor &&
+      event.position.block === 'end' &&
+      focusBlockObject &&
+      !nextBlock
+    )
+  },
+  actions: [() => [raise({type: 'insert.text block', placement: 'after'})]],
+})
+
 const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
   on: 'delete.backward',
   guard: ({snapshot}) => {
@@ -122,6 +149,8 @@ export const coreBlockObjectBehaviors = {
   arrowDownOnLonelyBlockObject,
   arrowUpOnLonelyBlockObject,
   breakingBlockObject,
+  clickingAboveLonelyBlockObject,
+  clickingBelowLonelyBlockObject,
   deletingEmptyTextBlockAfterBlockObject,
   deletingEmptyTextBlockBeforeBlockObject,
 }

package/src/behaviors/behavior.core.insert-break.ts

@@ -109,6 +109,7 @@ const breakingAtTheStartOfTextBlock = defineBehavior({
           style: snapshot.context.schema.styles[0]?.value,
         },
         placement: 'before',
+        select: 'none',
       }),
     ],
   ],

package/src/behaviors/behavior.core.ts

@@ -13,6 +13,8 @@ export const coreBehaviors = [
   coreDecoratorBehaviors.emShortcut,
   coreDecoratorBehaviors.underlineShortcut,
   coreDecoratorBehaviors.codeShortcut,
+  coreBlockObjectBehaviors.clickingAboveLonelyBlockObject,
+  coreBlockObjectBehaviors.clickingBelowLonelyBlockObject,
   coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject,
   coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject,
   coreBlockObjectBehaviors.breakingBlockObject,