RangeError: Schema is missing its top node type ('doc')

[regularuserrr]

Provide environment information

Just pure next project

Describe the bug

When I'm using last version of Novel I got this error RangeError: Schema is missing its top node type ('doc')

Link to reproduction

N / A

To reproduce

1.Install novel 2. import { EditorContent, EditorRoot } from 'novel'; 3.Use this code <EditorRoot> <EditorContent className="relative block" onUpdate={({ editor }) => { }} > {/* children go here */}</EditorContent> </EditorRoot> 4.Run app

Additional information

No response

[jonkurtis]

same

[arndvs]

@jonkurtis @regularuserrr - I was facign the same issue then came across this: https://github.com/steven-tey/novel/issues/351

After installing the other dependencies the doc issue went away. Now I'm trying to get the editor to show up.

Reviewing this: https://github.com/steven-tey/novel/issues/343#issuecomment-1992363411

It looks like we need to dive more into the source code to get an editor to work properly.

for example:

https://github.com/steven-tey/novel/blob/main/apps/web/components/tailwind/advanced-editor.tsx

[jonkurtis]

@jonkurtis @regularuserrr - I was facign the same issue then came across this: #351

After installing the other dependencies the doc issue went away. Now I'm trying to get the editor to show up.

Reviewing this: #343 (comment)

It looks like we need to dive more into the source code to get an editor to work properly.

for example:

https://github.com/steven-tey/novel/blob/main/apps/web/components/tailwind/advanced-editor.tsx

I was able to get it working by including the StarterKit extension. Error went away.

[arndvs]

@jonkurtis - can you please share what your editor code looks like?

[jonkurtis]

@arndvs

I am mainly just following https://github.com/steven-tey/novel/blob/main/apps/web/components/tailwind/advanced-editor.tsx But the primary change I have to make was exporting the individual extensions because spreading defaultExtensions did not work. So I replaced line 28 from the example: const extensions = [...defaultExtensions, slashCommand]; with this instead: const extensions = [ starterKit, placeholder, tiptapLink, tiptapImage, updatedImage, taskList, taskItem, horizontalRule, aiHighlight, slashCommand, ]

and I am importing them like this: import { aiHighlight, horizontalRule, placeholder, starterKit, taskItem, taskList, tiptapImage, tiptapLink, updatedImage, } from "./extensions"

and in extensions.ts I changed the export to: export { starterKit, placeholder, tiptapLink, tiptapImage, updatedImage, taskList, taskItem, horizontalRule, aiHighlight, }

then in tsconfig.json change: "moduleResolution": "node", to: "moduleResolution": "bundler",

[arndvs]

@jonkurtis - great thank you. That helped quite a bit.

Question for you. Is your placeholder working as expected?

When you create a new line there should be a placeholder that says "Press '/' for commands, or '++' for AI autocomplete..."

I'm exporting it out of the extensions and into the editor, but it's not showing up for me on the front-end when a new line is added.

I was reading though here: https://github.com/steven-tey/novel/issues/134 and found this:

const PlaceholderExtension = Placeholder.configure({
  placeholder: ({ node }) => {
    if (node.type.name === "heading") {
      return `Heading ${node.attrs.level}`;
    }
    return "Press '/' for commands, or '++' for AI autocomplete...";
  },
  includeChildren: true,
});

So I tried to add that to my extensions and export it out and import it into the editor, and still no luck.

Were you able to get the placeholder working?

Also, on another note - the drag and drop function isn't working on my editor as well. I'm curious if you've got that funcationality working on your end?

Thanks!

[arndvs]

Actually - nevermind. I needed to add the prosemirror.css and import it into my app. Leaving this here incase anyone comes across this issue in the future.