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.
- 💻 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.
Support upload/embed/unsplash api
... and many more.
https://nextlint-editor.vercel.app/
You can find the implementation of the demo in the repostiory at: https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/routes/%2Bpage.svelte
Install the package:
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelte
<script lang="ts">
import {type Editor, EditorTheme, SvelteEditor} from '@nextlint/svelte';
let editor: Editor;
const submitPromt = async (prompt: string) => {
// handle prompt for GPT plugin
return '';
};
const handleUpload = async (file: File) => {
// handle upload here
const blob = new Blob([file]);
const previewUrl = URL.createObjectURL(blob);
return previewUrl;
};
</script>
<EditorTheme>
<SvelteEditor
content={''}
placeholder="Press 'space' GPT support, type '/' for help"
onCreated={createdEditor => { editor = createdEditor }}
onChange={nextEditor => { editor = nextEditor }}
<!-- plugins config -->
plugins={{
selectImage: {
handleUpload,
unsplash: {
accessKey: 'UNPLASH_API_KEY'
}
},
gpt: {query: submitPromt}
}}
/>
</EditorTheme>
Please follow the contribute guideline
The MIT License (MIT). Please see License File for more information.