@blockslides/react 0.1.0

package/src/Context.tsx

@@ -0,0 +1,60 @@
+import type { Editor } from '@blockslides/core'
+import type { HTMLAttributes, ReactNode } from 'react'
+import React, { createContext, useContext, useMemo } from 'react'
+
+import { EditorContent } from './EditorContent.js'
+import type { UseEditorOptions } from './useEditor.js'
+import { useEditor } from './useEditor.js'
+
+export type EditorContextValue = {
+  editor: Editor | null
+}
+
+export const EditorContext = createContext<EditorContextValue>({
+  editor: null,
+})
+
+export const EditorConsumer = EditorContext.Consumer
+
+/**
+ * A hook to get the current editor instance.
+ */
+export const useCurrentEditor = () => useContext(EditorContext)
+
+export type EditorProviderProps = {
+  children?: ReactNode
+  slotBefore?: ReactNode
+  slotAfter?: ReactNode
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>
+} & UseEditorOptions
+
+/**
+ * This is the provider component for the editor.
+ * It allows the editor to be accessible across the entire component tree
+ * with `useCurrentEditor`.
+ */
+export function EditorProvider({
+  children,
+  slotAfter,
+  slotBefore,
+  editorContainerProps = {},
+  ...editorOptions
+}: EditorProviderProps) {
+  const editor = useEditor(editorOptions)
+  const contextValue = useMemo(() => ({ editor }), [editor])
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <EditorContext.Provider value={contextValue}>
+      {slotBefore}
+      <EditorConsumer>
+        {({ editor: currentEditor }) => <EditorContent editor={currentEditor} {...editorContainerProps} />}
+      </EditorConsumer>
+      {children}
+      {slotAfter}
+    </EditorContext.Provider>
+  )
+}

package/src/Editor.ts

@@ -0,0 +1,15 @@
+import type { Editor } from "@blockslides/core";
+import type { ReactPortal } from "react";
+
+import type { ReactRenderer } from "./ReactRenderer.js";
+
+export type EditorWithContentComponent = Editor & {
+  contentComponent?: ContentComponent | null;
+};
+export type ContentComponent = {
+  setRenderer(id: string, renderer: ReactRenderer): void;
+  removeRenderer(id: string): void;
+  subscribe: (callback: () => void) => () => void;
+  getSnapshot: () => Record<string, ReactPortal>;
+  getServerSnapshot: () => Record<string, ReactPortal>;
+};

package/src/EditorContent.tsx

