@portabletext/editor 1.19.0 → 1.21.0

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

@@ -1,7 +1,7 @@
 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'
+import {isKeyedSegment} from '../utils/util.is-keyed-segment'
+import {reverseSelection} from '../utils/util.reverse-selection'
 
 /**
  * @public
@@ -70,7 +70,7 @@ export const getSelectionText: EditorSelector<string> = ({context}) => {
         }
 
         if (text.length > 0) {
-          text + child.text
+          text = text + child.text
         }
       }
     }

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

@@ -1,7 +1,7 @@
 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 {getBlockStartPoint} from '../utils/util.get-block-start-point'
+import {isKeyedSegment} from '../utils/util.is-keyed-segment'
+import {reverseSelection} from '../utils/util.reverse-selection'
 import {getSelectionText} from './selector.get-selection-text'
 
 /**
@@ -26,7 +26,10 @@ export const getBlockTextBefore: EditorSelector<string> = ({context}) => {
     return ''
   }
 
-  const startOfBlock = getStartPoint({node: block, path: [{_key: block._key}]})
+  const startOfBlock = getBlockStartPoint({
+    node: block,
+    path: [{_key: block._key}],
+  })
 
   return getSelectionText({
     context: {

package/src/selectors/selector.is-point-after-selection.ts

@@ -0,0 +1,82 @@
+import {isKeySegment, isPortableTextTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import type {EditorSelectionPoint} from '../types/editor'
+import {reverseSelection} from '../utils/util.reverse-selection'
+
+/**
+ * @public
+ */
+export function isPointAfterSelection(
+  point: EditorSelectionPoint,
+): EditorSelector<boolean> {
+  return (snapshot) => {
+    if (!snapshot.context.selection) {
+      return false
+    }
+
+    const selection = reverseSelection(snapshot.context.selection)
+
+    const pointBlockKey = isKeySegment(point.path[0])
+      ? point.path[0]._key
+      : undefined
+    const pointChildKey = isKeySegment(point.path[2])
+      ? point.path[2]._key
+      : undefined
+
+    const endBlockKey = isKeySegment(selection.focus.path[0])
+      ? selection.focus.path[0]._key
+      : undefined
+    const endChildKey = isKeySegment(selection.focus.path[2])
+      ? selection.focus.path[2]._key
+      : undefined
+
+    if (!pointBlockKey || !endBlockKey) {
+      return false
+    }
+
+    let after = false
+
+    for (const block of snapshot.context.value) {
+      if (block._key === endBlockKey) {
+        if (block._key !== pointBlockKey) {
+          after = true
+          break
+        }
+
+        // Both the point and the selection end in this block
+
+        if (!isPortableTextTextBlock(block)) {
+          break
+        }
+
+        if (!pointChildKey || !endChildKey) {
+          break
+        }
+
+        for (const child of block.children) {
+          if (child._key === endChildKey) {
+            if (child._key !== pointChildKey) {
+              after = true
+              break
+            }
+
+            // Both the point and the selection end in this child
+
+            after = point.offset > selection.focus.offset
+            break
+          }
+
+          if (child._key === pointChildKey) {
+            break
+          }
+        }
+      }
+
+      if (block._key === pointBlockKey) {
+        break
+      }
+    }
+
+    return after
+  }
+}

package/src/selectors/selector.is-point-before-selection.ts

@@ -0,0 +1,82 @@
+import {isKeySegment, isPortableTextTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import type {EditorSelectionPoint} from '../types/editor'
+import {reverseSelection} from '../utils/util.reverse-selection'
+
+/**
+ * @public
+ */
+export function isPointBeforeSelection(
+  point: EditorSelectionPoint,
+): EditorSelector<boolean> {
+  return (snapshot) => {
+    if (!snapshot.context.selection) {
+      return false
+    }
+
+    const selection = reverseSelection(snapshot.context.selection)
+
+    const pointBlockKey = isKeySegment(point.path[0])
+      ? point.path[0]._key
+      : undefined
+    const pointChildKey = isKeySegment(point.path[2])
+      ? point.path[2]._key
+      : undefined
+
+    const startBlockKey = isKeySegment(selection.anchor.path[0])
+      ? selection.anchor.path[0]._key
+      : undefined
+    const startChildKey = isKeySegment(selection.anchor.path[2])
+      ? selection.anchor.path[2]._key
+      : undefined
+
+    if (!pointBlockKey || !startBlockKey) {
+      return false
+    }
+
+    let before = false
+
+    for (const block of snapshot.context.value) {
+      if (block._key === pointBlockKey) {
+        if (block._key !== startBlockKey) {
+          before = true
+          break
+        }
+
+        // Both the point and the selection start in this block
+
+        if (!isPortableTextTextBlock(block)) {
+          break
+        }
+
+        if (!pointChildKey || !startChildKey) {
+          break
+        }
+
+        for (const child of block.children) {
+          if (child._key === pointChildKey) {
+            if (child._key !== startChildKey) {
+              before = true
+              break
+            }
+
+            // Both the point and the selection start in this child
+
+            before = point.offset < selection.anchor.offset
+            break
+          }
+
+          if (child._key === startChildKey) {
+            break
+          }
+        }
+      }
+
+      if (block._key === startBlockKey) {
+        break
+      }
+    }
+
+    return before
+  }
+}

package/src/utils/_exports/index.ts

@@ -0,0 +1 @@
+export * from '../index'

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+export type {BlockOffset} from '../behaviors/behavior.types'
+export type {EditorSelection, EditorSelectionPoint} from '../types/editor'
+export {
+  blockOffsetToSpanSelectionPoint,
+  spanSelectionPointToBlockOffset,
+} from './util.block-offset'
+export {getBlockStartPoint} from './util.get-block-start-point'
+export {getTextBlockText} from './util.get-text-block-text'
+export {isEmptyTextBlock} from './util.is-empty-text-block'
+export {isKeyedSegment} from './util.is-keyed-segment'
+export {reverseSelection} from './util.reverse-selection'

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

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

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

@@ -4,8 +4,13 @@ import {
   type KeyedSegment,
   type PortableTextBlock,
 } from '@sanity/types'
-import type {BlockOffset} from '../../behaviors/behavior.types'
+import type {BlockOffset} from '../behaviors/behavior.types'
+import type {EditorSelectionPoint} from '../types/editor'
+import {isKeyedSegment} from './util.is-keyed-segment'
 
+/**
+ * @public
+ */
 export function blockOffsetToSpanSelectionPoint({
   value,
   blockOffset,
@@ -55,20 +60,31 @@ export function blockOffsetToSpanSelectionPoint({
   return selectionPoint
 }
 
+/**
+ * @public
+ */
 export function spanSelectionPointToBlockOffset({
   value,
   selectionPoint,
 }: {
   value: Array<PortableTextBlock>
-  selectionPoint: {
-    path: [KeyedSegment, 'children', KeyedSegment]
-    offset: number
-  }
+  selectionPoint: EditorSelectionPoint
 }): BlockOffset | undefined {
   let offset = 0
 
+  const blockKey = isKeyedSegment(selectionPoint.path[0])
+    ? selectionPoint.path[0]._key
+    : undefined
+  const spanKey = isKeyedSegment(selectionPoint.path[2])
+    ? selectionPoint.path[2]._key
+    : undefined
+
+  if (!blockKey || !spanKey) {
+    return undefined
+  }
+
   for (const block of value) {
-    if (block._key !== selectionPoint.path[0]._key) {
+    if (block._key !== blockKey) {
       continue
     }
 
@@ -81,7 +97,7 @@ export function spanSelectionPointToBlockOffset({
         continue
       }
 
-      if (child._key === selectionPoint.path[2]._key) {
+      if (child._key === spanKey) {
         return {
           path: [{_key: block._key}],
           offset: offset + selectionPoint.offset,

package/src/{editor/utils/utils.get-start-point.ts → utils/util.get-block-start-point.ts}

@@ -3,9 +3,12 @@ import {
   type KeyedSegment,
   type PortableTextBlock,
 } from '@sanity/types'
-import type {EditorSelectionPoint} from '../../types/editor'
+import type {EditorSelectionPoint} from '../types/editor'
 
-export function getStartPoint({
+/**
+ * @public
+ */
+export function getBlockStartPoint({
   node,
   path,
 }: {

package/src/utils/util.get-text-block-text.ts

@@ -0,0 +1,8 @@
+import type {PortableTextTextBlock} from '@sanity/types'
+
+/**
+ * @public
+ */
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
+}

package/src/{editor/utils/utils.ts → utils/util.is-empty-text-block.ts}

@@ -2,9 +2,12 @@ import {
   isPortableTextSpan,
   isPortableTextTextBlock,
   type PortableTextBlock,
-  type PortableTextTextBlock,
 } from '@sanity/types'
+import {getTextBlockText} from './util.get-text-block-text'
 
+/**
+ * @public
+ */
 export function isEmptyTextBlock(block: PortableTextBlock) {
   if (!isPortableTextTextBlock(block)) {
     return false
@@ -15,7 +18,3 @@ export function isEmptyTextBlock(block: PortableTextBlock) {
 
   return onlyText && blockText === ''
 }
-
-export function getTextBlockText(block: PortableTextTextBlock) {
-  return block.children.map((child) => child.text ?? '').join('')
-}

package/src/{editor/utils/utils.is-keyed-segment.ts → utils/util.is-keyed-segment.ts}

@@ -1,5 +1,8 @@
 import type {KeyedSegment, PathSegment} from '@sanity/types'
 
+/**
+ * @public
+ */
 export function isKeyedSegment(segment: PathSegment): segment is KeyedSegment {
   return typeof segment === 'object' && segment !== null && '_key' in segment
 }

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

@@ -1,5 +1,8 @@
-import type {EditorSelection} from '../../types/editor'
+import type {EditorSelection} from '../types/editor'
 
+/**
+ * @public
+ */
 export function reverseSelection(
   selection: NonNullable<EditorSelection>,
 ): NonNullable<EditorSelection> {

package/src/editor/nodes/index.ts

@@ -1,189 +0,0 @@
-import {styled} from 'styled-components'
-
-export const DefaultBlockObject = styled.div<{selected: boolean}>`
-  user-select: none;
-  border: ${(props) => {
-    if (props.selected) {
-      return '1px solid blue'
-    }
-    return '1px solid transparent'
-  }};
-`
-
-export const DefaultInlineObject = styled.span<{selected: boolean}>`
-  background: #999;
-  border: ${(props) => {
-    if (props.selected) {
-      return '1px solid blue'
-    }
-    return '1px solid transparent'
-  }};
-`
-
-type ListItemProps = {listLevel: number; listStyle: string}
-
-export const DefaultListItem = styled.div<ListItemProps>`
-  &.pt-list-item {
-    width: fit-content;
-    position: relative;
-    display: block;
-
-    /* Important 'transform' in order to force refresh the ::before and ::after rules
-      in Webkit: https://stackoverflow.com/a/21947628/831480
-    */
-    transform: translateZ(0);
-    margin-left: ${(props: ListItemProps) => getLeftPositionForListLevel(props.listLevel)};
-  }
-  &.pt-list-item > .pt-list-item-inner {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    &:before {
-      justify-content: flex-start;
-      vertical-align: top;
-    }
-  }
-  &.pt-list-item-bullet > .pt-list-item-inner:before {
-      content: '${(props: ListItemProps) =>
-        getContentForListLevelAndStyle(props.listLevel, props.listStyle)}';
-      font-size: 0.4375rem; /* 7px */
-      line-height: 1.5rem; /* Same as body text */
-      /* Optical alignment */
-      position: relative;
-    }
-  }
-  &.pt-list-item-bullet > .pt-list-item-inner {
-    &:before {
-      min-width: 1.5rem; /* Make sure space between bullet and text never shrinks */
-    }
-  }
-  &.pt-list-item-number {
-    counter-increment: ${(props: {listLevel: number}) =>
-      getCounterIncrementForListLevel(props.listLevel)};
-    counter-reset: ${(props: {listLevel: number}) => getCounterResetForListLevel(props.listLevel)};
-  }
-  & + :not(.pt-list-item-number) {
-    counter-reset: listItemNumber;
-  }
-  &.pt-list-item-number > .pt-list-item-inner:before {
-    content: ${(props) => getCounterContentForListLevel(props.listLevel)};
-    min-width: 1.5rem; /* Make sure space between number and text never shrinks */
-    /* Optical alignment */
-    position: relative;
-    top: 1px;
-  }
-`
-
-export const DefaultListItemInner = styled.div``
-
-function getLeftPositionForListLevel(level: number) {
-  switch (Number(level)) {
-    case 1:
-      return '1.5em'
-    case 2:
-      return '3em'
-    case 3:
-      return '4.5em'
-    case 4:
-      return '6em'
-    case 5:
-      return '7.5em'
-    case 6:
-      return '9em'
-    case 7:
-      return '10.5em'
-    case 8:
-      return '12em'
-    case 9:
-      return '13.5em'
-    case 10:
-      return '15em'
-    default:
-      return '0em'
-  }
-}
-
-const bullets = ['●', '○', '■']
-
-function getContentForListLevelAndStyle(level: number, style: string) {
-  const normalizedLevel = (level - 1) % 3
-  if (style === 'bullet') {
-    return bullets[normalizedLevel]
-  }
-  return '*'
-}
-
-function getCounterIncrementForListLevel(level: number) {
-  switch (level) {
-    case 1:
-      return 'listItemNumber'
-    case 2:
-      return 'listItemAlpha'
-    case 3:
-      return 'listItemRoman'
-    case 4:
-      return 'listItemNumberNext'
-    case 5:
-      return 'listItemLetterNext'
-    case 6:
-      return 'listItemRomanNext'
-    case 7:
-      return 'listItemNumberNextNext'
-    case 8:
-      return 'listItemAlphaNextNext'
-    case 9:
-      return 'listItemRomanNextNext'
-    default:
-      return 'listItemNumberNextNextNext'
-  }
-}
-
-function getCounterResetForListLevel(level: number) {
-  switch (level) {
-    case 1:
-      return 'listItemAlpha'
-    case 2:
-      return 'listItemRoman'
-    case 3:
-      return 'listItemNumberNext'
-    case 4:
-      return 'listItemLetterNext'
-    case 5:
-      return 'listItemRomanNext'
-    case 6:
-      return 'listItemNumberNextNext'
-    case 7:
-      return 'listItemAlphaNextNext'
-    case 8:
-      return 'listItemRomanNextNext'
-    case 9:
-      return 'listItemNumberNextNextNext'
-    default:
-      return 'listItemNumberNextNextNext'
-  }
-}
-
-function getCounterContentForListLevel(level: number) {
-  switch (level) {
-    case 1:
-      return `counter(listItemNumber) '. '`
-    case 2:
-      return `counter(listItemAlpha, lower-alpha) '. '`
-    case 3:
-      return `counter(listItemRoman, lower-roman) '. '`
-    case 4:
-      return `counter(listItemNumberNext) '. '`
-    case 5:
-      return `counter(listItemLetterNext, lower-alpha) '. '`
-    case 6:
-      return `counter(listItemRomanNext, lower-roman) '. '`
-    case 7:
-      return `counter(listItemNumberNextNext) '. '`
-    case 8:
-      return `counter(listItemAlphaNextNext, lower-alpha) '. '`
-    case 9:
-      return `counter(listItemRomanNextNext, lower-roman) '. '`
-    default:
-      return `counter(listItemNumberNextNextNext) '. '`
-  }
-}