prosemirror-react-nodeviews

KO | EN

gitlite — search

#javascript #react #ai #golang #machine-learning #rust #deep-learning #linux #macos #java #awesome #security #mcp #ios

prosemirror-react-nodeviews

(★ 76)

An example of how to use React components as NodeViews for ProseMirror

prosemirror-react-nodeviews Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ProseMirror React NodeViews

This is an example repo of how to use React FC components as NodeViews for ProseMirror

![Screenshot](https://raw.githubusercontent.com/johnkueh/prosemirror-react-nodeviews/master/public/Screenshot.png)

How to use:

### Wrap your root component with `ReactNodeViewPortalsProvider`

Lets use React portals to preserve your app context (css-in-js, data, etc) when the NodeViews are rendered. `ReactNodeViewPortalsProvider` is a convenient way to help you with this.

```tsx
import { createReactNodeView } from "./ReactNodeView";
import ReactNodeViewPortalsProvider from "./ReactNodeViewPortals";

const App: React.FC<Props> = props => {
  return (
    <ReactNodeViewPortalsProvider>
      <App {...props} />
    </ReactNodeViewPortalsProvider>
  );
};

export default App;
```

### Loading ProseMirror with React components

This is how you initialize your ProseMirror editor

```tsx
import React from "react";
import { useReactNodeViewPortals } from "./ReactNodeViewPortals";

const ProseMirror: React.FC<Props> = () => {
  const { createPortal } = useReactNodeViewPortals();
  const editorViewRef = useRef(null);

useEffect(() => {
    const editorViewDOM = editorViewRef.current;
    if (editorViewDOM) {
      createEditorView(editorViewDOM);
    }
  }, [createEditorView]);

return <div ref={editorViewRef}></div>;
};

export default ProseMirror;
```

### Getting node props within your React components

Each of the React components have been wrapped with a context provider before sending it through the portal, so its easy to access the nodeview's props:

```tsx
import { Heading } from "@chakra-ui/core";
import React from "react";
import { useReactNodeView } from "./ReactNodeView";

const HeadingBlock: React.FC = ({ children }) => {
  const context = useReactNodeView();
  const level = context.node?.attrs.level;
  return <Heading fontSize={`${7 - level}xl`}>{children}</Heading>;
};

export default HeadingBlock;
```

```tsx
import { Box, Image, Text } from "@chakra-ui/core";
import React from "react";
import { useReactNodeView } from "./ReactNodeView";

const ImageBlock: React.FC = () => {
  const context = useReactNodeView();
  const attrs = context.node?.attrs;
  return (
    <Box>
      <Image alt={attrs?.alt} src={attrs?.src} />
      {attrs?.title && (
        <Text mt={2} color="gray.500" textAlign="center" fontSize="xs">
          {attrs.title}
        </Text>
      )}
    </Box>
  );
};

export default ImageBlock;
```

prosemirror-react-nodeviews

prosemirror-react-nodeviews Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

prosemirror-react-nodeviews

prosemirror-react-nodeviews Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README