@portabletext/editor 1.18.7 → 1.20.0

package/src/selectors/selector.get-selected-spans.test.ts

@@ -0,0 +1,122 @@
+import {expect, test} from 'vitest'
+import {getSelectedSpans, type EditorSchema, type EditorSelection} from '.'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+
+test(getSelectedSpans.name, () => {
+  function snapshot(selection: EditorSelection): EditorSnapshot {
+    return {
+      context: {
+        schema: {} as EditorSchema,
+        keyGenerator: () => '',
+        activeDecorators: [],
+        value: [
+          {
+            _type: 'block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+              },
+            ],
+          },
+          {
+            _type: 'image',
+            _key: 'b2',
+          },
+          {
+            _type: 'block',
+            _key: 'b3',
+            children: [
+              {
+                _type: 'span',
+                _key: 's3',
+                text: 'baz',
+              },
+            ],
+          },
+        ],
+        selection,
+      },
+    }
+  }
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+  ])
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+    {
+      node: {_type: 'span', _key: 's2', text: 'bar'},
+      path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+    },
+  ])
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+          offset: 2,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+    {
+      node: {_type: 'span', _key: 's2', text: 'bar'},
+      path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+    },
+    {
+      node: {_type: 'span', _key: 's3', text: 'baz'},
+      path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    },
+  ])
+})

package/src/selectors/selector.get-selected-spans.ts

@@ -67,9 +67,11 @@ export const getSelectedSpans: EditorSelector<
             path: [{_key: block._key}, 'children', {_key: child._key}],
           })
 
-          if (startBlockKey === endBlockKey) {
+          if (startSpanKey === endSpanKey) {
             break
           }
+
+          continue
         }
 
         if (endSpanKey && child._key === endSpanKey) {

package/src/selectors/selector.is-active-decorator.test.ts

@@ -0,0 +1,65 @@
+import {expect, test} from 'vitest'
+import type {EditorSchema, EditorSelection} from '.'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+import {isActiveDecorator} from './selector.is-active-decorator'
+
+test(isActiveDecorator.name, () => {
+  function snapshot(selection: EditorSelection): EditorSnapshot {
+    return {
+      context: {
+        schema: {} as EditorSchema,
+        keyGenerator: () => '',
+        activeDecorators: [],
+        value: [
+          {
+            _type: '_block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+              },
+            ],
+          },
+        ],
+        selection,
+      },
+    }
+  }
+
+  expect(
+    isActiveDecorator('strong')(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toBe(true)
+  expect(
+    isActiveDecorator('strong')(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toBe(false)
+})

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) '. '`
-  }
-}