steven-tey / novel

Notion-style WYSIWYG editor with AI-powered autocompletion.
https://novel.sh
Apache License 2.0
12.47k stars 1.03k forks source link

Unable to use Editor as a JSX component #296

Closed tarn-jihas closed 6 months ago

tarn-jihas commented 7 months ago

Provide environment information

System: OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur) CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz Memory: 16.45 GB / 31.18 GB Container: Yes Shell: 5.2.15 - /bin/bash Binaries: Node: 20.11.0 - ~/Documents/dev_bin/node/bin/node npm: 10.2.4 - ~/Documents/dev_bin/node/bin/npm

Describe the bug

I'm trying to implement the Editor in my app but i'm getting the following error in Webstorm:

TS2786: Editor cannot be used as a JSX component. Its type typeof Editor is not a valid JSX element type.

Code:

"use client";

import { Editor } from "novel";
import React from "react";
interface MainTemplateProps {
  onContent: (content: string) => void;
}
export default function MainTemplate({ onContent }: MainTemplateProps) {
  return (
    <div className="bg-gray-100 min-h-screen py-12">
      <div className="font-sans text-gray-400 w-full container max-w-[700px] mx-auto pb-8 bg-white text-lg">

        <div className="mx-6 py-7">
          <Editor />

        </div>
      </div>
    </div>
  );
}

Any feedback would be appreciated, thanks!

Link to reproduction

/

To reproduce

Import Editor from novel in NextJS 14 project and try to add Editor component in JSX.

Additional information

No response

johot commented 7 months ago

I am seeing the same in a brand new vite + typescript project :(

andrewdoro commented 7 months ago

Hey I'll rename Editor to EditorInstance (it's just a type now), because of 0.20 being a breaking release we no longer export a single component. You can look in the documentation on how to set it up Docs

You can also check this project demo for full code Here

johot commented 6 months ago

Thanks @andrewdoro then I guess the only problem is the outdated install info in readme.md maybe just remove it and point to novel.sh to avoid confusion?

andrewdoro commented 6 months ago

Hey, I will update the docs on github and novel.sh to fix this confusion. Sorry for the breaking stuff I just wanted to move fast.