@portabletext/editor 1.13.0 → 1.14.1

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

@@ -1,61 +1,61 @@
 import {isPortableTextTextBlock} from '@sanity/types'
-import {isHotkey} from '../../utils/is-hotkey'
-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)
+    const focusBlockObject = getFocusBlockObject({context})
+    const nextBlock = getNextBlock({context})
 
     return isArrowDown && focusBlockObject && !nextBlock
   },
-  actions: [() => [{type: 'insert text block', placement: 'after'}]],
+  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)
+    const focusBlockObject = getFocusBlockObject({context})
+    const previousBlock = getPreviousBlock({context})
 
     return isArrowUp && focusBlockObject && !previousBlock
   },
   actions: [
     () => [
-      {type: 'insert text block', placement: 'before'},
+      {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 collapsedSelection = selectionIsCollapsed(context)
+    const focusBlockObject = getFocusBlockObject({context})
+    const collapsedSelection = selectionIsCollapsed({context})
 
     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
@@ -71,9 +71,9 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock, previousBlock}) => [
+    ({focusTextBlock, previousBlock}) => [
       {
-        type: 'delete block',
+        type: 'delete.block',
         blockPath: focusTextBlock.path,
       },
       {
@@ -88,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
@@ -108,9 +108,9 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
     return false
   },
   actions: [
-    (_, {focusTextBlock, nextBlock}) => [
+    ({focusTextBlock, nextBlock}) => [
       {
-        type: 'delete block',
+        type: 'delete.block',
         blockPath: focusTextBlock.path,
       },
       {

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'}]],
 })
 
 /**
@@ -23,6 +23,9 @@ export const coreBehaviors = [
   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,7 +19,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const selectionCollapsed = selectionIsCollapsed(context)
+      const selectionCollapsed = selectionIsCollapsed({context})
       const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
@@ -34,7 +34,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       return false
     },
     actions: [
-      (_, {annotation}) => [
+      ({annotation}) => [
         {
           type: 'annotation.add',
           annotation,
@@ -45,8 +45,8 @@ 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
@@ -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],
         },