@@ -0,0 +1,229 @@
+import type { Editor } from '@blockslides/core'
+import type { ForwardedRef, HTMLProps, LegacyRef, MutableRefObject } from 'react'
+import React, { forwardRef } from 'react'
+import ReactDOM from 'react-dom'
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
+
+import type { ContentComponent, EditorWithContentComponent } from './Editor.js'
+import type { ReactRenderer } from './ReactRenderer.js'
+
+const mergeRefs = <T extends HTMLDivElement>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>) => {
+  return (node: T) => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node)
+      } else if (ref) {
+        ; (ref as MutableRefObject<T | null>).current = node
+      }
+    })
+  }
+}
+
+/**
+ * This component renders all of the editor's node views.
+ */
+const Portals: React.FC<{ contentComponent: ContentComponent }> = ({ contentComponent }) => {
+  // For performance reasons, we render the node view portals on state changes only
+  const renderers = useSyncExternalStore(
+    contentComponent.subscribe,
+    contentComponent.getSnapshot,
+    contentComponent.getServerSnapshot,
+  )
+
+  // This allows us to directly render the portals without any additional wrapper
+  return <>{Object.values(renderers)}</>
+}
+
+export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
+  editor: Editor | null
+  innerRef?: ForwardedRef<HTMLDivElement | null>
+}
+
+function getInstance(): ContentComponent {
+  const subscribers = new Set<() => void>()
+  let renderers: Record<string, React.ReactPortal> = {}
+
+  return {
+    /**
+     * Subscribe to the editor instance's changes.
+     */
+    subscribe(callback: () => void) {
+      subscribers.add(callback)
+      return () => {
+        subscribers.delete(callback)
+      }
+    },
+    getSnapshot() {
+      return renderers
+    },
+    getServerSnapshot() {
+      return renderers
+    },
+    /**
+     * Adds a new NodeView Renderer to the editor.
+     */
+    setRenderer(id: string, renderer: ReactRenderer) {
+      renderers = {
+        ...renderers,
+        [id]: ReactDOM.createPortal(renderer.reactElement, renderer.element, id),
+      }
+
+      subscribers.forEach(subscriber => subscriber())
+    },
+    /**
+     * Removes a NodeView Renderer from the editor.
+     */
+    removeRenderer(id: string) {
+      const nextRenderers = { ...renderers }
+
+      delete nextRenderers[id]
+      renderers = nextRenderers
+      subscribers.forEach(subscriber => subscriber())
+    },
+  }
+}
+
+export class PureEditorContent extends React.Component<
+  EditorContentProps,
+  { hasContentComponentInitialized: boolean }
+> {
+  editorContentRef: React.RefObject<any>
+
+  initialized: boolean
+
+  unsubscribeToContentComponent?: () => void
+
+  constructor(props: EditorContentProps) {
+    super(props)
+    this.editorContentRef = React.createRef()
+    this.initialized = false
+
+    this.state = {
+      hasContentComponentInitialized: Boolean((props.editor as EditorWithContentComponent | null)?.contentComponent),
+    }
+  }
+
+  componentDidMount() {
+    this.init()
+  }
+
+  componentDidUpdate() {
+    this.init()
+  }
+
+  init() {
+    const editor = this.props.editor as EditorWithContentComponent | null
+
+    if (editor && !editor.isDestroyed && editor.options.element) {
+      if (editor.contentComponent) {
+        return
+      }
+
+      const element = this.editorContentRef.current
+
+      element.append(editor.view.dom)
+
+      editor.setOptions({
+        element,
+      })
+
+      editor.contentComponent = getInstance()
+
+      // Has the content component been initialized?
+      if (!this.state.hasContentComponentInitialized) {
+        // Subscribe to the content component
+        this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
+          this.setState(prevState => {
+            if (!prevState.hasContentComponentInitialized) {
+              return {
+                hasContentComponentInitialized: true,
+              }
+            }
+            return prevState
+          })
+
+          // Unsubscribe to previous content component
+          if (this.unsubscribeToContentComponent) {
+            this.unsubscribeToContentComponent()
+          }
+        })
+      }
+
+      editor.createNodeViews()
+
+      this.initialized = true
+    }
+  }
+
+  componentWillUnmount() {
+    const editor = this.props.editor as EditorWithContentComponent | null
+
+    if (!editor) {
+      return
+    }
+
+    this.initialized = false
+
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {},
+      })
+    }
+
+    if (this.unsubscribeToContentComponent) {
+      this.unsubscribeToContentComponent()
+    }
+
+    editor.contentComponent = null
+
+    // try to reset the editor element
+    // may fail if this editor's view.dom was never initialized/mounted yet
+    try {
+      if (!editor.view.dom?.firstChild) {
+        return
+      }
+
+      // TODO using the new editor.mount method might allow us to remove this
+      const newElement = document.createElement('div')
+
+      newElement.append(editor.view.dom)
+
+      editor.setOptions({
+        element: newElement,
+      })
+    } catch {
+      // do nothing, nothing to reset
+    }
+  }
+
+  render() {
+    const { editor, innerRef, ...rest } = this.props
+
+    return (
+      <>
+        <div ref={mergeRefs(innerRef, this.editorContentRef)} {...rest} />
+        {/* @ts-ignore */}
+        {editor?.contentComponent && <Portals contentComponent={editor.contentComponent} />}
+      </>
+    )
+  }
+}
+
+// EditorContent should be re-created whenever the Editor instance changes
+const EditorContentWithKey = forwardRef<HTMLDivElement, EditorContentProps>(
+  (props: Omit<EditorContentProps, 'innerRef'>, ref) => {
+    const key = React.useMemo(() => {
+      return Math.floor(Math.random() * 0xffffffff).toString()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.editor])
+
+    // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+    return React.createElement(PureEditorContent, {
+      key,
+      innerRef: ref,
+      ...props,
+    })
+  },
+)
+
+export const EditorContent = React.memo(EditorContentWithKey)

