@portabletext/editor 1.12.3 → 1.14.0

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

@@ -1,30 +1,61 @@
 import {isPortableTextTextBlock} from '@sanity/types'
-import {defineBehavior} from './behavior.types'
 import {
   getFocusBlockObject,
   getFocusTextBlock,
   getNextBlock,
   getPreviousBlock,
-  isEmptyTextBlock,
   selectionIsCollapsed,
-} from './behavior.utils'
+} from '../../selectors/selectors'
+import {isHotkey} from '../../utils/is-hotkey'
+import {isEmptyTextBlock} from '../utils/utils'
+import {defineBehavior} from './behavior.types'
+
+const arrowDownOnLonelyBlockObject = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isArrowDown = isHotkey('ArrowDown', event.keyboardEvent)
+    const focusBlockObject = getFocusBlockObject({context})
+    const nextBlock = getNextBlock({context})
+
+    return isArrowDown && focusBlockObject && !nextBlock
+  },
+  actions: [() => [{type: 'insert.text block', placement: 'after'}]],
+})
+
+const arrowUpOnLonelyBlockObject = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
+    const focusBlockObject = getFocusBlockObject({context})
+    const previousBlock = getPreviousBlock({context})
+
+    return isArrowUp && focusBlockObject && !previousBlock
+  },
+  actions: [
+    () => [
+      {type: 'insert.text block', placement: 'before'},
+      {type: 'select previous block'},
+    ],
+  ],
+})
 
 const breakingBlockObject = defineBehavior({
-  on: 'insert break',
+  on: 'insert.break',
   guard: ({context}) => {
-    const focusBlockObject = getFocusBlockObject(context)
+    const focusBlockObject = getFocusBlockObject({context})
+    const collapsedSelection = selectionIsCollapsed({context})
 
-    return !!focusBlockObject
+    return collapsedSelection && focusBlockObject !== undefined
   },
-  actions: [() => [{type: 'insert text block', placement: 'after'}]],
+  actions: [() => [{type: 'insert.text block', placement: 'after'}]],
 })
 
 const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
-  on: 'delete backward',
+  on: 'delete.backward',
   guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const previousBlock = getPreviousBlock(context)
+    const focusTextBlock = getFocusTextBlock({context})
+    const selectionCollapsed = selectionIsCollapsed({context})
+    const previousBlock = getPreviousBlock({context})
 
     if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
       return false
