@portabletext/editor 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -58,11 +58,11 @@
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.64.0",
+    "@sanity/block-tools": "^3.64.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.10",
-    "@sanity/schema": "^3.64.0",
-    "@sanity/types": "^3.64.0",
+    "@sanity/pkg-utils": "^6.11.11",
+    "@sanity/schema": "^3.64.1",
+    "@sanity/types": "^3.64.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
@@ -73,7 +73,7 @@
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/browser": "^2.1.4",
+    "@vitest/browser": "^2.1.5",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "eslint": "8.57.1",
     "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
@@ -85,14 +85,14 @@
     "styled-components": "^6.1.13",
     "typescript": "5.6.3",
     "vite": "^5.4.11",
-    "vitest": "^2.1.4",
+    "vitest": "^2.1.5",
     "vitest-browser-react": "^0.0.3",
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.64.0",
-    "@sanity/schema": "^3.64.0",
-    "@sanity/types": "^3.64.0",
+    "@sanity/block-tools": "^3.64.1",
+    "@sanity/schema": "^3.64.1",
+    "@sanity/types": "^3.64.1",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/Editable.tsx

@@ -428,16 +428,6 @@ export const PortableTextEditable = forwardRef<
   // Handle incoming pasting events in the editor
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
-      event.preventDefault()
-      if (!slateEditor.selection) {
-        return
-      }
-      if (!onPaste) {
-        debug('Pasting normally')
-        slateEditor.insertData(event.clipboardData)
-        return
-      }
-
       const value = PortableTextEditor.getValue(portableTextEditor)
       const ptRange = toPortableTextRange(
         value,
@@ -445,19 +435,21 @@ export const PortableTextEditable = forwardRef<
         schemaTypes,
       )
       const path = ptRange?.focus.path || []
-      const onPasteResult = onPaste({event, value, path, schemaTypes})
+      const onPasteResult = onPaste?.({event, value, path, schemaTypes})
+
+      if (onPasteResult || !slateEditor.selection) {
+        event.preventDefault()
 
-      if (onPasteResult === undefined) {
-        debug('No result from custom paste handler, pasting normally')
-        slateEditor.insertData(event.clipboardData)
-      } else {
         // Resolve it as promise (can be either async promise or sync return value)
         editorActor.send({type: 'loading'})
+
         Promise.resolve(onPasteResult)
           .then((result) => {
             debug('Custom paste function from client resolved', result)
+
             if (!result || !result.insert) {
               debug('No result from custom paste handler, pasting normally')
+
               slateEditor.insertData(event.clipboardData)
             } else if (result.insert) {
               slateEditor.insertFragment(
@@ -474,12 +466,26 @@ export const PortableTextEditable = forwardRef<
           })
           .catch((error) => {
             console.error(error)
+
             return error
           })
           .finally(() => {
             editorActor.send({type: 'done loading'})
           })
+      } else if (event.nativeEvent.clipboardData) {
+        event.preventDefault()
+
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'paste',
+            clipboardData: event.nativeEvent.clipboardData,
+          },
+          editor: slateEditor,
+        })
       }
+
+      debug('No result from custom paste handler, pasting normally')
     },
     [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor],
   )
@@ -515,23 +521,32 @@ export const PortableTextEditable = forwardRef<
       if (onClick) {
         onClick(event)
       }
