@portabletext/editor 1.12.3 → 1.14.0

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

@@ -1,9 +1,17 @@
-import {deleteBackward, deleteForward, insertText, Transforms} from 'slate'
+import {
+  deleteBackward,
+  deleteForward,
+  insertText,
+  Path,
+  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,
@@ -14,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'],
@@ -40,7 +61,7 @@ export type BehaviorActionImplementation<
   context,
   action,
 }: {
-  context: BehaviorActionContext
+  context: BehaviorActionImplementationContext
   action: PickFromUnion<BehaviorAction, 'type', TBehaviorActionType>
 }) => TReturnType
 
@@ -52,47 +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})
-    }
-  },
-  'delete backward': ({action}) => {
+  'copy': () => {},
+  '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},
@@ -110,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,
@@ -148,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(
       [
         {
@@ -188,9 +186,48 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'effect': ({action}) => {
     action.effect()
   },
-  'paste': ({action}) => {
-    action.editor.insertData(action.clipboardData)
+  'key.down': () => {},
+  'key.up': () => {},
+  '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': () => {},
+  'paste': () => {},
   'select': ({action}) => {
     const newSelection = toSlateRange(action.selection, action.editor)
 
@@ -200,6 +237,34 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       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)
+  },
   'reselect': ({action}) => {
     const selection = action.editor.selection
 
@@ -208,60 +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 'insert.text block': {
+      behaviorActionImplementations['insert.text block']({
         context,
         action,
       })
       break
     }
-    case 'delete text': {
-      behaviorActionImplementations['delete text']({
+    case 'list item.add': {
+      behaviorActionImplementations['list item.add']({
         context,
         action,
       })
       break
     }
-    case 'insert block object': {
-      behaviorActionImplementations['insert block object']({
+    case 'list item.remove': {
+      behaviorActionImplementations['list item.remove']({
         context,
         action,
       })
       break
     }
-    case 'insert span': {
-      behaviorActionImplementations['insert span']({
+    case 'move.block': {
+      behaviorActionImplementations['move.block']({
         context,
         action,
       })
       break
     }
-    case 'insert text block': {
-      behaviorActionImplementations['insert text 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,
       })
@@ -281,6 +374,20 @@ export function performAction({
       })
       break
     }
+    case 'select previous block': {
+      behaviorActionImplementations['select previous block']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'select next block': {
+      behaviorActionImplementations['select next block']({
+        context,
+        action,
+      })
+      break
+    }
     case 'reselect': {
       behaviorActionImplementations.reselect({
         context,
@@ -288,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})
     }
@@ -298,7 +433,7 @@ function performDefaultAction({
   context,
   action,
 }: {
-  context: BehaviorActionContext
+  context: BehaviorActionImplementationContext
   action: PickFromUnion<BehaviorAction, 'type', BehaviorEvent['type']>
 }) {
   switch (action.type) {
@@ -323,6 +458,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'blur': {
+      behaviorActionImplementations.blur({
+        context,
+        action,
+      })
+      break
+    }
+    case 'copy': {
+      behaviorActionImplementations.copy({
+        context,
+        action,
+      })
+      break
+    }
     case 'decorator.add': {
       behaviorActionImplementations['decorator.add']({
         context,
@@ -344,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,
       })
@@ -365,32 +514,74 @@ function performDefaultAction({
       })
       break
     }
-    case 'insert break': {
-      behaviorActionImplementations['insert break']({
+    case 'insert.block object': {
+      behaviorActionImplementations['insert.block object']({
         context,
         action,
       })
       break
     }
-    case 'insert soft break': {
-      behaviorActionImplementations['insert soft break']({
+    case 'insert.inline object': {
+      behaviorActionImplementations['insert.inline object']({
         context,
         action,
       })
       break
     }
-    case 'insert text': {
-      behaviorActionImplementations['insert text']({
+    case 'insert.break': {
+      behaviorActionImplementations['insert.break']({
         context,
         action,
       })
       break
     }
-    default: {
+    case 'insert.soft break': {
+      behaviorActionImplementations['insert.soft break']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert.text': {
+      behaviorActionImplementations['insert.text']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'key.down': {
+      behaviorActionImplementations['key.down']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'key.up': {
+      behaviorActionImplementations['key.up']({
+        context,
+        action,
+      })
+      break
+    }
+    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

@@ -0,0 +1,76 @@
+import {
+  getFirstBlock,
+  getLastBlock,
+  getSelectedBlocks,
+} from '../../selectors/selectors'
+import {isHotkey} from '../../utils/is-hotkey'
+import {defineBehavior} from './behavior.types'
+
+/**
+ * @alpha
+ */
+export type CodeEditorBehaviorsConfig = {
+  moveBlockUpShortcut: string
+  moveBlockDownShortcut: string
+}
+
+/**
+ * @alpha
+ */
+export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
+  return [
+    defineBehavior({
+      on: 'key.down',
+      guard: ({context, event}) => {
+        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 (!isMoveUpShortcut || !blocksAbove) {
+          return false
+        }
+
+        return {paths: selectedBlocks.map((block) => block.path)}
+      },
+      actions: [
+        ({paths}) =>
+          paths.map((at) => ({
+            type: 'move.block up',
+            at,
+          })),
+      ],
+    }),
+    defineBehavior({
+      on: 'key.down',
+      guard: ({context, event}) => {
+        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 (!isMoveDownShortcut || !blocksBelow) {
+          return false
+        }
+
+        return {paths: selectedBlocks.map((block) => block.path).reverse()}
+      },
+      actions: [
+        ({paths}) =>
+          paths.map((at) => ({
+            type: 'move.block down',
+            at,
+          })),
+      ],
+    }),
+  ]
+}