@portabletext/editor 1.12.3 → 1.14.0

package/src/editor/plugins/createWithHotKeys.ts

@@ -1,10 +1,7 @@
-import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
 import type {KeyboardEvent} from 'react'
-import {Editor, Node, Path, Range, Transforms} from 'slate'
 import type {ReactEditor} from 'slate-react'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {HotkeyOptions} from '../../types/options'
-import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
 import {isHotkey} from '../../utils/is-hotkey'
 import type {EditorActor} from '../editor-machine'
@@ -75,104 +72,6 @@ export function createWithHotkeys(
           }
         }
       })
-
-      const isEnter = isHotkey('enter', event.nativeEvent)
-      const isTab = isHotkey('tab', event.nativeEvent)
-      const isShiftEnter = isHotkey('shift+enter', event.nativeEvent)
-      const isShiftTab = isHotkey('shift+tab', event.nativeEvent)
-      const isArrowDown = isHotkey('down', event.nativeEvent)
-      const isArrowUp = isHotkey('up', event.nativeEvent)
-
-      // Check if the user is in a void block, in that case, add an empty text block below if there is no next block
-      if (isArrowDown && editor.selection) {
-        const focusBlock = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        ) as SlateTextBlock | VoidElement
-
-        if (focusBlock && Editor.isVoid(editor, focusBlock)) {
-          const nextPath = Path.next(editor.selection.focus.path.slice(0, 1))
-          const nextBlock = Node.has(editor, nextPath)
-          if (!nextBlock) {
-            Transforms.insertNodes(
-              editor,
-              editor.pteCreateTextBlock({decorators: []}),
-              {
-                at: nextPath,
-              },
-            )
-            Transforms.select(editor, {path: [...nextPath, 0], offset: 0})
-            editor.onChange()
-            return
-          }
-        }
-      }
-      if (isArrowUp && editor.selection) {
-        const isFirstBlock = editor.selection.focus.path[0] === 0
-        const focusBlock = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        ) as SlateTextBlock | VoidElement
-
-        if (isFirstBlock && focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Transforms.insertNodes(
-            editor,
-            editor.pteCreateTextBlock({decorators: []}),
-            {
-              at: [0],
-            },
-          )
-          Transforms.select(editor, {path: [0, 0], offset: 0})
-          editor.onChange()
-          return
-        }
-      }
-
-      // Tab for lists
-      // Only steal tab when we are on a plain text span or we are at the start of the line (fallback if the whole block is annotated or contains a single inline object)
-      // Otherwise tab is reserved for accessability for buttons etc.
-      if ((isTab || isShiftTab) && editor.selection) {
-        const [focusChild] = Editor.node(editor, editor.selection.focus, {
-          depth: 2,
-        })
-        const [focusBlock] = isPortableTextSpan(focusChild)
-          ? Editor.node(editor, editor.selection.focus, {depth: 1})
-          : []
-        const hasAnnotationFocus =
-          focusChild &&
-          isPortableTextTextBlock(focusBlock) &&
-          isPortableTextSpan(focusChild) &&
-          (focusChild.marks || ([] as string[])).filter((m) =>
-            (focusBlock.markDefs || []).map((def) => def._key).includes(m),
-          ).length > 0
-        const [start] = Range.edges(editor.selection)
-        const atStartOfNode = Editor.isStart(editor, start, start.path)
-
-        if (
-          focusChild &&
-          isPortableTextSpan(focusChild) &&
-          (!hasAnnotationFocus || atStartOfNode) &&
-          editor.pteIncrementBlockLevels(isShiftTab)
-        ) {
-          event.preventDefault()
-        }
-      }
-
-      // Deal with enter key combos
-      if (isEnter && !isShiftEnter && editor.selection) {
-        const focusBlockPath = editor.selection.focus.path.slice(0, 1)
-        const focusBlock = Node.descendant(editor, focusBlockPath) as
-          | SlateTextBlock
-          | VoidElement
-
-        // List item enter key
-        if (editor.isListBlock(focusBlock)) {
-          if (editor.pteEndList()) {
-            event.preventDefault()
-          }
-          return
-        }
-      }
     }
     return editor
   }

package/src/editor/plugins/createWithPortableTextBlockStyle.ts

@@ -1,4 +1,4 @@
-import {Editor, Path, Text as SlateText, Transforms, type Node} from 'slate'
+import {Editor, Path, Text as SlateText, Transforms} from 'slate'
 import type {
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
@@ -50,60 +50,6 @@ export function createWithPortableTextBlockStyle(
       normalizeNode(nodeEntry)
     }
 
-    editor.pteHasBlockStyle = (style: string): boolean => {
-      if (!editor.selection) {
-        return false
-      }
-      const selectedBlocks = [
-        ...Editor.nodes(editor, {
-          at: editor.selection,
-          match: (node) => editor.isTextBlock(node) && node.style === style,
-        }),
-      ]
-      if (selectedBlocks.length > 0) {
-        return true
-      }
-      return false
-    }
-
-    editor.pteToggleBlockStyle = (blockStyle: string): void => {
-      if (!editor.selection) {
-        return
-      }
-      const selectedBlocks = [
-        ...Editor.nodes(editor, {
-          at: editor.selection,
-          match: (node) => editor.isTextBlock(node),
-        }),
-      ]
-      selectedBlocks.forEach(([node, path]) => {
-        if (editor.isTextBlock(node) && node.style === blockStyle) {
-          debug(`Unsetting block style '${blockStyle}'`)
-          Transforms.setNodes(
-            editor,
-            {...node, style: defaultStyle} as Partial<Node>,
-            {
-              at: path,
-            },
-          )
-        } else {
-          if (blockStyle) {
-            debug(`Setting style '${blockStyle}'`)
-          } else {
-            debug('Setting default style', defaultStyle)
-          }
-          Transforms.setNodes(
-            editor,
-            {
-              ...node,
-              style: blockStyle || defaultStyle,
-            } as Partial<Node>,
-            {at: path},
-          )
-        }
-      })
-      editor.onChange()
-    }
     return editor
   }
 }

package/src/editor/plugins/with-plugins.ts

@@ -8,7 +8,6 @@ import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
 import {createWithPlaceholderBlock} from './createWithPlaceholderBlock'
 import {createWithPortableTextBlockStyle} from './createWithPortableTextBlockStyle'
-import {createWithPortableTextLists} from './createWithPortableTextLists'
 import {createWithPortableTextMarkModel} from './createWithPortableTextMarkModel'
 import {createWithPortableTextSelections} from './createWithPortableTextSelections'
 import {createWithSchemaTypes} from './createWithSchemaTypes'
@@ -46,7 +45,6 @@ export const withPlugins = <T extends Editor>(
     subscriptions: options.subscriptions,
   })
   const withMaxBlocks = createWithMaxBlocks(editorActor)
-  const withPortableTextLists = createWithPortableTextLists(schemaTypes)
   const withUndoRedo = createWithUndoRedo({
     editorActor,
     blockSchemaType: schemaTypes.block,
@@ -82,12 +80,10 @@ export const withPlugins = <T extends Editor>(
       withObjectKeys(
         withPortableTextMarkModel(
           withPortableTextBlockStyle(
-            withPortableTextLists(
-              withPlaceholderBlock(
-                withUtils(
-                  withMaxBlocks(
-                    withUndoRedo(withPatches(withPortableTextSelections(e))),
-                  ),
+            withPlaceholderBlock(
+              withUtils(
+                withMaxBlocks(
+                  withUndoRedo(withPatches(withPortableTextSelections(e))),
                 ),
               ),
             ),

package/src/editor/{behavior/behavior.utils.block-offset.test.ts → utils/utils.block-offset.test.ts}

@@ -1,6 +1,6 @@
 import type {PortableTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
-import {blockOffsetToSpanSelectionPoint} from './behavior.utils.block-offset'
+import {blockOffsetToSpanSelectionPoint} from './utils.block-offset'
 
 test(blockOffsetToSpanSelectionPoint.name, () => {
   const value: Array<PortableTextBlock> = [

package/src/editor/{behavior/behavior.utils.block-offset.ts → utils/utils.block-offset.ts}

@@ -4,14 +4,7 @@ import {
   type KeyedSegment,
   type PortableTextBlock,
 } from '@sanity/types'
-
-/**
- * @alpha
- */
-export type BlockOffset = {
-  path: [KeyedSegment]
-  offset: number
-}
+import type {BlockOffset} from '../behavior/behavior.types'
 
 export function blockOffsetToSpanSelectionPoint({
   value,

package/src/editor/{behavior/behavior.utils.reverse-selection.ts → utils/utils.reverse-selection.ts}

@@ -1,10 +1,8 @@
 import type {EditorSelection} from '../../types/editor'
 
-export function reverseSelection(selection: EditorSelection): EditorSelection {
-  if (!selection) {
-    return selection
-  }
-
+export function reverseSelection(
+  selection: NonNullable<EditorSelection>,
+): NonNullable<EditorSelection> {
   if (selection.backward) {
     return {
       anchor: selection.focus,

package/src/editor/utils/utils.ts

@@ -0,0 +1,21 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type PortableTextBlock,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+
+export function isEmptyTextBlock(block: PortableTextBlock) {
+  if (!isPortableTextTextBlock(block)) {
+    return false
+  }
+
+  const onlyText = block.children.every(isPortableTextSpan)
+  const blockText = getTextBlockText(block)
+
+  return onlyText && blockText === ''
+}
+
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
+}

package/src/index.ts

@@ -1,5 +1,9 @@
 export type {Patch} from '@portabletext/patches'
 export type {PortableTextBlock, PortableTextChild} from '@sanity/types'
+export {
+  createCodeEditorBehaviors,
+  type CodeEditorBehaviorsConfig,
+} from './editor/behavior/behavior.code-editor'
 export {coreBehavior, coreBehaviors} from './editor/behavior/behavior.core'
 export {
   createLinkBehaviors,
@@ -14,13 +18,13 @@ export {
   type Behavior,
   type BehaviorActionIntend,
   type BehaviorActionIntendSet,
-  type BehaviorContext,
   type BehaviorEvent,
   type BehaviorGuard,
   type OmitFromUnion,
   type PickFromUnion,
+  type BlockOffset,
 } from './editor/behavior/behavior.types'
-export type {BlockOffset} from './editor/behavior/behavior.utils.block-offset'
+export type {Editor, EditorConfig, EditorEvent} from './editor/create-editor'
 export type {SlateEditor} from './editor/create-slate-editor'
 export {
   defineSchema,
@@ -42,20 +46,20 @@ export {
 } from './editor/editor-machine'
 export {
   EditorProvider,
-  useEditorContext,
+  useEditor,
   type EditorProviderProps,
 } from './editor/editor-provider'
+export {
+  useEditorSelector,
+  type EditorSelector,
+  type EditorSelectorSnapshot,
+} from './editor/editor-selector'
+export type {EditorContext, EditorSnapshot} from './editor/editor-snapshot'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
 export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEditorSelection'
 export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
 export type {AddedAnnotationPaths} from './editor/plugins/createWithEditableAPI'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
-export {
-  useEditor,
-  type Editor,
-  type EditorConfig,
-  type EditorEvent,
-} from './editor/use-editor'
 export * from './types/editor'
 export type {HotkeyOptions} from './types/options'

package/src/selectors/index.ts

@@ -0,0 +1,15 @@
+export type {
+  EditorSelector,
+  EditorSelectorSnapshot,
+} from '../editor/editor-selector'
+export type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
+export type {
+  EditorSelection,
+  EditorSelectionPoint,
+  PortableTextMemberSchemaTypes,
+} from '../types/editor'
+
+export {getActiveListItem} from './selector.get-active-list-item'
+export {getSelectionText} from './selector.get-selection-text'
+export {getBlockTextBefore} from './selector.get-text-before'
+export * from './selectors'

package/src/selectors/selector.get-active-list-item.ts

@@ -0,0 +1,37 @@
+import type {PortableTextListBlock} from '@sanity/types'
+import {createGuards} from '../editor/behavior/behavior.guards'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getSelectedBlocks} from './selectors'
+
+/**
+ * @alpha
+ */
+export const getActiveListItem: EditorSelector<
+  PortableTextListBlock['listItem'] | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const guards = createGuards(context)
+  const selectedBlocks = getSelectedBlocks({context}).map((block) => block.node)
+  const selectedTextBlocks = selectedBlocks.filter(guards.isTextBlock)
+
+  const firstTextBlock = selectedTextBlocks.at(0)
+
+  if (!firstTextBlock) {
+    return undefined
+  }
+
+  const firstListItem = firstTextBlock.listItem
+
+  if (!firstListItem) {
+    return undefined
+  }
+
+  if (selectedTextBlocks.every((block) => block.listItem === firstListItem)) {
+    return firstListItem
+  }
+
+  return undefined
+}

package/src/{editor/behavior/behavior.utils.get-selection-text.ts → selectors/selector.get-selection-text.ts}

@@ -1,21 +1,16 @@
-import {
-  isPortableTextSpan,
-  isPortableTextTextBlock,
-  type PortableTextBlock,
-} from '@sanity/types'
-import type {EditorSelection} from '../../types/editor'
-import {isKeyedSegment} from './behavior.utils.is-keyed-segment'
-import {reverseSelection} from './behavior.utils.reverse-selection'
+import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isKeyedSegment} from '../editor/utils/utils.is-keyed-segment'
+import {reverseSelection} from '../editor/utils/utils.reverse-selection'
 
-export function getSelectionText({
-  value,
-  selection,
-}: {
-  value: Array<PortableTextBlock>
-  selection: NonNullable<EditorSelection>
-}): string {
+/**
+ * @alpha
+ */
+export const getSelectionText: EditorSelector<string> = ({context}) => {
   let text = ''
 
+  const {value, selection} = context
+
   if (!value || !selection) {
     return text
   }

package/src/selectors/selector.get-text-before.ts

@@ -0,0 +1,41 @@
+import type {EditorSelector} from '../editor/editor-selector'
+import {getStartPoint} from '../editor/utils/utils.get-start-point'
+import {isKeyedSegment} from '../editor/utils/utils.is-keyed-segment'
+import {reverseSelection} from '../editor/utils/utils.reverse-selection'
+import {getSelectionText} from './selector.get-selection-text'
+
+/**
+ * @alpha
+ */
+export const getBlockTextBefore: EditorSelector<string> = ({context}) => {
+  if (!context.selection) {
+    return ''
+  }
+
+  const selection = context.selection.backward
+    ? reverseSelection(context.selection)
+    : context.selection
+  const point = selection.anchor
+  const key = isKeyedSegment(point.path[0]) ? point.path[0]._key : undefined
+
+  const block = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  if (!block) {
+    return ''
+  }
+
+  const startOfBlock = getStartPoint({node: block, path: [{_key: block._key}]})
+
+  return getSelectionText({
+    context: {
+      ...context,
+      value: context.value,
+      selection: {
+        anchor: startOfBlock,
+        focus: point,
+      },
+    },
+  })
+}