diff --git a/deploy/coolify/README.md b/deploy/coolify/README.md index 9bd11568f..0bf6b4d63 100644 --- a/deploy/coolify/README.md +++ b/deploy/coolify/README.md @@ -1,8 +1,8 @@ -## Coolify Setup +## Coolify Setup Access the `coolify-docker-compose` file [here](https://raw.githubusercontent.com/makeplane/plane/master/deploy/coolify/coolify-docker-compose.yml) or download using using below command ``` curl -fsSL https://raw.githubusercontent.com/makeplane/plane/master/deploy/coolify/coolify-docker-compose.yml -``` \ No newline at end of file +``` diff --git a/deploy/kubernetes/README.md b/deploy/kubernetes/README.md index fe7991fcf..905721813 100644 --- a/deploy/kubernetes/README.md +++ b/deploy/kubernetes/README.md @@ -1,8 +1,5 @@ - # Helm Chart -Click on the below link to access the helm chart instructions. +Click on the below link to access the helm chart instructions. [![Artifact Hub](https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/makeplane)](https://artifacthub.io/packages/search?repo=makeplane) - - diff --git a/deploy/selfhost/README.md b/deploy/selfhost/README.md index e36c33c76..8988e77f5 100644 --- a/deploy/selfhost/README.md +++ b/deploy/selfhost/README.md @@ -1,18 +1,20 @@ -# Self Hosting +# Self Hosting -In this guide, we will walk you through the process of setting up a self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization. +In this guide, we will walk you through the process of setting up a self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization. -We will cover two main options for setting up your self-hosted environment: using a cloud server or using your desktop. For the cloud server, we will use an AWS EC2 instance. For the desktop, we will use Docker to create a local environment. +We will cover two main options for setting up your self-hosted environment: using a cloud server or using your desktop. For the cloud server, we will use an AWS EC2 instance. For the desktop, we will use Docker to create a local environment. Let's get started! -## Setting up Docker Environment +## Setting up Docker Environment +
Option 1 - Using Cloud Server

Best way to start is to create EC2 maching on AWS. It must of minimum t3.medium/t3a/medium

Run the below command to install docker engine.

- ```curl -fsSL https://get.docker.com -o install-docker.sh``` +`curl -fsSL https://get.docker.com -o install-docker.sh` +
--- @@ -20,30 +22,34 @@ Let's get started!
Option 2 - Using Desktop - #### For Mac +#### For Mac +
  1. Download Docker Desktop for Mac from the Docker Hub.
  2. Double-click the downloaded `.dmg` file and drag the Docker app icon to the Applications folder.
  3. Open Docker Desktop from the Applications folder. You might be asked to provide your system password to install additional software.
- #### For Windows: +#### For Windows: +
  1. Download Docker Desktop for Windows from the Docker Hub.
  2. Run the installer and follow the instructions. You might be asked to enable Hyper-V and "Containers" Windows features.
  3. Open Docker Desktop. You might be asked to log out and log back in, or restart your machine, for changes to take effect.
