@tiptap/react 2.0.0-beta.213 → 2.0.0-beta.215

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/index.js CHANGED
@@ -1,437 +1,383 @@
1
- // src/BubbleMenu.tsx
2
- import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
3
- import React, { useEffect, useState } from "react";
4
- var BubbleMenu = (props) => {
5
- const [element, setElement] = useState(null);
6
- useEffect(() => {
7
- if (!element) {
8
- return;
9
- }
10
- if (props.editor.isDestroyed) {
11
- return;
12
- }
13
- const {
14
- pluginKey = "bubbleMenu",
15
- editor,
16
- tippyOptions = {},
17
- updateDelay,
18
- shouldShow = null
19
- } = props;
20
- const plugin = BubbleMenuPlugin({
21
- updateDelay,
22
- editor,
23
- element,
24
- pluginKey,
25
- shouldShow,
26
- tippyOptions
27
- });
28
- editor.registerPlugin(plugin);
29
- return () => editor.unregisterPlugin(pluginKey);
30
- }, [props.editor, element]);
31
- return /* @__PURE__ */ React.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
32
- };
1
+ import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
2
+ import React, { useState, useEffect, createContext, useContext } from 'react';
3
+ import { Editor as Editor$1, NodeView } from '@tiptap/core';
4
+ export * from '@tiptap/core';
5
+ import ReactDOM, { flushSync } from 'react-dom';
6
+ import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
33
7
 
34
- // src/Editor.ts
35
- import { Editor as CoreEditor } from "@tiptap/core";
36
- var Editor = class extends CoreEditor {
37
- constructor() {
38
- super(...arguments);
39
- this.contentComponent = null;
40
- }
8
+ const BubbleMenu = (props) => {
9
+ const [element, setElement] = useState(null);
10
+ useEffect(() => {
11
+ if (!element) {
12
+ return;
13
+ }
14
+ if (props.editor.isDestroyed) {
15
+ return;
16
+ }
17
+ const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
18
+ const plugin = BubbleMenuPlugin({
19
+ updateDelay,
20
+ editor,
21
+ element,
22
+ pluginKey,
23
+ shouldShow,
24
+ tippyOptions,
25
+ });
26
+ editor.registerPlugin(plugin);
27
+ return () => editor.unregisterPlugin(pluginKey);
28
+ }, [props.editor, element]);
29
+ return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
41
30
  };
42
31
 
43
- // src/EditorContent.tsx
44
- import React2 from "react";
45
- import ReactDOM, { flushSync } from "react-dom";
46
- var Portals = ({ renderers }) => {
47
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
48
- return ReactDOM.createPortal(
49
- renderer.reactElement,
50
- renderer.element,
51
- key
52
- );
53
- }));
54
- };
55
- var PureEditorContent = class extends React2.Component {
56
- constructor(props) {
57
- super(props);
58
- this.editorContentRef = React2.createRef();
59
- this.initialized = false;
60
- this.state = {
61
- renderers: {}
62
- };
63
- }
64
- componentDidMount() {
65
- this.init();
66
- }
67
- componentDidUpdate() {
68
- this.init();
69
- }
70
- init() {
71
- const { editor } = this.props;
72
- if (editor && editor.options.element) {
73
- if (editor.contentComponent) {
74
- return;
75
- }
76
- const element = this.editorContentRef.current;
77
- element.append(...editor.options.element.childNodes);
78
- editor.setOptions({
79
- element
80
- });
81
- editor.contentComponent = this;
82
- editor.createNodeViews();
83
- this.initialized = true;
84
- }
85
- }
86
- maybeFlushSync(fn) {
87
- if (this.initialized) {
88
- flushSync(fn);
89
- } else {
90
- fn();
91
- }
92
- }
93
- setRenderer(id, renderer) {
94
- this.maybeFlushSync(() => {
95
- this.setState(({ renderers }) => ({
96
- renderers: {
97
- ...renderers,
98
- [id]: renderer
99
- }
100
- }));
101
- });
102
- }
103
- removeRenderer(id) {
104
- this.maybeFlushSync(() => {
105
- this.setState(({ renderers }) => {
106
- const nextRenderers = { ...renderers };
107
- delete nextRenderers[id];
108
- return { renderers: nextRenderers };
109
- });
110
- });
111
- }
112
- componentWillUnmount() {
113
- const { editor } = this.props;
114
- if (!editor) {
115
- return;
116
- }
117
- if (!editor.isDestroyed) {
118
- editor.view.setProps({
119
- nodeViews: {}
120
- });
121
- }
122
- editor.contentComponent = null;
123
- if (!editor.options.element.firstChild) {
124
- return;
125
- }
126
- const newElement = document.createElement("div");
127
- newElement.append(...editor.options.element.childNodes);
128
- editor.setOptions({
129
- element: newElement
130
- });
131
- }
132
- render() {
133
- const { editor, ...rest } = this.props;
134
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ref: this.editorContentRef, ...rest }), /* @__PURE__ */ React2.createElement(Portals, { renderers: this.state.renderers }));
135
- }
136
- };
137
- var EditorContent = React2.memo(PureEditorContent);
32
+ class Editor extends Editor$1 {
33
+ constructor() {
34
+ super(...arguments);
35
+ this.contentComponent = null;
36
+ }
37
+ }
138
38
 
139
- // src/FloatingMenu.tsx
140
- import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
141
- import React3, {
142
- useEffect as useEffect2,
143
- useState as useState2
144
- } from "react";
145
- var FloatingMenu = (props) => {
146
- const [element, setElement] = useState2(null);
147
- useEffect2(() => {
148
- if (!element) {
149
- return;
150
- }
151
- if (props.editor.isDestroyed) {
152
- return;
153
- }
154
- const {
155
- pluginKey = "floatingMenu",
156
- editor,
157
- tippyOptions = {},
158
- shouldShow = null
159
- } = props;
160
- const plugin = FloatingMenuPlugin({
161
- pluginKey,
162
- editor,
163
- element,
164
- tippyOptions,
165
- shouldShow
166
- });
167
- editor.registerPlugin(plugin);
168
- return () => editor.unregisterPlugin(pluginKey);
169
- }, [
170
- props.editor,
171
- element
172
- ]);
173
- return /* @__PURE__ */ React3.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
174
- };
39
+ const Portals = ({ renderers }) => {
40
+ return (React.createElement(React.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
41
+ return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
42
+ })));
43
+ };
44
+ class PureEditorContent extends React.Component {
45
+ constructor(props) {
46
+ super(props);
47
+ this.editorContentRef = React.createRef();
48
+ this.initialized = false;
49
+ this.state = {
50
+ renderers: {},
51
+ };
52
+ }
53
+ componentDidMount() {
54
+ this.init();
55
+ }
56
+ componentDidUpdate() {
57
+ this.init();
58
+ }
59
+ init() {
60
+ const { editor } = this.props;
61
+ if (editor && editor.options.element) {
62
+ if (editor.contentComponent) {
63
+ return;
64
+ }
65
+ const element = this.editorContentRef.current;
66
+ element.append(...editor.options.element.childNodes);
67
+ editor.setOptions({
68
+ element,
69
+ });
70
+ editor.contentComponent = this;
71
+ editor.createNodeViews();
72
+ this.initialized = true;
73
+ }
74
+ }
75
+ maybeFlushSync(fn) {
76
+ // Avoid calling flushSync until the editor is initialized.
77
+ // Initialization happens during the componentDidMount or componentDidUpdate
78
+ // lifecycle methods, and React doesn't allow calling flushSync from inside
79
+ // a lifecycle method.
80
+ if (this.initialized) {
81
+ flushSync(fn);
82
+ }
83
+ else {
84
+ fn();
85
+ }
86
+ }
87
+ setRenderer(id, renderer) {
88
+ this.maybeFlushSync(() => {
89
+ this.setState(({ renderers }) => ({
90
+ renderers: {
91
+ ...renderers,
92
+ [id]: renderer,
93
+ },
94
+ }));
95
+ });
96
+ }
97
+ removeRenderer(id) {
98
+ this.maybeFlushSync(() => {
99
+ this.setState(({ renderers }) => {
100
+ const nextRenderers = { ...renderers };
101
+ delete nextRenderers[id];
102
+ return { renderers: nextRenderers };
103
+ });
104
+ });
105
+ }
106
+ componentWillUnmount() {
107
+ const { editor } = this.props;
108
+ if (!editor) {
109
+ return;
110
+ }
111
+ if (!editor.isDestroyed) {
112
+ editor.view.setProps({
113
+ nodeViews: {},
114
+ });
115
+ }
116
+ editor.contentComponent = null;
117
+ if (!editor.options.element.firstChild) {
118
+ return;
119
+ }
120
+ const newElement = document.createElement('div');
121
+ newElement.append(...editor.options.element.childNodes);
122
+ editor.setOptions({
123
+ element: newElement,
124
+ });
125
+ }
126
+ render() {
127
+ const { editor, ...rest } = this.props;
128
+ return (React.createElement(React.Fragment, null,
129
+ React.createElement("div", { ref: this.editorContentRef, ...rest }),
130
+ React.createElement(Portals, { renderers: this.state.renderers })));
131
+ }
132
+ }
133
+ const EditorContent = React.memo(PureEditorContent);
175
134
 
176
- // src/NodeViewContent.tsx
177
- import React4 from "react";
135
+ const FloatingMenu = (props) => {
136
+ const [element, setElement] = useState(null);
137
+ useEffect(() => {
138
+ if (!element) {
139
+ return;
140
+ }
141
+ if (props.editor.isDestroyed) {
142
+ return;
143
+ }
144
+ const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
145
+ const plugin = FloatingMenuPlugin({
146
+ pluginKey,
147
+ editor,
148
+ element,
149
+ tippyOptions,
150
+ shouldShow,
151
+ });
152
+ editor.registerPlugin(plugin);
153
+ return () => editor.unregisterPlugin(pluginKey);
154
+ }, [
155
+ props.editor,
156
+ element,
157
+ ]);
158
+ return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
159
+ };
178
160
 
179
- // src/useReactNodeView.ts
180
- import { createContext, useContext } from "react";
181
- var ReactNodeViewContext = createContext({
182
- onDragStart: void 0
183
- });
184
- var useReactNodeView = () => useContext(ReactNodeViewContext);
161
+ const ReactNodeViewContext = createContext({
162
+ onDragStart: undefined,
163
+ });
164
+ const useReactNodeView = () => useContext(ReactNodeViewContext);
185
165
 
186
- // src/NodeViewContent.tsx
187
- var NodeViewContent = (props) => {
188
- const Tag = props.as || "div";
189
- const { nodeViewContentRef } = useReactNodeView();
190
- return /* @__PURE__ */ React4.createElement(
191
- Tag,
192
- {
193
- ...props,
194
- ref: nodeViewContentRef,
195
- "data-node-view-content": "",
196
- style: {
197
- whiteSpace: "pre-wrap",
198
- ...props.style
199
- }
200
- }
201
- );
166
+ const NodeViewContent = props => {
167
+ const Tag = props.as || 'div';
168
+ const { nodeViewContentRef } = useReactNodeView();
169
+ return (React.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
170
+ whiteSpace: 'pre-wrap',
171
+ ...props.style,
172
+ } }));
202
173
  };
203
174
 
204
- // src/NodeViewWrapper.tsx
205
- import React5 from "react";
206
- var NodeViewWrapper = React5.forwardRef((props, ref) => {
207
- const { onDragStart } = useReactNodeView();
208
- const Tag = props.as || "div";
209
- return /* @__PURE__ */ React5.createElement(
210
- Tag,
211
- {
212
- ...props,
213
- ref,
214
- "data-node-view-wrapper": "",
215
- onDragStart,
216
- style: {
217
- whiteSpace: "normal",
218
- ...props.style
219
- }
220
- }
221
- );
175
+ const NodeViewWrapper = React.forwardRef((props, ref) => {
176
+ const { onDragStart } = useReactNodeView();
177
+ const Tag = props.as || 'div';
178
+ return (React.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
179
+ whiteSpace: 'normal',
180
+ ...props.style,
181
+ } }));
222
182
  });
223
183
 
