search

hunghg255 / reactjs-tiptap-editor

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs
https://reactjs-tiptap-editor.vercel.app/
MIT License
180 stars 32 forks source link

feat: support conditional rendering and custom bubble menu #17

Closed condorheroblog closed 2 months ago

condorheroblog commented 2 months ago

Related issue: https://github.com/hunghg255/reactjs-tiptap-editor/issues/11

Regarding how to display the bubble menu, I've done some experiments. Here are the changes made in this update. The modifications are significant, so you can adopt them entirely or partially, and feel free to modify my code as needed.

  1. Build and packaging: I added SourceMap functionality. The editor has many features, and when errors occur, it's very difficult to debug. I believe SourceMap is essential, so I added SourceMap packaging functionality.

  2. Removed the 'bubble' property you added in the previous version, as it's no longer relevant after the redesign.

  3. The bubble menus in the system are now automatically loaded based on the plugins imported by the user.

  4. Users can disable the system's bubble menus. This is implemented through the 'bubbleMenu' property, where I used an object format to allow for potential future additions.

  5. Users can customize the bubble menu through the 'render' function of the 'bubbleMenu' property.

flowchart LR
    BM[Bubble Menu]  -->|Dynamically display plugin count| D1["`Automatically display based on user-imported plugins
For example, If the user hasn't imported the Bold plugin,
it won't show in BubbleMenuText`"]
    BM  --> |One bubble menu component is a plugin group| D2["`For example, ColumnsMenu, 
TableBubbleMenu, BubbleMenuLink...`"]
    BM -->  |User configurable| D3[bubbleMenu]
    D3 --> CC[columnConfig]
    CC --> CH[hidden]
    D3 --> TC[tableConfig]
    TC --> TH[hidden]
    D3 --> FMC[floatingMenuConfig]
    FMC --> FMH[hidden]
    D3 --> LC[linkConfig]
    LC --> LH[hidden]
    D3 --> TXC[textConfig]
    TXC --> TXH[hidden]
    D3 --> IC[imageConfig]
    IC --> IH[hidden]
    D3 --> VC[videoConfig]
    VC --> VH[hidden]
    D3 --> R[render]
    R --> RD[User fully customizes bubble menu]
vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
next-tiptap-4q2x ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 18, 2024 5:29am
condorheroblog commented 2 months ago

Oops, I forgot to tell you about this.

I changed the way components are exported, using named exports instead of default exports for all components. This makes it much easier to export components for user use.

By the way, I think it would be better to rename the RcTiptapEditor component to something like RichTextEditor or RichTextTiptapEditor. This would be more intuitive, and its parameter type could be RichTextEditorProps / RichTextTiptapEditorProps.

hunghg255 commented 2 months ago

Oops, I forgot to tell you about this.

I changed the way components are exported, using named exports instead of default exports for all components. This makes it much easier to export components for user use.

By the way, I think it would be better to rename the RcTiptapEditor component to something like RichTextEditor or RichTextTiptapEditor. This would be more intuitive, and its parameter type could be RichTextEditorProps / RichTextTiptapEditorProps.

yeah, we can rename it. RcTiptapEditor is an old name that I moved to from an old source

I set the prefix as 'rc', inspired by the 'rc' component of ant-design.

hunghg255 commented 2 months ago

thank you very much for your contribution