@@ -40,9 +71,9 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock, previousBlock}) => [
+    ({focusTextBlock, previousBlock}) => [
       {
-        type: 'delete block',
+        type: 'delete.block',
         blockPath: focusTextBlock.path,
       },
       {
@@ -57,11 +88,11 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
 })
 
 const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
-  on: 'delete forward',
+  on: 'delete.forward',
   guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const nextBlock = getNextBlock(context)
+    const focusTextBlock = getFocusTextBlock({context})
+    const selectionCollapsed = selectionIsCollapsed({context})
+    const nextBlock = getNextBlock({context})
 
     if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
       return false
@@ -77,9 +108,9 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock, nextBlock}) => [
+    ({focusTextBlock, nextBlock}) => [
       {
-        type: 'delete block',
+        type: 'delete.block',
         blockPath: focusTextBlock.path,
       },
       {
@@ -94,6 +125,8 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
 })
 
 export const coreBlockObjectBehaviors = {
+  arrowDownOnLonelyBlockObject,
+  arrowUpOnLonelyBlockObject,
   breakingBlockObject,
   deletingEmptyTextBlockAfterBlockObject,
   deletingEmptyTextBlockBeforeBlockObject,

package/src/editor/behavior/behavior.core.decorators.ts

@@ -2,11 +2,12 @@ import {defineBehavior} from './behavior.types'
 
 const decoratorAdd = defineBehavior({
   on: 'decorator.add',
+  guard: ({event}) => ({decorator: event.decorator}),
   actions: [
-    ({event}) => [
+    ({decorator}) => [
       {
         type: 'decorator.add',
-        decorator: event.decorator,
+        decorator,
       },
       {
         type: 'reselect',
@@ -17,11 +18,12 @@ const decoratorAdd = defineBehavior({
 
 const decoratorRemove = defineBehavior({
   on: 'decorator.remove',
+  guard: ({event}) => ({decorator: event.decorator}),
   actions: [
-    ({event}) => [
+    ({decorator}) => [
       {
         type: 'decorator.remove',
-        decorator: event.decorator,
+        decorator,
       },
       {
         type: 'reselect',
@@ -32,11 +34,12 @@ const decoratorRemove = defineBehavior({
 
 const decoratorToggle = defineBehavior({
   on: 'decorator.toggle',
+  guard: ({event}) => ({decorator: event.decorator}),
   actions: [
-    ({event}) => [
+    ({decorator}) => [
       {
         type: 'decorator.toggle',
-        decorator: event.decorator,
+        decorator,
       },
       {
         type: 'reselect',

package/src/editor/behavior/behavior.core.lists.ts

@@ -1,16 +1,23 @@
-import {defineBehavior} from './behavior.types'
 import {
+  getFocusListBlock,
   getFocusSpan,
   getFocusTextBlock,
+  getSelectedBlocks,
   selectionIsCollapsed,
-} from './behavior.utils'
+} from '../../selectors/selectors'
+import {isHotkey} from '../../utils/is-hotkey'
+import {isEmptyTextBlock} from '../utils/utils'
+import {createGuards} from './behavior.guards'
+import {defineBehavior} from './behavior.types'
+
+const MAX_LIST_LEVEL = 10
 
 const clearListOnBackspace = defineBehavior({
-  on: 'delete backward',
+  on: 'delete.backward',
   guard: ({context}) => {
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const focusTextBlock = getFocusTextBlock(context)
-    const focusSpan = getFocusSpan(context)
+    const selectionCollapsed = selectionIsCollapsed({context})
+    const focusTextBlock = getFocusTextBlock({context})
+    const focusSpan = getFocusSpan({context})
 
     if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
       return false
@@ -27,22 +34,22 @@ const clearListOnBackspace = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock}) => [
+    ({focusTextBlock}) => [
       {
-        type: 'unset block',
+        type: 'text block.unset',
         props: ['listItem', 'level'],
-        paths: [focusTextBlock.path],
+        at: focusTextBlock.path,
       },
     ],
   ],
 })
 
 const unindentListOnBackspace = defineBehavior({
-  on: 'delete backward',
+  on: 'delete.backward',
   guard: ({context}) => {
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const focusTextBlock = getFocusTextBlock(context)
-    const focusSpan = getFocusSpan(context)
+    const selectionCollapsed = selectionIsCollapsed({context})
+    const focusTextBlock = getFocusTextBlock({context})
+    const focusSpan = getFocusSpan({context})
 
     if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
       return false
@@ -63,14 +70,129 @@ const unindentListOnBackspace = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock, level}) => [
+    ({focusTextBlock, level}) => [
       {
-        type: 'set block',
+        type: 'text block.set',
         level,
-        paths: [focusTextBlock.path],
+        at: focusTextBlock.path,
       },
     ],
   ],
 })
 
-export const coreListBehaviors = {clearListOnBackspace, unindentListOnBackspace}
+const clearListOnEnter = defineBehavior({
+  on: 'insert.break',
+  guard: ({context}) => {
+    const focusListBlock = getFocusListBlock({context})
+    const selectionCollapsed = selectionIsCollapsed({context})
+
+    if (!focusListBlock || !selectionCollapsed) {
+      return false
+    }
+
+    if (!isEmptyTextBlock(focusListBlock.node)) {
+      return false
+    }
+
+    return {focusListBlock}
+  },
+  actions: [
+    ({focusListBlock}) => [
+      {
+        type: 'text block.unset',
+        props: ['listItem', 'level'],
+        at: focusListBlock.path,
+      },
+    ],
+  ],
+})
+
+const indentListOnTab = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isTab = isHotkey('Tab', event.keyboardEvent)
+
+    if (!isTab) {
+      return false
+    }
+
+    const selectedBlocks = getSelectedBlocks({context})
+    const guards = createGuards(context)
+    const selectedListBlocks = selectedBlocks.flatMap((block) =>
+      guards.isListBlock(block.node)
+        ? [
+            {
+              node: block.node,
+              path: block.path,
+            },
+          ]
+        : [],
+    )
+
+    if (selectedListBlocks.length === selectedBlocks.length) {
+      return {selectedListBlocks}
+    }
+
+    return false
+  },
+  actions: [
+    ({selectedListBlocks}) =>
+      selectedListBlocks.map((selectedListBlock) => ({
+        type: 'text block.set',
+        level: Math.min(
+          MAX_LIST_LEVEL,
+          Math.max(1, selectedListBlock.node.level + 1),
+        ),
+        at: selectedListBlock.path,
+      })),
+  ],
+})
+
+const unindentListOnShiftTab = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isShiftTab = isHotkey('Shift+Tab', event.keyboardEvent)
+
+    if (!isShiftTab) {
+      return false
+    }
+
+    const selectedBlocks = getSelectedBlocks({context})
+    const guards = createGuards(context)
+    const selectedListBlocks = selectedBlocks.flatMap((block) =>
+      guards.isListBlock(block.node)
+        ? [
+            {
+              node: block.node,
+              path: block.path,
+            },
+          ]
+        : [],
+    )
+
+    if (selectedListBlocks.length === selectedBlocks.length) {
+      return {selectedListBlocks}
+    }
+
+    return false
+  },
+  actions: [
+    ({selectedListBlocks}) =>
+      selectedListBlocks.map((selectedListBlock) => ({
+        type: 'text block.set',
+        level: Math.min(
+          MAX_LIST_LEVEL,
+          Math.max(1, selectedListBlock.node.level - 1),
+        ),
+        at: selectedListBlock.path,
+      })),
+  ],
+})
+
+export const coreListBehaviors = {
+  clearListOnBackspace,
+  unindentListOnBackspace,
+  clearListOnEnter,
+  indentListOnTab,
+  unindentListOnShiftTab,
+}

package/src/editor/behavior/behavior.core.ts

@@ -4,8 +4,8 @@ import {coreListBehaviors} from './behavior.core.lists'
 import {defineBehavior} from './behavior.types'
 
 const softReturn = defineBehavior({
-  on: 'insert soft break',
-  actions: [() => [{type: 'insert text', text: '\n'}]],
+  on: 'insert.soft break',
+  actions: [() => [{type: 'insert.text', text: '\n'}]],
 })
 
 /**
@@ -16,11 +16,16 @@ export const coreBehaviors = [
   coreDecoratorBehaviors.decoratorAdd,
   coreDecoratorBehaviors.decoratorRemove,
   coreDecoratorBehaviors.decoratorToggle,
+  coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject,
+  coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject,
   coreBlockObjectBehaviors.breakingBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,
   coreListBehaviors.clearListOnBackspace,
   coreListBehaviors.unindentListOnBackspace,
+  coreListBehaviors.clearListOnEnter,
+  coreListBehaviors.indentListOnTab,
+  coreListBehaviors.unindentListOnShiftTab,
 ]
 
 /**

package/src/editor/behavior/behavior.guards.ts

@@ -0,0 +1,28 @@
+import {
+  isPortableTextListBlock,
+  isPortableTextTextBlock,
+  type PortableTextListBlock,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+
+/**
+ * @alpha
+ */
+export type BehaviorGuards = ReturnType<typeof createGuards>
+
+export function createGuards({
+  schema,
+}: {
+  schema: PortableTextMemberSchemaTypes
+}) {
+  function isListBlock(block: unknown): block is PortableTextListBlock {
+    return isPortableTextListBlock(block) && block._type === schema.block.name
+  }
+
+  function isTextBlock(block: unknown): block is PortableTextTextBlock {
+    return isPortableTextTextBlock(block) && block._type === schema.block.name
+  }
+
+  return {isListBlock, isTextBlock}
+}

package/src/editor/behavior/behavior.links.ts

@@ -1,6 +1,6 @@
+import {getFocusSpan, selectionIsCollapsed} from '../../selectors/selectors'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
-import {getFocusSpan, selectionIsCollapsed} from './behavior.utils'
 
 /**
  * @alpha
@@ -19,8 +19,8 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const selectionCollapsed = selectionIsCollapsed(context)
-      const text = event.clipboardData.getData('text/plain')
+      const selectionCollapsed = selectionIsCollapsed({context})
+      const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
@@ -34,7 +34,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       return false
     },
     actions: [
-      (_, {annotation}) => [
+      ({annotation}) => [
         {
           type: 'annotation.add',
           annotation,
@@ -45,14 +45,14 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkAtCaret = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const focusSpan = getFocusSpan(context)
-      const selectionCollapsed = selectionIsCollapsed(context)
+      const focusSpan = getFocusSpan({context})
+      const selectionCollapsed = selectionIsCollapsed({context})
 
       if (!focusSpan || !selectionCollapsed) {
         return false
       }
 
-      const text = event.clipboardData.getData('text/plain')
+      const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
@@ -66,9 +66,9 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       return false
     },
     actions: [
-      (_, {annotation, url}) => [
+      ({annotation, url}) => [
         {
-          type: 'insert span',
+          type: 'insert.span',
           text: url,
           annotations: [annotation],
         },