Add variety of different types of formats

[ashrafchowdury]

Description

The current text editor does not support a variety of different types of formats, which limits its usability. For example, it does not support code blocks, block quotes, or tables. Adding these formats would make the text editor more versatile and useful for a wider range of tasks.

We can add:

• CodeBlock
• BlockQuote
• Horizontal Rule
• Tables etc

[ashrafchowdury]

I can add more useable formats to the editor, if you like the idea you can assign me to do this work.

[steven-tey]

CodeBlock, BlockQuote and HorizontalRule are actually all supported!

Would love to add tables though – feel free to PR! You can use Tiptap tables as reference but would love to make it have a similar UX as Notion's tables (hover to add rows/tables)

[ashrafchowdury]

I would love to create the Notion-like table. you can assign me to this issue.

The CodeBlock, BlockQuote, HorizontalRule are not listed on the selectors that's why I thought those are not implemented yet.

[ashrafchowdury]

Hey @steven-tey a quick question for you, I have to table design mockup for the editor, which one do you think is the best for users 👇

This is clean and very much user-friendly.

This is a bit complex and requires a lot of functionalities.

[steven-tey]

@ashrafchowdury thanks for checking – definitely the first one! Let's use the simple table in Notion as reference :)

[steven-tey]

Quick update: Codeblock and blockquote have been added to slash menu in https://github.com/steven-tey/novel/pull/35

[ashrafchowdury]

Hey @steven-tey 👋

I created the Table format and implemented it in the editor, now I want feedback from you to before making the pr-request

https://github.com/steven-tey/novel/assets/87828904/afce2907-6843-4f59-9280-d01a187b0de1

I have added:

• Adding & deleting Column
• Adding & deleting Row
• Delete Table
• A mune for the table

[steven-tey]

@ashrafchowdury looks incredible 🤯 only thing I can think of is the icons might not be clear enough 😅

Also, would it be possible to rearrange the columns?

Feel free to go ahead and add that PR and we can iterate on this!

P.S.: what does "a mune for the table" mean?

[mmailaender]

@steven-tey, @ashrafchowdury some suggestions for the icons:

If you like them, I provide the SVG code.

[ashrafchowdury]

@mmailaender we are using the lucide icon library for the project icons 👍

[mmailaender]

@mmailaender we are using the lucide icon library for the project icons 👍

Except from the first icon they are self crafted, because we had the same situation that @steven-tey talks about, that e.g. the lucid icons don't have expressive icons for table.

[mmailaender]

After thinking about the first approach, I think I'm not so happy with it. I would prefer a more context-aware table like e.g. Figma Tables (The icons would be also simpler)

https://github.com/steven-tey/novel/assets/87228994/1d56ed93-f06f-413b-b63a-0d05816db5eb (The table column delete in the video is happening with keyboard shortcut)

What do you think?

[steven-tey]

@mmailaender that one looks incredible! Similar concept to Notion's implementation, which I really like

Would be incredible if we can implement that in Novel!

[ashrafchowdury]

That looks really clean & awesome 😘

If we wanted to add that type of table then we have to spend a bit of time to build it from scratch.