refactoring
This commit is contained in:
Philipp Kühn
@@ -1,10 +1,16 @@
|
||||
import React from 'react'
|
||||
import { Editor } from './Editor'
|
||||
|
||||
export class PureEditorContent extends React.Component {
|
||||
constructor(props) {
|
||||
type EditorContentProps = {
|
||||
editor: Editor | null
|
||||
}
|
||||
|
||||
export class PureEditorContent extends React.Component<EditorContentProps, EditorContentProps> {
|
||||
editorContentRef: React.RefObject<any>
|
||||
|
||||
constructor(props: EditorContentProps) {
|
||||
super(props)
|
||||
this.editorContentRef = React.createRef()
|
||||
this.editorPortalRef = React.createRef()
|
||||
|
||||
this.state = {
|
||||
editor: this.props.editor
|
||||
@@ -1,208 +1,208 @@
|
||||
// @ts-nocheck
|
||||
import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
|
||||
import { Decoration, NodeView } from 'prosemirror-view'
|
||||
import { NodeSelection } from 'prosemirror-state'
|
||||
import { Node as ProseMirrorNode } from 'prosemirror-model'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Editor } from './Editor'
|
||||
import { ReactRenderer } from './ReactRenderer'
|
||||
// // @ts-nocheck
|
||||
// import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
|
||||
// import { Decoration, NodeView } from 'prosemirror-view'
|
||||
// import { NodeSelection } from 'prosemirror-state'
|
||||
// import { Node as ProseMirrorNode } from 'prosemirror-model'
|
||||
// import React from 'react'
|
||||
// import ReactDOM from 'react-dom'
|
||||
// import { Editor } from './Editor'
|
||||
// import { ReactRenderer } from './ReactRenderer'
|
||||
|
||||
interface ReactNodeViewRendererOptions {
|
||||
stopEvent: ((event: Event) => boolean) | null,
|
||||
update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
|
||||
}
|
||||
// interface ReactNodeViewRendererOptions {
|
||||
// stopEvent: ((event: Event) => boolean) | null,
|
||||
// update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
|
||||
// }
|
||||
|
||||
class ReactNodeView implements NodeView {
|
||||
// class ReactNodeView implements NodeView {
|
||||
|
||||
renderer!: ReactRenderer
|
||||
// renderer!: ReactRenderer
|
||||
|
||||
editor: Editor
|
||||
// editor: Editor
|
||||
|
||||
extension!: Node
|
||||
// extension!: Node
|
||||
|
||||
node!: ProseMirrorNode
|
||||
// node!: ProseMirrorNode
|
||||
|
||||
decorations!: Decoration[]
|
||||
// decorations!: Decoration[]
|
||||
|
||||
getPos!: any
|
||||
// getPos!: any
|
||||
|
||||
isDragging = false
|
||||
// isDragging = false
|
||||
|
||||
options: ReactNodeViewRendererOptions = {
|
||||
stopEvent: null,
|
||||
update: null,
|
||||
}
|
||||
// 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)
|
||||
}
|
||||
// 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 = {}
|
||||
// mount(component: any) {
|
||||
// const props = {}
|
||||
|
||||
if (!component.displayName) {
|
||||
component.displayName = this.extension.config.name
|
||||
}
|
||||
// if (!component.displayName) {
|
||||
// component.displayName = this.extension.config.name
|
||||
// }
|
||||
|
||||
this.renderer = new ReactRenderer(component, {
|
||||
editor: this.editor,
|
||||
props,
|
||||
})
|
||||
}
|
||||
// this.renderer = new ReactRenderer(component, {
|
||||
// editor: this.editor,
|
||||
// props,
|
||||
// })
|
||||
// }
|
||||
|
||||
get dom() {
|
||||
// if (!this.renderer.element) {
|
||||
// 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
|
||||
// }
|
||||
|
||||
// get contentDOM() {
|
||||
// // console.log(this.dom)
|
||||
// // return null
|
||||
// // if (!this.renderer.element) {
|
||||
// // return null
|
||||
// // }
|
||||
|
||||
// const hasContent = !this.node.type.isAtom
|
||||
|
||||
// if (!hasContent) {
|
||||
// return null
|
||||
// }
|
||||
|
||||
// if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
|
||||
// throw Error('Please use the NodeViewWrapper component for your node view.')
|
||||
// const contentElement = this.dom.querySelector('[data-node-view-content]')
|
||||
|
||||
// return contentElement || this.dom
|
||||
// }
|
||||
|
||||
return this.renderer.element
|
||||
}
|
||||
|
||||
get contentDOM() {
|
||||
// console.log(this.dom)
|
||||
// return null
|
||||
// if (!this.renderer.element) {
|
||||
// return null
|
||||
// stopEvent(event: Event) {
|
||||
// if (typeof this.options.stopEvent === 'function') {
|
||||
// return this.options.stopEvent(event)
|
||||
// }
|
||||
|
||||
const hasContent = !this.node.type.isAtom
|
||||
// const target = (event.target as HTMLElement)
|
||||
// const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
|
||||
|
||||
if (!hasContent) {
|
||||
return null
|
||||
}
|
||||
// // ignore all events from child nodes
|
||||
// if (!isInElement) {
|
||||
// return false
|
||||
// }
|
||||
|
||||
const contentElement = this.dom.querySelector('[data-node-view-content]')
|
||||
// const { isEditable } = this.editor
|
||||
// const { isDragging } = this
|
||||
// const isDraggable = !!this.node.type.spec.draggable
|
||||
// const isSelectable = NodeSelection.isSelectable(this.node)
|
||||
// const isCopyEvent = event.type === 'copy'
|
||||
// const isPasteEvent = event.type === 'paste'
|
||||
// const isCutEvent = event.type === 'cut'
|
||||
// const isClickEvent = event.type === 'mousedown'
|
||||
// const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
|
||||
|
||||
return contentElement || this.dom
|
||||
}
|
||||
// // ProseMirror tries to drag selectable nodes
|
||||
// // even if `draggable` is set to `false`
|
||||
// // this fix prevents that
|
||||
// if (!isDraggable && isSelectable && isDragEvent) {
|
||||
// event.preventDefault()
|
||||
// }
|
||||
|
||||
stopEvent(event: Event) {
|
||||
if (typeof this.options.stopEvent === 'function') {
|
||||
return this.options.stopEvent(event)
|
||||
}
|
||||
// if (isDraggable && isDragEvent && !isDragging) {
|
||||
// event.preventDefault()
|
||||
// return false
|
||||
// }
|
||||
|
||||
const target = (event.target as HTMLElement)
|
||||
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
|
||||
// // we have to store that dragging started
|
||||
// if (isDraggable && isEditable && !isDragging && isClickEvent) {
|
||||
// const dragHandle = target.closest('[data-drag-handle]')
|
||||
// const isValidDragHandle = dragHandle
|
||||
// && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
|
||||
|
||||
// ignore all events from child nodes
|
||||
if (!isInElement) {
|
||||
return false
|
||||
}
|
||||
// if (isValidDragHandle) {
|
||||
// this.isDragging = true
|
||||
// document.addEventListener('dragend', () => {
|
||||
// this.isDragging = false
|
||||
// }, { once: true })
|
||||
// }
|
||||
// }
|
||||
|
||||
const { isEditable } = this.editor
|
||||
const { isDragging } = this
|
||||
const isDraggable = !!this.node.type.spec.draggable
|
||||
const isSelectable = NodeSelection.isSelectable(this.node)
|
||||
const isCopyEvent = event.type === 'copy'
|
||||
const isPasteEvent = event.type === 'paste'
|
||||
const isCutEvent = event.type === 'cut'
|
||||
const isClickEvent = event.type === 'mousedown'
|
||||
const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
|
||||
// // these events are handled by prosemirror
|
||||
// if (
|
||||
// isDragging
|
||||
// || isCopyEvent
|
||||
// || isPasteEvent
|
||||
// || isCutEvent
|
||||
// || (isClickEvent && isSelectable)
|
||||
// ) {
|
||||
// return false
|
||||
// }
|
||||
|
||||
// ProseMirror tries to drag selectable nodes
|
||||
// even if `draggable` is set to `false`
|
||||
// this fix prevents that
|
||||
if (!isDraggable && isSelectable && isDragEvent) {
|
||||
event.preventDefault()
|
||||
}
|
||||
// return true
|
||||
// }
|
||||
|
||||
if (isDraggable && isDragEvent && !isDragging) {
|
||||
event.preventDefault()
|
||||
return false
|
||||
}
|
||||
// ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
|
||||
// if (mutation.type === 'selection') {
|
||||
// if (this.node.isLeaf) {
|
||||
// return true
|
||||
// }
|
||||
|
||||
// we have to store that dragging started
|
||||
if (isDraggable && isEditable && !isDragging && isClickEvent) {
|
||||
const dragHandle = target.closest('[data-drag-handle]')
|
||||
const isValidDragHandle = dragHandle
|
||||
&& (this.dom === dragHandle || (this.dom.contains(dragHandle)))
|
||||
// return false
|
||||
// }
|
||||
|
||||
if (isValidDragHandle) {
|
||||
this.isDragging = true
|
||||
document.addEventListener('dragend', () => {
|
||||
this.isDragging = false
|
||||
}, { once: true })
|
||||
}
|
||||
}
|
||||
// if (!this.contentDOM) {
|
||||
// return true
|
||||
// }
|
||||
|
||||
// these events are handled by prosemirror
|
||||
if (
|
||||
isDragging
|
||||
|| isCopyEvent
|
||||
|| isPasteEvent
|
||||
|| isCutEvent
|
||||
|| (isClickEvent && isSelectable)
|
||||
) {
|
||||
return false
|
||||
}
|
||||
// const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
|
||||
// || this.contentDOM === mutation.target
|
||||
|
||||
return true
|
||||
}
|
||||
// return contentDOMHasChanged
|
||||
// }
|
||||
|
||||
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
|
||||
if (mutation.type === 'selection') {
|
||||
if (this.node.isLeaf) {
|
||||
return true
|
||||
}
|
||||
// destroy() {
|
||||
// this.renderer.destroy()
|
||||
// }
|
||||
|
||||
return false
|
||||
}
|
||||
// update(node: ProseMirrorNode, decorations: Decoration[]) {
|
||||
// if (typeof this.options.update === 'function') {
|
||||
// return this.options.update(node, decorations)
|
||||
// }
|
||||
|
||||
if (!this.contentDOM) {
|
||||
return true
|
||||
}
|
||||
// if (node.type !== this.node.type) {
|
||||
// return false
|
||||
// }
|
||||
|
||||
const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
|
||||
|| this.contentDOM === mutation.target
|
||||
// if (node === this.node && this.decorations === decorations) {
|
||||
// return true
|
||||
// }
|
||||
|
||||
return contentDOMHasChanged
|
||||
}
|
||||
// this.node = node
|
||||
// this.decorations = decorations
|
||||
// // this.renderer.updateProps({ node, decorations })
|
||||
// this.renderer.render()
|
||||
|
||||
destroy() {
|
||||
this.renderer.destroy()
|
||||
}
|
||||
// return true
|
||||
// }
|
||||
// }
|
||||
|
||||
update(node: ProseMirrorNode, decorations: Decoration[]) {
|
||||
if (typeof this.options.update === 'function') {
|
||||
return this.options.update(node, decorations)
|
||||
}
|
||||
// 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 {}
|
||||
// }
|
||||
|
||||
if (node.type !== this.node.type) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (node === this.node && this.decorations === decorations) {
|
||||
return true
|
||||
}
|
||||
|
||||
this.node = node
|
||||
this.decorations = decorations
|
||||
// this.renderer.updateProps({ node, decorations })
|
||||
this.renderer.render()
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
// return new ReactNodeView(component, props, options) as NodeView
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
// @ts-nocheck
|
||||
// // @ts-nocheck
|
||||
|
||||
import React from 'react'
|
||||
import { render, unmountComponentAtNode } from 'react-dom'
|
||||
// import React from 'react'
|
||||
// import { render, unmountComponentAtNode } from 'react-dom'
|
||||
|
||||
import { Editor } from './Editor'
|
||||
// import { Editor } from './Editor'
|
||||
|
||||
export interface VueRendererOptions {
|
||||
as?: string;
|
||||
editor: Editor;
|
||||
props?: { [key: string]: any };
|
||||
}
|
||||
// export interface VueRendererOptions {
|
||||
// as?: string;
|
||||
// editor: Editor;
|
||||
// props?: { [key: string]: any };
|
||||
// }
|
||||
|
||||
export class ReactRenderer {
|
||||
id: string
|
||||
// export class ReactRenderer {
|
||||
// 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) {
|
||||
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
|
||||
this.component = component
|
||||
this.editor = editor
|
||||
this.props = props
|
||||
// constructor(component: any, { props = {}, editor }: VueRendererOptions) {
|
||||
// this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
|
||||
// this.component = component
|
||||
// this.editor = editor
|
||||
// this.props = props
|
||||
|
||||
this.teleportElement = document.createElement('div')
|
||||
// this.teleportElement.setAttribute('data-bla', '')
|
||||
// render(React.createElement(component), this.teleportElement)
|
||||
// render(React.createElement(component), this.teleportElement)
|
||||
this.render()
|
||||
// this.element = this.teleportElement.firstElementChild as Element
|
||||
this.element = this.teleportElement
|
||||
}
|
||||
// this.teleportElement = document.createElement('div')
|
||||
// // this.teleportElement.setAttribute('data-bla', '')
|
||||
// // render(React.createElement(component), this.teleportElement)
|
||||
// // render(React.createElement(component), this.teleportElement)
|
||||
// this.render()
|
||||
// // this.element = this.teleportElement.firstElementChild as Element
|
||||
// this.element = this.teleportElement
|
||||
// }
|
||||
|
||||
render() {
|
||||
render(React.createElement(this.component), this.teleportElement)
|
||||
}
|
||||
// render() {
|
||||
// render(React.createElement(this.component), this.teleportElement)
|
||||
// }
|
||||
|
||||
updateProps(props: { [key: string]: any } = {}) {
|
||||
// TODO
|
||||
}
|
||||
// updateProps(props: { [key: string]: any } = {}) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
destroy() {
|
||||
// TODO
|
||||
// console.log('DESTROY', { bla: this.teleportElement })
|
||||
// console.log(document.querySelector('[data-bla]'))
|
||||
unmountComponentAtNode(this.teleportElement)
|
||||
// unmountComponentAtNode(document.querySelector('[data-bla]'))
|
||||
}
|
||||
// destroy() {
|
||||
// // TODO
|
||||
// // console.log('DESTROY', { bla: this.teleportElement })
|
||||
// // console.log(document.querySelector('[data-bla]'))
|
||||
// unmountComponentAtNode(this.teleportElement)
|
||||
// // unmountComponentAtNode(document.querySelector('[data-bla]'))
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
@@ -3,7 +3,7 @@ import { EditorOptions } from '@tiptap/core'
|
||||
import { Editor } from './Editor'
|
||||
|
||||
function useForceUpdate() {
|
||||
const [_, setValue] = useState(0)
|
||||
const [, setValue] = useState(0)
|
||||
|
||||
return () => setValue(value => value + 1)
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"target": "es2019",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"jsx": "react",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
|
||||
Reference in New Issue
Block a user