Skip to content

Commit

Permalink
chore: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@lynhan318
lynhan318 committed Apr 2, 2024
1 parent 3b57805 commit ea1030f
Showing 1 changed file with 60 additions and 66 deletions.
126 changes: 60 additions & 66 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

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.
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.
Dark/Light theme is supported and customizable.

## Getting started

Expand All @@ -22,110 +22,110 @@ 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}"
'./src/**/*.{svelte,js}',
'./node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
],
theme: {
extend: {
colors: {
border: "hsl(var(--border) / <alpha-value>)",
input: "hsl(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring) / <alpha-value>)",
background: "hsl(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground) / <alpha-value>)",
border: 'hsl(var(--border) / <alpha-value>)',
input: 'hsl(var(--input) / <alpha-value>)',
ring: 'hsl(var(--ring) / <alpha-value>)',
background: 'hsl(var(--background) / <alpha-value>)',
foreground: 'hsl(var(--foreground) / <alpha-value>)',
primary: {
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
},
secondary: {
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
},
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
},
accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
},
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
},
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
},
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
}
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
fontFamily: {
sans: ["Inter"],
},
},
sans: ['Inter']
}
}
},
plugins: [],
}
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
<script lang="ts">
import { SvelteEditor, EditorTheme } from "@nextlint/svelte"
import {SvelteEditor} from '@nextlint/svelte/EditorTheme';
import EditorTheme from '@nextlint/svelte/EditorTheme';
</script>
<div class='editor'>
<div class="editor">
<EditorTheme>
<SvelteEditor
content=""
placeholder="Start editing..."
/>
<SvelteEditor content="" placeholder="Start editing..." />
</EditorTheme>
</div>
```

The `EditorTheme` basicaly just import the default theme we define in `EditorTheme.scss`:

```svelte
//EditorTheme.svelte
<script lang="ts">
import './EditorTheme.scss';
</script>
//EditorTheme.svelte
<slot />
```

Expand Down Expand Up @@ -164,10 +164,9 @@ Support upload/embed/unsplash api
| **[`plugins?`](#plugins)** | `PluginsOptions` | Customize plugins options |
| **[`extensions?`](#extensions)** | `Extensions` | Customize editor extension |


### content

Type: `HTMLContent | JSONContent | JSONContent[] | null`
Type: `HTMLContent | JSONContent | JSONContent[] | null`

Initialize content, can be a JSONContent or a html markup.

Expand Down Expand Up @@ -195,7 +194,6 @@ Initialize content, can be a JSONContent or a html markup.
/>
```


### placeholder

Type: `String | undefined`
Expand All @@ -204,27 +202,24 @@ Default: `undefined`
Placeholder will display when editor content is empty

```svelte
<SvelteEditor
...
content=""
placeholder="Press 'space' to trigger AI prompt"
/>
<SvelteEditor ... content="" placeholder="Press 'space' to trigger AI prompt" />
```

### onChange

Type: `(editor: Editor)=>void`
Type: `(editor: Editor)=>void`

The callback will fire when the editor changes ( update state or selection )

```svelte
<script lang='ts'>
<script lang="ts">
let editor;
</script>
<SvelteEditor
...
onChange={_editor=>{
editor=_editor
onChange={_editor => {
editor = _editor;
}}
/>
```
Expand All @@ -237,14 +232,12 @@ Default: `undefined`
The callback will fire once the editor finishes initialize

```svelte
<SvelteEditor
...
onCreated={editor=>{
console.log("The editor is created and ready to use !")
onCreated={editor => {
console.log('The editor is created and ready to use !');
}}
/>
```

### plugins
Expand All @@ -254,11 +247,10 @@ Default: `undefined`

```ts
type PluginOptions = {
image?: ImagePluginOptions;
gpt?: AskOptions;
dropCursor?: DropcursorOptions;
image?: ImagePluginOptions;
gpt?: AskOptions;
dropCursor?: DropcursorOptions;
};

```

### plugins.image
Expand Down Expand Up @@ -300,15 +292,14 @@ Allow to integrate with any AI out side the editor.
...
plugins={
ask: async (question:string)=>{
// config any AI tool to get the result and return
// 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`
Expand All @@ -329,6 +320,9 @@ Config dropCursor color/width/class.
```

## 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.

0 comments on commit ea1030f

Please sign in to comment.