224
- // src/ReactNodeViewRenderer.tsx
225
- import {
226
- NodeView
227
- } from "@tiptap/core";
228
- import React7 from "react";
229
-
230
- // src/ReactRenderer.tsx
231
- import React6 from "react";
232
- function isClassComponent(Component) {
233
- return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
234
- }
235
- function isForwardRefComponent(Component) {
236
- var _a;
237
- return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
184
+ function isClassComponent(Component) {
185
+ return !!(typeof Component === 'function'
186
+ && Component.prototype
187
+ && Component.prototype.isReactComponent);
188
+ }
189
+ function isForwardRefComponent(Component) {
190
+ var _a;
191
+ return !!(typeof Component === 'object'
192
+ && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
193
+ }
194
+ class ReactRenderer {
195
+ constructor(component, { editor, props = {}, as = 'div', className = '', }) {
196
+ this.ref = null;
197
+ this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
198
+ this.component = component;
199
+ this.editor = editor;
200
+ this.props = props;
201
+ this.element = document.createElement(as);
202
+ this.element.classList.add('react-renderer');
203
+ if (className) {
204
+ this.element.classList.add(...className.split(' '));
205
+ }
206
+ this.render();
207
+ }
208
+ render() {
209
+ var _a, _b;
210
+ const Component = this.component;
211
+ const props = this.props;
212
+ if (isClassComponent(Component) || isForwardRefComponent(Component)) {
213
+ props.ref = (ref) => {
214
+ this.ref = ref;
215
+ };
216
+ }
217
+ this.reactElement = React.createElement(Component, { ...props });
218
+ (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.setRenderer(this.id, this);
219
+ }
220
+ updateProps(props = {}) {
221
+ this.props = {
222
+ ...this.props,
223
+ ...props,
224
+ };
225
+ this.render();
226
+ }
227
+ destroy() {
228
+ var _a, _b;
229
+ (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.removeRenderer(this.id);
230
+ }
238
231
  }
239
- var ReactRenderer = class {
240
- constructor(component, {
241
- editor,
242
- props = {},
243
- as = "div",
244
- className = ""
245
- }) {
246
- this.ref = null;
247
- this.id = Math.floor(Math.random() * 4294967295).toString();
248
- this.component = component;
249
- this.editor = editor;
250
- this.props = props;
251
- this.element = document.createElement(as);
252
- this.element.classList.add("react-renderer");
253
- if (className) {
254
- this.element.classList.add(...className.split(" "));
255
- }
256
- this.render();
257
- }
258
- render() {
259
- var _a, _b;
260
- const Component = this.component;
261
- const props = this.props;
262
- if (isClassComponent(Component) || isForwardRefComponent(Component)) {
263
- props.ref = (ref) => {
264
- this.ref = ref;
265
- };
266
- }
267
- this.reactElement = /* @__PURE__ */ React6.createElement(Component, { ...props });
268
- (_b = (_a = this.editor) == null ? void 0 : _a.contentComponent) == null ? void 0 : _b.setRenderer(this.id, this);
269
- }
270
- updateProps(props = {}) {
271
- this.props = {
272
- ...this.props,
273
- ...props
274
- };
275
- this.render();
276
- }
277
- destroy() {
278
- var _a, _b;
279
- (_b = (_a = this.editor) == null ? void 0 : _a.contentComponent) == null ? void 0 : _b.removeRenderer(this.id);
280
- }
281
- };
282
232
 
283
- // src/ReactNodeViewRenderer.tsx
284
- var ReactNodeView = class extends NodeView {
285
- mount() {
286
- const props = {
287
- editor: this.editor,
288
- node: this.node,
289
- decorations: this.decorations,
290
- selected: false,
291
- extension: this.extension,
292
- getPos: () => this.getPos(),
293
- updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
294
- deleteNode: () => this.deleteNode()
295
- };
296
- if (!this.component.displayName) {
297
- const capitalizeFirstChar = (string) => {
298
- return string.charAt(0).toUpperCase() + string.substring(1);
299
- };
300
- this.component.displayName = capitalizeFirstChar(this.extension.name);
301
- }
302
- const ReactNodeViewProvider = (componentProps) => {
303
- const Component = this.component;
304
- const onDragStart = this.onDragStart.bind(this);
305
- const nodeViewContentRef = (element) => {
306
- if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
307
- element.appendChild(this.contentDOMElement);
308
- }
309
- };
310
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } }, /* @__PURE__ */ React7.createElement(Component, { ...componentProps })));
311
- };
312
- ReactNodeViewProvider.displayName = "ReactNodeView";
313
- this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? "span" : "div");
314
- if (this.contentDOMElement) {
315
- this.contentDOMElement.style.whiteSpace = "inherit";
316
- }
317
- let as = this.node.isInline ? "span" : "div";
318
- if (this.options.as) {
319
- as = this.options.as;
320
- }
321
- const { className = "" } = this.options;
322
- this.renderer = new ReactRenderer(ReactNodeViewProvider, {
323
- editor: this.editor,
324
- props,
325
- as,
326
- className: `node-${this.node.type.name} ${className}`.trim()
327
- });
328
- }
329
- get dom() {
330
- var _a;
331
- if (this.renderer.element.firstElementChild && !((_a = this.renderer.element.firstElementChild) == null ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
332
- throw Error("Please use the NodeViewWrapper component for your node view.");
333
- }
334
- return this.renderer.element;
335
- }
336
- get contentDOM() {
337
- if (this.node.isLeaf) {
338
- return null;
339
- }
340
- return this.contentDOMElement;
341
- }
342
- update(node, decorations) {
343
- const updateProps = (props) => {
344
- this.renderer.updateProps(props);
345
- };
346
- if (node.type !== this.node.type) {
347
- return false;
348
- }
349
- if (typeof this.options.update === "function") {
350
- const oldNode = this.node;
351
- const oldDecorations = this.decorations;
352
- this.node = node;
353
- this.decorations = decorations;
354
- return this.options.update({
355
- oldNode,
356
- oldDecorations,
357
- newNode: node,
358
- newDecorations: decorations,
359
- updateProps: () => updateProps({ node, decorations })
360
- });
361
- }
362
- if (node === this.node && this.decorations === decorations) {
363
- return true;
364
- }
365
- this.node = node;
366
- this.decorations = decorations;
367
- updateProps({ node, decorations });
368
- return true;
369
- }
370
- selectNode() {
371
- this.renderer.updateProps({
372
- selected: true
373
- });
374
- }
375
- deselectNode() {
376
- this.renderer.updateProps({
377
- selected: false
378
- });
379
- }
380
- destroy() {
381
- this.renderer.destroy();
382
- this.contentDOMElement = null;
383
- }
384
- };
385
- function ReactNodeViewRenderer(component, options) {
386
- return (props) => {
387
- if (!props.editor.contentComponent) {
388
- return {};
389
- }
390
- return new ReactNodeView(component, props, options);
391
- };
233
+ class ReactNodeView extends NodeView {
234
+ mount() {
235
+ const props = {
236
+ editor: this.editor,
237
+ node: this.node,
238
+ decorations: this.decorations,
239
+ selected: false,
240
+ extension: this.extension,
241
+ getPos: () => this.getPos(),
242
+ updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
243
+ deleteNode: () => this.deleteNode(),
244
+ };
245
+ if (!this.component.displayName) {
246
+ const capitalizeFirstChar = (string) => {
247
+ return string.charAt(0).toUpperCase() + string.substring(1);
248
+ };
249
+ this.component.displayName = capitalizeFirstChar(this.extension.name);
250
+ }
251
+ const ReactNodeViewProvider = componentProps => {
252
+ const Component = this.component;
253
+ const onDragStart = this.onDragStart.bind(this);
254
+ const nodeViewContentRef = element => {
255
+ if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
256
+ element.appendChild(this.contentDOMElement);
257
+ }
258
+ };
259
+ return (React.createElement(React.Fragment, null,
260
+ React.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
261
+ React.createElement(Component, { ...componentProps }))));
262
+ };
263
+ ReactNodeViewProvider.displayName = 'ReactNodeView';
264
+ this.contentDOMElement = this.node.isLeaf
265
+ ? null
266
+ : document.createElement(this.node.isInline ? 'span' : 'div');
267
+ if (this.contentDOMElement) {
268
+ // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
269
+ // With this fix it seems to work fine
270
+ // See: https://github.com/ueberdosis/tiptap/issues/1197
271
+ this.contentDOMElement.style.whiteSpace = 'inherit';
272
+ }
273
+ let as = this.node.isInline ? 'span' : 'div';
274
+ if (this.options.as) {
275
+ as = this.options.as;
276
+ }
277
+ const { className = '' } = this.options;
278
+ this.renderer = new ReactRenderer(ReactNodeViewProvider, {
279
+ editor: this.editor,
280
+ props,
281
+ as,
282
+ className: `node-${this.node.type.name} ${className}`.trim(),
283
+ });
284
+ }
285
+ get dom() {
286
+ var _a;
287
+ if (this.renderer.element.firstElementChild
288
+ && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-node-view-wrapper'))) {
289
+ throw Error('Please use the NodeViewWrapper component for your node view.');
290
+ }
291
+ return this.renderer.element;
292
+ }
293
+ get contentDOM() {
294
+ if (this.node.isLeaf) {
295
+ return null;
296
+ }
297
+ return this.contentDOMElement;
298
+ }
299
+ update(node, decorations) {
300
+ const updateProps = (props) => {
301
+ this.renderer.updateProps(props);
302
+ };
303
+ if (node.type !== this.node.type) {
304
+ return false;
305
+ }
306
+ if (typeof this.options.update === 'function') {
307
+ const oldNode = this.node;
308
+ const oldDecorations = this.decorations;
309
+ this.node = node;
310
+ this.decorations = decorations;
311
+ return this.options.update({
312
+ oldNode,
313
+ oldDecorations,
314
+ newNode: node,
315
+ newDecorations: decorations,
316
+ updateProps: () => updateProps({ node, decorations }),
317
+ });
318
+ }
319
+ if (node === this.node && this.decorations === decorations) {
320
+ return true;
321
+ }
322
+ this.node = node;
323
+ this.decorations = decorations;
324
+ updateProps({ node, decorations });
325
+ return true;
326
+ }
327
+ selectNode() {
328
+ this.renderer.updateProps({
329
+ selected: true,
330
+ });
331
+ }
332
+ deselectNode() {
333
+ this.renderer.updateProps({
334
+ selected: false,
335
+ });
336
+ }
337
+ destroy() {
338
+ this.renderer.destroy();
339
+ this.contentDOMElement = null;
340
+ }
341
+ }
342
+ function ReactNodeViewRenderer(component, options) {
343
+ return (props) => {
344
+ // try to get the parent component
345
+ // this is important for vue devtools to show the component hierarchy correctly
346
+ // maybe it’s `undefined` because <editor-content> isn’t rendered yet
347
+ if (!props.editor.contentComponent) {
348
+ return {};
349
+ }
350
+ return new ReactNodeView(component, props, options);
351
+ };
392
352
  }
