@handlewithcare/react-prosemirror 3.0.5 → 3.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -6
- package/dist/cjs/components/WidgetView.js +1 -0
- package/dist/cjs/hooks/useComponentEventListeners.js +37 -4
- package/dist/cjs/hooks/useEditor.js +3 -4
- package/dist/esm/components/WidgetView.js +1 -0
- package/dist/esm/hooks/useComponentEventListeners.js +44 -11
- package/dist/esm/hooks/useEditor.js +3 -4
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/CursorWrapper.d.ts +2 -4
- package/dist/types/components/WidgetViewComponentProps.d.ts +4 -3
- package/dist/types/contexts/EditorContext.d.ts +1 -1
- package/dist/types/hooks/useComponentEventListeners.d.ts +11 -10
- package/dist/types/hooks/useEditor.d.ts +2 -2
- package/dist/types/hooks/useEditorEventListener.d.ts +1 -1
- package/dist/types/props.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/plugins/componentEventListeners.js +0 -35
- package/dist/cjs/plugins/componentEventListenersPlugin.js +0 -35
- package/dist/esm/plugins/componentEventListeners.js +0 -25
- package/dist/esm/plugins/componentEventListenersPlugin.js +0 -25
- package/dist/types/plugins/componentEventListeners.d.ts +0 -4
- package/dist/types/plugins/componentEventListenersPlugin.d.ts +0 -4
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
getPos: () => number;
|
|
5
|
-
} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLImageElement>>;
|
|
2
|
+
import { WidgetViewComponentProps } from "./WidgetViewComponentProps.js";
|
|
3
|
+
export declare const CursorWrapper: React.ForwardRefExoticComponent<Omit<WidgetViewComponentProps<React.AllHTMLAttributes<HTMLElement>>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AllHTMLAttributes, LegacyRef } from "react";
|
|
2
2
|
import { ReactWidgetDecoration } from "../decorations/ReactWidgetType.js";
|
|
3
|
-
export type WidgetViewComponentProps = {
|
|
3
|
+
export type WidgetViewComponentProps<Attributes = AllHTMLAttributes<HTMLElement>> = Attributes & {
|
|
4
4
|
widget: ReactWidgetDecoration;
|
|
5
5
|
getPos: () => number;
|
|
6
|
-
|
|
6
|
+
ref: LegacyRef<any>;
|
|
7
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { DOMEventMap } from "prosemirror-view";
|
|
2
2
|
import { MutableRefObject } from "react";
|
|
3
3
|
import { AbstractEditorView } from "../AbstractEditorView.js";
|
|
4
|
-
import type { EventHandler } from "../
|
|
4
|
+
import type { EventHandler } from "../hooks/useComponentEventListeners.js";
|
|
5
5
|
export interface EditorContextValue {
|
|
6
6
|
view: AbstractEditorView;
|
|
7
7
|
flushSyncRef: MutableRefObject<boolean>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { DOMEventMap } from "prosemirror-view";
|
|
2
|
-
|
|
1
|
+
import type { DOMEventMap, EditorView } from "prosemirror-view";
|
|
2
|
+
export type EventHandler<EventType extends keyof DOMEventMap = keyof DOMEventMap> = (view: EditorView, event: DOMEventMap[EventType]) => boolean | void;
|
|
3
|
+
export type HandleDOMEvents = Record<keyof DOMEventMap, EventHandler | undefined>;
|
|
3
4
|
/**
|
|
4
5
|
* Produces a plugin that can be used with ProseMirror to handle DOM
|
|
5
6
|
* events at the EditorView.dom element.
|
|
@@ -14,20 +15,20 @@ import { EventHandler } from "../plugins/componentEventListeners.js";
|
|
|
14
15
|
* @privateRemarks
|
|
15
16
|
*
|
|
16
17
|
* This hook uses a combination of mutable and immutable updates to give
|
|
17
|
-
* us precise control over when we re-create the
|
|
18
|
+
* us precise control over when we re-create the event listeners.
|
|
18
19
|
*
|
|
19
|
-
* The
|
|
20
|
+
* The hook has a mutable reference to the set of handlers for each
|
|
20
21
|
* event type, but the set of event types is static. This means that we
|
|
21
|
-
* need to produce a new
|
|
22
|
-
* registered. We avoid producing a new
|
|
23
|
-
* scenario to avoid the performance overhead of
|
|
24
|
-
* in the EditorView.
|
|
22
|
+
* need to produce a new handleDOMEVents record whenever a new event type is
|
|
23
|
+
* registered. We avoid producing a new record in any other
|
|
24
|
+
* scenario to avoid the performance overhead of re-registering the event
|
|
25
|
+
* listeners in the EditorView.
|
|
25
26
|
*
|
|
26
27
|
* To accomplish this, we shallowly clone the registry whenever a new event
|
|
27
28
|
* type is registered.
|
|
28
29
|
*/
|
|
29
|
-
export declare function useComponentEventListeners(): {
|
|
30
|
+
export declare function useComponentEventListeners(handleDOMEventsProp: HandleDOMEvents | undefined): {
|
|
30
31
|
registerEventListener: (eventType: keyof DOMEventMap, handler: EventHandler) => void;
|
|
31
32
|
unregisterEventListener: (eventType: keyof DOMEventMap, handler: EventHandler) => void;
|
|
32
|
-
|
|
33
|
+
handleDOMEvents: HandleDOMEvents;
|
|
33
34
|
};
|
|
@@ -21,8 +21,8 @@ export declare function useEditor<T extends HTMLElement = HTMLElement>(mount: T
|
|
|
21
21
|
editor: {
|
|
22
22
|
view: AbstractEditorView;
|
|
23
23
|
flushSyncRef: import("react").MutableRefObject<boolean>;
|
|
24
|
-
registerEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("
|
|
25
|
-
unregisterEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("
|
|
24
|
+
registerEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("./useComponentEventListeners.js").EventHandler<keyof import("prosemirror-view").DOMEventMap>) => void;
|
|
25
|
+
unregisterEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("./useComponentEventListeners.js").EventHandler<keyof import("prosemirror-view").DOMEventMap>) => void;
|
|
26
26
|
isStatic: boolean;
|
|
27
27
|
};
|
|
28
28
|
cursorWrapper: Decoration | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DOMEventMap } from "prosemirror-view";
|
|
2
|
-
import type { EventHandler } from "
|
|
2
|
+
import type { EventHandler } from "./useComponentEventListeners.js";
|
|
3
3
|
/**
|
|
4
4
|
* Attaches an event listener at the `EditorView`'s DOM node. See
|
|
5
5
|
* [the ProseMirror docs](https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents)
|
package/dist/types/props.d.ts
CHANGED
|
@@ -960,7 +960,7 @@ export declare function mergeReactProps(a: HTMLProps<HTMLElement>, b: HTMLProps<
|
|
|
960
960
|
"aria-colindextext"?: string | undefined;
|
|
961
961
|
"aria-colspan"?: number | undefined;
|
|
962
962
|
"aria-controls"?: string | undefined;
|
|
963
|
-
"aria-current"?: boolean | "false" | "true" | "
|
|
963
|
+
"aria-current"?: boolean | "false" | "true" | "step" | "page" | "location" | "date" | "time" | undefined;
|
|
964
964
|
"aria-describedby"?: string | undefined;
|
|
965
965
|
"aria-description"?: string | undefined;
|
|
966
966
|
"aria-details"?: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "componentEventListeners", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return componentEventListeners;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _prosemirrorstate = require("prosemirror-state");
|
|
12
|
-
const _reactdom = require("react-dom");
|
|
13
|
-
function componentEventListeners(eventHandlerRegistry) {
|
|
14
|
-
const domEventHandlers = {};
|
|
15
|
-
for (const [eventType, handlers] of eventHandlerRegistry.entries()){
|
|
16
|
-
function handleEvent(view, event) {
|
|
17
|
-
for (const handler of handlers){
|
|
18
|
-
let handled = false;
|
|
19
|
-
(0, _reactdom.unstable_batchedUpdates)(()=>{
|
|
20
|
-
handled = !!handler.call(this, view, event);
|
|
21
|
-
});
|
|
22
|
-
if (handled || event.defaultPrevented) return true;
|
|
23
|
-
}
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
domEventHandlers[eventType] = handleEvent;
|
|
27
|
-
}
|
|
28
|
-
const plugin = new _prosemirrorstate.Plugin({
|
|
29
|
-
key: new _prosemirrorstate.PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
|
|
30
|
-
props: {
|
|
31
|
-
handleDOMEvents: domEventHandlers
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
return plugin;
|
|
35
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/* Copyright (c) The New York Times Company */ "use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "createComponentEventListenersPlugin", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return createComponentEventListenersPlugin;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _prosemirrorstate = require("prosemirror-state");
|
|
12
|
-
const _reactdom = require("react-dom");
|
|
13
|
-
function createComponentEventListenersPlugin(eventHandlerRegistry) {
|
|
14
|
-
const domEventHandlers = {};
|
|
15
|
-
for (const [eventType, handlers] of eventHandlerRegistry.entries()){
|
|
16
|
-
function handleEvent(view, event) {
|
|
17
|
-
for (const handler of handlers){
|
|
18
|
-
let handled = false;
|
|
19
|
-
(0, _reactdom.unstable_batchedUpdates)(()=>{
|
|
20
|
-
handled = !!handler.call(this, view, event);
|
|
21
|
-
});
|
|
22
|
-
if (handled || event.defaultPrevented) return true;
|
|
23
|
-
}
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
domEventHandlers[eventType] = handleEvent;
|
|
27
|
-
}
|
|
28
|
-
const plugin = new _prosemirrorstate.Plugin({
|
|
29
|
-
key: new _prosemirrorstate.PluginKey("componentEventListeners"),
|
|
30
|
-
props: {
|
|
31
|
-
handleDOMEvents: domEventHandlers
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
return plugin;
|
|
35
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Plugin, PluginKey } from "prosemirror-state";
|
|
2
|
-
import { unstable_batchedUpdates as batch } from "react-dom";
|
|
3
|
-
export function componentEventListeners(eventHandlerRegistry) {
|
|
4
|
-
const domEventHandlers = {};
|
|
5
|
-
for (const [eventType, handlers] of eventHandlerRegistry.entries()){
|
|
6
|
-
function handleEvent(view, event) {
|
|
7
|
-
for (const handler of handlers){
|
|
8
|
-
let handled = false;
|
|
9
|
-
batch(()=>{
|
|
10
|
-
handled = !!handler.call(this, view, event);
|
|
11
|
-
});
|
|
12
|
-
if (handled || event.defaultPrevented) return true;
|
|
13
|
-
}
|
|
14
|
-
return false;
|
|
15
|
-
}
|
|
16
|
-
domEventHandlers[eventType] = handleEvent;
|
|
17
|
-
}
|
|
18
|
-
const plugin = new Plugin({
|
|
19
|
-
key: new PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
|
|
20
|
-
props: {
|
|
21
|
-
handleDOMEvents: domEventHandlers
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
return plugin;
|
|
25
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/* Copyright (c) The New York Times Company */ import { Plugin, PluginKey } from "prosemirror-state";
|
|
2
|
-
import { unstable_batchedUpdates as batch } from "react-dom";
|
|
3
|
-
export function createComponentEventListenersPlugin(eventHandlerRegistry) {
|
|
4
|
-
const domEventHandlers = {};
|
|
5
|
-
for (const [eventType, handlers] of eventHandlerRegistry.entries()){
|
|
6
|
-
function handleEvent(view, event) {
|
|
7
|
-
for (const handler of handlers){
|
|
8
|
-
let handled = false;
|
|
9
|
-
batch(()=>{
|
|
10
|
-
handled = !!handler.call(this, view, event);
|
|
11
|
-
});
|
|
12
|
-
if (handled || event.defaultPrevented) return true;
|
|
13
|
-
}
|
|
14
|
-
return false;
|
|
15
|
-
}
|
|
16
|
-
domEventHandlers[eventType] = handleEvent;
|
|
17
|
-
}
|
|
18
|
-
const plugin = new Plugin({
|
|
19
|
-
key: new PluginKey("componentEventListeners"),
|
|
20
|
-
props: {
|
|
21
|
-
handleDOMEvents: domEventHandlers
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
return plugin;
|
|
25
|
-
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { Plugin } from "prosemirror-state";
|
|
2
|
-
import { DOMEventMap, EditorView } from "prosemirror-view";
|
|
3
|
-
export type EventHandler<EventType extends keyof DOMEventMap = keyof DOMEventMap> = (this: Plugin, view: EditorView, event: DOMEventMap[EventType]) => boolean | void;
|
|
4
|
-
export declare function componentEventListeners(eventHandlerRegistry: Map<keyof DOMEventMap, Iterable<EventHandler>>): Plugin<any>;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { Plugin } from "prosemirror-state";
|
|
2
|
-
import { DOMEventMap, EditorView } from "prosemirror-view";
|
|
3
|
-
export type EventHandler<EventType extends keyof DOMEventMap = keyof DOMEventMap> = (this: Plugin, view: EditorView, event: DOMEventMap[EventType]) => boolean | void;
|
|
4
|
-
export declare function createComponentEventListenersPlugin(eventHandlerRegistry: Map<keyof DOMEventMap, Set<EventHandler>>): Plugin<any>;
|