Skip to main content

Components

Main Components:

ProseMirror.tsx:

  • This is the main wrapper component for integrating ProseMirror with React. It uses the EditorContext and manages the ProseMirror instance.

Editor.tsx:

  • A component that uses the useEditorView hook and provides the EditorContext to its children.

NodeViews.tsx:

  • Handles rendering of custom node views using React components.

Hooks:

useEditorView.ts:

  • Creates and manages the ProseMirror EditorView.

useEditorEffect.ts:

  • A custom hook for running effects after the EditorView has been updated.

useEditorEventCallback.ts:

  • Provides a stable callback that can access the latest EditorView.

useEditorEventListener.ts:

  • Attaches event listeners to the EditorView.

useNodeViews.tsx:

  • Manages custom React-based node views for ProseMirror.

useNodePos.tsx:

  • helps with getting the position of nodes in the document.

useEditorState.ts:

  • Provides access to the current EditorState.

Contexts:

EditorContext.ts:

  • Provides the EditorView and EditorState to child components.

NodeViewsContext.ts:

  • Manages the context for custom node views.

Plugins:

react.ts:

  • A ProseMirror plugin that helps maintain the React component hierarchy within ProseMirror.

componentEventListeners.ts:

  • manages event listeners for React components within ProseMirror.

NodeViews:

createReactNodeViewConstructor.tsx:

  • Helps create NodeView constructors that use React components.

Utilities:

phrasingContentTags.js:

  • contains utility functions or constants related to phrasing content in HTML.