393
353
 
394
- // src/useEditor.ts
395
- import { useEffect as useEffect3, useState as useState3 } from "react";
396
- function useForceUpdate() {
397
- const [, setValue] = useState3(0);
398
- return () => setValue((value) => value + 1);
399
- }
400
- var useEditor = (options = {}, deps = []) => {
401
- const [editor, setEditor] = useState3(null);
402
- const forceUpdate = useForceUpdate();
403
- useEffect3(() => {
404
- let isMounted = true;
405
- const instance = new Editor(options);
406
- setEditor(instance);
407
- instance.on("transaction", () => {
408
- requestAnimationFrame(() => {
409
- requestAnimationFrame(() => {
410
- if (isMounted) {
411
- forceUpdate();
412
- }
413
- });
414
- });
415
- });
416
- return () => {
417
- instance.destroy();
418
- isMounted = false;
419
- };
420
- }, deps);
421
- return editor;
354
+ function useForceUpdate() {
355
+ const [, setValue] = useState(0);
356
+ return () => setValue(value => value + 1);
357
+ }
358
+ const useEditor = (options = {}, deps = []) => {
359
+ const [editor, setEditor] = useState(null);
360
+ const forceUpdate = useForceUpdate();
361
+ useEffect(() => {
362
+ let isMounted = true;
363
+ const instance = new Editor(options);
364
+ setEditor(instance);
365
+ instance.on('transaction', () => {
366
+ requestAnimationFrame(() => {
367
+ requestAnimationFrame(() => {
368
+ if (isMounted) {
369
+ forceUpdate();
370
+ }
371
+ });
372
+ });
373
+ });
374
+ return () => {
375
+ instance.destroy();
376
+ isMounted = false;
377
+ };
378
+ }, deps);
379
+ return editor;
422
380
  };
423
381
 
424
- // src/index.ts
425
- export * from "@tiptap/core";
426
- export {
427
- BubbleMenu,
428
- Editor,
429
- EditorContent,
430
- FloatingMenu,
431
- NodeViewContent,
432
- NodeViewWrapper,
433
- PureEditorContent,
434
- ReactNodeViewRenderer,
435
- ReactRenderer,
436
- useEditor
437
- };
382
+ export { BubbleMenu, Editor, EditorContent, FloatingMenu, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeViewRenderer, ReactRenderer, useEditor };
383
+ //# sourceMappingURL=index.js.map