@tiptap/react 2.0.0-beta.20 → 2.0.0-beta.201
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.
- package/README.md +2 -2
- package/dist/packages/react/src/BubbleMenu.d.ts +7 -3
- package/dist/packages/react/src/Editor.d.ts +1 -1
- package/dist/packages/react/src/EditorContent.d.ts +2 -2
- package/dist/packages/react/src/FloatingMenu.d.ts +6 -3
- package/dist/packages/react/src/NodeViewContent.d.ts +1 -1
- package/dist/packages/react/src/NodeViewWrapper.d.ts +1 -1
- package/dist/packages/react/src/ReactNodeViewRenderer.d.ts +12 -6
- package/dist/packages/react/src/ReactRenderer.d.ts +12 -9
- package/dist/packages/react/src/index.d.ts +6 -6
- package/dist/packages/react/src/useEditor.d.ts +2 -1
- package/dist/packages/react/src/useReactNodeView.d.ts +1 -0
- package/dist/tiptap-react.cjs.js +224 -151
- package/dist/tiptap-react.cjs.js.map +1 -1
- package/dist/tiptap-react.esm.js +224 -149
- package/dist/tiptap-react.esm.js.map +1 -1
- package/dist/tiptap-react.umd.js +226 -153
- package/dist/tiptap-react.umd.js.map +1 -1
- package/package.json +18 -12
- package/src/BubbleMenu.tsx +33 -17
- package/src/Editor.ts +2 -1
- package/src/EditorContent.tsx +9 -7
- package/src/FloatingMenu.tsx +37 -14
- package/src/NodeViewContent.tsx +10 -3
- package/src/NodeViewWrapper.tsx +11 -8
- package/src/ReactNodeViewRenderer.tsx +75 -31
- package/src/ReactRenderer.tsx +58 -25
- package/src/index.ts +6 -6
- package/src/useEditor.ts +16 -4
- package/src/useReactNodeView.ts +1 -0
- package/CHANGELOG.md +0 -178
- package/LICENSE.md +0 -21
- package/dist/tiptap-react.bundle.umd.min.js +0 -54
- package/dist/tiptap-react.bundle.umd.min.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-react.umd.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, keepInBounds = true } = props\n\n editor.registerPlugin(BubbleMenuPlugin({\n editor,\n element: element.current as HTMLElement,\n keepInBounds,\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 } = props\n\n editor.registerPlugin(FloatingMenuPlugin({\n editor,\n element: element.current as HTMLElement,\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
|
+
{"version":3,"file":"tiptap-react.umd.js","sources":["../src/BubbleMenu.tsx","../src/Editor.ts","../src/EditorContent.tsx","../src/FloatingMenu.tsx","../src/useReactNodeView.ts","../src/NodeViewContent.tsx","../src/NodeViewWrapper.tsx","../src/ReactRenderer.tsx","../src/ReactNodeViewRenderer.tsx","../src/useEditor.ts"],"sourcesContent":["import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\nimport React, { useEffect, useState } from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;\n\nexport type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {\n className?: string;\n children: React.ReactNode;\n delay?: number;\n};\n\nexport const BubbleMenu = (props: BubbleMenuProps) => {\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (props.editor.isDestroyed) {\n return\n }\n\n const {\n pluginKey = 'bubbleMenu', editor, tippyOptions = {}, delay, shouldShow = null,\n } = props\n\n const plugin = BubbleMenuPlugin({\n delay,\n editor,\n element,\n pluginKey,\n shouldShow,\n tippyOptions,\n })\n\n editor.registerPlugin(plugin)\n return () => editor.unregisterPlugin(pluginKey)\n }, [props.editor, element])\n\n return (\n <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>\n {props.children}\n </div>\n )\n}\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport React from 'react'\n\nimport { EditorContentProps, EditorContentState } from './EditorContent'\n\nexport class Editor extends CoreEditor {\n public contentComponent: React.Component<EditorContentProps, EditorContentState> | null = null\n}\n","import React, { HTMLProps } from 'react'\nimport ReactDOM from 'react-dom'\n\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 extends HTMLProps<HTMLDivElement> {\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.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element,\n })\n\n editor.contentComponent = this\n\n editor.createNodeViews()\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.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n }\n\n render() {\n const { editor, ...rest } = this.props\n\n return (\n <>\n <div ref={this.editorContentRef} {...rest} />\n <Portals renderers={this.state.renderers} />\n </>\n )\n }\n}\n\nexport const EditorContent = React.memo(PureEditorContent)\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport React, {\n useEffect, useState,\n} from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {\n className?: string,\n children: React.ReactNode\n}\n\nexport const FloatingMenu = (props: FloatingMenuProps) => {\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (props.editor.isDestroyed) {\n return\n }\n\n const {\n pluginKey = 'floatingMenu',\n editor,\n tippyOptions = {},\n shouldShow = null,\n } = props\n\n const plugin = FloatingMenuPlugin({\n pluginKey,\n editor,\n element,\n tippyOptions,\n shouldShow,\n })\n\n editor.registerPlugin(plugin)\n return () => editor.unregisterPlugin(pluginKey)\n }, [\n props.editor,\n element,\n ])\n\n return (\n <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>\n {props.children}\n </div>\n )\n}\n","import { createContext, useContext } from 'react'\n\nexport interface ReactNodeViewContextProps {\n onDragStart: (event: DragEvent) => void,\n nodeViewContentRef: (element: HTMLElement | null) => void,\n}\n\nexport const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({\n onDragStart: undefined,\n})\n\nexport const useReactNodeView = () => useContext(ReactNodeViewContext)\n","import React from 'react'\n\nimport { useReactNodeView } from './useReactNodeView'\n\nexport interface NodeViewContentProps {\n [key: string]: any,\n as?: React.ElementType,\n}\n\nexport const NodeViewContent: React.FC<NodeViewContentProps> = props => {\n const Tag = props.as || 'div'\n const { nodeViewContentRef } = useReactNodeView()\n\n return (\n <Tag\n {...props}\n ref={nodeViewContentRef}\n data-node-view-content=\"\"\n style={{\n whiteSpace: 'pre-wrap',\n ...props.style,\n }}\n />\n )\n}\n","import React from 'react'\n\nimport { useReactNodeView } from './useReactNodeView'\n\nexport interface NodeViewWrapperProps {\n [key: string]: any,\n as?: React.ElementType,\n}\n\nexport const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {\n const { onDragStart } = useReactNodeView()\n const Tag = props.as || 'div'\n\n return (\n <Tag\n {...props}\n ref={ref}\n data-node-view-wrapper=\"\"\n onDragStart={onDragStart}\n style={{\n whiteSpace: 'normal',\n ...props.style,\n }}\n />\n )\n})\n","import { Editor } from '@tiptap/core'\nimport React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { Editor as ExtendedEditor } from './Editor'\n\nfunction isClassComponent(Component: any) {\n return !!(\n typeof Component === 'function'\n && Component.prototype\n && Component.prototype.isReactComponent\n )\n}\n\nfunction isForwardRefComponent(Component: any) {\n return !!(\n typeof Component === 'object'\n && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'\n )\n}\n\nexport interface ReactRendererOptions {\n editor: Editor,\n props?: Record<string, any>,\n as?: string,\n className?: string,\n}\n\ntype ComponentType<R, P> =\n React.ComponentClass<P> |\n React.FunctionComponent<P> |\n React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;\n\nexport class ReactRenderer<R = unknown, P = unknown> {\n id: string\n\n editor: ExtendedEditor\n\n component: any\n\n element: Element\n\n props: Record<string, any>\n\n reactElement: React.ReactNode\n\n ref: R | null = null\n\n constructor(component: ComponentType<R, P>, {\n editor,\n props = {},\n as = 'div',\n className = '',\n }: ReactRendererOptions) {\n this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()\n this.component = component\n this.editor = editor as ExtendedEditor\n this.props = props\n this.element = document.createElement(as)\n this.element.classList.add('react-renderer')\n\n if (className) {\n this.element.classList.add(...className.split(' '))\n }\n\n this.render()\n }\n\n render(): void {\n const Component = this.component\n const props = this.props\n\n if (isClassComponent(Component) || isForwardRefComponent(Component)) {\n props.ref = (ref: R) => {\n this.ref = ref\n }\n }\n\n this.reactElement = <Component {...props } />\n\n queueMicrotask(() => {\n flushSync(() => {\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 }\n\n updateProps(props: Record<string, any> = {}): void {\n this.props = {\n ...this.props,\n ...props,\n }\n\n this.render()\n }\n\n destroy(): void {\n queueMicrotask(() => {\n flushSync(() => {\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 }\n}\n","import {\n NodeView,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererOptions,\n NodeViewRendererProps,\n} from '@tiptap/core'\nimport { Node as ProseMirrorNode } from 'prosemirror-model'\nimport { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'\nimport React from 'react'\n\nimport { Editor } from './Editor'\nimport { ReactRenderer } from './ReactRenderer'\nimport { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView'\n\nexport interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {\n update:\n | ((props: {\n oldNode: ProseMirrorNode;\n oldDecorations: Decoration[];\n newNode: ProseMirrorNode;\n newDecorations: Decoration[];\n updateProps: () => void;\n }) => boolean)\n | null;\n as?: string;\n className?: string;\n}\n\nclass ReactNodeView extends NodeView<\n React.FunctionComponent,\n Editor,\n ReactNodeViewRendererOptions\n> {\n renderer!: ReactRenderer\n\n contentDOMElement!: HTMLElement | 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 deleteNode: () => this.deleteNode(),\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 Component = this.component\n const onDragStart = this.onDragStart.bind(this)\n const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {\n if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {\n element.appendChild(this.contentDOMElement)\n }\n }\n\n return (\n <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>\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 if (this.contentDOMElement) {\n // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari\n // With this fix it seems to work fine\n // See: https://github.com/ueberdosis/tiptap/issues/1197\n this.contentDOMElement.style.whiteSpace = 'inherit'\n }\n\n let as = this.node.isInline ? 'span' : 'div'\n\n if (this.options.as) {\n as = this.options.as\n }\n\n const { className = '' } = this.options\n\n this.renderer = new ReactRenderer(ReactNodeViewProvider, {\n editor: this.editor,\n props,\n as,\n className: `node-${this.node.type.name} ${className}`.trim(),\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 as HTMLElement\n }\n\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n return this.contentDOMElement\n }\n\n update(node: ProseMirrorNode, decorations: Decoration[]) {\n const updateProps = (props?: Record<string, any>) => {\n this.renderer.updateProps(props)\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n if (typeof this.options.update === 'function') {\n const oldNode = this.node\n const oldDecorations = this.decorations\n\n this.node = node\n this.decorations = decorations\n\n return this.options.update({\n oldNode,\n oldDecorations,\n newNode: node,\n newDecorations: decorations,\n updateProps: () => updateProps({ node, decorations }),\n })\n }\n\n if (node === this.node && this.decorations === decorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n\n 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(\n component: any,\n options?: Partial<ReactNodeViewRendererOptions>,\n): 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 unknown as ProseMirrorNodeView\n }\n}\n","import { EditorOptions } from '@tiptap/core'\nimport { DependencyList, useEffect, useState } from 'react'\n\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> = {}, deps: DependencyList = []) => {\n const [editor, setEditor] = useState<Editor | null>(null)\n const forceUpdate = useForceUpdate()\n\n useEffect(() => {\n let isMounted = true\n\n const instance = new Editor(options)\n\n setEditor(instance)\n\n instance.on('transaction', () => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (isMounted) {\n forceUpdate()\n }\n })\n })\n })\n\n return () => {\n instance.destroy()\n isMounted = false\n }\n }, deps)\n\n return editor\n}\n"],"names":["useState","useEffect","BubbleMenuPlugin","React","CoreEditor","ReactDOM","FloatingMenuPlugin","createContext","useContext","flushSync","NodeView"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/react",
|
|
3
3
|
"description": "React components for tiptap",
|
|
4
|
-
"version": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.201",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -15,25 +15,31 @@
|
|
|
15
15
|
"main": "dist/tiptap-react.cjs.js",
|
|
16
16
|
"umd": "dist/tiptap-react.umd.js",
|
|
17
17
|
"module": "dist/tiptap-react.esm.js",
|
|
18
|
-
"unpkg": "dist/tiptap-react.bundle.umd.min.js",
|
|
19
18
|
"types": "dist/packages/react/src/index.d.ts",
|
|
20
19
|
"files": [
|
|
21
20
|
"src",
|
|
22
21
|
"dist"
|
|
23
22
|
],
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@types/react": "^18.0.1",
|
|
25
|
+
"@types/react-dom": "^18.0.0",
|
|
26
|
+
"react": "^18.0.0",
|
|
27
|
+
"react-dom": "^18.0.0"
|
|
28
|
+
},
|
|
24
29
|
"peerDependencies": {
|
|
25
|
-
"@tiptap/core": "^2.0.0-beta.
|
|
26
|
-
"react": "^17.0.
|
|
27
|
-
"react-dom": "^17.0.
|
|
30
|
+
"@tiptap/core": "^2.0.0-beta.193",
|
|
31
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
32
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
28
33
|
},
|
|
29
34
|
"dependencies": {
|
|
30
|
-
"@tiptap/extension-bubble-menu": "^2.0.0-beta.
|
|
31
|
-
"@tiptap/extension-floating-menu": "^2.0.0-beta.
|
|
32
|
-
"prosemirror-view": "^1.
|
|
35
|
+
"@tiptap/extension-bubble-menu": "^2.0.0-beta.201",
|
|
36
|
+
"@tiptap/extension-floating-menu": "^2.0.0-beta.201",
|
|
37
|
+
"prosemirror-view": "^1.28.2"
|
|
33
38
|
},
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
39
|
+
"repository": {
|
|
40
|
+
"type": "git",
|
|
41
|
+
"url": "https://github.com/ueberdosis/tiptap",
|
|
42
|
+
"directory": "packages/react"
|
|
37
43
|
},
|
|
38
|
-
"
|
|
44
|
+
"sideEffects": false
|
|
39
45
|
}
|
package/src/BubbleMenu.tsx
CHANGED
|
@@ -1,29 +1,45 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
|
|
2
|
+
import React, { useEffect, useState } from 'react'
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
5
|
+
|
|
6
|
+
export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
|
|
7
|
+
className?: string;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
delay?: number;
|
|
10
|
+
};
|
|
7
11
|
|
|
8
|
-
export const BubbleMenu
|
|
9
|
-
const element =
|
|
12
|
+
export const BubbleMenu = (props: BubbleMenuProps) => {
|
|
13
|
+
const [element, setElement] = useState<HTMLDivElement | null>(null)
|
|
10
14
|
|
|
11
15
|
useEffect(() => {
|
|
12
|
-
|
|
16
|
+
if (!element) {
|
|
17
|
+
return
|
|
18
|
+
}
|
|
13
19
|
|
|
14
|
-
editor.
|
|
20
|
+
if (props.editor.isDestroyed) {
|
|
21
|
+
return
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const {
|
|
25
|
+
pluginKey = 'bubbleMenu', editor, tippyOptions = {}, delay, shouldShow = null,
|
|
26
|
+
} = props
|
|
27
|
+
|
|
28
|
+
const plugin = BubbleMenuPlugin({
|
|
29
|
+
delay,
|
|
15
30
|
editor,
|
|
16
|
-
element
|
|
17
|
-
|
|
18
|
-
|
|
31
|
+
element,
|
|
32
|
+
pluginKey,
|
|
33
|
+
shouldShow,
|
|
34
|
+
tippyOptions,
|
|
35
|
+
})
|
|
19
36
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}, [])
|
|
37
|
+
editor.registerPlugin(plugin)
|
|
38
|
+
return () => editor.unregisterPlugin(pluginKey)
|
|
39
|
+
}, [props.editor, element])
|
|
24
40
|
|
|
25
41
|
return (
|
|
26
|
-
<div ref={
|
|
42
|
+
<div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
|
|
27
43
|
{props.children}
|
|
28
44
|
</div>
|
|
29
45
|
)
|
package/src/Editor.ts
CHANGED
package/src/EditorContent.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { HTMLProps } from 'react'
|
|
2
2
|
import ReactDOM from 'react-dom'
|
|
3
|
+
|
|
3
4
|
import { Editor } from './Editor'
|
|
4
5
|
import { ReactRenderer } from './ReactRenderer'
|
|
5
6
|
|
|
@@ -17,7 +18,7 @@ const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderer
|
|
|
17
18
|
)
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
export interface EditorContentProps {
|
|
21
|
+
export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
|
|
21
22
|
editor: Editor | null,
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -55,7 +56,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
|
|
|
55
56
|
|
|
56
57
|
const element = this.editorContentRef.current
|
|
57
58
|
|
|
58
|
-
element.
|
|
59
|
+
element.append(...editor.options.element.childNodes)
|
|
59
60
|
|
|
60
61
|
editor.setOptions({
|
|
61
62
|
element,
|
|
@@ -63,8 +64,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
|
|
|
63
64
|
|
|
64
65
|
editor.contentComponent = this
|
|
65
66
|
|
|
66
|
-
|
|
67
|
-
setTimeout(() => editor.createNodeViews(), 0)
|
|
67
|
+
editor.createNodeViews()
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -89,7 +89,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
|
|
|
89
89
|
|
|
90
90
|
const newElement = document.createElement('div')
|
|
91
91
|
|
|
92
|
-
newElement.
|
|
92
|
+
newElement.append(...editor.options.element.childNodes)
|
|
93
93
|
|
|
94
94
|
editor.setOptions({
|
|
95
95
|
element: newElement,
|
|
@@ -97,9 +97,11 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
render() {
|
|
100
|
+
const { editor, ...rest } = this.props
|
|
101
|
+
|
|
100
102
|
return (
|
|
101
103
|
<>
|
|
102
|
-
<div ref={this.editorContentRef} />
|
|
104
|
+
<div ref={this.editorContentRef} {...rest} />
|
|
103
105
|
<Portals renderers={this.state.renderers} />
|
|
104
106
|
</>
|
|
105
107
|
)
|
package/src/FloatingMenu.tsx
CHANGED
|
@@ -1,28 +1,51 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
|
|
2
|
+
import React, {
|
|
3
|
+
useEffect, useState,
|
|
4
|
+
} from 'react'
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
|
|
7
|
+
|
|
8
|
+
export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
|
|
5
9
|
className?: string,
|
|
10
|
+
children: React.ReactNode
|
|
6
11
|
}
|
|
7
12
|
|
|
8
|
-
export const FloatingMenu
|
|
9
|
-
const element =
|
|
13
|
+
export const FloatingMenu = (props: FloatingMenuProps) => {
|
|
14
|
+
const [element, setElement] = useState<HTMLDivElement | null>(null)
|
|
10
15
|
|
|
11
16
|
useEffect(() => {
|
|
12
|
-
|
|
17
|
+
if (!element) {
|
|
18
|
+
return
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (props.editor.isDestroyed) {
|
|
22
|
+
return
|
|
23
|
+
}
|
|
13
24
|
|
|
14
|
-
|
|
25
|
+
const {
|
|
26
|
+
pluginKey = 'floatingMenu',
|
|
15
27
|
editor,
|
|
16
|
-
|
|
17
|
-
|
|
28
|
+
tippyOptions = {},
|
|
29
|
+
shouldShow = null,
|
|
30
|
+
} = props
|
|
18
31
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
const plugin = FloatingMenuPlugin({
|
|
33
|
+
pluginKey,
|
|
34
|
+
editor,
|
|
35
|
+
element,
|
|
36
|
+
tippyOptions,
|
|
37
|
+
shouldShow,
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
editor.registerPlugin(plugin)
|
|
41
|
+
return () => editor.unregisterPlugin(pluginKey)
|
|
42
|
+
}, [
|
|
43
|
+
props.editor,
|
|
44
|
+
element,
|
|
45
|
+
])
|
|
23
46
|
|
|
24
47
|
return (
|
|
25
|
-
<div ref={
|
|
48
|
+
<div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
|
|
26
49
|
{props.children}
|
|
27
50
|
</div>
|
|
28
51
|
)
|
package/src/NodeViewContent.tsx
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
|
+
import { useReactNodeView } from './useReactNodeView'
|
|
4
|
+
|
|
3
5
|
export interface NodeViewContentProps {
|
|
4
|
-
|
|
6
|
+
[key: string]: any,
|
|
5
7
|
as?: React.ElementType,
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
|
|
9
11
|
const Tag = props.as || 'div'
|
|
12
|
+
const { nodeViewContentRef } = useReactNodeView()
|
|
10
13
|
|
|
11
14
|
return (
|
|
12
15
|
<Tag
|
|
13
|
-
|
|
16
|
+
{...props}
|
|
17
|
+
ref={nodeViewContentRef}
|
|
14
18
|
data-node-view-content=""
|
|
15
|
-
style={{
|
|
19
|
+
style={{
|
|
20
|
+
whiteSpace: 'pre-wrap',
|
|
21
|
+
...props.style,
|
|
22
|
+
}}
|
|
16
23
|
/>
|
|
17
24
|
)
|
|
18
25
|
}
|
package/src/NodeViewWrapper.tsx
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
+
|
|
2
3
|
import { useReactNodeView } from './useReactNodeView'
|
|
3
4
|
|
|
4
5
|
export interface NodeViewWrapperProps {
|
|
5
|
-
|
|
6
|
+
[key: string]: any,
|
|
6
7
|
as?: React.ElementType,
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = props => {
|
|
10
|
+
export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {
|
|
10
11
|
const { onDragStart } = useReactNodeView()
|
|
11
12
|
const Tag = props.as || 'div'
|
|
12
13
|
|
|
13
14
|
return (
|
|
14
15
|
<Tag
|
|
15
|
-
|
|
16
|
+
{...props}
|
|
17
|
+
ref={ref}
|
|
16
18
|
data-node-view-wrapper=""
|
|
17
19
|
onDragStart={onDragStart}
|
|
18
|
-
style={{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
style={{
|
|
21
|
+
whiteSpace: 'normal',
|
|
22
|
+
...props.style,
|
|
23
|
+
}}
|
|
24
|
+
/>
|
|
22
25
|
)
|
|
23
|
-
}
|
|
26
|
+
})
|
|
@@ -1,26 +1,40 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
1
|
import {
|
|
3
2
|
NodeView,
|
|
4
3
|
NodeViewProps,
|
|
5
4
|
NodeViewRenderer,
|
|
5
|
+
NodeViewRendererOptions,
|
|
6
6
|
NodeViewRendererProps,
|
|
7
7
|
} from '@tiptap/core'
|
|
8
|
-
import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
|
|
9
8
|
import { Node as ProseMirrorNode } from 'prosemirror-model'
|
|
9
|
+
import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
|
|
10
|
+
import React from 'react'
|
|
11
|
+
|
|
10
12
|
import { Editor } from './Editor'
|
|
11
13
|
import { ReactRenderer } from './ReactRenderer'
|
|
12
|
-
import { ReactNodeViewContext } from './useReactNodeView'
|
|
13
|
-
|
|
14
|
-
interface ReactNodeViewRendererOptions {
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView'
|
|
15
|
+
|
|
16
|
+
export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
|
|
17
|
+
update:
|
|
18
|
+
| ((props: {
|
|
19
|
+
oldNode: ProseMirrorNode;
|
|
20
|
+
oldDecorations: Decoration[];
|
|
21
|
+
newNode: ProseMirrorNode;
|
|
22
|
+
newDecorations: Decoration[];
|
|
23
|
+
updateProps: () => void;
|
|
24
|
+
}) => boolean)
|
|
25
|
+
| null;
|
|
26
|
+
as?: string;
|
|
27
|
+
className?: string;
|
|
17
28
|
}
|
|
18
29
|
|
|
19
|
-
class ReactNodeView extends NodeView<
|
|
20
|
-
|
|
30
|
+
class ReactNodeView extends NodeView<
|
|
31
|
+
React.FunctionComponent,
|
|
32
|
+
Editor,
|
|
33
|
+
ReactNodeViewRendererOptions
|
|
34
|
+
> {
|
|
21
35
|
renderer!: ReactRenderer
|
|
22
36
|
|
|
23
|
-
contentDOMElement!:
|
|
37
|
+
contentDOMElement!: HTMLElement | null
|
|
24
38
|
|
|
25
39
|
mount() {
|
|
26
40
|
const props: NodeViewProps = {
|
|
@@ -31,6 +45,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
31
45
|
extension: this.extension,
|
|
32
46
|
getPos: () => this.getPos(),
|
|
33
47
|
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
|
|
48
|
+
deleteNode: () => this.deleteNode(),
|
|
34
49
|
}
|
|
35
50
|
|
|
36
51
|
if (!(this.component as any).displayName) {
|
|
@@ -42,11 +57,16 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
42
57
|
}
|
|
43
58
|
|
|
44
59
|
const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
|
|
45
|
-
const onDragStart = this.onDragStart.bind(this)
|
|
46
60
|
const Component = this.component
|
|
61
|
+
const onDragStart = this.onDragStart.bind(this)
|
|
62
|
+
const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
|
|
63
|
+
if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
|
|
64
|
+
element.appendChild(this.contentDOMElement)
|
|
65
|
+
}
|
|
66
|
+
}
|
|
47
67
|
|
|
48
68
|
return (
|
|
49
|
-
<ReactNodeViewContext.Provider value={{ onDragStart }}>
|
|
69
|
+
<ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
|
|
50
70
|
<Component {...componentProps} />
|
|
51
71
|
</ReactNodeViewContext.Provider>
|
|
52
72
|
)
|
|
@@ -58,12 +78,26 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
58
78
|
? null
|
|
59
79
|
: document.createElement(this.node.isInline ? 'span' : 'div')
|
|
60
80
|
|
|
81
|
+
if (this.contentDOMElement) {
|
|
82
|
+
// For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
|
|
83
|
+
// With this fix it seems to work fine
|
|
84
|
+
// See: https://github.com/ueberdosis/tiptap/issues/1197
|
|
85
|
+
this.contentDOMElement.style.whiteSpace = 'inherit'
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
let as = this.node.isInline ? 'span' : 'div'
|
|
89
|
+
|
|
90
|
+
if (this.options.as) {
|
|
91
|
+
as = this.options.as
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const { className = '' } = this.options
|
|
95
|
+
|
|
61
96
|
this.renderer = new ReactRenderer(ReactNodeViewProvider, {
|
|
62
97
|
editor: this.editor,
|
|
63
98
|
props,
|
|
64
|
-
as
|
|
65
|
-
|
|
66
|
-
: 'div',
|
|
99
|
+
as,
|
|
100
|
+
className: `node-${this.node.type.name} ${className}`.trim(),
|
|
67
101
|
})
|
|
68
102
|
}
|
|
69
103
|
|
|
@@ -75,7 +109,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
75
109
|
throw Error('Please use the NodeViewWrapper component for your node view.')
|
|
76
110
|
}
|
|
77
111
|
|
|
78
|
-
return this.renderer.element
|
|
112
|
+
return this.renderer.element as HTMLElement
|
|
79
113
|
}
|
|
80
114
|
|
|
81
115
|
get contentDOM() {
|
|
@@ -83,35 +117,42 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
83
117
|
return null
|
|
84
118
|
}
|
|
85
119
|
|
|
86
|
-
const contentElement = this.dom.querySelector('[data-node-view-content]')
|
|
87
|
-
|
|
88
|
-
if (
|
|
89
|
-
this.contentDOMElement
|
|
90
|
-
&& contentElement
|
|
91
|
-
&& !contentElement.contains(this.contentDOMElement)
|
|
92
|
-
) {
|
|
93
|
-
contentElement.appendChild(this.contentDOMElement)
|
|
94
|
-
}
|
|
95
|
-
|
|
96
120
|
return this.contentDOMElement
|
|
97
121
|
}
|
|
98
122
|
|
|
99
123
|
update(node: ProseMirrorNode, decorations: Decoration[]) {
|
|
100
|
-
|
|
101
|
-
|
|
124
|
+
const updateProps = (props?: Record<string, any>) => {
|
|
125
|
+
this.renderer.updateProps(props)
|
|
102
126
|
}
|
|
103
127
|
|
|
104
128
|
if (node.type !== this.node.type) {
|
|
105
129
|
return false
|
|
106
130
|
}
|
|
107
131
|
|
|
132
|
+
if (typeof this.options.update === 'function') {
|
|
133
|
+
const oldNode = this.node
|
|
134
|
+
const oldDecorations = this.decorations
|
|
135
|
+
|
|
136
|
+
this.node = node
|
|
137
|
+
this.decorations = decorations
|
|
138
|
+
|
|
139
|
+
return this.options.update({
|
|
140
|
+
oldNode,
|
|
141
|
+
oldDecorations,
|
|
142
|
+
newNode: node,
|
|
143
|
+
newDecorations: decorations,
|
|
144
|
+
updateProps: () => updateProps({ node, decorations }),
|
|
145
|
+
})
|
|
146
|
+
}
|
|
147
|
+
|
|
108
148
|
if (node === this.node && this.decorations === decorations) {
|
|
109
149
|
return true
|
|
110
150
|
}
|
|
111
151
|
|
|
112
152
|
this.node = node
|
|
113
153
|
this.decorations = decorations
|
|
114
|
-
|
|
154
|
+
|
|
155
|
+
updateProps({ node, decorations })
|
|
115
156
|
|
|
116
157
|
return true
|
|
117
158
|
}
|
|
@@ -134,7 +175,10 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
|
|
|
134
175
|
}
|
|
135
176
|
}
|
|
136
177
|
|
|
137
|
-
export function ReactNodeViewRenderer(
|
|
178
|
+
export function ReactNodeViewRenderer(
|
|
179
|
+
component: any,
|
|
180
|
+
options?: Partial<ReactNodeViewRendererOptions>,
|
|
181
|
+
): NodeViewRenderer {
|
|
138
182
|
return (props: NodeViewRendererProps) => {
|
|
139
183
|
// try to get the parent component
|
|
140
184
|
// this is important for vue devtools to show the component hierarchy correctly
|
|
@@ -143,6 +187,6 @@ export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNod
|
|
|
143
187
|
return {}
|
|
144
188
|
}
|
|
145
189
|
|
|
146
|
-
return new ReactNodeView(component, props, options) as ProseMirrorNodeView
|
|
190
|
+
return new ReactNodeView(component, props, options) as unknown as ProseMirrorNodeView
|
|
147
191
|
}
|
|
148
192
|
}
|