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>
Nextlint use svelteui to implement node view and editor components so we recommend using SvelteUI to implement a custom node view for a more consistent user interface. Default editor tokens.
:root {
'--editor-font': "'Literata', serif",
'--editor-font-heading': "'Bitter', serif",
'--editor-font-code': "'Fira Code', monospace",
'--editor-font-size': '1.1rem',
'--editor-font-height': '1.7rem',
'--editor-block-gap': '16px'
}You can customize your content style by overriding the EditorTheme style via override props. The implementation can be found at.EditorTheme.svelte
Default editor tokens
Override Editor Font
<EditorTheme
override={{
'--editor-font': "'Roboto'",
'--editor-font-size': '15px',
'--editor-font-height': '22px',
'--editor-block-gap': '8px',
}}
>
<Editor/>
</EditorTheme>Override Editor Style
<EditorTheme
override={{
'& .ProseMirror': {
// customize blockquote
'& blockquote':{
backgroundColor:'teal',
boxShadow:'...'
},
// customize block code
'& pre':{
backgroundColor:'#000',
fontFamily:'FiraCode'
}
}
}}
>
<Editor/>
</EditorTheme>Please follow the contribute guideline
The MIT License (MIT). Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent