Implement actions

[mvanassche]

Inspirations are

• the wysiwyg Toast UI.
• Also, a good inspiration of how user interactions should work is Word (Microsoft Office).
• tinyMCE can also be used for inspiration.

The Markdown specification should be respected: gfm, a very good grammar definition: ast

The actions are:

• Create a paragraph: by default when user put the cursor on an empty document, a paragraph is created

• Switch line to header-1…6, paragraph, ordered list item, unordered list item:

  • cursor is on a line, the line is switched to the desired type.
  • If the cursor was in the middle of a paragraph, the paragraph is potentially split into two: content before that line (if any), and content after that line (if any)

• Create a Thematic breaks at the cursor level

  • The current paragraph is potentially split at the cursor

• Turn on/off inlines styles: bold, italic, strikethrough (warning that the selection may be across different existing styles and result in different DOM element structure)

  • These styles can be combined with each other
  • These styles can be applied on parts of text of a paragraph, header, list-item

• Turn on/off code-span (note inline styles cannot be combined in code-span)

  • For selection, the text becomes code-span (all styles dropped)

• On a table, allow to add/remove columns and rows (contextual hover/fab button?)

• Make a list item become a task (or the opposite, make a task list item become a simple list item)

• Make a list item go one level down or one level up

  • This potentially break existing list in two, and creates a sub-list

• Create a code block

• Edit code block info-string/lang (the rest of the line after the 3 backtiks

• Add a link, or change selection to become a link, edit the link

• Add image as base64 (readAsDataURL ? )

• Create a table at the cursor level

  • The current paragraph is potentially split at the cursor

For style change with unselected text, I propose to use the Word user interaction: it changes the current word to that style if the cursor is in the middle of the word.

• For inline styles, web-components (very simple though) needs to be created.