@portabletext/editor 1.8.0 → 1.9.0

package/package.json

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

@@ -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 = {
+  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.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,