diff --git a/docs/src/demos/Examples/Default/React/index.jsx b/docs/src/demos/Examples/Default/React/index.jsx
index 3f8d89df..b54f9e66 100644
--- a/docs/src/demos/Examples/Default/React/index.jsx
+++ b/docs/src/demos/Examples/Default/React/index.jsx
@@ -1,6 +1,7 @@
import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
+import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
+import Paragraph from '@tiptap/extension-paragraph'
import './styles.scss'
const MenuBar = ({ editor }) => {
@@ -125,38 +126,49 @@ const MenuBar = ({ editor }) => {
export default () => {
const editor = useEditor({
extensions: [
- ...defaultExtensions(),
+ Paragraph.extend({
+ addNodeView() {
+ return ReactNodeViewRenderer(({ selected }) => {
+ console.log({selected})
+ return (
+ noooode view {selected}
+ )
+ })
+ }
+ }),
+ ...defaultExtensions().filter(item => item.config.name !== 'paragraph'),
],
- content: `
-
- Hi there,
-
-
- this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-
-
- -
- That’s a bullet list with one …
-
- -
- … or two list items.
-
-
-
- Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-
- body {
- display: none;
-}
-
- I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-
-
- Wow, that’s amazing. Good work, boy! 👏
-
- — Mom
-
- `,
+ content: `test
`,
+// content: `
+//
+// Hi there,
+//
+//
+// this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+//
+//
+// -
+// That’s a bullet list with one …
+//
+// -
+// … or two list items.
+//
+//
+//
+// Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+//
+// body {
+// display: none;
+// }
+//
+// I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+//
+//
+// Wow, that’s amazing. Good work, boy! 👏
+//
+// — Mom
+//
+// `,
})
return (
diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx
index eb14d226..cf86bd0b 100644
--- a/packages/react/src/EditorContent.tsx
+++ b/packages/react/src/EditorContent.tsx
@@ -1,11 +1,67 @@
import React from 'react'
+import ReactDOM from 'react-dom'
import { Editor } from './Editor'
type EditorContentProps = {
editor: Editor | null
}
-export class PureEditorContent extends React.Component {
+// const Portals = ({ editor }: { editor: Editor | null }) => {
+// if (!editor?.contentComponent) {
+// return null
+// }
+
+// console.log('render portals')
+
+// return (
+// portaaals
+// )
+// }
+
+const Portals = ({ renderers }: { renderers: Map }) => {
+ return (
+
+ {Array.from(renderers).map(([key, renderer]) => {
+
+ // console.log({renderer})
+ // return (
+ //
{value}
+ // )
+
+ // return React.createElement(renderer.component)
+
+
+ // return (
+ //
+ // {ReactDOM.createPortal(
+ // React.createElement(renderer.component),
+ // renderer.teleportElement,
+ // )}
+ //
+ // )
+
+ return (
+
+ {renderer.bla}
+
+ )
+
+ // return ReactDOM.createPortal(
+ // React.createElement(renderer.component),
+ // renderer.teleportElement,
+ // )
+ })}
+