[WEB-460] refactor: editors, chore: pages list improvement

[aaryan610]

Document editor refactoring

This PR is targets keeping the document editor lean and exposing APIs to control the editor from outside using Refs and useImperativeHandle instead of having the application logic inside the editor itself taking control from React.

Ref methods exposed currently

The methods exposed to the parent forwarded ref (the web app holds onto this) by the useImperativeHandle exposed methods that holds on to the local child state (the initialised editor instance) to perform actions related to the editor.

useImperativeHandle(
    forwardedRef,
    () => ({
      clearEditor: () => {
        editorRef.current?.commands.clearContent();
      },
      setEditorValue: (content: string) => {...},
      setEditorValueAtCursorPosition: (content: string) => {...},
      executeMenuItemCommand: (itemName: EditorMenuItemNames) => {...},
      isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {...},
      onStateChange: (callback: () => void) => {...},
      getMarkDown: (): string => {...},
      scrollSummary: (marking): void => {...},
    }),
    [....]
  )

And @aaryan610 has completely separated the UI in a modular way that was previously messy and tied to the document editor into the web app and control any editor related tasks using the above methods.

A careful consideration

ref maintains its state across renders

So we're taking control from React, that comes at a cost...things aren't so reactive anymore (pun intended).

UI changes

Typography

Updated the line height, margins, font weight, font size of the headings and paragraphs making the document much more readable and consistent.

Before	After

Table

1. Updated the UI of the table.
2. Updated the UI of row and column options dropdown.
3. Added a scrollbar to the table if the table is scrollable.

To-do list

1. To-do lists now have a much better looking checkbox.
2. When a to-do is checked(or marked as done) the text color changes to a subtler one.

Before	After

Code block

1. Improved the padding of the code block.
2. Disabled slash commands inside the code block.
3. Decreased the tab indent width of the code block from 4 to 2.
4. Added an option to Copy code blocks.

Before	After

Inline code

1. Updated the text and background colors.
2. Updated the caret color inside inline code to make it easy to identify where the cursor is.
3. Inline code is now much more intuitive to use, especially using the fake cursor approach and you can always guarantee based on the cursor position where you're going to type.
4. You can now select any word and press backtick to make it a inline code block
5. You can exit the inline code block even at the start of the line to start typing before a inline code block (Slack, when?)
6. Inline code blocks also work backwards now unlike most popular editors like Notion/Slack.

inline.code.blocks.mp4

Before	After

New dark mode colors

Before	After

New features

Full width toggle

Users can now turn the full width option on to make the page body occupy full width, hiding the outline section.

Screen.Recording.2024-04-05.at.7.14.47.PM.mov

Auto merging of lists

1. Ordered and Unordered List items and nested list items while being deleted supported automerging at every transaction.
2. Tab indentation on Lists works as intended even after merging two lists.
3. Weird padding issues added by typography plugin fixed.

list.deletion.and.auto.merging.mp4

Drag and Drop

1. Drag handles can be clicked on now to select a node (even works with a list item with nested children).
2. A block menu then pops up which can be used to either delete or duplicate the selected node, super helpful while deleting huge blocks like tables

drag.and.drop.lists.mp4

Bug fixes

1. Image resizing works properly now and clicking on the resize handles doesn't have any funky behaviours.
2. Copying list item from one place and pasting it to another doesn't copy the list item number along.

Pages list improvements

New tabs and list options

1. The list page now features only 3 tabs- Public, Private and Archived.

2. Page access(public/private) can now be changed from the quick actions dropdown directly, an option missing currently.

Screen.Recording.2024-04-05.at.1.35.34.PM.mov

Ordering, searching and filtering

Screen.Recording.2024-04-05.at.1.41.26.PM.mov

Plane issues: WEB-74, WEB-119, WEB-426, WEB-430, WEB-460, WEB-480, WEB-528, WEB-718