@portabletext/editor 1.35.0 → 1.35.2

package/lib/index.d.ts

@@ -607,52 +607,12 @@ export declare type EditorEvent =
 
 /**
  * @public
- * Listen for events emitted by the editor. Must be used inside `EditorProvider`. Events available include:
- *  - 'blurred'
- *  - 'done loading'
- *  - 'editable'
- *  - 'error'
- *  - 'focused'
- *  - 'invalid value'
- *  - 'loading'
- *  - 'mutation'
- *  - 'patch'
- *  - 'read only'
- *  - 'ready'
- *  - 'selection'
- *  - 'value changed'
+ * @deprecated
+ * This component has been renamed. Use `EventListenerPlugin` instead.
  *
- * @example
- * Listen and log events.
- * ```tsx
- * import {EditorProvider} from '@portabletext/editor'
- * import {EventListenerPlugin} from '@portabletext/editor/plugins'
- *
- * function MyComponent() {
- *  return (
- *  <EditorProvider>
- *   <EventListenerPlugin
- *    on={(event) => {
- *     console.log(event)
- *    }
- *   } />
- *   { ... }
- * </EditorProvider>
- *  )
- * }
  * ```
- * @example
- * Handle events when there is a mutation.
- * ```tsx
- * <EventListenerPlugin
- *  on={(event) => {
- *    if (event.type === 'mutation') {
- *      console.log('Value changed:', event.snapshot)
- *    }
- *  }}
- * />
+ * import {EventListenerPlugin} from '@portabletext/editor/plugins'
  * ```
- * @group Components
  */
 export declare function EditorEventListener(props: {
   on: (event: EditorEmittedEvent) => void
@@ -1013,6 +973,15 @@ declare const editorMachine: StateMachine<
   | {
       type: 'notify.unset'
       previousValue: Array<PortableTextBlock>
+    }
+  | {
+      type: 'dragstart'
+    }
+  | {
+      type: 'dragend'
+    }
+  | {
+      type: 'drop'
     },
   {},
   never,
@@ -1074,7 +1043,9 @@ declare const editorMachine: StateMachine<
   never,
   {
     'edit mode':
-      | 'editable'
+      | {
+          editable: 'dragging internally' | 'idle'
+        }
       | {
           'read only': 'read only' | 'determine initial edit mode'
         }
@@ -1085,7 +1056,7 @@ declare const editorMachine: StateMachine<
           pristine: 'normalizing' | 'idle'
         }
   },
-  string,
+  'dragging internally',
   {
     behaviors?: Array<Behavior>
     converters?: Array<Converter>
@@ -1759,6 +1730,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           Record<string, AnyActorRef | undefined>,
           StateValue,
@@ -2107,6 +2087,15 @@ declare const editorMachine: StateMachine<
         | {
             type: 'notify.unset'
             previousValue: Array<PortableTextBlock>
+          }
+        | {
+            type: 'dragstart'
+          }
+        | {
+            type: 'dragend'
+          }
+        | {
+            type: 'drop'
           },
         AnyEventObject
       >
@@ -2479,6 +2468,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -3116,6 +3114,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -3756,6 +3763,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -4395,6 +4411,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -5033,6 +5058,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -5672,6 +5706,15 @@ declare const editorMachine: StateMachine<
             | {
                 type: 'notify.unset'
                 previousValue: Array<PortableTextBlock>
+              }
+            | {
+                type: 'dragstart'
+              }
+            | {
+                type: 'dragend'
+              }
+            | {
+                type: 'drop'
               },
             undefined,
             never,
@@ -6036,6 +6079,15 @@ declare const editorMachine: StateMachine<
             | {
                 type: 'notify.unset'
                 previousValue: Array<PortableTextBlock>
+              }
+            | {
+                type: 'dragstart'
+              }
+            | {
+                type: 'dragend'
+              }
+            | {
+                type: 'drop'
               },
             undefined,
             never,
@@ -6675,6 +6727,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -7312,6 +7373,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -7950,6 +8020,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -8591,6 +8670,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -9232,6 +9320,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -9601,6 +9698,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -9967,6 +10073,15 @@ declare const editorMachine: StateMachine<
           | {
               type: 'notify.unset'
               previousValue: Array<PortableTextBlock>
+            }
+          | {
+              type: 'dragstart'
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
             },
           undefined,
           never,
@@ -10483,6 +10598,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -11129,6 +11253,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -11768,6 +11901,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -12407,6 +12549,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -13059,6 +13210,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -13712,6 +13872,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -14351,6 +14520,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -14993,6 +15171,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -15686,6 +15873,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -16334,6 +16530,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -16983,6 +17188,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -17623,6 +17837,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -18265,6 +18488,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -18913,6 +19145,15 @@ declare const editorMachine: StateMachine<
                   | {
                       type: 'notify.unset'
                       previousValue: Array<PortableTextBlock>
+                    }
+                  | {
+                      type: 'dragstart'
+                    }
+                  | {
+                      type: 'dragend'
+                    }
+                  | {
+                      type: 'drop'
                     },
                   undefined,
                   never,
@@ -19208,6 +19449,27 @@ declare const editorMachine: StateMachine<
                 >
               }
             }
