Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sveltor/nextlint
Rich text editor (WYSIWYG) written in Svelte, build on top of tiptap, prosemirror, AI prompt integrated. Dark/Light theme support
https://github.com/sveltor/nextlint
editor gpt nextlint openai svelte tiptap wysiwyg
Last synced: about 1 month ago
JSON representation
Rich text editor (WYSIWYG) written in Svelte, build on top of tiptap, prosemirror, AI prompt integrated. Dark/Light theme support
- Host: GitHub
- URL: https://github.com/sveltor/nextlint
- Owner: lynhan318
- License: mit
- Created: 2023-06-26T16:30:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-12T13:30:35.000Z (9 months ago)
- Last Synced: 2024-11-30T17:18:26.682Z (about 2 months ago)
- Topics: editor, gpt, nextlint, openai, svelte, tiptap, wysiwyg
- Language: TypeScript
- Homepage: https://nextlint-editor.vercel.app
- Size: 1.96 MB
- Stars: 184
- Watchers: 2
- Forks: 13
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-ChatGPT-repositories - nextlint - A rich text editor, notion like Editor, build with svelte + tiptap. Enhance writing experiences with ChatGPT (NLP)
README
# Nextlint
Rich text editor (WYSIWYG) written in Svelte, using [MeltUI](https://melt-ui.com/) headless UI and [tailwindcss](https://tailwindcss.com/) CSS framework.
Built on top of [tiptap](https://tiptap.dev/) editor(headless editor) and [prosemirror](https://prosemirror.net/). Easy to use, develop and maintain. A prompt engine that helps to integrate with any AI API, and enhance the writing experience.
Dark/Light theme is supported and customizable.
## Getting started
### Install
```sh
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelte
```
### Setup
Nexltint editor uses headless svelte components from MeltUI and styles it with tailwindcss. The theme tokens are inherited from [Svelte Shadcn](https://www.shadcn-svelte.com/docs/theming).
If you already have shadcn setup in your project then you can skip this part.
#### 1. Install tailwindcss and postcss:
```sh
pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p
```
Now `tailwind.config.js` and `postcss.config.js` are created
#### 2. Configure tailwind.config.js:
```js
// more detail at https://www.shadcn-svelte.com/docs/installation/manual
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{svelte,js}',
'./node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
],
theme: {
extend: {
colors: {
border: 'hsl(var(--border) / )',
input: 'hsl(var(--input) / )',
ring: 'hsl(var(--ring) / )',
background: 'hsl(var(--background) / )',
foreground: 'hsl(var(--foreground) / )',
primary: {
DEFAULT: 'hsl(var(--primary) / )',
foreground: 'hsl(var(--primary-foreground) / )'
},
secondary: {
DEFAULT: 'hsl(var(--secondary) / )',
foreground: 'hsl(var(--secondary-foreground) / )'
},
destructive: {
DEFAULT: 'hsl(var(--destructive) / )',
foreground: 'hsl(var(--destructive-foreground) / )'
},
muted: {
DEFAULT: 'hsl(var(--muted) / )',
foreground: 'hsl(var(--muted-foreground) / )'
},
accent: {
DEFAULT: 'hsl(var(--accent) / )',
foreground: 'hsl(var(--accent-foreground) / )'
},
popover: {
DEFAULT: 'hsl(var(--popover) / )',
foreground: 'hsl(var(--popover-foreground) / )'
},
card: {
DEFAULT: 'hsl(var(--card) / )',
foreground: 'hsl(var(--card-foreground) / )'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
fontFamily: {
sans: ['Inter']
}
}
},
plugins: []
};
```
Theme can customize via css tokens. The default token is located at [EditorTheme.scss](https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/lib/EditorTheme.scss).
### Usage:
To use the default theme, you need to wrap your `SvelteEditor` component with `ThemeTheme`:
```svelte
import {SvelteEditor} from '@nextlint/svelte/EditorTheme';
import EditorTheme from '@nextlint/svelte/EditorTheme';
```
The `EditorTheme` basicaly just import the default theme we define in `EditorTheme.scss`:
```svelte
import './EditorTheme.scss';
//EditorTheme.svelte
```
Nexltint editor uses `nextlint/core`, which is a headless editor with [existing](https://github.com/sveltor/nextlint/blob/main/packages/core/src/editor/starterKit.ts#L57) plugins installed, can be used in any UI framework, compatible with tiptap and prosemirror plugins system.
Nextlint Svelte itself has some [plugins](https://github.com/sveltor/nextlint/tree/main/packages/svelte/src/lib/plugins) completely written in Svelte and [configurable](https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/lib/Editor.svelte#L2)
## Features
### Bubble Menu
### Slash Menu
### Image
Support upload/embed/unsplash api
### AI prompt
## Options
| Name | Type | Description |
| :--------------------------------: | :---------------------: | :------------------------------------------------------ |
| **[`content`](#content)** | `Content` | Initialize editor content |
| **[`onChange`](#onChange)** | `(editor:Editor)=>void` | A callback will call when the editor change |
| **[`placeholder?`](#placeholder)** | `String` | The placeholder will be displayed when the editor empty |
| **[`onCreated?`](#onCreated)** | `(editor:Editor)=>void` | A callback will trigger once when the editor is created |
| **[`plugins?`](#plugins)** | `PluginsOptions` | Customize plugins options |
| **[`extensions?`](#extensions)** | `Extensions` | Customize editor extension |
### content
Type: `HTMLContent | JSONContent | JSONContent[] | null`
Initialize content, can be a JSONContent or a html markup.
```tsx
// Can be string
// which is equal
```
### placeholder
Type: `String | undefined`
Default: `undefined`
Placeholder will display when editor content is empty
```svelte
```
### onChange
Type: `(editor: Editor)=>void`
The callback will fire when the editor changes ( update state or selection )
```svelte
let editor;
{
editor = _editor;
}}
/>
```
### onCreated
Type: `(editor: Editor)=>void | undefined`
Default: `undefined`
The callback will fire once the editor finishes initialize
```svelte
{
console.log('The editor is created and ready to use !');
}}
/>
```
### plugins
Type: `PluginOptions | undefined`
Default: `undefined`
```ts
type PluginOptions = {
image?: ImagePluginOptions;
gpt?: AskOptions;
dropCursor?: DropcursorOptions;
codeBlock?: NextlintCodeBlockOptions;
};
```
### plugins.image
Type: `ImagePluginOptions|undefined`
Default: `undefined`
Config the handleUpload function and setup API key to fetch images from unsplash
```svelte
{
// handle upload here
const blob = new Blob([file]);
const previewUrl = URL.createObjectURL(blob);
return previewUrl;
},
unsplash: {
accessKey: 'UNPLASH_API_KEY'
}
},
}
/>
```
### plugins.ask
Type:`AskOptions|undefined`
Default: `undefined`
Trigger prompt in an empty line, get the question from the editor, call the handle function via this config and append the result to the editor.
Allow to integrate with any AI out side the editor.
```svelte
{
// config any AI tool to get the result and return
// the result to the editor
return 'result from any AI Backend'
}
}
/>
```
### plugins.dropCursor
Type: `DropcursorOptions|undefined`
Default: `undefined`
Config dropCursor color/width/class.
```svelte
```
### plugins.codeBlock
Type: `NextlintCodeBlockOptions|undefined`
Default:
```ts
{
themes: {
dark: 'github-dark',
light: 'github-light'
},
langs: []
}
```
The `codeBlock` theme will sync with the `theme` props.
https://github.com/lynhan318/nextlint/assets/32099104/d5d5c72d-787d-4b16-882f-2cba0dbfaa35
```svelte
```
## Contributing
Please follow the [contribute guideline](https://github.com/sveltor/nextlint/blob/main/CONTRIBUTING.md)
## License
The MIT License (MIT). Please see [License File](https://github.com/sveltor/nextlint/blob/main/LICENSE) for more information.