@tiptap/react 2.0.0-beta.21 → 2.0.0-beta.210

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 (37) hide show
  1. package/README.md +2 -2
  2. package/dist/index.cjs +437 -0
  3. package/dist/index.d.ts +101 -0
  4. package/dist/index.js +437 -0
  5. package/package.json +45 -16
  6. package/src/BubbleMenu.tsx +32 -16
  7. package/src/Editor.ts +9 -2
  8. package/src/EditorContent.tsx +55 -12
  9. package/src/FloatingMenu.tsx +36 -14
  10. package/src/NodeViewContent.tsx +10 -3
  11. package/src/NodeViewWrapper.tsx +11 -8
  12. package/src/ReactNodeViewRenderer.tsx +82 -34
  13. package/src/ReactRenderer.tsx +38 -29
  14. package/src/index.ts +6 -6
  15. package/src/useEditor.ts +16 -4
  16. package/src/useReactNodeView.ts +1 -0
  17. package/CHANGELOG.md +0 -190
  18. package/LICENSE.md +0 -21
  19. package/dist/packages/react/src/BubbleMenu.d.ts +0 -6
  20. package/dist/packages/react/src/Editor.d.ts +0 -6
  21. package/dist/packages/react/src/EditorContent.d.ts +0 -19
  22. package/dist/packages/react/src/FloatingMenu.d.ts +0 -6
  23. package/dist/packages/react/src/NodeViewContent.d.ts +0 -6
  24. package/dist/packages/react/src/NodeViewWrapper.d.ts +0 -6
  25. package/dist/packages/react/src/ReactNodeViewRenderer.d.ts +0 -9
  26. package/dist/packages/react/src/ReactRenderer.d.ts +0 -21
  27. package/dist/packages/react/src/index.d.ts +0 -10
  28. package/dist/packages/react/src/useEditor.d.ts +0 -3
  29. package/dist/packages/react/src/useReactNodeView.d.ts +0 -6
  30. package/dist/tiptap-react.bundle.umd.min.js +0 -54
  31. package/dist/tiptap-react.bundle.umd.min.js.map +0 -1
  32. package/dist/tiptap-react.cjs.js +0 -318
  33. package/dist/tiptap-react.cjs.js.map +0 -1
  34. package/dist/tiptap-react.esm.js +0 -293
  35. package/dist/tiptap-react.esm.js.map +0 -1
  36. package/dist/tiptap-react.umd.js +0 -318
  37. package/dist/tiptap-react.umd.js.map +0 -1
