@portabletext/editor 1.13.0 → 1.14.1

package/src/editor/behavior/behavior.actions.ts

@@ -6,10 +6,12 @@ import {
   Transforms,
 } from 'slate'
 import {ReactEditor} from 'slate-react'
-import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import debug from '../../utils/debug'
+import {toSlatePath} from '../../utils/paths'
 import {toSlateRange} from '../../utils/ranges'
 import {fromSlateValue, toSlateValue} from '../../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
+import type {EditorContext} from '../editor-snapshot'
 import {
   addAnnotationActionImplementation,
   removeAnnotationActionImplementation,
@@ -20,24 +22,37 @@ import {
   removeDecoratorActionImplementation,
   toggleDecoratorActionImplementation,
 } from '../plugins/createWithPortableTextMarkModel'
+import {blockOffsetToSpanSelectionPoint} from '../utils/utils.block-offset'
 import {insertBlock} from './behavior.action-utils.insert-block'
 import {insertBlockObjectActionImplementation} from './behavior.action.insert-block-object'
 import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
 } from './behavior.action.insert-break'
+import {insertInlineObjectActionImplementation} from './behavior.action.insert-inline-object'
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
+import {
+  addListItemActionImplementation,
+  removeListItemActionImplementation,
+  toggleListItemActionImplementation,
+} from './behavior.action.list-item'
+import {
+  addStyleActionImplementation,
+  removeStyleActionImplementation,
+  toggleStyleActionImplementation,
+} from './behavior.action.style'
+import {textBlockSetActionImplementation} from './behavior.action.text-block.set'
+import {textBlockUnsetActionImplementation} from './behavior.action.text-block.unset'
 import type {
   BehaviorAction,
   BehaviorEvent,
   PickFromUnion,
 } from './behavior.types'
-import {blockOffsetToSpanSelectionPoint} from './behavior.utils.block-offset'
 
-export type BehaviorActionContext = {
-  keyGenerator: () => string
-  schema: PortableTextMemberSchemaTypes
-}
+export type BehaviorActionImplementationContext = Pick<
+  EditorContext,
+  'keyGenerator' | 'schema'
+>
 
 export type BehaviorActionImplementation<
   TBehaviorActionType extends BehaviorAction['type'],
@@ -46,7 +61,7 @@ export type BehaviorActionImplementation<
   context,
   action,
 }: {
-  context: BehaviorActionContext
+  context: BehaviorActionImplementationContext
   action: PickFromUnion<BehaviorAction, 'type', TBehaviorActionType>
 }) => TReturnType
 
@@ -58,48 +73,23 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'annotation.add': addAnnotationActionImplementation,
   'annotation.remove': removeAnnotationActionImplementation,
   'annotation.toggle': toggleAnnotationActionImplementation,
+  'blur': ({action}) => {
+    ReactEditor.blur(action.editor)
+  },
   'decorator.add': addDecoratorActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
   'decorator.toggle': toggleDecoratorActionImplementation,
   'focus': ({action}) => {
     ReactEditor.focus(action.editor)
   },
-  'set block': ({action}) => {
-    for (const path of action.paths) {
-      const at = toSlateRange(
-        {anchor: {path, offset: 0}, focus: {path, offset: 0}},
-        action.editor,
-      )!
-
-      Transforms.setNodes(
-        action.editor,
-        {
-          ...(action.style ? {style: action.style} : {}),
-          ...(action.listItem ? {listItem: action.listItem} : {}),
-          ...(action.level ? {level: action.level} : {}),
-        },
-        {at},
-      )
-    }
-  },
-  'unset block': ({action}) => {
-    for (const path of action.paths) {
-      const at = toSlateRange(
-        {anchor: {path, offset: 0}, focus: {path, offset: 0}},
-        action.editor,
-      )!
-
-      Transforms.unsetNodes(action.editor, action.props, {at})
-    }
-  },
   'copy': () => {},
