neetoEditor revamp

[AbhayVAshokan]

trafficstars

This issue aims to revamp neetoEditor to solve all the UI, UX, and performance challenges and make it on par with the competitors.

Video explanation: https://abhay-ashokan.neetorecord.com/watch/dd81c94a-72e9-4e99-a0d5-74806a92d676

• [ ] Convert neetoEditor to a controlled component
  • One of the main difficulties of using neetoEditor is that it can be only used as an uncontrolled component. This has a negative developer experience and needs the developers to directly use the editor API to mutate the content.
  • The controlled version of neetoEditor should not impact the performance.
• [ ] Update all Tiptap packages to the latest version.
• [ ] Performance audit
  • How does the editor perform in Formik forms.
  • How does the editor perform in complex forms (neetoPlanner)
• [ ] UI Improvements (Notion style editor):
  • Improving the writing user experience
  • Add the reorder icon UI.
  • Improve the UI for slash commands.
  • Improve the UI for Menu (Bubble and Fixed).
  • Add smoother animations and better UI at the block level.
• [ ] Create a playground for neetoEditor in the storybook using the live examples plugin.

---

1. Why do people prefer other editors over neetoEditor?

---

• [ ] UI Improvements round 2
  • Table
  • Emoji picker
  • Mentions
  • Variables

---

• We can release the new changes in a beta branch and directly use it in neetoChangelog. This would iteratively improve the editor experience before finally releasing it to production.

References

1. https://templates.tiptap.dev/
2. Notion

@neerajsingh0101 LMK your thoughts.

enhancement _t

cc: @sumanranjanpanda, @sandip-mane, @Aditya-Bakshi5, @deepakjosp

[neerajsingh0101]

@AbhayVAshokan https://neerajsingh0101.neetorecord.com/watch/e3883d0a-4452-4c43-b891-a18d716d97e0

[AbhayVAshokan]

@neerajsingh0101

Understood. The idea of this issue is to make sure that we have a good experience while using neetoEditor and not push newer features.

1. Temporarily disable slash commands: As you mentioned, slash commands are less likely to be used by users who are writing blogs. Let's temporarily disable the slash commands and push more on using the menu. If it looks good to everyone, we shall permanently remove it.
2. Improving the contrast: The menu can be much better. Increase the contrast of buttons, and increase the size of buttons. Audit every element rendered inside neetoEditor and make sure it stands out.
3. Audit all editor options: Audit individual options (Table, mentions, emoji, etc) and make sure that they have a usable UI and good accessibility (arrow keys and tabs).
4. Misc: Improve the writing experience. Write help documents in neetoKB and figure out the common issues while writing the document and improve it.

cc: @deepakjosp, @sumanranjanpanda

[neerajsingh0101]

@AbhayVAshokan sounds good.

[praveen-murali-ind]

@neerajsingh0101 @AbhayVAshokan Please check let me know your thoughts.

https://praveen-murali.neetorecord.com/watch/5bc8c4d3-9edc-4fdd-bd9a-947092ddeaa3

Before and after - Figma

[neerajsingh0101]

@praveen-murali-ind All the points you mentioned are valid. All the suggestions look solid. Let's roll with it.

[praveen-murali-ind]

@AbhayVAshokan @deepakjosp Please add the following issues to the Neeto Editor project board or to Abhay's board.

https://github.com/bigbinary/neeto-editor/issues/1122 https://github.com/bigbinary/neeto-editor/issues/1131 https://github.com/bigbinary/neeto-editor/issues/1126 https://github.com/bigbinary/neeto-editor/issues/1130 https://github.com/bigbinary/neeto-editor/issues/1132 https://github.com/bigbinary/neeto-editor/issues/1123 https://github.com/bigbinary/neeto-editor/issues/1133 https://github.com/bigbinary/neeto-editor/issues/1134 https://github.com/bigbinary/neeto-editor/issues/1135

[deepakjosp]

@AbhayVAshokan I've merged the feature branch to the main branch. For the rest of the sub issues let's create PR to the main branch.

[deepakjosp]

@AbhayVAshokan closing the epic since we completed all the sub issues.