diff --git a/packages/editor/extensions/Readme.md b/packages/editor/extensions/Readme.md
new file mode 100644
index 000000000..39aca1226
--- /dev/null
+++ b/packages/editor/extensions/Readme.md
@@ -0,0 +1,97 @@
+# @plane/editor-extensions
+
+## Description
+
+The `@plane/lite-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Custom control over Enter key, etc.
+
+## Key Features
+
+- **Exported Components**: There are two components exported from the Lite text editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+
+ `LiteTextEditor` & `LiteTextEditorWithRef`
+
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
+ `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
+
+## LiteTextEditor
+
+| Prop | Type | Description |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile` | `(file: File) => Promise
` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+| `value` | `html string` | The initial content of the editor. |
+| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
+| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+1. Here is an example of how to use the `RichTextEditor` component
+
+```tsx
+ {
+ onChange(comment_html);
+ }}
+/>
+```
+
+2. Example of how to use the `LiteTextEditorWithRef` component
+
+```tsx
+const editorRef = useRef(null);
+
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
+
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
+
+return (
+ {
+ onChange(comment_html);
+ }}
+ />
+);
+```
+
+## LiteReadOnlyEditor
+
+| Prop | Type | Description |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value` | `html string` | The initial content of the editor. |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+Here is an example of how to use the `RichReadOnlyEditor` component
+
+```tsx
+
+```
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
new file mode 100644
index 000000000..54733949e
--- /dev/null
+++ b/packages/editor/extensions/package.json
@@ -0,0 +1,60 @@
+{
+ "name": "@plane/editor-extensions",
+ "version": "0.1.0",
+ "description": "Package that powers Plane's Editor with extensions",
+ "private": true,
+ "main": "./dist/index.mjs",
+ "module": "./dist/index.mjs",
+ "types": "./dist/index.d.mts",
+ "files": [
+ "dist/**/*"
+ ],
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.mts",
+ "import": "./dist/index.mjs",
+ "module": "./dist/index.mjs"
+ }
+ },
+ "scripts": {
+ "build": "tsup",
+ "dev": "tsup --watch",
+ "check-types": "tsc --noEmit"
+ },
+ "peerDependencies": {
+ "next": "12.3.2",
+ "next-themes": "^0.2.1",
+ "react": "^18.2.0",
+ "react-dom": "18.2.0"
+ },
+ "dependencies": {
+ "@tiptap/react": "^2.1.7",
+ "@tiptap/core": "^2.1.7",
+ "@tiptap/suggestion": "^2.0.4",
+ "@plane/editor-types": "*",
+ "@plane/editor-core": "*",
+ "eslint": "8.36.0",
+ "eslint-config-next": "13.2.4",
+ "lucide-react": "^0.244.0",
+ "tippy.js": "^6.3.7",
+ "@tiptap/pm": "^2.1.7"
+ },
+ "devDependencies": {
+ "@types/node": "18.15.3",
+ "@types/react": "^18.2.35",
+ "@types/react-dom": "^18.2.14",
+ "eslint": "^7.32.0",
+ "postcss": "^8.4.29",
+ "tailwind-config-custom": "*",
+ "tsconfig": "*",
+ "tsup": "^7.2.0",
+ "typescript": "4.9.5"
+ },
+ "keywords": [
+ "editor",
+ "rich-text",
+ "markdown",
+ "nextjs",
+ "react"
+ ]
+}
diff --git a/packages/editor/extensions/postcss.config.js b/packages/editor/extensions/postcss.config.js
new file mode 100644
index 000000000..07aa434b2
--- /dev/null
+++ b/packages/editor/extensions/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/drag-drop.tsx b/packages/editor/extensions/src/extensions/drag-drop.tsx
similarity index 87%
rename from packages/editor/rich-text-editor/src/ui/extensions/drag-drop.tsx
rename to packages/editor/extensions/src/extensions/drag-drop.tsx
index 60153daa9..33e7dcc34 100644
--- a/packages/editor/rich-text-editor/src/ui/extensions/drag-drop.tsx
+++ b/packages/editor/extensions/src/extensions/drag-drop.tsx
@@ -3,7 +3,30 @@ import { Extension } from "@tiptap/core";
import { PluginKey, NodeSelection, Plugin } from "@tiptap/pm/state";
// @ts-ignore
import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
-import { createDragHandleElement } from "../../lib/utils/DragHandleElement";
+
+function createDragHandleElement(): HTMLElement {
+ let dragHandleElement = document.createElement("div");
+ dragHandleElement.draggable = true;
+ dragHandleElement.dataset.dragHandle = "";
+ dragHandleElement.classList.add("drag-handle");
+
+ const dragHandleContainer = document.createElement("div");
+ dragHandleContainer.classList.add("drag-handle-container");
+ dragHandleElement.appendChild(dragHandleContainer);
+
+ const dotsContainer = document.createElement("div");
+ dotsContainer.classList.add("drag-handle-dots");
+
+ for (let i = 0; i < 6; i++) {
+ const spanElement = document.createElement("span");
+ spanElement.classList.add("drag-handle-dot");
+ dotsContainer.appendChild(spanElement);
+ }
+
+ dragHandleContainer.appendChild(dotsContainer);
+
+ return dragHandleElement;
+}
export interface DragHandleOptions {
dragHandleWidth: number;
@@ -220,7 +243,7 @@ function DragHandle(options: DragHandleOptions) {
});
}
-const DragAndDrop = Extension.create({
+export const DragAndDrop = Extension.create({
name: "dragAndDrop",
addProseMirrorPlugins() {
@@ -231,5 +254,3 @@ const DragAndDrop = Extension.create({
];
},
});
-
-export default DragAndDrop;
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx
similarity index 98%
rename from packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
rename to packages/editor/extensions/src/extensions/slash-commands.tsx
index bab13304a..399651c5a 100644
--- a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -10,6 +10,7 @@ import { Editor, Range, Extension } from "@tiptap/core";
import Suggestion from "@tiptap/suggestion";
import { ReactRenderer } from "@tiptap/react";
import tippy from "tippy.js";
+import type { UploadImage } from "@plane/editor-types";
import {
Heading1,
Heading2,
@@ -24,7 +25,6 @@ import {
ImageIcon,
Table,
} from "lucide-react";
-import { UploadImage } from "../";
import {
cn,
insertTableCommand,
@@ -156,6 +156,7 @@ const getSuggestionItems =
searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
icon: ,
command: ({ editor, range }: CommandProps) => {
+ // @ts-expect-error I have to move this to the core
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
},
},
@@ -191,6 +192,7 @@ const getSuggestionItems =
searchTerms: ["codeblock"],
icon: