Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add formatting toolbars to documentation editor #9969

Closed
kazcw opened this issue May 16, 2024 · 3 comments
Closed

Add formatting toolbars to documentation editor #9969

kazcw opened this issue May 16, 2024 · 3 comments
Assignees
Labels
Milestone

Comments

@kazcw
Copy link
Contributor

kazcw commented May 16, 2024

Add two toolbars to the Lexical-based markdown editor:

  • A top toolbar containing actions and states that are relevant without a selection, such as Insert table.
  • A pop-up toolbar that shows when there is a selection, and includes only options for formatting the selected text, such as Italic.

The Lexical playground's toolbar and LexicalMenu in lexical-react can be used as the primary references; there is also a Vue port in lexical-vue, but it is out of date.

Design

Similar to the Lexical playground, but without any formatting options that are unrepresentable in markdown, and in the Enso visual style (fully-rounded elements, 16x16 icons, DropdownWidget, collection of side by side bars instead of single divided bar).

Top bar

  • Undo (icon=undo)1
  • Redo (icon=redo)1

  • Dropdown (icons needed for each entry): Normal (text icon?) / Heading (how many levels?) / Bulleted List / Numbered List / Checklist1 / Block Quote / Code Block

  • Bold (icon=bold)
  • Italic (icon=italic)
  • Insert Code Block (icon needed)
  • Insert Link (icon=connector)2
  • Dropdown (icon needed for dropdown and each entry): Strikethrough (icon=strike-through) / Subscript / Superscript / Clear Formatting (icon=remove-textstyle)

  • "Insert" dropdown (dropdown icon=add?, icons needed for entries): Horizontal Rule1 / Image3 icon=image / Table4 icon=table

Floating selection toolbar

(All icons same as top bar)

  • Bold
  • Italic
  • Subscript
  • Superscript
  • Code
  • Link

Footnotes

  1. Not in initial implementation, no specific plans. 2 3 4

  2. Will be added as part of Hyperlinks in comments should be clickable #9907 or later follow-up for link editing.

  3. Will be added as part of Uploading/pasting images in documentation panel. #10059.

  4. Will be added as part of Add table display support to documentation editor #9970.

@kazcw kazcw added the -gui label May 16, 2024
@kazcw kazcw added this to the Beta Release milestone May 16, 2024
@kazcw kazcw self-assigned this May 21, 2024
@enso-bot
Copy link

enso-bot bot commented May 21, 2024

Keziah Wesley reports a new STANDUP for today (2024-05-21):

Progress: Implemented selection formatting toolbar. Implemented copy button (#9878). Debugged suggestion db issue (#9831). It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Format toolbar icons; top formatting bar.

@enso-bot
Copy link

enso-bot bot commented May 24, 2024

Keziah Wesley reports a new STANDUP for yesterday (2024-05-22):

Progress: Implementing top bar UI components. It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Formatting logic.

@enso-bot
Copy link

enso-bot bot commented May 24, 2024

Keziah Wesley reports a new STANDUP for today (2024-05-23):

Progress: Implemented top bar formatting logic. It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Pick a 1-point issue.

@kazcw kazcw linked a pull request May 24, 2024 that will close this issue
4 tasks
@kazcw kazcw closed this as completed Jul 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant