github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-22 09:46:30 -05:00
Code Issues Projects Releases Packages Wiki Activity
hedgedoc/docs/content/interface/toolbar.md
Philip Molares 1c16e25e14 feat(frontend): replace forkawesome with bootstrap icons 
These icon replace fork awesome. A linter informs the user about the deprecation.

See https://github.com/hedgedoc/hedgedoc/issues/2929

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2023-02-24 14:31:17 +01:00

3.5 KiB
Raw Blame History

Toolbar

whole toolbar

The Toolbar is found above the editor and is split into five sections:

  1. Emphasis
  2. Header & Blocks
  3. Links & Images
  4. Larger Blocks & Emojis
  5. Settings

Emphasis

Emphasis toolbar

These buttons are able to either surround selected text with the necessary symbols to emphasize it or insert the symbols without any content between them to be filled out by you. The icons on the buttons should be rather easy to identify. Nonetheless, here is their functionality:

  1. bold e.g **text**
  2. italic e.g *text*
  3. underscore e.g _text_
  4. strikethrough e.g ~~text~~
  5. subscript e.g ~text~
  6. superscript e.g ^text^

Header & Blocks

Header & Blocks toolbar

These buttons all work a bit different so, we will describe each on separately:

  1. Heading
    Adds # in front of the line. If the line is already starting with a # adds just #.
  2. Code Blocks
    Adds ``` around the selected text or if no text is selected just adds two lines with ``` and an empty line between them.
  3. Quote
    Adds > in front of the line.
  4. Unordered List
    Ads - in front of the line.
  5. Ordered List
    Adds 1. in front of the line.
  6. ToDo List
    Adds - [ ] in front of the line.

Links & Images

Links & Images toolbar

These buttons add the corresponding syntax at the current cursor position. If some text is selected it will either put that as the link, if it thinks that the selected text is a link, or as the alt text.

  1. Link
    Adds the link template [](https://) (For more information see the markdown link documentation)
  2. Image
    Adds the image placeholder ![](https://) (For more information see the markdown image documentation)
  3. Image Upload
    Asks the user to upload an image from their computer and then inserts it in the note.

Larger Blocks & Emojis

larger blocks & emojis toolbar

  1. Table
    This button opens an overlay, which lets you choose the size of your table up to 10 columns and 8 rows. By clicking on any of the squares a table with the corresponding size will be added to the note at the position of your cursor.
    Table overlay
    A larger table can be created by clicking the 'Custom Size' button.
    Table modal
    In the modal you can specify the exact dimension of your table.

  2. Horizontal Line
    This button adds --- at the current position of your cursor in the note.

  3. Collapsable Block
    This button adds a template for a Collapsable Block like this:

    :::spoiler Toggle label
Toggled content
:::

  4. Comment
    This button adds > [] at the beginning of the line. You can either specify a name for your comment by inserting name=$YourName, a time by inserting time=$time or a color by inserting color=#FFFFFF in the []. Please note that you can only specify one of those per [], but you can use multiple [].

  5. Emoji Picker
    This button opens the emoji picker, where you can choose an emoji to insert into your note.
    Emoji Picker

Settings

ToDo