@blockslides/react 0.1.0

package/src/ReactNodeViewRenderer.tsx

@@ -0,0 +1,344 @@
+import type {
+  DecorationWithType,
+  Editor,
+  NodeViewRenderer,
+  NodeViewRendererOptions,
+  NodeViewRendererProps,
+} from '@blockslides/core'
+import { getRenderedAttributes, NodeView } from '@blockslides/core'
+import type { Node, Node as ProseMirrorNode } from '@blockslides/pm/model'
+import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@blockslides/pm/view'
+import type { ComponentType, NamedExoticComponent } from 'react'
+import { createElement, createRef, memo } from 'react'
+
+import type { EditorWithContentComponent } from './Editor.js'
+import { ReactRenderer } from './ReactRenderer.js'
+import type { ReactNodeViewProps } from './types.js'
+import type { ReactNodeViewContextProps } from './useReactNodeView.js'
+import { ReactNodeViewContext } from './useReactNodeView.js'
+
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+  /**
+   * This function is called when the node view is updated.
+   * It allows you to compare the old node with the new node and decide if the component should update.
+   */
+  update:
+  | ((props: {
+    oldNode: ProseMirrorNode
+    oldDecorations: readonly Decoration[]
+    oldInnerDecorations: DecorationSource
+    newNode: ProseMirrorNode
+    newDecorations: readonly Decoration[]
+    innerDecorations: DecorationSource
+    updateProps: () => void
+  }) => boolean)
+  | null
+  /**
+   * The tag name of the element wrapping the React component.
+   */
+  as?: string
+  /**
+   * The class name of the element wrapping the React component.
+   */
+  className?: string
+  /**
+   * Attributes that should be applied to the element wrapping the React component.
+   * If this is a function, it will be called each time the node view is updated.
+   * If this is an object, it will be applied once when the node view is mounted.
+   */
+  attrs?:
+  | Record<string, string>
+  | ((props: { node: ProseMirrorNode; HTMLAttributes: Record<string, any> }) => Record<string, string>)
+}
+
+export class ReactNodeView<
+  T = HTMLElement,
+  Component extends ComponentType<ReactNodeViewProps<T>> = ComponentType<ReactNodeViewProps<T>>,
+  NodeEditor extends Editor = Editor,
+  Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
+> extends NodeView<Component, NodeEditor, Options> {
+  /**
+   * The renderer instance.
+   */
+  renderer!: ReactRenderer<unknown, ReactNodeViewProps<T>>
+
+  /**
+   * The element that holds the rich-text content of the node.
+   */
+  contentDOMElement!: HTMLElement | null
+
+  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
+    super(component, props, options)
+
+    if (!this.node.isLeaf) {
+      if (this.options.contentDOMElementTag) {
+        this.contentDOMElement = document.createElement(this.options.contentDOMElementTag)
+      } else {
+        this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div')
+      }
+
+      this.contentDOMElement.dataset.nodeViewContentReact = ''
+      this.contentDOMElement.dataset.nodeViewWrapper = ''
+
+      // 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'
+
+      const contentTarget = this.dom.querySelector('[data-node-view-content]')
+
+      if (!contentTarget) {
+        return
+      }
+
+      contentTarget.appendChild(this.contentDOMElement)
+    }
+  }
+
+  /**
+   * Setup the React component.
+   * Called on initialization.
+   */
+  mount() {
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations as DecorationWithType[],
+      innerDecorations: this.innerDecorations,
+      view: this.view,
+      selected: false,
+      extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
+      ref: createRef<T>(),
+    } satisfies ReactNodeViewProps<T>
+
+    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 onDragStart = this.onDragStart.bind(this)
+    const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
+      if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+        // remove the nodeViewWrapper attribute from the element
+        if (element.hasAttribute('data-node-view-wrapper')) {
+          element.removeAttribute('data-node-view-wrapper')
+        }
+        element.appendChild(this.contentDOMElement)
+      }
+    }
+    const context = { onDragStart, nodeViewContentRef }
+    const Component = this.component
+    // For performance reasons, we memoize the provider component
+    // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
+    const ReactNodeViewProvider: NamedExoticComponent<ReactNodeViewProps<T>> = memo(componentProps => {
+      return (
+        <ReactNodeViewContext.Provider value={context}>
+          {createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
+      )
+    })
+
+    ReactNodeViewProvider.displayName = 'ReactNodeView'
+
+    let as = this.node.isInline ? 'span' : 'div'
+
+    if (this.options.as) {
+      as = this.options.as
+    }
+
+    const { className = '' } = this.options
+
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+
+    this.renderer = new ReactRenderer(ReactNodeViewProvider, {
+      editor: this.editor,
+      props,
+      as,
+      className: `node-${this.node.type.name} ${className}`.trim(),
+    })
+
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+    this.updateElementAttributes()
+  }
+
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
+  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
+  }
+
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null
+    }
+
+    return this.contentDOMElement
+  }
+
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    const { from, to } = this.editor.state.selection
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
+
+    if (from <= pos && to >= pos + this.node.nodeSize) {
+      if (this.renderer.props.selected) {
+        return
+      }
+
+      this.selectNode()
+    } else {
+      if (!this.renderer.props.selected) {
+        return
+      }
+
+      this.deselectNode()
+    }
+  }
+
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
+    const rerenderComponent = (props?: Record<string, any>) => {
+      this.renderer.updateProps(props)
+      if (typeof this.options.attrs === 'function') {
+        this.updateElementAttributes()
+      }
+    }
+
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (typeof this.options.update === 'function') {
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+      const oldInnerDecorations = this.innerDecorations
+
+      this.node = node
+      this.decorations = decorations
+      this.innerDecorations = innerDecorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),
+      })
+    }
+
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+    this.innerDecorations = innerDecorations
+
+    rerenderComponent({ node, decorations, innerDecorations })
+
+    return true
+  }
+
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true,
+    })
+    this.renderer.element.classList.add('ProseMirror-selectednode')
+  }
+
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false,
+    })
+    this.renderer.element.classList.remove('ProseMirror-selectednode')
+  }
+
+  /**
+   * Destroy the React component instance.
+   */
+  destroy() {
+    this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
+    this.contentDOMElement = null
+  }
+
+  /**
+   * Update the attributes of the top-level element that holds the React component.
+   * Applying the attributes defined in the `attrs` option.
+   */
+  updateElementAttributes() {
+    if (this.options.attrs) {
+      let attrsObj: Record<string, string> = {}
+
+      if (typeof this.options.attrs === 'function') {
+        const extensionAttributes = this.editor.extensionManager.attributes
+        const HTMLAttributes = getRenderedAttributes(this.node, extensionAttributes)
+
+        attrsObj = this.options.attrs({ node: this.node, HTMLAttributes })
+      } else {
+        attrsObj = this.options.attrs
+      }
+
+      this.renderer.updateAttributes(attrsObj)
+    }
+  }
+}
+
+/**
+ * Create a React node view renderer.
+ */
+export function ReactNodeViewRenderer<T = HTMLElement>(
+  component: ComponentType<ReactNodeViewProps<T>>,
+  options?: Partial<ReactNodeViewRendererOptions>,
+): NodeViewRenderer {
+  return props => {
+    // 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 EditorWithContentComponent).contentComponent) {
+      return {} as unknown as ProseMirrorNodeView
+    }
+
+    return new ReactNodeView<T>(component, props, options)
+  }
+}