package/src/NodeViewContent.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+import React from 'react'
+
+import { useReactNodeView } from './useReactNodeView.js'
+
+export type NodeViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'div'> = {
+  as?: NoInfer<T>
+} & ComponentProps<T>
+
+export function NodeViewContent<T extends keyof React.JSX.IntrinsicElements = 'div'>({
+  as: Tag = 'div' as T,
+  ...props
+}: NodeViewContentProps<T>) {
+  const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView()
+
+  return (
+    // @ts-ignore
+    <Tag
+      {...props}
+      ref={nodeViewContentRef}
+      data-node-view-content=""
+      style={{
+        whiteSpace: 'pre-wrap',
+        ...props.style,
+      }}
+    >
+      {nodeViewContentChildren}
+    </Tag>
+  )
+}

package/src/NodeViewWrapper.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { useReactNodeView } from './useReactNodeView.js'
+
+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 (
+    // @ts-ignore
+    <Tag
+      {...props}
+      ref={ref}
+      data-node-view-wrapper=""
+      onDragStart={onDragStart}
+      style={{
+        whiteSpace: 'normal',
+        ...props.style,
+      }}
+    />
+  )
+})

package/src/ReactMarkViewRenderer.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import type { MarkViewProps, MarkViewRenderer, MarkViewRendererOptions } from '@blockslides/core'
+import { MarkView } from '@blockslides/core'
+import React from 'react'
+
+// import { flushSync } from 'react-dom'
+import { ReactRenderer } from './ReactRenderer.js'
+
+export interface MarkViewContextProps {
+  markViewContentRef: (element: HTMLElement | null) => void
+}
+export const ReactMarkViewContext = React.createContext<MarkViewContextProps>({
+  markViewContentRef: () => {
+    // do nothing
+  },
+})
+
+export type MarkViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'span'> = {
+  as?: T
+} & Omit<React.ComponentProps<T>, 'as'>
+
+export const MarkViewContent = <T extends keyof React.JSX.IntrinsicElements = 'span'>(
+  props: MarkViewContentProps<T>,
+) => {
+  const { as: Tag = 'span', ...rest } = props
+  const { markViewContentRef } = React.useContext(ReactMarkViewContext)
+
+  return (
+    // @ts-ignore
+    <Tag {...rest} ref={markViewContentRef} data-mark-view-content="" />
+  )
+}
+
+export interface ReactMarkViewRendererOptions extends MarkViewRendererOptions {
+  /**
+   * The tag name of the element wrapping the React component.
+   */
+  as?: string
+  className?: string
+  attrs?: { [key: string]: string }
+}
+
+export class ReactMarkView extends MarkView<React.ComponentType<MarkViewProps>, ReactMarkViewRendererOptions> {
+  renderer: ReactRenderer
+  contentDOMElement: HTMLElement
+
+  constructor(
+    component: React.ComponentType<MarkViewProps>,
+    props: MarkViewProps,
+    options?: Partial<ReactMarkViewRendererOptions>,
+  ) {
+    super(component, props, options)
+
+    const { as = 'span', attrs, className = '' } = options || {}
+    const componentProps = { ...props, updateAttributes: this.updateAttributes.bind(this) } satisfies MarkViewProps
+
+    this.contentDOMElement = document.createElement('span')
+
+    const markViewContentRef: MarkViewContextProps['markViewContentRef'] = el => {
+      if (el && !el.contains(this.contentDOMElement)) {
+        el.appendChild(this.contentDOMElement)
+      }
+    }
+    const context: MarkViewContextProps = {
+      markViewContentRef,
+    }
+
+    // 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 ReactMarkViewProvider: React.FunctionComponent<MarkViewProps> = React.memo(componentProps => {
+      return (
+        <ReactMarkViewContext.Provider value={context}>
+          {React.createElement(component, componentProps)}
+        </ReactMarkViewContext.Provider>
+      )
+    })
+
+    ReactMarkViewProvider.displayName = 'ReactMarkView'
+
+    this.renderer = new ReactRenderer(ReactMarkViewProvider, {
+      editor: props.editor,
+      props: componentProps,
+      as,
+      className: `mark-${props.mark.type.name} ${className}`.trim(),
+    })
+
+    if (attrs) {
+      this.renderer.updateAttributes(attrs)
+    }
+  }
+
+  get dom() {
+    return this.renderer.element
+  }
+
+  get contentDOM() {
+    return this.contentDOMElement
+  }
+}
+
+export function ReactMarkViewRenderer(
+  component: React.ComponentType<MarkViewProps>,
+  options: Partial<ReactMarkViewRendererOptions> = {},
+): MarkViewRenderer {
+  return props => new ReactMarkView(component, props, options)
+}