@handlewithcare/react-prosemirror 3.0.5 → 3.0.6

package/README.md

@@ -837,10 +837,40 @@ significant contributors help shape our roadmap priorities.
 [Become a Sponsor](https://handlewithcare.dev/pitter-patter/#become-a-sponsor)
 
 <h3>Sponsors</h3>
-<p>
-<a href="https://www.moment.dev/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128"></a>
-<a href="https://www.lingco.io/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Lingco.png" alt="Lingco" height="128"></a>
-<a href="https://dskrpt.de/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="Dskrpt" height="128"></a>
-<a href="https://github.com/fastrepl/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128"></a>
-</p>
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" >
+        <a href="https://moment.dev/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128">
+          <br>
+          Moment
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://www.lingco.io/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Lingco.png" alt="Lingco" height="128">
+          <br>
+          Lingco
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://dskrpt.de/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="dskrpt" height="128">
+          <br>
+          dskrpt
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://char.com/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128">
+          <br>
+          Fastrepl
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 <!--sponsorsend-->

package/dist/cjs/components/WidgetView.js

@@ -78,6 +78,7 @@ function WidgetView(param) {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
             viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/cjs/hooks/useComponentEventListeners.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "useComponentEventListeners", {
     }
 });
 const _react = require("react");
-const _componentEventListeners = require("../plugins/componentEventListeners.js");
-function useComponentEventListeners() {
+const _reactdom = require("react-dom");
+function useComponentEventListeners(handleDOMEventsProp) {
     const [registry, setRegistry] = (0, _react.useState)(new Map());
     const registerEventListener = (0, _react.useCallback)((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
@@ -28,12 +28,45 @@ function useComponentEventListeners() {
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = (0, _react.useMemo)(()=>(0, _componentEventListeners.componentEventListeners)(registry), [
+    (0, _react.useLayoutEffect)(()=>{
+        if (!handleDOMEventsProp) return;
+        for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        handleDOMEventsProp,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = (0, _react.useMemo)(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    (0, _reactdom.unstable_batchedUpdates)(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/cjs/hooks/useEditor.js

@@ -32,7 +32,7 @@ function useEditor(mount, options) {
     const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
     const [_state, setState] = (0, _react.useState)(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)(options.handleDOMEvents);
     const setCursorWrapper = (0, _react.useCallback)((deco)=>{
         (0, _reactdom.flushSync)(()=>{
             _setCursorWrapper(deco);
@@ -40,11 +40,9 @@ function useEditor(mount, options) {
     }, []);
     const plugins = (0, _react.useMemo)(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             (0, _beforeInputPlugin.beforeInputPlugin)(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
@@ -73,7 +71,8 @@ function useEditor(mount, options) {
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = (0, _react.useState)(()=>{
         return new _StaticEditorView.StaticEditorView(directEditorProps);

package/dist/esm/components/WidgetView.js

@@ -27,6 +27,7 @@ export function WidgetView(param) {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
             viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/esm/hooks/useComponentEventListeners.js

@@ -1,5 +1,5 @@
-/* Copyright (c) The New York Times Company */ import { useCallback, useMemo, useState } from "react";
-import { componentEventListeners } from "../plugins/componentEventListeners.js";
+/* Copyright (c) The New York Times Company */ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { unstable_batchedUpdates as batch } from "react-dom";
 /**
  * Produces a plugin that can be used with ProseMirror to handle DOM
  * events at the EditorView.dom element.
@@ -14,18 +14,18 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
  * @privateRemarks
  *
  * This hook uses a combination of mutable and immutable updates to give
- * us precise control over when we re-create the ProseMirror plugin.
+ * us precise control over when we re-create the event listeners.
  *
- * The plugin has a mutable reference to the set of handlers for each
+ * The hook has a mutable reference to the set of handlers for each
  * event type, but the set of event types is static. This means that we
- * need to produce a new ProseMirror plugin whenever a new event type is
- * registered. We avoid producing a new ProseMirrer plugin in any other
- * scenario to avoid the performance overhead of reconfiguring the plugins
- * in the EditorView.
+ * need to produce a new handleDOMEVents record whenever a new event type is
+ * registered. We avoid producing a new record in any other
+ * scenario to avoid the performance overhead of re-registering the event
+ * listeners in the EditorView.
  *
  * To accomplish this, we shallowly clone the registry whenever a new event
  * type is registered.
- */ export function useComponentEventListeners() {
+ */ export function useComponentEventListeners(handleDOMEventsProp) {
     const [registry, setRegistry] = useState(new Map());
     const registerEventListener = useCallback((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
@@ -43,12 +43,45 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = useMemo(()=>componentEventListeners(registry), [
+    useLayoutEffect(()=>{
+        if (!handleDOMEventsProp) return;
+        for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        handleDOMEventsProp,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = useMemo(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    batch(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/esm/hooks/useEditor.js

@@ -30,7 +30,7 @@ let didWarnValueDefaultValue = false;
     const defaultState = options.defaultState ?? EMPTY_STATE;
     const [_state, setState] = useState(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = useComponentEventListeners();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = useComponentEventListeners(options.handleDOMEvents);
     const setCursorWrapper = useCallback((deco)=>{
         flushSync(()=>{
             _setCursorWrapper(deco);
@@ -38,11 +38,9 @@ let didWarnValueDefaultValue = false;
     }, []);
     const plugins = useMemo(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             beforeInputPlugin(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
@@ -71,7 +69,8 @@ let didWarnValueDefaultValue = false;
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = useState(()=>{
         return new StaticEditorView(directEditorProps);