From 063324d7055e00f0d2cc03743ddcbe75fc9f34c6 Mon Sep 17 00:00:00 2001 From: Kevin Date: Sun, 25 Feb 2024 18:01:06 +0700 Subject: [PATCH 1/6] docs: refactor --- README.md | 173 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 103 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 1ac5aae..12638e7 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,12 @@ # Nextlint -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. +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 editor(headless editor). Easy to use, develop and maintain. A prompt engine that helps to integrate with any AI API, and enhance the writing experience. -- 💻 **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. +Dark/Light theme is supported and customizable. -## Features +## Getting started -#### Bubble Menu - -![Bubble Menu](/source/bubble_menu.png) - -#### Slash Menu - -![Slash Menu](/source/slash_menu.png) - -#### Image - -Support upload/embed/unsplash api - -![Image](/source/image.png) - -#### GPT prompt - -![GPT prompt](/source/gpt_prompt.png) - -... and many more. - -## Demo: - -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* - -## Quick start - -Install the package: +### Install ```sh //npm @@ -51,51 +19,116 @@ yarn add @nextlint/svelte npm add @nextlint/svelte ``` -## Setup +### 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). -```svelte - + +
+ + + +
+``` - - { editor = createdEditor }} - onChange={nextEditor => { editor = nextEditor }} - - - plugins={{ - selectImage: { - handleUpload, - unsplash: { - accessKey: 'UNPLASH_API_KEY' - } - }, - gpt: {query: submitPromt} - }} +The `EditorTheme` basicaly just import the default theme we define in `EditorTheme.scss`: + +```svelte - /> - +//EditorTheme.svelte + + + ``` +## Editor Configuration + ## Contributing Please follow the [contribute guideline](https://github.com/sveltor/nextlint/blob/main/CONTRIBUTING.md) ## License From cfa19a5c70a11f07bc264d099809c1bcdd3383a9 Mon Sep 17 00:00:00 2001 From: Kevin Date: Sun, 25 Feb 2024 18:58:06 +0700 Subject: [PATCH 2/6] docs: save --- README.md | 123 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 121 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 12638e7..cc67518 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # 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 editor(headless editor). Easy to use, develop and maintain. A prompt engine that helps to integrate with any AI API, and enhance the writing experience. +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. @@ -127,7 +129,124 @@ The `EditorTheme` basicaly just import the default theme we define in `EditorThe ``` -## Editor Configuration +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) + +## 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` + +A callback will fire when the editor changes ( update state or selection ) + +```svelte + +{ + editor=_editor + }} +/> +``` + +### onCreated + +Type: `(editor: Editor)=>void | undefined` +Default: `undefined` + +Callback will fire once when editor finish initialize + +```svelte + +{ + console.log("The editor is created and ready to use !") + }} +/> + +``` + +### plugins + +Type: `PluginOptions | undefined` +Default: `undefined` + +```ts +type PluginOptions = { + image?: ImagePluginOptions; + gpt?: GPTOptions; + dropCursor?: DropcursorOptions; +}; + +``` + +#### plugins.image + +Type: `ImagePluginOptions | undefined` +Default: `undefined` + ## Contributing Please follow the [contribute guideline](https://github.com/sveltor/nextlint/blob/main/CONTRIBUTING.md) From 7f084492d7099e74754397476fdf9c363aed5f8b Mon Sep 17 00:00:00 2001 From: Kevin Date: Sun, 25 Feb 2024 19:09:20 +0700 Subject: [PATCH 3/6] docs: options --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index cc67518..1f6d578 100644 --- a/README.md +++ b/README.md @@ -242,11 +242,6 @@ type PluginOptions = { ``` -#### plugins.image - -Type: `ImagePluginOptions | undefined` -Default: `undefined` - ## Contributing Please follow the [contribute guideline](https://github.com/sveltor/nextlint/blob/main/CONTRIBUTING.md) From 7b8942f0306e54ec275d6766fa415fc2f067e4f9 Mon Sep 17 00:00:00 2001 From: Kevin Date: Mon, 26 Feb 2024 00:34:53 +0700 Subject: [PATCH 4/6] docs: update --- README.md | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 88 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1f6d578..a9b0d5b 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,26 @@ Nexltint editor uses `nextlint/core`, which is a headless editor with [existing] 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 + +![Bubble Menu](/source/bubble_menu.png) + +### Slash Menu + +![Slash Menu](/source/slash_menu.png) + +### Image + +Support upload/embed/unsplash api + +![Image](/source/image.png) + +### AI prompt + +![GPT prompt](/source/gpt_prompt.png) + ## Options | Name | Type | Description | @@ -145,7 +165,6 @@ Nextlint Svelte itself has some [plugins](https://github.com/sveltor/nextlint/tr | **[`extensions?`](#extensions)** | `Extensions` | Customize editor extension | - ### content Type: `HTMLContent | JSONContent | JSONContent[] | null` @@ -196,7 +215,7 @@ Placeholder will display when editor content is empty Type: `(editor: Editor)=>void` -A callback will fire when the editor changes ( update state or selection ) +The callback will fire when the editor changes ( update state or selection ) ```svelte