@@ -1,318 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var core = require('@tiptap/core');
6
- var React = require('react');
7
- var extensionBubbleMenu = require('@tiptap/extension-bubble-menu');
8
- var extensionFloatingMenu = require('@tiptap/extension-floating-menu');
9
- var ReactDOM = require('react-dom');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
- var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
15
-
16
- const BubbleMenu = props => {
17
- const element = React.useRef(null);
18
- React.useEffect(() => {
19
- const { editor, tippyOptions } = props;
20
- editor.registerPlugin(extensionBubbleMenu.BubbleMenuPlugin({
21
- editor,
22
- element: element.current,
23
- tippyOptions,
24
- }));
25
- return () => {
26
- editor.unregisterPlugin(extensionBubbleMenu.BubbleMenuPluginKey);
27
- };
28
- }, []);
29
- return (React__default['default'].createElement("div", { ref: element, className: props.className, style: { visibility: 'hidden' } }, props.children));
30
- };
31
-
32
- class Editor extends core.Editor {
33
- constructor() {
34
- super(...arguments);
35
- this.contentComponent = null;
36
- }
37
- }
38
-
39
- const FloatingMenu = props => {
40
- const element = React.useRef(null);
41
- React.useEffect(() => {
42
- const { editor, tippyOptions } = props;
43
- editor.registerPlugin(extensionFloatingMenu.FloatingMenuPlugin({
44
- editor,
45
- element: element.current,
46
- tippyOptions,
47
- }));
48
- return () => {
49
- editor.unregisterPlugin(extensionFloatingMenu.FloatingMenuPluginKey);
50
- };
51
- }, []);
52
- return (React__default['default'].createElement("div", { ref: element, className: props.className, style: { visibility: 'hidden' } }, props.children));
53
- };
54
-
55
- function useForceUpdate() {
56
- const [, setValue] = React.useState(0);
57
- return () => setValue(value => value + 1);
58
- }
59
- const useEditor = (options = {}) => {
60
- const [editor, setEditor] = React.useState(null);
61
- const forceUpdate = useForceUpdate();
62
- React.useEffect(() => {
63
- const instance = new Editor(options);
64
- setEditor(instance);
65
- instance.on('transaction', forceUpdate);
66
- return () => {
67
- instance.destroy();
68
- };
69
- }, []);
70
- return editor;
71
- };
72
-
73
- function isClassComponent(Component) {
74
- return !!(typeof Component === 'function'
75
- && Component.prototype
76
- && Component.prototype.isReactComponent);
77
- }
78
- class ReactRenderer {
79
- constructor(component, { editor, props = {}, as = 'div' }) {
80
- this.ref = null;
81
- this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
82
- this.component = component;
83
- this.editor = editor;
84
- this.props = props;
85
- this.element = document.createElement(as);
86
- this.element.classList.add('react-renderer');
87
- this.render();
88
- }
89
- render() {
90
- var _a;
91
- const Component = this.component;
92
- const props = this.props;
93
- if (isClassComponent(Component)) {
94
- props.ref = (ref) => {
95
- this.ref = ref;
96
- };
97
- }
98
- this.reactElement = React__default['default'].createElement(Component, Object.assign({}, props));
99
- if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
100
- this.editor.contentComponent.setState({
101
- renderers: this.editor.contentComponent.state.renderers.set(this.id, this),
102
- });
103
- }
104
- }
105
- updateProps(props = {}) {
106
- this.props = {
107
- ...this.props,
108
- ...props,
109
- };
110
- this.render();
111
- }
112
- destroy() {
113
- var _a;
114
- if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
115
- const { renderers } = this.editor.contentComponent.state;
116
- renderers.delete(this.id);
117
- this.editor.contentComponent.setState({
118
- renderers,
119
- });
120
- }
121
- }
122
- }
123
-
124
- const ReactNodeViewContext = React.createContext({
125
- onDragStart: undefined,
126
- });
127
- const useReactNodeView = () => React.useContext(ReactNodeViewContext);
128
-
129
- class ReactNodeView extends core.NodeView {
130
- mount() {
131
- const props = {
132
- editor: this.editor,
133
- node: this.node,
134
- decorations: this.decorations,
135
- selected: false,
136
- extension: this.extension,
137
- getPos: () => this.getPos(),
138
- updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
139
- };
140
- if (!this.component.displayName) {
141
- const capitalizeFirstChar = (string) => {
142
- return string.charAt(0).toUpperCase() + string.substring(1);
143
- };
144
- this.component.displayName = capitalizeFirstChar(this.extension.name);
145
- }
146
- const ReactNodeViewProvider = componentProps => {
147
- const onDragStart = this.onDragStart.bind(this);
148
- const Component = this.component;
149
- return (React__default['default'].createElement(ReactNodeViewContext.Provider, { value: { onDragStart } },
150
- React__default['default'].createElement(Component, Object.assign({}, componentProps))));
151
- };
152
- ReactNodeViewProvider.displayName = 'ReactNodeView';
153
- this.contentDOMElement = this.node.isLeaf
154
- ? null
155
- : document.createElement(this.node.isInline ? 'span' : 'div');
156
- this.renderer = new ReactRenderer(ReactNodeViewProvider, {
157
- editor: this.editor,
158
- props,
159
- as: this.node.isInline
160
- ? 'span'
161
- : 'div',
162
- });
163
- }
164
- get dom() {
165
- var _a;
166
- if (this.renderer.element.firstElementChild
167
- && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-node-view-wrapper'))) {
168
- throw Error('Please use the NodeViewWrapper component for your node view.');
169
- }
170
- return this.renderer.element;
171
- }
172
- get contentDOM() {
173
- if (this.node.isLeaf) {
174
- return null;
175
- }
176
- const contentElement = this.dom.querySelector('[data-node-view-content]');
177
- if (this.contentDOMElement
178
- && contentElement
179
- && !contentElement.contains(this.contentDOMElement)) {
180
- contentElement.appendChild(this.contentDOMElement);
181
- }
182
- return this.contentDOMElement;
183
- }
184
- update(node, decorations) {
185
- if (typeof this.options.update === 'function') {
186
- return this.options.update(node, decorations);
187
- }
188
- if (node.type !== this.node.type) {
189
- return false;
190
- }
191
- if (node === this.node && this.decorations === decorations) {
192
- return true;
193
- }
194
- this.node = node;
195
- this.decorations = decorations;
196
- this.renderer.updateProps({ node, decorations });
197
- return true;
198
- }
199
- selectNode() {
200
- this.renderer.updateProps({
201
- selected: true,
202
- });
203
- }
204
- deselectNode() {
205
- this.renderer.updateProps({
206
- selected: false,
207
- });
208
- }
209
- destroy() {
210
- this.renderer.destroy();
211
- this.contentDOMElement = null;
212
- }
213
- }
214
- function ReactNodeViewRenderer(component, options) {
215
- return (props) => {
216
- // try to get the parent component
217
- // this is important for vue devtools to show the component hierarchy correctly
218
- // maybe it’s `undefined` because <editor-content> isn’t rendered yet
219
- if (!props.editor.contentComponent) {
220
- return {};
221
- }
222
- return new ReactNodeView(component, props, options);
223
- };
224
- }
225
-
226
- const Portals = ({ renderers }) => {
227
- return (React__default['default'].createElement(React__default['default'].Fragment, null, Array.from(renderers).map(([key, renderer]) => {
228
- return ReactDOM__default['default'].createPortal(renderer.reactElement, renderer.element, key);
229
- })));
230
- };
231
- class PureEditorContent extends React__default['default'].Component {
232
- constructor(props) {
233
- super(props);
234
- this.editorContentRef = React__default['default'].createRef();
235
- this.state = {
236
- renderers: new Map(),
237
- };
238
- }
239
- componentDidMount() {
240
- this.init();
241
- }
242
- componentDidUpdate() {
243
- this.init();
244
- }
245
- init() {
246
- const { editor } = this.props;
247
- if (editor && editor.options.element) {
248
- if (editor.contentComponent) {
249
- return;
250
- }
251
- const element = this.editorContentRef.current;
252
- element.appendChild(editor.options.element.firstChild);
253
- editor.setOptions({
254
- element,
255
- });
256
- editor.contentComponent = this;
257
- // TODO: alternative to setTimeout?
258
- setTimeout(() => editor.createNodeViews(), 0);
259
- }
260
- }
261
- componentWillUnmount() {
262
- const { editor } = this.props;
263
- if (!editor) {
264
- return;
265
- }
266
- if (!editor.isDestroyed) {
267
- editor.view.setProps({
268
- nodeViews: {},
269
- });
270
- }
271
- editor.contentComponent = null;
272
- if (!editor.options.element.firstChild) {
273
- return;
274
- }
275
- const newElement = document.createElement('div');
276
- newElement.appendChild(editor.options.element.firstChild);
277
- editor.setOptions({
278
- element: newElement,
279
- });
280
- }
281
- render() {
282
- return (React__default['default'].createElement(React__default['default'].Fragment, null,
283
- React__default['default'].createElement("div", { ref: this.editorContentRef }),
284
- React__default['default'].createElement(Portals, { renderers: this.state.renderers })));
285
- }
286
- }
287
- const EditorContent = React__default['default'].memo(PureEditorContent);
288
-
289
- const NodeViewWrapper = props => {
290
- const { onDragStart } = useReactNodeView();
291
- const Tag = props.as || 'div';
292
- return (React__default['default'].createElement(Tag, { className: props.className, "data-node-view-wrapper": "", onDragStart: onDragStart, style: { whiteSpace: 'normal' } }, props.children));
293
- };
294
-
295
- const NodeViewContent = props => {
296
- const Tag = props.as || 'div';
297
- return (React__default['default'].createElement(Tag, { className: props.className, "data-node-view-content": "", style: { whiteSpace: 'pre-wrap' } }));
298
- };
299
-
300
- exports.BubbleMenu = BubbleMenu;
301
- exports.Editor = Editor;
302
- exports.EditorContent = EditorContent;
303
- exports.FloatingMenu = FloatingMenu;
304
- exports.NodeViewContent = NodeViewContent;
305
- exports.NodeViewWrapper = NodeViewWrapper;
306
- exports.PureEditorContent = PureEditorContent;
307
- exports.ReactNodeViewRenderer = ReactNodeViewRenderer;
308
- exports.ReactRenderer = ReactRenderer;
309
- exports.useEditor = useEditor;
310
- Object.keys(core).forEach(function (k) {
311
- if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
312
- enumerable: true,
313
- get: function () {
314
- return core[k];
315
- }
316
- });
317
- });
318
- //# sourceMappingURL=tiptap-react.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tiptap-react.cjs.js","sources":["../src/BubbleMenu.tsx","../src/Editor.ts","../src/FloatingMenu.tsx","../src/useEditor.ts","../src/ReactRenderer.tsx","../src/useReactNodeView.ts","../src/ReactNodeViewRenderer.tsx","../src/EditorContent.tsx","../src/NodeViewWrapper.tsx","../src/NodeViewContent.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\n\nexport type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'> & {\n className?: string,\n}\n\nexport const BubbleMenu: React.FC<BubbleMenuProps> = props => {\n const element = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const { editor, tippyOptions } = props\n\n editor.registerPlugin(BubbleMenuPlugin({\n editor,\n element: element.current as HTMLElement,\n tippyOptions,\n }))\n\n return () => {\n editor.unregisterPlugin(BubbleMenuPluginKey)\n }\n }, [])\n\n return (\n <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>\n {props.children}\n </div>\n )\n}\n","import React from 'react'\nimport { Editor as CoreEditor } from '@tiptap/core'\nimport { EditorContentProps, EditorContentState } from './EditorContent'\n\nexport class Editor extends CoreEditor {\n public contentComponent: React.Component<EditorContentProps, EditorContentState> | null = null\n}\n","import React, { useEffect, useRef } from 'react'\nimport { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\n\nexport type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {\n className?: string,\n}\n\nexport const FloatingMenu: React.FC<FloatingMenuProps> = props => {\n const element = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const { editor, tippyOptions } = props\n\n editor.registerPlugin(FloatingMenuPlugin({\n editor,\n element: element.current as HTMLElement,\n tippyOptions,\n }))\n\n return () => {\n editor.unregisterPlugin(FloatingMenuPluginKey)\n }\n }, [])\n\n return (\n <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>\n {props.children}\n </div>\n )\n}\n","import { useState, useEffect } from 'react'\nimport { EditorOptions } from '@tiptap/core'\nimport { Editor } from './Editor'\n\nfunction useForceUpdate() {\n const [, setValue] = useState(0)\n\n return () => setValue(value => value + 1)\n}\n\nexport const useEditor = (options: Partial<EditorOptions> = {}) => {\n const [editor, setEditor] = useState<Editor | null>(null)\n const forceUpdate = useForceUpdate()\n\n useEffect(() => {\n const instance = new Editor(options)\n\n setEditor(instance)\n\n instance.on('transaction', forceUpdate)\n\n return () => {\n instance.destroy()\n }\n }, [])\n\n return editor\n}\n","import React from 'react'\nimport { AnyObject } from '@tiptap/core'\nimport { Editor } from './Editor'\n\nfunction isClassComponent(Component: any) {\n return !!(\n typeof Component === 'function'\n && Component.prototype\n && Component.prototype.isReactComponent\n )\n}\n\nexport interface ReactRendererOptions {\n editor: Editor,\n props?: AnyObject,\n as?: string,\n}\n\nexport class ReactRenderer {\n id: string\n\n editor: Editor\n\n component: any\n\n element: Element\n\n props: AnyObject\n\n reactElement: React.ReactNode\n\n ref: React.Component | null = null\n\n constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) {\n this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()\n this.component = component\n this.editor = editor\n this.props = props\n this.element = document.createElement(as)\n this.element.classList.add('react-renderer')\n this.render()\n }\n\n render(): void {\n const Component = this.component\n const props = this.props\n\n if (isClassComponent(Component)) {\n props.ref = (ref: React.Component) => {\n this.ref = ref\n }\n }\n\n this.reactElement = <Component {...props } />\n\n if (this.editor?.contentComponent) {\n this.editor.contentComponent.setState({\n renderers: this.editor.contentComponent.state.renderers.set(\n this.id,\n this,\n ),\n })\n }\n }\n\n updateProps(props: AnyObject = {}): void {\n this.props = {\n ...this.props,\n ...props,\n }\n\n this.render()\n }\n\n destroy(): void {\n if (this.editor?.contentComponent) {\n const { renderers } = this.editor.contentComponent.state\n\n renderers.delete(this.id)\n\n this.editor.contentComponent.setState({\n renderers,\n })\n }\n }\n}\n","import { createContext, useContext } from 'react'\n\nexport interface ReactNodeViewContextProps {\n onDragStart: (event: DragEvent) => void,\n}\n\nexport const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({\n onDragStart: undefined,\n})\n\nexport const useReactNodeView = () => useContext(ReactNodeViewContext)\n","import React from 'react'\nimport {\n NodeView,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererProps,\n} from '@tiptap/core'\nimport { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'\nimport { Node as ProseMirrorNode } from 'prosemirror-model'\nimport { Editor } from './Editor'\nimport { ReactRenderer } from './ReactRenderer'\nimport { ReactNodeViewContext } from './useReactNodeView'\n\ninterface ReactNodeViewRendererOptions {\n stopEvent: ((event: Event) => boolean) | null,\n update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,\n}\n\nclass ReactNodeView extends NodeView<React.FunctionComponent, Editor> {\n\n renderer!: ReactRenderer\n\n contentDOMElement!: Element | null\n\n mount() {\n const props: NodeViewProps = {\n editor: this.editor,\n node: this.node,\n decorations: this.decorations,\n selected: false,\n extension: this.extension,\n getPos: () => this.getPos(),\n updateAttributes: (attributes = {}) => this.updateAttributes(attributes),\n }\n\n if (!(this.component as any).displayName) {\n const capitalizeFirstChar = (string: string): string => {\n return string.charAt(0).toUpperCase() + string.substring(1)\n }\n\n this.component.displayName = capitalizeFirstChar(this.extension.name)\n }\n\n const ReactNodeViewProvider: React.FunctionComponent = componentProps => {\n const onDragStart = this.onDragStart.bind(this)\n const Component = this.component\n\n return (\n <ReactNodeViewContext.Provider value={{ onDragStart }}>\n <Component {...componentProps} />\n </ReactNodeViewContext.Provider>\n )\n }\n\n ReactNodeViewProvider.displayName = 'ReactNodeView'\n\n this.contentDOMElement = this.node.isLeaf\n ? null\n : document.createElement(this.node.isInline ? 'span' : 'div')\n\n this.renderer = new ReactRenderer(ReactNodeViewProvider, {\n editor: this.editor,\n props,\n as: this.node.isInline\n ? 'span'\n : 'div',\n })\n }\n\n get dom() {\n if (\n this.renderer.element.firstElementChild\n && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')\n ) {\n throw Error('Please use the NodeViewWrapper component for your node view.')\n }\n\n return this.renderer.element\n }\n\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n const contentElement = this.dom.querySelector('[data-node-view-content]')\n\n if (\n this.contentDOMElement\n && contentElement\n && !contentElement.contains(this.contentDOMElement)\n ) {\n contentElement.appendChild(this.contentDOMElement)\n }\n\n return this.contentDOMElement\n }\n\n update(node: ProseMirrorNode, decorations: Decoration[]) {\n if (typeof this.options.update === 'function') {\n return this.options.update(node, decorations)\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n if (node === this.node && this.decorations === decorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.renderer.updateProps({ node, decorations })\n\n return true\n }\n\n selectNode() {\n this.renderer.updateProps({\n selected: true,\n })\n }\n\n deselectNode() {\n this.renderer.updateProps({\n selected: false,\n })\n }\n\n destroy() {\n this.renderer.destroy()\n this.contentDOMElement = null\n }\n}\n\nexport function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {\n return (props: NodeViewRendererProps) => {\n // try to get the parent component\n // this is important for vue devtools to show the component hierarchy correctly\n // maybe it’s `undefined` because <editor-content> isn’t rendered yet\n if (!(props.editor as Editor).contentComponent) {\n return {}\n }\n\n return new ReactNodeView(component, props, options) as ProseMirrorNodeView\n }\n}\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Editor } from './Editor'\nimport { ReactRenderer } from './ReactRenderer'\n\nconst Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderers }) => {\n return (\n <>\n {Array.from(renderers).map(([key, renderer]) => {\n return ReactDOM.createPortal(\n renderer.reactElement,\n renderer.element,\n key,\n )\n })}\n </>\n )\n}\n\nexport interface EditorContentProps {\n editor: Editor | null,\n}\n\nexport interface EditorContentState {\n renderers: Map<string, ReactRenderer>\n}\n\nexport class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {\n editorContentRef: React.RefObject<any>\n\n constructor(props: EditorContentProps) {\n super(props)\n this.editorContentRef = React.createRef()\n\n this.state = {\n renderers: new Map(),\n }\n }\n\n componentDidMount() {\n this.init()\n }\n\n componentDidUpdate() {\n this.init()\n }\n\n init() {\n const { editor } = this.props\n\n if (editor && editor.options.element) {\n if (editor.contentComponent) {\n return\n }\n\n const element = this.editorContentRef.current\n\n element.appendChild(editor.options.element.firstChild)\n\n editor.setOptions({\n element,\n })\n\n editor.contentComponent = this\n\n // TODO: alternative to setTimeout?\n setTimeout(() => editor.createNodeViews(), 0)\n }\n }\n\n componentWillUnmount() {\n const { editor } = this.props\n\n if (!editor) {\n return\n }\n\n if (!editor.isDestroyed) {\n editor.view.setProps({\n nodeViews: {},\n })\n }\n\n editor.contentComponent = null\n\n if (!editor.options.element.firstChild) {\n return\n }\n\n const newElement = document.createElement('div')\n\n newElement.appendChild(editor.options.element.firstChild)\n\n editor.setOptions({\n element: newElement,\n })\n }\n\n render() {\n return (\n <>\n <div ref={this.editorContentRef} />\n <Portals renderers={this.state.renderers} />\n </>\n )\n }\n}\n\nexport const EditorContent = React.memo(PureEditorContent)\n","import React from 'react'\nimport { useReactNodeView } from './useReactNodeView'\n\nexport interface NodeViewWrapperProps {\n className?: string,\n as?: React.ElementType,\n}\n\nexport const NodeViewWrapper: React.FC<NodeViewWrapperProps> = props => {\n const { onDragStart } = useReactNodeView()\n const Tag = props.as || 'div'\n\n return (\n <Tag\n className={props.className}\n data-node-view-wrapper=\"\"\n onDragStart={onDragStart}\n style={{ whiteSpace: 'normal' }}\n >\n {props.children}\n </Tag>\n )\n}\n","import React from 'react'\n\nexport interface NodeViewContentProps {\n className?: string,\n as?: React.ElementType,\n}\n\nexport const NodeViewContent: React.FC<NodeViewContentProps> = props => {\n const Tag = props.as || 'div'\n\n return (\n <Tag\n className={props.className}\n data-node-view-content=\"\"\n style={{ whiteSpace: 'pre-wrap' }}\n />\n )\n}\n"],"names":["useRef","useEffect","BubbleMenuPlugin","BubbleMenuPluginKey","React","CoreEditor","FloatingMenuPlugin","FloatingMenuPluginKey","useState","createContext","useContext","NodeView","ReactDOM"],"mappings":"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"}
@@ -1,293 +0,0 @@
1
- import { Editor as Editor$1, NodeView } from '@tiptap/core';
2
- export * from '@tiptap/core';
3
- import React, { useRef, useEffect, useState, createContext, useContext } from 'react';
4
- import { BubbleMenuPlugin, BubbleMenuPluginKey } from '@tiptap/extension-bubble-menu';
5
- import { FloatingMenuPlugin, FloatingMenuPluginKey } from '@tiptap/extension-floating-menu';
6
- import ReactDOM from 'react-dom';
7
-
8
- const BubbleMenu = props => {
9
- const element = useRef(null);
10
- useEffect(() => {
11
- const { editor, tippyOptions } = props;
12
- editor.registerPlugin(BubbleMenuPlugin({
13
- editor,
14
- element: element.current,
15
- tippyOptions,
16
- }));
17
- return () => {
18
- editor.unregisterPlugin(BubbleMenuPluginKey);
19
- };
20
- }, []);
21
- return (React.createElement("div", { ref: element, className: props.className, style: { visibility: 'hidden' } }, props.children));
22
- };
23
-
24
- class Editor extends Editor$1 {
25
- constructor() {
26
- super(...arguments);
27
- this.contentComponent = null;
28
- }
29
- }
30
-
31
- const FloatingMenu = props => {
32
- const element = useRef(null);
33
- useEffect(() => {
34
- const { editor, tippyOptions } = props;
35
- editor.registerPlugin(FloatingMenuPlugin({
36
- editor,
37
- element: element.current,
38
- tippyOptions,
39
- }));
40
- return () => {
41
- editor.unregisterPlugin(FloatingMenuPluginKey);
42
- };
43
- }, []);
44
- return (React.createElement("div", { ref: element, className: props.className, style: { visibility: 'hidden' } }, props.children));
45
- };
46
-
47
- function useForceUpdate() {
48
- const [, setValue] = useState(0);
49
- return () => setValue(value => value + 1);
50
- }
51
- const useEditor = (options = {}) => {
52
- const [editor, setEditor] = useState(null);
53
- const forceUpdate = useForceUpdate();
54
- useEffect(() => {
55
- const instance = new Editor(options);
56
- setEditor(instance);
57
- instance.on('transaction', forceUpdate);
58
- return () => {
59
- instance.destroy();
60
- };
61
- }, []);
62
- return editor;
63
- };
64
-
65
- function isClassComponent(Component) {
66
- return !!(typeof Component === 'function'
67
- && Component.prototype
68
- && Component.prototype.isReactComponent);
69
- }
70
- class ReactRenderer {
71
- constructor(component, { editor, props = {}, as = 'div' }) {
72
- this.ref = null;
73
- this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
74
- this.component = component;
75
- this.editor = editor;
76
- this.props = props;
77
- this.element = document.createElement(as);
78
- this.element.classList.add('react-renderer');
79
- this.render();
80
- }
81
- render() {
82
- var _a;
83
- const Component = this.component;
84
- const props = this.props;
85
- if (isClassComponent(Component)) {
86
- props.ref = (ref) => {
87
- this.ref = ref;
88
- };
89
- }
90
- this.reactElement = React.createElement(Component, Object.assign({}, props));
91
- if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
92
- this.editor.contentComponent.setState({
93
- renderers: this.editor.contentComponent.state.renderers.set(this.id, this),
94
- });
95
- }
96
- }
97
- updateProps(props = {}) {
98
- this.props = {
99
- ...this.props,
100
- ...props,
101
- };
102
- this.render();
103
- }
104
- destroy() {
105
- var _a;
106
- if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
107
- const { renderers } = this.editor.contentComponent.state;
108
- renderers.delete(this.id);
109
- this.editor.contentComponent.setState({
110
- renderers,
111
- });
112
- }
113
- }
114
- }
115
-
116
- const ReactNodeViewContext = createContext({
117
- onDragStart: undefined,
118
- });
119
- const useReactNodeView = () => useContext(ReactNodeViewContext);
120
-
121
- class ReactNodeView extends NodeView {
122
- mount() {
123
- const props = {
124
- editor: this.editor,
125
- node: this.node,
126
- decorations: this.decorations,
127
- selected: false,
128
- extension: this.extension,
129
- getPos: () => this.getPos(),
130
- updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
131
- };
132
- if (!this.component.displayName) {
133
- const capitalizeFirstChar = (string) => {
134
- return string.charAt(0).toUpperCase() + string.substring(1);
135
- };
136
- this.component.displayName = capitalizeFirstChar(this.extension.name);
137
- }
138
- const ReactNodeViewProvider = componentProps => {
139
- const onDragStart = this.onDragStart.bind(this);
140
- const Component = this.component;
141
- return (React.createElement(ReactNodeViewContext.Provider, { value: { onDragStart } },
142
- React.createElement(Component, Object.assign({}, componentProps))));
143
- };
144
- ReactNodeViewProvider.displayName = 'ReactNodeView';
145
- this.contentDOMElement = this.node.isLeaf
146
- ? null
147
- : document.createElement(this.node.isInline ? 'span' : 'div');
148
- this.renderer = new ReactRenderer(ReactNodeViewProvider, {
149
- editor: this.editor,
150
- props,
151
- as: this.node.isInline
152
- ? 'span'
153
- : 'div',
154
- });
155
- }
156
- get dom() {
157
- var _a;
158
- if (this.renderer.element.firstElementChild
159
- && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-node-view-wrapper'))) {
160
- throw Error('Please use the NodeViewWrapper component for your node view.');
161
- }
162
- return this.renderer.element;
163
- }
164
- get contentDOM() {
165
- if (this.node.isLeaf) {
166
- return null;
167
- }
168
- const contentElement = this.dom.querySelector('[data-node-view-content]');
169
- if (this.contentDOMElement
170
- && contentElement
171
- && !contentElement.contains(this.contentDOMElement)) {
172
- contentElement.appendChild(this.contentDOMElement);
173
- }
174
- return this.contentDOMElement;
175
- }
176
- update(node, decorations) {
177
- if (typeof this.options.update === 'function') {
178
- return this.options.update(node, decorations);
179
- }
180
- if (node.type !== this.node.type) {
181
- return false;
182
- }
183
- if (node === this.node && this.decorations === decorations) {
184
- return true;
185
- }
186
- this.node = node;
187
- this.decorations = decorations;
188
- this.renderer.updateProps({ node, decorations });
189
- return true;
190
- }
191
- selectNode() {
192
- this.renderer.updateProps({
193
- selected: true,
194
- });
195
- }
196
- deselectNode() {
197
- this.renderer.updateProps({
198
- selected: false,
199
- });
200
- }
201
- destroy() {
202
- this.renderer.destroy();
203
- this.contentDOMElement = null;
204
- }
205
- }
206
- function ReactNodeViewRenderer(component, options) {
207
- return (props) => {
208
- // try to get the parent component
209
- // this is important for vue devtools to show the component hierarchy correctly
210
- // maybe it’s `undefined` because <editor-content> isn’t rendered yet
211
- if (!props.editor.contentComponent) {
212
- return {};
213
- }
214
- return new ReactNodeView(component, props, options);
215
- };
216
- }
217
-
218
- const Portals = ({ renderers }) => {
219
- return (React.createElement(React.Fragment, null, Array.from(renderers).map(([key, renderer]) => {
220
- return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
221
- })));
222
- };
223
- class PureEditorContent extends React.Component {
224
- constructor(props) {
225
- super(props);
226
- this.editorContentRef = React.createRef();
227
- this.state = {
228
- renderers: new Map(),
229
- };
230
- }
231
- componentDidMount() {
232
- this.init();
233
- }
234
- componentDidUpdate() {
235
- this.init();
236
- }
237
- init() {
238
- const { editor } = this.props;
239
- if (editor && editor.options.element) {
240
- if (editor.contentComponent) {
241
- return;
242
- }
243
- const element = this.editorContentRef.current;
244
- element.appendChild(editor.options.element.firstChild);
245
- editor.setOptions({
246
- element,
247
- });
248
- editor.contentComponent = this;
249
- // TODO: alternative to setTimeout?
250
- setTimeout(() => editor.createNodeViews(), 0);
251
- }
252
- }
253
- componentWillUnmount() {
254
- const { editor } = this.props;
255
- if (!editor) {
256
- return;
257
- }
258
- if (!editor.isDestroyed) {
259
- editor.view.setProps({
260
- nodeViews: {},
261
- });
262
- }
263
- editor.contentComponent = null;
264
- if (!editor.options.element.firstChild) {
265
- return;
266
- }
267
- const newElement = document.createElement('div');
268
- newElement.appendChild(editor.options.element.firstChild);
269
- editor.setOptions({
270
- element: newElement,
271
- });
272
- }
273
- render() {
274
- return (React.createElement(React.Fragment, null,
275
- React.createElement("div", { ref: this.editorContentRef }),
276
- React.createElement(Portals, { renderers: this.state.renderers })));
277
- }
278
- }
279
- const EditorContent = React.memo(PureEditorContent);
280
-
281
- const NodeViewWrapper = props => {
282
- const { onDragStart } = useReactNodeView();
283
- const Tag = props.as || 'div';
284
- return (React.createElement(Tag, { className: props.className, "data-node-view-wrapper": "", onDragStart: onDragStart, style: { whiteSpace: 'normal' } }, props.children));
285
- };
286
-
287
- const NodeViewContent = props => {
288
- const Tag = props.as || 'div';
289
- return (React.createElement(Tag, { className: props.className, "data-node-view-content": "", style: { whiteSpace: 'pre-wrap' } }));
290
- };
291
-
292
- export { BubbleMenu, Editor, EditorContent, FloatingMenu, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeViewRenderer, ReactRenderer, useEditor };
293
- //# sourceMappingURL=tiptap-react.esm.js.map