@tiptap/react 2.0.0-beta.2 → 2.0.0-beta.200

package/src/EditorContent.tsx

@@ -1,11 +1,32 @@
-import React from 'react'
+import React, { HTMLProps } from 'react'
+import ReactDOM from 'react-dom'
+
 import { Editor } from './Editor'
+import { ReactRenderer } from './ReactRenderer'
+
+const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderers }) => {
+  return (
+    <>
+      {Array.from(renderers).map(([key, renderer]) => {
+        return ReactDOM.createPortal(
+          renderer.reactElement,
+          renderer.element,
+          key,
+        )
+      })}
+    </>
+  )
+}
 
-type EditorContentProps = {
-  editor: Editor | null
+export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
+  editor: Editor | null,
 }
 
-export class PureEditorContent extends React.Component<EditorContentProps, EditorContentProps> {
+export interface EditorContentState {
+  renderers: Map<string, ReactRenderer>
+}
+
+export class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
   editorContentRef: React.RefObject<any>
 
   constructor(props: EditorContentProps) {
@@ -13,17 +34,29 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     this.editorContentRef = React.createRef()
 
     this.state = {
-      editor: this.props.editor
+      renderers: new Map(),
     }
   }
 
+  componentDidMount() {
+    this.init()
+  }
+
   componentDidUpdate() {
+    this.init()
+  }
+
+  init() {
     const { editor } = this.props
 
     if (editor && editor.options.element) {
+      if (editor.contentComponent) {
+        return
+      }
+
       const element = this.editorContentRef.current
 
-      element.appendChild(editor.options.element.firstChild)
+      element.append(...editor.options.element.childNodes)
 
       editor.setOptions({
         element,
@@ -31,18 +64,48 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 
       editor.contentComponent = this
 
-      // TODO: why setTimeout?
-      setTimeout(() => {
-        editor.createNodeViews()
-      }, 0)
+      editor.createNodeViews()
     }
   }
 
+  componentWillUnmount() {
+    const { editor } = this.props
+
+    if (!editor) {
+      return
+    }
+
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {},
+      })
+    }
+
+    editor.contentComponent = null
+
+    if (!editor.options.element.firstChild) {
+      return
+    }
+
+    const newElement = document.createElement('div')
+
+    newElement.append(...editor.options.element.childNodes)
+
+    editor.setOptions({
+      element: newElement,
+    })
+  }
+
   render() {
+    const { editor, ...rest } = this.props
+
     return (
-      <div ref={this.editorContentRef} />
+      <>
+        <div ref={this.editorContentRef} {...rest} />
+        <Portals renderers={this.state.renderers} />
+      </>
     )
   }
 }
 
-export const EditorContent = React.memo(PureEditorContent);
+export const EditorContent = React.memo(PureEditorContent)

package/src/FloatingMenu.tsx

@@ -0,0 +1,52 @@
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import React, {
+  useEffect, useState,
+} from 'react'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
+  className?: string,
+  children: React.ReactNode
+}
+
+export const FloatingMenu = (props: FloatingMenuProps) => {
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
+      return
+    }
+
+    const {
+      pluginKey = 'floatingMenu',
+      editor,
+      tippyOptions = {},
+      shouldShow = null,
+    } = props
+
+    const plugin = FloatingMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow,
+    })
+
+    editor.registerPlugin(plugin)
+    return () => editor.unregisterPlugin(pluginKey)
+  }, [
+    props.editor,
+    element,
+  ])
+
+  return (
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
+      {props.children}
+    </div>
+  )
+}

package/src/NodeViewContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useReactNodeView } from './useReactNodeView'
+
+export interface NodeViewContentProps {
+  [key: string]: any,
+  as?: React.ElementType,
+}
+
+export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
+  const Tag = props.as || 'div'
+  const { nodeViewContentRef } = useReactNodeView()
+
+  return (
+    <Tag
+      {...props}
+      ref={nodeViewContentRef}
+      data-node-view-content=""
+      style={{
+        whiteSpace: 'pre-wrap',
+        ...props.style,
+      }}
+    />
+  )
+}

package/src/NodeViewWrapper.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { useReactNodeView } from './useReactNodeView'
+
+export interface NodeViewWrapperProps {
+  [key: string]: any,
+  as?: React.ElementType,
+}
+
+export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {
+  const { onDragStart } = useReactNodeView()
+  const Tag = props.as || 'div'
+
+  return (
+    <Tag
+      {...props}
+      ref={ref}
+      data-node-view-wrapper=""
+      onDragStart={onDragStart}
+      style={{
+        whiteSpace: 'normal',
+        ...props.style,
+      }}
+    />
+  )
+})

package/src/ReactNodeViewRenderer.tsx

@@ -0,0 +1,192 @@
+import {
+  NodeView,
+  NodeViewProps,
+  NodeViewRenderer,
+  NodeViewRendererOptions,
+  NodeViewRendererProps,
+} from '@tiptap/core'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
+import React from 'react'
+
+import { Editor } from './Editor'
+import { ReactRenderer } from './ReactRenderer'
+import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView'
+
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+  update:
+    | ((props: {
+        oldNode: ProseMirrorNode;
+        oldDecorations: Decoration[];
+        newNode: ProseMirrorNode;
+        newDecorations: Decoration[];
+        updateProps: () => void;
+      }) => boolean)
+    | null;
+  as?: string;
+  className?: string;
+}
+
+class ReactNodeView extends NodeView<
+  React.FunctionComponent,
+  Editor,
+  ReactNodeViewRendererOptions
+> {
+  renderer!: ReactRenderer
+
+  contentDOMElement!: HTMLElement | null
+
+  mount() {
+    const props: NodeViewProps = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
+    }
+
+    if (!(this.component as any).displayName) {
+      const capitalizeFirstChar = (string: string): string => {
+        return string.charAt(0).toUpperCase() + string.substring(1)
+      }
+
+      this.component.displayName = capitalizeFirstChar(this.extension.name)
+    }
+
+    const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
+      const Component = this.component
+      const onDragStart = this.onDragStart.bind(this)
+      const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
+        if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+          element.appendChild(this.contentDOMElement)
+        }
+      }
+
+      return (
+        <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
+          <Component {...componentProps} />
+        </ReactNodeViewContext.Provider>
+      )
+    }
+
+    ReactNodeViewProvider.displayName = 'ReactNodeView'
+
+    this.contentDOMElement = this.node.isLeaf
+      ? null
+      : document.createElement(this.node.isInline ? 'span' : 'div')
+
+    if (this.contentDOMElement) {
+      // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+      // With this fix it seems to work fine
+      // See: https://github.com/ueberdosis/tiptap/issues/1197
+      this.contentDOMElement.style.whiteSpace = 'inherit'
+    }
+
+    let as = this.node.isInline ? 'span' : 'div'
+
+    if (this.options.as) {
+      as = this.options.as
+    }
+
+    const { className = '' } = this.options
+
+    this.renderer = new ReactRenderer(ReactNodeViewProvider, {
+      editor: this.editor,
+      props,
+      as,
+      className: `node-${this.node.type.name} ${className}`.trim(),
+    })
+  }
+
+  get dom() {
+    if (
+      this.renderer.element.firstElementChild
+      && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
+    ) {
+      throw Error('Please use the NodeViewWrapper component for your node view.')
+    }
+
+    return this.renderer.element as HTMLElement
+  }
+
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null
+    }
+
+    return this.contentDOMElement
+  }
+
+  update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.renderer.updateProps(props)
+    }
+
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (typeof this.options.update === 'function') {
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations }),
+      })
+    }
+
+    if (node === this.node && this.decorations === decorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+
+    updateProps({ node, decorations })
+
+    return true
+  }
+
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true,
+    })
+  }
+
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false,
+    })
+  }
+
+  destroy() {
+    this.renderer.destroy()
+    this.contentDOMElement = null
+  }
+}
+
+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 unknown as ProseMirrorNodeView
+  }
+}

package/src/ReactRenderer.tsx

