@handlewithcare/react-prosemirror 2.4.12 → 2.5.0
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/dist/cjs/AbstractEditorView.js +4 -0
- package/dist/cjs/ReactEditorView.js +156 -0
- package/dist/cjs/StaticEditorView.js +86 -0
- package/dist/cjs/components/ChildNodeViews.js +59 -30
- package/dist/cjs/components/CustomNodeView.js +9 -25
- package/dist/cjs/components/DocNodeView.js +6 -15
- package/dist/cjs/components/MarkView.js +1 -2
- package/dist/cjs/components/NativeWidgetView.js +2 -3
- package/dist/cjs/components/NodeView.js +1 -1
- package/dist/cjs/components/ProseMirror.js +11 -14
- package/dist/cjs/components/ReactNodeView.js +3 -4
- package/dist/cjs/components/SeparatorHackView.js +1 -2
- package/dist/cjs/components/TextNodeView.js +4 -5
- package/dist/cjs/components/TrailingHackView.js +1 -2
- package/dist/cjs/components/WidgetView.js +2 -4
- package/dist/cjs/constants.js +33 -0
- package/dist/cjs/hooks/useEditor.js +32 -228
- package/dist/cjs/hooks/useEditorEffect.js +2 -2
- package/dist/cjs/hooks/useEditorEventCallback.js +8 -5
- package/dist/cjs/hooks/useNodeViewDescriptor.js +10 -10
- package/dist/cjs/hooks/useReactKeys.js +1 -1
- package/dist/cjs/testing/editorViewTestHelpers.js +0 -2
- package/dist/cjs/viewdesc.js +10 -9
- package/dist/esm/AbstractEditorView.js +1 -0
- package/dist/esm/ReactEditorView.js +156 -0
- package/dist/esm/StaticEditorView.js +76 -0
- package/dist/esm/components/ChildNodeViews.js +60 -32
- package/dist/esm/components/CustomNodeView.js +9 -25
- package/dist/esm/components/DocNodeView.js +6 -15
- package/dist/esm/components/MarkView.js +1 -2
- package/dist/esm/components/NativeWidgetView.js +2 -3
- package/dist/esm/components/NodeView.js +1 -1
- package/dist/esm/components/ProseMirror.js +11 -14
- package/dist/esm/components/ReactNodeView.js +3 -4
- package/dist/esm/components/SeparatorHackView.js +1 -2
- package/dist/esm/components/TextNodeView.js +4 -5
- package/dist/esm/components/TrailingHackView.js +1 -2
- package/dist/esm/components/WidgetView.js +2 -4
- package/dist/esm/constants.js +15 -0
- package/dist/esm/hooks/useEditor.js +28 -217
- package/dist/esm/hooks/useEditorEffect.js +2 -2
- package/dist/esm/hooks/useEditorEventCallback.js +8 -5
- package/dist/esm/hooks/useNodeViewDescriptor.js +10 -10
- package/dist/esm/hooks/useReactKeys.js +1 -1
- package/dist/esm/testing/editorViewTestHelpers.js +0 -2
- package/dist/esm/viewdesc.js +3 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/AbstractEditorView.d.ts +27 -0
- package/dist/types/ReactEditorView.d.ts +79 -0
- package/dist/types/StaticEditorView.d.ts +24 -0
- package/dist/types/components/ChildNodeViews.d.ts +2 -2
- package/dist/types/components/CustomNodeView.d.ts +2 -2
- package/dist/types/components/DocNodeView.d.ts +2 -5
- package/dist/types/components/MarkView.d.ts +2 -2
- package/dist/types/components/NativeWidgetView.d.ts +2 -2
- package/dist/types/components/NodeView.d.ts +2 -2
- package/dist/types/components/ReactNodeView.d.ts +2 -2
- package/dist/types/components/SeparatorHackView.d.ts +2 -2
- package/dist/types/components/TextNodeView.d.ts +4 -3
- package/dist/types/components/TrailingHackView.d.ts +2 -2
- package/dist/types/components/WidgetView.d.ts +2 -2
- package/dist/types/constants.d.ts +4 -0
- package/dist/types/contexts/EditorContext.d.ts +6 -4
- package/dist/types/decorations/computeDocDeco.d.ts +3 -2
- package/dist/types/decorations/viewDecorations.d.ts +3 -2
- package/dist/types/hooks/useEditor.d.ts +5 -46
- package/dist/types/hooks/useNodeViewDescriptor.d.ts +1 -1
- package/dist/types/hooks/useReactKeys.d.ts +1 -1
- package/dist/types/props.d.ts +3 -3
- package/dist/types/viewdesc.d.ts +6 -5
- package/package.json +6 -2
- package/dist/cjs/components/Editor.js +0 -28
- package/dist/cjs/components/NodeViews.js +0 -73
- package/dist/cjs/components/__tests__/LayoutGroup.test.js +0 -141
- package/dist/cjs/components/__tests__/ProseMirror.test.js +0 -255
- package/dist/cjs/contexts/NodeViewsContext.js +0 -10
- package/dist/cjs/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -107
- package/dist/cjs/hooks/__tests__/useNodeViews.test.js +0 -159
- package/dist/cjs/hooks/useEditorView.js +0 -100
- package/dist/cjs/hooks/useNodePos.js +0 -69
- package/dist/cjs/hooks/useNodeViews.js +0 -100
- package/dist/cjs/nodeViews/createReactNodeViewConstructor.js +0 -244
- package/dist/cjs/nodeViews/phrasingContentTags.js +0 -57
- package/dist/cjs/plugins/__tests__/react.test.js +0 -139
- package/dist/cjs/plugins/react.js +0 -71
- package/dist/cjs/selection/SelectionDOMObserver.js +0 -171
- package/dist/cjs/selection/hasFocusAndSelection.js +0 -35
- package/dist/cjs/selection/selectionFromDOM.js +0 -77
- package/dist/cjs/selection/selectionToDOM.js +0 -226
- package/dist/cjs/ssr.js +0 -85
- package/dist/esm/components/Editor.js +0 -15
- package/dist/esm/components/NodeViews.js +0 -26
- package/dist/esm/components/__tests__/LayoutGroup.test.js +0 -98
- package/dist/esm/components/__tests__/ProseMirror.test.js +0 -207
- package/dist/esm/contexts/NodeViewsContext.js +0 -9
- package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -98
- package/dist/esm/hooks/__tests__/useNodeViews.test.js +0 -116
- package/dist/esm/hooks/useEditorView.js +0 -99
- package/dist/esm/hooks/useNodePos.js +0 -16
- package/dist/esm/hooks/useNodeViews.js +0 -53
- package/dist/esm/nodeViews/createReactNodeViewConstructor.js +0 -214
- package/dist/esm/nodeViews/phrasingContentTags.js +0 -49
- package/dist/esm/plugins/__tests__/react.test.js +0 -135
- package/dist/esm/plugins/react.js +0 -64
- package/dist/esm/selection/SelectionDOMObserver.js +0 -161
- package/dist/esm/selection/hasFocusAndSelection.js +0 -17
- package/dist/esm/selection/selectionFromDOM.js +0 -59
- package/dist/esm/selection/selectionToDOM.js +0 -196
- package/dist/esm/ssr.js +0 -82
- package/dist/types/components/Editor.d.ts +0 -7
- package/dist/types/components/NodeViews.d.ts +0 -6
- package/dist/types/components/__tests__/LayoutGroup.test.d.ts +0 -1
- package/dist/types/contexts/NodeViewsContext.d.ts +0 -19
- package/dist/types/hooks/__tests__/useEditorViewLayoutEffect.test.d.ts +0 -1
- package/dist/types/hooks/__tests__/useNodeViews.test.d.ts +0 -1
- package/dist/types/hooks/useEditorView.d.ts +0 -23
- package/dist/types/hooks/useNodePos.d.ts +0 -9
- package/dist/types/hooks/useNodeViews.d.ts +0 -5
- package/dist/types/nodeViews/createReactNodeViewConstructor.d.ts +0 -48
- package/dist/types/nodeViews/phrasingContentTags.d.ts +0 -1
- package/dist/types/plugins/__tests__/react.test.d.ts +0 -1
- package/dist/types/plugins/react.d.ts +0 -21
- package/dist/types/selection/SelectionDOMObserver.d.ts +0 -33
- package/dist/types/selection/hasFocusAndSelection.d.ts +0 -3
- package/dist/types/selection/selectionFromDOM.d.ts +0 -4
- package/dist/types/selection/selectionToDOM.d.ts +0 -9
- package/dist/types/ssr.d.ts +0 -19
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
7
|
-
const _useLayoutGroupEffectJs = require("../../hooks/useLayoutGroupEffect.js");
|
|
8
|
-
const _layoutGroupJs = require("../LayoutGroup.js");
|
|
9
|
-
function _getRequireWildcardCache(nodeInterop) {
|
|
10
|
-
if (typeof WeakMap !== "function") return null;
|
|
11
|
-
var cacheBabelInterop = new WeakMap();
|
|
12
|
-
var cacheNodeInterop = new WeakMap();
|
|
13
|
-
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
14
|
-
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
15
|
-
})(nodeInterop);
|
|
16
|
-
}
|
|
17
|
-
function _interopRequireWildcard(obj, nodeInterop) {
|
|
18
|
-
if (!nodeInterop && obj && obj.__esModule) {
|
|
19
|
-
return obj;
|
|
20
|
-
}
|
|
21
|
-
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
22
|
-
return {
|
|
23
|
-
default: obj
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
var cache = _getRequireWildcardCache(nodeInterop);
|
|
27
|
-
if (cache && cache.has(obj)) {
|
|
28
|
-
return cache.get(obj);
|
|
29
|
-
}
|
|
30
|
-
var newObj = {};
|
|
31
|
-
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
32
|
-
for(var key in obj){
|
|
33
|
-
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
34
|
-
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
35
|
-
if (desc && (desc.get || desc.set)) {
|
|
36
|
-
Object.defineProperty(newObj, key, desc);
|
|
37
|
-
} else {
|
|
38
|
-
newObj[key] = obj[key];
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
newObj.default = obj;
|
|
43
|
-
if (cache) {
|
|
44
|
-
cache.set(obj, newObj);
|
|
45
|
-
}
|
|
46
|
-
return newObj;
|
|
47
|
-
}
|
|
48
|
-
describe("LayoutGroup", ()=>{
|
|
49
|
-
jest.useFakeTimers("modern");
|
|
50
|
-
it("registers multiple effects and runs them", ()=>{
|
|
51
|
-
function Parent() {
|
|
52
|
-
return /*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(Child, null));
|
|
53
|
-
}
|
|
54
|
-
function Child() {
|
|
55
|
-
const [double, setDouble] = (0, _react1.useState)(1);
|
|
56
|
-
(0, _react1.useLayoutEffect)(()=>{
|
|
57
|
-
if (double === 2) {
|
|
58
|
-
setTimeout(()=>{
|
|
59
|
-
setDouble((d)=>d * 2.5);
|
|
60
|
-
}, 500);
|
|
61
|
-
}
|
|
62
|
-
if (double === 20) {
|
|
63
|
-
setDouble((d)=>d * 2.5);
|
|
64
|
-
}
|
|
65
|
-
}, [
|
|
66
|
-
double
|
|
67
|
-
]);
|
|
68
|
-
(0, _useLayoutGroupEffectJs.useLayoutGroupEffect)(()=>{
|
|
69
|
-
const timeout = setTimeout(()=>{
|
|
70
|
-
setDouble((d)=>d * 2);
|
|
71
|
-
}, 1000);
|
|
72
|
-
return ()=>{
|
|
73
|
-
clearTimeout(timeout);
|
|
74
|
-
};
|
|
75
|
-
}, [
|
|
76
|
-
double
|
|
77
|
-
]);
|
|
78
|
-
return /*#__PURE__*/ _react1.default.createElement("div", null, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
79
|
-
"data-testid": "double"
|
|
80
|
-
}, double));
|
|
81
|
-
}
|
|
82
|
-
// The component mounts ...
|
|
83
|
-
// ... the initial value should be 1
|
|
84
|
-
// ... there should be one timeout scheduled by the deferred effect
|
|
85
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(Parent, null));
|
|
86
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("1");
|
|
87
|
-
// This block assert that deferred effects run.
|
|
88
|
-
// --------------------------------------------
|
|
89
|
-
// 1000 milliseconds go by ...
|
|
90
|
-
// ... the timeout set by the deferred effect should run
|
|
91
|
-
// ... the timeout should double the new value to 2
|
|
92
|
-
// ... the immediate effect should set a timeout
|
|
93
|
-
// ... the deferred effect should set a timeout
|
|
94
|
-
(0, _react.act)(()=>{
|
|
95
|
-
jest.advanceTimersByTime(1000);
|
|
96
|
-
});
|
|
97
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("2");
|
|
98
|
-
// The next three blocks assert that cleanup of deferred effects run.
|
|
99
|
-
// ------------------------------------------------------------------
|
|
100
|
-
// 500 milliseconds go by ...
|
|
101
|
-
// ... the timeout set by the immediate effect should run
|
|
102
|
-
// ... the timeout should set the value to 5
|
|
103
|
-
// ... the old deferred effect should cancel its timeout
|
|
104
|
-
// ... the new deferred effect should set a new timeout
|
|
105
|
-
(0, _react.act)(()=>{
|
|
106
|
-
jest.advanceTimersByTime(500);
|
|
107
|
-
});
|
|
108
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("5");
|
|
109
|
-
// ... 500 more milliseconds go by ...
|
|
110
|
-
// ... the canceled timeout should not run
|
|
111
|
-
// ... the rescheduled timoeut should not yet run
|
|
112
|
-
(0, _react.act)(()=>{
|
|
113
|
-
jest.advanceTimersByTime(500);
|
|
114
|
-
});
|
|
115
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("5");
|
|
116
|
-
// ... 500 more milliseconds go by ...
|
|
117
|
-
// ... the rescheduled timeout should run
|
|
118
|
-
// ... the timeout should double the value to 10
|
|
119
|
-
// ... the deferred effect should set a new timeout
|
|
120
|
-
(0, _react.act)(()=>{
|
|
121
|
-
jest.advanceTimersByTime(500);
|
|
122
|
-
});
|
|
123
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("10");
|
|
124
|
-
// The next block asserts that cancelation of deferred effects works.
|
|
125
|
-
// ------------------------------------------------------------------
|
|
126
|
-
// 1000 milliseconds go by ...
|
|
127
|
-
// ... the timeout set by the deferred effect should run
|
|
128
|
-
// ... the timeout should double the value to 20
|
|
129
|
-
// ... the immediate effect should then set the value to 50
|
|
130
|
-
// ... the deferred effect from the first render should not run
|
|
131
|
-
// ... the deferred effect from the second render should run
|
|
132
|
-
// ... the deferred effect that does run should set a new timeout
|
|
133
|
-
(0, _react.act)(()=>{
|
|
134
|
-
jest.advanceTimersByTime(1000);
|
|
135
|
-
});
|
|
136
|
-
// For this assertion, we need to clear a timer from the React scheduler.
|
|
137
|
-
jest.advanceTimersByTime(1);
|
|
138
|
-
expect(_react.screen.getByTestId("double").innerHTML).toBe("50");
|
|
139
|
-
expect(jest.getTimerCount()).toBe(1);
|
|
140
|
-
});
|
|
141
|
-
});
|
|
@@ -1,255 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
|
|
7
|
-
const _prosemirrorModel = require("prosemirror-model");
|
|
8
|
-
const _prosemirrorState = require("prosemirror-state");
|
|
9
|
-
const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
10
|
-
const _reactJs = require("../../plugins/react.js");
|
|
11
|
-
const _setupProseMirrorViewJs = require("../../testing/setupProseMirrorView.js");
|
|
12
|
-
const _proseMirrorJs = require("../ProseMirror.js");
|
|
13
|
-
function _interopRequireDefault(obj) {
|
|
14
|
-
return obj && obj.__esModule ? obj : {
|
|
15
|
-
default: obj
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
function _getRequireWildcardCache(nodeInterop) {
|
|
19
|
-
if (typeof WeakMap !== "function") return null;
|
|
20
|
-
var cacheBabelInterop = new WeakMap();
|
|
21
|
-
var cacheNodeInterop = new WeakMap();
|
|
22
|
-
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
23
|
-
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
24
|
-
})(nodeInterop);
|
|
25
|
-
}
|
|
26
|
-
function _interopRequireWildcard(obj, nodeInterop) {
|
|
27
|
-
if (!nodeInterop && obj && obj.__esModule) {
|
|
28
|
-
return obj;
|
|
29
|
-
}
|
|
30
|
-
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
31
|
-
return {
|
|
32
|
-
default: obj
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
var cache = _getRequireWildcardCache(nodeInterop);
|
|
36
|
-
if (cache && cache.has(obj)) {
|
|
37
|
-
return cache.get(obj);
|
|
38
|
-
}
|
|
39
|
-
var newObj = {};
|
|
40
|
-
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
41
|
-
for(var key in obj){
|
|
42
|
-
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
43
|
-
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
44
|
-
if (desc && (desc.get || desc.set)) {
|
|
45
|
-
Object.defineProperty(newObj, key, desc);
|
|
46
|
-
} else {
|
|
47
|
-
newObj[key] = obj[key];
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
newObj.default = obj;
|
|
52
|
-
if (cache) {
|
|
53
|
-
cache.set(obj, newObj);
|
|
54
|
-
}
|
|
55
|
-
return newObj;
|
|
56
|
-
}
|
|
57
|
-
// Mock `ReactDOM.flushSync` to call `act` to flush updates from DOM mutations.
|
|
58
|
-
jest.mock("react-dom", ()=>({
|
|
59
|
-
...jest.requireActual("react-dom"),
|
|
60
|
-
flushSync: (fn)=>(0, _react.act)(fn)
|
|
61
|
-
}));
|
|
62
|
-
describe("ProseMirror", ()=>{
|
|
63
|
-
beforeAll(()=>{
|
|
64
|
-
(0, _setupProseMirrorViewJs.setupProseMirrorView)();
|
|
65
|
-
});
|
|
66
|
-
it("renders a contenteditable", async ()=>{
|
|
67
|
-
const schema = new _prosemirrorModel.Schema({
|
|
68
|
-
nodes: {
|
|
69
|
-
text: {},
|
|
70
|
-
doc: {
|
|
71
|
-
content: "text*"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
const defaultState = _prosemirrorState.EditorState.create({
|
|
76
|
-
schema
|
|
77
|
-
});
|
|
78
|
-
function TestEditor() {
|
|
79
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
80
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
81
|
-
mount: mount,
|
|
82
|
-
defaultState: defaultState
|
|
83
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
84
|
-
"data-testid": "editor",
|
|
85
|
-
ref: setMount
|
|
86
|
-
}));
|
|
87
|
-
}
|
|
88
|
-
const user = _userEvent.default.setup();
|
|
89
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
90
|
-
const editor = _react.screen.getByTestId("editor");
|
|
91
|
-
await user.type(editor, "Hello, world!");
|
|
92
|
-
expect(editor.textContent).toBe("Hello, world!");
|
|
93
|
-
});
|
|
94
|
-
it("supports observing transaction dispatch", async ()=>{
|
|
95
|
-
const schema = new _prosemirrorModel.Schema({
|
|
96
|
-
nodes: {
|
|
97
|
-
text: {},
|
|
98
|
-
doc: {
|
|
99
|
-
content: "text*"
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
const defaultState = _prosemirrorState.EditorState.create({
|
|
104
|
-
schema
|
|
105
|
-
});
|
|
106
|
-
const dispatchTransaction = jest.fn();
|
|
107
|
-
function TestEditor() {
|
|
108
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
109
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
110
|
-
mount: mount,
|
|
111
|
-
defaultState: defaultState,
|
|
112
|
-
dispatchTransaction: dispatchTransaction
|
|
113
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
114
|
-
"data-testid": "editor",
|
|
115
|
-
ref: setMount
|
|
116
|
-
}));
|
|
117
|
-
}
|
|
118
|
-
const user = _userEvent.default.setup();
|
|
119
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
120
|
-
const editor = _react.screen.getByTestId("editor");
|
|
121
|
-
await user.type(editor, "Hello, world!");
|
|
122
|
-
expect(editor.textContent).toBe("Hello, world!");
|
|
123
|
-
expect(dispatchTransaction).toHaveBeenCalledTimes(13);
|
|
124
|
-
});
|
|
125
|
-
it("supports controlling the editor state", async ()=>{
|
|
126
|
-
const schema = new _prosemirrorModel.Schema({
|
|
127
|
-
nodes: {
|
|
128
|
-
text: {},
|
|
129
|
-
doc: {
|
|
130
|
-
content: "text*"
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
let observedState = _prosemirrorState.EditorState.create({
|
|
135
|
-
schema
|
|
136
|
-
});
|
|
137
|
-
function TestEditor() {
|
|
138
|
-
const [state, setState] = (0, _react1.useState)(observedState);
|
|
139
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
140
|
-
(0, _react1.useEffect)(()=>{
|
|
141
|
-
observedState = state;
|
|
142
|
-
}, [
|
|
143
|
-
state
|
|
144
|
-
]);
|
|
145
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
146
|
-
mount: mount,
|
|
147
|
-
state: state,
|
|
148
|
-
dispatchTransaction: (tr)=>{
|
|
149
|
-
setState((s)=>s.apply(tr));
|
|
150
|
-
}
|
|
151
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
152
|
-
"data-testid": "editor",
|
|
153
|
-
ref: setMount
|
|
154
|
-
}));
|
|
155
|
-
}
|
|
156
|
-
const user = _userEvent.default.setup();
|
|
157
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
158
|
-
const editor = _react.screen.getByTestId("editor");
|
|
159
|
-
await user.type(editor, "Hello, world!");
|
|
160
|
-
expect(observedState.doc.textContent).toBe("Hello, world!");
|
|
161
|
-
});
|
|
162
|
-
it("updates props atomically", async ()=>{
|
|
163
|
-
const schema = new _prosemirrorModel.Schema({
|
|
164
|
-
nodes: {
|
|
165
|
-
text: {},
|
|
166
|
-
doc: {
|
|
167
|
-
content: "text*"
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
const defaultState = _prosemirrorState.EditorState.create({
|
|
172
|
-
schema
|
|
173
|
-
});
|
|
174
|
-
let allStatesMatched = true;
|
|
175
|
-
function TestEditor() {
|
|
176
|
-
const [state, setState] = (0, _react1.useState)(defaultState);
|
|
177
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
178
|
-
// Check that function props get invoked with the latest React state.
|
|
179
|
-
const editable = (viewState)=>{
|
|
180
|
-
allStatesMatched &&= viewState === state;
|
|
181
|
-
return true;
|
|
182
|
-
};
|
|
183
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
184
|
-
mount: mount,
|
|
185
|
-
editable: editable,
|
|
186
|
-
state: state,
|
|
187
|
-
dispatchTransaction: (tr)=>{
|
|
188
|
-
setState((s)=>s.apply(tr));
|
|
189
|
-
}
|
|
190
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
191
|
-
"data-testid": "editor",
|
|
192
|
-
ref: setMount
|
|
193
|
-
}));
|
|
194
|
-
}
|
|
195
|
-
const user = _userEvent.default.setup();
|
|
196
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
197
|
-
const editor = _react.screen.getByTestId("editor");
|
|
198
|
-
await user.type(editor, "Hello, world!");
|
|
199
|
-
expect(allStatesMatched).toBe(true);
|
|
200
|
-
});
|
|
201
|
-
it("supports React NodeViews", async ()=>{
|
|
202
|
-
const schema = new _prosemirrorModel.Schema({
|
|
203
|
-
nodes: {
|
|
204
|
-
text: {},
|
|
205
|
-
paragraph: {
|
|
206
|
-
content: "text*"
|
|
207
|
-
},
|
|
208
|
-
doc: {
|
|
209
|
-
content: "paragraph+"
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
});
|
|
213
|
-
const defaultState = _prosemirrorState.EditorState.create({
|
|
214
|
-
schema,
|
|
215
|
-
plugins: [
|
|
216
|
-
(0, _reactJs.react)()
|
|
217
|
-
]
|
|
218
|
-
});
|
|
219
|
-
function Paragraph(param) {
|
|
220
|
-
let { children } = param;
|
|
221
|
-
return /*#__PURE__*/ _react1.default.createElement("p", {
|
|
222
|
-
"data-testid": "paragraph"
|
|
223
|
-
}, children);
|
|
224
|
-
}
|
|
225
|
-
const nodeViews = {
|
|
226
|
-
paragraph: ()=>({
|
|
227
|
-
component: Paragraph,
|
|
228
|
-
dom: document.createElement("div"),
|
|
229
|
-
contentDOM: document.createElement("span")
|
|
230
|
-
})
|
|
231
|
-
};
|
|
232
|
-
function TestEditor() {
|
|
233
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
234
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
235
|
-
mount: mount,
|
|
236
|
-
defaultState: defaultState,
|
|
237
|
-
nodeViews: nodeViews
|
|
238
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
239
|
-
"data-testid": "editor",
|
|
240
|
-
ref: setMount
|
|
241
|
-
}));
|
|
242
|
-
}
|
|
243
|
-
const user = _userEvent.default.setup();
|
|
244
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
245
|
-
const editor = _react.screen.getByTestId("editor");
|
|
246
|
-
await user.type(editor, "Hello, world!");
|
|
247
|
-
expect(editor.textContent).toBe("Hello, world!");
|
|
248
|
-
// Ensure that ProseMirror really rendered our Paragraph
|
|
249
|
-
// component, not just any old <p> tag
|
|
250
|
-
expect(_react.screen.getAllByTestId("paragraph").length).toBeGreaterThanOrEqual(1);
|
|
251
|
-
});
|
|
252
|
-
afterAll(()=>{
|
|
253
|
-
(0, _setupProseMirrorViewJs.teardownProseMirrorView)();
|
|
254
|
-
});
|
|
255
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "NodeViewsContext", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>NodeViewsContext
|
|
8
|
-
});
|
|
9
|
-
const _react = require("react");
|
|
10
|
-
const NodeViewsContext = (0, _react.createContext)(null);
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-empty-function */ "use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _react1 = /*#__PURE__*/ _interopRequireDefault(require("react"));
|
|
7
|
-
const _layoutGroupJs = require("../../components/LayoutGroup.js");
|
|
8
|
-
const _editorContextJs = require("../../contexts/EditorContext.js");
|
|
9
|
-
const _useEditorEffectJs = require("../useEditorEffect.js");
|
|
10
|
-
function _interopRequireDefault(obj) {
|
|
11
|
-
return obj && obj.__esModule ? obj : {
|
|
12
|
-
default: obj
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
function TestComponent(param) {
|
|
16
|
-
let { effect , dependencies =[] } = param;
|
|
17
|
-
(0, _useEditorEffectJs.useEditorEffect)(effect, [
|
|
18
|
-
effect,
|
|
19
|
-
...dependencies
|
|
20
|
-
]);
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
describe("useEditorViewLayoutEffect", ()=>{
|
|
24
|
-
it("should run the effect", ()=>{
|
|
25
|
-
const effect = jest.fn();
|
|
26
|
-
const editorView = {};
|
|
27
|
-
const editorState = {};
|
|
28
|
-
const registerEventListener = ()=>{};
|
|
29
|
-
const unregisterEventListener = ()=>{};
|
|
30
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
|
|
31
|
-
value: {
|
|
32
|
-
editorView,
|
|
33
|
-
editorState,
|
|
34
|
-
registerEventListener,
|
|
35
|
-
unregisterEventListener
|
|
36
|
-
}
|
|
37
|
-
}, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
|
|
38
|
-
effect: effect
|
|
39
|
-
}))));
|
|
40
|
-
expect(effect).toHaveBeenCalled();
|
|
41
|
-
expect(effect).toHaveBeenCalledWith(editorView);
|
|
42
|
-
});
|
|
43
|
-
it("should not re-run the effect if no dependencies change", ()=>{
|
|
44
|
-
const effect = jest.fn();
|
|
45
|
-
const editorView = {};
|
|
46
|
-
const editorState = {};
|
|
47
|
-
const registerEventListener = ()=>{};
|
|
48
|
-
const unregisterEventListener = ()=>{};
|
|
49
|
-
const { rerender } = (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
|
|
50
|
-
value: {
|
|
51
|
-
editorView,
|
|
52
|
-
editorState,
|
|
53
|
-
registerEventListener,
|
|
54
|
-
unregisterEventListener
|
|
55
|
-
}
|
|
56
|
-
}, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
|
|
57
|
-
effect: effect,
|
|
58
|
-
dependencies: []
|
|
59
|
-
}))));
|
|
60
|
-
rerender(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
|
|
61
|
-
value: {
|
|
62
|
-
editorView,
|
|
63
|
-
editorState,
|
|
64
|
-
registerEventListener,
|
|
65
|
-
unregisterEventListener
|
|
66
|
-
}
|
|
67
|
-
}, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
|
|
68
|
-
effect: effect,
|
|
69
|
-
dependencies: []
|
|
70
|
-
}))));
|
|
71
|
-
expect(effect).toHaveBeenCalledTimes(1);
|
|
72
|
-
});
|
|
73
|
-
it("should re-run the effect if dependencies change", ()=>{
|
|
74
|
-
const effect = jest.fn();
|
|
75
|
-
const editorView = {};
|
|
76
|
-
const editorState = {};
|
|
77
|
-
const registerEventListener = ()=>{};
|
|
78
|
-
const unregisterEventListener = ()=>{};
|
|
79
|
-
const { rerender } = (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
|
|
80
|
-
value: {
|
|
81
|
-
editorView,
|
|
82
|
-
editorState,
|
|
83
|
-
registerEventListener,
|
|
84
|
-
unregisterEventListener
|
|
85
|
-
}
|
|
86
|
-
}, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
|
|
87
|
-
effect: effect,
|
|
88
|
-
dependencies: [
|
|
89
|
-
"one"
|
|
90
|
-
]
|
|
91
|
-
}))));
|
|
92
|
-
rerender(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
|
|
93
|
-
value: {
|
|
94
|
-
editorView,
|
|
95
|
-
editorState,
|
|
96
|
-
registerEventListener,
|
|
97
|
-
unregisterEventListener
|
|
98
|
-
}
|
|
99
|
-
}, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
|
|
100
|
-
effect: effect,
|
|
101
|
-
dependencies: [
|
|
102
|
-
"two"
|
|
103
|
-
]
|
|
104
|
-
}))));
|
|
105
|
-
expect(effect).toHaveBeenCalledTimes(2);
|
|
106
|
-
});
|
|
107
|
-
});
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _prosemirrorModel = require("prosemirror-model");
|
|
7
|
-
const _prosemirrorState = require("prosemirror-state");
|
|
8
|
-
const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
9
|
-
const _proseMirrorJs = require("../../components/ProseMirror.js");
|
|
10
|
-
const _reactJs = require("../../plugins/react.js");
|
|
11
|
-
function _getRequireWildcardCache(nodeInterop) {
|
|
12
|
-
if (typeof WeakMap !== "function") return null;
|
|
13
|
-
var cacheBabelInterop = new WeakMap();
|
|
14
|
-
var cacheNodeInterop = new WeakMap();
|
|
15
|
-
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
16
|
-
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
17
|
-
})(nodeInterop);
|
|
18
|
-
}
|
|
19
|
-
function _interopRequireWildcard(obj, nodeInterop) {
|
|
20
|
-
if (!nodeInterop && obj && obj.__esModule) {
|
|
21
|
-
return obj;
|
|
22
|
-
}
|
|
23
|
-
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
24
|
-
return {
|
|
25
|
-
default: obj
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
var cache = _getRequireWildcardCache(nodeInterop);
|
|
29
|
-
if (cache && cache.has(obj)) {
|
|
30
|
-
return cache.get(obj);
|
|
31
|
-
}
|
|
32
|
-
var newObj = {};
|
|
33
|
-
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
34
|
-
for(var key in obj){
|
|
35
|
-
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
36
|
-
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
37
|
-
if (desc && (desc.get || desc.set)) {
|
|
38
|
-
Object.defineProperty(newObj, key, desc);
|
|
39
|
-
} else {
|
|
40
|
-
newObj[key] = obj[key];
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
newObj.default = obj;
|
|
45
|
-
if (cache) {
|
|
46
|
-
cache.set(obj, newObj);
|
|
47
|
-
}
|
|
48
|
-
return newObj;
|
|
49
|
-
}
|
|
50
|
-
// Mock `ReactDOM.flushSync` to call `act` to flush updates from DOM mutations.
|
|
51
|
-
jest.mock("react-dom", ()=>({
|
|
52
|
-
...jest.requireActual("react-dom"),
|
|
53
|
-
flushSync: (fn)=>(0, _react.act)(fn)
|
|
54
|
-
}));
|
|
55
|
-
const schema = new _prosemirrorModel.Schema({
|
|
56
|
-
nodes: {
|
|
57
|
-
doc: {
|
|
58
|
-
content: "block+"
|
|
59
|
-
},
|
|
60
|
-
list: {
|
|
61
|
-
group: "block",
|
|
62
|
-
content: "list_item+"
|
|
63
|
-
},
|
|
64
|
-
list_item: {
|
|
65
|
-
content: "inline*"
|
|
66
|
-
},
|
|
67
|
-
text: {
|
|
68
|
-
group: "inline"
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
const state = _prosemirrorState.EditorState.create({
|
|
73
|
-
doc: schema.topNodeType.create(null, schema.nodes.list.createAndFill()),
|
|
74
|
-
schema,
|
|
75
|
-
plugins: [
|
|
76
|
-
(0, _reactJs.react)()
|
|
77
|
-
]
|
|
78
|
-
});
|
|
79
|
-
describe("useNodeViews", ()=>{
|
|
80
|
-
it("should render node views", ()=>{
|
|
81
|
-
function List(param) {
|
|
82
|
-
let { children } = param;
|
|
83
|
-
return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
|
|
84
|
-
contentEditable: false
|
|
85
|
-
}, "list"), /*#__PURE__*/ _react1.default.createElement("ul", null, children));
|
|
86
|
-
}
|
|
87
|
-
function ListItem(param) {
|
|
88
|
-
let { children } = param;
|
|
89
|
-
return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
|
|
90
|
-
contentEditable: false
|
|
91
|
-
}, "list item"), /*#__PURE__*/ _react1.default.createElement("li", null, children));
|
|
92
|
-
}
|
|
93
|
-
const nodeViews = {
|
|
94
|
-
list: ()=>({
|
|
95
|
-
component: List,
|
|
96
|
-
dom: document.createElement("div"),
|
|
97
|
-
contentDOM: document.createElement("div")
|
|
98
|
-
}),
|
|
99
|
-
list_item: ()=>({
|
|
100
|
-
component: ListItem,
|
|
101
|
-
dom: document.createElement("div"),
|
|
102
|
-
contentDOM: document.createElement("div")
|
|
103
|
-
})
|
|
104
|
-
};
|
|
105
|
-
function TestEditor() {
|
|
106
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
107
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
108
|
-
mount: mount,
|
|
109
|
-
nodeViews: nodeViews,
|
|
110
|
-
defaultState: state
|
|
111
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
112
|
-
ref: setMount
|
|
113
|
-
}));
|
|
114
|
-
}
|
|
115
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
116
|
-
expect(_react.screen.getByText("list")).toBeTruthy();
|
|
117
|
-
expect(_react.screen.getByText("list item")).toBeTruthy();
|
|
118
|
-
});
|
|
119
|
-
it("should render child node views as children of their parents", ()=>{
|
|
120
|
-
const TestContext = /*#__PURE__*/ (0, _react1.createContext)("default");
|
|
121
|
-
function List(param) {
|
|
122
|
-
let { children } = param;
|
|
123
|
-
return /*#__PURE__*/ _react1.default.createElement(TestContext.Provider, {
|
|
124
|
-
value: "overriden"
|
|
125
|
-
}, /*#__PURE__*/ _react1.default.createElement("ul", null, children));
|
|
126
|
-
}
|
|
127
|
-
function ListItem(param) {
|
|
128
|
-
let { children } = param;
|
|
129
|
-
const testContextValue = (0, _react1.useContext)(TestContext);
|
|
130
|
-
return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
|
|
131
|
-
contentEditable: false
|
|
132
|
-
}, testContextValue), /*#__PURE__*/ _react1.default.createElement("li", null, children));
|
|
133
|
-
}
|
|
134
|
-
const nodeViews = {
|
|
135
|
-
list: ()=>({
|
|
136
|
-
component: List,
|
|
137
|
-
dom: document.createElement("div"),
|
|
138
|
-
contentDOM: document.createElement("div")
|
|
139
|
-
}),
|
|
140
|
-
list_item: ()=>({
|
|
141
|
-
component: ListItem,
|
|
142
|
-
dom: document.createElement("div"),
|
|
143
|
-
contentDOM: document.createElement("div")
|
|
144
|
-
})
|
|
145
|
-
};
|
|
146
|
-
function TestEditor() {
|
|
147
|
-
const [mount, setMount] = (0, _react1.useState)(null);
|
|
148
|
-
return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
|
|
149
|
-
mount: mount,
|
|
150
|
-
nodeViews: nodeViews,
|
|
151
|
-
defaultState: state
|
|
152
|
-
}, /*#__PURE__*/ _react1.default.createElement("div", {
|
|
153
|
-
ref: setMount
|
|
154
|
-
}));
|
|
155
|
-
}
|
|
156
|
-
(0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
|
|
157
|
-
expect(_react.screen.getByText("overriden")).toBeTruthy();
|
|
158
|
-
});
|
|
159
|
-
});
|