+            readonly initial: 'idle'
+            readonly states: {
+              readonly 'idle': {
+                readonly on: {
+                  readonly dragstart: {
+                    readonly target: 'dragging internally'
+                  }
+                }
+              }
+              readonly 'dragging internally': {
+                readonly tags: readonly ['dragging internally']
+                readonly on: {
+                  readonly dragend: {
+                    readonly target: 'idle'
+                  }
+                  readonly drop: {
+                    readonly target: 'idle'
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -19347,6 +19609,13 @@ export declare type EditorSelector<TSelected> = (
  */
 export declare type EditorSnapshot = {
   context: EditorContext
+  /**
+   * @beta
+   * Do not rely on this externally
+   */
+  beta: {
+    hasTag: HasTag
+  }
 }
 
 /**
@@ -19406,6 +19675,8 @@ export declare type FocusChange = {
   event: FocusEvent_2<HTMLDivElement, Element>
 }
 
+declare type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
+
 /** @internal */
 declare interface History_2 {
   redos: HistoryItem[]
@@ -19771,9 +20042,9 @@ export declare class PortableTextEditor extends Component<
     path: Path,
   ) => [
     (
-      | PortableTextSpan
+      | PortableTextTextBlock<PortableTextObject | PortableTextSpan>
       | PortableTextObject
-      | PortableTextTextBlock<PortableTextSpan | PortableTextObject>
+      | PortableTextSpan
       | undefined
     ),
     Path | undefined,

package/lib/index.js

@@ -1,5 +1,5 @@
-import { debugWithName, IS_DRAGGING_ELEMENT_TARGET, IS_DRAGGING_BLOCK_TARGET_POSITION, IS_DRAGGING_BLOCK_ELEMENT, IS_DRAGGING, fromSlateValue, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, EditorActorContext, toSlateRange, moveRangeByOperation, toPortableTextRange, toSlateValue, isEqualToEmptyEditor } from "./_chunks-es/plugin.event-listener.js";
-import { EventListenerPlugin, EditorProvider, defineSchema, defaultKeyGenerator, useEditor, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/plugin.event-listener.js";
+import { debugWithName, IS_DRAGGING_ELEMENT_TARGET, IS_DRAGGING_BLOCK_TARGET_POSITION, IS_DRAGGING_BLOCK_ELEMENT, IS_DRAGGING, fromSlateValue, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, EditorActorContext, toSlateRange, moveRangeByOperation, toPortableTextRange, toSlateValue, isEqualToEmptyEditor, useEditor } from "./_chunks-es/editor-provider.js";
+import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useSelector } from "@xstate/react";
 import isEqual from "lodash/isEqual.js";
@@ -10,6 +10,7 @@ import { useSlateStatic, ReactEditor, useSelected, useSlate, Editable } from "sl
 import { c } from "react-compiler-runtime";
 import uniq from "lodash/uniq.js";
 import { isHotkey } from "./_chunks-es/behavior.core.js";
+import { useEffectEvent } from "use-effect-event";
 function normalizePoint(point, value) {
   if (!point || !value)
     return null;
@@ -819,7 +820,20 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   }, [slateEditor, schemaTypes, rangeDecorationState]);
   return useEffect(() => {
     ref.current = ReactEditor.toDOMNode(slateEditor, slateEditor), setEditableElement(ref.current);
-  }, [slateEditor, ref]), portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsx(
+  }, [slateEditor, ref]), useEffect(() => {
+    const window_0 = ReactEditor.getWindow(slateEditor), onDragEnd = () => {
+      editorActor.send({
+        type: "dragend"
+      });
+    }, onDrop = () => {
+      editorActor.send({
+        type: "drop"
+      });
+    };
+    return window_0.document.addEventListener("dragend", onDragEnd), window_0.document.addEventListener("drop", onDrop), () => {
+      window_0.document.removeEventListener("dragend", onDragEnd), window_0.document.removeEventListener("drop", onDrop);
+    };
+  }, [slateEditor, editorActor]), portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsx(
     Editable,
     {
       ...restProps,
@@ -830,6 +844,11 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       onCopy: handleCopy,
       onClick: handleClick,
       onDOMBeforeInput: handleOnBeforeInput,
+      onDragStart: (event_7) => {
+        props.onDragStart?.(event_7), !event_7.isDefaultPrevented() && !event_7.isPropagationStopped() && editorActor.send({
+          type: "dragstart"
+        });
+      },
       onFocus: handleOnFocus,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
@@ -843,8 +862,20 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
   ) : null;
 });
 PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
+function EditorEventListener(props) {
+  const $ = c(5), editor = useEditor(), on = useEffectEvent(props.on);
+  let t0;
+  $[0] !== editor || $[1] !== on ? (t0 = () => {
+    const subscription = editor.on("*", on);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, $[0] = editor, $[1] = on, $[2] = t0) : t0 = $[2];
+  let t1;
+  return $[3] !== editor ? (t1 = [editor], $[3] = editor, $[4] = t1) : t1 = $[4], useEffect(t0, t1), null;
+}
 export {
-  EventListenerPlugin as EditorEventListener,
+  EditorEventListener,
   EditorProvider,
   PortableTextEditable,
   PortableTextEditor,