@portabletext/editor 1.32.0 → 1.33.1

package/src/behaviors/behavior.markdown.ts

@@ -86,6 +86,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockOffset = spanSelectionPointToBlockOffset({
         value: context.value,
         selectionPoint: {
@@ -98,7 +99,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       })
 
-      if (!blockOffset) {
+      if (previousInlineObject || !blockOffset) {
         return false
       }
 
@@ -173,6 +174,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const textBefore = getBlockTextBefore({context})
       const hrBlockOffsets = {
         anchor: {
@@ -185,7 +187,10 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       }
 
-      if (textBefore === `${hrCharacter}${hrCharacter}`) {
+      if (
+        !previousInlineObject &&
+        textBefore === `${hrCharacter}${hrCharacter}`
+      ) {
         return {hrObject, focusBlock, hrCharacter, hrBlockOffsets}
       }
 
@@ -290,6 +295,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockText = getTextBlockText(focusTextBlock.node)
       const markdownHeadingSearch = /^#+/.exec(blockText)
       const level = markdownHeadingSearch
@@ -297,7 +303,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         : undefined
       const caretAtTheEndOfHeading = blockOffset.offset === level
 
-      if (!caretAtTheEndOfHeading) {
+      if (previousInlineObject || !caretAtTheEndOfHeading) {
         return false
       }
 
@@ -397,6 +403,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockOffset = spanSelectionPointToBlockOffset({
         value: context.value,
         selectionPoint: {
@@ -409,7 +416,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       })
 
-      if (!blockOffset) {
+      if (previousInlineObject || !blockOffset) {
         return false
       }
 

package/src/behaviors/behavior.types.ts

@@ -57,6 +57,7 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'decorator.add'
       decorator: string
+      selection?: NonNullable<EditorSelection>
     }
   | {
       type: 'decorator.remove'

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -8,6 +8,7 @@ import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
 import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
+import {decoratorAddActionImplementation} from '../../behavior-actions/behavior.action.decorator.add'
 import type {BehaviorActionImplementation} from '../../behavior-actions/behavior.actions'
 import {debugWithName} from '../../internal-utils/debug'
 import {getNextSpan, getPreviousSpan} from '../../internal-utils/sibling-utils'
@@ -657,102 +658,6 @@ export function createWithPortableTextMarkModel(
   }
 }
 
-export const addDecoratorActionImplementation: BehaviorActionImplementation<
-  'decorator.add'
-> = ({action}) => {
-  const editor = action.editor
-  const mark = action.decorator
-
-  if (editor.selection) {
-    if (Range.isExpanded(editor.selection)) {
-      // Split if needed
-      Transforms.setNodes(
-        editor,
-        {},
-        {match: Text.isText, split: true, hanging: true},
-      )
-      // Use new selection
-      const splitTextNodes = Range.isRange(editor.selection)
-        ? [
-            ...Editor.nodes(editor, {
-              at: editor.selection,
-              match: Text.isText,
-            }),
-          ]
-        : []
-      const shouldRemoveMark =
-        splitTextNodes.length > 1 &&
-        splitTextNodes.every((node) => node[0].marks?.includes(mark))
-
-      if (shouldRemoveMark) {
-        editor.removeMark(mark)
-      } else {
-        splitTextNodes.forEach(([node, path]) => {
-          const marks = [
-            ...(Array.isArray(node.marks) ? node.marks : []).filter(
-              (eMark: string) => eMark !== mark,
-            ),
-            mark,
-          ]
-          Transforms.setNodes(
-            editor,
-            {marks},
-            {at: path, match: Text.isText, split: true, hanging: true},
-          )
-        })
-      }
-    } else {
-      const [block, blockPath] = Editor.node(editor, editor.selection, {
-        depth: 1,
-      })
-      const lonelyEmptySpan =
-        editor.isTextBlock(block) &&
-        block.children.length === 1 &&
-        editor.isTextSpan(block.children[0]) &&
-        block.children[0].text === ''
-          ? block.children[0]
-          : undefined
-
-      if (lonelyEmptySpan) {
-        const existingMarks = lonelyEmptySpan.marks ?? []
-        const existingMarksWithoutDecorator = existingMarks.filter(
-          (existingMark) => existingMark !== mark,
-        )
-
-        Transforms.setNodes(
-          editor,
-          {
-            marks:
-              existingMarks.length === existingMarksWithoutDecorator.length
-                ? [...existingMarks, mark]
-                : existingMarksWithoutDecorator,
-          },
-          {
-            at: blockPath,
-            match: (node) => editor.isTextSpan(node),
-          },
-        )
-      } else {
-        const existingMarks: string[] =
-          {
-            ...(Editor.marks(editor) || {}),
-          }.marks || []
-        const marks = {
-          ...(Editor.marks(editor) || {}),
-          marks: [...existingMarks, mark],
-        }
-        editor.marks = marks as Text
-      }
-    }
-
-    if (editor.selection) {
-      // Reselect
-      const selection = editor.selection
-      editor.selection = {...selection}
-    }
-  }
-}
-
 export const removeDecoratorActionImplementation: BehaviorActionImplementation<
   'decorator.remove'
 > = ({action}) => {
@@ -892,7 +797,7 @@ export const toggleDecoratorActionImplementation: BehaviorActionImplementation<
       },
     })
   } else {
-    addDecoratorActionImplementation({
+    decoratorAddActionImplementation({
       context,
       action: {
         type: 'decorator.add',

package/src/internal-utils/get-text-to-emphasize.test.ts

@@ -0,0 +1,36 @@
+import {expect, test} from 'vitest'
+import {getTextToBold, getTextToItalic} from './get-text-to-emphasize'
+
+test(getTextToItalic.name, () => {
+  expect(getTextToItalic('Hello *world*')).toBe('*world*')
+  expect(getTextToItalic('Hello _world_')).toBe('_world_')
+  expect(getTextToItalic('*Hello*world*')).toBe('*world*')
+  expect(getTextToItalic('_Hello_world_')).toBe('_world_')
+
+  expect(getTextToItalic('Hello *world')).toBe(undefined)
+  expect(getTextToItalic('Hello world*')).toBe(undefined)
+  expect(getTextToItalic('Hello *world* *')).toBe(undefined)
+
+  expect(getTextToItalic('_Hello*world_')).toBe('_Hello*world_')
+  expect(getTextToItalic('*Hello_world*')).toBe('*Hello_world*')
+
+  expect(getTextToItalic('*hello\nworld*')).toBe(undefined)
+  expect(getTextToItalic('_hello\nworld_')).toBe(undefined)
+})
+
+test(getTextToBold.name, () => {
+  expect(getTextToBold('Hello **world**')).toBe('**world**')
+  expect(getTextToBold('Hello __world__')).toBe('__world__')
+  expect(getTextToBold('**Hello**world**')).toBe('**world**')
+  expect(getTextToBold('__Hello__world__')).toBe('__world__')
+
+  expect(getTextToBold('Hello **world')).toBe(undefined)
+  expect(getTextToBold('Hello world**')).toBe(undefined)
+  expect(getTextToBold('Hello **world** **')).toBe(undefined)
+
+  expect(getTextToBold('__Hello**world__')).toBe('__Hello**world__')
+  expect(getTextToBold('**Hello__world**')).toBe('**Hello__world**')
+
+  expect(getTextToBold('**hello\nworld**')).toBe(undefined)
+  expect(getTextToBold('__hello\nworld__')).toBe(undefined)
+})

package/src/internal-utils/get-text-to-emphasize.ts

@@ -0,0 +1,18 @@
+const asteriskPairRegex = '(?<!\\*)\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*(?!\\*)'
+const underscorePairRegex = '(?<!_)_(?!\\s)([^_\\n]+?)(?<!\\s)_(?!_)'
+const italicRegex = new RegExp(`(${asteriskPairRegex}|${underscorePairRegex})$`)
+
+const doubleAsteriskPairRegex =
+  '(?<!\\*)\\*\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*\\*(?!\\*)'
+const doubleUnderscorePairRegex = '(?<!_)__(?!\\s)([^_\\n]+?)(?<!\\s)__(?!_)'
+const boldRegex = new RegExp(
+  `(${doubleAsteriskPairRegex}|${doubleUnderscorePairRegex})$`,
+)
+
+export function getTextToItalic(text: string) {
+  return text.match(italicRegex)?.at(0)
+}
+
+export function getTextToBold(text: string) {
+  return text.match(boldRegex)?.at(0)
+}

package/src/plugins/plugin.markdown.tsx

@@ -3,12 +3,17 @@ import {
   createMarkdownBehaviors,
   type MarkdownBehaviorsConfig,
 } from '../behaviors/behavior.markdown'
+import {
+  useMarkdownEmphasisBehaviors,
+  type MarkdownEmphasisBehaviorsConfig,
+} from '../behaviors/behavior.markdown-emphasis'
 import {useEditor} from '../editor/editor-provider'
 
 /**
  * @beta
  */
-export type MarkdownPluginConfig = MarkdownBehaviorsConfig
+export type MarkdownPluginConfig = MarkdownBehaviorsConfig &
+  MarkdownEmphasisBehaviorsConfig
 
 /**
  * @beta
@@ -25,6 +30,10 @@ export type MarkdownPluginConfig = MarkdownBehaviorsConfig
  *    <EditorProvider>
  *      <MarkdownPlugin
  *        config={{
+ *          boldDecorator: ({schema}) =>
+ *            schema.decorators.find((decorator) => decorator.value === 'strong')?.value,
+ *          italicDecorator: ({schema}) =>
+ *            schema.decorators.find((decorator) => decorator.value === 'em')?.value,
  *          horizontalRuleObject: ({schema}) => {
  *            const name = schema.blockObjects.find(
  *              (object) => object.name === 'break',
@@ -51,6 +60,7 @@ export type MarkdownPluginConfig = MarkdownBehaviorsConfig
  */
 export function MarkdownPlugin(props: {config: MarkdownPluginConfig}) {
   const editor = useEditor()
+  useMarkdownEmphasisBehaviors({config: props.config})
 
   useEffect(() => {
     const behaviors = createMarkdownBehaviors(props.config)

package/src/selectors/index.ts

@@ -9,6 +9,10 @@ export type {
 export {getActiveAnnotations} from './selector.get-active-annotations'
 export {getActiveListItem} from './selector.get-active-list-item'
 export {getActiveStyle} from './selector.get-active-style'
+export {getAnchorBlock} from './selector.get-anchor-block'
+export {getAnchorChild} from './selector.get-anchor-child'
+export {getAnchorSpan} from './selector.get-anchor-span'
+export {getAnchorTextBlock} from './selector.get-anchor-text-block'
 export {getBlockOffsets} from './selector.get-block-offsets'
 export {getCaretWordSelection} from './selector.get-caret-word-selection'
 export {getNextInlineObject} from './selector.get-next-inline-object'
@@ -20,6 +24,7 @@ export {getSelectionEndPoint} from './selector.get-selection-end-point'
 export {getSelectionStartPoint} from './selector.get-selection-start-point'
 export {getSelectionText} from './selector.get-selection-text'
 export {getBlockTextBefore} from './selector.get-text-before'
+export {getTrimmedSelection} from './selector.get-trimmed-selection'
 export {getValue} from './selector.get-value'
 export {isActiveAnnotation} from './selector.is-active-annotation'
 export {isActiveDecorator} from './selector.is-active-decorator'

package/src/selectors/selector.get-anchor-block.ts

@@ -0,0 +1,22 @@
+import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isKeyedSegment} from '../utils'
+
+/**
+ * @public
+ */
+export const getAnchorBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const key = context.selection
+    ? isKeyedSegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}

package/src/selectors/selector.get-anchor-child.ts

@@ -0,0 +1,36 @@
+import type {KeyedSegment} from '@portabletext/patches'
+import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isKeyedSegment} from '../utils'
+import {getAnchorTextBlock} from './selector.get-anchor-text-block'
+
+/**
+ * @public
+ */
+export const getAnchorChild: EditorSelector<
+  | {
+      node: PortableTextObject | PortableTextSpan
+      path: [KeyedSegment, 'children', KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  const anchorBlock = getAnchorTextBlock({context})
+
+  if (!anchorBlock) {
+    return undefined
+  }
+
+  const key = context.selection
+    ? isKeyedSegment(context.selection.anchor.path[2])
+      ? context.selection.anchor.path[2]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? anchorBlock.node.children.find((span) => span._key === key)
+    : undefined
+
+  return node && key
+    ? {node, path: [...anchorBlock.path, 'children', {_key: key}]}
+    : undefined
+}

package/src/selectors/selector.get-anchor-span.ts

@@ -0,0 +1,18 @@
+import type {KeyedSegment} from '@portabletext/patches'
+import {isPortableTextSpan, type PortableTextSpan} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getAnchorChild} from './selector.get-anchor-child'
+
+/**
+ * @public
+ */
+export const getAnchorSpan: EditorSelector<
+  | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
+  | undefined
+> = ({context}) => {
+  const anchorChild = getAnchorChild({context})
+
+  return anchorChild && isPortableTextSpan(anchorChild.node)
+    ? {node: anchorChild.node, path: anchorChild.path}
+    : undefined
+}

package/src/selectors/selector.get-anchor-text-block.ts

@@ -0,0 +1,20 @@
+import {
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getAnchorBlock} from './selector.get-anchor-block'
+
+/**
+ * @public
+ */
+export const getAnchorTextBlock: EditorSelector<
+  {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const anchorBlock = getAnchorBlock({context})
+
+  return anchorBlock && isPortableTextTextBlock(anchorBlock.node)
+    ? {node: anchorBlock.node, path: anchorBlock.path}
+    : undefined
+}