Introduce Nextlint editor 

Introduce Nextlint editor 

Ly Nhan

1 years 5 min read

Terms

Block: refers to a distinct section or container of content that is treated as a cohesive unit within the editor's structure. Blocks are used to organize and structure the content, allowing users to apply different formatting and styling options to each block individually. Here are a few examples of common blocks in a Nextlint editor: Paragraph Block, Heading Block, List Block, Quote Block, Code Block, Figure Block


Why use Nextlint?

  • Easy-to-use: The editor provides a simple and intuitive interface, making it easy for users to create and edit content without any technical knowledge.

  • Rich Text Editing: Users can format text using various styles such as bold, italic, underline, headings, lists, and more.

  • Extensible: You can extend the editor's functionality by adding or creating custom extensions, allowing you to integrate additional features or customize the behavior of the editor.

  • Integrate openAI,GPT functionality: Unlocking the Power of Creative and Swift Writing with OpenAI and GPT Support.

Features

❇️ BubbleMenu

The Bubble Menu is a graphical user interface (GUI) element that appears as a floating menu or toolbar around the selected text or editor content. It provides quick access to various formatting and styling options for the selected text or the content at the current cursor position.

2023-06-30T09:59:37,139771895+07:00.png
2023-06-30T09:59:37,139771895+07:00.png

😎 Formatting

Users can apply formatting options like bold, italics, underline, strikethrough, code blocks, or inline code to their text:

Bold Italic Highlight Link strike code

Text Align Left

Text Align Center

Text Align Right

Bulleted lists, numbered lists, and nested lists:

  1. Todo 1

  2. Todo 2


  • Bulleted item 1

    • Bulletd Child

    • Press Tab to create nested list

  • Bulleted item 2


  1. Item 1

    1. child 1

    2. child 2

      1. still want more child

      2. Press Tab to create nested list

🔥 Slash (/) Menu

The Slash Menu is a convenient way to quickly access and insert various types of content or perform actions within a page. It is accessed by typing "/" (forward slash) in the editor, which triggers a menu to appear. The Slash Menu offers a wide range of options that users can choose from to add specific elements or perform actions.

Slash Menu
Slash Menu

🎉 Writing a blog with an AI assistant

Writing a blog with an AI assistant can be a productive and efficient process. By utilizing an AI assistant like ChatGPT, you can enhance your writing workflow and create engaging content. The AI assistant can assist you in various ways, such as generating ideas, providing suggestions, proofreading, and offering grammar and style recommendations.

In Nextlint, at the empty of paragraph block, you can trigger gpt prompt by press Space

GPT prompt
GPT prompt

You can capply the result as a paragraph block

✨ Custom Block Content

BlockCode:

#[derive(Debug, Deserialize, Serialize, Clone, SmartDefault)]
pub struct Jwt {
    #[default(30)]
    pub expire_days: i64,

    #[default("change default key here")]
    pub key: String,
}

Blockquote:

Nextlint is a WYSIWYG (What You See Is What You Get) editor built using the "@tiptap" library and developed with Svelte. It provides a user-friendly interface for editing and formatting text, allowing users to create rich content effortlessly.

Figure:

image alt
image alt

You can create a block figure by triggering the Image command in Slash Menu. The editor also recognizes image links and automatically converts them into a figure block.

Slash menu
Slash menu

🫶 Support markdown

Markdown is a lightweight markup language that allows you to write formatted text using a simple and intuitive syntax. Here are some guidelines to follow when using Markdown in Nextlint

Headers: Use hash (#) symbols to create headers. The number of hash symbols determines the level of the header, with one hash symbol (#) indicating the highest level (H1) and six hash symbols (######) indicating the lowest level (H6).

Example:

# Heading 1
## Heading 2
### Heading 3

Emphasis: Add emphasis to text using asterisks (*) or underscores (_). Surround the text with a single asterisk or underscore for italic style, and with double asterisks or underscores for bold style.

Example:

*Italic Text*
_Italic Text_

**Bold Text**
__Bold Text__

Lists: Create ordered (numbered) or unordered (bullet) lists by starting each line with a number and a period for ordered lists, or a hyphen, plus sign, or asterisk for unordered lists.

Example:

1. First item
2. Second item
3. Third item

- First item
- Second item
- Third item

Code: Indicate code or inline code by wrapping it with backticks (`). For code blocks, use triple backticks (```) before and after the code block. You can specify the programming language after the opening triple backticks for syntax highlighting.

Example:

`Inline code`

```python
def hello_world():
    print("Hello, World!")

Horizontal Rule: Insert a horizontal rule by using three or more hyphens (-), asterisks (*), or underscores (_) on a separate line.

Example:

---

Explore further by writing your first article on Nextlint.

Conclusion

Nextlint continues its ongoing development with the mission of delivering a user-friendly and feature-rich writing experience.

We greatly appreciate any reported issues, feature requests, or suggestions for improvements regarding the editor send vie the email [email protected]

Thank for reading 🙏🙏🙏

High level experience in web design and development knowledge, producing quality work.

© Nextlint_2023 All Rights Reserved

Privacy Policy Terms of Use