package/src/ReactRenderer.tsx

@@ -0,0 +1,265 @@
+import type { Editor } from '@blockslides/core'
+import type {
+  ComponentClass,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+} from 'react'
+import { version as reactVersion } from 'react'
+import { flushSync } from 'react-dom'
+
+import type { EditorWithContentComponent } from './Editor.js'
+
+/**
+ * Check if a component is a class component.
+ * @param Component
+ * @returns {boolean}
+ */
+function isClassComponent(Component: any) {
+  return !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent)
+}
+
+/**
+ * Check if a component is a forward ref component.
+ * @param Component
+ * @returns {boolean}
+ */
+function isForwardRefComponent(Component: any) {
+  return !!(
+    typeof Component === 'object' &&
+    Component.$$typeof &&
+    (Component.$$typeof.toString() === 'Symbol(react.forward_ref)' ||
+      Component.$$typeof.description === 'react.forward_ref')
+  )
+}
+
+/**
+ * Check if a component is a memoized component.
+ * @param Component
+ * @returns {boolean}
+ */
+function isMemoComponent(Component: any) {
+  return !!(
+    typeof Component === 'object' &&
+    Component.$$typeof &&
+    (Component.$$typeof.toString() === 'Symbol(react.memo)' || Component.$$typeof.description === 'react.memo')
+  )
+}
+
+/**
+ * Check if a component can safely receive a ref prop.
+ * This includes class components, forwardRef components, and memoized components
+ * that wrap forwardRef or class components.
+ * @param Component
+ * @returns {boolean}
+ */
+function canReceiveRef(Component: any) {
+  // Check if it's a class component
+  if (isClassComponent(Component)) {
+    return true
+  }
+
+  // Check if it's a forwardRef component
+  if (isForwardRefComponent(Component)) {
+    return true
+  }
+
+  // Check if it's a memoized component
+  if (isMemoComponent(Component)) {
+    // For memoized components, check the wrapped component
+    const wrappedComponent = Component.type
+    if (wrappedComponent) {
+      return isClassComponent(wrappedComponent) || isForwardRefComponent(wrappedComponent)
+    }
+  }
+
+  return false
+}
+
+/**
+ * Check if we're running React 19+ by detecting if function components support ref props
+ * @returns {boolean}
+ */
+function isReact19Plus(): boolean {
+  // React 19 is detected by checking React version if available
+  // In practice, we'll use a more conservative approach and assume React 18 behavior
+  // unless we can definitively detect React 19
+  try {
+    // @ts-ignore
+    if (reactVersion) {
+      const majorVersion = parseInt(reactVersion.split('.')[0], 10)
+      return majorVersion >= 19
+    }
+  } catch {
+    // Fallback to React 18 behavior if we can't determine version
+  }
+  return false
+}
+
+export interface ReactRendererOptions {
+  /**
+   * The editor instance.
+   * @type {Editor}
+   */
+  editor: Editor
+
+  /**
+   * The props for the component.
+   * @type {Record<string, any>}
+   * @default {}
+   */
+  props?: Record<string, any>
+
+  /**
+   * The tag name of the element.
+   * @type {string}
+   * @default 'div'
+   */
+  as?: string
+
+  /**
+   * The class name of the element.
+   * @type {string}
+   * @default ''
+   * @example 'foo bar'
+   */
+  className?: string
+}
+
+type ComponentType<R, P> =
+  | ComponentClass<P>
+  | FunctionComponent<P>
+  | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>>
+
+/**
+ * The ReactRenderer class. It's responsible for rendering React components inside the editor.
+ * @example
+ * new ReactRenderer(MyComponent, {
+ *   editor,
+ *   props: {
+ *     foo: 'bar',
+ *   },
+ *   as: 'span',
+ * })
+ */
+export class ReactRenderer<R = unknown, P extends Record<string, any> = object> {
+  id: string
+
+  editor: Editor
+
+  component: any
+
+  element: HTMLElement
+
+  props: P
+
+  reactElement: ReactNode
+
+  ref: R | null = null
+
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
+  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 EditorWithContentComponent
+    this.props = props as P
+    this.element = document.createElement(as)
+    this.element.classList.add('react-renderer')
+
+    if (className) {
+      this.element.classList.add(...className.split(' '))
+    }
+
+    // If the editor is already initialized, we will need to
+    // synchronously render the component to ensure it renders
+    // together with Prosemirror's rendering.
+    if (this.editor.isInitialized) {
+      flushSync(() => {
+        this.render()
+      })
+    } else {
+      queueMicrotask(() => {
+        this.render()
+      })
+    }
+  }
+
+  /**
+   * Render the React component.
+   */
+  render(): void {
+    const Component = this.component
+    const props = this.props
+    const editor = this.editor as EditorWithContentComponent
+
+    // Handle ref forwarding with React 18/19 compatibility
+    const isReact19 = isReact19Plus()
+    const componentCanReceiveRef = canReceiveRef(Component)
+
+    const elementProps = { ...props }
+
+    // Always remove ref if the component cannot receive it (unless React 19+)
+    if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
+      delete elementProps.ref
+    }
+
+    // Only assign our own ref if allowed
+    if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
+      // @ts-ignore - Setting ref prop for compatible components
+      elementProps.ref = (ref: R) => {
+        this.ref = ref
+      }
+    }
+
+    this.reactElement = <Component {...elementProps} />
+
+    editor?.contentComponent?.setRenderer(this.id, this)
+  }
+
+  /**
+   * Re-renders the React component with new props.
+   */
+  updateProps(props: Record<string, any> = {}): void {
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+
+    this.render()
+  }
+
+  /**
+   * Destroy the React component.
+   */
+  destroy(): void {
+    const editor = this.editor as EditorWithContentComponent
+
+    editor?.contentComponent?.removeRenderer(this.id)
+    // If the consumer appended the element to the document (for example
+    // many demos append the renderer element to document.body), make sure
+    // we remove it here to avoid leaking DOM nodes / React roots.
+    try {
+      if (this.element && this.element.parentNode) {
+        this.element.parentNode.removeChild(this.element)
+      }
+    } catch {
+      // ignore DOM removal errors
+    }
+  }
+
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes: Record<string, string>): void {
+    Object.keys(attributes).forEach(key => {
+      this.element.setAttribute(key, attributes[key])
+    })
+  }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./Context.js";
+export * from "./EditorContent.js";
+export * from "./NodeViewContent.js";
+export * from "./NodeViewWrapper.js";
+export * from "./ReactMarkViewRenderer.js";
+export * from "./ReactNodeViewRenderer.js";
+export * from "./ReactRenderer.js";
+export * from "./types.js";
+export * from "./useEditor.js";
+export * from "./useEditorState.js";
+export * from "./useReactNodeView.js";
+export * from "@blockslides/core";

package/src/menus/BubbleMenu.tsx

@@ -0,0 +1,89 @@
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'
+import { useCurrentEditor } from '@blockslides/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
+  React.HTMLAttributes<HTMLDivElement>
+
+export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
+  (
+    {
+      pluginKey = 'bubbleMenu',
+      editor,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow = null,
+      getReferencedVirtualElement,
+      options,
+      children,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const menuEl = useRef(document.createElement('div'))
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    useEffect(() => {
+      const bubbleMenuElement = menuEl.current
+      bubbleMenuElement.style.visibility = 'hidden'
+      bubbleMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      const attachToEditor = editor || currentEditor
+
+      if (!attachToEditor) {
+        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
+        return
+      }
+
+      const plugin = BubbleMenuPlugin({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        appendTo,
+        pluginKey,
+        shouldShow,
+        getReferencedVirtualElement,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)
+          }
+        })
+      }
+    }, [
+      editor,
+      currentEditor,
+      pluginKey,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options,
+    ])
+
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)