- After installation, you can verify the installation by opening a terminal (Command Prompt on Windows, Terminal app on Mac) and running the command `docker --version`. This should display the installed version of Docker. +After installation, you can verify the installation by opening a terminal (Command Prompt on Windows, Terminal app on Mac) and running the command `docker --version`. This should display the installed version of Docker. +
--- ## Installing Plane -Installing plane is a very easy and minimal step process. +Installing plane is a very easy and minimal step process. + +### Prerequisite -### Prerequisite - Docker installed and running - OS with bash scripting enabled (Ubuntu, Linux AMI, macos). Windows systems need to have [gitbash](https://git-scm.com/download/win) - User context used must have access to docker services. In most cases, use sudo su to switch as root user @@ -82,11 +88,11 @@ chmod +x setup.sh ### Proceed with setup -Above steps will set you ready to install and start plane services. +Above steps will set you ready to install and start plane services. -Lets get started by running the `./setup.sh` command. +Lets get started by running the `./setup.sh` command. -This will prompt you with the below options. +This will prompt you with the below options. ``` Select a Action you want to perform: @@ -100,26 +106,27 @@ Select a Action you want to perform: Action [2]: 1 ``` -For the 1st time setup, type "1" as action input. +For the 1st time setup, type "1" as action input. This will create a create a folder `plane-app` or `plane-app-preview` (in case of preview deployment) and will download 2 files inside that + - `docker-compose.yaml` - `.env` -Again the `options [1-6]` will be popped up and this time hit `6` to exit. +Again the `options [1-6]` will be popped up and this time hit `6` to exit. --- ### Continue with setup - Environment Settings -Before proceeding, we suggest used to review `.env` file and set the values. -Below are the most import keys you must refer to. *You can use any text editor to edit this file*. +Before proceeding, we suggest used to review `.env` file and set the values. +Below are the most import keys you must refer to. _You can use any text editor to edit this file_. > `NGINX_PORT` - This is default set to `80`. Make sure the port you choose to use is not preoccupied. (e.g `NGINX_PORT=8080`) -> `WEB_URL` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) +> `WEB_URL` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) -> `CORS_ALLOWED_ORIGINS` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) +> `CORS_ALLOWED_ORIGINS` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) There are many other settings you can play with, but we suggest you configure `EMAIL SETTINGS` as it will enable you to invite your teammates onto the platform. @@ -148,15 +155,15 @@ Be patient as it might take sometime based on download speed and system configur ![Downloading completed](images/started.png) -This is the confirmation that all images were downloaded and the services are up & running. +This is the confirmation that all images were downloaded and the services are up & running. -You have successfully self hosted `Plane` instance. Access the application by going to IP or domain you have configured it (e.g `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) +You have successfully self hosted `Plane` instance. Access the application by going to IP or domain you have configured it (e.g `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) --- ### Stopping the Server -In case you want to make changes to `.env` variables, we suggest you to stop the services before doing that. +In case you want to make changes to `.env` variables, we suggest you to stop the services before doing that. Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `3` to stop the sevices @@ -180,7 +187,7 @@ If all goes well, you must see something like this ### Restarting the Server -In case you want to make changes to `.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with RESTART option. +In case you want to make changes to `.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with RESTART option. Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `4` to restart the sevices @@ -206,7 +213,7 @@ If all goes well, you must see something like this It is always advised to keep Plane up to date with the latest release. -Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release. +Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release. ``` Select a Action you want to perform: @@ -220,7 +227,7 @@ Select a Action you want to perform: Action [2]: 5 ``` -By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `variables-upgrade.env`. Here system will not replace `.env` with the new one. +By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `variables-upgrade.env`. Here system will not replace `.env` with the new one. You must expect the below message @@ -228,18 +235,17 @@ You must expect the below message Once done, choose `6` to exit from prompt. -> It is very important for you to compare the 2 files `variables-upgrade.env` and `.env`. Copy the newly added variable from downloaded file to `.env` and set the expected values. +> It is very important for you to compare the 2 files `variables-upgrade.env` and `.env`. Copy the newly added variable from downloaded file to `.env` and set the expected values. Once done with making changes in `.env` file, jump on to `Start Server` - ## Upgrading from v0.13.2 to v0.14.x This is one time activity for users who are upgrading from v0.13.2 to v0.14.0 As there has been significant changes to Self Hosting process, this step mainly covers the data migration from current (v0.13.2) docker volumes from newly created volumes -> Before we begin with migration, make sure your v0.14.0 was started and then stopped. This is required to know the newly created docker volume names. +> Before we begin with migration, make sure your v0.14.0 was started and then stopped. This is required to know the newly created docker volume names. Begin with downloading the migration script using below command @@ -256,15 +262,15 @@ Now run the `./migrate.sh` command and expect the instructions as below ``` ****************************************************************** -This script is solely for the migration purpose only. +This script is solely for the migration purpose only. This is a 1 time migration of volume data from v0.13.2 => v0.14.x -Assumption: +Assumption: 1. Postgres data volume name ends with _pgdata 2. Minio data volume name ends with _uploads 3. Redis data volume name ends with _redisdata -Any changes to this script can break the migration. +Any changes to this script can break the migration. Before you proceed, make sure you run the below command to know the docker volumes @@ -275,12 +281,12 @@ docker volume ls -q | grep -i "_redisdata" ******************************************************* -Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata" +Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata" --------------------- plane-app_redisdata v0132_redisdata -Provide the Source Volume Prefix : +Provide the Source Volume Prefix : ``` **Open another terminal window**, and run the mentioned 3 command. This may be different for users who have changed the volume names in their previous setup (v0.13.2) @@ -289,9 +295,9 @@ For every command you must see 2 records something like shown in above example o To move forward, you would need PREFIX of old setup and new setup. As per above example, `v0132` is the prefix of v0.13.2 and `plane-app` is the prefix of v0.14.0 setup -**Back to original terminal window**, *Provide the Source Volume Prefix* and hit ENTER. +**Back to original terminal window**, _Provide the Source Volume Prefix_ and hit ENTER. -Now you will be prompted to *Provide Destination Volume Prefix*. Provide the value and hit ENTER +Now you will be prompted to _Provide Destination Volume Prefix_. Provide the value and hit ENTER ``` Provide the Source Volume Prefix : v0132 @@ -302,8 +308,6 @@ In case the suffixes are wrong or the mentioned volumes are not found, you will ![Migrate Error](images/migrate-error.png) -In case of successful migration, it will be a silent exit without error. - -Now its time to restart v0.14.0 setup. - +In case of successful migration, it will be a silent exit without error. +Now its time to restart v0.14.0 setup. diff --git a/package.json b/package.json index 7c3937852..06e84557b 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "prettier": "latest", "prettier-plugin-tailwindcss": "^0.5.4", "tailwindcss": "^3.3.3", - "turbo": "^1.10.16" + "turbo": "^1.11.1" }, "resolutions": { "@types/react": "18.2.42" diff --git a/packages/editor/core/.eslintrc.js b/packages/editor/core/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/editor/core/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/editor/core/.prettierignore b/packages/editor/core/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/editor/core/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/editor/core/.prettierrc b/packages/editor/core/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/editor/core/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts index 725b72b8b..4a331e7cd 100644 --- a/packages/editor/core/src/lib/editor-commands.ts +++ b/packages/editor/core/src/lib/editor-commands.ts @@ -4,35 +4,17 @@ import { startImageUpload } from "../ui/plugins/upload-image"; import { findTableAncestor } from "./utils"; export const toggleHeadingOne = (editor: Editor, range?: Range) => { - if (range) - editor - .chain() - .focus() - .deleteRange(range) - .setNode("heading", { level: 1 }) - .run(); + if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run(); else editor.chain().focus().toggleHeading({ level: 1 }).run(); }; export const toggleHeadingTwo = (editor: Editor, range?: Range) => { - if (range) - editor - .chain() - .focus() - .deleteRange(range) - .setNode("heading", { level: 2 }) - .run(); + if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run(); else editor.chain().focus().toggleHeading({ level: 2 }).run(); }; export const toggleHeadingThree = (editor: Editor, range?: Range) => { - if (range) - editor - .chain() - .focus() - .deleteRange(range) - .setNode("heading", { level: 3 }) - .run(); + if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run(); else editor.chain().focus().toggleHeading({ level: 3 }).run(); }; @@ -57,8 +39,7 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => { }; export const toggleOrderedList = (editor: Editor, range?: Range) => { - if (range) - editor.chain().focus().deleteRange(range).toggleOrderedList().run(); + if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run(); else editor.chain().focus().toggleOrderedList().run(); }; @@ -78,21 +59,8 @@ export const toggleStrike = (editor: Editor, range?: Range) => { }; export const toggleBlockquote = (editor: Editor, range?: Range) => { - if (range) - editor - .chain() - .focus() - .deleteRange(range) - .toggleNode("paragraph", "paragraph") - .toggleBlockquote() - .run(); - else - editor - .chain() - .focus() - .toggleNode("paragraph", "paragraph") - .toggleBlockquote() - .run(); + if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run(); + else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(); }; export const insertTableCommand = (editor: Editor, range?: Range) => { @@ -105,19 +73,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => { } } } - if (range) - editor - .chain() - .focus() - .deleteRange(range) - .insertTable({ rows: 3, cols: 3, withHeaderRow: true }) - .run(); - else - editor - .chain() - .focus() - .insertTable({ rows: 3, cols: 3, withHeaderRow: true }) - .run(); + if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); + else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); }; export const unsetLinkEditor = (editor: Editor) => { @@ -131,10 +88,8 @@ export const setLinkEditor = (editor: Editor, url: string) => { export const insertImageCommand = ( editor: Editor, uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, - range?: Range, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, + range?: Range ) => { if (range) editor.chain().focus().deleteRange(range).run(); const input = document.createElement("input"); diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts index f426b70b7..5c7a8f08f 100644 --- a/packages/editor/core/src/lib/utils.ts +++ b/packages/editor/core/src/lib/utils.ts @@ -6,25 +6,19 @@ interface EditorClassNames { customClassName?: string; } -export const getEditorClassNames = ({ - noBorder, - borderOnFocus, - customClassName, -}: EditorClassNames) => +export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) => cn( "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md", noBorder ? "" : "border border-custom-border-200", borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0", - customClassName, + customClassName ); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -export const findTableAncestor = ( - node: Node | null, -): HTMLTableElement | null => { +export const findTableAncestor = (node: Node | null): HTMLTableElement | null => { while (node !== null && node.nodeName !== "TABLE") { node = node.parentNode; } diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx index 050755f5a..8de6298b5 100644 --- a/packages/editor/core/src/ui/components/editor-container.tsx +++ b/packages/editor/core/src/ui/components/editor-container.tsx @@ -7,11 +7,7 @@ interface EditorContainerProps { children: ReactNode; } -export const EditorContainer = ({ - editor, - editorClassNames, - children, -}: EditorContainerProps) => ( +export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => (
{ diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx index 830b87d9c..f66edbb12 100644 --- a/packages/editor/core/src/ui/components/editor-content.tsx +++ b/packages/editor/core/src/ui/components/editor-content.tsx @@ -8,16 +8,10 @@ interface EditorContentProps { children?: ReactNode; } -export const EditorContentWrapper = ({ - editor, - editorContentCustomClassNames = "", - children, -}: EditorContentProps) => ( +export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = "", children }: EditorContentProps) => (
- {editor?.isActive("image") && editor?.isEditable && ( - - )} + {editor?.isActive("image") && editor?.isEditable && } {children}
); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts index 5312cb20e..3bbfd9c93 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts @@ -2,10 +2,7 @@ import { getNodeType } from "@tiptap/core"; import { NodeType } from "@tiptap/pm/model"; import { EditorState } from "@tiptap/pm/state"; -export const findListItemPos = ( - typeOrName: string | NodeType, - state: EditorState, -) => { +export const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => { const { $from } = state.selection; const nodeType = getNodeType(typeOrName, state.schema); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts index e81b19592..f7583f195 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts @@ -10,11 +10,7 @@ export const getNextListDepth = (typeOrName: string, state: EditorState) => { return false; } - const [, depth] = getNodeAtPosition( - state, - typeOrName, - listItemPos.$pos.pos + 4, - ); + const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4); return depth; }; diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts index 1eac3ae4a..08906148b 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts @@ -4,11 +4,7 @@ import { Node } from "@tiptap/pm/model"; import { findListItemPos } from "./find-list-item-pos"; import { hasListBefore } from "./has-list-before"; -export const handleBackspace = ( - editor: Editor, - name: string, - parentListTypes: string[], -) => { +export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => { // this is required to still handle the undo handling if (editor.commands.undoInputRule()) { return true; @@ -23,10 +19,7 @@ export const handleBackspace = ( // if the current item is NOT inside a list item & // the previous item is a list (orderedList or bulletList) // move the cursor into the list and delete the current item - if ( - !isNodeActive(editor.state, name) && - hasListBefore(editor.state, name, parentListTypes) - ) { + if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) { const { $anchor } = editor.state.selection; const $listPos = editor.state.doc.resolve($anchor.before() - 1); @@ -45,16 +38,11 @@ export const handleBackspace = ( return false; } - const $lastItemPos = editor.state.doc.resolve( - $listPos.start() + lastItem.pos + 1, - ); + const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1); return editor .chain() - .cut( - { from: $anchor.start() - 1, to: $anchor.end() + 1 }, - $lastItemPos.end(), - ) + .cut({ from: $anchor.start() - 1, to: $anchor.end() + 1 }, $lastItemPos.end()) .joinForward() .run(); } diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts index 99c8ac18b..fb6b95b6a 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts @@ -1,10 +1,6 @@ import { EditorState } from "@tiptap/pm/state"; -export const hasListBefore = ( - editorState: EditorState, - name: string, - parentListTypes: string[], -) => { +export const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => { const { $anchor } = editorState.selection; const previousNodePos = Math.max(0, $anchor.pos - 2); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts index da20516e1..4e538ac47 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts @@ -1,9 +1,6 @@ import { EditorState } from "@tiptap/pm/state"; -export const hasListItemAfter = ( - typeOrName: string, - state: EditorState, -): boolean => { +export const hasListItemAfter = (typeOrName: string, state: EditorState): boolean => { const { $anchor } = state.selection; const $targetPos = state.doc.resolve($anchor.pos - $anchor.parentOffset - 2); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts index 4cb1236ab..91fda9bf4 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts @@ -1,9 +1,6 @@ import { EditorState } from "@tiptap/pm/state"; -export const hasListItemBefore = ( - typeOrName: string, - state: EditorState, -): boolean => { +export const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => { const { $anchor } = state.selection; const $targetPos = state.doc.resolve($anchor.pos - 2); diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx index 0e3b5fe94..a7bbf50e1 100644 --- a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx +++ b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx @@ -1,12 +1,6 @@ import { TextSelection } from "prosemirror-state"; -import { - InputRule, - mergeAttributes, - Node, - nodeInputRule, - wrappingInputRule, -} from "@tiptap/core"; +import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core"; /** * Extension based on: @@ -83,8 +77,7 @@ export default Node.create({ tr.setSelection(TextSelection.create(tr.doc, $to.pos)); } else { // add node after horizontal rule if it’s the end of the document - const node = - $to.parent.type.contentMatch.defaultType?.create(); + const node = $to.parent.type.contentMatch.defaultType?.create(); if (node) { tr.insert(posAfter, node); diff --git a/packages/editor/core/src/ui/extensions/image/image-resize.tsx b/packages/editor/core/src/ui/extensions/image/image-resize.tsx index 2ede63961..400938785 100644 --- a/packages/editor/core/src/ui/extensions/image/image-resize.tsx +++ b/packages/editor/core/src/ui/extensions/image/image-resize.tsx @@ -4,9 +4,7 @@ import Moveable from "react-moveable"; export const ImageResizer = ({ editor }: { editor: Editor }) => { const updateMediaSize = () => { - const imageInfo = document.querySelector( - ".ProseMirror-selectednode", - ) as HTMLImageElement; + const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement; if (imageInfo) { const selection = editor.state.selection; editor.commands.setImage({ @@ -32,9 +30,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => { resizable throttleResize={0} onResizeStart={() => { - const imageInfo = document.querySelector( - ".ProseMirror-selectednode", - ) as HTMLImageElement; + const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement; if (imageInfo) { const originalWidth = Number(imageInfo.width); const originalHeight = Number(imageInfo.height); diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx index 094a198bd..b11bfefce 100644 --- a/packages/editor/core/src/ui/extensions/image/index.tsx +++ b/packages/editor/core/src/ui/extensions/image/index.tsx @@ -15,22 +15,14 @@ interface ImageNode extends ProseMirrorNode { const deleteKey = new PluginKey("delete-image"); const IMAGE_NODE_TYPE = "image"; -const ImageExtension = ( - deleteImage: DeleteImage, - restoreFile: RestoreImage, - cancelUploadImage?: () => any, -) => +const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) => ImageExt.extend({ addProseMirrorPlugins() { return [ UploadImagesPlugin(cancelUploadImage), new Plugin({ key: deleteKey, - appendTransaction: ( - transactions: readonly Transaction[], - oldState: EditorState, - newState: EditorState, - ) => { + appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { const newImageSources = new Set(); newState.doc.descendants((node) => { if (node.type.name === IMAGE_NODE_TYPE) { @@ -67,11 +59,7 @@ const ImageExtension = ( }), new Plugin({ key: new PluginKey("imageRestoration"), - appendTransaction: ( - transactions: readonly Transaction[], - oldState: EditorState, - newState: EditorState, - ) => { + appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { const oldImageSources = new Set(); oldState.doc.descendants((node) => { if (node.type.name === IMAGE_NODE_TYPE) { diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index c911c886a..4ab82f3c8 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -22,11 +22,7 @@ import { CustomKeymap } from "./keymap"; import { CustomCodeBlock } from "./code"; import { CustomQuoteExtension } from "./quote"; import { ListKeymap } from "./custom-list-keymap"; -import { - IMentionSuggestion, - DeleteImage, - RestoreImage, -} from "@plane/editor-types"; +import { IMentionSuggestion, DeleteImage, RestoreImage } from "@plane/editor-types"; export const CoreEditorExtensions = ( mentionConfig: { @@ -109,9 +105,5 @@ export const CoreEditorExtensions = ( TableHeader, TableCell, TableRow, - Mentions( - mentionConfig.mentionSuggestions, - mentionConfig.mentionHighlights, - false - ), + Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false), ]; diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts index 1b576623b..5df20e6ef 100644 --- a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts +++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts @@ -22,10 +22,6 @@ export default Node.create({ }, renderHTML({ HTMLAttributes }) { - return [ - "tr", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), - 0, - ]; + return ["tr", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]; }, }); diff --git a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts index efaf84970..9311d4c99 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts +++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts @@ -20,15 +20,12 @@ export function tableControls() { mousemove: (view, event) => { const pluginState = key.getState(view.state); - if ( - !(event.target as HTMLElement).closest(".tableWrapper") && - pluginState.values.hoveredTable - ) { + if (!(event.target as HTMLElement).closest(".tableWrapper") && pluginState.values.hoveredTable) { return view.dispatch( view.state.tr.setMeta(key, { setHoveredTable: null, setHoveredCell: null, - }), + }) ); } @@ -40,13 +37,11 @@ export function tableControls() { if (!pos) return; const table = findParentNode((node) => node.type.name === "table")( - TextSelection.create(view.state.doc, pos.pos), + TextSelection.create(view.state.doc, pos.pos) + ); + const cell = findParentNode((node) => node.type.name === "tableCell" || node.type.name === "tableHeader")( + TextSelection.create(view.state.doc, pos.pos) ); - const cell = findParentNode( - (node) => - node.type.name === "tableCell" || - node.type.name === "tableHeader", - )(TextSelection.create(view.state.doc, pos.pos)); if (!table || !cell) return; @@ -55,7 +50,7 @@ export function tableControls() { view.state.tr.setMeta(key, { setHoveredTable: table, setHoveredCell: cell, - }), + }) ); } }, @@ -68,12 +63,7 @@ export function tableControls() { const { hoveredTable, hoveredCell } = pluginState.values; const docSize = state.doc.content.size; - if ( - hoveredTable && - hoveredCell && - hoveredTable.pos < docSize && - hoveredCell.pos < docSize - ) { + if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) { const decorations = [ Decoration.node( hoveredTable.pos, @@ -82,7 +72,7 @@ export function tableControls() { { hoveredTable, hoveredCell, - }, + } ), ]; diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx index 7f72a212e..5b0622243 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx +++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx @@ -4,11 +4,7 @@ import { Decoration, NodeView } from "@tiptap/pm/view"; import tippy, { Instance, Props } from "tippy.js"; import { Editor } from "@tiptap/core"; -import { - CellSelection, - TableMap, - updateColumnsOnResize, -} from "@tiptap/prosemirror-tables"; +import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/prosemirror-tables"; import icons from "./icons"; @@ -18,7 +14,7 @@ export function updateColumns( table: HTMLElement, cellMinWidth: number, overrideCol?: number, - overrideValue?: any, + overrideValue?: any ) { let totalWidth = 0; let fixedWidth = true; @@ -31,8 +27,7 @@ export function updateColumns( const { colspan, colwidth } = row.child(i).attrs; for (let j = 0; j < colspan; j += 1, col += 1) { - const hasWidth = - overrideCol === col ? overrideValue : colwidth && colwidth[j]; + const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j]; const cssWidth = hasWidth ? `${hasWidth}px` : ""; totalWidth += hasWidth || cellMinWidth; @@ -42,8 +37,7 @@ export function updateColumns( } if (!nextDOM) { - colgroup.appendChild(document.createElement("col")).style.width = - cssWidth; + colgroup.appendChild(document.createElement("col")).style.width = cssWidth; } else { if (nextDOM.style.width !== cssWidth) { nextDOM.style.width = cssWidth; @@ -98,14 +92,12 @@ const columnsToolboxItems = [ { label: "Add Column Before", icon: icons.insertLeftTableIcon, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().addColumnBefore().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnBefore().run(), }, { label: "Add Column After", icon: icons.insertRightTableIcon, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().addColumnAfter().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnAfter().run(), }, { label: "Pick Column Color", @@ -131,8 +123,7 @@ const columnsToolboxItems = [ { label: "Delete Column", icon: icons.deleteColumn, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().deleteColumn().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteColumn().run(), }, ]; @@ -140,14 +131,12 @@ const rowsToolboxItems = [ { label: "Add Row Above", icon: icons.insertTopTableIcon, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().addRowBefore().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowBefore().run(), }, { label: "Add Row Below", icon: icons.insertBottomTableIcon, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().addRowAfter().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowAfter().run(), }, { label: "Pick Row Color", @@ -159,11 +148,7 @@ const rowsToolboxItems = [ }: { editor: Editor; triggerButton: HTMLButtonElement; - controlsContainer: - | Element - | "parent" - | ((ref: Element) => Element) - | undefined; + controlsContainer: Element | "parent" | ((ref: Element) => Element) | undefined; }) => { createColorPickerToolbox({ triggerButton, @@ -177,8 +162,7 @@ const rowsToolboxItems = [ { label: "Delete Row", icon: icons.deleteRow, - action: ({ editor }: { editor: Editor }) => - editor.chain().focus().deleteRow().run(), + action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteRow().run(), }, ]; @@ -213,9 +197,9 @@ function createToolbox({ innerHTML: item.icon, }), h("div", { className: "label" }, item.label), - ], - ), - ), + ] + ) + ) ), ...tippyOptions, }); @@ -272,11 +256,11 @@ function createColorPickerToolbox({ { className: "label", }, - key, + key ), - ], - ), - ), + ] + ) + ) ), onHidden: (instance) => { instance.destroy(); @@ -319,7 +303,7 @@ export class TableView implements NodeView { cellMinWidth: number, decorations: Decoration[], editor: Editor, - getPos: () => number, + getPos: () => number ) { this.node = node; this.cellMinWidth = cellMinWidth; @@ -337,7 +321,7 @@ export class TableView implements NodeView { itemType: "button", className: "rowsControlDiv", onClick: () => this.selectRow(), - }), + }) ); this.columnsControl = h( @@ -347,14 +331,14 @@ export class TableView implements NodeView { itemType: "button", className: "columnsControlDiv", onClick: () => this.selectColumn(), - }), + }) ); this.controls = h( "div", { className: "tableControls", contentEditable: "false" }, this.rowsControl, - this.columnsControl, + this.columnsControl ); this.columnsToolbox = createToolbox({ @@ -397,7 +381,7 @@ export class TableView implements NodeView { this.colgroup = h( "colgroup", null, - Array.from({ length: this.map.width }, () => 1).map(() => h("col")), + Array.from({ length: this.map.width }, () => 1).map(() => h("col")) ); this.tbody = h("tbody"); this.table = h("table", null, this.colgroup, this.tbody); @@ -408,7 +392,7 @@ export class TableView implements NodeView { className: "tableWrapper controls--disabled", }, this.controls, - this.table, + this.table ); this.render(); @@ -434,18 +418,11 @@ export class TableView implements NodeView { render() { if (this.colgroup.children.length !== this.map.width) { - const cols = Array.from({ length: this.map.width }, () => 1).map(() => - h("col"), - ); + const cols = Array.from({ length: this.map.width }, () => 1).map(() => h("col")); this.colgroup.replaceChildren(...cols); } - updateColumnsOnResize( - this.node, - this.colgroup, - this.table, - this.cellMinWidth, - ); + updateColumnsOnResize(this.node, this.colgroup, this.table, this.cellMinWidth); } ignoreMutation() { @@ -453,9 +430,7 @@ export class TableView implements NodeView { } updateControls() { - const { hoveredTable: table, hoveredCell: cell } = Object.values( - this.decorations, - ).reduce( + const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce( (acc, curr) => { if (curr.spec.hoveredCell !== undefined) { acc["hoveredCell"] = curr.spec.hoveredCell; @@ -466,7 +441,7 @@ export class TableView implements NodeView { } return acc; }, - {} as Record, + {} as Record ) as any; if (table === undefined || cell === undefined) { @@ -481,9 +456,7 @@ export class TableView implements NodeView { const tableRect = this.table.getBoundingClientRect(); const cellRect = cellDom.getBoundingClientRect(); - this.columnsControl.style.left = `${ - cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft - }px`; + this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`; this.columnsControl.style.width = `${cellRect.width}px`; this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`; @@ -493,22 +466,14 @@ export class TableView implements NodeView { selectColumn() { if (!this.hoveredCell) return; - const colIndex = this.map.colCount( - this.hoveredCell.pos - (this.getPos() + 1), - ); + const colIndex = this.map.colCount(this.hoveredCell.pos - (this.getPos() + 1)); const anchorCellPos = this.hoveredCell.pos; - const headCellPos = - this.map.map[colIndex + this.map.width * (this.map.height - 1)] + - (this.getPos() + 1); + const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1); - const cellSelection = CellSelection.create( - this.editor.view.state.doc, - anchorCellPos, - headCellPos, - ); + const cellSelection = CellSelection.create(this.editor.view.state.doc, anchorCellPos, headCellPos); this.editor.view.dispatch( // @ts-ignore - this.editor.state.tr.setSelection(cellSelection), + this.editor.state.tr.setSelection(cellSelection) ); } @@ -516,21 +481,13 @@ export class TableView implements NodeView { if (!this.hoveredCell) return; const anchorCellPos = this.hoveredCell.pos; - const anchorCellIndex = this.map.map.indexOf( - anchorCellPos - (this.getPos() + 1), - ); - const headCellPos = - this.map.map[anchorCellIndex + (this.map.width - 1)] + - (this.getPos() + 1); + const anchorCellIndex = this.map.map.indexOf(anchorCellPos - (this.getPos() + 1)); + const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1); - const cellSelection = CellSelection.create( - this.editor.state.doc, - anchorCellPos, - headCellPos, - ); + const cellSelection = CellSelection.create(this.editor.state.doc, anchorCellPos, headCellPos); this.editor.view.dispatch( // @ts-ignore - this.editor.view.state.tr.setSelection(cellSelection), + this.editor.view.state.tr.setSelection(cellSelection) ); } } diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts index 8571fdfba..71c75f616 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table.ts +++ b/packages/editor/core/src/ui/extensions/table/table/table.ts @@ -1,12 +1,6 @@ import { TextSelection } from "@tiptap/pm/state"; -import { - callOrReturn, - getExtensionField, - mergeAttributes, - Node, - ParentConfig, -} from "@tiptap/core"; +import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"; import { addColumnAfter, addColumnBefore, @@ -44,11 +38,7 @@ export interface TableOptions { declare module "@tiptap/core" { interface Commands { table: { - insertTable: (options?: { - rows?: number; - cols?: number; - withHeaderRow?: boolean; - }) => ReturnType; + insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType; addColumnBefore: () => ReturnType; addColumnAfter: () => ReturnType; deleteColumn: () => ReturnType; @@ -66,10 +56,7 @@ declare module "@tiptap/core" { goToNextCell: () => ReturnType; goToPreviousCell: () => ReturnType; fixTables: () => ReturnType; - setCellSelection: (position: { - anchorCell: number; - headCell?: number; - }) => ReturnType; + setCellSelection: (position: { anchorCell: number; headCell?: number }) => ReturnType; }; } @@ -114,11 +101,7 @@ export default Node.create({ }, renderHTML({ HTMLAttributes }) { - return [ - "table", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), - ["tbody", 0], - ]; + return ["table", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ["tbody", 0]]; }, addCommands() { @@ -220,11 +203,7 @@ export default Node.create({ (position) => ({ tr, dispatch }) => { if (dispatch) { - const selection = CellSelection.create( - tr.doc, - position.anchorCell, - position.headCell, - ); + const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell); // @ts-ignore tr.setSelection(selection); @@ -260,13 +239,7 @@ export default Node.create({ return ({ editor, getPos, node, decorations }) => { const { cellMinWidth } = this.options; - return new TableView( - node, - cellMinWidth, - decorations, - editor, - getPos as () => number, - ); + return new TableView(node, cellMinWidth, decorations, editor, getPos as () => number); }; }, @@ -289,7 +262,7 @@ export default Node.create({ // @ts-ignore lastColumnResizable: this.options.lastColumnResizable, - }), + }) ); } @@ -304,9 +277,7 @@ export default Node.create({ }; return { - tableRole: callOrReturn( - getExtensionField(extension, "tableRole", context), - ), + tableRole: callOrReturn(getExtensionField(extension, "tableRole", context)), }; }, }); diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts index 7811341e0..5fc2b146d 100644 --- a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts +++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts @@ -2,7 +2,7 @@ import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model"; export function createCell( cellType: NodeType, - cellContent?: Fragment | ProsemirrorNode | Array, + cellContent?: Fragment | ProsemirrorNode | Array ): ProsemirrorNode | null | undefined { if (cellContent) { return cellType.createChecked(null, cellContent); diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts index 5805ecf86..5a2299fb4 100644 --- a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts +++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts @@ -8,7 +8,7 @@ export function createTable( rowsCount: number, colsCount: number, withHeaderRow: boolean, - cellContent?: Fragment | ProsemirrorNode | Array, + cellContent?: Fragment | ProsemirrorNode | Array ): ProsemirrorNode { const types = getTableNodeTypes(schema); const headerCells: ProsemirrorNode[] = []; @@ -33,12 +33,7 @@ export function createTable( const rows: ProsemirrorNode[] = []; for (let index = 0; index < rowsCount; index += 1) { - rows.push( - types.row.createChecked( - null, - withHeaderRow && index === 0 ? headerCells : cells, - ), - ); + rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells)); } return types.table.createChecked(null, rows); diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts index 7fed53705..7b5386382 100644 --- a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts +++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts @@ -1,13 +1,8 @@ -import { - findParentNodeClosestToPos, - KeyboardShortcutCommand, -} from "@tiptap/core"; +import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"; import { isCellSelection } from "./is-cell-selection"; -export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ - editor, -}) => { +export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor }) => { const { selection } = editor.state; if (!isCellSelection(selection)) { @@ -15,10 +10,7 @@ export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ } let cellCount = 0; - const table = findParentNodeClosestToPos( - selection.ranges[0].$from, - (node) => node.type.name === "table", - ); + const table = findParentNodeClosestToPos(selection.ranges[0].$from, (node) => node.type.name === "table"); table?.node.descendants((node) => { if (node.type.name === "table") { diff --git a/packages/editor/core/src/ui/hooks/use-editor.tsx b/packages/editor/core/src/ui/hooks/use-editor.tsx index d30e8ca89..149f9b453 100644 --- a/packages/editor/core/src/ui/hooks/use-editor.tsx +++ b/packages/editor/core/src/ui/hooks/use-editor.tsx @@ -4,12 +4,7 @@ import { CoreEditorProps } from "../props"; import { CoreEditorExtensions } from "../extensions"; import { EditorProps } from "@tiptap/pm/view"; import { getTrimmedHTML } from "../../lib/utils"; -import { - DeleteImage, - IMentionSuggestion, - RestoreImage, - UploadImage, -} from "@plane/editor-types"; +import { DeleteImage, IMentionSuggestion, RestoreImage, UploadImage } from "@plane/editor-types"; interface CustomEditorProps { uploadFile: UploadImage; @@ -20,9 +15,7 @@ interface CustomEditorProps { }; deleteFile: DeleteImage; cancelUploadImage?: () => any; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setShouldShowAlert?: (showAlert: boolean) => void; value: string; debouncedUpdatesEnabled?: boolean; @@ -66,12 +59,11 @@ export const useEditor = ({ }, deleteFile, restoreFile, - cancelUploadImage, + cancelUploadImage ), ...extensions, ], - content: - typeof value === "string" && value.trim() !== "" ? value : "

", + content: typeof value === "string" && value.trim() !== "" ? value : "

", onCreate: async ({ editor }) => { onStart?.(editor.getJSON(), getTrimmedHTML(editor.getHTML())); }, @@ -82,7 +74,7 @@ export const useEditor = ({ onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML())); }, }, - [rerenderOnPropsChange], + [rerenderOnPropsChange] ); const editorRef: MutableRefObject = useRef(null); diff --git a/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx b/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx index 3339e095f..5c2429108 100644 --- a/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx +++ b/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx @@ -30,8 +30,7 @@ export const useReadOnlyEditor = ({ const editor = useCustomEditor( { editable: false, - content: - typeof value === "string" && value.trim() !== "" ? value : "

", + content: typeof value === "string" && value.trim() !== "" ? value : "

", editorProps: { ...CoreReadOnlyEditorProps, ...editorProps, @@ -44,7 +43,7 @@ export const useReadOnlyEditor = ({ ...extensions, ], }, - [rerenderOnPropsChange], + [rerenderOnPropsChange] ); const editorRef: MutableRefObject = useRef(null); diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/MentionList.tsx index 1bc4dc4d1..d103a9e0a 100644 --- a/packages/editor/core/src/ui/mentions/MentionList.tsx +++ b/packages/editor/core/src/ui/mentions/MentionList.tsx @@ -1,21 +1,10 @@ import { IMentionSuggestion } from "@plane/editor-types"; import { Editor } from "@tiptap/react"; -import React, { - forwardRef, - useCallback, - useEffect, - useImperativeHandle, - useState, -} from "react"; +import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react"; interface MentionListProps { items: IMentionSuggestion[]; - command: (item: { - id: string; - label: string; - target: string; - redirect_uri: string; - }) => void; + command: (item: { id: string; label: string; target: string; redirect_uri: string }) => void; editor: Editor; } @@ -37,9 +26,7 @@ const MentionList = forwardRef((props: MentionListProps, ref) => { }; const upHandler = () => { - setSelectedIndex( - (selectedIndex + props.items.length - 1) % props.items.length, - ); + setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length); }; const downHandler = () => { @@ -76,31 +63,27 @@ const MentionList = forwardRef((props: MentionListProps, ref) => { })); return props.items && props.items.length !== 0 ? ( -
+
{props.items.length ? ( props.items.map((item, index) => (
selectItem(index)} > -
+
{item.avatar && item.avatar.trim() !== "" ? ( - {item.title} + {item.title} ) : ( -
+
{item.title[0]}
)}
-

{item.title}

+

{item.title}

{/*

{item.subtitle}

*/}
diff --git a/packages/editor/core/src/ui/mentions/index.tsx b/packages/editor/core/src/ui/mentions/index.tsx index acbea8f59..b78923f6c 100644 --- a/packages/editor/core/src/ui/mentions/index.tsx +++ b/packages/editor/core/src/ui/mentions/index.tsx @@ -4,11 +4,7 @@ import suggestion from "./suggestion"; import { CustomMention } from "./custom"; import { IMentionHighlight, IMentionSuggestion } from "@plane/editor-types"; -export const Mentions = ( - mentionSuggestions: IMentionSuggestion[], - mentionHighlights: IMentionHighlight[], - readonly, -) => +export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({ HTMLAttributes: { class: "mention", diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx index 1451b0b22..8e9672d9f 100644 --- a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx +++ b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx @@ -8,8 +8,7 @@ import { IMentionHighlight } from "@plane/editor-types"; // eslint-disable-next-line import/no-anonymous-default-export export default (props) => { const router = useRouter(); - const highlights = props.extension.options - .mentionHighlights as IMentionHighlight[]; + const highlights = props.extension.options.mentionHighlights as IMentionHighlight[]; const handleClick = () => { if (!props.extension.options.readonly) { @@ -18,18 +17,13 @@ export default (props) => { }; return ( - + ({ items: ({ query }: { query: string }) => - suggestions - .filter((suggestion) => - suggestion.title.toLowerCase().startsWith(query.toLowerCase()), - ) - .slice(0, 5), + suggestions.filter((suggestion) => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5), render: () => { let reactRenderer: ReactRenderer | null = null; let popup: any | null = null; diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx index 3a78c94e3..98069b694 100644 --- a/packages/editor/core/src/ui/menus/menu-items/index.tsx +++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx @@ -134,9 +134,7 @@ export const TableItem = (editor: Editor): EditorMenuItem => ({ export const ImageItem = ( editor: Editor, uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ): EditorMenuItem => ({ name: "image", isActive: () => editor?.isActive("image"), diff --git a/packages/editor/core/src/ui/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx index 6f4bd46be..6b772cebf 100644 --- a/packages/editor/core/src/ui/plugins/delete-image.tsx +++ b/packages/editor/core/src/ui/plugins/delete-image.tsx @@ -15,11 +15,7 @@ interface ImageNode extends ProseMirrorNode { const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => new Plugin({ key: deleteKey, - appendTransaction: ( - transactions: readonly Transaction[], - oldState: EditorState, - newState: EditorState, - ) => { + appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { const newImageSources = new Set(); newState.doc.descendants((node) => { if (node.type.name === IMAGE_NODE_TYPE) { @@ -59,10 +55,7 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => export default TrackImageDeletionPlugin; -export async function onNodeDeleted( - src: string, - deleteImage: DeleteImage, -): Promise { +export async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise { try { const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); const resStatus = await deleteImage(assetUrlWithWorkspaceId); @@ -74,10 +67,7 @@ export async function onNodeDeleted( } } -export async function onNodeRestored( - src: string, - restoreImage: RestoreImage, -): Promise { +export async function onNodeRestored(src: string, restoreImage: RestoreImage): Promise { try { const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); const resStatus = await restoreImage(assetUrlWithWorkspaceId); diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx index ea40c3c71..4dee70da4 100644 --- a/packages/editor/core/src/ui/plugins/upload-image.tsx +++ b/packages/editor/core/src/ui/plugins/upload-image.tsx @@ -21,10 +21,7 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) => const placeholder = document.createElement("div"); placeholder.setAttribute("class", "img-placeholder"); const image = document.createElement("img"); - image.setAttribute( - "class", - "opacity-10 rounded-lg border border-custom-border-300", - ); + image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300"); image.src = src; placeholder.appendChild(image); @@ -42,10 +39,7 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) => // Create an SVG element from the SVG string const svgString = ``; const parser = new DOMParser(); - const svgElement = parser.parseFromString( - svgString, - "image/svg+xml", - ).documentElement; + const svgElement = parser.parseFromString(svgString, "image/svg+xml").documentElement; cancelButton.appendChild(svgElement); placeholder.appendChild(cancelButton); @@ -54,13 +48,7 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) => }); set = set.add(tr.doc, [deco]); } else if (action && action.remove) { - set = set.remove( - set.find( - undefined, - undefined, - (spec) => spec.id == action.remove.id, - ), - ); + set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id)); } return set; }, @@ -76,11 +64,7 @@ export default UploadImagesPlugin; function findPlaceholder(state: EditorState, id: {}) { const decos = uploadKey.getState(state); - const found = decos.find( - undefined, - undefined, - (spec: { id: number | undefined }) => spec.id == id, - ); + const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id); return found.length ? found[0].from : null; } @@ -96,9 +80,7 @@ export async function startImageUpload( view: EditorView, pos: number, uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ) { if (!file) { alert("No file selected. Please select a file to upload."); @@ -151,9 +133,7 @@ export async function startImageUpload( const imageSrc = typeof src === "object" ? reader.result : src; const node = schema.nodes.image.create({ src: imageSrc }); - const transaction = view.state.tr - .replaceWith(pos, pos, node) - .setMeta(uploadKey, { remove: { id } }); + const transaction = view.state.tr.replaceWith(pos, pos, node).setMeta(uploadKey, { remove: { id } }); view.dispatch(transaction); } catch (error) { console.error("Upload error: ", error); @@ -161,10 +141,7 @@ export async function startImageUpload( } } -const UploadImageHandler = ( - file: File, - uploadFile: UploadImage, -): Promise => { +const UploadImageHandler = (file: File, uploadFile: UploadImage): Promise => { try { return new Promise(async (resolve, reject) => { try { diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx index 24a08d844..edd070d7b 100644 --- a/packages/editor/core/src/ui/props.tsx +++ b/packages/editor/core/src/ui/props.tsx @@ -5,9 +5,7 @@ import { startImageUpload } from "./plugins/upload-image"; export function CoreEditorProps( uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ): EditorProps { return { attributes: { @@ -34,11 +32,7 @@ export function CoreEditorProps( } } } - if ( - event.clipboardData && - event.clipboardData.files && - event.clipboardData.files[0] - ) { + if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) { event.preventDefault(); const file = event.clipboardData.files[0]; const pos = view.state.selection.from; @@ -57,12 +51,7 @@ export function CoreEditorProps( } } } - if ( - !moved && - event.dataTransfer && - event.dataTransfer.files && - event.dataTransfer.files[0] - ) { + if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) { event.preventDefault(); const file = event.dataTransfer.files[0]; const coordinates = view.posAtCoords({ @@ -70,13 +59,7 @@ export function CoreEditorProps( top: event.clientY, }); if (coordinates) { - startImageUpload( - file, - view, - coordinates.pos - 1, - uploadFile, - setIsSubmitting, - ); + startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting); } return true; } diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx index f7ebedccc..cdf7f88e5 100644 --- a/packages/editor/core/src/ui/read-only/extensions.tsx +++ b/packages/editor/core/src/ui/read-only/extensions.tsx @@ -45,8 +45,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: { }, code: { HTMLAttributes: { - class: - "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000", + class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000", spellcheck: "false", }, }, @@ -94,9 +93,5 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: { TableHeader, TableCell, TableRow, - Mentions( - mentionConfig.mentionSuggestions, - mentionConfig.mentionHighlights, - true, - ), + Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true), ]; diff --git a/packages/editor/document-editor/.eslintrc.js b/packages/editor/document-editor/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/editor/document-editor/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/editor/document-editor/.prettierignore b/packages/editor/document-editor/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/editor/document-editor/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/editor/document-editor/.prettierrc b/packages/editor/document-editor/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/editor/document-editor/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json index 302a06fb0..737a0eae0 100644 --- a/packages/editor/document-editor/package.json +++ b/packages/editor/document-editor/package.json @@ -36,9 +36,6 @@ "@tiptap/extension-placeholder": "^2.1.11", "@tiptap/pm": "^2.1.12", "@tiptap/suggestion": "^2.1.12", - "@types/node": "18.15.3", - "@types/react": "^18.2.39", - "@types/react-dom": "18.0.11", "eslint": "8.36.0", "eslint-config-next": "13.2.4", "react-popper": "^2.3.0", diff --git a/packages/editor/document-editor/src/index.ts b/packages/editor/document-editor/src/index.ts index ae48a3b47..356e1faf9 100644 --- a/packages/editor/document-editor/src/index.ts +++ b/packages/editor/document-editor/src/index.ts @@ -1,6 +1,3 @@ export { DocumentEditor, DocumentEditorWithRef } from "./ui"; -export { - DocumentReadOnlyEditor, - DocumentReadOnlyEditorWithRef, -} from "./ui/readonly"; +export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "./ui/readonly"; export { FixedMenu } from "./ui/menu/fixed-menu"; diff --git a/packages/editor/document-editor/src/ui/components/alert-label.tsx b/packages/editor/document-editor/src/ui/components/alert-label.tsx index 0f0a238ba..395ea2317 100644 --- a/packages/editor/document-editor/src/ui/components/alert-label.tsx +++ b/packages/editor/document-editor/src/ui/components/alert-label.tsx @@ -12,7 +12,7 @@ export const AlertLabel = (props: IAlertLabelProps) => { return (
{Icon && } {label} diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx index 68f6469b8..a21ca268f 100644 --- a/packages/editor/document-editor/src/ui/components/content-browser.tsx +++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx @@ -1,8 +1,4 @@ -import { - HeadingComp, - HeadingThreeComp, - SubheadingComp, -} from "./heading-component"; +import { HeadingComp, HeadingThreeComp, SubheadingComp } from "./heading-component"; import { IMarking } from ".."; import { Editor } from "@tiptap/react"; import { scrollSummary } from "../utils/editor-summary-utils"; @@ -16,32 +12,21 @@ export const ContentBrowser = (props: ContentBrowserProps) => { const { editor, markings } = props; return ( -
+

Table of Contents

{markings.length !== 0 ? ( markings.map((marking) => marking.level === 1 ? ( - scrollSummary(editor, marking)} - heading={marking.text} - /> + scrollSummary(editor, marking)} heading={marking.text} /> ) : marking.level === 2 ? ( - scrollSummary(editor, marking)} - subHeading={marking.text} - /> + scrollSummary(editor, marking)} subHeading={marking.text} /> ) : ( - scrollSummary(editor, marking)} - /> - ), + scrollSummary(editor, marking)} /> + ) ) ) : ( -

- Headings will be displayed here for navigation -

+

Headings will be displayed here for navigation

)}
diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx index 6d548669e..7e2167ba0 100644 --- a/packages/editor/document-editor/src/ui/components/editor-header.tsx +++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx @@ -5,10 +5,7 @@ import { FixedMenu } from "../menu"; import { UploadImage } from "@plane/editor-types"; import { DocumentDetails } from "../types/editor-types"; import { AlertLabel } from "./alert-label"; -import { - IVerticalDropdownItemProps, - VerticalDropdownMenu, -} from "./vertical-dropdown-menu"; +import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "./vertical-dropdown-menu"; import { SummaryPopover } from "./summary-popover"; import { InfoPopover } from "./info-popover"; @@ -23,9 +20,7 @@ interface IEditorHeader { archivedAt?: Date; readonly: boolean; uploadFile?: UploadImage; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; documentDetails: DocumentDetails; isSubmitting?: "submitting" | "submitted" | "saved"; } @@ -48,8 +43,8 @@ export const EditorHeader = (props: IEditorHeader) => { } = props; return ( -
-
+
+
{
{!readonly && uploadFile && ( - + )}
-
+
{isLocked && ( { {!isLocked && !isArchived ? (
diff --git a/packages/editor/document-editor/src/ui/components/heading-component.tsx b/packages/editor/document-editor/src/ui/components/heading-component.tsx index d8ceea8f9..ce3489418 100644 --- a/packages/editor/document-editor/src/ui/components/heading-component.tsx +++ b/packages/editor/document-editor/src/ui/components/heading-component.tsx @@ -23,7 +23,7 @@ export const SubheadingComp = ({ }) => (

{subHeading} @@ -39,7 +39,7 @@ export const HeadingThreeComp = ({ }) => (

{heading} diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx index 41d131afb..0d650667e 100644 --- a/packages/editor/document-editor/src/ui/components/info-popover.tsx +++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx @@ -19,10 +19,7 @@ const renderDate = (date: Date): string => { hour12: true, }; - const formattedDate: string = new Intl.DateTimeFormat( - "en-US", - options, - ).format(date); + const formattedDate: string = new Intl.DateTimeFormat("en-US", options).format(date); return formattedDate; }; @@ -32,42 +29,35 @@ export const InfoPopover: React.FC = (props) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [referenceElement, setReferenceElement] = - useState(null); - const [popperElement, setPopperElement] = useState( - null, - ); + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); - const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = - usePopper(referenceElement, popperElement, { - placement: "bottom-start", - }); + const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, { + placement: "bottom-start", + }); return ( -

setIsPopoverOpen(true)} - onMouseLeave={() => setIsPopoverOpen(false)} - > +
setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}> {isPopoverOpen && (
-
Last updated on
-
+
Last updated on
+
{renderDate(new Date(documentDetails.last_updated_at))}
-
Created on
-
+
Created on
+
{renderDate(new Date(documentDetails.created_on))}
diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx index 198a03b64..d25e9ca43 100644 --- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx +++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx @@ -25,14 +25,7 @@ const debounce = (func: (...args: any[]) => void, wait: number) => { }; export const PageRenderer = (props: IPageRenderer) => { - const { - documentDetails, - editor, - editorClassNames, - editorContentCustomClassNames, - updatePageTitle, - readonly, - } = props; + const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props; const [pageTitle, setPagetitle] = useState(documentDetails.title); @@ -44,27 +37,24 @@ export const PageRenderer = (props: IPageRenderer) => { }; return ( -
+
{!readonly ? ( handlePageTitleChange(e.target.value)} - className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none" + className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none" value={pageTitle} /> ) : ( handlePageTitleChange(e.target.value)} - className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none overflow-x-clip" + className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none" value={pageTitle} disabled /> )} -
+
- +
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx index 67054212d..61361c049 100644 --- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx +++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx @@ -17,26 +17,24 @@ type Props = { export const SummaryPopover: React.FC = (props) => { const { editor, markings, sidePeekVisible, setSidePeekVisible } = props; - const [referenceElement, setReferenceElement] = - useState(null); - const [popperElement, setPopperElement] = useState( - null, - ); + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); - const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = - usePopper(referenceElement, popperElement, { + const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper( + referenceElement, + popperElement, + { placement: "bottom-start", - }); + } + ); return (
{!sidePeekVisible && (
{ +export const SummarySideBar = ({ editor, markings, sidePeekVisible }: ISummarySideBarProps) => { return (
diff --git a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx index fd897b156..93fea4730 100644 --- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx +++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx @@ -23,11 +23,7 @@ export interface IVerticalDropdownMenuProps { items: IVerticalDropdownItemProps[]; } -const VerticalDropdownItem = ({ - Icon, - label, - action, -}: IVerticalDropdownItemProps) => { +const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => { return ( @@ -42,19 +38,11 @@ export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => { maxHeight={"md"} className={"h-4.5 mt-1"} placement={"bottom-start"} - optionsClassName={ - "border-custom-border border-r border-solid transition-all duration-200 ease-in-out " - } + optionsClassName={"border-custom-border border-r border-solid transition-all duration-200 ease-in-out "} customButton={} > {items.map((item, index) => ( - + ))} ); diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx index 316abc7b9..968328a76 100644 --- a/packages/editor/document-editor/src/ui/extensions/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/index.tsx @@ -11,9 +11,7 @@ import { LayersIcon } from "@plane/ui"; export const DocumentEditorExtensions = ( uploadFile: UploadImage, issueEmbedConfig?: IIssueEmbedConfig, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ) => { const additionalOptions: ISlashCommandItem[] = [ { @@ -28,7 +26,7 @@ export const DocumentEditorExtensions = ( .focus() .insertContentAt( range, - "

#issue_

", + "

#issue_

" ) .run(); }, diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx index 54d1dec21..07a10031d 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx @@ -18,34 +18,32 @@ export interface IIssueListSuggestion { } export const IssueSuggestions = (suggestions: any[]) => { - const mappedSuggestions: IIssueListSuggestion[] = suggestions.map( - (suggestion): IIssueListSuggestion => { - let transactionId = uuidv4(); - return { - title: suggestion.name, - priority: suggestion.priority.toString(), - identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`, - state: suggestion.state_detail.name, - command: ({ editor, range }) => { - editor - .chain() - .focus() - .insertContentAt(range, { - type: "issue-embed-component", - attrs: { - entity_identifier: suggestion.id, - id: transactionId, - title: suggestion.name, - project_identifier: suggestion.project_detail.identifier, - sequence_id: suggestion.sequence_id, - entity_name: "issue", - }, - }) - .run(); - }, - }; - }, - ); + const mappedSuggestions: IIssueListSuggestion[] = suggestions.map((suggestion): IIssueListSuggestion => { + let transactionId = uuidv4(); + return { + title: suggestion.name, + priority: suggestion.priority.toString(), + identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`, + state: suggestion.state_detail.name, + command: ({ editor, range }) => { + editor + .chain() + .focus() + .insertContentAt(range, { + type: "issue-embed-component", + attrs: { + entity_identifier: suggestion.id, + id: transactionId, + title: suggestion.name, + project_identifier: suggestion.project_detail.identifier, + sequence_id: suggestion.sequence_id, + entity_name: "issue", + }, + }) + .run(); + }, + }; + }); return IssueEmbedSuggestions.configure({ suggestion: { diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx index fbd31c257..75d977e49 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx @@ -9,15 +9,7 @@ export const IssueEmbedSuggestions = Extension.create({ addOptions() { return { suggestion: { - command: ({ - editor, - range, - props, - }: { - editor: Editor; - range: Range; - props: any; - }) => { + command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => { props.command({ editor, range }); }, }, diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx index ae5e164a2..b1f27ece3 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx @@ -1,8 +1,6 @@ import { IIssueListSuggestion } from "."; -export const getIssueSuggestionItems = ( - issueSuggestions: Array, -) => { +export const getIssueSuggestionItems = (issueSuggestions: Array) => { return ({ query }: { query: string }) => { const search = query.toLowerCase(); const filteredSuggestions = issueSuggestions.filter((item) => { diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx index 892a7f09b..487d4f075 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx @@ -2,13 +2,7 @@ import { cn } from "@plane/editor-core"; import { Editor } from "@tiptap/core"; import tippy from "tippy.js"; import { ReactRenderer } from "@tiptap/react"; -import { - useCallback, - useEffect, - useLayoutEffect, - useRef, - useState, -} from "react"; +import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { PriorityIcon } from "@plane/ui"; const updateScrollView = (container: HTMLElement, item: HTMLElement) => { @@ -62,9 +56,7 @@ const IssueSuggestionList = ({ let newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {}; let totalLength = 0; sections.forEach((section) => { - newDisplayedItems[section] = items - .filter((item) => item.state === section) - .slice(0, 5); + newDisplayedItems[section] = items.filter((item) => item.state === section).slice(0, 5); totalLength += newDisplayedItems[section].length; }); @@ -79,7 +71,7 @@ const IssueSuggestionList = ({ command(item); } }, - [command, displayedItems, currentSection], + [command, displayedItems, currentSection] ); useEffect(() => { @@ -93,22 +85,17 @@ const IssueSuggestionList = ({ // } if (e.key === "ArrowUp") { setSelectedIndex( - (selectedIndex + displayedItems[currentSection].length - 1) % - displayedItems[currentSection].length, + (selectedIndex + displayedItems[currentSection].length - 1) % displayedItems[currentSection].length ); return true; } if (e.key === "ArrowDown") { - const nextIndex = - (selectedIndex + 1) % displayedItems[currentSection].length; + const nextIndex = (selectedIndex + 1) % displayedItems[currentSection].length; setSelectedIndex(nextIndex); if (nextIndex === 4) { const nextItems = items .filter((item) => item.state === currentSection) - .slice( - displayedItems[currentSection].length, - displayedItems[currentSection].length + 5, - ); + .slice(displayedItems[currentSection].length, displayedItems[currentSection].length + 5); setDisplayedItems((prevItems) => ({ ...prevItems, [currentSection]: [...prevItems[currentSection], ...nextItems], @@ -138,29 +125,17 @@ const IssueSuggestionList = ({ return () => { document.removeEventListener("keydown", onKeyDown); }; - }, [ - displayedItems, - selectedIndex, - setSelectedIndex, - selectItem, - currentSection, - ]); + }, [displayedItems, selectedIndex, setSelectedIndex, selectItem, currentSection]); useLayoutEffect(() => { const container = commandListContainer?.current; if (container) { - const sectionContainer = container?.querySelector( - `#${currentSection}-container`, - ) as HTMLDivElement; + const sectionContainer = container?.querySelector(`#${currentSection}-container`) as HTMLDivElement; if (sectionContainer) { updateScrollView(container, sectionContainer); } - const sectionScrollContainer = container?.querySelector( - `#${currentSection}`, - ) as HTMLElement; - const item = sectionScrollContainer?.children[ - selectedIndex - ] as HTMLElement; + const sectionScrollContainer = container?.querySelector(`#${currentSection}`) as HTMLElement; + const item = sectionScrollContainer?.children[selectedIndex] as HTMLElement; if (item && sectionScrollContainer) { updateScrollView(sectionScrollContainer, item); } @@ -171,56 +146,41 @@ const IssueSuggestionList = ({
{sections.map((section) => { const sectionItems = displayedItems[section]; return ( sectionItems && sectionItems.length > 0 && ( -
+
{section}
-
- {sectionItems.map( - (item: IssueSuggestionProps, index: number) => ( - - ), - )} +
+ {sectionItems.map((item: IssueSuggestionProps, index: number) => ( + + ))}
) diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx index bbe8ec021..fb521efef 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx @@ -5,8 +5,7 @@ interface IssueWidgetExtensionProps { issueEmbedConfig?: IIssueEmbedConfig; } -export const IssueWidgetExtension = ({ - issueEmbedConfig, -}: IssueWidgetExtensionProps) => IssueWidget.configure({ - issueEmbedConfig, -}); +export const IssueWidgetExtension = ({ issueEmbedConfig }: IssueWidgetExtensionProps) => + IssueWidget.configure({ + issueEmbedConfig, + }); diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx index 79aabcdfa..18dad8cae 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx @@ -30,15 +30,13 @@ const IssueWidgetCard = (props) => { {loading == 0 ? (
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
-

- {issueDetails.name} -

-
+

{issueDetails.name}

+
@@ -46,18 +44,13 @@ const IssueWidgetCard = (props) => { {issueDetails.assignee_details.map((assignee) => { return ( - + ); })}
{issueDetails.target_date && ( -
+
{new Date(issueDetails.target_date).toLocaleDateString()}
@@ -65,17 +58,15 @@ const IssueWidgetCard = (props) => {
) : loading == -1 ? ( -
+
- { - "This Issue embed is not found in any project. It can no longer be updated or accessed from here." - } + {"This Issue embed is not found in any project. It can no longer be updated or accessed from here."}
) : ( -
+
-
+
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx index 014197184..c30fe5e5b 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx @@ -35,10 +35,7 @@ export const IssueWidget = Node.create({ addNodeView() { return ReactNodeViewRenderer((props: Object) => ( - + )); }, diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts index 9e633c0c8..615b55dee 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts +++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts @@ -5,5 +5,5 @@ export interface IEmbedConfig { export interface IIssueEmbedConfig { fetchIssue: (issueId: string) => Promise; clickAction: (issueId: string, issueTitle: string) => void; - issues: Array; + issues: Array; } diff --git a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx b/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx index e8b58a2b8..9dfef6c39 100644 --- a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx +++ b/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx @@ -15,21 +15,14 @@ export const useEditorMarkings = () => { nodes.forEach((node) => { if ( node.type === "heading" && - (node.attrs.level === 1 || - node.attrs.level === 2 || - node.attrs.level === 3) && + (node.attrs.level === 1 || node.attrs.level === 2 || node.attrs.level === 3) && node.content ) { tempMarkings.push({ type: "heading", level: node.attrs.level, text: node.content[0].text, - sequence: - node.attrs.level === 1 - ? ++h1Sequence - : node.attrs.level === 2 - ? ++h2Sequence - : ++h3Sequence, + sequence: node.attrs.level === 1 ? ++h1Sequence : node.attrs.level === 2 ? ++h2Sequence : ++h3Sequence, }); } }); diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index f2ff77455..a99d1e6a8 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -2,11 +2,7 @@ import React, { useState } from "react"; import { getEditorClassNames, useEditor } from "@plane/editor-core"; import { DocumentEditorExtensions } from "./extensions"; -import { - IDuplicationConfig, - IPageArchiveConfig, - IPageLockConfig, -} from "./types/menu-actions"; +import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "./types/menu-actions"; import { EditorHeader } from "./components/editor-header"; import { useEditorMarkings } from "./hooks/use-editor-markings"; import { SummarySideBar } from "./components/summary-side-bar"; @@ -41,9 +37,7 @@ interface IDocumentEditor { customClassName?: string; editorContentCustomClassNames?: string; onChange: (json: any, html: string) => void; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setShouldShowAlert?: (showAlert: boolean) => void; forwardedRef?: any; updatePageTitle: (title: string) => Promise; @@ -118,11 +112,7 @@ const DocumentEditor = ({ cancelUploadImage, rerenderOnPropsChange, forwardedRef, - extensions: DocumentEditorExtensions( - uploadFile, - embedConfig?.issueEmbedConfig, - setIsSubmitting, - ), + extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting), }); if (!editor) { @@ -147,7 +137,7 @@ const DocumentEditor = ({ if (!editor) return null; return ( -
+
-
-
- +
+
+
-
+
); }; -const DocumentEditorWithRef = React.forwardRef( - (props, ref) => , -); +const DocumentEditorWithRef = React.forwardRef((props, ref) => ( + +)); DocumentEditorWithRef.displayName = "DocumentEditorWithRef"; diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx index a11f5f358..f4b205484 100644 --- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx +++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx @@ -1,6 +1,4 @@ import { Editor } from "@tiptap/react"; -import { BoldIcon } from "lucide-react"; - import { BoldItem, BulletListItem, @@ -18,22 +16,16 @@ import { HeadingTwoItem, HeadingThreeItem, findTableAncestor, + EditorMenuItem, } from "@plane/editor-core"; import { UploadImage } from "@plane/editor-types"; -export interface BubbleMenuItem { - name: string; - isActive: () => boolean; - command: () => void; - icon: typeof BoldIcon; -} +export type BubbleMenuItem = EditorMenuItem; type EditorBubbleMenuProps = { editor: Editor; uploadFile: UploadImage; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; }; export const FixedMenu = (props: EditorBubbleMenuProps) => { @@ -49,15 +41,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { StrikeThroughItem(editor), ]; - const listItems: BubbleMenuItem[] = [ - BulletListItem(editor), - NumberedListItem(editor), - ]; + const listItems: BubbleMenuItem[] = [BulletListItem(editor), NumberedListItem(editor)]; - const userActionItems: BubbleMenuItem[] = [ - QuoteItem(editor), - CodeItem(editor), - ]; + const userActionItems: BubbleMenuItem[] = [QuoteItem(editor), CodeItem(editor)]; function getComplexItems(): BubbleMenuItem[] { const items: BubbleMenuItem[] = [TableItem(editor)]; @@ -99,10 +85,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { type="button" onClick={item.command} className={cn( - "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded", + "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", { - "text-custom-text-100 bg-custom-background-80": item.isActive(), - }, + "bg-custom-background-80 text-custom-text-100": item.isActive(), + } )} > @@ -116,10 +102,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { type="button" onClick={item.command} className={cn( - "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded", + "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", { - "text-custom-text-100 bg-custom-background-80": item.isActive(), - }, + "bg-custom-background-80 text-custom-text-100": item.isActive(), + } )} > { type="button" onClick={item.command} className={cn( - "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded", + "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", { - "text-custom-text-100 bg-custom-background-80": item.isActive(), - }, + "bg-custom-background-80 text-custom-text-100": item.isActive(), + } )} > { type="button" onClick={item.command} className={cn( - "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded", + "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", { - "text-custom-text-100 bg-custom-background-80": item.isActive(), - }, + "bg-custom-background-80 text-custom-text-100": item.isActive(), + } )} > = ({ iconName, className = "" }) => ( - - {iconName} - + {iconName} ); diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx index c6e8ef025..e7897755e 100644 --- a/packages/editor/document-editor/src/ui/readonly/index.tsx +++ b/packages/editor/document-editor/src/ui/readonly/index.tsx @@ -8,11 +8,7 @@ import { IssueWidgetExtension } from "../extensions/widgets/IssueEmbedWidget"; import { IEmbedConfig } from "../extensions/widgets/IssueEmbedWidget/types"; import { useEditorMarkings } from "../hooks/use-editor-markings"; import { DocumentDetails } from "../types/editor-types"; -import { - IPageArchiveConfig, - IPageLockConfig, - IDuplicationConfig, -} from "../types/menu-actions"; +import { IPageArchiveConfig, IPageLockConfig, IDuplicationConfig } from "../types/menu-actions"; import { getMenuOptions } from "../utils/menu-options"; interface IDocumentReadOnlyEditor { @@ -67,9 +63,7 @@ const DocumentReadOnlyEditor = ({ value, forwardedRef, rerenderOnPropsChange, - extensions: [ - IssueWidgetExtension({ issueEmbedConfig: embedConfig?.issueEmbedConfig }), - ], + extensions: [IssueWidgetExtension({ issueEmbedConfig: embedConfig?.issueEmbedConfig })], }); useEffect(() => { @@ -98,7 +92,7 @@ const DocumentReadOnlyEditor = ({ }); return ( -
+
-
-
- +
+
+
-
+
); }; -const DocumentReadOnlyEditorWithRef = forwardRef< - EditorHandle, - IDocumentReadOnlyEditor ->((props, ref) => ); +const DocumentReadOnlyEditorWithRef = forwardRef((props, ref) => ( + +)); DocumentReadOnlyEditorWithRef.displayName = "DocumentReadOnlyEditorWithRef"; diff --git a/packages/editor/document-editor/src/ui/tooltip.tsx b/packages/editor/document-editor/src/ui/tooltip.tsx index d82ed9600..127efc7cb 100644 --- a/packages/editor/document-editor/src/ui/tooltip.tsx +++ b/packages/editor/document-editor/src/ui/tooltip.tsx @@ -51,17 +51,11 @@ export const Tooltip: React.FC = ({ content={
{tooltipHeading && ( -
+
{tooltipHeading}
)} @@ -69,11 +63,7 @@ export const Tooltip: React.FC = ({
} position={position} - renderTarget={({ - isOpen: isTooltipOpen, - ref: eleReference, - ...tooltipProps - }) => + renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) => React.cloneElement(children, { ref: eleReference, ...tooltipProps, diff --git a/packages/editor/document-editor/src/ui/utils/menu-options.ts b/packages/editor/document-editor/src/ui/utils/menu-options.ts index 5df467ddf..0b4d02476 100644 --- a/packages/editor/document-editor/src/ui/utils/menu-options.ts +++ b/packages/editor/document-editor/src/ui/utils/menu-options.ts @@ -12,11 +12,7 @@ import { } from "lucide-react"; import { NextRouter } from "next/router"; import { IVerticalDropdownItemProps } from "../components/vertical-dropdown-menu"; -import { - IDuplicationConfig, - IPageArchiveConfig, - IPageLockConfig, -} from "../types/menu-actions"; +import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "../types/menu-actions"; import { copyMarkdownToClipboard, CopyPageLink } from "./menu-actions"; export interface MenuOptionsProps { @@ -90,8 +86,7 @@ export const getMenuOptions = ({ .then(() => { onActionCompleteHandler({ title: "Page Copied", - message: - "Page has been copied as 'Copy of' followed by page title", + message: "Page has been copied as 'Copy of' followed by page title", type: "success", }); }) diff --git a/packages/editor/extensions/.eslintrc.js b/packages/editor/extensions/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/editor/extensions/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/editor/extensions/.prettierignore b/packages/editor/extensions/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/editor/extensions/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/editor/extensions/.prettierrc b/packages/editor/extensions/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/editor/extensions/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/editor/extensions/src/extensions/drag-drop.tsx b/packages/editor/extensions/src/extensions/drag-drop.tsx index 5bf35cb2b..269caad93 100644 --- a/packages/editor/extensions/src/extensions/drag-drop.tsx +++ b/packages/editor/extensions/src/extensions/drag-drop.tsx @@ -43,24 +43,22 @@ function absoluteRect(node: Element) { } function nodeDOMAtCoords(coords: { x: number; y: number }) { - return document - .elementsFromPoint(coords.x, coords.y) - .find((elem: Element) => { - return ( - elem.parentElement?.matches?.(".ProseMirror") || - elem.matches( - [ - "li", - "p:not(:first-child)", - "pre", - "blockquote", - "h1, h2, h3", - "[data-type=horizontalRule]", - ".tableWrapper", - ].join(", "), - ) - ); - }); + return document.elementsFromPoint(coords.x, coords.y).find((elem: Element) => { + return ( + elem.parentElement?.matches?.(".ProseMirror") || + elem.matches( + [ + "li", + "p:not(:first-child)", + "pre", + "blockquote", + "h1, h2, h3", + "[data-type=horizontalRule]", + ".tableWrapper", + ].join(", ") + ) + ); + }); } function nodePosAtDOM(node: Element, view: EditorView) { @@ -104,9 +102,7 @@ function DragHandle(options: DragHandleOptions) { const nodePos = nodePosAtDOM(node, view); if (nodePos === null || nodePos === undefined || nodePos < 0) return; - view.dispatch( - view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)), - ); + view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos))); const slice = view.state.selection.content(); const { dom, text } = __serializeForClipboard(view, slice); @@ -137,9 +133,7 @@ function DragHandle(options: DragHandleOptions) { if (nodePos === null || nodePos === undefined || nodePos < 0) return; - view.dispatch( - view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)), - ); + view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos))); } let dragHandleElement: HTMLElement | null = null; diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx index 8ea6794dd..92152b43a 100644 --- a/packages/editor/extensions/src/extensions/slash-commands.tsx +++ b/packages/editor/extensions/src/extensions/slash-commands.tsx @@ -1,20 +1,9 @@ -import { - useState, - useEffect, - useCallback, - ReactNode, - useRef, - useLayoutEffect, -} from "react"; +import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react"; 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, - ISlashCommandItem, - CommandProps, -} from "@plane/editor-types"; +import type { UploadImage, ISlashCommandItem, CommandProps } from "@plane/editor-types"; import { CaseSensitive, Code2, @@ -55,15 +44,7 @@ const Command = Extension.create({ return { suggestion: { char: "/", - command: ({ - editor, - range, - props, - }: { - editor: Editor; - range: Range; - props: any; - }) => { + command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => { props.command({ editor, range }); }, }, @@ -85,10 +66,8 @@ const Command = Extension.create({ const getSuggestionItems = ( uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, - additionalOptions?: Array, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, + additionalOptions?: Array ) => ({ query }: { query: string }) => { let slashCommands: ISlashCommandItem[] = [ @@ -99,12 +78,7 @@ const getSuggestionItems = searchTerms: ["p", "paragraph"], icon: , command: ({ editor, range }: CommandProps) => { - editor - .chain() - .focus() - .deleteRange(range) - .toggleNode("paragraph", "paragraph") - .run(); + editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run(); }, }, { @@ -183,8 +157,7 @@ const getSuggestionItems = description: "Capture a quote.", searchTerms: ["blockquote"], icon: , - command: ({ editor, range }: CommandProps) => - toggleBlockquote(editor, range), + command: ({ editor, range }: CommandProps) => toggleBlockquote(editor, range), }, { key: "code_block", @@ -231,8 +204,7 @@ const getSuggestionItems = return ( item.title.toLowerCase().includes(search) || item.description.toLowerCase().includes(search) || - (item.searchTerms && - item.searchTerms.some((term: string) => term.includes(search))) + (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search))) ); } return true; @@ -255,15 +227,7 @@ export const updateScrollView = (container: HTMLElement, item: HTMLElement) => { } }; -const CommandList = ({ - items, - command, -}: { - items: CommandItemProps[]; - command: any; - editor: any; - range: any; -}) => { +const CommandList = ({ items, command }: { items: CommandItemProps[]; command: any; editor: any; range: any }) => { const [selectedIndex, setSelectedIndex] = useState(0); const selectItem = useCallback( @@ -273,7 +237,7 @@ const CommandList = ({ command(item); } }, - [command, items], + [command, items] ); useEffect(() => { @@ -320,22 +284,20 @@ const CommandList = ({
{items.map((item, index) => ( ))} @@ -393,10 +355,8 @@ const renderItems = () => { export const SlashCommand = ( uploadFile: UploadImage, - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void, - additionalOptions?: Array, + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, + additionalOptions?: Array ) => Command.configure({ suggestion: { diff --git a/packages/editor/lite-text-editor/.eslintrc.js b/packages/editor/lite-text-editor/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/editor/lite-text-editor/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/editor/lite-text-editor/.prettierignore b/packages/editor/lite-text-editor/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/editor/lite-text-editor/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/editor/lite-text-editor/.prettierrc b/packages/editor/lite-text-editor/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/editor/lite-text-editor/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts index 49001e055..f09ce54a4 100644 --- a/packages/editor/lite-text-editor/src/index.ts +++ b/packages/editor/lite-text-editor/src/index.ts @@ -1,6 +1,3 @@ export { LiteTextEditor, LiteTextEditorWithRef } from "./ui"; export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only"; -export type { - IMentionSuggestion, - IMentionHighlight, -} from "@plane/editor-types"; +export type { IMentionSuggestion, IMentionHighlight } from "@plane/editor-types"; diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx index b0cf3ebbb..0eb0e20df 100644 --- a/packages/editor/lite-text-editor/src/ui/index.tsx +++ b/packages/editor/lite-text-editor/src/ui/index.tsx @@ -1,18 +1,8 @@ import * as React from "react"; -import { - EditorContainer, - EditorContentWrapper, - getEditorClassNames, - useEditor, -} from "@plane/editor-core"; +import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from "@plane/editor-core"; import { FixedMenu } from "./menus/fixed-menu"; import { LiteTextEditorExtensions } from "./extensions"; -import { - UploadImage, - DeleteImage, - IMentionSuggestion, - RestoreImage, -} from "@plane/editor-types"; +import { UploadImage, DeleteImage, IMentionSuggestion, RestoreImage } from "@plane/editor-types"; interface ILiteTextEditor { value: string; @@ -25,9 +15,7 @@ interface ILiteTextEditor { customClassName?: string; editorContentCustomClassNames?: string; onChange?: (json: any, html: string) => void; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setShouldShowAlert?: (showAlert: boolean) => void; forwardedRef?: any; debouncedUpdatesEnabled?: boolean; @@ -107,11 +95,8 @@ const LiteTextEditor = (props: LiteTextEditorProps) => { return (
- -
+ +
{ ); }; -const LiteTextEditorWithRef = React.forwardRef( - (props, ref) => , -); +const LiteTextEditorWithRef = React.forwardRef((props, ref) => ( + +)); LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef"; diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx index 60878f9bf..7ddc76843 100644 --- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx +++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx @@ -6,9 +6,5 @@ type Props = { }; export const Icon: React.FC = ({ iconName, className = "" }) => ( - - {iconName} - + {iconName} ); diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx index 2f727936c..95bd8d6dd 100644 --- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx +++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx @@ -47,9 +47,7 @@ type EditorBubbleMenuProps = { | undefined; }; uploadFile: UploadImage; - setIsSubmitting?: ( - isSubmitting: "submitting" | "submitted" | "saved", - ) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; submitButton: React.ReactNode; }; @@ -61,23 +59,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { StrikeThroughItem(props.editor), ]; - const listFormattingItems: BubbleMenuItem[] = [ - BulletListItem(props.editor), - NumberedListItem(props.editor), - ]; + const listFormattingItems: BubbleMenuItem[] = [BulletListItem(props.editor), NumberedListItem(props.editor)]; - const userActionItems: BubbleMenuItem[] = [ - QuoteItem(props.editor), - CodeItem(props.editor), - ]; + const userActionItems: BubbleMenuItem[] = [QuoteItem(props.editor), CodeItem(props.editor)]; function getComplexItems(): BubbleMenuItem[] { const items: BubbleMenuItem[] = [TableItem(props.editor)]; if (shouldShowImageItem()) { - items.push( - ImageItem(props.editor, props.uploadFile, props.setIsSubmitting), - ); + items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting)); } return items; @@ -109,22 +99,20 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { }; return ( -
+
{props.commentAccessSpecifier && ( -
+
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
)} -
+
-
+
{basicTextFormattingItems.map((item, index) => ( - {item.name}} - > + {item.name}}>
-
+
{listFormattingItems.map((item, index) => ( - {item.name}} - > + {item.name}}>
-
+
{userActionItems.map((item, index) => ( - {item.name}} - > + {item.name}}>
{complexItems.map((item, index) => ( - {item.name}} - > + {item.name}}> {isOpen && (
{ if (e.key === "Enter") { e.preventDefault(); @@ -76,7 +60,7 @@ export const LinkSelector: FC = ({ ref={inputRef} type="url" placeholder="Paste a link" - className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400" + className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400" defaultValue={editor.getAttributes("link").href || ""} /> {editor.getAttributes("link").href ? ( diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx index 7681fbe5b..34892ad22 100644 --- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx +++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx @@ -21,21 +21,13 @@ interface NodeSelectorProps { setIsOpen: Dispatch>; } -export const NodeSelector: FC = ({ - editor, - isOpen, - setIsOpen, -}) => { +export const NodeSelector: FC = ({ editor, isOpen, setIsOpen }) => { const items: BubbleMenuItem[] = [ { name: "Text", icon: TextIcon, - command: () => - editor.chain().focus().toggleNode("paragraph", "paragraph").run(), - isActive: () => - editor.isActive("paragraph") && - !editor.isActive("bulletList") && - !editor.isActive("orderedList"), + command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(), + isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"), }, HeadingOneItem(editor), HeadingTwoItem(editor), @@ -75,9 +67,8 @@ export const NodeSelector: FC = ({ className={cn( "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100", { - "bg-custom-primary-100/5 text-custom-text-100": - activeItem.name === item.name, - }, + "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name, + } )} >
diff --git a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx index f6ccdddf5..9b0f43f57 100644 --- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx @@ -1,10 +1,5 @@ "use client"; -import { - EditorContainer, - EditorContentWrapper, - getEditorClassNames, - useReadOnlyEditor, -} from "@plane/editor-core"; +import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core"; import * as React from "react"; interface IRichTextReadOnlyEditor { @@ -51,19 +46,15 @@ const RichReadOnlyEditor = ({ return (
- +
); }; -const RichReadOnlyEditorWithRef = React.forwardRef< - EditorHandle, - IRichTextReadOnlyEditor ->((props, ref) => ); +const RichReadOnlyEditorWithRef = React.forwardRef((props, ref) => ( + +)); RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef"; diff --git a/packages/editor/types/.eslintrc.js b/packages/editor/types/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/editor/types/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/editor/types/.prettierignore b/packages/editor/types/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/editor/types/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/editor/types/.prettierrc b/packages/editor/types/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/editor/types/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/editor/types/src/index.ts b/packages/editor/types/src/index.ts index e7c0ccc1a..57d368224 100644 --- a/packages/editor/types/src/index.ts +++ b/packages/editor/types/src/index.ts @@ -1,8 +1,5 @@ export type { DeleteImage } from "./types/delete-image"; export type { UploadImage } from "./types/upload-image"; export type { RestoreImage } from "./types/restore-image"; -export type { - IMentionHighlight, - IMentionSuggestion, -} from "./types/mention-suggestion"; -export type { ISlashCommandItem, CommandProps } from "./types/slash-commands-suggestion" +export type { IMentionHighlight, IMentionSuggestion } from "./types/mention-suggestion"; +export type { ISlashCommandItem, CommandProps } from "./types/slash-commands-suggestion"; diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json index 160753c38..5237bf033 100644 --- a/packages/eslint-config-custom/package.json +++ b/packages/eslint-config-custom/package.json @@ -8,10 +8,11 @@ "eslint": "^7.23.0", "eslint-config-next": "13.0.0", "eslint-config-prettier": "^8.3.0", - "eslint-plugin-react": "7.31.8", - "eslint-config-turbo": "latest" + "eslint-config-turbo": "latest", + "eslint-plugin-react": "7.31.8" }, "devDependencies": { + "@typescript-eslint/eslint-plugin": "^6.13.2", "typescript": "^4.7.4" }, "publishConfig": { diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js new file mode 100644 index 000000000..c8df60750 --- /dev/null +++ b/packages/ui/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/packages/ui/.prettierignore b/packages/ui/.prettierignore new file mode 100644 index 000000000..43e8a7b8f --- /dev/null +++ b/packages/ui/.prettierignore @@ -0,0 +1,6 @@ +.next +.vercel +.tubro +out/ +dis/ +build/ \ No newline at end of file diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc new file mode 100644 index 000000000..87d988f1b --- /dev/null +++ b/packages/ui/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx index 25a3c76fc..60fdc917d 100644 --- a/packages/ui/src/avatar/avatar-group.tsx +++ b/packages/ui/src/avatar/avatar-group.tsx @@ -57,22 +57,16 @@ export const AvatarGroup: React.FC = (props) => { return (
{avatarsWithUpdatedProps.map((avatar, index) => ( -
+
{avatar}
))} {maxAvatarsToRender < totalAvatars && ( - +
{ * @param value The value to check * @returns Whether the value is a valid number or not */ -export const isAValidNumber = (value: any) => { - return typeof value === "number" && !isNaN(value); -}; +export const isAValidNumber = (value: any) => typeof value === "number" && !isNaN(value); export const Avatar: React.FC = (props) => { const { @@ -130,14 +128,11 @@ export const Avatar: React.FC = (props) => { const sizeInfo = getSizeInfo(size); return ( - +
= (props) => { } > {src ? ( - {name} + {name} ) : (
diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx index 4533b9361..cec490ab1 100644 --- a/packages/ui/src/badge/badge.tsx +++ b/packages/ui/src/badge/badge.tsx @@ -1,14 +1,8 @@ import * as React from "react"; -import { - getIconStyling, - getBadgeStyling, - TBadgeVariant, - TBadgeSizes, -} from "./helper"; +import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper"; -export interface BadgeProps - extends React.ButtonHTMLAttributes { +export interface BadgeProps extends React.ButtonHTMLAttributes { variant?: TBadgeVariant; size?: TBadgeSizes; className?: string; @@ -37,24 +31,10 @@ const Badge = React.forwardRef((props, ref) => { const buttonIconStyle = getIconStyling(size); return ( - ); }); diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx index 745b5d047..88e6fd8d3 100644 --- a/packages/ui/src/badge/helper.tsx +++ b/packages/ui/src/badge/helper.tsx @@ -121,17 +121,11 @@ export const badgeStyling: IBadgeStyling = { }, }; -export const getBadgeStyling = ( - variant: TBadgeVariant, - size: TBadgeSizes, - disabled: boolean = false -): string => { +export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => { let _variant: string = ``; const currentVariant = badgeStyling[variant]; - _variant = `${currentVariant.default} ${ - disabled ? currentVariant.disabled : currentVariant.hover - }`; + _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`; let _size: string = ``; if (size) _size = badgeSizeStyling[size]; diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx index 94f317825..e82944c03 100644 --- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx +++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx @@ -12,13 +12,10 @@ type BreadcrumbsProps = { const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
{React.Children.map(children, (child, index) => ( -
+
{child} {index !== React.Children.count(children) - 1 && ( -
))} @@ -41,31 +38,21 @@ const BreadcrumbItem: React.FC = (props) => { ) : (
  • -
    +
    {link ? ( {icon && ( -
    - {icon} -
    +
    {icon}
    )} -
    - {label} -
    +
    {label}
     ) : ( -
    - {icon && ( -
    - {icon} -
    - )} -
    - {label} -
    +
    + {icon &&
    {icon}
    } +
    {label}
    )}
    diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx index d7377bcf8..d63d89eb2 100644 --- a/packages/ui/src/button/button.tsx +++ b/packages/ui/src/button/button.tsx @@ -1,14 +1,8 @@ import * as React from "react"; -import { - getIconStyling, - getButtonStyling, - TButtonVariant, - TButtonSizes, -} from "./helper"; +import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper"; -export interface ButtonProps - extends React.ButtonHTMLAttributes { +export interface ButtonProps extends React.ButtonHTMLAttributes { variant?: TButtonVariant; size?: TButtonSizes; className?: string; @@ -19,47 +13,31 @@ export interface ButtonProps children: React.ReactNode; } -const Button = React.forwardRef( - (props, ref) => { - const { - variant = "primary", - size = "md", - className = "", - type = "button", - loading = false, - disabled = false, - prependIcon = null, - appendIcon = null, - children, - ...rest - } = props; +const Button = React.forwardRef((props, ref) => { + const { + variant = "primary", + size = "md", + className = "", + type = "button", + loading = false, + disabled = false, + prependIcon = null, + appendIcon = null, + children, + ...rest + } = props; - const buttonStyle = getButtonStyling(variant, size, disabled || loading); - const buttonIconStyle = getIconStyling(size); + const buttonStyle = getButtonStyling(variant, size, disabled || loading); + const buttonIconStyle = getIconStyling(size); - return ( - - ); - }, -); + return ( + + ); +}); Button.displayName = "plane-ui-button"; diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx index 5e6ff6a51..0a3094b32 100644 --- a/packages/ui/src/button/helper.tsx +++ b/packages/ui/src/button/helper.tsx @@ -99,17 +99,13 @@ export const buttonStyling: IButtonStyling = { }, }; -export const getButtonStyling = ( - variant: TButtonVariant, - size: TButtonSizes, - disabled: boolean = false, -): string => { +export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => { let _variant: string = ``; const currentVariant = buttonStyling[variant]; - _variant = `${currentVariant.default} ${ - disabled ? currentVariant.disabled : currentVariant.hover - } ${currentVariant.pressed}`; + _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${ + currentVariant.pressed + }`; let _size: string = ``; if (size) _size = buttonSizeStyling[size]; diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx index 9888dd205..9a1c01ae9 100644 --- a/packages/ui/src/button/toggle-switch.tsx +++ b/packages/ui/src/button/toggle-switch.tsx @@ -19,7 +19,7 @@ const ToggleSwitch: React.FC = (props) => { checked={value} disabled={disabled} onChange={onChange} - className={`relative flex-shrink-0 inline-flex ${ + className={`relative inline-flex flex-shrink-0 ${ size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10" } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${ value ? "bg-custom-primary-100" : "bg-gray-700" @@ -28,15 +28,11 @@ const ToggleSwitch: React.FC = (props) => { {label}