nextlint

Nextlint

Nextlint is a rich text editor built using modern web technologies, designed to be both powerful and easy to use. This editor is crafted with Svelte, leveraging the MeltUI headless UI and Tailwind CSS framework for styling. At the core of Nextlint lies the Tiptap editor, based on ProseMirror, which ensures a robust and efficient editing experience.

Key Features

Nextlint offers a seamless integration with various AI APIs, enhancing the writing experience through a prompt engine. It supports both dark and light themes, which can be customized to fit user preferences.

Getting Started

Installation

Nextlint can be easily installed using npm, yarn, or pnmp. The following commands can be used:

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Setup

Nextlint utilizes headless Svelte components from MeltUI, styled with Tailwind CSS. If your project already uses the theme tokens from Svelte Shadcn, you can skip some setup steps.

1. Install Tailwind CSS and PostCSS:

pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p

This step creates the necessary tailwind.config.js and postcss.config.js files.

2. Configure tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{svelte,js}',
    './node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
  ],
  theme: {
    // Customizations here
  },
  plugins: []
};

Detailed instructions for customization can be found here.

Usage

To apply the default theme, wrap the SvelteEditor component with EditorTheme:

<script lang="ts">
  import {SvelteEditor} from '@nextlint/svelte/EditorTheme';
  import EditorTheme from '@nextlint/svelte/EditorTheme';
</script>

<div class="editor">
  <EditorTheme>
    <SvelteEditor content="" placeholder="Start editing..." />
  </EditorTheme>
</div>

The EditorTheme imports the default theme defined in EditorTheme.scss.

Built-in Features

• Bubble Menu: A user-friendly menu that appears for quick actions.

  

• Slash Menu: Efficient navigation through slash commands.

  

• Image Handling: Supports image upload, embedding, and integration with Unsplash API.

  

• AI Prompting: Integration for AI-driven suggestions and assistance.

  

Advanced Options

Nextlint's options allow for extensive customization of the editing experience.

• Content Initialization: Initialize content as HTML or JSON.

• Placeholder: Set placeholder text when the editor is empty.

• Callbacks: onChange and onCreated for handling state changes and setup completion.

• Plugins Configuration: Customize with options for image handling, AI prompts, code highlighting, and more.

Contributing and Licensing

Nextlint is open-source and welcomes contributions. Interested developers can refer to the contribution guidelines for more information. The project is licensed under the MIT License, detailed in the license file.