@portabletext/editor 1.8.0 → 1.9.0

package/lib/index.d.mts

@@ -131,6 +131,17 @@ export declare type BehaviorActionIntend =
         [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>
@@ -251,6 +262,10 @@ export declare type BehaviorEvent =
       text: string
       options?: TextInsertTextOptions
     }
+  | {
+      type: 'paste'
+      clipboardData: NonNullable<ClipboardEvent['clipboardData']>
+    }
 
 /**
  * @alpha
@@ -381,7 +396,8 @@ export declare const coreBehavior: {
     | 'delete forward'
     | 'insert soft break'
     | 'insert break'
-    | 'insert text',
+    | 'insert text'
+    | 'paste',
     true
   >
   decorators: {
@@ -397,7 +413,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     decoratorRemove: Behavior<
@@ -412,7 +429,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     decoratorToggle: Behavior<
@@ -427,7 +445,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -444,7 +463,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     deletingEmptyTextBlockAfterBlockObject: Behavior<
@@ -459,7 +479,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     deletingEmptyTextBlockBeforeBlockObject: Behavior<
@@ -474,7 +495,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -491,7 +513,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     unindentListOnBackspace: Behavior<
@@ -506,7 +529,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -527,7 +551,30 @@ export declare const coreBehaviors: Behavior<
   | 'delete forward'
   | 'insert soft break'
   | 'insert break'
-  | 'insert text',
+  | 'insert text'
+  | 'paste',
+  true
+>[]
+
+/**
+ * @alpha
+ */
+export declare function createLinkBehaviors(
+  config: LinkBehaviorsConfig,
+): Behavior<
+  | 'focus'
+  | 'annotation.add'
+  | 'annotation.remove'
+  | 'annotation.toggle'
+  | 'decorator.add'
+  | 'decorator.remove'
+  | 'decorator.toggle'
+  | 'delete backward'
+  | 'delete forward'
+  | 'insert soft break'
+  | 'insert break'
+  | 'insert text'
+  | 'paste',
   true
 >[]
 
