help: Document new formatting buttons.

Updates icons and adds instructions for formatting text using the new
formatting buttons in the compose box.

Fixes #27850.

help/bulleted-lists.md

@@ -6,6 +6,22 @@
 
 {start_tabs}
 
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **Bulleted list**
+   (<i class="zulip-icon zulip-icon-unordered-list"></i>) icon at the
+   bottom of the compose box to insert list formatting.
+
+!!! tip ""
+
+    You can also use the **Bulleted list**
+    (<i class="zulip-icon zulip-icon-unordered-list"></i>) icon
+    to remove existing list formatting from the current line or selected text.
+
 {tab|via-markdown}
 
 {!start-composing.md!}
@@ -20,20 +36,6 @@
     Pressing <kbd>Enter</kbd> on a blank list item will remove the list
     formatting on the current line.
 
-{tab|via-compose-box-buttons}
-
-{!start-composing.md!}
-
-1. _(optional)_ Select the text you want to format.
-
-1. Click the **Bulleted list** (<i class="fa fa-list-ul"></i>) icon at the
-   bottom of the compose box to insert list formatting.
-
-!!! tip ""
-
-    You can also use the **Bulleted list** (<i class="fa fa-list-ul"></i>) icon
-    to remove existing list formatting from the current line or selected text.
-
 {end_tabs}
 
 ## Examples

help/code-blocks.md

@@ -2,6 +2,59 @@
 
 {!code-blocks-intro.md!}
 
+## Insert code formatting
+
+{start_tabs}
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **Code** (<i class="zulip-icon zulip-icon-code"></i>) icon at the
+   bottom of the compose box to insert code formatting. The appropriate inline
+   or block formatting will be applied automatically depending on whether you
+   selected a whole line, part of a line, or multiple lines.
+
+!!! tip ""
+
+    You can also use the **Code** (<i class="zulip-icon zulip-icon-code"></i>)
+    icon to remove existing code formatting from the selected text.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To create an inline code span, use single backticks around the text:
+~~~
+`text`
+~~~
+   To create a code block, use triple backticks around the text:
+~~~
+```
+def f(x):
+    return x+1
+```
+~~~
+   To enable syntax highlighting, use triple backticks followed by one or more
+   letters, and select the desired programming language from the auto-complete
+   suggestions.
+~~~
+```python
+def fib(n):
+    # TODO: base case
+    return fib(n-1) + fib(n-2)
+```
+~~~
+
+!!! tip ""
+
+    You can also use `~~~` to start code blocks, or just indent the code 4 or more
+    spaces.
+
+{end_tabs}
+
 ## Examples
 
 {!code-blocks-examples.md!}

help/custom-emoji.md

@@ -42,7 +42,7 @@ emoji. Using REST API endpoints requires some technical expertise;
 You can replace a default emoji by adding a custom emoji of the same
 name. If an emoji has several names, you must use the emoji's primary name
 to replace it. You can find the primary name of an emoji by hovering over it
