chore: update docs

Author: lynhan318

README.md

@@ -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
 
@@ -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 />
 ```
 
@@ -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.
 
@@ -195,7 +194,6 @@ Initialize content, can be a JSONContent or a html markup.
 />
 ```
 
-
 ### placeholder
 
 Type: `String | undefined`
@@ -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;
   }}
 />
 ```
@@ -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
@@ -254,11 +247,10 @@ Default: `undefined`
 
 ```ts
 type PluginOptions = {
-    image?: ImagePluginOptions;
-    gpt?: AskOptions;
-    dropCursor?: DropcursorOptions;
+  image?: ImagePluginOptions;
+  gpt?: AskOptions;
+  dropCursor?: DropcursorOptions;
 };
-
 ```
 
 ### plugins.image
@@ -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`
@@ -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.