@portabletext/editor 1.34.1 → 1.35.1

package/src/behaviors/behavior.decorator-pair.ts

@@ -0,0 +1,201 @@
+import {createPairRegex} from '../internal-utils/get-text-to-emphasize'
+import * as selectors from '../selectors'
+import type {BlockOffset} from '../types/block-offset'
+import * as utils from '../utils'
+import {defineBehavior} from './behavior.types'
+
+export function createDecoratorPairBehavior(config: {
+  decorator: ({schema}: {schema: selectors.EditorSchema}) => string | undefined
+  pair: {char: string; amount: number}
+  onDecorate: (offset: BlockOffset) => void
+}) {
+  if (config.pair.amount < 1) {
+    console.warn(
+      `The amount of characters in the pair should be greater than 0`,
+    )
+  }
+
+  const pairRegex = createPairRegex(config.pair.char, config.pair.amount)
+  const regEx = new RegExp(`(${pairRegex})$`)
+
+  return defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      if (config.pair.amount < 1) {
+        return false
+      }
+
+      const decorator = config.decorator({schema: snapshot.context.schema})
+
+      if (decorator === undefined) {
+        return false
+      }
+
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)
+      const selectionStartOffset = selectionStartPoint
+        ? utils.spanSelectionPointToBlockOffset({
+            value: snapshot.context.value,
+            selectionPoint: selectionStartPoint,
+          })
+        : undefined
+
+      if (!focusTextBlock || !selectionStartOffset) {
+        return false
+      }
+
+      const textBefore = selectors.getBlockTextBefore(snapshot)
+      const newText = `${textBefore}${event.text}`
+      const textToDecorate = newText.match(regEx)?.at(0)
+
+      if (textToDecorate === undefined) {
+        return false
+      }
+
+      const prefixOffsets = {
+        anchor: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar**".length - "**bar**".length = 4
+          offset: newText.length - textToDecorate.length,
+        },
+        focus: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar**".length - "**bar**".length + "*".length * 2 = 6
+          offset:
+            newText.length -
+            textToDecorate.length +
+            config.pair.char.length * config.pair.amount,
+        },
+      }
+
+      const suffixOffsets = {
+        anchor: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar*|" (10) + "*".length - 2 = 9
+          offset:
+            selectionStartOffset.offset +
+            event.text.length -
+            config.pair.char.length * config.pair.amount,
+        },
+        focus: {
+          path: focusTextBlock.path,
+          // Example: "foo **bar*|" (10) + "*".length = 11
+          offset: selectionStartOffset.offset + event.text.length,
+        },
+      }
+
+      // If the prefix is more than one character, then we need to check if
+      // there is an inline object inside it
+      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {
+        const prefixSelection = utils.blockOffsetsToSelection({
+          value: snapshot.context.value,
+          offsets: prefixOffsets,
+        })
+        const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(
+          {
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: prefixSelection
+                ? {
+                    anchor: prefixSelection.focus,
+                    focus: prefixSelection.focus,
+                  }
+                : null,
+            },
+          },
+        )
+        const inlineObjectBeforePrefixFocusOffset =
+          inlineObjectBeforePrefixFocus
+            ? utils.childSelectionPointToBlockOffset({
+                value: snapshot.context.value,
+                selectionPoint: {
+                  path: inlineObjectBeforePrefixFocus.path,
+                  offset: 0,
+                },
+              })
+            : undefined
+
+        if (
+          inlineObjectBeforePrefixFocusOffset &&
+          inlineObjectBeforePrefixFocusOffset.offset >
+            prefixOffsets.anchor.offset &&
+          inlineObjectBeforePrefixFocusOffset.offset <
+            prefixOffsets.focus.offset
+        ) {
+          return false
+        }
+      }
+
+      // If the suffix is more than one character, then we need to check if
+      // there is an inline object inside it
+      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
+        const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+        const previousInlineObjectOffset = previousInlineObject
+          ? utils.childSelectionPointToBlockOffset({
+              value: snapshot.context.value,
+              selectionPoint: {
+                path: previousInlineObject.path,
+                offset: 0,
+              },
+            })
+          : undefined
+
+        if (
+          previousInlineObjectOffset &&
+          previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&
+          previousInlineObjectOffset.offset < suffixOffsets.focus.offset
+        ) {
+          return false
+        }
+      }
+
+      return {
+        prefixOffsets,
+        suffixOffsets,
+        decorator,
+      }
+    },
+    actions: [
+      // Insert the text as usual in its own undo step
+      ({event}) => [event],
+      (_, {prefixOffsets, suffixOffsets, decorator}) => [
+        // Decorate the text between the prefix and suffix
+        {
+          type: 'decorator.add',
+          decorator,
+          offsets: {
+            anchor: prefixOffsets.focus,
+            focus: suffixOffsets.anchor,
+          },
+        },
+        // Delete the suffix
+        {
+          type: 'delete.text',
+          ...suffixOffsets,
+        },
+        // Delete the prefix
+        {
+          type: 'delete.text',
+          ...prefixOffsets,
+        },
+        // Toggle the decorator off so the next inserted text isn't emphasized
+        {
+          type: 'decorator.remove',
+          decorator,
+        },
+        {
+          type: 'effect',
+          effect: () => {
+            config.onDecorate({
+              ...suffixOffsets.anchor,
+              offset:
+                suffixOffsets.anchor.offset -
+                (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
+            })
+          },
+        },
+      ],
+    ],
+  })
+}