-  'delete backward': ({action}) => {
+  'delete.backward': ({action}) => {
     deleteBackward(action.editor, action.unit)
   },
-  'delete forward': ({action}) => {
+  'delete.forward': ({action}) => {
     deleteForward(action.editor, action.unit)
   },
-  'delete block': ({action}) => {
+  'delete.block': ({action}) => {
     const range = toSlateRange(
       {
         anchor: {path: action.blockPath, offset: 0},
@@ -117,7 +107,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       at: range,
     })
   },
-  'delete text': ({context, action}) => {
+  'delete.text': ({context, action}) => {
     const value = fromSlateValue(
       action.editor.children,
       context.schema.block.name,
@@ -155,14 +145,15 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       at: range,
     })
   },
-  'insert block object': insertBlockObjectActionImplementation,
-  'insert break': insertBreakActionImplementation,
-  'insert soft break': insertSoftBreakActionImplementation,
-  'insert span': insertSpanActionImplementation,
-  'insert text': ({action}) => {
+  'insert.block object': insertBlockObjectActionImplementation,
+  'insert.break': insertBreakActionImplementation,
+  'insert.inline object': insertInlineObjectActionImplementation,
+  'insert.soft break': insertSoftBreakActionImplementation,
+  'insert.span': insertSpanActionImplementation,
+  'insert.text': ({action}) => {
     insertText(action.editor, action.text)
   },
-  'insert text block': ({context, action}) => {
+  'insert.text block': ({context, action}) => {
     const block = toSlateValue(
       [
         {
@@ -197,51 +188,45 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   },
   'key.down': () => {},
   'key.up': () => {},
-  'move block': ({action}) => {
-    const location = toSlateRange(
-      {
-        anchor: {
-          path: action.blockPath,
-          offset: 0,
-        },
-        focus: {
-          path: action.blockPath,
-          offset: 0,
-        },
-      },
-      action.editor,
-    )
+  '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]]
 
-    if (!location) {
-      console.error('Unable to find Slate range from selection points')
-      return
-    }
+    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]]
 
-    const newLocation = toSlateRange(
-      {
-        anchor: {
-          path: action.to,
-          offset: 0,
-        },
-        focus: {
-          path: action.to,
-          offset: 0,
-        },
-      },
-      action.editor,
-    )
+    Transforms.moveNodes(action.editor, {
+      at,
+      to,
+      mode: 'highest',
+    })
+  },
+  'move.block up': ({action}) => {
+    const at = [toSlatePath(action.at, action.editor)[0]]
 
-    if (!newLocation) {
-      console.error('Unable to find Slate range from selection points')
+    if (!Path.hasPrevious(at)) {
       return
     }
 
+    const to = [Path.previous(at)[0]]
+
     Transforms.moveNodes(action.editor, {
-      at: location,
-      to: newLocation.anchor.path.slice(0, 1),
+      at,
+      to,
       mode: 'highest',
     })
   },
+  'noop': () => {},
   'paste': () => {},
   'select': ({action}) => {
     const newSelection = toSlateRange(action.selection, action.editor)
@@ -288,67 +273,88 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       action.editor.selection = {...selection}
     }
   },
+  'style.toggle': toggleStyleActionImplementation,
+  'style.add': addStyleActionImplementation,
+  'style.remove': removeStyleActionImplementation,
+  'text block.set': textBlockSetActionImplementation,
+  'text block.unset': textBlockUnsetActionImplementation,
 }
 
 export function performAction({
   context,
   action,
 }: {
-  context: BehaviorActionContext
+  context: BehaviorActionImplementationContext
   action: BehaviorAction
 }) {
+  debug('Behavior action', action)
+
   switch (action.type) {
-    case 'delete block': {
-      behaviorActionImplementations['delete block']({
+    case 'delete.block': {
+      behaviorActionImplementations['delete.block']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'delete.text': {
+      behaviorActionImplementations['delete.text']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert.span': {
+      behaviorActionImplementations['insert.span']({
         context,
         action,
       })
       break
     }
-    case 'delete text': {
-      behaviorActionImplementations['delete text']({
+    case 'insert.text block': {
+      behaviorActionImplementations['insert.text block']({
         context,
         action,
       })
       break
     }
-    case 'insert block object': {
-      behaviorActionImplementations['insert block object']({
+    case 'list item.add': {
+      behaviorActionImplementations['list item.add']({
         context,
         action,
       })
       break
     }
-    case 'insert span': {
-      behaviorActionImplementations['insert span']({
+    case 'list item.remove': {
+      behaviorActionImplementations['list item.remove']({
         context,
         action,
       })
       break
     }
-    case 'insert text block': {
-      behaviorActionImplementations['insert text block']({
+    case 'move.block': {
+      behaviorActionImplementations['move.block']({
         context,
         action,
       })
       break
     }
-    case 'move block': {
-      behaviorActionImplementations['move block']({
+    case 'move.block down': {
+      behaviorActionImplementations['move.block down']({
         context,
         action,
       })
       break
     }
-    case 'set block': {
-      behaviorActionImplementations['set block']({
+    case 'move.block up': {
+      behaviorActionImplementations['move.block up']({
         context,
         action,
       })
       break
     }
-    case 'unset block': {
-      behaviorActionImplementations['unset block']({
+    case 'noop': {
+      behaviorActionImplementations.noop({
         context,
         action,
       })
@@ -389,6 +395,34 @@ export function performAction({
       })
       break
     }
+    case 'style.add': {
+      behaviorActionImplementations['style.add']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'style.remove': {
+      behaviorActionImplementations['style.remove']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'text block.set': {
+      behaviorActionImplementations['text block.set']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'text block.unset': {
+      behaviorActionImplementations['text block.unset']({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       performDefaultAction({context, action})
     }
@@ -399,7 +433,7 @@ function performDefaultAction({
   context,
   action,
 }: {
-  context: BehaviorActionContext
+  context: BehaviorActionImplementationContext
   action: PickFromUnion<BehaviorAction, 'type', BehaviorEvent['type']>
 }) {
   switch (action.type) {
@@ -424,6 +458,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'blur': {
+      behaviorActionImplementations.blur({
+        context,
+        action,
+      })
+      break
+    }
     case 'copy': {
       behaviorActionImplementations.copy({
         context,
@@ -452,15 +493,15 @@ function performDefaultAction({
       })
       break
     }
-    case 'delete backward': {
-      behaviorActionImplementations['delete backward']({
+    case 'delete.backward': {
+      behaviorActionImplementations['delete.backward']({
         context,
         action,
       })
       break
     }
-    case 'delete forward': {
-      behaviorActionImplementations['delete forward']({
+    case 'delete.forward': {
+      behaviorActionImplementations['delete.forward']({
         context,
         action,
       })
@@ -473,22 +514,36 @@ function performDefaultAction({
       })
       break
     }
-    case 'insert break': {
-      behaviorActionImplementations['insert break']({
+    case 'insert.block object': {
+      behaviorActionImplementations['insert.block object']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert.inline object': {
+      behaviorActionImplementations['insert.inline object']({
         context,
         action,
       })
       break
     }
-    case 'insert soft break': {
-      behaviorActionImplementations['insert soft break']({
+    case 'insert.break': {
+      behaviorActionImplementations['insert.break']({
         context,
         action,
       })
       break
     }
-    case 'insert text': {
-      behaviorActionImplementations['insert text']({
+    case 'insert.soft break': {
+      behaviorActionImplementations['insert.soft break']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert.text': {
+      behaviorActionImplementations['insert.text']({
         context,
         action,
       })
@@ -508,11 +563,25 @@ function performDefaultAction({
       })
       break
     }
-    default: {
+    case 'list item.toggle': {
+      behaviorActionImplementations['list item.toggle']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'paste': {
       behaviorActionImplementations.paste({
         context,
         action,
       })
+      break
+    }
+    default: {
+      behaviorActionImplementations['style.toggle']({
+        context,
+        action,
+      })
     }
   }
 }

package/src/editor/behavior/behavior.code-editor.ts

@@ -1,11 +1,10 @@
+import {
+  getFirstBlock,
+  getLastBlock,
+  getSelectedBlocks,
+} from '../../selectors/selectors'
 import {isHotkey} from '../../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
-import {
-  getFocusBlock,
-  getNextBlock,
-  getPreviousBlock,
-  selectionIsCollapsed,
-} from './behavior.utils'
 
 /**
  * @alpha
@@ -23,63 +22,54 @@ export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
     defineBehavior({
       on: 'key.down',
       guard: ({context, event}) => {
-        const isAltArrowUp = isHotkey(
+        const isMoveUpShortcut = isHotkey(
           config.moveBlockUpShortcut,
           event.keyboardEvent,
         )
+        const firstBlock = getFirstBlock({context})
+        const selectedBlocks = getSelectedBlocks({context})
+        const blocksAbove =
+          firstBlock?.node._key !== selectedBlocks[0]?.node._key
 
-        if (!isAltArrowUp || !selectionIsCollapsed(context)) {
+        if (!isMoveUpShortcut || !blocksAbove) {
           return false
         }
 
-        const focusBlock = getFocusBlock(context)
-        const previousBlock = getPreviousBlock(context)
-
-        if (focusBlock && previousBlock) {
-          return {focusBlock, previousBlock}
-        }
-
-        return false
+        return {paths: selectedBlocks.map((block) => block.path)}
       },
       actions: [
-        (_, {focusBlock, previousBlock}) => [
-          {
-            type: 'move block',
-            blockPath: focusBlock.path,
-            to: previousBlock.path,
-          },
-        ],
+        ({paths}) =>
+          paths.map((at) => ({
+            type: 'move.block up',
+            at,
+          })),
       ],
     }),
     defineBehavior({
       on: 'key.down',
       guard: ({context, event}) => {
-        const isAltArrowDown = isHotkey(
+        const isMoveDownShortcut = isHotkey(
           config.moveBlockDownShortcut,
           event.keyboardEvent,
         )
+        const lastBlock = getLastBlock({context})
+        const selectedBlocks = getSelectedBlocks({context})
+        const blocksBelow =
+          lastBlock?.node._key !==
+          selectedBlocks[selectedBlocks.length - 1]?.node._key
 
-        if (!isAltArrowDown || !selectionIsCollapsed(context)) {
+        if (!isMoveDownShortcut || !blocksBelow) {
           return false
         }
 
-        const focusBlock = getFocusBlock(context)
-        const nextBlock = getNextBlock(context)
-
-        if (focusBlock && nextBlock) {
-          return {focusBlock, nextBlock}
-        }
-
-        return false
+        return {paths: selectedBlocks.map((block) => block.path).reverse()}
       },
       actions: [
-        (_, {focusBlock, nextBlock}) => [
-          {
-            type: 'move block',
-            blockPath: focusBlock.path,
-            to: nextBlock.path,
-          },
-        ],
+        ({paths}) =>
+          paths.map((at) => ({
+            type: 'move.block down',
+            at,
+          })),
       ],
     }),
   ]