-in the [emoji picker](/help/emoji-and-emoticons#select-an-emoji-from-the-emoji-picker),
+in the [emoji picker](/help/emoji-and-emoticons#use-an-emoji-in-your-message),
 while the search box is empty (you may have to scroll down a bit to find it).
 
 ## Deactivate custom emoji

help/emoji-and-emoticons.md

@@ -8,10 +8,20 @@
 
 ## Use an emoji in your message
 
-### Enter an emoji name
-
 {start_tabs}
 
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Click the **smiley face** (<i class="zulip-icon zulip-icon-smile-bigger"></i>)
+   icon at the bottom of the compose box.
+
+1. Select an emoji. You can type to search, use the arrow keys, or click on
+   an emoji with your mouse.
+
+{tab|via-markdown}
+
 {!start-composing.md!}
 
 1. Type `:`, followed by a few letters from the emoji name, to see autocomplete
@@ -21,6 +31,12 @@
 1. Type the full emoji name followed by `:`, or select an emoji from the list of
    suggestions.
 
+{tab|via-paste}
+
+{!start-composing.md!}
+
+1. Paste an emoji copied from outside of Zulip directly into the compose box.
+
 {end_tabs}
 
 !!! tip ""
@@ -28,20 +44,6 @@
     You can hover over an emoji in the emoji picker, a message, or an [emoji
     reaction](/help/emoji-reactions) to learn its name.
 
-### Select an emoji from the emoji picker
-
-{start_tabs}
-
-{!start-composing.md!}
-
-1. Click the **smiley face** (<i class="fa fa-smile-o"></i>) icon at the
-   bottom of the compose box.
-
-1. Select an emoji. You can type to search, use the arrow keys, or click on
-   an emoji with your mouse.
-
-{end_tabs}
-
 ### Use an emoticon
 
 You can configure Zulip to convert emoticons into emoji, so that, e.g., `:)`
@@ -64,11 +66,6 @@ will be displayed as
 The list of supported emoticons is available
 [here](/help/configure-emoticon-translations).
 
-### Paste an emoji
-
-You can paste an emoji copied from outside of Zulip directly into the compose
-box.
-
 ## Examples
 
 {!emoji-and-emoticons-examples.md!}

help/format-a-quote.md

@@ -2,6 +2,45 @@
 
 {!quotes-intro.md!}
 
+## Insert quote formatting
+
+{start_tabs}
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **Quote** (<i class="zulip-icon zulip-icon-quote"></i>) icon at the
+   bottom of the compose box to insert quote formatting.
+
+!!! tip ""
+
+    You can also use the **Quote** (<i class="zulip-icon zulip-icon-quote"></i>)
+    icon to remove existing quote formatting from the selected text.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To create a multi-line quote, type `>` followed by a space and some text:
+~~~
+> a multi-line
+quote on two lines
+~~~
+   To create a multi-paragraph quote, use triple backticks and the word quote
+   (````quote`) followed by some text and triple backticks at the end:
+~~~
+```quote
+A multi-paragraph
+
+quote in two paragraphs
+```
+~~~
+
+{end_tabs}
+
 ## Examples
 
 {!quotes-examples.md!}

help/format-your-message-using-markdown.md

@@ -9,9 +9,9 @@ formatting, such as using `*` at the start of a line in a bulleted list, or
 around text to indicate emphasis.
 
 This page provides an overview of all the formatting available in Zulip. There
-is a convenient [**message formatting
+is a convenient [message formatting reference](#message-formatting-reference)
-reference**](#message-formatting-reference) in the Zulip app that you can use
+in the Zulip app that you can use whenever you need a reminder of the formatting
-whenever you need a reminder of the formatting syntax below.
+syntax below.
 
 * [Text emphasis](#text-emphasis)
 * [Bulleted lists](#bulleted-lists)
@@ -49,7 +49,8 @@ whenever you need a reminder of the formatting syntax below.
 
 !!! tip ""
 
-    You can also use the **Bulleted list** (<i class="fa fa-list-ul"></i>)
+    You can also use the **Bulleted list**
+    (<i class="zulip-icon zulip-icon-unordered-list"></i>)
     button in the compose box to insert bulleted list formatting.
     [Learn more](/help/bulleted-lists).
 
@@ -61,7 +62,8 @@ whenever you need a reminder of the formatting syntax below.
 
 !!! tip ""
 
-    You can also use the **Numbered list** (<i class="fa fa-list-ol"></i>)
+    You can also use the **Numbered list**
+    (<i class="zulip-icon zulip-icon-ordered-list"></i>)
     button in the compose box to insert numbered list formatting.
     [Learn more](/help/numbered-lists).
 
@@ -73,9 +75,10 @@ whenever you need a reminder of the formatting syntax below.
 
 !!! tip ""
 
-    You can also use a button or a keyboard shortcut (<kbd>Ctrl</kbd> +
+    You can also use the **Link**
-    <kbd>Shift</kbd> + <kbd>L</kbd>) to insert a link.
+    (<i class="zulip-icon zulip-icon-link"></i>)
-    [Learn more](/help/insert-a-link).
+    button or a keyboard shortcut (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> +
+    <kbd>L</kbd>) to insert a link. [Learn more](/help/insert-a-link).
 
 ## Code blocks
 
@@ -83,12 +86,24 @@ whenever you need a reminder of the formatting syntax below.
 
 {!code-blocks-examples.md!}
 
+!!! tip ""
+
+    You can also use the **Code** (<i class="zulip-icon zulip-icon-code"></i>)
+    button in the compose box to insert code formatting.
+    [Learn more](/help/code-blocks).
+
 ## LaTeX
 
 {!latex-intro.md!}
 
 {!latex-examples.md!}
 
+!!! tip ""
+
+    You can also use the **LaTeX** (<i class="zulip-icon zulip-icon-math"></i>)
+    button in the compose box to insert LaTeX formatting.
+    [Learn more](/help/latex).
+
 ## Quotes
 
 {!quotes-intro.md!}
@@ -99,6 +114,9 @@ whenever you need a reminder of the formatting syntax below.
 
     There is a handy option to [quote and reply](/help/quote-and-reply) to a
     message in Zulip.
+    You can also use the **Quote** (<i class="zulip-icon zulip-icon-quote"></i>)
+    button in the compose box to insert quote formatting.
+    [Learn more](/help/format-a-quote).
 
 ## Spoilers
 
@@ -106,6 +124,12 @@ whenever you need a reminder of the formatting syntax below.
 
 {!spoilers-examples.md!}
 
+!!! tip ""
+
+    You can also use the **Spoiler**
+    (<i class="zulip-icon zulip-icon-spoiler"></i>) button in the compose
+    box to insert spoiler formatting. [Learn more](/help/spoilers).
+
 ## Emoji and emoticons
 
 {!emoji-and-emoticons-intro.md!}
@@ -130,6 +154,12 @@ whenever you need a reminder of the formatting syntax below.
 
 {!global-times-examples.md!}
 
+!!! tip ""
+
+    You can also use the **Add global time**
+    (<i class="zulip-icon zulip-icon-time"></i>) button in the compose
+    box to select a time from the date picker. [Learn more](/help/global-times).
+
 ## Tables
 
 {!tables-intro.md!}
@@ -161,8 +191,8 @@ A summary of the formatting syntax above is available in the Zulip app.
 !!! tip ""
 
     You can also [open the compose box](/help/open-the-compose-box), and click
-    the **question mark** (<i class="fa fa-question"></i>) icon at the bottom of
+    the **question mark** (<i class="zulip-icon zulip-icon-question"></i>) icon
-    the compose box.
+    at the bottom of the compose box.
 
 {end_tabs}
 

help/global-times.md

@@ -2,6 +2,36 @@
 
 {!global-times-intro.md!}
 
+## Insert a time
+
+{start_tabs}
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Click the **Add global time** (<i class="zulip-icon zulip-icon-time"></i>)
+   icon at the bottom of the compose box to open the date picker.
+
+1. Select the desired time by clicking with your mouse, or using the arrow
+   keys + <kbd>Enter</kbd>.
+
+1. Click **Confirm** to insert the selected time.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. Type `<time`, and click **Mention a time-zone-aware time**, or press
+   <kbd>Enter</kbd> to open the date picker.
+
+1. Select the desired time by clicking with your mouse, or using the arrow
+   keys + <kbd>Enter</kbd>.
+
+1. Click **Confirm** to insert the selected time.
+
+{end_tabs}
+
 ## Examples
 
 {!global-times-examples.md!}

help/include/emoji-and-emoticons-intro.md

@@ -1,14 +1,14 @@
 There are several ways to use an emoji in your message:
 
-- [Enter an emoji name](/help/emoji-and-emoticons#enter-an-emoji-name)
+- [Enter an emoji name](/help/emoji-and-emoticons#use-an-emoji-in-your-message)
   surrounded by `:`, with help from autocomplete suggestions.
 
 - [Select an emoji from the emoji
-  picker](/help/emoji-and-emoticons#select-an-emoji-from-the-emoji-picker)
+  picker](/help/emoji-and-emoticons#use-an-emoji-in-your-message)
 
 - [Use an emoticon](/help/emoji-and-emoticons#use-an-emoticon)
 
-- [Paste an emoji](/help/emoji-and-emoticons#paste-an-emoji)
+- [Paste an emoji](/help/emoji-and-emoticons#use-an-emoji-in-your-message)
 
 You can [add custom emoji](/help/custom-emoji) for your organization. Like
 default emoji, custom emoji can be entered into the compose box by name, or

help/insert-a-link.md

@@ -2,10 +2,6 @@
 
 {!links-intro.md!}
 
-## Examples
-
-{!links-examples.md!}
-
 ## Insert a link
 
 {start_tabs}
@@ -18,6 +14,22 @@
 
 1. Paste a URL to turn the selected text into a named link.
 
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
+    to insert link formatting.
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Select the text you want to linkify.
+
+1. Click the **link** (<i class="zulip-icon zulip-icon-link"></i>) icon at the
+   bottom of the compose box.
+
+1. Replace `url` with a valid URL.
+
 !!! keyboard_tip ""
 
     You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
@@ -30,22 +42,6 @@
 1. To create a named link, use `[ ]` around the link text, and `( )` around the
    URL: `[Link text](URL)`.
 
-!!! keyboard_tip ""
-
-    You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
-    to insert link formatting.
-
-{tab|via-compose-box-buttons}
-
-{!start-composing.md!}
-
-1. Select the text you want to linkify.
-
-1. Click the **link** (<i class="fa fa-link"></i>) icon at the
-   bottom of the compose box.
-
-1. Replace `url` with a valid URL.
-
 !!! keyboard_tip ""
 
     You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
@@ -53,6 +49,10 @@
 
 {end_tabs}
 
+## Examples
+
+{!links-examples.md!}
+
 ## Related articles
 
 * [Message formatting](/help/format-your-message-using-markdown)

help/latex.md

@@ -2,6 +2,44 @@
 
 {!latex-intro.md!}
 
+## Insert LaTeX formatting
+
+{start_tabs}
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **LaTeX** (<i class="zulip-icon zulip-icon-math"></i>) icon at the
+   bottom of the compose box to insert LaTeX formatting. The appropriate inline
+   or block formatting will be applied automatically depending on whether you
+   selected a whole line, part of a line, or multiple lines.
+
+!!! tip ""
+
+    You can also use the **LaTeX** (<i class="zulip-icon zulip-icon-math"></i>)
+    icon to remove existing LaTeX formatting from the selected text.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To use inline LaTeX, use double dollar signs (`$$`) around the text:
+~~~
+$$O(n^2)$$
+~~~
+   To use displayed LaTeX, use triple backticks and the word math
+   (````math`) followed by some text and triple backticks at the end:
+~~~
+``` math
+\int_a^b f(t)\, dt = F(b) - F(a)
+```
+~~~
+
+{end_tabs}
+
 ## Examples
 
 {!latex-examples.md!}

help/numbered-lists.md

@@ -6,6 +6,22 @@
 
 {start_tabs}
 
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **Numbered list**
+   (<i class="zulip-icon zulip-icon-ordered-list"></i>) icon at the
+   bottom of the compose box to insert list formatting.
+
+!!! tip ""
+
+    You can also use the **Numbered list**
+    (<i class="zulip-icon zulip-icon-ordered-list"></i>) icon
+    to remove existing list formatting from the current line or selected text.
+
 {tab|via-markdown}
 
 {!start-composing.md!}
@@ -19,20 +35,6 @@
     Pressing <kbd>Enter</kbd> on a blank list item will remove the list
     formatting on the current line.
 
-{tab|via-compose-box-buttons}
-
-{!start-composing.md!}
-
-1. _(optional)_ Select the text you want to format.
-
-1. Click the **Numbered list** (<i class="fa fa-list-ol"></i>) icon at the
-   bottom of the compose box to insert list formatting.
-
-!!! tip ""
-
-    You can also use the **Numbered list** (<i class="fa fa-list-ol"></i>) icon
-    to remove existing list formatting from the current line or selected text.
-
 {end_tabs}
 
 ## Examples

help/preview-your-message-before-sending.md

@@ -6,7 +6,8 @@
 
 1. Write a message.
 
-1. Click the **eye** (<i class="fa fa-eye"></i>) icon at the bottom of the compose box.
+1. Click the **eye** (<i class="zulip-icon zulip-icon-preview"></i>) icon at
+   the bottom of the compose box.
 
 {end_tabs}
 

help/share-and-upload-files.md

@@ -47,9 +47,9 @@ People reading the message can click on the preview to
 
 {!start-composing.md!}
 
-1. Click the **paperclip** (<i class="fa fa-paperclip"></i>) icon at
+1. Click the **paperclip** (<i class="zulip-icon zulip-icon-attachment"></i>)
-   the bottom of the compose box to select one or more files. Zulip will upload
+   icon at the bottom of the compose box to select one or more files.
-   the files, and insert named links using
+   Zulip will upload the files, and insert named links using
    [Markdown formatting](/help/format-your-message-using-markdown#links):
    `[Link text](URL)`.
 

help/spoilers.md

@@ -2,6 +2,45 @@
 
 {!spoilers-intro.md!}
 
+## Insert spoiler formatting
+
+{start_tabs}
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. _(optional)_ Select the text you want to format.
+
+1. Click the **Spoiler** (<i class="zulip-icon zulip-icon-spoiler"></i>)
+   icon at the bottom of the compose box to insert spoiler formatting.
+
+!!! tip ""
+
+    You can also use the **Spoiler**
+    (<i class="zulip-icon zulip-icon-spoiler"></i>) icon
+    to remove existing spoiler formatting from the selected text.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To create a spoiler section, use triple backticks and the word spoiler
+   (````spoiler`) followed by an optional spoiler heading, some text, and triple
+   backticks at the end:
+~~~
+```spoiler The spoiler heading
+This content is initially hidden.
+```
+~~~
+
+!!! tip ""
+
+    A message can contain both spoilers and other content, and you can combine
+    spoilers with other formatting.
+
+{end_tabs}
+
 ## Examples
 
 {!spoilers-examples.md!}

help/start-a-call.md

@@ -8,9 +8,9 @@
 
 {!start-composing.md!}
 
-1. Click the **video camera** (<i class="fa fa-video-camera"></i>) icon at the
+1. Click the **video camera** (<i class="zulip-icon zulip-icon-video-call"></i>)
-   bottom of the compose box. This will insert a **Join video call.** link into
+   icon at the bottom of the compose box. This will insert a **Join video call.**
-   your message.
+   link into your message.
 
 1. Send the message.
 
@@ -52,9 +52,9 @@
 
 {!start-composing.md!}
 
-1. Click the **phone** (<i class="fa fa-phone"></i>) icon at the
+1. Click the **phone** (<i class="zulip-icon zulip-icon-voice-call"></i>) icon
-   bottom of the compose box. This will insert a **Join voice call.** link into
+   at the bottom of the compose box. This will insert a **Join voice call.**
-   your message.
+   link into your message.
 
 1. Send the message.
 

help/text-emphasis.md

@@ -2,33 +2,29 @@
 
 {!emphasis-intro.md!}
 
-## Examples
-
-{!emphasis-examples.md!}
-
 ## Making text bold
 
 {start_tabs}
 
-{tab|via-markdown}
-
-{!start-composing.md!}
-
-1. Surround your text with double asterisks (`**`) to make it bold.
-
-!!! keyboard_tip ""
-
-    You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> to insert bold formatting.
-
 {tab|via-compose-box-buttons}
 
 {!start-composing.md!}
 
 1. Select the text you want to format.
 
-1. Click the **Bold** (<i class="fa fa-bold"></i>) icon at the
+1. Click the **Bold** (<i class="zulip-icon zulip-icon-bold"></i>) icon at the
    bottom of the compose box.
 
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> to insert bold formatting.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To make text bold, use double asterisks (`**`) around the text: `**text**`.
+
 !!! keyboard_tip ""
 
     You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> to insert bold formatting.
@@ -39,24 +35,24 @@
 
 {start_tabs}
 
-{tab|via-markdown}
-
-{!start-composing.md!}
-
-1. Surround your text with single asterisks (`*`) to make it italic.
-
-!!! keyboard_tip ""
-
-    You can also use <kbd>Ctrl</kbd> + <kbd>I</kbd> to insert italic formatting.
-
 {tab|via-compose-box-buttons}
 
 {!start-composing.md!}
 
 1. Select the text you want to format.
 
-1. Click the **Italic** (<i class="fa fa-italic"></i>) icon at the
+1. Click the **Italic** (<i class="zulip-icon zulip-icon-italic"></i>) icon at
-   bottom of the compose box.
+   the bottom of the compose box.
+
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>I</kbd> to insert italic formatting.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To make text italic, use single asterisks (`*`) around the text: `*text*`.
 
 !!! keyboard_tip ""
 
@@ -68,12 +64,29 @@
 
 {start_tabs}
 
+{tab|via-compose-box-buttons}
+
 {!start-composing.md!}
 
-1. Surround your text with two tildes (`~~`) to apply strikethrough formatting.
+1. Select the text you want to format.
+
+1. Click the **Strikethrough**
+   (<i class="zulip-icon zulip-icon-strikethrough"></i>) icon at the
+   bottom of the compose box.
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. To apply strikethrough formatting, use two tildes (`~~`) around the text:
+   `~~text~~`.
 
 {end_tabs}
 
+## Examples
+
+{!emphasis-examples.md!}
+
 ## Related articles
 
 * [Message formatting](/help/format-your-message-using-markdown)