package/src/behaviors/behavior.default.ts

@@ -3,8 +3,8 @@ import {defineBehavior, raise} from './behavior.types'
 
 const toggleAnnotationOff = defineBehavior({
   on: 'annotation.toggle',
-  guard: ({context, event}) =>
-    selectors.isActiveAnnotation(event.annotation.name)({context}),
+  guard: ({snapshot, event}) =>
+    selectors.isActiveAnnotation(event.annotation.name)(snapshot),
   actions: [
     ({event}) => [
       raise({type: 'annotation.remove', annotation: event.annotation}),
@@ -14,8 +14,8 @@ const toggleAnnotationOff = defineBehavior({
 
 const toggleAnnotationOn = defineBehavior({
   on: 'annotation.toggle',
-  guard: ({context, event}) =>
-    !selectors.isActiveAnnotation(event.annotation.name)({context}),
+  guard: ({snapshot, event}) =>
+    !selectors.isActiveAnnotation(event.annotation.name)(snapshot),
   actions: [
     ({event}) => [
       raise({type: 'annotation.add', annotation: event.annotation}),
@@ -25,8 +25,8 @@ const toggleAnnotationOn = defineBehavior({
 
 const toggleDecoratorOff = defineBehavior({
   on: 'decorator.toggle',
-  guard: ({context, event}) =>
-    selectors.isActiveDecorator(event.decorator)({context}),
+  guard: ({snapshot, event}) =>
+    selectors.isActiveDecorator(event.decorator)(snapshot),
   actions: [
     ({event}) => [
       raise({type: 'decorator.remove', decorator: event.decorator}),
@@ -36,8 +36,8 @@ const toggleDecoratorOff = defineBehavior({
 
 const toggleDecoratorOn = defineBehavior({
   on: 'decorator.toggle',
-  guard: ({context, event}) =>
-    !selectors.isActiveDecorator(event.decorator)({context}),
+  guard: ({snapshot, event}) =>
+    !selectors.isActiveDecorator(event.decorator)(snapshot),
   actions: [
     ({event}) => [raise({type: 'decorator.add', decorator: event.decorator})],
   ],
@@ -45,8 +45,8 @@ const toggleDecoratorOn = defineBehavior({
 
 const toggleListItemOff = defineBehavior({
   on: 'list item.toggle',
-  guard: ({context, event}) =>
-    selectors.isActiveListItem(event.listItem)({context}),
+  guard: ({snapshot, event}) =>
+    selectors.isActiveListItem(event.listItem)(snapshot),
   actions: [
     ({event}) => [
       raise({
@@ -59,8 +59,8 @@ const toggleListItemOff = defineBehavior({
 
 const toggleListItemOn = defineBehavior({
   on: 'list item.toggle',
-  guard: ({context, event}) =>
-    !selectors.isActiveListItem(event.listItem)({context}),
+  guard: ({snapshot, event}) =>
+    !selectors.isActiveListItem(event.listItem)(snapshot),
   actions: [
     ({event}) => [
       raise({
@@ -73,30 +73,35 @@ const toggleListItemOn = defineBehavior({
 
 const toggleStyleOff = defineBehavior({
   on: 'style.toggle',
-  guard: ({context, event}) => selectors.isActiveStyle(event.style)({context}),
+  guard: ({snapshot, event}) => selectors.isActiveStyle(event.style)(snapshot),
   actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
 })
 
 const toggleStyleOn = defineBehavior({
   on: 'style.toggle',
-  guard: ({context, event}) => !selectors.isActiveStyle(event.style)({context}),
+  guard: ({snapshot, event}) => !selectors.isActiveStyle(event.style)(snapshot),
   actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
 })
 
 const raiseDeserializationSuccessOrFailure = defineBehavior({
   on: 'deserialize',
-  guard: ({context, event}) => {
-    const deserializeEvents = context.converters.flatMap((converter) => {
-      const data = event.dataTransfer.getData(converter.mimeType)
-
-      if (!data) {
-        return []
-      }
-
-      return [
-        converter.deserialize({context, event: {type: 'deserialize', data}}),
-      ]
-    })
+  guard: ({snapshot, event}) => {
+    const deserializeEvents = snapshot.context.converters.flatMap(
+      (converter) => {
+        const data = event.dataTransfer.getData(converter.mimeType)
+
+        if (!data) {
+          return []
+        }
+
+        return [
+          converter.deserialize({
+            snapshot,
+            event: {type: 'deserialize', data},
+          }),
+        ]
+      },
+    )
 
     const firstSuccess = deserializeEvents.find(
       (deserializeEvent) => deserializeEvent.type === 'deserialization.success',
@@ -142,13 +147,13 @@ const raiseInsertBlocks = defineBehavior({
 
 const raiseSerializationSuccessOrFailure = defineBehavior({
   on: 'serialize',
-  guard: ({context, event}) => {
-    if (context.converters.length === 0) {
+  guard: ({snapshot, event}) => {
+    if (snapshot.context.converters.length === 0) {
       return false
     }
 
-    const serializeEvents = context.converters.map((converter) =>
-      converter.serialize({context, event}),
+    const serializeEvents = snapshot.context.converters.map((converter) =>
+      converter.serialize({snapshot, event}),
     )
 
     if (serializeEvents.length === 0) {

package/src/behaviors/behavior.emoji-picker.ts

@@ -39,7 +39,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
   return [
     defineBehavior({
       on: 'insert.text',
-      guard: ({context, event}) => {
+      guard: ({snapshot, event}) => {
         if (event.text === ':') {
           return false
         }
@@ -50,8 +50,8 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return {emojis: []}
         }
 
-        const focusBlock = selectors.getFocusTextBlock({context})
-        const textBefore = selectors.getBlockTextBefore({context})
+        const focusBlock = selectors.getFocusTextBlock(snapshot)
+        const textBefore = selectors.getBlockTextBefore(snapshot)
         const emojiKeyword = `${textBefore}${event.text}`.match(
           incompleteEmojiRegEx,
         )?.[1]
@@ -80,7 +80,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
     }),
     defineBehavior({
       on: 'insert.text',
-      guard: ({context, event}) => {
+      guard: ({snapshot, event}) => {
         const isColon = event.text === ':'
 
         if (!isColon) {
@@ -94,8 +94,8 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           ? config.parseMatch({match: matches[selectedIndex]})
           : undefined
 
-        const focusBlock = selectors.getFocusTextBlock({context})
-        const textBefore = selectors.getBlockTextBefore({context})
+        const focusBlock = selectors.getFocusTextBlock(snapshot)
+        const textBefore = selectors.getBlockTextBefore(snapshot)
         const emojiKeyword = `${textBefore}:`.match(emojiRegEx)?.[1]
 
         if (!focusBlock || emojiKeyword === undefined) {
@@ -149,7 +149,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
     }),
     defineBehavior({
       on: 'key.down',
-      guard: ({context, event}) => {
+      guard: ({snapshot, event}) => {
         const matches = emojiPickerActor.getSnapshot().context.matches
 
         if (matches.length === 0) {
@@ -177,8 +177,8 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
             return false
           }
 
-          const focusBlock = selectors.getFocusTextBlock({context})
-          const textBefore = selectors.getBlockTextBefore({context})
+          const focusBlock = selectors.getFocusTextBlock(snapshot)
+          const textBefore = selectors.getBlockTextBefore(snapshot)
           const emojiKeyword = textBefore.match(incompleteEmojiRegEx)?.[1]
 
           if (!focusBlock || emojiKeyword === undefined) {
@@ -286,7 +286,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
     }),
     defineBehavior({
       on: 'delete.backward',
-      guard: ({context, event}) => {
+      guard: ({snapshot, event}) => {
         if (event.unit !== 'character') {
           return false
         }
@@ -297,8 +297,8 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return false
         }
 
-        const focusBlock = selectors.getFocusTextBlock({context})
-        const textBefore = selectors.getBlockTextBefore({context})
+        const focusBlock = selectors.getFocusTextBlock(snapshot)
+        const textBefore = selectors.getBlockTextBefore(snapshot)
         const emojiKeyword = textBefore
           .slice(0, textBefore.length - 1)
           .match(incompleteEmojiRegEx)?.[1]

package/src/behaviors/behavior.links.ts

@@ -19,13 +19,13 @@ export type LinkBehaviorsConfig = {
 export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({
     on: 'paste',
-    guard: ({context, event}) => {
-      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    guard: ({snapshot, event}) => {
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
       const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
-          ? config.linkAnnotation?.({url, schema: context.schema})
+          ? config.linkAnnotation?.({url, schema: snapshot.context.schema})
           : undefined
 
       if (annotation && !selectionCollapsed) {
@@ -45,9 +45,9 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   })
   const pasteLinkAtCaret = defineBehavior({
     on: 'paste',
-    guard: ({context, event}) => {
-      const focusSpan = selectors.getFocusSpan({context})
-      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    guard: ({snapshot, event}) => {
+      const focusSpan = selectors.getFocusSpan(snapshot)
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
 
       if (!focusSpan || !selectionCollapsed) {
         return false
@@ -57,7 +57,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
-          ? config.linkAnnotation?.({url, schema: context.schema})
+          ? config.linkAnnotation?.({url, schema: snapshot.context.schema})
           : undefined
 
       if (url && annotation && selectionCollapsed) {