@@ -548,7 +595,8 @@ export declare function createMarkdownBehaviors(
   | 'delete forward'
   | 'insert soft break'
   | 'insert break'
-  | 'insert text',
+  | 'insert text'
+  | 'paste',
   true
 >[]
 
@@ -5773,6 +5821,23 @@ export declare type InvalidValueResolution = {
  */
 export declare const keyGenerator: () => string
 
+/**
+ * @alpha
+ */
+export declare type LinkBehaviorsConfig = {
+  mapLinkAnnotation?: (config: {
+    schema: PortableTextMemberSchemaTypes
+    url: string
+  }) =>
+    | {
+        name: string
+        value: {
+          [prop: string]: unknown
+        }
+      }
+    | undefined
+}
+
 /**
  * The editor is currently loading something
  * Could be used to show a spinner etc.

package/lib/index.d.ts

@@ -131,6 +131,17 @@ export declare type BehaviorActionIntend =
         [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>
@@ -251,6 +262,10 @@ export declare type BehaviorEvent =
       text: string
       options?: TextInsertTextOptions
     }
+  | {
+      type: 'paste'
+      clipboardData: NonNullable<ClipboardEvent['clipboardData']>
+    }
 
 /**
  * @alpha
@@ -381,7 +396,8 @@ export declare const coreBehavior: {
     | 'delete forward'
     | 'insert soft break'
     | 'insert break'
-    | 'insert text',
+    | 'insert text'
+    | 'paste',
     true
   >
   decorators: {
@@ -397,7 +413,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     decoratorRemove: Behavior<
@@ -412,7 +429,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     decoratorToggle: Behavior<
@@ -427,7 +445,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -444,7 +463,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     deletingEmptyTextBlockAfterBlockObject: Behavior<
@@ -459,7 +479,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     deletingEmptyTextBlockBeforeBlockObject: Behavior<
@@ -474,7 +495,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -491,7 +513,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
     unindentListOnBackspace: Behavior<
@@ -506,7 +529,8 @@ export declare const coreBehavior: {
       | 'delete forward'
       | 'insert soft break'
       | 'insert break'
-      | 'insert text',
+      | 'insert text'
+      | 'paste',
       true
     >
   }
@@ -527,7 +551,30 @@ export declare const coreBehaviors: Behavior<
   | 'delete forward'
   | 'insert soft break'
   | 'insert break'
-  | 'insert text',
+  | 'insert text'
+  | 'paste',
+  true
+>[]
+
+/**
+ * @alpha
+ */
+export declare function createLinkBehaviors(
+  config: LinkBehaviorsConfig,
+): Behavior<
+  | 'focus'
+  | 'annotation.add'
+  | 'annotation.remove'
+  | 'annotation.toggle'
+  | 'decorator.add'
+  | 'decorator.remove'
+  | 'decorator.toggle'
+  | 'delete backward'
+  | 'delete forward'
+  | 'insert soft break'
+  | 'insert break'
+  | 'insert text'
+  | 'paste',
   true
 >[]
 
@@ -548,7 +595,8 @@ export declare function createMarkdownBehaviors(
   | 'delete forward'
   | 'insert soft break'
   | 'insert break'
-  | 'insert text',
+  | 'insert text'
+  | 'paste',
   true
 >[]
 
@@ -5773,6 +5821,23 @@ export declare type InvalidValueResolution = {
  */
 export declare const keyGenerator: () => string
 
+/**
+ * @alpha
+ */
+export declare type LinkBehaviorsConfig = {
+  mapLinkAnnotation?: (config: {
+    schema: PortableTextMemberSchemaTypes
+    url: string
+  }) =>
+    | {
+        name: string
+        value: {
+          [prop: string]: unknown
+        }
+      }
+    | undefined
+}
+
 /**
  * The editor is currently loading something
  * Could be used to show a spinner etc.

package/lib/index.esm.js

@@ -554,6 +554,65 @@ function createMarkdownBehaviors(config) {
   };
   return [automaticBlockquoteOnSpace, automaticBreak, automaticHeadingOnSpace, clearStyleOnBackspace, automaticListOnSpace];
 }
+function createLinkBehaviors(config) {
+  const pasteLinkOnSelection = {
+    on: "paste",
+    guard: ({
+      context,
+      event
+    }) => {
+      const selectionCollapsed = selectionIsCollapsed(context), text = event.clipboardData.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? config.mapLinkAnnotation?.({
+        url,
+        schema: context.schema
+      }) : void 0;
+      return annotation && !selectionCollapsed ? {
+        annotation
+      } : !1;
+    },
+    actions: [(_, {
+      annotation
+    }) => [{
+      type: "annotation.add",
+      annotation
+    }]]
+  }, pasteLinkAtCaret = {
+    on: "paste",
+    guard: ({
+      context,
+      event
+    }) => {
+      const focusSpan = getFocusSpan(context), selectionCollapsed = selectionIsCollapsed(context);
+      if (!focusSpan || !selectionCollapsed)
+        return !1;
+      const text = event.clipboardData.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? config.mapLinkAnnotation?.({
+        url,
+        schema: context.schema
+      }) : void 0;
+      return url && annotation && selectionCollapsed ? {
+        focusSpan,
+        annotation,
+        url
+      } : !1;
+    },
+    actions: [(_, {
+      annotation,
+      url
+    }) => [{
+      type: "insert span",
+      text: url,
+      annotations: [annotation]
+    }]]
+  };
+  return [pasteLinkOnSelection, pasteLinkAtCaret];
+}
+function looksLikeUrl(text) {
+  let looksLikeUrl2 = !1;
+  try {
+    new URL(text), looksLikeUrl2 = !0;
+  } catch {
+  }
+  return looksLikeUrl2;
+}
 function getPortableTextMemberSchemaTypes(portableTextType) {
   if (!portableTextType)
     throw new Error("Parameter 'portabletextType' missing (required)");
@@ -4468,11 +4527,11 @@ function isDecoratorActive({
 }) {
   if (!editor.selection)
     return !1;
-  const selectedNodes = Array.from(Editor.nodes(editor, {
+  const selectedTextNodes = Array.from(Editor.nodes(editor, {
     match: Text.isText,
     at: editor.selection
   }));
-  return Range.isExpanded(editor.selection) ? selectedNodes.every((n) => {
+  return selectedTextNodes.length === 0 ? !1 : Range.isExpanded(editor.selection) ? selectedTextNodes.every((n) => {
     const [node] = n;
     return node.marks?.includes(decorator);
   }) : ({
@@ -5300,6 +5359,35 @@ const addAnnotationActionImplementation = ({
       type: "insert break"
     }
   });
+}, insertSpanActionImplementation = ({
+  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] ?? [void 0, void 0];
+  if (!focusBlock || !focusBlockPath) {
+    console.error("Unable to perform action without focus block", action);
+    return;
+  }
+  const markDefs = focusBlock.markDefs ?? [], annotations = action.annotations ? action.annotations.map((annotation) => ({
+    _type: annotation.name,
+    _key: context.keyGenerator(),
+    ...annotation.value
+  })) : void 0;
+  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 ?? []]
+  });
 }, behaviorActionImplementations = {
   "annotation.add": addAnnotationActionImplementation,
   "annotation.remove": removeAnnotationActionImplementation,
@@ -5387,6 +5475,7 @@ const addAnnotationActionImplementation = ({
   "insert block object": insertBlockObjectActionImplementation,
   "insert break": insertBreakActionImplementation,
   "insert soft break": insertSoftBreakActionImplementation,
+  "insert span": insertSpanActionImplementation,
   "insert text": ({
     action
   }) => {
@@ -5413,6 +5502,11 @@ const addAnnotationActionImplementation = ({
   }) => {
     action.effect();
   },
+  paste: ({
+    action
+  }) => {
+    action.editor.insertData(action.clipboardData);
+  },
   select: ({
     action
   }) => {
@@ -5449,6 +5543,13 @@ function performAction({
       });
       break;
     }
+    case "insert span": {
+      behaviorActionImplementations["insert span"]({
+        context,
+        action
+      });
+      break;
+    }
     case "insert text block": {
       behaviorActionImplementations["insert text block"]({
         context,
@@ -5580,11 +5681,18 @@ function performDefaultAction({
       });
       break;
     }
-    default:
+    case "insert text": {
       behaviorActionImplementations["insert text"]({
         context,
         action
       });
+      break;
+    }
+    default:
+      behaviorActionImplementations.paste({
+        context,
+        action
+      });
   }
 }
 const networkLogic = fromCallback(({
@@ -6650,19 +6758,13 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   const handleCopy = useCallback((event) => {
     onCopy && onCopy(event) !== void 0 && event.preventDefault();
   }, [onCopy]), handlePaste = useCallback((event_0) => {
-    if (event_0.preventDefault(), !slateEditor.selection)
-      return;
-    if (!onPaste) {
-      debug("Pasting normally"), slateEditor.insertData(event_0.clipboardData);
-      return;
-    }
-    const value_0 = PortableTextEditor.getValue(portableTextEditor), path = toPortableTextRange(value_0, slateEditor.selection, schemaTypes)?.focus.path || [], onPasteResult = onPaste({
+    const value_0 = PortableTextEditor.getValue(portableTextEditor), path = toPortableTextRange(value_0, slateEditor.selection, schemaTypes)?.focus.path || [], onPasteResult = onPaste?.({
       event: event_0,
       value: value_0,
       path,
       schemaTypes
     });
-    onPasteResult === void 0 ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event_0.clipboardData)) : (editorActor.send({
+    onPasteResult || !slateEditor.selection ? (event_0.preventDefault(), editorActor.send({
       type: "loading"
     }), Promise.resolve(onPasteResult).then((result_0) => {
       debug("Custom paste function from client resolved", result_0), !result_0 || !result_0.insert ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event_0.clipboardData)) : result_0.insert ? slateEditor.insertFragment(toSlateValue(result_0.insert, {
@@ -6672,7 +6774,14 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       editorActor.send({
         type: "done loading"
       });
-    }));
+    })) : event_0.nativeEvent.clipboardData && (event_0.preventDefault(), editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "paste",
+        clipboardData: event_0.nativeEvent.clipboardData
+      },
+      editor: slateEditor
+    })), debug("No result from custom paste handler, pasting normally");
   }, [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor]), handleOnFocus = useCallback((event_1) => {
     if (onFocus && onFocus(event_1), !event_1.isDefaultPrevented()) {
       const selection = PortableTextEditor.getSelection(portableTextEditor);
@@ -6687,15 +6796,11 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       });
     }
   }, [editorActor, onFocus, portableTextEditor, slateEditor]), handleClick = useCallback((event_2) => {
-    if (onClick && onClick(event_2), slateEditor.selection && event_2.target === event_2.currentTarget) {
-      const [lastBlock, path_0] = Node.last(slateEditor, []), focusPath = slateEditor.selection.focus.path.slice(0, 1), lastPath = path_0.slice(0, 1);
-      if (Path.equals(focusPath, lastPath)) {
-        const node = Node.descendant(slateEditor, path_0.slice(0, 1));
-        lastBlock && Editor.isVoid(slateEditor, node) && (Transforms.insertNodes(slateEditor, slateEditor.pteCreateTextBlock({
-          decorators: []
-        })), slateEditor.onChange());
-      }
-    }
+    onClick && onClick(event_2);
+    const focusBlockPath = slateEditor.selection ? slateEditor.selection.focus.path.slice(0, 1) : void 0, focusBlock = focusBlockPath ? Node.descendant(slateEditor, focusBlockPath) : void 0, [_, lastNodePath] = Node.last(slateEditor, []), lastBlockPath = lastNodePath.slice(0, 1), lastNodeFocused = focusBlockPath ? Path.equals(lastBlockPath, focusBlockPath) : !1, lastBlockIsVoid = focusBlock ? !slateEditor.isTextBlock(focusBlock) : !1;
+    slateEditor.selection && Range.isCollapsed(slateEditor.selection) && lastNodeFocused && lastBlockIsVoid && (Transforms.insertNodes(slateEditor, slateEditor.pteCreateTextBlock({
+      decorators: []
+    })), slateEditor.onChange());
   }, [onClick, slateEditor]), handleOnBlur = useCallback((event_3) => {
     onBlur && onBlur(event_3), event_3.isPropagationStopped() || editorActor.send({
       type: "blur",
@@ -6743,7 +6848,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       return scrollSelectionIntoView === null ? noop : (_editor, domRange) => {
         scrollSelectionIntoView(portableTextEditor, domRange);
       };
-  }, [portableTextEditor, scrollSelectionIntoView]), decorate = useCallback(([, path_1]) => {
+  }, [portableTextEditor, scrollSelectionIntoView]), decorate = useCallback(([, path_0]) => {
     if (isEqualToEmptyEditor(slateEditor.children, schemaTypes))
       return [{
         anchor: {
@@ -6756,18 +6861,18 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         },
         placeholder: !0
       }];
-    if (path_1.length === 0)
+    if (path_0.length === 0)
       return [];
-    const result_1 = rangeDecorationState.filter((item) => Range.isCollapsed(item) ? path_1.length !== 2 ? !1 : Path.equals(item.focus.path, path_1) && Path.equals(item.anchor.path, path_1) : Range.intersection(item, {
+    const result_1 = rangeDecorationState.filter((item) => Range.isCollapsed(item) ? path_0.length !== 2 ? !1 : Path.equals(item.focus.path, path_0) && Path.equals(item.anchor.path, path_0) : Range.intersection(item, {
       anchor: {
-        path: path_1,
+        path: path_0,
         offset: 0
       },
       focus: {
-        path: path_1,
+        path: path_0,
         offset: 0
       }
-    }) || Range.includes(item, path_1));
+    }) || Range.includes(item, path_0));
     return result_1.length > 0 ? result_1 : [];
   }, [slateEditor, schemaTypes, rangeDecorationState]);
   return useEffect(() => {
@@ -6838,6 +6943,7 @@ export {
   PortableTextEditor,
   coreBehavior,
   coreBehaviors,
+  createLinkBehaviors,
   createMarkdownBehaviors,
   defineBehavior,
   defineSchema,