neetoEditor revamp

[AbhayVAshokan]

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 #1163
  • 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. Move all common packages to peer dependencies. #1134
• Performance audit #1135
• UI Improvement
  • Improve the UI of the editor fixed menu #1105
  • Disable the slash command menu. #1106
  • Implement responsive Menu using three dot menu approach #1112
  • Fix the UI issue in the highlight feature which occasionally sets the background color of the text to white instead of the highlighted color. #1122
  • Fix the UI issues in the upload modals in small screens. #1121
  • Audit individual editor elements and improve the writing experience.
  • Audit and improve the Link component. #1108
  • Audit and improve the Mention component. #1115
  • Improvise the UI of the upload progress modal. #1156
  • Fix the UI of the empty state of the inline attachment. #1157
• Create a playground for neetoEditor in the storybook using the live examples plugin. #1158
• Improving the writing experience:
  • https://github.com/bigbinary/neeto-molecules/issues/1347

---

1. Why do people prefer other editors over neetoEditor?

---

• UI Improvements round 2
  • Editor table revamp #1159
  • Revamp the design of emoji picker #1160
  • Revamp the Mentions component. #1161
  • Revamp the Variables component. #1162

---

• 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.

#1122
#1131
#1126
#1130
#1132
#1123
#1133
#1134
#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.