Post Editor Guide

Introduction

LikeDo's rich text editor (powered by TipTap) provides a complete set of content creation tools. Whether you're writing technical documentation, blog posts, or notes, you'll find all the formatting features you need.

Basic Text Formatting

Text Styles

Use toolbar buttons or keyboard shortcuts to quickly format text:

• Bold: Click the B button in the toolbar or use Cmd+B (Mac) / Ctrl+B (Windows)
• Italic: Click the I button or use Cmd+I / Ctrl+I
• Strikethrough: Click the S button or use Cmd+Shift+X / Ctrl+Shift+X
• Underline: Click the U button or use Cmd+U / Ctrl+U
• Inline Code: Click the </> button or use Cmd+E / Ctrl+E

Text Color & Highlighting

1. Text Color: Select text, click the palette icon 🎨, and choose your desired text color
2. Highlight Background: Click the highlighter icon 🖍️ to add a colored background to text
   • Multiple color options available
   • Use different highlight colors for different content types

Superscript and Subscript

• Superscript: For mathematical formulas or footnotes, like x²
• Subscript: For chemical formulas, like H₂O

Headings & Paragraphs

Setting Heading Levels

Click the heading dropdown menu in the toolbar and select H1-H4 levels:

• H1: Top-level heading, for article titles
• H2: Main section headings
• H3: Subsection headings
• H4: Third-level section headings

Text Alignment

Four alignment options available:

• Left Align: Default alignment
• Center Align: For titles or important content
• Right Align: For special layout needs
• Justify: Aligns text to both edges for a cleaner look

List Features

Three List Types

1. Unordered List: For items without specific order

   • Click the list icon in the toolbar
   • Select unordered list (bullet points)
   • Press Enter to add new items
   • Press Tab to create sub-lists

2. Ordered List: For sequential steps or items

   1. Select ordered list (numbers)
   2. Automatic numbering
   3. Supports nesting

3. Task List: Manage to-do items

   • Incomplete task
   • Completed task
   • Click checkbox to toggle status

Quotes & Code

Block Quotes

Create elegant quoted content:

Click the quote icon 📝 in the toolbar to create one.

Code Blocks

Code blocks with syntax highlighting:

// Supports syntax highlighting for multiple languages
function hello() {
  console.log('Hello, World!');
}

How to use:

1. Click the code block icon {} in the toolbar
2. Default uses JavaScript syntax highlighting
3. Paste or type your code
4. Supports common programming languages (JavaScript, Python, TypeScript, Go, Rust, etc.)

Code Sandbox

Interactive JavaScript code execution environment with live preview:

// Type your JavaScript code here
const greeting = 'Hello, World!';
console.log(greeting);

How to use:

1. Click the Sandbox icon ▶️ in the toolbar, or use slash command /sandbox
2. Write JavaScript code in the editor area
3. Click the Run button to execute code
4. View output in the panel below

Features:

• Real-time code execution
• Console output display (log, error, warn, info)
• Error handling and debugging
• Code editor with syntax highlighting
• Perfect for code examples and tutorials

Use cases:

• Interactive code demonstrations
• Teaching programming concepts
• Testing code snippets
• Creating interactive tutorials

Callout Blocks

Create attention-grabbing callout blocks to highlight important information. Four types available:

Info Callout (Blue)

Use for general information and tips:

• Technical notes
• Additional explanations
• Helpful hints

Warning Callout (Yellow)

Use for warnings and cautions:

• Important notices
• Potential risks
• Things to watch out for

Success Callout (Green)

Use for success messages and tips:

• Best practices
• Recommended approaches
• Positive outcomes

Error Callout (Red)

Use for errors and critical information:

• Important warnings
• Security concerns
• Critical issues

How to use:

1. Type /callout in the editor to see all callout types, or use:
   • /info - Info callout
   • /warning - Warning callout
   • /success - Success callout
   • /error - Error callout
2. Enter your content
3. Callouts support all rich text formatting

Example usage:

• Documentation notes
• Tutorial warnings
• Step-by-step guides
• Technical specifications

Image Insertion

Two Methods

Method 1: Drag & Drop

• Drag image files directly into the editor
• Supports uploading multiple images at once (up to 3)
• Automatically uploads to cloud storage

Method 2: Image URL

1. Click the image URL icon 🔗 in the toolbar
2. Paste the image URL
3. Click confirm

Image Editing

• Resize: Click on image and drag corners to adjust size
• Delete Image: Select image and press Delete or Backspace

Table Features

Creating Tables

1. Click the table icon 📊 in the toolbar
2. Select "Insert Table"
3. A default 3x3 table will be inserted

Table Operations

Add Rows/Columns:

• Click on a table cell
• Use slash command / to view table-related operations
• Select "Add Row" or "Add Column"

Delete Rows/Columns:

• Select the row or column to delete
• Use slash command to select delete operation

Merge Cells:

• Select multiple cells
• Use merge function to create more complex table layouts

Adjust Column Width:

• Hover over column border
• Drag to adjust width

Details Block (Collapsible)

Create expandable/collapsible content blocks, perfect for hiding lengthy content or providing additional information.

How to use:

1. Click the details block icon ⮟ in the toolbar
2. Enter the summary title (always visible)
3. Enter detailed content below (collapsible)
4. Click summary to expand/collapse content

Use cases:

• FAQ sections
• Long code examples
• Detailed technical explanations
• Supplementary reference materials

Hyperlinks

Adding Links

1. Select the text to add a link to
2. Click the link icon 🔗 in the toolbar
3. Enter the URL
4. Optional: Check "Open in new tab"

Edit or Delete Links

• Click on an existing link to show edit options
• Can modify URL or remove link

Emoji

Click the Emoji icon 😊 in the toolbar to quickly insert emoji from the picker.

• Supports search functionality
• Includes all standard Unicode emojis
• One-click insertion

AI Assistant Features

AI Features Menu

Click the ✨ AI button in the toolbar to access these intelligent features:

1. Continue Writing

Let AI continue writing based on current content, great for:

• Overcoming writer's block
• Expanding ideas
• Completing unfinished sentences

2. Rewrite

Select text and AI will rephrase it differently, helping to:

• Optimize expression
• Adjust tone
• Improve readability

3. Generate Outline

Automatically generate a structured outline for your content:

• Auto-identifies topics
• Suggests section structure
• Clarifies thoughts

4. Generate Summary

Create concise summaries for long articles:

• Summary inserted at document beginning
• Original content preserved
• Quickly understand key points

5. Translate

Smart translation supporting 10 languages:

• English
• Chinese
• Japanese
• Korean
• French
• German
• Spanish
• Portuguese
• Russian
• Arabic

Usage tips:

• Selected text: Translates only selected content
• No selection: Translates entire article

6. Custom Prompt

Enter your own instructions for AI to execute specific tasks, such as:

• "Make this paragraph more professional"
• "Add an engaging introduction to this article"
• "Explain technical terms in simpler language"

Post Internal Links

Insert Post Links

Click the 🔗 Insert Post Link button in the toolbar:

1. Search for the post title you want to link to
2. Select the post from the list
3. Automatically inserts an internal link in format [[Post Title|PostID]]

Benefits:

• Automatically maintains link relationships
• Links don't break when posts are updated
• Easy to build knowledge networks

Slash Commands

Type / in the editor to quickly access various features:

Common commands:

• /h1 - /h4: Quick insert headings
• /ul: Unordered list
• /ol: Ordered list
• /task: Task list
• /quote: Block quote
• /code: Code block
• /image: Insert image
• /table: Insert table
• /details: Details block
• /hr: Horizontal rule

AI commands:

• /continue: AI continue writing
• /rewrite: AI rewrite
• /outline: Generate outline
• /summary: Generate summary
• /translate: Translate

Markdown Source Editing

Switch between rich text and Markdown source code editing modes for maximum flexibility.

Features

Bidirectional Sync: Seamlessly convert between rich text and Markdown:

• Rich Text → Markdown: Export formatted content as Markdown
• Markdown → Rich Text: Import and render Markdown instantly

Standard Markdown Support:

• Headings (# ## ###)
• Bold/Italic (**bold** *italic*)
• Lists (ordered and unordered)
• Code blocks (```)
• Links ([text](url))
• Images (![alt](url))
• Blockquotes (>)
• Tables
• Task lists (- [ ])

How to Use

1. Click the MD icon (Markdown symbol) in the toolbar
2. Editor switches to Markdown source editing mode
3. Edit using standard Markdown syntax
4. Click the MD button again to return to rich text mode
5. Your Markdown is automatically converted to formatted content

Quick toggle: Use keyboard shortcut Cmd+Shift+C / Ctrl+Shift+C

Use Cases

When to use Markdown mode:

• Fast text entry without mouse
• Copy/paste Markdown from other sources
• Precise control over formatting
• Batch editing with find-replace
• Working with technical documentation

When to use Rich Text mode:

• WYSIWYG editing experience
• Working with images and tables
• Visual formatting needs
• Collaborative editing
• Content preview

Practical Tips

Common Shortcuts

Paragraph Shortcuts

Practical Tips

1. Quick Formatting

Type content first, then select text to apply formatting - more efficient than formatting while typing.

2. Markdown Support

The editor supports some Markdown syntax, for example:

• Type **text** auto-converts to bold
• Type *text* auto-converts to italic
• Type - starts unordered list
• Type 1. starts ordered list
• Type [] or [ ] creates task list

3. Undo & Redo

Don't be afraid to make mistakes! Use Cmd+Z / Ctrl+Z to undo any operation, Cmd+Shift+Z / Ctrl+Shift+Z to redo.

4. Clear Content

Click the eraser icon on the far right of the toolbar to clear all editor content with one click.

5. Character Count

The editor displays real-time character count in the bottom right corner, helping you control article length.

6. Auto-save

The editor automatically saves your content, no need to worry about data loss.

Mobile Usage

On mobile devices, the editor toolbar automatically adapts:

• Tapping highlight and link buttons switches to dedicated editing views
• Use back arrow to return to main toolbar
• Long press text to select and apply formatting
• All major features supported

FAQ

Q: Why isn't formatting being applied?

A: Make sure you've selected the text to format. Most formatting requires text selection first.

Q: How do I delete a table?

A: Click the table, use slash command / to search for "delete table", or select the entire table and press Delete.

Q: AI features show "unavailable"?

A: AI features consume Credits. Please check your account balance or subscription status.

Q: Image upload failed?

A: Ensure images don't exceed 10MB and are in JPG, PNG, or GIF format.

Q: How do I export content?

A: Editor content is automatically saved. You can perform export operations from the post management page.