@portabletext/editor 1.13.0 → 1.14.1

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,
@@ -9,22 +13,18 @@ export {
   createMarkdownBehaviors,
   type MarkdownBehaviorsConfig,
 } from './editor/behavior/behavior.markdown'
-export {
-  createCodeEditorBehaviors,
-  type CodeEditorBehaviorsConfig,
-} from './editor/behavior/behavior.code-editor'
 export {
   defineBehavior,
   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,
@@ -46,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,
+      },
+    },
+  })
+}

package/src/selectors/selectors.ts

@@ -0,0 +1,329 @@
+import {
+  isKeySegment,
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+  type PortableTextListBlock,
+  type PortableTextObject,
+  type PortableTextSpan,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+import {createGuards} from '../editor/behavior/behavior.guards'
+import type {EditorSelector} from '../editor/editor-selector'
+
+/**
+ * @alpha
+ */
+export const selectionIsCollapsed: EditorSelector<boolean> = ({context}) => {
+  return (
+    JSON.stringify(context.selection?.anchor.path) ===
+      JSON.stringify(context.selection?.focus.path) &&
+    context.selection?.anchor.offset === context.selection?.focus.offset
+  )
+}
+
+/**
+ * @alpha
+ */
+export const getFocusBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusListBlock: EditorSelector<
+  {node: PortableTextListBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const guards = createGuards(context)
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && guards.isListBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusTextBlock: EditorSelector<
+  {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusBlockObject: EditorSelector<
+  {node: PortableTextObject; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && !isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusChild: EditorSelector<
+  | {
+      node: PortableTextObject | PortableTextSpan
+      path: [KeyedSegment, 'children', KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  const focusBlock = getFocusTextBlock({context})
+
+  if (!focusBlock) {
+    return undefined
+  }
+
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[2])
+      ? context.selection.focus.path[2]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? focusBlock.node.children.find((span) => span._key === key)
+    : undefined
+
+  return node && key
+    ? {node, path: [...focusBlock.path, 'children', {_key: key}]}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusSpan: EditorSelector<
+  | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
+  | undefined
+> = ({context}) => {
+  const focusChild = getFocusChild({context})
+
+  return focusChild && isPortableTextSpan(focusChild.node)
+    ? {node: focusChild.node, path: focusChild.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFirstBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const node = context.value[0]
+
+  return node ? {node, path: [{_key: node._key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getLastBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const node = context.value[context.value.length - 1]
+    ? context.value[context.value.length - 1]
+    : undefined
+
+  return node ? {node, path: [{_key: node._key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getSelectedBlocks: EditorSelector<
+  Array<{node: PortableTextBlock; path: [KeyedSegment]}>
+> = ({context}) => {
+  if (!context.selection) {
+    return []
+  }
+
+  const selectedBlocks: Array<{node: PortableTextBlock; path: [KeyedSegment]}> =
+    []
+  const startKey = context.selection.backward
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+  const endKey = context.selection.backward
+    ? isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+
+  if (!startKey || !endKey) {
+    return selectedBlocks
+  }
+
+  for (const block of context.value) {
+    if (block._key === startKey) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+
+      if (startKey === endKey) {
+        break
+      }
+      continue
+    }
+
+    if (block._key === endKey) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+      break
+    }
+
+    if (selectedBlocks.length > 0) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+    }
+  }
+
+  return selectedBlocks
+}
+
+/**
+ * @alpha
+ */
+export const getSelectionStartBlock: EditorSelector<
+  | {
+      node: PortableTextBlock
+      path: [KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const key = context.selection.backward
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getSelectionEndBlock: EditorSelector<
+  | {
+      node: PortableTextBlock
+      path: [KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const key = context.selection.backward
+    ? isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getPreviousBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  let previousBlock: {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+  const selectionStartBlock = getSelectionStartBlock({context})
+
+  if (!selectionStartBlock) {
+    return undefined
+  }
+
+  let foundSelectionStartBlock = false
+
+  for (const block of context.value) {
+    if (block._key === selectionStartBlock.node._key) {
+      foundSelectionStartBlock = true
+      break
+    }
+
+    previousBlock = {node: block, path: [{_key: block._key}]}
+  }
+
+  if (foundSelectionStartBlock && previousBlock) {
+    return previousBlock
+  }
+
+  return undefined
+}
+
+/**
+ * @alpha
+ */
+export const getNextBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  let nextBlock: {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+  const selectionEndBlock = getSelectionEndBlock({context})
+
+  if (!selectionEndBlock) {
+    return undefined
+  }
+
+  let foundSelectionEndBlock = false
+
+  for (const block of context.value) {
+    if (block._key === selectionEndBlock.node._key) {
+      foundSelectionEndBlock = true
+      continue
+    }
+
+    if (foundSelectionEndBlock) {
+      nextBlock = {node: block, path: [{_key: block._key}]}
+      break
+    }
+  }
+
+  if (foundSelectionEndBlock && nextBlock) {
+    return nextBlock
+  }
+
+  return undefined
+}