ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

wip react renderer

Browse Source
This commit is contained in:
Philipp Kühn
2021-03-12 21:21:13 +01:00
parent d9377f9085
commit bc60a91904
5 changed files with 412 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/src/demos/Examples/Default/React/index.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import { defaultExtensions } from '@tiptap/starter-kit'
import Paragraph from '@tiptap/extension-paragraph'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
@@ -125,38 +126,49 @@ const MenuBar = ({ editor }) => {
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), Paragraph.extend({
addNodeView() {
return ReactNodeViewRenderer(({ selected }) => {
console.log({selected})
return (
<div className="paragraph">noooode view {selected}</div>
)
})
}
}),
...defaultExtensions().filter(item => item.config.name !== 'paragraph'),
], ],
content: ` content: `<p>test</p>`,
<h2> // content: `
Hi there, // <h2>
</h2> // Hi there,
<p> // </h2>
this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: // <p>
</p> // this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
<ul> // </p>
<li> // <ul>
That’s a bullet list with one … // <li>
</li> // That’s a bullet list with one …
<li> // </li>
… or two list items. // <li>
</li> // … or two list items.
</ul> // </li>
<p> // </ul>
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block: // <p>
</p> // Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
<pre><code class="language-css">body { // </p>
display: none; // <pre><code class="language-css">body {
}</code></pre> // display: none;
<p> // }</code></pre>
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. // <p>
</p> // I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
<blockquote> // </p>
Wow, that’s amazing. Good work, boy! 👏 // <blockquote>
<br /> // Wow, that’s amazing. Good work, boy! 👏
— Mom // <br />
</blockquote> // — Mom
`, // </blockquote>
// `,
}) })
return ( return (

91
packages/react/src/EditorContent.tsx
View File

@@ -1,11 +1,67 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import { Editor } from './Editor' import { Editor } from './Editor'
type EditorContentProps = { type EditorContentProps = {
editor: Editor | null editor: Editor | null
} }
export class PureEditorContent extends React.Component<EditorContentProps, EditorContentProps> { // const Portals = ({ editor }: { editor: Editor | null }) => {
// if (!editor?.contentComponent) {
// return null
// }
// console.log('render portals')
// return (
// <div>portaaals</div>
// )
// }
const Portals = ({ renderers }: { renderers: Map<any, any> }) => {
return (
<div>
{Array.from(renderers).map(([key, renderer]) => {
// console.log({renderer})
// return (
// <div key={key}>{value}</div>
// )
// return React.createElement(renderer.component)
// return (
// <React.Fragment key={renderer.id}>
// {ReactDOM.createPortal(
// React.createElement(renderer.component),
// renderer.teleportElement,
// )}
// </React.Fragment>
// )
return (
<React.Fragment key={renderer.id}>
{renderer.bla}
</React.Fragment>
)
// return ReactDOM.createPortal(
// React.createElement(renderer.component),
// renderer.teleportElement,
// )
})}
</div>
)
}
// const Content = React.memo(({ reference }: { reference: React.RefObject<any> }) => {
// return (
// <div ref={reference} />
// )
// })
export class PureEditorContent extends React.Component<EditorContentProps, any> {
editorContentRef: React.RefObject<any> editorContentRef: React.RefObject<any>
constructor(props: EditorContentProps) { constructor(props: EditorContentProps) {
@@ -13,14 +69,33 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
this.editorContentRef = React.createRef() this.editorContentRef = React.createRef()
this.state = { this.state = {
editor: this.props.editor 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() { componentDidUpdate() {
const { editor } = this.props const { editor } = this.props
if (editor && editor.options.element) { if (editor && editor.options.element) {
if (editor.contentComponent) {
return
}
// this.setState({
// editor,
// })
console.log('UPDATE')
const element = this.editorContentRef.current const element = this.editorContentRef.current
element.appendChild(editor.options.element.firstChild) element.appendChild(editor.options.element.firstChild)
@@ -39,10 +114,20 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
} }
render() { render() {
console.log('render', this.state)
// console.log('render', this.props.editor, this.state.editor)
return ( return (
<>
<div ref={this.editorContentRef} /> <div ref={this.editorContentRef} />
{/* <Content reference={this.editorContentRef} /> */}
{/* <Portals editor={this.props.editor} /> */}
<Portals renderers={this.state.renderers} />
</>
) )
} }
} }
export const EditorContent = React.memo(PureEditorContent); export const EditorContent = React.memo(PureEditorContent)
// export const EditorContent = PureEditorContent

374
packages/react/src/ReactNodeViewRenderer.ts
View File

@@ -1,79 +1,105 @@
// // @ts-nocheck // @ts-nocheck
// import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core' import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
// import { Decoration, NodeView } from 'prosemirror-view' import { Decoration, NodeView } from 'prosemirror-view'
// import { NodeSelection } from 'prosemirror-state' import { NodeSelection } from 'prosemirror-state'
// import { Node as ProseMirrorNode } from 'prosemirror-model' import { Node as ProseMirrorNode } from 'prosemirror-model'
// import React from 'react' import React from 'react'
// import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
// import { Editor } from './Editor' import { Editor } from './Editor'
// import { ReactRenderer } from './ReactRenderer' import { ReactRenderer } from './ReactRenderer'
// interface ReactNodeViewRendererOptions { interface ReactNodeViewRendererOptions {
// stopEvent: ((event: Event) => boolean) | null, stopEvent: ((event: Event) => boolean) | null,
// update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null, update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
}
class ReactNodeView implements NodeView {
renderer!: ReactRenderer
editor: Editor
extension!: Node
node!: ProseMirrorNode
decorations!: Decoration[]
getPos!: any
isDragging = false
options: ReactNodeViewRendererOptions = {
stopEvent: null,
update: null,
}
domWrapper: Element
contentDOMWrapper: Element
constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
this.options = { ...this.options, ...options }
this.editor = props.editor as Editor
this.extension = props.extension
this.node = props.node
this.getPos = props.getPos
this.domWrapper = document.createElement('div')
this.domWrapper.classList.add('dom-wrapper')
this.contentDOMWrapper = document.createElement('div')
this.contentDOMWrapper.classList.add('content-dom-wrapper')
this.mount(component)
}
mount(component: any) {
const props = {
editor: this.editor,
node: this.node,
decorations: this.decorations,
selected: false,
extension: this.extension,
getPos: () => this.getPos(),
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
}
if (!component.displayName) {
component.displayName = this.extension.config.name
}
this.renderer = new ReactRenderer(component, {
editor: this.editor,
props,
})
}
get dom() {
return this.renderer.element
// return this.domWrapper
// if (!this.renderer.element) {
// return null
// } // }
// class ReactNodeView implements NodeView { // if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
// throw Error('Please use the NodeViewWrapper component for your node view.')
// renderer!: ReactRenderer
// editor: Editor
// extension!: Node
// node!: ProseMirrorNode
// decorations!: Decoration[]
// getPos!: any
// isDragging = false
// options: ReactNodeViewRendererOptions = {
// stopEvent: null,
// update: null,
// } // }
// constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
// this.options = { ...this.options, ...options }
// this.editor = props.editor as Editor
// this.extension = props.extension
// this.node = props.node
// this.getPos = props.getPos
// this.mount(component)
// }
// mount(component: any) {
// const props = {}
// if (!component.displayName) {
// component.displayName = this.extension.config.name
// }
// this.renderer = new ReactRenderer(component, {
// editor: this.editor,
// props,
// })
// }
// get dom() {
// // if (!this.renderer.element) {
// // return null
// // }
// // if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
// // throw Error('Please use the NodeViewWrapper component for your node view.')
// // }
// return this.renderer.element // return this.renderer.element
// } }
// get contentDOM() { get contentDOM() {
// // console.log(this.dom) // return this.renderer.element
// // return null return undefined
// // if (!this.renderer.element) { // return this.renderer.element
// // return null // return this.contentDOMWrapper
// // }
// console.log(this.dom)
// return null
// if (!this.renderer.element) {
// return null
// }
// const hasContent = !this.node.type.isAtom // const hasContent = !this.node.type.isAtom
@@ -84,125 +110,137 @@
// const contentElement = this.dom.querySelector('[data-node-view-content]') // const contentElement = this.dom.querySelector('[data-node-view-content]')
// return contentElement || this.dom // return contentElement || this.dom
// } }
// stopEvent(event: Event) { stopEvent(event: Event) {
// if (typeof this.options.stopEvent === 'function') { if (typeof this.options.stopEvent === 'function') {
// return this.options.stopEvent(event) return this.options.stopEvent(event)
// } }
// const target = (event.target as HTMLElement) const target = (event.target as HTMLElement)
// const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target) const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
// // ignore all events from child nodes // ignore all events from child nodes
// if (!isInElement) { if (!isInElement) {
// return false return false
// } }
// const { isEditable } = this.editor const { isEditable } = this.editor
// const { isDragging } = this const { isDragging } = this
// const isDraggable = !!this.node.type.spec.draggable const isDraggable = !!this.node.type.spec.draggable
// const isSelectable = NodeSelection.isSelectable(this.node) const isSelectable = NodeSelection.isSelectable(this.node)
// const isCopyEvent = event.type === 'copy' const isCopyEvent = event.type === 'copy'
// const isPasteEvent = event.type === 'paste' const isPasteEvent = event.type === 'paste'
// const isCutEvent = event.type === 'cut' const isCutEvent = event.type === 'cut'
// const isClickEvent = event.type === 'mousedown' const isClickEvent = event.type === 'mousedown'
// const isDragEvent = event.type.startsWith('drag') || event.type === 'drop' const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
// // ProseMirror tries to drag selectable nodes // ProseMirror tries to drag selectable nodes
// // even if `draggable` is set to `false` // even if `draggable` is set to `false`
// // this fix prevents that // this fix prevents that
// if (!isDraggable && isSelectable && isDragEvent) { if (!isDraggable && isSelectable && isDragEvent) {
// event.preventDefault() event.preventDefault()
// } }
// if (isDraggable && isDragEvent && !isDragging) { if (isDraggable && isDragEvent && !isDragging) {
// event.preventDefault() event.preventDefault()
// return false return false
// } }
// // we have to store that dragging started // we have to store that dragging started
// if (isDraggable && isEditable && !isDragging && isClickEvent) { if (isDraggable && isEditable && !isDragging && isClickEvent) {
// const dragHandle = target.closest('[data-drag-handle]') const dragHandle = target.closest('[data-drag-handle]')
// const isValidDragHandle = dragHandle const isValidDragHandle = dragHandle
// && (this.dom === dragHandle || (this.dom.contains(dragHandle))) && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
// if (isValidDragHandle) { if (isValidDragHandle) {
// this.isDragging = true this.isDragging = true
// document.addEventListener('dragend', () => { document.addEventListener('dragend', () => {
// this.isDragging = false this.isDragging = false
// }, { once: true }) }, { once: true })
// } }
// } }
// // these events are handled by prosemirror // these events are handled by prosemirror
// if ( if (
// isDragging isDragging
// || isCopyEvent || isCopyEvent
// || isPasteEvent || isPasteEvent
// || isCutEvent || isCutEvent
// || (isClickEvent && isSelectable) || (isClickEvent && isSelectable)
// ) { ) {
// return false return false
// } }
// return true return true
// } }
// ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) { ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
// if (mutation.type === 'selection') { if (mutation.type === 'selection') {
// if (this.node.isLeaf) { if (this.node.isLeaf) {
// return true return true
// } }
// return false return false
// } }
// if (!this.contentDOM) { if (!this.contentDOM) {
// return true return true
// } }
// const contentDOMHasChanged = !this.contentDOM.contains(mutation.target) const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
// || this.contentDOM === mutation.target || this.contentDOM === mutation.target
// return contentDOMHasChanged return contentDOMHasChanged
// } }
// destroy() { destroy() {
// this.renderer.destroy() this.renderer.destroy()
// } }
// update(node: ProseMirrorNode, decorations: Decoration[]) { update(node: ProseMirrorNode, decorations: Decoration[]) {
// if (typeof this.options.update === 'function') { if (typeof this.options.update === 'function') {
// return this.options.update(node, decorations) return this.options.update(node, decorations)
// } }
// if (node.type !== this.node.type) { if (node.type !== this.node.type) {
// return false return false
// } }
// if (node === this.node && this.decorations === decorations) { if (node === this.node && this.decorations === decorations) {
// return true return true
// } }
// this.node = node this.node = node
// this.decorations = decorations this.decorations = decorations
// // this.renderer.updateProps({ node, decorations }) this.renderer.updateProps({ node, decorations })
// this.renderer.render() this.renderer.render()
// return true return true
// } }
// }
// export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer { selectNode() {
// return (props: NodeViewRendererProps) => { this.renderer.updateProps({
// // try to get the parent component selected: true,
// // this is important for vue devtools to show the component hierarchy correctly })
// // maybe it’s `undefined` because <editor-content> isn’t rendered yet }
// if (!(props.editor as Editor).contentComponent) {
// return {}
// }
// return new ReactNodeView(component, props, options) as NodeView deselectNode() {
// } this.renderer.updateProps({
// } selected: false,
})
}
}
export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {
return (props: NodeViewRendererProps) => {
// try to get the parent component
// this is important for vue devtools to show the component hierarchy correctly
// maybe it’s `undefined` because <editor-content> isn’t rendered yet
if (!(props.editor as Editor).contentComponent) {
return {}
}
return new ReactNodeView(component, props, options) as NodeView
}
}

113
packages/react/src/ReactRenderer.ts
View File

@@ -1,58 +1,91 @@
// // @ts-nocheck // @ts-nocheck
// import React from 'react' import React from 'react'
// import { render, unmountComponentAtNode } from 'react-dom' import ReactDOM, { render, unmountComponentAtNode } from 'react-dom'
// import { Editor } from './Editor' import { Editor } from './Editor'
// export interface VueRendererOptions { export interface VueRendererOptions {
// as?: string; as?: string;
// editor: Editor; editor: Editor;
// props?: { [key: string]: any }; props?: { [key: string]: any };
// } }
// export class ReactRenderer { export class ReactRenderer {
// id: string id: string
// editor: Editor editor: Editor
// component: any component: any
// teleportElement: Element teleportElement: Element
// element: Element element: Element
// props: { [key: string]: any } props: { [key: string]: any }
// constructor(component: any, { props = {}, editor }: VueRendererOptions) { constructor(component: any, { props = {}, editor }: VueRendererOptions) {
// this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString() this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
// this.component = component this.component = component
// this.editor = editor this.editor = editor
// this.props = props this.props = props
// this.teleportElement = document.createElement('div') this.teleportElement = document.createElement('div')
// // this.teleportElement.setAttribute('data-bla', '') this.teleportElement.classList.add('teleport-element')
// // render(React.createElement(component), this.teleportElement) this.element = this.teleportElement
// // render(React.createElement(component), this.teleportElement)
// this.teleportElement.setAttribute('data-bla', '')
// render(React.createElement(component), this.teleportElement)
// render(React.createElement(component), this.teleportElement)
// this.render() // this.render()
// // this.element = this.teleportElement.firstElementChild as Element // // this.element = this.teleportElement.firstElementChild as Element
// this.element = this.teleportElement
// }
// render() { console.log({ props })
// render(React.createElement(this.component), this.teleportElement)
// }
// updateProps(props: { [key: string]: any } = {}) { // this.bla = ReactDOM.createPortal(
// // TODO // React.createElement(this.component, props),
// } // this.teleportElement,
// )
// destroy() { this.bla = React.createElement(this.component, props)
// // TODO
// // console.log('DESTROY', { bla: this.teleportElement }) // console.log({ bla })
// // console.log(document.querySelector('[data-bla]'))
if (this.editor?.contentComponent) {
this.editor.contentComponent.setState({
renderers: this.editor.contentComponent.state.renderers.set(
this.id,
this,
),
})
}
}
render() {
render(React.createElement(this.component), this.teleportElement)
}
updateProps(props: { [key: string]: any } = {}) {
// TODO
console.log('update props', { props })
}
destroy() {
// TODO
// console.log('DESTROY', { bla: this.teleportElement })
// console.log(document.querySelector('[data-bla]'))
// unmountComponentAtNode(this.teleportElement) // unmountComponentAtNode(this.teleportElement)
// // unmountComponentAtNode(document.querySelector('[data-bla]')) // unmountComponentAtNode(document.querySelector('[data-bla]'))
// }
// } if (this.editor?.contentComponent) {
const { renderers } = this.editor.contentComponent.state
renderers.delete(this.id)
this.editor.contentComponent.setState({
renderers,
})
}
}
}

4
packages/react/src/index.ts
View File

@@ -2,6 +2,6 @@
export * from '@tiptap/core' export * from '@tiptap/core'
export { Editor } from './Editor' export { Editor } from './Editor'
export * from './useEditor' export * from './useEditor'
// export * from './ReactRenderer' export * from './ReactRenderer'
// export * from './ReactNodeViewRenderer' export * from './ReactNodeViewRenderer'
export * from './EditorContent' export * from './EditorContent'