@portabletext/editor 1.7.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.7.1",
+  "version": "1.9.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

@@ -10,6 +10,7 @@ import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
 import {
   addAnnotationActionImplementation,
+  insertBlockObjectActionImplementation,
   removeAnnotationActionImplementation,
   toggleAnnotationActionImplementation,
 } from '../plugins/createWithEditableAPI'
@@ -22,6 +23,7 @@ import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
 } from './behavior.action.insert-break'
+import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import type {
   BehaviorAction,
   BehaviorEvent,
@@ -112,8 +114,10 @@ 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)
   },
@@ -135,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)
 
@@ -169,6 +176,20 @@ export function performAction({
       })
       break
     }
+    case 'insert block object': {
+      behaviorActionImplementations['insert block object']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert span': {
+      behaviorActionImplementations['insert span']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert text block': {
       behaviorActionImplementations['insert text block']({
         context,
@@ -302,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 = {
+  mapLinkAnnotation?: (config: {
+    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.mapLinkAnnotation?.({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.mapLinkAnnotation?.({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

@@ -1,3 +1,4 @@
+import {isPortableTextSpan} from '@portabletext/toolkit'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
 import {
@@ -10,18 +11,23 @@ import {
  * @alpha
  */
 export type MarkdownBehaviorsConfig = {
-  mapDefaultStyle: (schema: PortableTextMemberSchemaTypes) => string | undefined
-  mapHeadingStyle: (
+  mapBreakObject?: (
+    schema: PortableTextMemberSchemaTypes,
+  ) => {name: string; value?: {[prop: string]: unknown}} | undefined
+  mapDefaultStyle?: (
+    schema: PortableTextMemberSchemaTypes,
+  ) => string | undefined
+  mapHeadingStyle?: (
     schema: PortableTextMemberSchemaTypes,
     level: number,
   ) => string | undefined
-  mapBlockquoteStyle: (
+  mapBlockquoteStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
-  mapUnorderedListStyle: (
+  mapUnorderedListStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
-  mapOrderedListStyle: (
+  mapOrderedListStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
 }
@@ -49,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.mapBlockquoteStyle?.(context.schema)
 
       if (
         caretAtTheEndOfQuote &&
@@ -95,6 +101,66 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ],
     ],
   })
+  const automaticBreak = defineBehavior({
+    on: 'insert text',
+    guard: ({context, event}) => {
+      const isDash = event.text === '-'
+
+      if (!isDash) {
+        return false
+      }
+
+      const breakObject = config.mapBreakObject?.(context.schema)
+      const focusBlock = getFocusTextBlock(context)
+      const selectionCollapsed = selectionIsCollapsed(context)
+
+      if (!breakObject || !focusBlock || !selectionCollapsed) {
+        return false
+      }
+
+      const onlyText = focusBlock.node.children.every(isPortableTextSpan)
+      const blockText = focusBlock.node.children
+        .map((child) => child.text ?? '')
+        .join('')
+
+      if (onlyText && blockText === '--') {
+        return {breakObject, focusBlock}
+      }
+
+      return false
+    },
+    actions: [
+      () => [
+        {
+          type: 'insert text',
+          text: '-',
+        },
+      ],
+      (_, {breakObject, focusBlock}) => [
+        {
+          type: 'insert block object',
+          ...breakObject,
+        },
+        {
+          type: 'delete',
+          selection: {
+            anchor: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+          },
+        },
+        {
+          type: 'insert text block',
+          decorators: [],
+        },
+      ],
+    ],
+  })
   const automaticHeadingOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
@@ -125,7 +191,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
       const headingStyle =
         headingLevel !== undefined
-          ? config.mapHeadingStyle(context.schema, headingLevel)
+          ? config.mapHeadingStyle?.(context.schema, headingLevel)
           : undefined
 
       if (headingLevel !== undefined && headingStyle !== undefined) {
@@ -188,7 +254,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.mapDefaultStyle?.(context.schema)
 
       if (
         atTheBeginningOfBLock &&
@@ -227,9 +293,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const defaultStyle = config.mapDefaultStyle(context.schema)
+      const defaultStyle = config.mapDefaultStyle?.(context.schema)
       const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
-      const unorderedListStyle = config.mapUnorderedListStyle(context.schema)
+      const unorderedListStyle = config.mapUnorderedListStyle?.(context.schema)
       const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
       if (
@@ -248,7 +314,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
-      const orderedListStyle = config.mapOrderedListStyle(context.schema)
+      const orderedListStyle = config.mapOrderedListStyle?.(context.schema)
       const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
       if (
@@ -302,6 +368,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
   const markdownBehaviors = [
     automaticBlockquoteOnSpace,
+    automaticBreak,
     automaticHeadingOnSpace,
     clearStyleOnBackspace,
     automaticListOnSpace,

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
@@ -94,6 +98,20 @@ export type BehaviorGuard<
  */
 export type BehaviorActionIntend =
   | BehaviorEvent
+  | {
+      type: 'insert block object'
+      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>