This is still the text editor you’re used to, but enriched with node views.
-This is editable. You can create a new component by pressing Mod+Enter.
-Did you see that? That’s a React component. We are really living in the future.
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/index.spec.ts b/demos/src/GuideNodeViews/ReactComponentContent/index.spec.ts new file mode 100644 index 0000000000..01abd389c2 --- /dev/null +++ b/demos/src/GuideNodeViews/ReactComponentContent/index.spec.ts @@ -0,0 +1,15 @@ +import { expect, test } from '@playwright/test' + +const demoPath = '/src/GuideNodeViews/ReactComponentContent/React/' + +test.describe('GuideNodeViews/ReactComponentContent/React', () => { + test.beforeEach(async ({ page }) => { + await page.goto(demoPath) + }) + + test('renders the initial NodeView content', async ({ page }) => { + await expect(page.locator('.tiptap .react-component .content')).toHaveText( + 'This is editable. You can create a new component by pressing Mod+Enter.', + ) + }) +}) diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue index 39d691703c..753fd6bafa 100644 --- a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue +++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue @@ -27,7 +27,7 @@ export default { This is still the text editor you’re used to, but enriched with node views.This is editable.
+ This is editable.Did you see that? That’s a Vue component. We are really living in the future. diff --git a/demos/src/GuideNodeViews/VueComponentContent/index.spec.ts b/demos/src/GuideNodeViews/VueComponentContent/index.spec.ts new file mode 100644 index 0000000000..68e86d0513 --- /dev/null +++ b/demos/src/GuideNodeViews/VueComponentContent/index.spec.ts @@ -0,0 +1,13 @@ +import { expect, test } from '@playwright/test' + +const demoPath = '/src/GuideNodeViews/VueComponentContent/Vue/' + +test.describe('GuideNodeViews/VueComponentContent/Vue', () => { + test.beforeEach(async ({ page }) => { + await page.goto(demoPath) + }) + + test('renders the initial NodeView content', async ({ page }) => { + await expect(page.locator('.tiptap .vue-component .content')).toHaveText('This is editable.') + }) +}) diff --git a/packages/react/src/ReactNodeViewRenderer.spec.ts b/packages/react/src/ReactNodeViewRenderer.spec.ts index c1f27cae68..96e48a6673 100644 --- a/packages/react/src/ReactNodeViewRenderer.spec.ts +++ b/packages/react/src/ReactNodeViewRenderer.spec.ts @@ -86,6 +86,16 @@ const ItemComponent = () => { return React.createElement(NodeViewWrapper, null, React.createElement(NodeViewContent)) } +const ReactParagraphComponent = () => { + return React.createElement(NodeViewWrapper, null, React.createElement(NodeViewContent)) +} + +const ReactParagraph = Paragraph.extend({ + addNodeView() { + return ReactNodeViewRenderer(ReactParagraphComponent) + }, +}) + const Container = Node.create({ name: 'container', group: 'block', @@ -137,6 +147,13 @@ const createEditorWithContainers = () => { }) } +const createEditorWithReactParagraph = () => { + return new Editor({ + extensions: [Document, ReactParagraph, Text], + content: '
Hello
', + }) +} + const flushMicrotasks = async () => { await act(async () => { await Promise.resolve() @@ -172,6 +189,36 @@ describe('ReactNodeViewRenderer', () => { editor.destroy() }) + it('keeps new React paragraph content connected while its portal is queued', async () => { + const editor = createEditorWithReactParagraph() + const { container } = render(React.createElement(EditorContent, { editor })) + + await flushMicrotasks() + + editor.commands.setTextSelection(6) + editor.commands.splitBlock() + + const secondParagraphPosition = editor.state.doc.firstChild!.nodeSize + + expect(editor.state.selection.from).toBe(secondParagraphPosition + 1) + + const contentElements = container.querySelectorAll('[data-node-view-content-react]') + + expect(contentElements).toHaveLength(2) + expect(contentElements[1].isConnected).toBe(true) + + editor.commands.insertContent('Second') + + expect(editor.state.doc.child(0).textContent).toBe('Hello') + expect(editor.state.doc.child(1).textContent).toBe('Second') + + await flushMicrotasks() + + expect(contentElements[1].parentElement?.hasAttribute('data-node-view-content')).toBe(true) + + editor.destroy() + }) + it('resolves getPos to undefined while the view desc is detached mid-update', async () => { const editor = createEditorWithContainers() const { container } = render(React.createElement(EditorContent, { editor })) diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 462a4b23c9..be88879f3a 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -118,11 +118,12 @@ export class ReactNodeView< const contentTarget = this.dom.querySelector('[data-node-view-content]') - if (!contentTarget) { - return + if (contentTarget) { + contentTarget.appendChild(this.contentDOMElement) + } else { + // ProseMirror maps the selection before the queued portal render. + this.dom.appendChild(this.contentDOMElement) } - - contentTarget.appendChild(this.contentDOMElement) } if (this.options.trackNodeViewPosition) {