-      // Inserts a new block if it's clicking on the editor, focused on the last block and it's a void element
-      if (slateEditor.selection && event.target === event.currentTarget) {
-        const [lastBlock, path] = Node.last(slateEditor, [])
-        const focusPath = slateEditor.selection.focus.path.slice(0, 1)
-        const lastPath = path.slice(0, 1)
-        if (Path.equals(focusPath, lastPath)) {
-          const node = Node.descendant(slateEditor, path.slice(0, 1)) as
+
+      const focusBlockPath = slateEditor.selection
+        ? slateEditor.selection.focus.path.slice(0, 1)
+        : undefined
+      const focusBlock = focusBlockPath
+        ? (Node.descendant(slateEditor, focusBlockPath) as
             | SlateTextBlock
-            | VoidElement
-          if (lastBlock && Editor.isVoid(slateEditor, node)) {
-            Transforms.insertNodes(
-              slateEditor,
-              slateEditor.pteCreateTextBlock({decorators: []}),
-            )
-            slateEditor.onChange()
-          }
-        }
+            | VoidElement)
+        : undefined
+      const [_, lastNodePath] = Node.last(slateEditor, [])
+      const lastBlockPath = lastNodePath.slice(0, 1)
+      const lastNodeFocused = focusBlockPath
+        ? Path.equals(lastBlockPath, focusBlockPath)
+        : false
+      const lastBlockIsVoid = focusBlock
+        ? !slateEditor.isTextBlock(focusBlock)
+        : false
+      const collapsedSelection =
+        slateEditor.selection && SlateRange.isCollapsed(slateEditor.selection)
+
+      if (collapsedSelection && lastNodeFocused && lastBlockIsVoid) {
+        Transforms.insertNodes(
+          slateEditor,
+          slateEditor.pteCreateTextBlock({decorators: []}),
+        )
+        slateEditor.onChange()
       }
     },
     [onClick, slateEditor],

package/src/editor/behavior/behavior.action.insert-span.ts

@@ -0,0 +1,48 @@
+import {Editor, Transforms} from 'slate'
+import type {BehaviourActionImplementation} from './behavior.actions'
+
+export const insertSpanActionImplementation: BehaviourActionImplementation<
+  'insert span'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    console.error('Unable to perform action without selection', action)
+    return
+  }
+
+  const [focusBlock, focusBlockPath] = Array.from(
+    Editor.nodes(action.editor, {
+      at: action.editor.selection.focus.path,
+      match: (node) => action.editor.isTextBlock(node),
+    }),
+  )[0] ?? [undefined, undefined]
+
+  if (!focusBlock || !focusBlockPath) {
+    console.error('Unable to perform action without focus block', action)
+    return
+  }
+
+  const markDefs = focusBlock.markDefs ?? []
+  const annotations = action.annotations
+    ? action.annotations.map((annotation) => ({
+        _type: annotation.name,
+        _key: context.keyGenerator(),
+        ...annotation.value,
+      }))
+    : undefined
+
+  if (annotations && annotations.length > 0) {
+    Transforms.setNodes(action.editor, {
+      markDefs: [...markDefs, ...annotations],
+    })
+  }
+
+  Transforms.insertNodes(action.editor, {
+    _type: 'span',
+    _key: context.keyGenerator(),
+    text: action.text,
+    marks: [
+      ...(annotations?.map((annotation) => annotation._key) ?? []),
+      ...(action.decorators ?? []),
+    ],
+  })
+}

package/src/editor/behavior/behavior.actions.ts

@@ -23,6 +23,7 @@ import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
 } from './behavior.action.insert-break'
+import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import type {
   BehaviorAction,
   BehaviorEvent,
@@ -116,6 +117,7 @@ const behaviorActionImplementations: BehaviourActionImplementations = {
   'insert block object': insertBlockObjectActionImplementation,
   'insert break': insertBreakActionImplementation,
   'insert soft break': insertSoftBreakActionImplementation,
+  'insert span': insertSpanActionImplementation,
   'insert text': ({action}) => {
     insertText(action.editor, action.text)
   },
@@ -137,6 +139,9 @@ const behaviorActionImplementations: BehaviourActionImplementations = {
   'effect': ({action}) => {
     action.effect()
   },
+  'paste': ({action}) => {
+    action.editor.insertData(action.clipboardData)
+  },
   'select': ({action}) => {
     const newSelection = toSlateRange(action.selection, action.editor)
 
@@ -178,6 +183,13 @@ export function performAction({
       })
       break
     }
+    case 'insert span': {
+      behaviorActionImplementations['insert span']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert text block': {
       behaviorActionImplementations['insert text block']({
         context,
@@ -311,11 +323,18 @@ function performDefaultAction({
       })
       break
     }
-    default: {
+    case 'insert text': {
       behaviorActionImplementations['insert text']({
         context,
         action,
       })
+      break
+    }
+    default: {
+      behaviorActionImplementations.paste({
+        context,
+        action,
+      })
     }
   }
 }

package/src/editor/behavior/behavior.links.ts

@@ -0,0 +1,91 @@
+import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import {defineBehavior} from './behavior.types'
+import {getFocusSpan, selectionIsCollapsed} from './behavior.utils'
+
+/**
+ * @alpha
+ */
+export type LinkBehaviorsConfig = {
+  linkAnnotation?: (context: {
+    schema: PortableTextMemberSchemaTypes
+    url: string
+  }) => {name: string; value: {[prop: string]: unknown}} | undefined
+}
+
+/**
+ * @alpha
+ */
+export function createLinkBehaviors(config: LinkBehaviorsConfig) {
+  const pasteLinkOnSelection = defineBehavior({
+    on: 'paste',
+    guard: ({context, event}) => {
+      const selectionCollapsed = selectionIsCollapsed(context)
+      const text = event.clipboardData.getData('text/plain')
+      const url = looksLikeUrl(text) ? text : undefined
+      const annotation =
+        url !== undefined
+          ? config.linkAnnotation?.({url, schema: context.schema})
+          : undefined
+
+      if (annotation && !selectionCollapsed) {
+        return {annotation}
+      }
+
+      return false
+    },
+    actions: [
+      (_, {annotation}) => [
+        {
+          type: 'annotation.add',
+          annotation,
+        },
+      ],
+    ],
+  })
+  const pasteLinkAtCaret = defineBehavior({
+    on: 'paste',
+    guard: ({context, event}) => {
+      const focusSpan = getFocusSpan(context)
+      const selectionCollapsed = selectionIsCollapsed(context)
+
+      if (!focusSpan || !selectionCollapsed) {
+        return false
+      }
+
+      const text = event.clipboardData.getData('text/plain')
+      const url = looksLikeUrl(text) ? text : undefined
+      const annotation =
+        url !== undefined
+          ? config.linkAnnotation?.({url, schema: context.schema})
+          : undefined
+
+      if (url && annotation && selectionCollapsed) {
+        return {focusSpan, annotation, url}
+      }
+
+      return false
+    },
+    actions: [
+      (_, {annotation, url}) => [
+        {
+          type: 'insert span',
+          text: url,
+          annotations: [annotation],
+        },
+      ],
+    ],
+  })
+
+  const linkBehaviors = [pasteLinkOnSelection, pasteLinkAtCaret]
+
+  return linkBehaviors
+}
+
+function looksLikeUrl(text: string) {
+  let looksLikeUrl = false
+  try {
+    new URL(text)
+    looksLikeUrl = true
+  } catch {}
+  return looksLikeUrl
+}

package/src/editor/behavior/behavior.markdown.ts

@@ -11,25 +11,25 @@ import {
  * @alpha
  */
 export type MarkdownBehaviorsConfig = {
-  mapBreakObject?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => {name: string; value?: {[prop: string]: unknown}} | undefined
-  mapDefaultStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapHeadingStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-    level: number,
-  ) => string | undefined
-  mapBlockquoteStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapUnorderedListStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
-  mapOrderedListStyle?: (
-    schema: PortableTextMemberSchemaTypes,
-  ) => string | undefined
+  horizontalRuleObject?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => {name: string; value?: {[prop: string]: unknown}} | undefined
+  defaultStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  headingStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+    level: number
+  }) => string | undefined
+  blockquoteStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  unorderedListStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
+  orderedListStyle?: (context: {
+    schema: PortableTextMemberSchemaTypes
+  }) => string | undefined
 }
 
 /**
@@ -55,7 +55,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
       const caretAtTheEndOfQuote = context.selection.focus.offset === 1
       const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
-      const blockquoteStyle = config.mapBlockquoteStyle?.(context.schema)
+      const blockquoteStyle = config.blockquoteStyle?.({schema: context.schema})
 
       if (
         caretAtTheEndOfQuote &&
@@ -104,13 +104,22 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const automaticBreak = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
-      const isDash = event.text === '-'
-
-      if (!isDash) {
+      const hrCharacter =
+        event.text === '-'
+          ? '-'
+          : event.text === '*'
+            ? '*'
+            : event.text === '_'
+              ? '_'
+              : undefined
+
+      if (hrCharacter === undefined) {
         return false
       }
 
-      const breakObject = config.mapBreakObject?.(context.schema)
+      const breakObject = config.horizontalRuleObject?.({
+        schema: context.schema,
+      })
       const focusBlock = getFocusTextBlock(context)
       const selectionCollapsed = selectionIsCollapsed(context)
 
@@ -123,17 +132,17 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         .map((child) => child.text ?? '')
         .join('')
 
-      if (onlyText && blockText === '--') {
-        return {breakObject, focusBlock}
+      if (onlyText && blockText === `${hrCharacter}${hrCharacter}`) {
+        return {breakObject, focusBlock, hrCharacter}
       }
 
       return false
     },
     actions: [
-      () => [
+      (_, {hrCharacter}) => [
         {
           type: 'insert text',
-          text: '-',
+          text: hrCharacter,
         },
       ],
       (_, {breakObject, focusBlock}) => [
@@ -179,27 +188,26 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text)
-      const headingLevel = markdownHeadingSearch
+      const level = markdownHeadingSearch
         ? markdownHeadingSearch[0].length
         : undefined
-      const caretAtTheEndOfHeading =
-        context.selection.focus.offset === headingLevel
+      const caretAtTheEndOfHeading = context.selection.focus.offset === level
 
       if (!caretAtTheEndOfHeading) {
         return false
       }
 
-      const headingStyle =
-        headingLevel !== undefined
-          ? config.mapHeadingStyle?.(context.schema, headingLevel)
+      const style =
+        level !== undefined
+          ? config.headingStyle?.({schema: context.schema, level})
           : undefined
 
-      if (headingLevel !== undefined && headingStyle !== undefined) {
+      if (level !== undefined && style !== undefined) {
         return {
           focusTextBlock,
           focusSpan,
-          style: headingStyle,
-          level: headingLevel,
+          style: style,
+          level,
         }
       }
 
@@ -254,7 +262,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         focusTextBlock.node.children[0]._key === focusSpan.node._key &&
         context.selection.focus.offset === 0
 
-      const defaultStyle = config.mapDefaultStyle?.(context.schema)
+      const defaultStyle = config.defaultStyle?.({schema: context.schema})
 
       if (
         atTheBeginningOfBLock &&
@@ -293,9 +301,11 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const defaultStyle = config.mapDefaultStyle?.(context.schema)
+      const defaultStyle = config.defaultStyle?.({schema: context.schema})
       const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
-      const unorderedListStyle = config.mapUnorderedListStyle?.(context.schema)
+      const unorderedListStyle = config.unorderedListStyle?.({
+        schema: context.schema,
+      })
       const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
       if (
@@ -314,7 +324,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
-      const orderedListStyle = config.mapOrderedListStyle?.(context.schema)
+      const orderedListStyle = config.orderedListStyle?.({
+        schema: context.schema,
+      })
       const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
       if (

package/src/editor/behavior/behavior.types.ts

@@ -74,6 +74,10 @@ export type BehaviorEvent =
       text: string
       options?: TextInsertTextOptions
     }
+  | {
+      type: 'paste'
+      clipboardData: NonNullable<ClipboardEvent['clipboardData']>
+    }
 
 /**
  * @alpha
@@ -99,6 +103,15 @@ export type BehaviorActionIntend =
       name: string
       value?: {[prop: string]: unknown}
     }
+  | {
+      type: 'insert span'
+      text: string
+      annotations?: Array<{
+        name: string
+        value: {[prop: string]: unknown}
+      }>
+      decorators?: Array<string>
+    }
   | {
       type: 'insert text block'
       decorators: Array<string>

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -837,12 +837,16 @@ export function isDecoratorActive({
     return false
   }
 
-  const selectedNodes = Array.from(
+  const selectedTextNodes = Array.from(
     Editor.nodes(editor, {match: Text.isText, at: editor.selection}),
   )
 
+  if (selectedTextNodes.length === 0) {
+    return false
+  }
+
   if (Range.isExpanded(editor.selection)) {
-    return selectedNodes.every((n) => {
+    return selectedTextNodes.every((n) => {
       const [node] = n
 
       return node.marks?.includes(decorator)

package/src/index.ts

@@ -5,6 +5,10 @@ export {
   createMarkdownBehaviors,
   type MarkdownBehaviorsConfig,
 } from './editor/behavior/behavior.markdown'
+export {
+  createLinkBehaviors,
+  type LinkBehaviorsConfig,
+} from './editor/behavior/behavior.links'
 export {
   defineBehavior,
   type Behavior,