@@ -0,0 +1,119 @@
+import { Editor } from '@tiptap/core'
+import React from 'react'
+import { flushSync } from 'react-dom'
+
+import { Editor as ExtendedEditor } from './Editor'
+
+function isClassComponent(Component: any) {
+  return !!(
+    typeof Component === 'function'
+    && Component.prototype
+    && Component.prototype.isReactComponent
+  )
+}
+
+function isForwardRefComponent(Component: any) {
+  return !!(
+    typeof Component === 'object'
+    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+  )
+}
+
+export interface ReactRendererOptions {
+  editor: Editor,
+  props?: Record<string, any>,
+  as?: string,
+  className?: string,
+}
+
+type ComponentType<R, P> =
+  React.ComponentClass<P> |
+  React.FunctionComponent<P> |
+  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+
+export class ReactRenderer<R = unknown, P = unknown> {
+  id: string
+
+  editor: ExtendedEditor
+
+  component: any
+
+  element: Element
+
+  props: Record<string, any>
+
+  reactElement: React.ReactNode
+
+  ref: R | null = null
+
+  constructor(component: ComponentType<R, P>, {
+    editor,
+    props = {},
+    as = 'div',
+    className = '',
+  }: ReactRendererOptions) {
+    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
+    this.component = component
+    this.editor = editor as ExtendedEditor
+    this.props = props
+    this.element = document.createElement(as)
+    this.element.classList.add('react-renderer')
+
+    if (className) {
+      this.element.classList.add(...className.split(' '))
+    }
+
+    this.render()
+  }
+
+  render(): void {
+    const Component = this.component
+    const props = this.props
+
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      props.ref = (ref: R) => {
+        this.ref = ref
+      }
+    }
+
+    this.reactElement = <Component {...props } />
+
+    queueMicrotask(() => {
+      flushSync(() => {
+        if (this.editor?.contentComponent) {
+          this.editor.contentComponent.setState({
+            renderers: this.editor.contentComponent.state.renderers.set(
+              this.id,
+              this,
+            ),
+          })
+        }
+      })
+    })
+  }
+
+  updateProps(props: Record<string, any> = {}): void {
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+
+    this.render()
+  }
+
+  destroy(): void {
+    queueMicrotask(() => {
+      flushSync(() => {
+        if (this.editor?.contentComponent) {
+          const { renderers } = this.editor.contentComponent.state
+
+          renderers.delete(this.id)
+
+          this.editor.contentComponent.setState({
+            renderers,
+          })
+        }
+      })
+    })
+  }
+}

package/src/index.ts

@@ -1,7 +1,10 @@
-// @ts-nocheck
-export * from '@tiptap/core'
+export * from './BubbleMenu'
 export { Editor } from './Editor'
-export * from './useEditor'
-// export * from './ReactRenderer'
-// export * from './ReactNodeViewRenderer'
 export * from './EditorContent'
+export * from './FloatingMenu'
+export * from './NodeViewContent'
+export * from './NodeViewWrapper'
+export * from './ReactNodeViewRenderer'
+export * from './ReactRenderer'
+export * from './useEditor'
+export * from '@tiptap/core'

package/src/useEditor.ts

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
 import { EditorOptions } from '@tiptap/core'
+import { DependencyList, useEffect, useState } from 'react'
+
 import { Editor } from './Editor'
 
 function useForceUpdate() {
@@ -8,21 +9,32 @@ function useForceUpdate() {
   return () => setValue(value => value + 1)
 }
 
-export const useEditor = (options: Partial<EditorOptions> = {}) => {
+export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
   const [editor, setEditor] = useState<Editor | null>(null)
   const forceUpdate = useForceUpdate()
 
   useEffect(() => {
+    let isMounted = true
+
     const instance = new Editor(options)
 
     setEditor(instance)
 
-    instance.on('transaction', forceUpdate)
+    instance.on('transaction', () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (isMounted) {
+            forceUpdate()
+          }
+        })
+      })
+    })
 
     return () => {
       instance.destroy()
+      isMounted = false
     }
-  }, [])
+  }, deps)
 
   return editor
 }

package/src/useReactNodeView.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react'
+
+export interface ReactNodeViewContextProps {
+  onDragStart: (event: DragEvent) => void,
+  nodeViewContentRef: (element: HTMLElement | null) => void,
+}
+
+export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
+  onDragStart: undefined,
+})
+
+export const useReactNodeView = () => useContext(ReactNodeViewContext)

package/CHANGELOG.md

@@ -1,24 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.1...@tiptap/react@2.0.0-beta.2) (2021-03-09)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.1](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-alpha.2...@tiptap/react@2.0.0-beta.1) (2021-03-05)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# 2.0.0-alpha.2 (2021-02-26)
-
-**Note:** Version bump only for package @tiptap/react

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.