From 5e9a0d4225efc5668b5ca545be106d5040bebd13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sun, 14 Mar 2021 16:30:06 +0100 Subject: [PATCH] add basic react nodeviewrenderer --- .../demos/Examples/Default/React/index.jsx | 31 +++++++--- packages/react/src/EditorContent.tsx | 60 ++----------------- packages/react/src/NodeViewContent.tsx | 18 ++++++ packages/react/src/NodeViewWrapper.tsx | 23 +++++++ packages/react/src/ReactNodeViewRenderer.ts | 21 ++++++- packages/react/src/ReactRenderer.ts | 33 +++++++--- packages/react/src/index.ts | 2 + tsconfig.json | 3 +- 8 files changed, 118 insertions(+), 73 deletions(-) create mode 100644 packages/react/src/NodeViewContent.tsx create mode 100644 packages/react/src/NodeViewWrapper.tsx diff --git a/docs/src/demos/Examples/Default/React/index.jsx b/docs/src/demos/Examples/Default/React/index.jsx index b54f9e66..d42e7145 100644 --- a/docs/src/demos/Examples/Default/React/index.jsx +++ b/docs/src/demos/Examples/Default/React/index.jsx @@ -1,6 +1,7 @@ import React from 'react' -import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react' +import { useEditor, EditorContent, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react' import { defaultExtensions } from '@tiptap/starter-kit' +import Heading from '@tiptap/extension-heading' import Paragraph from '@tiptap/extension-paragraph' import './styles.scss' @@ -126,19 +127,35 @@ const MenuBar = ({ editor }) => { export default () => { const editor = useEditor({ extensions: [ - Paragraph.extend({ + ...defaultExtensions().filter(item => item.config.name !== 'heading'), + Heading.extend({ + draggable: true, addNodeView() { - return ReactNodeViewRenderer(({ selected }) => { - console.log({selected}) + return ReactNodeViewRenderer((props) => { + // console.log({props}) return ( -
noooode view {selected}
+ +
+ ⠿ + +
+ ) }) } }), - ...defaultExtensions().filter(item => item.config.name !== 'paragraph'), + ], - content: `

test

`, + content: ` +

h1

+

h2

+

paragraph

+ `, // content: ` //

// Hi there, diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx index cf86bd0b..8127d2d5 100644 --- a/packages/react/src/EditorContent.tsx +++ b/packages/react/src/EditorContent.tsx @@ -6,50 +6,15 @@ type EditorContentProps = { editor: Editor | null } -// const Portals = ({ editor }: { editor: Editor | null }) => { -// if (!editor?.contentComponent) { -// return null -// } - -// console.log('render portals') - -// return ( -//
portaaals
-// ) -// } - const Portals = ({ renderers }: { renderers: Map }) => { return (
{Array.from(renderers).map(([key, renderer]) => { - - // console.log({renderer}) - // return ( - //
{value}
- // ) - - // return React.createElement(renderer.component) - - - // return ( - // - // {ReactDOM.createPortal( - // React.createElement(renderer.component), - // renderer.teleportElement, - // )} - // - // ) - - return ( - - {renderer.bla} - + return ReactDOM.createPortal( + renderer.comp, + renderer.teleportElement, + renderer.id, ) - - // return ReactDOM.createPortal( - // React.createElement(renderer.component), - // renderer.teleportElement, - // ) })}
) @@ -72,14 +37,6 @@ export class PureEditorContent extends React.Component editor: this.props.editor, renderers: new Map(), } - - // setInterval(() => { - // if (this.props?.editor?.contentComponent) { - // this.props.editor.contentComponent.setState({ - // renderers: this.state.renderers.set(Math.random(), Math.random()) - // }) - // } - // }, 1000) } componentDidUpdate() { @@ -94,8 +51,6 @@ export class PureEditorContent extends React.Component // editor, // }) - console.log('UPDATE') - const element = this.editorContentRef.current element.appendChild(editor.options.element.firstChild) @@ -114,14 +69,11 @@ export class PureEditorContent extends React.Component } render() { - console.log('render', this.state) + // console.log('render', this.state) // console.log('render', this.props.editor, this.state.editor) return ( <>
- {/* */} - {/* */} - ) @@ -129,5 +81,3 @@ export class PureEditorContent extends React.Component } export const EditorContent = React.memo(PureEditorContent) - -// export const EditorContent = PureEditorContent diff --git a/packages/react/src/NodeViewContent.tsx b/packages/react/src/NodeViewContent.tsx new file mode 100644 index 00000000..1a7eeb98 --- /dev/null +++ b/packages/react/src/NodeViewContent.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +export const NodeViewContent: React.FC = props => { + + // TODO + const isEditable = true + + return ( +
+ ) + +} diff --git a/packages/react/src/NodeViewWrapper.tsx b/packages/react/src/NodeViewWrapper.tsx new file mode 100644 index 00000000..d200119a --- /dev/null +++ b/packages/react/src/NodeViewWrapper.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +export const NodeViewWrapper: React.FC = props => { + + // TODO + const onDragStart = () => { + console.log('drag start') + } + + return ( +
+ {props.children} +
+ ) + +} diff --git a/packages/react/src/ReactNodeViewRenderer.ts b/packages/react/src/ReactNodeViewRenderer.ts index f1d6383b..c4c0baaf 100644 --- a/packages/react/src/ReactNodeViewRenderer.ts +++ b/packages/react/src/ReactNodeViewRenderer.ts @@ -72,11 +72,25 @@ class ReactNodeView implements NodeView { editor: this.editor, props, }) + + // console.log(this.renderer.element.firstChild) + + this.domWrapper.appendChild(this.renderer.element) + + const contentElement = this.renderer.element.querySelector('[data-node-view-content]') + + // console.log({ contentElement }) + + contentElement.appendChild(this.contentDOMWrapper) + + // this.renderer.element.firstChild?.appendChild(this.contentDOMWrapper) + // this.domWrapper.appendChild(this.contentDOMWrapper) } get dom() { - return this.renderer.element - // return this.domWrapper + // return this.renderer.element + // return this.renderer.element.firstChild + return this.domWrapper // if (!this.renderer.element) { // return null @@ -90,6 +104,7 @@ class ReactNodeView implements NodeView { } get contentDOM() { + return this.contentDOMWrapper // return this.renderer.element return undefined // return this.renderer.element @@ -196,6 +211,8 @@ class ReactNodeView implements NodeView { destroy() { this.renderer.destroy() + this.domWrapper = undefined + this.contentDOMWrapper = undefined } update(node: ProseMirrorNode, decorations: Decoration[]) { diff --git a/packages/react/src/ReactRenderer.ts b/packages/react/src/ReactRenderer.ts index 98341d71..b5bd0fef 100644 --- a/packages/react/src/ReactRenderer.ts +++ b/packages/react/src/ReactRenderer.ts @@ -40,16 +40,37 @@ export class ReactRenderer { // this.render() // // this.element = this.teleportElement.firstElementChild as Element - console.log({ props }) + // console.log({ props }) // this.bla = ReactDOM.createPortal( // React.createElement(this.component, props), // this.teleportElement, // ) + this.render() + // this.comp = React.createElement(this.component, { foo: 1 }) - this.bla = React.createElement(this.component, props) + // // this.bla = React.createElement(this.component, props) - // console.log({ bla }) + // // console.log({ bla }) + + // if (this.editor?.contentComponent) { + // this.editor.contentComponent.setState({ + // renderers: this.editor.contentComponent.state.renderers.set( + // this.id, + // this, + // ), + // }) + // } + } + + // get comp() { + // console.log('get comp') + // return React.createElement(this.component, { foo: 1 }) + // } + + render() { + this.comp = React.createElement(this.component, { foo: 1 }) + // render(React.createElement(this.component), this.teleportElement) if (this.editor?.contentComponent) { this.editor.contentComponent.setState({ @@ -61,13 +82,9 @@ export class ReactRenderer { } } - render() { - render(React.createElement(this.component), this.teleportElement) - } - updateProps(props: { [key: string]: any } = {}) { // TODO - console.log('update props', { props }) + // console.log('update props', { props }) } destroy() { diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 27e45903..58528a95 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -5,3 +5,5 @@ export * from './useEditor' export * from './ReactRenderer' export * from './ReactNodeViewRenderer' export * from './EditorContent' +export * from './NodeViewWrapper' +export * from './NodeViewContent' diff --git a/tsconfig.json b/tsconfig.json index 9700a48c..fcd16506 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,8 @@ "./shims/vue.d.ts" ], "include": [ - "**/*.ts" + "**/*.ts", + "**/*.tsx" ], "exclude": [ "**/node_modules",