Quote Callouts

[Arkshine]

Here’s an update that modernizes the component and brings rich text editor support!
It might need some polish or may have unforeseen edge cases, but I believe it’s a fair good start.

In short

• Adds Rich text editor support (see below for a detailed overview)
• Converts rendering to a glimmer component
• Fixes CSS color with nested callouts
• Fixes CSS color with alias
• The fold animation should be smoother
• Adds callout_transition_duration_ms setting (fold animation)
• Adds Ctrl + q shortcut to insert a default callout.
  It works on both editors, and the shortcut is added to the Keyboard Shortcut modal
  Images

  

  
  

  

• Chat: Adds a button in the toolbar to insert a default callout
  Images

  

  
  

  

  
  

  

• Markdown Preview: Adds the ability to change the type by clicking on the icon
  Image

  

Rich text editor

Let’s talk about the rich text editor and what to expect!

Creating callouts:

You have four ways to insert callouts:

• Keyboard shortcut
• Toolbar
• Input rules
  • /callout<:type>
  • !!<type>
• Paste support
  Video

Editing callouts

The controls to edit a callout appear only when you select it before.

• Type chooser
  By clicking on the icon, a floating menu will appear.
• Custom Title
  Supports inline formatting and emoji
• Folding
  Set callouts as collapsible. It can be accessed from the options menu.
  Video

Organizing callouts

• Move controls

  • Desktop
    There is a handle that you grab to drag and drop the callout.
  • Touch device
    You move callouts up/down or nest them into adjacent callouts. It’s disabled by default to avoid bloat in the view, since that’s not something you will do often. You can toggle in the options.
  Video

• Keyboard navigation
  This helps make it easier to move in and out of nested callouts.
  It might require some future adjustments to make the behavior consistent in this version.

  • ← At the start of the title, the callout chooser will open automatically.
  • ↑ ↓ Inside a callout body with no paragraph to land on, it will create one; if you exit with empty content, the paragraph is removed.
  • Enter inside the title moves the cursor into the body (and creates one if necessary).
  Video

• Click-to-insert

  • In areas where there is no paragraph, you can click inside to open a paragraph.
  • If you prefer, you can also use buttons to open a paragraph inside or outside a callout.
    Video

Possibly, later, I will look for:

• input rules autocompletion
• improve color using modern CSS, to ensure consistency and visibility, especially in dark mode.

• I wish to remove all the settings and focus on simplicity first, with advanced customisation with CSS only, but it’s too late for that

Special thanks to Moin for giving me feedback.

That’s it. Let me know what you think. Feedback is very welcome!