@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.
Files changed (127) hide show
  1. package/dist/cjs/AbstractEditorView.js +4 -0
  2. package/dist/cjs/ReactEditorView.js +156 -0
  3. package/dist/cjs/StaticEditorView.js +86 -0
  4. package/dist/cjs/components/ChildNodeViews.js +59 -30
  5. package/dist/cjs/components/CustomNodeView.js +9 -25
  6. package/dist/cjs/components/DocNodeView.js +6 -15
  7. package/dist/cjs/components/MarkView.js +1 -2
  8. package/dist/cjs/components/NativeWidgetView.js +2 -3
  9. package/dist/cjs/components/NodeView.js +1 -1
  10. package/dist/cjs/components/ProseMirror.js +11 -14
  11. package/dist/cjs/components/ReactNodeView.js +3 -4
  12. package/dist/cjs/components/SeparatorHackView.js +1 -2
  13. package/dist/cjs/components/TextNodeView.js +4 -5
  14. package/dist/cjs/components/TrailingHackView.js +1 -2
  15. package/dist/cjs/components/WidgetView.js +2 -4
  16. package/dist/cjs/constants.js +33 -0
  17. package/dist/cjs/hooks/useEditor.js +32 -228
  18. package/dist/cjs/hooks/useEditorEffect.js +2 -2
  19. package/dist/cjs/hooks/useEditorEventCallback.js +8 -5
  20. package/dist/cjs/hooks/useNodeViewDescriptor.js +10 -10
  21. package/dist/cjs/hooks/useReactKeys.js +1 -1
  22. package/dist/cjs/testing/editorViewTestHelpers.js +0 -2
  23. package/dist/cjs/viewdesc.js +10 -9
  24. package/dist/esm/AbstractEditorView.js +1 -0
  25. package/dist/esm/ReactEditorView.js +156 -0
  26. package/dist/esm/StaticEditorView.js +76 -0
  27. package/dist/esm/components/ChildNodeViews.js +60 -32
  28. package/dist/esm/components/CustomNodeView.js +9 -25
  29. package/dist/esm/components/DocNodeView.js +6 -15
  30. package/dist/esm/components/MarkView.js +1 -2
  31. package/dist/esm/components/NativeWidgetView.js +2 -3
  32. package/dist/esm/components/NodeView.js +1 -1
  33. package/dist/esm/components/ProseMirror.js +11 -14
  34. package/dist/esm/components/ReactNodeView.js +3 -4
  35. package/dist/esm/components/SeparatorHackView.js +1 -2
  36. package/dist/esm/components/TextNodeView.js +4 -5
  37. package/dist/esm/components/TrailingHackView.js +1 -2
  38. package/dist/esm/components/WidgetView.js +2 -4
  39. package/dist/esm/constants.js +15 -0
  40. package/dist/esm/hooks/useEditor.js +28 -217
  41. package/dist/esm/hooks/useEditorEffect.js +2 -2
  42. package/dist/esm/hooks/useEditorEventCallback.js +8 -5
  43. package/dist/esm/hooks/useNodeViewDescriptor.js +10 -10
  44. package/dist/esm/hooks/useReactKeys.js +1 -1
  45. package/dist/esm/testing/editorViewTestHelpers.js +0 -2
  46. package/dist/esm/viewdesc.js +3 -2
  47. package/dist/tsconfig.tsbuildinfo +1 -1
  48. package/dist/types/AbstractEditorView.d.ts +27 -0
  49. package/dist/types/ReactEditorView.d.ts +79 -0
  50. package/dist/types/StaticEditorView.d.ts +24 -0
  51. package/dist/types/components/ChildNodeViews.d.ts +2 -2
  52. package/dist/types/components/CustomNodeView.d.ts +2 -2
  53. package/dist/types/components/DocNodeView.d.ts +2 -5
  54. package/dist/types/components/MarkView.d.ts +2 -2
  55. package/dist/types/components/NativeWidgetView.d.ts +2 -2
  56. package/dist/types/components/NodeView.d.ts +2 -2
  57. package/dist/types/components/ReactNodeView.d.ts +2 -2
  58. package/dist/types/components/SeparatorHackView.d.ts +2 -2
  59. package/dist/types/components/TextNodeView.d.ts +4 -3
  60. package/dist/types/components/TrailingHackView.d.ts +2 -2
  61. package/dist/types/components/WidgetView.d.ts +2 -2
  62. package/dist/types/constants.d.ts +4 -0
  63. package/dist/types/contexts/EditorContext.d.ts +6 -4
  64. package/dist/types/decorations/computeDocDeco.d.ts +3 -2
  65. package/dist/types/decorations/viewDecorations.d.ts +3 -2
  66. package/dist/types/hooks/useEditor.d.ts +5 -46
  67. package/dist/types/hooks/useNodeViewDescriptor.d.ts +1 -1
  68. package/dist/types/hooks/useReactKeys.d.ts +1 -1
  69. package/dist/types/props.d.ts +3 -3
  70. package/dist/types/viewdesc.d.ts +6 -5
  71. package/package.json +6 -2
  72. package/dist/cjs/components/Editor.js +0 -28
  73. package/dist/cjs/components/NodeViews.js +0 -73
  74. package/dist/cjs/components/__tests__/LayoutGroup.test.js +0 -141
  75. package/dist/cjs/components/__tests__/ProseMirror.test.js +0 -255
  76. package/dist/cjs/contexts/NodeViewsContext.js +0 -10
  77. package/dist/cjs/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -107
  78. package/dist/cjs/hooks/__tests__/useNodeViews.test.js +0 -159
  79. package/dist/cjs/hooks/useEditorView.js +0 -100
  80. package/dist/cjs/hooks/useNodePos.js +0 -69
  81. package/dist/cjs/hooks/useNodeViews.js +0 -100
  82. package/dist/cjs/nodeViews/createReactNodeViewConstructor.js +0 -244
  83. package/dist/cjs/nodeViews/phrasingContentTags.js +0 -57
  84. package/dist/cjs/plugins/__tests__/react.test.js +0 -139
  85. package/dist/cjs/plugins/react.js +0 -71
  86. package/dist/cjs/selection/SelectionDOMObserver.js +0 -171
  87. package/dist/cjs/selection/hasFocusAndSelection.js +0 -35
  88. package/dist/cjs/selection/selectionFromDOM.js +0 -77
  89. package/dist/cjs/selection/selectionToDOM.js +0 -226
  90. package/dist/cjs/ssr.js +0 -85
  91. package/dist/esm/components/Editor.js +0 -15
  92. package/dist/esm/components/NodeViews.js +0 -26
  93. package/dist/esm/components/__tests__/LayoutGroup.test.js +0 -98
  94. package/dist/esm/components/__tests__/ProseMirror.test.js +0 -207
  95. package/dist/esm/contexts/NodeViewsContext.js +0 -9
  96. package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -98
  97. package/dist/esm/hooks/__tests__/useNodeViews.test.js +0 -116
  98. package/dist/esm/hooks/useEditorView.js +0 -99
  99. package/dist/esm/hooks/useNodePos.js +0 -16
  100. package/dist/esm/hooks/useNodeViews.js +0 -53
  101. package/dist/esm/nodeViews/createReactNodeViewConstructor.js +0 -214
  102. package/dist/esm/nodeViews/phrasingContentTags.js +0 -49
  103. package/dist/esm/plugins/__tests__/react.test.js +0 -135
  104. package/dist/esm/plugins/react.js +0 -64
  105. package/dist/esm/selection/SelectionDOMObserver.js +0 -161
  106. package/dist/esm/selection/hasFocusAndSelection.js +0 -17
  107. package/dist/esm/selection/selectionFromDOM.js +0 -59
  108. package/dist/esm/selection/selectionToDOM.js +0 -196
  109. package/dist/esm/ssr.js +0 -82
  110. package/dist/types/components/Editor.d.ts +0 -7
  111. package/dist/types/components/NodeViews.d.ts +0 -6
  112. package/dist/types/components/__tests__/LayoutGroup.test.d.ts +0 -1
  113. package/dist/types/contexts/NodeViewsContext.d.ts +0 -19
  114. package/dist/types/hooks/__tests__/useEditorViewLayoutEffect.test.d.ts +0 -1
  115. package/dist/types/hooks/__tests__/useNodeViews.test.d.ts +0 -1
  116. package/dist/types/hooks/useEditorView.d.ts +0 -23
  117. package/dist/types/hooks/useNodePos.d.ts +0 -9
  118. package/dist/types/hooks/useNodeViews.d.ts +0 -5
  119. package/dist/types/nodeViews/createReactNodeViewConstructor.d.ts +0 -48
  120. package/dist/types/nodeViews/phrasingContentTags.d.ts +0 -1
  121. package/dist/types/plugins/__tests__/react.test.d.ts +0 -1
  122. package/dist/types/plugins/react.d.ts +0 -21
  123. package/dist/types/selection/SelectionDOMObserver.d.ts +0 -33
  124. package/dist/types/selection/hasFocusAndSelection.d.ts +0 -3
  125. package/dist/types/selection/selectionFromDOM.d.ts +0 -4
  126. package/dist/types/selection/selectionToDOM.d.ts +0 -9
  127. package/dist/types/ssr.d.ts +0 -19
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "ProseMirror", {
8
8
  return ProseMirror;
9
9
  }
10
10
  });
11
- const _prosemirrorview = require("prosemirror-view");
12
11
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
13
12
  const _EditorContext = require("../contexts/EditorContext.js");
14
13
  const _EditorStateContext = require("../contexts/EditorStateContext.js");
@@ -59,7 +58,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
59
58
  }
60
59
  return newObj;
61
60
  }
62
- const EMPTY_OUTER_DECOS = [];
63
61
  function ProseMirrorInner(param) {
64
62
  let { className, children, nodeViews, customNodeViews, ...props } = param;
65
63
  const [mount, setMount] = (0, _react.useState)(null);
@@ -67,26 +65,25 @@ function ProseMirrorInner(param) {
67
65
  ...props,
68
66
  nodeViews: customNodeViews
69
67
  });
70
- const innerDecos = editor.view ? (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper) : _prosemirrorview.DecorationSet.empty;
71
- const outerDecos = editor.view ? (0, _computeDocDeco.computeDocDeco)(editor.view) : EMPTY_OUTER_DECOS;
72
68
  const nodeViewContextValue = (0, _react.useMemo)(()=>({
73
69
  nodeViews: nodeViews ?? {}
74
70
  }), [
75
71
  nodeViews
76
72
  ]);
73
+ const node = state.doc;
74
+ const innerDeco = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
75
+ const outerDeco = (0, _computeDocDeco.computeDocDeco)(editor.view);
77
76
  const docNodeViewContextValue = (0, _react.useMemo)(()=>({
78
- className: className,
79
- setMount: setMount,
80
- node: editor.view?.state.doc,
81
- innerDeco: innerDecos,
82
- outerDeco: outerDecos,
83
- viewDesc: editor.docViewDescRef.current
77
+ className,
78
+ setMount,
79
+ node,
80
+ innerDeco,
81
+ outerDeco
84
82
  }), [
85
83
  className,
86
- editor.docViewDescRef,
87
- editor.view?.state.doc,
88
- innerDecos,
89
- outerDecos
84
+ node,
85
+ innerDeco,
86
+ outerDeco
90
87
  ]);
91
88
  return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
92
89
  value: editor
@@ -63,14 +63,13 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
63
63
  const domRef = (0, _react.useRef)(null);
64
64
  const nodeDomRef = (0, _react.useRef)(null);
65
65
  const contentDomRef = (0, _react.useRef)(null);
66
- const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
67
66
  const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
68
67
  let element = null;
69
68
  const Component = nodeViews[node.type.name];
70
69
  const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
71
70
  node
72
71
  ]);
73
- const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
72
+ const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPos, domRef, nodeDomRef, innerDeco, outerDeco, contentDomRef);
74
73
  const finalProps = {
75
74
  ...props,
76
75
  ...!hasContentDOM && nodeDomRef.current?.tagName !== "BR" && {
@@ -79,11 +78,11 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
79
78
  };
80
79
  const nodeProps = (0, _react.useMemo)(()=>({
81
80
  node: node,
82
- getPos: getPosFunc,
81
+ getPos: getPos,
83
82
  decorations: outerDeco,
84
83
  innerDecorations: innerDeco
85
84
  }), [
86
- getPosFunc,
85
+ getPos,
87
86
  innerDeco,
88
87
  node,
89
88
  outerDeco
@@ -83,11 +83,10 @@ function SeparatorHackView(param) {
83
83
  }
84
84
  if (!ref.current) return;
85
85
  if (!viewDescRef.current) {
86
- viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
86
+ viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
87
87
  } else {
88
88
  viewDescRef.current.parent = parentRef.current;
89
89
  viewDescRef.current.dom = ref.current;
90
- viewDescRef.current.getPos = ()=>getPos.current();
91
90
  }
92
91
  if (!siblingsRef.current.includes(viewDescRef.current)) {
93
92
  siblingsRef.current.push(viewDescRef.current);
@@ -47,8 +47,8 @@ let TextNodeView = class TextNodeView extends _react.Component {
47
47
  // when a composition was started that produces a new text node.
48
48
  // Otherwise we just rely on re-rendering the renderRef
49
49
  if (!dom) {
50
- if (!view?.composing) return;
51
- this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, ()=>getPos.current(), // These are just placeholders/dummies. We can't
50
+ if (!view.composing) return;
51
+ this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
52
52
  // actually find the correct DOM nodes from here,
53
53
  // so we let our parent do it.
54
54
  // Passing a valid element here just so that the
@@ -61,12 +61,11 @@ let TextNodeView = class TextNodeView extends _react.Component {
61
61
  textNode = textNode.firstChild;
62
62
  }
63
63
  if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
64
- this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], ()=>getPos.current(), node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
64
+ this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
65
65
  } else {
66
66
  this.viewDescRef.parent = parentRef.current;
67
67
  this.viewDescRef.children = [];
68
68
  this.viewDescRef.node = node;
69
- this.viewDescRef.getPos = ()=>getPos.current();
70
69
  this.viewDescRef.outerDeco = decorations;
71
70
  this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
72
71
  this.viewDescRef.dom = dom;
@@ -102,7 +101,7 @@ let TextNodeView = class TextNodeView extends _react.Component {
102
101
  // an active composition and the selection is in this node,
103
102
  // we freeze the DOM of this element so that it doesn't
104
103
  // interrupt the composition
105
- if (view?.composing && view.state.selection.from >= getPos.current() && view.state.selection.from <= getPos.current() + node.nodeSize) {
104
+ if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
106
105
  return this.renderRef;
107
106
  }
108
107
  this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
@@ -73,11 +73,10 @@ function TrailingHackView(param) {
73
73
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
74
74
  if (!ref.current) return;
75
75
  if (!viewDescRef.current) {
76
- viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
76
+ viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
77
77
  } else {
78
78
  viewDescRef.current.parent = parentRef.current;
79
79
  viewDescRef.current.dom = ref.current;
80
- viewDescRef.current.getPos = ()=>getPos.current();
81
80
  }
82
81
  if (!siblingsRef.current.includes(viewDescRef.current)) {
83
82
  siblingsRef.current.push(viewDescRef.current);
@@ -57,7 +57,6 @@ function WidgetView(param) {
57
57
  let { widget, getPos } = param;
58
58
  const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
59
59
  const viewDescRef = (0, _react.useRef)(null);
60
- const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
61
60
  const domRef = (0, _react.useRef)(null);
62
61
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
63
62
  const siblings = siblingsRef.current;
@@ -74,11 +73,10 @@ function WidgetView(param) {
74
73
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
75
74
  if (!domRef.current) return;
76
75
  if (!viewDescRef.current) {
77
- viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, ()=>getPos.current(), widget, domRef.current);
76
+ viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, getPos, widget, domRef.current);
78
77
  } else {
79
78
  viewDescRef.current.parent = parentRef.current;
80
79
  viewDescRef.current.widget = widget;
81
- viewDescRef.current.getPos = ()=>getPos.current();
82
80
  viewDescRef.current.dom = domRef.current;
83
81
  }
84
82
  if (!siblingsRef.current.includes(viewDescRef.current)) {
@@ -90,7 +88,7 @@ function WidgetView(param) {
90
88
  return Component && /*#__PURE__*/ _react.default.createElement(Component, {
91
89
  ref: domRef,
92
90
  widget: widget,
93
- getPos: getPosFunc,
91
+ getPos: getPos,
94
92
  contentEditable: false
95
93
  });
96
94
  }
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ EMPTY_SCHEMA: function() {
13
+ return EMPTY_SCHEMA;
14
+ },
15
+ EMPTY_STATE: function() {
16
+ return EMPTY_STATE;
17
+ }
18
+ });
19
+ const _prosemirrormodel = require("prosemirror-model");
20
+ const _prosemirrorstate = require("prosemirror-state");
21
+ const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
22
+ nodes: {
23
+ doc: {
24
+ content: "text*"
25
+ },
26
+ text: {
27
+ inline: true
28
+ }
29
+ }
30
+ });
31
+ const EMPTY_STATE = _prosemirrorstate.EditorState.create({
32
+ schema: EMPTY_SCHEMA
33
+ });
@@ -2,194 +2,21 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- ReactEditorView: function() {
13
- return ReactEditorView;
14
- },
15
- useEditor: function() {
5
+ Object.defineProperty(exports, "useEditor", {
6
+ enumerable: true,
7
+ get: function() {
16
8
  return useEditor;
17
9
  }
18
10
  });
19
- const _prosemirrormodel = require("prosemirror-model");
20
- const _prosemirrorstate = require("prosemirror-state");
21
- const _prosemirrorview = require("prosemirror-view");
22
11
  const _react = require("react");
23
12
  const _reactdom = require("react-dom");
13
+ const _ReactEditorView = require("../ReactEditorView.js");
14
+ const _StaticEditorView = require("../StaticEditorView.js");
15
+ const _constants = require("../constants.js");
24
16
  const _beforeInputPlugin = require("../plugins/beforeInputPlugin.js");
25
- const _SelectionDOMObserver = require("../selection/SelectionDOMObserver.js");
26
- const _ssr = require("../ssr.js");
27
- const _viewdesc = require("../viewdesc.js");
28
17
  const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
29
18
  const _useComponentEventListeners = require("./useComponentEventListeners.js");
30
19
  const _useForceUpdate = require("./useForceUpdate.js");
31
- function buildNodeViews(view) {
32
- const result = Object.create(null);
33
- function add(obj) {
34
- for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
35
- result[prop] = obj[prop];
36
- }
37
- view.someProp("nodeViews", add);
38
- view.someProp("markViews", add);
39
- return result;
40
- }
41
- function changedNodeViews(a, b) {
42
- let nA = 0, nB = 0;
43
- for(const prop in a){
44
- if (a[prop] != b[prop]) return true;
45
- nA++;
46
- }
47
- for(const _ in b)nB++;
48
- return nA != nB;
49
- }
50
- function changedProps(a, b) {
51
- for (const prop of Object.keys(a)){
52
- if (a[prop] !== b[prop]) return true;
53
- }
54
- return false;
55
- }
56
- function getEditable(view) {
57
- return !view.someProp("editable", (value)=>value(view.state) === false);
58
- }
59
- let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
60
- shouldUpdatePluginViews = false;
61
- oldProps;
62
- _props;
63
- ready;
64
- constructor(place, props){
65
- // Call the superclass constructor with an empty
66
- // document and limited props. We'll set everything
67
- // else ourselves.
68
- const cleanup = (0, _ssr.setSsrStubs)();
69
- super(place, {
70
- state: _prosemirrorstate.EditorState.create({
71
- schema: props.state.schema
72
- })
73
- });
74
- cleanup();
75
- this.ready = props.ready;
76
- this.shouldUpdatePluginViews = true;
77
- this._props = props;
78
- this.oldProps = {
79
- state: props.state
80
- };
81
- this.state = props.state;
82
- // @ts-expect-error We're making use of knowledge of internal attributes here
83
- this.domObserver.stop();
84
- // @ts-expect-error We're making use of knowledge of internal attributes here
85
- this.domObserver = new _SelectionDOMObserver.SelectionDOMObserver(this);
86
- // @ts-expect-error We're making use of knowledge of internal attributes here
87
- this.domObserver.start();
88
- this.editable = getEditable(this);
89
- // Destroy the DOM created by the default
90
- // ProseMirror ViewDesc implementation; we
91
- // have a NodeViewDesc from React instead.
92
- // @ts-expect-error We're making use of knowledge of internal attributes here
93
- this.docView.dom.replaceChildren();
94
- // @ts-expect-error We're making use of knowledge of internal attributes here
95
- this.nodeViews = buildNodeViews(this);
96
- // @ts-expect-error We're making use of knowledge of internal attributes here
97
- this.docView = props.docView;
98
- }
99
- /**
100
- * Whether the EditorView's updateStateInner method thinks that the
101
- * docView needs to be blown away and redrawn.
102
- *
103
- * @privateremarks
104
- *
105
- * When ProseMirror View detects that the EditorState has been reconfigured
106
- * to provide new custom node views, it calls an internal function that
107
- * we can't override in order to recreate the entire editor DOM.
108
- *
109
- * This property mimics that check, so that we can replace the EditorView
110
- * with another of our own, preventing ProseMirror View from taking over
111
- * DOM management responsibility.
112
- */ get needsRedraw() {
113
- if (this.oldProps.state.plugins === this._props.state.plugins && this._props.plugins === this.oldProps.plugins) {
114
- return false;
115
- }
116
- const newNodeViews = buildNodeViews(this);
117
- // @ts-expect-error Internal property
118
- return changedNodeViews(this.nodeViews, newNodeViews);
119
- }
120
- /**
121
- * Like setProps, but without executing any side effects.
122
- * Safe to use in a component render method.
123
- */ pureSetProps(props) {
124
- // this.oldProps = this.props;
125
- this._props = {
126
- ...this._props,
127
- ...props
128
- };
129
- this.state = this._props.state;
130
- this.editable = getEditable(this);
131
- }
132
- /**
133
- * Triggers any side effects that have been queued by previous
134
- * calls to pureSetProps.
135
- */ runPendingEffects() {
136
- if (changedProps(this.props, this.oldProps)) {
137
- const newProps = this.props;
138
- this._props = this.oldProps;
139
- this.state = this._props.state;
140
- this.update(newProps);
141
- }
142
- }
143
- update(props) {
144
- super.update(props);
145
- // Ensure that side effects aren't re-triggered until
146
- // pureSetProps is called again
147
- this.oldProps = props;
148
- }
149
- updatePluginViews(prevState) {
150
- if (this.shouldUpdatePluginViews) {
151
- // @ts-expect-error We're making use of knowledge of internal methods here
152
- super.updatePluginViews(prevState);
153
- }
154
- }
155
- // We want to trigger the default EditorView cleanup, but without
156
- // the actual view.dom cleanup (which React will have already handled).
157
- // So we give the EditorView a dummy DOM element and ask it to clean up
158
- destroy() {
159
- // If needsRedraw returns true, then we will destroy and recreate
160
- // the EditorView, but will likely leave the ProseMirrorDoc node as-is.
161
- // In this case, this.dom will still be connected when destroy runs, and
162
- // it will be reused for the next EditorView, so we need to manually reset
163
- // it.
164
- if (this.dom.isConnected) {
165
- // We need to manually execute this code from super.destroy(),
166
- // because when super.destroy() runs, it will have been given a dummy
167
- // dom node
168
- // @ts-expect-error Internal property - input
169
- for(const type in this.input.eventHandlers){
170
- // @ts-expect-error Internal property - input
171
- this.dom.removeEventListener(type, this.input.eventHandlers[type]);
172
- }
173
- }
174
- // @ts-expect-error we're intentionally overwriting this property
175
- // to prevent side effects
176
- this.dom = document.createElement("div");
177
- super.destroy();
178
- }
179
- };
180
- const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
181
- nodes: {
182
- doc: {
183
- content: "text*"
184
- },
185
- text: {
186
- inline: true
187
- }
188
- }
189
- });
190
- const EMPTY_STATE = _prosemirrorstate.EditorState.create({
191
- schema: EMPTY_SCHEMA
192
- });
193
20
  let didWarnValueDefaultValue = false;
194
21
  function useEditor(mount, options) {
195
22
  if (process.env.NODE_ENV !== "production") {
@@ -201,7 +28,7 @@ function useEditor(mount, options) {
201
28
  const flushSyncRef = (0, _react.useRef)(true);
202
29
  const [cursorWrapper, _setCursorWrapper] = (0, _react.useState)(null);
203
30
  const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
204
- const defaultState = options.defaultState ?? EMPTY_STATE;
31
+ const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
205
32
  const [_state, setState] = (0, _react.useState)(defaultState);
206
33
  const state = options.state ?? _state;
207
34
  const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
@@ -241,30 +68,18 @@ function useEditor(mount, options) {
241
68
  options.dispatchTransaction,
242
69
  options.state
243
70
  ]);
244
- const cleanup = (0, _ssr.setSsrStubs)();
245
- const tempDom = document.createElement("div");
246
- cleanup();
247
- const docViewDescRef = (0, _react.useRef)(new _viewdesc.NodeViewDesc(undefined, [], ()=>-1, state.doc, [], _prosemirrorview.DecorationSet.empty, tempDom, null, tempDom, ()=>false, ()=>{
248
- /* The doc node can't have a node selection*/ }, ()=>{
249
- /* The doc node can't have a node selection*/ }, ()=>false));
250
71
  const directEditorProps = {
251
72
  ...options,
252
73
  state,
253
74
  plugins,
254
- dispatchTransaction,
255
- docView: docViewDescRef.current,
256
- ready: true
75
+ dispatchTransaction
257
76
  };
258
- const [view, setView] = (0, _react.useState)(// During the initial render, we create something of a dummy
259
- // EditorView. This allows us to ensure that the first render actually
260
- // renders the document, which is necessary for SSR.
261
- ()=>new ReactEditorView(null, {
262
- ...directEditorProps,
263
- ready: false
264
- }));
77
+ const [view, setView] = (0, _react.useState)(()=>{
78
+ return new _StaticEditorView.StaticEditorView(directEditorProps);
79
+ });
265
80
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
266
81
  return ()=>{
267
- view?.destroy();
82
+ view.destroy();
268
83
  };
269
84
  }, [
270
85
  view
@@ -274,44 +89,33 @@ function useEditor(mount, options) {
274
89
  // so this is not a concern.
275
90
  // eslint-disable-next-line react-hooks/exhaustive-deps
276
91
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
277
- if (!mount) {
278
- setView(null);
279
- return;
280
- }
281
- if (!view || view.dom !== mount) {
282
- const newView = new ReactEditorView({
283
- mount
284
- }, directEditorProps);
285
- setView(newView);
286
- newView.dom.addEventListener("compositionend", forceUpdate);
287
- return;
288
- }
289
- // TODO: We should be able to put this in previous branch,
290
- // but we need to convince EditorView's constructor not to
291
- // clear out the DOM when passed a mount that already has
292
- // content in it, otherwise React blows up when it tries
293
- // to clean up.
294
- if (view.needsRedraw) {
295
- setView(null);
296
- return;
92
+ if (mount !== view.dom) {
93
+ if (mount) {
94
+ const view = new _ReactEditorView.ReactEditorView({
95
+ mount
96
+ }, directEditorProps);
97
+ view.dom.addEventListener("compositionend", forceUpdate);
98
+ setView(view);
99
+ } else {
100
+ const view = new _StaticEditorView.StaticEditorView(directEditorProps);
101
+ setView(view);
102
+ }
103
+ } else if (view instanceof _ReactEditorView.ReactEditorView) {
104
+ view.commitPendingEffects();
297
105
  }
298
- // @ts-expect-error Internal property - domObserver
299
- view?.domObserver.selectionToDOM();
300
- view?.runPendingEffects();
301
106
  });
302
- view?.pureSetProps(directEditorProps);
107
+ view.update(directEditorProps);
303
108
  const editor = (0, _react.useMemo)(()=>({
304
- view: view,
305
- registerEventListener,
306
- unregisterEventListener,
109
+ view,
307
110
  cursorWrapper,
308
- docViewDescRef,
309
- flushSyncRef
111
+ flushSyncRef,
112
+ registerEventListener,
113
+ unregisterEventListener
310
114
  }), [
311
- view,
115
+ cursorWrapper,
312
116
  registerEventListener,
313
117
  unregisterEventListener,
314
- cursorWrapper
118
+ view
315
119
  ]);
316
120
  return {
317
121
  editor,
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useEditorEffect", {
9
9
  }
10
10
  });
11
11
  const _react = require("react");
12
+ const _ReactEditorView = require("../ReactEditorView.js");
12
13
  const _EditorContext = require("../contexts/EditorContext.js");
13
14
  const _useLayoutGroupEffect = require("./useLayoutGroupEffect.js");
14
15
  function useEditorEffect(effect, dependencies) {
@@ -21,8 +22,7 @@ function useEditorEffect(effect, dependencies) {
21
22
  // every time it changes, because it will most likely
22
23
  // be defined inline and run on every re-render.
23
24
  (0, _useLayoutGroupEffect.useLayoutGroupEffect)(()=>{
24
- // @ts-expect-error We're making use of knowledge of internal attributes here
25
- if (view?.docView && view.ready) {
25
+ if (view instanceof _ReactEditorView.ReactEditorView) {
26
26
  flushSyncRef.current = false;
27
27
  const result = effect(view);
28
28
  flushSyncRef.current = true;
@@ -9,8 +9,15 @@ Object.defineProperty(exports, "useEditorEventCallback", {
9
9
  }
10
10
  });
11
11
  const _react = require("react");
12
+ const _ReactEditorView = require("../ReactEditorView.js");
12
13
  const _EditorContext = require("../contexts/EditorContext.js");
13
14
  const _useEditorEffect = require("./useEditorEffect.js");
15
+ function assertIsReactEditorView(view) {
16
+ if (view instanceof _ReactEditorView.ReactEditorView) {
17
+ return;
18
+ }
19
+ throw new DOMException("ProseMirror document is not mounted", "InvalidStateError");
20
+ }
14
21
  function useEditorEventCallback(callback) {
15
22
  const ref = (0, _react.useRef)(callback);
16
23
  const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
@@ -23,11 +30,7 @@ function useEditorEventCallback(callback) {
23
30
  for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
24
31
  args[_key] = arguments[_key];
25
32
  }
26
- // It's not actually possible for an event handler to run
27
- // while view is null, since view is only ever set to
28
- // null in a layout effect that then immediately triggers
29
- // a re-render which sets view to a new EditorView
30
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
33
+ assertIsReactEditorView(view);
31
34
  return ref.current(view, ...args);
32
35
  }, [
33
36
  view
@@ -13,10 +13,10 @@ const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js
13
13
  const _EditorContext = require("../contexts/EditorContext.js");
14
14
  const _viewdesc = require("../viewdesc.js");
15
15
  const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
16
- function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, viewDesc, contentDOMRef) {
16
+ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, contentDOMRef) {
17
17
  const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
18
18
  const [hasContentDOM, setHasContentDOM] = (0, _react.useState)(true);
19
- const nodeViewDescRef = (0, _react.useRef)(viewDesc);
19
+ const nodeViewDescRef = (0, _react.useRef)();
20
20
  const stopEvent = (0, _react.useRef)(()=>false);
21
21
  const setStopEvent = (0, _react.useCallback)((newStopEvent)=>{
22
22
  stopEvent.current = newStopEvent;
@@ -26,12 +26,12 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
26
26
  ignoreMutation.current = newIgnoreMutation;
27
27
  }, []);
28
28
  const selectNode = (0, _react.useRef)(()=>{
29
- if (!nodeDomRef.current || !node) return;
29
+ if (!nodeDomRef.current) return;
30
30
  if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
31
31
  if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).draggable = true;
32
32
  });
33
33
  const deselectNode = (0, _react.useRef)(()=>{
34
- if (!nodeDomRef.current || !node) return;
34
+ if (!nodeDomRef.current) return;
35
35
  if (nodeDomRef.current.nodeType == 1) {
36
36
  nodeDomRef.current.classList.remove("ProseMirror-selectednode");
37
37
  if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).removeAttribute("draggable");
@@ -57,15 +57,14 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
57
57
  ]);
58
58
  // eslint-disable-next-line react-hooks/exhaustive-deps
59
59
  (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
60
- if (!node || !nodeDomRef.current) return;
60
+ if (!nodeDomRef.current) return;
61
61
  const firstChildDesc = childDescriptors.current[0];
62
62
  if (!nodeViewDescRef.current) {
63
- nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
63
+ nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, contentDOMRef?.current ?? firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
64
64
  } else {
65
65
  nodeViewDescRef.current.parent = parentRef.current;
66
66
  nodeViewDescRef.current.children = childDescriptors.current;
67
67
  nodeViewDescRef.current.node = node;
68
- nodeViewDescRef.current.getPos = getPos;
69
68
  nodeViewDescRef.current.outerDeco = outerDecorations;
70
69
  nodeViewDescRef.current.innerDeco = innerDecorations;
71
70
  nodeViewDescRef.current.dom = domRef?.current ?? nodeDomRef.current;
@@ -98,12 +97,13 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
98
97
  childDesc.textDOM = textDOM;
99
98
  childDesc.text = textDOM.data;
100
99
  childDesc.textDOM.pmViewDesc = childDesc;
101
- // @ts-expect-error Internal property -- input
102
- view?.input.compositionNodes.push(childDesc);
100
+ // It should not be possible to be in a composition because one could
101
+ // not start between the renders that switch the view type.
102
+ view.input.compositionNodes.push(childDesc);
103
103
  }
104
104
  }
105
105
  return ()=>{
106
- if (nodeViewDescRef.current?.children[0] instanceof _viewdesc.CompositionViewDesc && !view?.composing) {
106
+ if (nodeViewDescRef.current?.children[0] instanceof _viewdesc.CompositionViewDesc && !view.composing) {
107
107
  nodeViewDescRef.current?.children[0].dom.parentNode?.removeChild(nodeViewDescRef.current?.children[0].dom);
108
108
  }
109
109
  };
@@ -13,5 +13,5 @@ const _EditorContext = require("../contexts/EditorContext.js");
13
13
  const _reactKeys = require("../plugins/reactKeys.js");
14
14
  function useReactKeys() {
15
15
  const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
16
- return view && _reactKeys.reactKeysPluginKey.getState(view.state);
16
+ return _reactKeys.reactKeysPluginKey.getState(view.state);
17
17
  }
@@ -85,8 +85,6 @@ function tempEditor(param) {
85
85
  }, /*#__PURE__*/ _react1.default.createElement(Test, null), /*#__PURE__*/ _react1.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, null)));
86
86
  return view;
87
87
  }
88
- // We need two renders for the hasContentDOM state to settle
89
- rerenderEditor();
90
88
  return {
91
89
  view: view,
92
90
  rerender: rerenderEditor,