Editor Features Guide

Editor Features Guide

The Skillnote editor is a Notion-style block editor. You can compose content using the floating toolbar, slash menu, drag handles, and more.

---

Floating Toolbar

When you select text by dragging your mouse, a floating toolbar appears above the selection. This toolbar is only shown in desktop environments.

Block Conversion (TurnIntoDropdown)

Click the dropdown on the far left of the toolbar to convert the current block type.

Option	Description
Text	Convert to a regular paragraph
Heading 1	Convert to a top-level heading (H1)
Heading 2	Convert to a second-level heading (H2)
Heading 3	Convert to a third-level heading (H3)
Bullet List	Convert to an unordered list
Numbered List	Convert to a numbered list
Task List	Convert to a task/checklist
Quote	Convert to a quote block
Code Block	Convert to a code block

Inline Formatting

Button	Function
Bold	Bold the selected text
Italic	Italicize the selected text
Strikethrough	Apply strikethrough to the selected text
Inline Code	Format the selected text as inline code

Link (LinkPopover)

Clicking the link button opens a URL input popover.

• Enter URL: Type the address to link to.
• Apply link: Sets the link to the entered URL.
• Open link: Opens the linked URL in a new tab.
• Remove link: Removes the link from the current text.

Text Color (ColorTextPopover)

Clicking the Text Color button opens a color picker popover. Choose a color or click Reset to default to clear it.

---

Slash Menu

Type / in the body to open the quick-insert menu. Continue typing a keyword to filter the list.

AI Group (Plus/Pro plans only)

Command	Aliases	Description
One-line AI Summary	ai, summary	Summarize the body content in one line using AI
Three-line AI Summary	ai, summary	Summarize the body content in three lines using AI
Image → LaTeX	ai, latex, ocr	Convert an equation in an image to LaTeX

Note: AI slash commands are available on Plus or Pro plans only.

Basic Group

Command	Description
Text / Paragraph	Insert a regular paragraph
Heading 1	Insert a top-level heading (H1)
Heading 2	Insert a second-level heading (H2)
Heading 3	Insert a third-level heading (H3)

List Group

Command	Description
Bullet List	Insert an unordered list
Numbered List	Insert a numbered list
Task List	Insert a checkbox list

Advanced Group

Command	Description
Quote	Insert a quote block
Code Block	Insert a code block
Divider	Insert a horizontal rule
Table	Insert a 3×3 table
Inline Math	Insert an inline equation
Block Math	Insert a block equation
2 Columns	Insert a two-column layout
3 Columns	Insert a three-column layout

Media Group

Command	Description
Image	Open the image upload dialog
YouTube	Enter a YouTube URL to embed a video

Insert Group

Command	Description
Emoji	Trigger the : emoji suggestion dropdown

---

Code Block

Select Code Block from the slash menu, or type three backticks (```) in the body to insert a code block. Choose a language from the selector at the top of the block to enable syntax highlighting.

Supported languages:

JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, Swift, Kotlin, Ruby, PHP, SQL, HTML/XML, CSS, SCSS, JSON, Markdown, Bash, and all other major languages.

```python
def hello():
    print("Hello, Skillnote!")
```

---

Math Equations (KaTeX)

The Skillnote editor uses KaTeX to render math equations.

Inline Equation

Wrap an equation in $ to enter it as an inline equation. Press Enter to confirm.

$E = mc^2$

Press Esc to cancel.

Block Equation

Start with $$ or select Block Math from the slash menu. Press Cmd+Enter (or Ctrl+Enter) to confirm.

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Press Esc to cancel.

Built-in LaTeX Macros

The following LaTeX macros are defined in the editor by default.

Macro	Meaning
\R	Real numbers ℝ
\N	Natural numbers ℕ
\Z	Integers ℤ
\Q	Rational numbers ℚ
\C	Complex numbers ℂ

---

Images

There are two ways to add an image.

• Drag and drop: Drag an image file onto the editor.
• Paste: Paste an image from your clipboard with Cmd+V (or Ctrl+V).

Supported formats: JPEG, PNG, GIF, WebP, SVG

Upload limit: You can upload up to 3 images at a time. A progress indicator is shown while uploading.

---

Embedding YouTube Videos

Select YouTube from the slash menu and a URL input field will appear. Paste a YouTube URL and the video will be embedded automatically.

• The default player size is 640×360.
• Drag the corner of the player to resize it.
• Both short URLs (youtu.be/...) and full URLs (youtube.com/watch?v=...) are supported.

---

Emoji

Select Emoji from the slash menu or type : in the body to open the emoji suggestion dropdown. It is based on the GitHub emoji set.

Example: Type :smile:, :rocket:, or any other GitHub emoji code to convert it to the corresponding emoji.

---

Drag Handle

Hover over the left side of any block to reveal the drag handle (⠿). Grab the handle and drag it to reorder blocks.

---

Tables

Select Table from the slash menu to insert a 3×3 table.

• Drag column borders to adjust column width.
• Hover over the table to reveal controls for adding and deleting rows and columns.
• Press Tab inside a cell to move to the next cell. Pressing Tab in the last cell adds a new row.

---

Multi-Column Layout (2 or 3 Columns)

Select 2 Columns or 3 Columns from the slash menu to arrange content in multiple columns. Each column acts as an independent block editor.

---

Mobile Toolbar

On mobile, a mobile-specific toolbar is pinned to the bottom of the screen instead of the floating toolbar. Tap the formatting buttons to apply them.

---

Keyboard Shortcuts

Shortcut	Function
Cmd/Ctrl + B	Bold
Cmd/Ctrl + I	Italic
Cmd/Ctrl + Z	Undo
Cmd/Ctrl + Shift + Z	Redo
Tab	Indent (in lists and tables)
Shift + Tab	Outdent
Enter	New paragraph or new list item
Shift + Enter	Line break within a paragraph
Cmd/Ctrl + Enter (block equation)	Confirm equation
Enter (inline equation)	Confirm equation
Esc (equation)	Cancel equation editing

---