thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge branch 'develop' of github.com:makeplane/plane into feat/self_hosted_instance

Browse Source
This commit is contained in:
pablohashescobar 2023-11-09 06:16:05 +00:00
commit 589e29ee45
285 changed files with 3240 additions and 3255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
CONTRIBUTING.md
View File

@ -8,8 +8,8 @@ Before submitting a new issue, please search the [issues](https://github.com/mak
While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like: While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like:
- 3rd-party libraries being used and their versions - 3rd-party libraries being used and their versions
- a use-case that fails - a use-case that fails
Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved. Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved.
@ -19,10 +19,10 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
### Requirements ### Requirements
- Node.js version v16.18.0 - Node.js version v16.18.0
- Python version 3.8+ - Python version 3.8+
- Postgres version v14 - Postgres version v14
- Redis version v6.2.7 - Redis version v6.2.7
### Setup the project ### Setup the project
@ -81,8 +81,8 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
To ensure consistency throughout the source code, please keep these rules in mind as you are working: To ensure consistency throughout the source code, please keep these rules in mind as you are working:
- All features or bug fixes must be tested by one or more specs (unit-tests). - All features or bug fixes must be tested by one or more specs (unit-tests).
- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier. - We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
## Need help? Questions and suggestions ## Need help? Questions and suggestions
@ -90,11 +90,11 @@ Questions, suggestions, and thoughts are most welcome. We can also be reached in
## Ways to contribute ## Ways to contribute
- Try Plane Cloud and the self hosting platform and give feedback - Try Plane Cloud and the self hosting platform and give feedback
- Add new integrations - Add new integrations
- Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose) - Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
- Share your thoughts and suggestions with us - Share your thoughts and suggestions with us
- Help create tutorials and blog posts - Help create tutorials and blog posts
- Request a feature by submitting a proposal - Request a feature by submitting a proposal
- Report a bug - Report a bug
- **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations. - **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.

18
ENV_SETUP.md
View File

@ -1,8 +1,10 @@
# Environment Variables # Environment Variables
​ ​
Environment variables are distributed in various files. Please refer them carefully. Environment variables are distributed in various files. Please refer them carefully.
## {PROJECT_FOLDER}/.env ## {PROJECT_FOLDER}/.env
File is available in the project root folder​ File is available in the project root folder​
``` ```
@ -41,25 +43,37 @@ USE_MINIO=1
# Nginx Configuration # Nginx Configuration
NGINX_PORT=80 NGINX_PORT=80
``` ```
​ ​
## {PROJECT_FOLDER}/web/.env.example ## {PROJECT_FOLDER}/web/.env.example
​ ​
``` ```
# Enable/Disable OAUTH - default 0 for selfhosted instance # Enable/Disable OAUTH - default 0 for selfhosted instance
NEXT_PUBLIC_ENABLE_OAUTH=0 NEXT_PUBLIC_ENABLE_OAUTH=0
# Public boards deploy URL # Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces" NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
``` ```
​ ​
## {PROJECT_FOLDER}/spaces/.env.example ## {PROJECT_FOLDER}/spaces/.env.example
​ ​
``` ```
# Flag to toggle OAuth # Flag to toggle OAuth
NEXT_PUBLIC_ENABLE_OAUTH=0 NEXT_PUBLIC_ENABLE_OAUTH=0
``` ```
​ ​
## {PROJECT_FOLDER}/apiserver/.env ## {PROJECT_FOLDER}/apiserver/.env
​ ​
``` ```
# Backend # Backend
# Debug value for api server use it as 0 for production use # Debug value for api server use it as 0 for production use
@ -123,7 +137,9 @@ ENABLE_SIGNUP="1"
# Email Redirection URL # Email Redirection URL
WEB_URL="http://localhost" WEB_URL="http://localhost"
``` ```
## Updates​ ## Updates​
- The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects. - The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
- The naming convention for containers and images has been updated. - The naming convention for containers and images has been updated.
- The plane-worker image will no longer be maintained, as it has been merged with plane-backend. - The plane-worker image will no longer be maintained, as it has been merged with plane-backend.

2
apiserver/plane/api/serializers/state.py
View File

@ -7,8 +7,6 @@ from plane.db.models import State
class StateSerializer(BaseSerializer): class StateSerializer(BaseSerializer):
workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
project_detail = ProjectLiteSerializer(read_only=True, source="project")
class Meta: class Meta:
model = State model = State

10
apiserver/plane/api/urls/state.py
View File

@ -20,11 +20,19 @@ urlpatterns = [
StateViewSet.as_view( StateViewSet.as_view(
{ {
"get": "retrieve", "get": "retrieve",
"put": "update",
"patch": "partial_update", "patch": "partial_update",
"delete": "destroy", "delete": "destroy",
} }
), ),
name="project-state", name="project-state",
), ),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/mark-default/",
StateViewSet.as_view(
{
"post": "mark_as_default",
}
),
name="project-state",
),
] ]

39
apiserver/plane/api/views/state.py
View File

@ -47,36 +47,45 @@ class StateViewSet(BaseViewSet):
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST) return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
def list(self, request, slug, project_id): def list(self, request, slug, project_id):
state_dict = dict()
states = StateSerializer(self.get_queryset(), many=True).data states = StateSerializer(self.get_queryset(), many=True).data
grouped = request.GET.get("grouped", False)
if grouped == "true":
state_dict = {}
for key, value in groupby(
sorted(states, key=lambda state: state["group"]),
lambda state: state.get("group"),
):
state_dict[str(key)] = list(value)
return Response(state_dict, status=status.HTTP_200_OK)
return Response(states, status=status.HTTP_200_OK)
for key, value in groupby( def mark_as_default(self, request, slug, project_id, pk):
sorted(states, key=lambda state: state["group"]), # Select all the states which are marked as default
lambda state: state.get("group"), _ = State.objects.filter(
): workspace__slug=slug, project_id=project_id, default=True
state_dict[str(key)] = list(value) ).update(default=False)
_ = State.objects.filter(
return Response(state_dict, status=status.HTTP_200_OK) workspace__slug=slug, project_id=project_id, pk=pk
).update(default=True)
return Response(status=status.HTTP_204_NO_CONTENT)
def destroy(self, request, slug, project_id, pk): def destroy(self, request, slug, project_id, pk):
state = State.objects.get( state = State.objects.get(
~Q(name="Triage"), ~Q(name="Triage"),
pk=pk, project_id=project_id, workspace__slug=slug, pk=pk,
project_id=project_id,
workspace__slug=slug,
) )
if state.default: if state.default:
return Response( return Response({"error": "Default state cannot be deleted"}, status=False)
{"error": "Default state cannot be deleted"}, status=False
)
# Check for any issues in the state # Check for any issues in the state
issue_exist = Issue.issue_objects.filter(state=pk).exists() issue_exist = Issue.issue_objects.filter(state=pk).exists()
if issue_exist: if issue_exist:
return Response( return Response(
{ {"error": "The state is not empty, only empty states can be deleted"},
"error": "The state is not empty, only empty states can be deleted"
},
status=status.HTTP_400_BAD_REQUEST, status=status.HTTP_400_BAD_REQUEST,
) )

42
packages/editor/core/Readme.md
View File

@ -19,27 +19,27 @@ This allows for extensive customization and flexibility in the Editors created u
1. useEditor - A hook that you can use to extend the Plane editor. 1. useEditor - A hook that you can use to extend the Plane editor.
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features | | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
| `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object | | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. | | `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. | | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
| `value` | `html string` | The initial content of the editor. | | `value` | `html string` | The initial content of the editor. |
| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. | | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. | | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. | | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert in case of content not being "saved". | | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert in case of content not being "saved". |
| `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component | | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor. 2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
| `value` | `string` | The initial content of the editor. | | `value` | `string` | The initial content of the editor. |
| `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component | | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
| `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features | | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
| `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object | | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods. 3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
@ -51,7 +51,11 @@ This allows for extensive customization and flexibility in the Editors created u
5. Extending with Custom Styles 5. Extending with Custom Styles
```ts ```ts
const customEditorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName }); const customEditorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
``` ```
## Core features ## Core features

77
packages/editor/core/src/lib/editor-commands.ts
View File

@ -3,18 +3,36 @@ import { UploadImage } from "../types/upload-image";
import { startImageUpload } from "../ui/plugins/upload-image"; import { startImageUpload } from "../ui/plugins/upload-image";
export const toggleHeadingOne = (editor: Editor, range?: Range) => { export const toggleHeadingOne = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run(); if (range)
else editor.chain().focus().toggleHeading({ level: 1 }).run() 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) => { export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run(); if (range)
else editor.chain().focus().toggleHeading({ level: 2 }).run() 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) => { export const toggleHeadingThree = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run(); if (range)
else editor.chain().focus().toggleHeading({ level: 3 }).run() editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level: 3 })
.run();
else editor.chain().focus().toggleHeading({ level: 3 }).run();
}; };
export const toggleBold = (editor: Editor, range?: Range) => { export const toggleBold = (editor: Editor, range?: Range) => {
@ -37,7 +55,8 @@ export const toggleCode = (editor: Editor, range?: Range) => {
else editor.chain().focus().toggleCode().run(); else editor.chain().focus().toggleCode().run();
}; };
export const toggleOrderedList = (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(); else editor.chain().focus().toggleOrderedList().run();
}; };
@ -48,7 +67,7 @@ export const toggleBulletList = (editor: Editor, range?: Range) => {
export const toggleTaskList = (editor: Editor, range?: Range) => { export const toggleTaskList = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run(); if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
else editor.chain().focus().toggleTaskList().run() else editor.chain().focus().toggleTaskList().run();
}; };
export const toggleStrike = (editor: Editor, range?: Range) => { export const toggleStrike = (editor: Editor, range?: Range) => {
@ -57,13 +76,37 @@ export const toggleStrike = (editor: Editor, range?: Range) => {
}; };
export const toggleBlockquote = (editor: Editor, range?: Range) => { export const toggleBlockquote = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run(); if (range)
else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(); 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) => { export const insertTableCommand = (editor: Editor, range?: Range) => {
if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); if (range)
else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); 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) => { export const unsetLinkEditor = (editor: Editor) => {
@ -74,7 +117,14 @@ export const setLinkEditor = (editor: Editor, url: string) => {
editor.chain().focus().setLink({ href: url }).run(); editor.chain().focus().setLink({ href: url }).run();
}; };
export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => { export const insertImageCommand = (
editor: Editor,
uploadFile: UploadImage,
setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void,
range?: Range,
) => {
if (range) editor.chain().focus().deleteRange(range).run(); if (range) editor.chain().focus().deleteRange(range).run();
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
@ -88,4 +138,3 @@ export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setI
}; };
input.click(); input.click();
}; };

27
packages/editor/core/src/lib/utils.ts
View File

@ -6,19 +6,24 @@ interface EditorClassNames {
customClassName?: string; customClassName?: string;
} }
export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) => cn( export const getEditorClassNames = ({
'relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md', noBorder,
noBorder ? '' : 'border border-custom-border-200', borderOnFocus,
borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0', customClassName,
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,
);
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
} }
export const findTableAncestor = ( export const findTableAncestor = (
node: Node | null node: Node | null,
): HTMLTableElement | null => { ): HTMLTableElement | null => {
while (node !== null && node.nodeName !== "TABLE") { while (node !== null && node.nodeName !== "TABLE") {
node = node.parentNode; node = node.parentNode;
@ -27,10 +32,10 @@ export const findTableAncestor = (
}; };
export const getTrimmedHTML = (html: string) => { export const getTrimmedHTML = (html: string) => {
html = html.replace(/^(<p><\/p>)+/, ''); html = html.replace(/^(<p><\/p>)+/, "");
html = html.replace(/(<p><\/p>)+$/, ''); html = html.replace(/(<p><\/p>)+$/, "");
return html; return html;
} };
export const isValidHttpUrl = (string: string): boolean => { export const isValidHttpUrl = (string: string): boolean => {
let url: URL; let url: URL;
@ -42,4 +47,4 @@ export const isValidHttpUrl = (string: string): boolean => {
} }
return url.protocol === "http:" || url.protocol === "https:"; return url.protocol === "http:" || url.protocol === "https:";
} };

16
packages/editor/core/src/types/mention-suggestion.ts
View File

@ -1,10 +1,10 @@
export type IMentionSuggestion = { export type IMentionSuggestion = {
id: string; id: string;
type: string; type: string;
avatar: string; avatar: string;
title: string; title: string;
subtitle: string; subtitle: string;
redirect_uri: string; redirect_uri: string;
} };
export type IMentionHighlight = string export type IMentionHighlight = string;

10
packages/editor/core/src/ui/components/editor-content.tsx
View File

@ -8,10 +8,16 @@ interface EditorContentProps {
children?: ReactNode; children?: ReactNode;
} }
export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => ( export const EditorContentWrapper = ({
editor,
editorContentCustomClassNames = "",
children,
}: EditorContentProps) => (
<div className={`contentEditor ${editorContentCustomClassNames}`}> <div className={`contentEditor ${editorContentCustomClassNames}`}>
<EditorContent editor={editor} /> <EditorContent editor={editor} />
{(editor?.isActive("image") && editor?.isEditable) && <ImageResizer editor={editor} />} {editor?.isActive("image") && editor?.isEditable && (
<ImageResizer editor={editor} />
)}
{children} {children}
</div> </div>
); );

4
packages/editor/core/src/ui/extensions/image/image-resize.tsx
View File

@ -3,7 +3,9 @@ import Moveable from "react-moveable";
export const ImageResizer = ({ editor }: { editor: Editor }) => { export const ImageResizer = ({ editor }: { editor: Editor }) => {
const updateMediaSize = () => { const updateMediaSize = () => {
const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement; const imageInfo = document.querySelector(
".ProseMirror-selectednode",
) as HTMLImageElement;
if (imageInfo) { if (imageInfo) {
const selection = editor.state.selection; const selection = editor.state.selection;
editor.commands.setImage({ editor.commands.setImage({

39
packages/editor/core/src/ui/extensions/image/index.tsx
View File

@ -3,21 +3,28 @@ import TrackImageDeletionPlugin from "../../plugins/delete-image";
import UploadImagesPlugin from "../../plugins/upload-image"; import UploadImagesPlugin from "../../plugins/upload-image";
import { DeleteImage } from "../../../types/delete-image"; import { DeleteImage } from "../../../types/delete-image";
const ImageExtension = (deleteImage: DeleteImage) => Image.extend({ const ImageExtension = (
addProseMirrorPlugins() { deleteImage: DeleteImage,
return [UploadImagesPlugin(), TrackImageDeletionPlugin(deleteImage)]; cancelUploadImage?: () => any,
}, ) =>
addAttributes() { Image.extend({
return { addProseMirrorPlugins() {
...this.parent?.(), return [
width: { UploadImagesPlugin(cancelUploadImage),
default: "35%", TrackImageDeletionPlugin(deleteImage),
}, ];
height: { },
default: null, addAttributes() {
}, return {
}; ...this.parent?.(),
}, width: {
}); default: "35%",
},
height: {
default: null,
},
};
},
});
export default ImageExtension; export default ImageExtension;

145
packages/editor/core/src/ui/extensions/index.tsx
View File

@ -20,82 +20,89 @@ import { isValidHttpUrl } from "../../lib/utils";
import { IMentionSuggestion } from "../../types/mention-suggestion"; import { IMentionSuggestion } from "../../types/mention-suggestion";
import { Mentions } from "../mentions"; import { Mentions } from "../mentions";
export const CoreEditorExtensions = ( export const CoreEditorExtensions = (
mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] }, mentionConfig: {
mentionSuggestions: IMentionSuggestion[];
mentionHighlights: string[];
},
deleteFile: DeleteImage, deleteFile: DeleteImage,
cancelUploadImage?: () => any,
) => [ ) => [
StarterKit.configure({ StarterKit.configure({
bulletList: { bulletList: {
HTMLAttributes: { HTMLAttributes: {
class: "list-disc list-outside leading-3 -mt-2", class: "list-disc list-outside leading-3 -mt-2",
},
}, },
orderedList: { },
HTMLAttributes: { orderedList: {
class: "list-decimal list-outside leading-3 -mt-2", HTMLAttributes: {
}, class: "list-decimal list-outside leading-3 -mt-2",
}, },
listItem: { },
HTMLAttributes: { listItem: {
class: "leading-normal -mb-2", HTMLAttributes: {
}, class: "leading-normal -mb-2",
}, },
blockquote: { },
HTMLAttributes: { blockquote: {
class: "border-l-4 border-custom-border-300", HTMLAttributes: {
}, class: "border-l-4 border-custom-border-300",
}, },
code: { },
HTMLAttributes: { code: {
class:
"rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
spellcheck: "false",
},
},
codeBlock: false,
horizontalRule: false,
dropcursor: {
color: "rgba(var(--color-text-100))",
width: 2,
},
gapcursor: false,
}),
Gapcursor,
TiptapLink.configure({
protocols: ["http", "https"],
validate: (url) => isValidHttpUrl(url),
HTMLAttributes: { HTMLAttributes: {
class: class:
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
spellcheck: "false",
}, },
}), },
ImageExtension(deleteFile).configure({ codeBlock: false,
HTMLAttributes: { horizontalRule: false,
class: "rounded-lg border border-custom-border-300", dropcursor: {
}, color: "rgba(var(--color-text-100))",
}), width: 2,
TiptapUnderline, },
TextStyle, gapcursor: false,
Color, }),
TaskList.configure({ Gapcursor,
HTMLAttributes: { TiptapLink.configure({
class: "not-prose pl-2", protocols: ["http", "https"],
}, validate: (url) => isValidHttpUrl(url),
}), HTMLAttributes: {
TaskItem.configure({ class:
HTMLAttributes: { "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
class: "flex items-start my-4", },
}, }),
nested: true, ImageExtension(deleteFile, cancelUploadImage).configure({
}), HTMLAttributes: {
Markdown.configure({ class: "rounded-lg border border-custom-border-300",
html: true, },
transformCopiedText: true, }),
}), TiptapUnderline,
Table, TextStyle,
TableHeader, Color,
TableCell, TaskList.configure({
TableRow, HTMLAttributes: {
Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false), class: "not-prose pl-2",
]; },
}),
TaskItem.configure({
HTMLAttributes: {
class: "flex items-start my-4",
},
nested: true,
}),
Markdown.configure({
html: true,
transformCopiedText: true,
}),
Table,
TableHeader,
TableCell,
TableRow,
Mentions(
mentionConfig.mentionSuggestions,
mentionConfig.mentionHighlights,
false,
),
];

2
packages/editor/core/src/ui/extensions/table/table-cell/index.ts
View File

@ -1 +1 @@
export { default as default } from "./table-cell" export { default as default } from "./table-cell";

38
packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
View File

@ -1,7 +1,7 @@
import { mergeAttributes, Node } from "@tiptap/core" import { mergeAttributes, Node } from "@tiptap/core";
export interface TableCellOptions { export interface TableCellOptions {
HTMLAttributes: Record<string, any> HTMLAttributes: Record<string, any>;
} }
export default Node.create<TableCellOptions>({ export default Node.create<TableCellOptions>({
@ -9,8 +9,8 @@ export default Node.create<TableCellOptions>({
addOptions() { addOptions() {
return { return {
HTMLAttributes: {} HTMLAttributes: {},
} };
}, },
content: "paragraph+", content: "paragraph+",
@ -18,24 +18,24 @@ export default Node.create<TableCellOptions>({
addAttributes() { addAttributes() {
return { return {
colspan: { colspan: {
default: 1 default: 1,
}, },
rowspan: { rowspan: {
default: 1 default: 1,
}, },
colwidth: { colwidth: {
default: null, default: null,
parseHTML: (element) => { parseHTML: (element) => {
const colwidth = element.getAttribute("colwidth") const colwidth = element.getAttribute("colwidth");
const value = colwidth ? [parseInt(colwidth, 10)] : null const value = colwidth ? [parseInt(colwidth, 10)] : null;
return value return value;
} },
}, },
background: { background: {
default: "none" default: "none",
} },
} };
}, },
tableRole: "cell", tableRole: "cell",
@ -43,16 +43,16 @@ export default Node.create<TableCellOptions>({
isolating: true, isolating: true,
parseHTML() { parseHTML() {
return [{ tag: "td" }] return [{ tag: "td" }];
}, },
renderHTML({ node, HTMLAttributes }) { renderHTML({ node, HTMLAttributes }) {
return [ return [
"td", "td",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
style: `background-color: ${node.attrs.background}` style: `background-color: ${node.attrs.background}`,
}), }),
0 0,
] ];
} },
}) });

2
packages/editor/core/src/ui/extensions/table/table-header/index.ts
View File

@ -1 +1 @@
export { default as default } from "./table-header" export { default as default } from "./table-header";

38
packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
View File

@ -1,15 +1,15 @@
import { mergeAttributes, Node } from "@tiptap/core" import { mergeAttributes, Node } from "@tiptap/core";
export interface TableHeaderOptions { export interface TableHeaderOptions {
HTMLAttributes: Record<string, any> HTMLAttributes: Record<string, any>;
} }
export default Node.create<TableHeaderOptions>({ export default Node.create<TableHeaderOptions>({
name: "tableHeader", name: "tableHeader",
addOptions() { addOptions() {
return { return {
HTMLAttributes: {} HTMLAttributes: {},
} };
}, },
content: "paragraph+", content: "paragraph+",
@ -17,24 +17,24 @@ export default Node.create<TableHeaderOptions>({
addAttributes() { addAttributes() {
return { return {
colspan: { colspan: {
default: 1 default: 1,
}, },
rowspan: { rowspan: {
default: 1 default: 1,
}, },
colwidth: { colwidth: {
default: null, default: null,
parseHTML: (element) => { parseHTML: (element) => {
const colwidth = element.getAttribute("colwidth") const colwidth = element.getAttribute("colwidth");
const value = colwidth ? [parseInt(colwidth, 10)] : null const value = colwidth ? [parseInt(colwidth, 10)] : null;
return value return value;
} },
}, },
background: { background: {
default: "rgb(var(--color-primary-100))" default: "rgb(var(--color-primary-100))",
} },
} };
}, },
tableRole: "header_cell", tableRole: "header_cell",
@ -42,16 +42,16 @@ export default Node.create<TableHeaderOptions>({
isolating: true, isolating: true,
parseHTML() { parseHTML() {
return [{ tag: "th" }] return [{ tag: "th" }];
}, },
renderHTML({ node, HTMLAttributes }) { renderHTML({ node, HTMLAttributes }) {
return [ return [
"th", "th",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
style: `background-color: ${node.attrs.background}` style: `background-color: ${node.attrs.background}`,
}), }),
0 0,
] ];
} },
}) });

2
packages/editor/core/src/ui/extensions/table/table-row/index.ts
View File

@ -1 +1 @@
export { default as default } from "./table-row" export { default as default } from "./table-row";

42
packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
View File

@ -1,31 +1,31 @@
import { mergeAttributes, Node } from "@tiptap/core" import { mergeAttributes, Node } from "@tiptap/core";
export interface TableRowOptions { export interface TableRowOptions {
HTMLAttributes: Record<string, any> HTMLAttributes: Record<string, any>;
} }
export default Node.create<TableRowOptions>({ export default Node.create<TableRowOptions>({
name: "tableRow", name: "tableRow",
addOptions() { addOptions() {
return { return {
HTMLAttributes: {} HTMLAttributes: {},
} };
}, },
content: "(tableCell | tableHeader)*", content: "(tableCell | tableHeader)*",
tableRole: "row", tableRole: "row",
parseHTML() { parseHTML() {
return [{ tag: "tr" }] return [{ tag: "tr" }];
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
return [ return [
"tr", "tr",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
0 0,
] ];
} },
}) });

2
packages/editor/core/src/ui/extensions/table/table/icons.ts
View File

@ -38,7 +38,7 @@ const icons = {
/> />
</svg> </svg>
`, `,
insertBottomTableIcon:`<svg insertBottomTableIcon: `<svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={24} width={24}
height={24} height={24}

2
packages/editor/core/src/ui/extensions/table/table/index.ts
View File

@ -1 +1 @@
export { default as default } from "./table" export { default as default } from "./table";

7
packages/editor/core/src/ui/extensions/table/table/table-controls.ts
View File

@ -68,7 +68,12 @@ export function tableControls() {
const { hoveredTable, hoveredCell } = pluginState.values; const { hoveredTable, hoveredCell } = pluginState.values;
const docSize = state.doc.content.size; 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 = [ const decorations = [
Decoration.node( Decoration.node(
hoveredTable.pos, hoveredTable.pos,

12
packages/editor/core/src/ui/extensions/table/table/table-view.tsx
View File

@ -202,6 +202,7 @@ function createToolbox({
"div", "div",
{ {
className: "toolboxItem", className: "toolboxItem",
itemType: "button",
onClick() { onClick() {
onClickItem(item); onClickItem(item);
}, },
@ -253,6 +254,7 @@ function createColorPickerToolbox({
"div", "div",
{ {
className: "toolboxItem", className: "toolboxItem",
itemType: "button",
onClick: () => { onClick: () => {
onSelectColor(value); onSelectColor(value);
colorPicker.hide(); colorPicker.hide();
@ -331,7 +333,9 @@ export class TableView implements NodeView {
this.rowsControl = h( this.rowsControl = h(
"div", "div",
{ className: "rowsControl" }, { className: "rowsControl" },
h("button", { h("div", {
itemType: "button",
className: "rowsControlDiv",
onClick: () => this.selectRow(), onClick: () => this.selectRow(),
}), }),
); );
@ -339,7 +343,9 @@ export class TableView implements NodeView {
this.columnsControl = h( this.columnsControl = h(
"div", "div",
{ className: "columnsControl" }, { className: "columnsControl" },
h("button", { h("div", {
itemType: "button",
className: "columnsControlDiv",
onClick: () => this.selectColumn(), onClick: () => this.selectColumn(),
}), }),
); );
@ -352,7 +358,7 @@ export class TableView implements NodeView {
); );
this.columnsToolbox = createToolbox({ this.columnsToolbox = createToolbox({
triggerButton: this.columnsControl.querySelector("button"), triggerButton: this.columnsControl.querySelector(".columnsControlDiv"),
items: columnsToolboxItems, items: columnsToolboxItems,
tippyOptions: { tippyOptions: {
...defaultTippyOptions, ...defaultTippyOptions,

542
packages/editor/core/src/ui/extensions/table/table/table.ts
View File

@ -1,298 +1,312 @@
import { TextSelection } from "@tiptap/pm/state" import { TextSelection } from "@tiptap/pm/state";
import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"
import { import {
addColumnAfter, callOrReturn,
addColumnBefore, getExtensionField,
addRowAfter, mergeAttributes,
addRowBefore, Node,
CellSelection, ParentConfig,
columnResizing, } from "@tiptap/core";
deleteColumn, import {
deleteRow, addColumnAfter,
deleteTable, addColumnBefore,
fixTables, addRowAfter,
goToNextCell, addRowBefore,
mergeCells, CellSelection,
setCellAttr, columnResizing,
splitCell, deleteColumn,
tableEditing, deleteRow,
toggleHeader, deleteTable,
toggleHeaderCell fixTables,
} from "@tiptap/prosemirror-tables" goToNextCell,
mergeCells,
setCellAttr,
splitCell,
tableEditing,
toggleHeader,
toggleHeaderCell,
} from "@tiptap/prosemirror-tables";
import { tableControls } from "./table-controls" import { tableControls } from "./table-controls";
import { TableView } from "./table-view" import { TableView } from "./table-view";
import { createTable } from "./utilities/create-table" import { createTable } from "./utilities/create-table";
import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected" import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected";
export interface TableOptions { export interface TableOptions {
HTMLAttributes: Record<string, any> HTMLAttributes: Record<string, any>;
resizable: boolean resizable: boolean;
handleWidth: number handleWidth: number;
cellMinWidth: number cellMinWidth: number;
lastColumnResizable: boolean lastColumnResizable: boolean;
allowTableNodeSelection: boolean allowTableNodeSelection: boolean;
} }
declare module "@tiptap/core" { declare module "@tiptap/core" {
interface Commands<ReturnType> { interface Commands<ReturnType> {
table: { table: {
insertTable: (options?: { insertTable: (options?: {
rows?: number rows?: number;
cols?: number cols?: number;
withHeaderRow?: boolean withHeaderRow?: boolean;
}) => ReturnType }) => ReturnType;
addColumnBefore: () => ReturnType addColumnBefore: () => ReturnType;
addColumnAfter: () => ReturnType addColumnAfter: () => ReturnType;
deleteColumn: () => ReturnType deleteColumn: () => ReturnType;
addRowBefore: () => ReturnType addRowBefore: () => ReturnType;
addRowAfter: () => ReturnType addRowAfter: () => ReturnType;
deleteRow: () => ReturnType deleteRow: () => ReturnType;
deleteTable: () => ReturnType deleteTable: () => ReturnType;
mergeCells: () => ReturnType mergeCells: () => ReturnType;
splitCell: () => ReturnType splitCell: () => ReturnType;
toggleHeaderColumn: () => ReturnType toggleHeaderColumn: () => ReturnType;
toggleHeaderRow: () => ReturnType toggleHeaderRow: () => ReturnType;
toggleHeaderCell: () => ReturnType toggleHeaderCell: () => ReturnType;
mergeOrSplit: () => ReturnType mergeOrSplit: () => ReturnType;
setCellAttribute: (name: string, value: any) => ReturnType setCellAttribute: (name: string, value: any) => ReturnType;
goToNextCell: () => ReturnType goToNextCell: () => ReturnType;
goToPreviousCell: () => ReturnType goToPreviousCell: () => ReturnType;
fixTables: () => ReturnType fixTables: () => ReturnType;
setCellSelection: (position: { setCellSelection: (position: {
anchorCell: number anchorCell: number;
headCell?: number headCell?: number;
}) => ReturnType }) => ReturnType;
} };
} }
interface NodeConfig<Options, Storage> { interface NodeConfig<Options, Storage> {
tableRole?: tableRole?:
| string | string
| ((this: { | ((this: {
name: string name: string;
options: Options options: Options;
storage: Storage storage: Storage;
parent: ParentConfig<NodeConfig<Options>>["tableRole"] parent: ParentConfig<NodeConfig<Options>>["tableRole"];
}) => string) }) => string);
} }
} }
export default Node.create({ export default Node.create({
name: "table", name: "table",
addOptions() { addOptions() {
return { return {
HTMLAttributes: {}, HTMLAttributes: {},
resizable: true, resizable: true,
handleWidth: 5, handleWidth: 5,
cellMinWidth: 100, cellMinWidth: 100,
lastColumnResizable: true, lastColumnResizable: true,
allowTableNodeSelection: true allowTableNodeSelection: true,
} };
}, },
content: "tableRow+", content: "tableRow+",
tableRole: "table", tableRole: "table",
isolating: true, isolating: true,
group: "block", group: "block",
allowGapCursor: false, allowGapCursor: false,
parseHTML() { parseHTML() {
return [{ tag: "table" }] return [{ tag: "table" }];
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
return [ return [
"table", "table",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
["tbody", 0] ["tbody", 0],
] ];
}, },
addCommands() { addCommands() {
return { return {
insertTable: insertTable:
({ rows = 3, cols = 3, withHeaderRow = true} = {}) => ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
({ tr, dispatch, editor }) => { ({ tr, dispatch, editor }) => {
const node = createTable( const node = createTable(editor.schema, rows, cols, withHeaderRow);
editor.schema,
rows,
cols,
withHeaderRow
)
if (dispatch) { if (dispatch) {
const offset = tr.selection.anchor + 1 const offset = tr.selection.anchor + 1;
tr.replaceSelectionWith(node) tr.replaceSelectionWith(node)
.scrollIntoView() .scrollIntoView()
.setSelection( .setSelection(TextSelection.near(tr.doc.resolve(offset)));
TextSelection.near(tr.doc.resolve(offset)) }
)
}
return true return true;
}, },
addColumnBefore: addColumnBefore:
() => () =>
({ state, dispatch }) => addColumnBefore(state, dispatch), ({ state, dispatch }) =>
addColumnAfter: addColumnBefore(state, dispatch),
() => addColumnAfter:
({ state, dispatch }) => addColumnAfter(state, dispatch), () =>
deleteColumn: ({ state, dispatch }) =>
() => addColumnAfter(state, dispatch),
({ state, dispatch }) => deleteColumn(state, dispatch), deleteColumn:
addRowBefore: () =>
() => ({ state, dispatch }) =>
({ state, dispatch }) => addRowBefore(state, dispatch), deleteColumn(state, dispatch),
addRowAfter: addRowBefore:
() => () =>
({ state, dispatch }) => addRowAfter(state, dispatch), ({ state, dispatch }) =>
deleteRow: addRowBefore(state, dispatch),
() => addRowAfter:
({ state, dispatch }) => deleteRow(state, dispatch), () =>
deleteTable: ({ state, dispatch }) =>
() => addRowAfter(state, dispatch),
({ state, dispatch }) => deleteTable(state, dispatch), deleteRow:
mergeCells: () =>
() => ({ state, dispatch }) =>
({ state, dispatch }) => mergeCells(state, dispatch), deleteRow(state, dispatch),
splitCell: deleteTable:
() => () =>
({ state, dispatch }) => splitCell(state, dispatch), ({ state, dispatch }) =>
toggleHeaderColumn: deleteTable(state, dispatch),
() => mergeCells:
({ state, dispatch }) => toggleHeader("column")(state, dispatch), () =>
toggleHeaderRow: ({ state, dispatch }) =>
() => mergeCells(state, dispatch),
({ state, dispatch }) => toggleHeader("row")(state, dispatch), splitCell:
toggleHeaderCell: () =>
() => ({ state, dispatch }) =>
({ state, dispatch }) => toggleHeaderCell(state, dispatch), splitCell(state, dispatch),
mergeOrSplit: toggleHeaderColumn:
() => () =>
({ state, dispatch }) => { ({ state, dispatch }) =>
if (mergeCells(state, dispatch)) { toggleHeader("column")(state, dispatch),
return true toggleHeaderRow:
} () =>
({ state, dispatch }) =>
toggleHeader("row")(state, dispatch),
toggleHeaderCell:
() =>
({ state, dispatch }) =>
toggleHeaderCell(state, dispatch),
mergeOrSplit:
() =>
({ state, dispatch }) => {
if (mergeCells(state, dispatch)) {
return true;
}
return splitCell(state, dispatch) return splitCell(state, dispatch);
}, },
setCellAttribute: setCellAttribute:
(name, value) => (name, value) =>
({ state, dispatch }) => setCellAttr(name, value)(state, dispatch), ({ state, dispatch }) =>
goToNextCell: setCellAttr(name, value)(state, dispatch),
() => goToNextCell:
({ state, dispatch }) => goToNextCell(1)(state, dispatch), () =>
goToPreviousCell: ({ state, dispatch }) =>
() => goToNextCell(1)(state, dispatch),
({ state, dispatch }) => goToNextCell(-1)(state, dispatch), goToPreviousCell:
fixTables: () =>
() => ({ state, dispatch }) =>
({ state, dispatch }) => { goToNextCell(-1)(state, dispatch),
if (dispatch) { fixTables:
fixTables(state) () =>
} ({ state, dispatch }) => {
if (dispatch) {
fixTables(state);
}
return true return true;
}, },
setCellSelection: setCellSelection:
(position) => (position) =>
({ tr, dispatch }) => { ({ tr, dispatch }) => {
if (dispatch) { if (dispatch) {
const selection = CellSelection.create( const selection = CellSelection.create(
tr.doc, tr.doc,
position.anchorCell, position.anchorCell,
position.headCell position.headCell,
) );
// @ts-ignore // @ts-ignore
tr.setSelection(selection) tr.setSelection(selection);
} }
return true return true;
} },
} };
}, },
addKeyboardShortcuts() { addKeyboardShortcuts() {
return { return {
Tab: () => { Tab: () => {
if (this.editor.commands.goToNextCell()) { if (this.editor.commands.goToNextCell()) {
return true return true;
}
if (!this.editor.can().addRowAfter()) {
return false
}
return this.editor.chain().addRowAfter().goToNextCell().run()
},
"Shift-Tab": () => this.editor.commands.goToPreviousCell(),
Backspace: deleteTableWhenAllCellsSelected,
"Mod-Backspace": deleteTableWhenAllCellsSelected,
Delete: deleteTableWhenAllCellsSelected,
"Mod-Delete": deleteTableWhenAllCellsSelected
}
},
addNodeView() {
return ({ editor, getPos, node, decorations }) => {
const { cellMinWidth } = this.options
return new TableView(
node,
cellMinWidth,
decorations,
editor,
getPos as () => number
)
}
},
addProseMirrorPlugins() {
const isResizable = this.options.resizable && this.editor.isEditable
const plugins = [
tableEditing({
allowTableNodeSelection: this.options.allowTableNodeSelection
}),
tableControls()
]
if (isResizable) {
plugins.unshift(
columnResizing({
handleWidth: this.options.handleWidth,
cellMinWidth: this.options.cellMinWidth,
// View: TableView,
// @ts-ignore
lastColumnResizable: this.options.lastColumnResizable
})
)
} }
return plugins if (!this.editor.can().addRowAfter()) {
}, return false;
extendNodeSchema(extension) {
const context = {
name: extension.name,
options: extension.options,
storage: extension.storage
} }
return { return this.editor.chain().addRowAfter().goToNextCell().run();
tableRole: callOrReturn( },
getExtensionField(extension, "tableRole", context) "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
) Backspace: deleteTableWhenAllCellsSelected,
} "Mod-Backspace": deleteTableWhenAllCellsSelected,
Delete: deleteTableWhenAllCellsSelected,
"Mod-Delete": deleteTableWhenAllCellsSelected,
};
},
addNodeView() {
return ({ editor, getPos, node, decorations }) => {
const { cellMinWidth } = this.options;
return new TableView(
node,
cellMinWidth,
decorations,
editor,
getPos as () => number,
);
};
},
addProseMirrorPlugins() {
const isResizable = this.options.resizable && this.editor.isEditable;
const plugins = [
tableEditing({
allowTableNodeSelection: this.options.allowTableNodeSelection,
}),
tableControls(),
];
if (isResizable) {
plugins.unshift(
columnResizing({
handleWidth: this.options.handleWidth,
cellMinWidth: this.options.cellMinWidth,
// View: TableView,
// @ts-ignore
lastColumnResizable: this.options.lastColumnResizable,
}),
);
} }
})
return plugins;
},
extendNodeSchema(extension) {
const context = {
name: extension.name,
options: extension.options,
storage: extension.storage,
};
return {
tableRole: callOrReturn(
getExtensionField(extension, "tableRole", context),
),
};
},
});

14
packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
View File

@ -1,12 +1,12 @@
import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model" import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
export function createCell( export function createCell(
cellType: NodeType, cellType: NodeType,
cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode> cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
): ProsemirrorNode | null | undefined { ): ProsemirrorNode | null | undefined {
if (cellContent) { if (cellContent) {
return cellType.createChecked(null, cellContent) return cellType.createChecked(null, cellContent);
} }
return cellType.createAndFill() return cellType.createAndFill();
} }

66
packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
View File

@ -1,45 +1,45 @@
import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model" import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
import { createCell } from "./create-cell" import { createCell } from "./create-cell";
import { getTableNodeTypes } from "./get-table-node-types" import { getTableNodeTypes } from "./get-table-node-types";
export function createTable( export function createTable(
schema: Schema, schema: Schema,
rowsCount: number, rowsCount: number,
colsCount: number, colsCount: number,
withHeaderRow: boolean, withHeaderRow: boolean,
cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode> cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
): ProsemirrorNode { ): ProsemirrorNode {
const types = getTableNodeTypes(schema) const types = getTableNodeTypes(schema);
const headerCells: ProsemirrorNode[] = [] const headerCells: ProsemirrorNode[] = [];
const cells: ProsemirrorNode[] = [] const cells: ProsemirrorNode[] = [];
for (let index = 0; index < colsCount; index += 1) { for (let index = 0; index < colsCount; index += 1) {
const cell = createCell(types.cell, cellContent) const cell = createCell(types.cell, cellContent);
if (cell) { if (cell) {
cells.push(cell) cells.push(cell);
}
if (withHeaderRow) {
const headerCell = createCell(types.header_cell, cellContent)
if (headerCell) {
headerCells.push(headerCell)
}
}
} }
const rows: ProsemirrorNode[] = [] if (withHeaderRow) {
const headerCell = createCell(types.header_cell, cellContent);
for (let index = 0; index < rowsCount; index += 1) { if (headerCell) {
rows.push( headerCells.push(headerCell);
types.row.createChecked( }
null,
withHeaderRow && index === 0 ? headerCells : cells
)
)
} }
}
return types.table.createChecked(null, rows) const rows: ProsemirrorNode[] = [];
for (let index = 0; index < rowsCount; index += 1) {
rows.push(
types.row.createChecked(
null,
withHeaderRow && index === 0 ? headerCells : cells,
),
);
}
return types.table.createChecked(null, rows);
} }

61
packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
View File

@ -1,39 +1,42 @@
import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core" import {
findParentNodeClosestToPos,
KeyboardShortcutCommand,
} from "@tiptap/core";
import { isCellSelection } from "./is-cell-selection" import { isCellSelection } from "./is-cell-selection";
export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
editor editor,
}) => { }) => {
const { selection } = editor.state const { selection } = editor.state;
if (!isCellSelection(selection)) { if (!isCellSelection(selection)) {
return false return false;
}
let cellCount = 0;
const table = findParentNodeClosestToPos(
selection.ranges[0].$from,
(node) => node.type.name === "table",
);
table?.node.descendants((node) => {
if (node.type.name === "table") {
return false;
} }
let cellCount = 0 if (["tableCell", "tableHeader"].includes(node.type.name)) {
const table = findParentNodeClosestToPos( cellCount += 1;
selection.ranges[0].$from,
(node) => node.type.name === "table"
)
table?.node.descendants((node) => {
if (node.type.name === "table") {
return false
}
if (["tableCell", "tableHeader"].includes(node.type.name)) {
cellCount += 1
}
})
const allCellsSelected = cellCount === selection.ranges.length
if (!allCellsSelected) {
return false
} }
});
editor.commands.deleteTable() const allCellsSelected = cellCount === selection.ranges.length;
return true if (!allCellsSelected) {
} return false;
}
editor.commands.deleteTable();
return true;
};

30
packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
View File

@ -1,21 +1,21 @@
import { NodeType, Schema } from "prosemirror-model" import { NodeType, Schema } from "prosemirror-model";
export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } { export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
if (schema.cached.tableNodeTypes) { if (schema.cached.tableNodeTypes) {
return schema.cached.tableNodeTypes return schema.cached.tableNodeTypes;
}
const roles: { [key: string]: NodeType } = {};
Object.keys(schema.nodes).forEach((type) => {
const nodeType = schema.nodes[type];
if (nodeType.spec.tableRole) {
roles[nodeType.spec.tableRole] = nodeType;
} }
});
const roles: { [key: string]: NodeType } = {} schema.cached.tableNodeTypes = roles;
Object.keys(schema.nodes).forEach((type) => { return roles;
const nodeType = schema.nodes[type]
if (nodeType.spec.tableRole) {
roles[nodeType.spec.tableRole] = nodeType
}
})
schema.cached.tableNodeTypes = roles
return roles
} }

4
packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
View File

@ -1,5 +1,5 @@
import { CellSelection } from "@tiptap/prosemirror-tables" import { CellSelection } from "@tiptap/prosemirror-tables";
export function isCellSelection(value: unknown): value is CellSelection { export function isCellSelection(value: unknown): value is CellSelection {
return value instanceof CellSelection return value instanceof CellSelection;
} }

18
packages/editor/core/src/ui/hooks/useEditor.tsx
View File

@ -29,11 +29,13 @@ interface CustomEditorProps {
forwardedRef?: any; forwardedRef?: any;
mentionHighlights?: string[]; mentionHighlights?: string[];
mentionSuggestions?: IMentionSuggestion[]; mentionSuggestions?: IMentionSuggestion[];
cancelUploadImage?: () => any;
} }
export const useEditor = ({ export const useEditor = ({
uploadFile, uploadFile,
deleteFile, deleteFile,
cancelUploadImage,
editorProps = {}, editorProps = {},
value, value,
extensions = [], extensions = [],
@ -42,7 +44,7 @@ export const useEditor = ({
forwardedRef, forwardedRef,
setShouldShowAlert, setShouldShowAlert,
mentionHighlights, mentionHighlights,
mentionSuggestions mentionSuggestions,
}: CustomEditorProps) => { }: CustomEditorProps) => {
const editor = useCustomEditor( const editor = useCustomEditor(
{ {
@ -50,7 +52,17 @@ export const useEditor = ({
...CoreEditorProps(uploadFile, setIsSubmitting), ...CoreEditorProps(uploadFile, setIsSubmitting),
...editorProps, ...editorProps,
}, },
extensions: [...CoreEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}, deleteFile), ...extensions], extensions: [
...CoreEditorExtensions(
{
mentionSuggestions: mentionSuggestions ?? [],
mentionHighlights: mentionHighlights ?? [],
},
deleteFile,
cancelUploadImage,
),
...extensions,
],
content: content:
typeof value === "string" && value.trim() !== "" ? value : "<p></p>", typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
onUpdate: async ({ editor }) => { onUpdate: async ({ editor }) => {
@ -82,4 +94,4 @@ export const useEditor = ({
} }
return editor; return editor;
}; };

19
packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
View File

@ -7,7 +7,7 @@ import {
} from "react"; } from "react";
import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions"; import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
import { CoreReadOnlyEditorProps } from "../../ui/read-only/props"; import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
import { EditorProps } from '@tiptap/pm/view'; import { EditorProps } from "@tiptap/pm/view";
import { IMentionSuggestion } from "../../types/mention-suggestion"; import { IMentionSuggestion } from "../../types/mention-suggestion";
interface CustomReadOnlyEditorProps { interface CustomReadOnlyEditorProps {
@ -19,7 +19,14 @@ interface CustomReadOnlyEditorProps {
mentionSuggestions?: IMentionSuggestion[]; mentionSuggestions?: IMentionSuggestion[];
} }
export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {}, mentionHighlights, mentionSuggestions}: CustomReadOnlyEditorProps) => { export const useReadOnlyEditor = ({
value,
forwardedRef,
extensions = [],
editorProps = {},
mentionHighlights,
mentionSuggestions,
}: CustomReadOnlyEditorProps) => {
const editor = useCustomEditor({ const editor = useCustomEditor({
editable: false, editable: false,
content: content:
@ -28,7 +35,13 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
...CoreReadOnlyEditorProps, ...CoreReadOnlyEditorProps,
...editorProps, ...editorProps,
}, },
extensions: [...CoreReadOnlyEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}), ...extensions], extensions: [
...CoreReadOnlyEditorExtensions({
mentionSuggestions: mentionSuggestions ?? [],
mentionHighlights: mentionHighlights ?? [],
}),
...extensions,
],
}); });
const hasIntiliazedContent = useRef(false); const hasIntiliazedContent = useRef(false);

56
packages/editor/core/src/ui/mentions/custom.tsx
View File

@ -1,11 +1,11 @@
import { Mention, MentionOptions } from '@tiptap/extension-mention' import { Mention, MentionOptions } from "@tiptap/extension-mention";
import { mergeAttributes } from '@tiptap/core' import { mergeAttributes } from "@tiptap/core";
import { ReactNodeViewRenderer } from '@tiptap/react' import { ReactNodeViewRenderer } from "@tiptap/react";
import mentionNodeView from './mentionNodeView' import mentionNodeView from "./mentionNodeView";
import { IMentionHighlight } from '../../types/mention-suggestion' import { IMentionHighlight } from "../../types/mention-suggestion";
export interface CustomMentionOptions extends MentionOptions { export interface CustomMentionOptions extends MentionOptions {
mentionHighlights: IMentionHighlight[] mentionHighlights: IMentionHighlight[];
readonly?: boolean readonly?: boolean;
} }
export const CustomMention = Mention.extend<CustomMentionOptions>({ export const CustomMention = Mention.extend<CustomMentionOptions>({
@ -21,35 +21,37 @@ export const CustomMention = Mention.extend<CustomMentionOptions>({
default: null, default: null,
}, },
self: { self: {
default: false default: false,
}, },
redirect_uri: { redirect_uri: {
default: "/" default: "/",
} },
} };
}, },
addNodeView() { addNodeView() {
return ReactNodeViewRenderer(mentionNodeView) return ReactNodeViewRenderer(mentionNodeView);
}, },
parseHTML() { parseHTML() {
return [{ return [
tag: 'mention-component', {
getAttrs: (node: string | HTMLElement) => { tag: "mention-component",
if (typeof node === 'string') { getAttrs: (node: string | HTMLElement) => {
return null; if (typeof node === "string") {
} return null;
return { }
id: node.getAttribute('data-mention-id') || '', return {
target: node.getAttribute('data-mention-target') || '', id: node.getAttribute("data-mention-id") || "",
label: node.innerText.slice(1) || '', target: node.getAttribute("data-mention-target") || "",
redirect_uri: node.getAttribute('redirect_uri') label: node.innerText.slice(1) || "",
} redirect_uri: node.getAttribute("redirect_uri"),
};
},
}, },
}] ];
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
return ['mention-component', mergeAttributes(HTMLAttributes)] return ["mention-component", mergeAttributes(HTMLAttributes)];
}, },
}) });

27
packages/editor/core/src/ui/mentions/index.tsx
View File

@ -2,14 +2,21 @@
import suggestion from "./suggestion"; import suggestion from "./suggestion";
import { CustomMention } from "./custom"; import { CustomMention } from "./custom";
import { IMentionHighlight, IMentionSuggestion } from "../../types/mention-suggestion"; import {
IMentionHighlight,
export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({ IMentionSuggestion,
HTMLAttributes: { } from "../../types/mention-suggestion";
'class' : "mention",
},
readonly: readonly,
mentionHighlights: mentionHighlights,
suggestion: suggestion(mentionSuggestions),
})
export const Mentions = (
mentionSuggestions: IMentionSuggestion[],
mentionHighlights: IMentionHighlight[],
readonly,
) =>
CustomMention.configure({
HTMLAttributes: {
class: "mention",
},
readonly: readonly,
mentionHighlights: mentionHighlights,
suggestion: suggestion(mentionSuggestions),
});

24
packages/editor/core/src/ui/mentions/suggestion.ts
View File

@ -1,12 +1,17 @@
import { ReactRenderer } from '@tiptap/react' import { ReactRenderer } from "@tiptap/react";
import { Editor } from "@tiptap/core"; import { Editor } from "@tiptap/core";
import tippy from 'tippy.js' import tippy from "tippy.js";
import MentionList from './MentionList' import MentionList from "./MentionList";
import { IMentionSuggestion } from '../../types/mention-suggestion'; import { IMentionSuggestion } from "../../types/mention-suggestion";
const Suggestion = (suggestions: IMentionSuggestion[]) => ({ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5), items: ({ query }: { query: string }) =>
suggestions
.filter((suggestion) =>
suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
)
.slice(0, 5),
render: () => { render: () => {
let reactRenderer: ReactRenderer | null = null; let reactRenderer: ReactRenderer | null = null;
let popup: any | null = null; let popup: any | null = null;
@ -30,7 +35,7 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
}, },
onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => { onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
reactRenderer?.updateProps(props) reactRenderer?.updateProps(props);
popup && popup &&
popup[0].setProps({ popup[0].setProps({
@ -49,11 +54,10 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
}, },
onExit: () => { onExit: () => {
popup?.[0].destroy(); popup?.[0].destroy();
reactRenderer?.destroy() reactRenderer?.destroy();
}, },
} };
}, },
}) });
export default Suggestion; export default Suggestion;

16
packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
View File

@ -1,16 +0,0 @@
const InsertBottomTableIcon = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 -960 960 960"
{...props}
>
<path
d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
fill="rgb(var(--color-text-300))"
/>
</svg>
);
export default InsertBottomTableIcon;

15
packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
View File

@ -1,15 +0,0 @@
const InsertLeftTableIcon = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 -960 960 960"
{...props}
>
<path
d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
fill="rgb(var(--color-text-300))"
/>
</svg>
);
export default InsertLeftTableIcon;

16
packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
View File

@ -1,16 +0,0 @@
const InsertRightTableIcon = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 -960 960 960"
{...props}
>
<path
d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
fill="rgb(var(--color-text-300))"
/>
</svg>
);
export default InsertRightTableIcon;

15
packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
View File

@ -1,15 +0,0 @@
const InsertTopTableIcon = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 -960 960 960"
{...props}
>
<path
d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
fill="rgb(var(--color-text-300))"
/>
</svg>
);
export default InsertTopTableIcon;

77
packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
View File

@ -1,77 +0,0 @@
import * as React from 'react';
// next-themes
import { useTheme } from "next-themes";
// tooltip2
import { Tooltip2 } from "@blueprintjs/popover2";
type Props = {
tooltipHeading?: string;
tooltipContent: string | React.ReactNode;
position?:
| "top"
| "right"
| "bottom"
| "left"
| "auto"
| "auto-end"
| "auto-start"
| "bottom-left"
| "bottom-right"
| "left-bottom"
| "left-top"
| "right-bottom"
| "right-top"
| "top-left"
| "top-right";
children: JSX.Element;
disabled?: boolean;
className?: string;
openDelay?: number;
closeDelay?: number;
};
export const Tooltip: React.FC<Props> = ({
tooltipHeading,
tooltipContent,
position = "top",
children,
disabled = false,
className = "",
openDelay = 200,
closeDelay,
}) => {
const { theme } = useTheme();
return (
<Tooltip2
disabled={disabled}
hoverOpenDelay={openDelay}
hoverCloseDelay={closeDelay}
content={
<div
className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
theme === "custom"
? "bg-custom-background-100 text-custom-text-200"
: "bg-black text-gray-400"
} break-words overflow-hidden ${className}`}
>
{tooltipHeading && (
<h5
className={`font-medium ${
theme === "custom" ? "text-custom-text-100" : "text-white"
}`}
>
{tooltipHeading}
</h5>
)}
{tooltipContent}
</div>
}
position={position}
renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
}
/>
);
};

11
packages/editor/core/src/ui/plugins/delete-image.tsx
View File

@ -15,7 +15,11 @@ interface ImageNode extends ProseMirrorNode {
const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
new Plugin({ new Plugin({
key: deleteKey, key: deleteKey,
appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { appendTransaction: (
transactions: readonly Transaction[],
oldState: EditorState,
newState: EditorState,
) => {
const newImageSources = new Set<string>(); const newImageSources = new Set<string>();
newState.doc.descendants((node) => { newState.doc.descendants((node) => {
if (node.type.name === IMAGE_NODE_TYPE) { if (node.type.name === IMAGE_NODE_TYPE) {
@ -55,7 +59,10 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
export default TrackImageDeletionPlugin; export default TrackImageDeletionPlugin;
async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> { async function onNodeDeleted(
src: string,
deleteImage: DeleteImage,
): Promise<void> {
try { try {
const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
const resStatus = await deleteImage(assetUrlWithWorkspaceId); const resStatus = await deleteImage(assetUrlWithWorkspaceId);

104
packages/editor/core/src/ui/plugins/upload-image.tsx
View File

@ -4,7 +4,7 @@ import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
const uploadKey = new PluginKey("upload-image"); const uploadKey = new PluginKey("upload-image");
const UploadImagesPlugin = () => const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
new Plugin({ new Plugin({
key: uploadKey, key: uploadKey,
state: { state: {
@ -21,15 +21,46 @@ const UploadImagesPlugin = () =>
const placeholder = document.createElement("div"); const placeholder = document.createElement("div");
placeholder.setAttribute("class", "img-placeholder"); placeholder.setAttribute("class", "img-placeholder");
const image = document.createElement("img"); 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; image.src = src;
placeholder.appendChild(image); placeholder.appendChild(image);
// Create cancel button
const cancelButton = document.createElement("button");
cancelButton.style.position = "absolute";
cancelButton.style.right = "3px";
cancelButton.style.top = "3px";
cancelButton.setAttribute("class", "opacity-90 rounded-lg");
cancelButton.onclick = () => {
cancelUploadImage?.();
};
// Create an SVG element from the SVG string
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
const parser = new DOMParser();
const svgElement = parser.parseFromString(
svgString,
"image/svg+xml",
).documentElement;
cancelButton.appendChild(svgElement);
placeholder.appendChild(cancelButton);
const deco = Decoration.widget(pos + 1, placeholder, { const deco = Decoration.widget(pos + 1, placeholder, {
id, id,
}); });
set = set.add(tr.doc, [deco]); set = set.add(tr.doc, [deco]);
} else if (action && action.remove) { } 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; return set;
}, },
@ -48,19 +79,39 @@ function findPlaceholder(state: EditorState, id: {}) {
const found = decos.find( const found = decos.find(
undefined, undefined,
undefined, undefined,
(spec: { id: number | undefined }) => spec.id == id (spec: { id: number | undefined }) => spec.id == id,
); );
return found.length ? found[0].from : null; return found.length ? found[0].from : null;
} }
const removePlaceholder = (view: EditorView, id: {}) => {
const removePlaceholderTr = view.state.tr.setMeta(uploadKey, {
remove: { id },
});
view.dispatch(removePlaceholderTr);
};
export async function startImageUpload( export async function startImageUpload(
file: File, file: File,
view: EditorView, view: EditorView,
pos: number, pos: number,
uploadFile: UploadImage, 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.");
return;
}
if (!file.type.includes("image/")) { if (!file.type.includes("image/")) {
alert("Invalid file type. Please select an image file.");
return;
}
if (file.size > 5 * 1024 * 1024) {
alert("File size too large. Please select a file smaller than 5MB.");
return; return;
} }
@ -82,28 +133,42 @@ export async function startImageUpload(
view.dispatch(tr); view.dispatch(tr);
}; };
// Handle FileReader errors
reader.onerror = (error) => {
console.error("FileReader error: ", error);
removePlaceholder(view, id);
return;
};
setIsSubmitting?.("submitting"); setIsSubmitting?.("submitting");
const src = await UploadImageHandler(file, uploadFile);
const { schema } = view.state;
pos = findPlaceholder(view.state, id);
if (pos == null) return; try {
const imageSrc = typeof src === "object" ? reader.result : src; const src = await UploadImageHandler(file, uploadFile);
const { schema } = view.state;
pos = findPlaceholder(view.state, id);
const node = schema.nodes.image.create({ src: imageSrc }); if (pos == null) return;
const transaction = view.state.tr const imageSrc = typeof src === "object" ? reader.result : src;
.replaceWith(pos, pos, node)
.setMeta(uploadKey, { remove: { id } }); const node = schema.nodes.image.create({ src: imageSrc });
view.dispatch(transaction); const transaction = view.state.tr
.replaceWith(pos, pos, node)
.setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
} catch (error) {
console.error("Upload error: ", error);
removePlaceholder(view, id);
}
} }
const UploadImageHandler = (file: File, const UploadImageHandler = (
uploadFile: UploadImage file: File,
uploadFile: UploadImage,
): Promise<string> => { ): Promise<string> => {
try { try {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
const imageUrl = await uploadFile(file) const imageUrl = await uploadFile(file);
const image = new Image(); const image = new Image();
image.src = imageUrl; image.src = imageUrl;
@ -118,9 +183,6 @@ const UploadImageHandler = (file: File,
} }
}); });
} catch (error) { } catch (error) {
if (error instanceof Error) {
console.log(error.message);
}
return Promise.reject(error); return Promise.reject(error);
} }
}; };

25
packages/editor/core/src/ui/props.tsx
View File

@ -5,7 +5,9 @@ import { UploadImage } from "../types/upload-image";
export function CoreEditorProps( export function CoreEditorProps(
uploadFile: UploadImage, uploadFile: UploadImage,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void,
): EditorProps { ): EditorProps {
return { return {
attributes: { attributes: {
@ -32,7 +34,11 @@ 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(); event.preventDefault();
const file = event.clipboardData.files[0]; const file = event.clipboardData.files[0];
const pos = view.state.selection.from; const pos = view.state.selection.from;
@ -51,7 +57,12 @@ 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(); event.preventDefault();
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
const coordinates = view.posAtCoords({ const coordinates = view.posAtCoords({
@ -59,7 +70,13 @@ export function CoreEditorProps(
top: event.clientY, top: event.clientY,
}); });
if (coordinates) { if (coordinates) {
startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting); startImageUpload(
file,
view,
coordinates.pos - 1,
uploadFile,
setIsSubmitting,
);
} }
return true; return true;
} }

87
packages/editor/core/src/ui/read-only/extensions.tsx
View File

@ -18,9 +18,10 @@ import { isValidHttpUrl } from "../../lib/utils";
import { Mentions } from "../mentions"; import { Mentions } from "../mentions";
import { IMentionSuggestion } from "../../types/mention-suggestion"; import { IMentionSuggestion } from "../../types/mention-suggestion";
export const CoreReadOnlyEditorExtensions = ( export const CoreReadOnlyEditorExtensions = (mentionConfig: {
mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] }, mentionSuggestions: IMentionSuggestion[];
) => [ mentionHighlights: string[];
}) => [
StarterKit.configure({ StarterKit.configure({
bulletList: { bulletList: {
HTMLAttributes: { HTMLAttributes: {
@ -57,41 +58,45 @@ export const CoreReadOnlyEditorExtensions = (
}, },
gapcursor: false, gapcursor: false,
}), }),
Gapcursor, Gapcursor,
TiptapLink.configure({ TiptapLink.configure({
protocols: ["http", "https"], protocols: ["http", "https"],
validate: (url) => isValidHttpUrl(url), validate: (url) => isValidHttpUrl(url),
HTMLAttributes: { HTMLAttributes: {
class: class:
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
}, },
}), }),
ReadOnlyImageExtension.configure({ ReadOnlyImageExtension.configure({
HTMLAttributes: { HTMLAttributes: {
class: "rounded-lg border border-custom-border-300", class: "rounded-lg border border-custom-border-300",
}, },
}), }),
TiptapUnderline, TiptapUnderline,
TextStyle, TextStyle,
Color, Color,
TaskList.configure({ TaskList.configure({
HTMLAttributes: { HTMLAttributes: {
class: "not-prose pl-2", class: "not-prose pl-2",
}, },
}), }),
TaskItem.configure({ TaskItem.configure({
HTMLAttributes: { HTMLAttributes: {
class: "flex items-start my-4", class: "flex items-start my-4",
}, },
nested: true, nested: true,
}), }),
Markdown.configure({ Markdown.configure({
html: true, html: true,
transformCopiedText: true, transformCopiedText: true,
}), }),
Table, Table,
TableHeader, TableHeader,
TableCell, TableCell,
TableRow, TableRow,
Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true), Mentions(
]; mentionConfig.mentionSuggestions,
mentionConfig.mentionHighlights,
true,
),
];

3
packages/editor/core/src/ui/read-only/props.tsx
View File

@ -1,7 +1,6 @@
import { EditorProps } from "@tiptap/pm/view"; import { EditorProps } from "@tiptap/pm/view";
export const CoreReadOnlyEditorProps: EditorProps = export const CoreReadOnlyEditorProps: EditorProps = {
{
attributes: { attributes: {
class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`, class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
}, },

110
packages/editor/lite-text-editor/Readme.md
View File

@ -10,25 +10,25 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
`LiteTextEditor` & `LiteTextEditorWithRef` `LiteTextEditor` & `LiteTextEditorWithRef`
- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Lite editor types (with and without Ref) - **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
`LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef` `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
## LiteTextEditor ## LiteTextEditor
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. | | `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. | | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
| `value` | `html string` | The initial content of the editor. | | `value` | `html string` | The initial content of the editor. |
| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press | | `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. | | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. | | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. | | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". | | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
| `noBorder` | `boolean` | If set to true, the editor will not have a border. | | `noBorder` | `boolean` | If set to true, the editor will not have a border. |
| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. | | `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. | | `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. | | `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage ### Usage
@ -36,62 +36,62 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
```tsx ```tsx
<LiteTextEditor <LiteTextEditor
onEnterKeyPress={handleSubmit(handleCommentUpdate)} onEnterKeyPress={handleSubmit(handleCommentUpdate)}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)} uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage} deleteFile={fileService.deleteImage}
value={value} value={value}
debouncedUpdatesEnabled={false} debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3 shadow-sm" customClassName="min-h-[50px] p-3 shadow-sm"
onChange={(comment_json: Object, comment_html: string) => { onChange={(comment_json: Object, comment_html: string) => {
onChange(comment_html); onChange(comment_html);
}} }}
/> />
``` ```
2. Example of how to use the `LiteTextEditorWithRef` component 2. Example of how to use the `LiteTextEditorWithRef` component
```tsx ```tsx
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
// can use it to set the editor's value // can use it to set the editor's value
editorRef.current?.setEditorValue(`${watch("description_html")}`); editorRef.current?.setEditorValue(`${watch("description_html")}`);
// can use it to clear the editor // can use it to clear the editor
editorRef?.current?.clearEditor(); editorRef?.current?.clearEditor();
return ( return (
<LiteTextEditorWithRef <LiteTextEditorWithRef
onEnterKeyPress={handleSubmit(handleCommentUpdate)} onEnterKeyPress={handleSubmit(handleCommentUpdate)}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)} uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage} deleteFile={fileService.deleteImage}
ref={editorRef} ref={editorRef}
value={value} value={value}
debouncedUpdatesEnabled={false} debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3 shadow-sm" customClassName="min-h-[50px] p-3 shadow-sm"
onChange={(comment_json: Object, comment_html: string) => { onChange={(comment_json: Object, comment_html: string) => {
onChange(comment_html); onChange(comment_html);
}} }}
/> />
) );
``` ```
## LiteReadOnlyEditor ## LiteReadOnlyEditor
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | ------------------------------- | ------------- | --------------------------------------------------------------------- |
| `value` | `html string` | The initial content of the editor. | | `value` | `html string` | The initial content of the editor. |
| `noBorder` | `boolean` | If set to true, the editor will not have a border. | | `noBorder` | `boolean` | If set to true, the editor will not have a border. |
| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. | | `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. | | `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. | | `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage ### Usage
Here is an example of how to use the `RichReadOnlyEditor` component Here is an example of how to use the `RichReadOnlyEditor` component
```tsx ```tsx
<LiteReadOnlyEditor <LiteReadOnlyEditor
value={comment.comment_html} value={comment.comment_html}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100" customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
/> />
``` ```

1
packages/editor/lite-text-editor/package.json
View File

@ -29,6 +29,7 @@
}, },
"dependencies": { "dependencies": {
"@plane/editor-core": "*", "@plane/editor-core": "*",
"@plane/ui": "*",
"@tiptap/extension-list-item": "^2.1.11", "@tiptap/extension-list-item": "^2.1.11",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^1.2.1", "clsx": "^1.2.1",

2
packages/editor/lite-text-editor/src/index.ts
View File

@ -1,3 +1,3 @@
export { LiteTextEditor, LiteTextEditorWithRef } from "./ui"; export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only"; export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
export type { IMentionSuggestion, IMentionHighlight } from "./ui" export type { IMentionSuggestion, IMentionHighlight } from "./ui";

7
packages/editor/lite-text-editor/src/ui/index.tsx
View File

@ -31,7 +31,7 @@ interface ILiteTextEditor {
editorContentCustomClassNames?: string; editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void; onChange?: (json: any, html: string) => void;
setIsSubmitting?: ( setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved" isSubmitting: "submitting" | "submitted" | "saved",
) => void; ) => void;
setShouldShowAlert?: (showAlert: boolean) => void; setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any; forwardedRef?: any;
@ -47,6 +47,7 @@ interface ILiteTextEditor {
}[]; }[];
}; };
onEnterKeyPress?: (e?: any) => void; onEnterKeyPress?: (e?: any) => void;
cancelUploadImage?: () => any;
mentionHighlights?: string[]; mentionHighlights?: string[];
mentionSuggestions?: IMentionSuggestion[]; mentionSuggestions?: IMentionSuggestion[];
submitButton?: React.ReactNode; submitButton?: React.ReactNode;
@ -64,6 +65,7 @@ interface EditorHandle {
const LiteTextEditor = (props: LiteTextEditorProps) => { const LiteTextEditor = (props: LiteTextEditorProps) => {
const { const {
onChange, onChange,
cancelUploadImage,
debouncedUpdatesEnabled, debouncedUpdatesEnabled,
setIsSubmitting, setIsSubmitting,
setShouldShowAlert, setShouldShowAlert,
@ -84,6 +86,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
const editor = useEditor({ const editor = useEditor({
onChange, onChange,
cancelUploadImage,
debouncedUpdatesEnabled, debouncedUpdatesEnabled,
setIsSubmitting, setIsSubmitting,
setShouldShowAlert, setShouldShowAlert,
@ -126,7 +129,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
}; };
const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>( const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
(props, ref) => <LiteTextEditor {...props} forwardedRef={ref} /> (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />,
); );
LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef"; LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";

5
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
View File

@ -6,8 +6,9 @@ type Props = {
}; };
export const Icon: React.FC<Props> = ({ iconName, className = "" }) => ( export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
<span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}> <span
className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}
>
{iconName} {iconName}
</span> </span>
); );

4
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View File

@ -14,8 +14,8 @@ import {
TableItem, TableItem,
UnderLineItem, UnderLineItem,
} from "@plane/editor-core"; } from "@plane/editor-core";
import { Tooltip } from "../../tooltip"; import { Tooltip } from "@plane/ui";
import { UploadImage } from "../.."; import { UploadImage } from "../../";
export interface BubbleMenuItem { export interface BubbleMenuItem {
name: string; name: string;

84
packages/editor/rich-text-editor/Readme.md
View File

@ -10,24 +10,24 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
`RichTextEditor` & `RichTextEditorWithRef` `RichTextEditor` & `RichTextEditorWithRef`
- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Rich editor types (with and without Ref) - **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Rich editor types (with and without Ref)
`RichReadOnlyEditor` &`RichReadOnlyEditorWithRef` `RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`
## RichTextEditor ## RichTextEditor
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. | | `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. | | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
| `value` | `html string` | The initial content of the editor. | | `value` | `html string` | The initial content of the editor. |
| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. | | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. | | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. | | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". | | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
| `noBorder` | `boolean` | If set to true, the editor will not have a border. | | `noBorder` | `boolean` | If set to true, the editor will not have a border. |
| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. | | `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. | | `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. | | `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage ### Usage
@ -57,43 +57,47 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
2. Example of how to use the `RichTextEditorWithRef` component 2. Example of how to use the `RichTextEditorWithRef` component
```tsx ```tsx
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
// can use it to set the editor's value // can use it to set the editor's value
editorRef.current?.setEditorValue(`${watch("description_html")}`); editorRef.current?.setEditorValue(`${watch("description_html")}`);
// can use it to clear the editor // can use it to clear the editor
editorRef?.current?.clearEditor(); editorRef?.current?.clearEditor();
return (<RichTextEditorWithRef return (
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)} <RichTextEditorWithRef
deleteFile={fileService.deleteImage} uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
ref={editorRef} deleteFile={fileService.deleteImage}
debouncedUpdatesEnabled={false} ref={editorRef}
value={value} debouncedUpdatesEnabled={false}
customClassName="min-h-[150px]" value={value}
onChange={(description: Object, description_html: string) => { customClassName="min-h-[150px]"
onChange(description_html); onChange={(description: Object, description_html: string) => {
// custom stuff you want to do onChange(description_html);
} } />) // custom stuff you want to do
}}
/>
);
``` ```
## RichReadOnlyEditor ## RichReadOnlyEditor
| Prop | Type | Description | | Prop | Type | Description |
| --- | --- | --- | | ------------------------------- | ------------- | --------------------------------------------------------------------- |
| `value` | `html string` | The initial content of the editor. | | `value` | `html string` | The initial content of the editor. |
| `noBorder` | `boolean` | If set to true, the editor will not have a border. | | `noBorder` | `boolean` | If set to true, the editor will not have a border. |
| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. | | `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. | | `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. | | `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage ### Usage
Here is an example of how to use the `RichReadOnlyEditor` component Here is an example of how to use the `RichReadOnlyEditor` component
```tsx ```tsx
<RichReadOnlyEditor <RichReadOnlyEditor
value={issueDetails.description_html} value={issueDetails.description_html}
customClassName="p-3 min-h-[50px] shadow-sm" /> customClassName="p-3 min-h-[50px] shadow-sm"
/>
``` ```

2
packages/editor/rich-text-editor/src/index.ts
View File

@ -2,4 +2,4 @@ import "./styles/github-dark.css";
export { RichTextEditor, RichTextEditorWithRef } from "./ui"; export { RichTextEditor, RichTextEditorWithRef } from "./ui";
export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only"; export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
export type { IMentionSuggestion, IMentionHighlight } from "./ui" export type { IMentionSuggestion, IMentionHighlight } from "./ui";

86
packages/editor/rich-text-editor/src/ui/extensions/index.tsx
View File

@ -1,7 +1,7 @@
import HorizontalRule from "@tiptap/extension-horizontal-rule"; import HorizontalRule from "@tiptap/extension-horizontal-rule";
import Placeholder from "@tiptap/extension-placeholder"; import Placeholder from "@tiptap/extension-placeholder";
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"; import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import { common, createLowlight } from 'lowlight' import { common, createLowlight } from "lowlight";
import { InputRule } from "@tiptap/core"; import { InputRule } from "@tiptap/core";
import ts from "highlight.js/lib/languages/typescript"; import ts from "highlight.js/lib/languages/typescript";
@ -9,51 +9,53 @@ import ts from "highlight.js/lib/languages/typescript";
import SlashCommand from "./slash-command"; import SlashCommand from "./slash-command";
import { UploadImage } from "../"; import { UploadImage } from "../";
const lowlight = createLowlight(common) const lowlight = createLowlight(common);
lowlight.register("ts", ts); lowlight.register("ts", ts);
export const RichTextEditorExtensions = ( export const RichTextEditorExtensions = (
uploadFile: UploadImage, uploadFile: UploadImage,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void,
) => [ ) => [
HorizontalRule.extend({ HorizontalRule.extend({
addInputRules() { addInputRules() {
return [ return [
new InputRule({ new InputRule({
find: /^(?:---|—-|___\s|\*\*\*\s)$/, find: /^(?:---|—-|___\s|\*\*\*\s)$/,
handler: ({ state, range, commands }) => { handler: ({ state, range, commands }) => {
commands.splitBlock(); commands.splitBlock();
const attributes = {}; const attributes = {};
const { tr } = state; const { tr } = state;
const start = range.from; const start = range.from;
const end = range.to; const end = range.to;
// @ts-ignore // @ts-ignore
tr.replaceWith(start - 1, end, this.type.create(attributes)); tr.replaceWith(start - 1, end, this.type.create(attributes));
}, },
}), }),
]; ];
}, },
}).configure({ }).configure({
HTMLAttributes: { HTMLAttributes: {
class: "mb-6 border-t border-custom-border-300", class: "mb-6 border-t border-custom-border-300",
}, },
}), }),
SlashCommand(uploadFile, setIsSubmitting), SlashCommand(uploadFile, setIsSubmitting),
CodeBlockLowlight.configure({ CodeBlockLowlight.configure({
lowlight, lowlight,
}), }),
Placeholder.configure({ Placeholder.configure({
placeholder: ({ node }) => { placeholder: ({ node }) => {
if (node.type.name === "heading") { if (node.type.name === "heading") {
return `Heading ${node.attrs.level}`; return `Heading ${node.attrs.level}`;
} }
if (node.type.name === "image" || node.type.name === "table") { if (node.type.name === "image" || node.type.name === "table") {
return ""; return "";
} }
return "Press '/' for commands..."; return "Press '/' for commands...";
}, },
includeChildren: true, includeChildren: true,
}), }),
]; ];

51
packages/editor/rich-text-editor/src/ui/index.tsx
View File

@ -1,8 +1,13 @@
"use client" "use client";
import * as React from 'react'; import * as React from "react";
import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core'; import {
import { EditorBubbleMenu } from './menus/bubble-menu'; EditorContainer,
import { RichTextEditorExtensions } from './extensions'; EditorContentWrapper,
getEditorClassNames,
useEditor,
} from "@plane/editor-core";
import { EditorBubbleMenu } from "./menus/bubble-menu";
import { RichTextEditorExtensions } from "./extensions";
export type UploadImage = (file: File) => Promise<string>; export type UploadImage = (file: File) => Promise<string>;
export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>; export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
@ -14,9 +19,9 @@ export type IMentionSuggestion = {
title: string; title: string;
subtitle: string; subtitle: string;
redirect_uri: string; redirect_uri: string;
} };
export type IMentionHighlight = string export type IMentionHighlight = string;
interface IRichTextEditor { interface IRichTextEditor {
value: string; value: string;
@ -24,10 +29,13 @@ interface IRichTextEditor {
deleteFile: DeleteImage; deleteFile: DeleteImage;
noBorder?: boolean; noBorder?: boolean;
borderOnFocus?: boolean; borderOnFocus?: boolean;
cancelUploadImage?: () => any;
customClassName?: string; customClassName?: string;
editorContentCustomClassNames?: string; editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void; onChange?: (json: any, html: string) => void;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void;
setShouldShowAlert?: (showAlert: boolean) => void; setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any; forwardedRef?: any;
debouncedUpdatesEnabled?: boolean; debouncedUpdatesEnabled?: boolean;
@ -54,11 +62,12 @@ const RichTextEditor = ({
uploadFile, uploadFile,
deleteFile, deleteFile,
noBorder, noBorder,
cancelUploadImage,
borderOnFocus, borderOnFocus,
customClassName, customClassName,
forwardedRef, forwardedRef,
mentionHighlights, mentionHighlights,
mentionSuggestions mentionSuggestions,
}: RichTextEditorProps) => { }: RichTextEditorProps) => {
const editor = useEditor({ const editor = useEditor({
onChange, onChange,
@ -67,14 +76,19 @@ const RichTextEditor = ({
setShouldShowAlert, setShouldShowAlert,
value, value,
uploadFile, uploadFile,
cancelUploadImage,
deleteFile, deleteFile,
forwardedRef, forwardedRef,
extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting), extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting),
mentionHighlights, mentionHighlights,
mentionSuggestions mentionSuggestions,
}); });
const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName }); const editorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
if (!editor) return null; if (!editor) return null;
@ -82,16 +96,19 @@ const RichTextEditor = ({
<EditorContainer editor={editor} editorClassNames={editorClassNames}> <EditorContainer editor={editor} editorClassNames={editorClassNames}>
{editor && <EditorBubbleMenu editor={editor} />} {editor && <EditorBubbleMenu editor={editor} />}
<div className="flex flex-col"> <div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} /> <EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
</div> </div>
</EditorContainer > </EditorContainer>
); );
}; };
const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>((props, ref) => ( const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>(
<RichTextEditor {...props} forwardedRef={ref} /> (props, ref) => <RichTextEditor {...props} forwardedRef={ref} />,
)); );
RichTextEditorWithRef.displayName = "RichTextEditorWithRef"; RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
export { RichTextEditor, RichTextEditorWithRef}; export { RichTextEditor, RichTextEditorWithRef };

24
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
View File

@ -1,7 +1,19 @@
import { Editor } from "@tiptap/core"; import { Editor } from "@tiptap/core";
import { Check, Trash } from "lucide-react"; import { Check, Trash } from "lucide-react";
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react"; import {
import { cn, isValidHttpUrl, setLinkEditor, unsetLinkEditor, } from "@plane/editor-core"; Dispatch,
FC,
SetStateAction,
useCallback,
useEffect,
useRef,
} from "react";
import {
cn,
isValidHttpUrl,
setLinkEditor,
unsetLinkEditor,
} from "@plane/editor-core";
interface LinkSelectorProps { interface LinkSelectorProps {
editor: Editor; editor: Editor;
@ -9,7 +21,11 @@ interface LinkSelectorProps {
setIsOpen: Dispatch<SetStateAction<boolean>>; setIsOpen: Dispatch<SetStateAction<boolean>>;
} }
export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => { export const LinkSelector: FC<LinkSelectorProps> = ({
editor,
isOpen,
setIsOpen,
}) => {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const onLinkSubmit = useCallback(() => { const onLinkSubmit = useCallback(() => {
@ -31,7 +47,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
type="button" type="button"
className={cn( className={cn(
"flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100", "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
{ "bg-custom-background-100": isOpen } { "bg-custom-background-100": isOpen },
)} )}
onClick={() => { onClick={() => {
setIsOpen(!isOpen); setIsOpen(!isOpen);

32
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
View File

@ -1,10 +1,16 @@
import { BulletListItem, cn, CodeItem, HeadingOneItem, HeadingThreeItem, HeadingTwoItem, NumberedListItem, QuoteItem, TodoListItem } from "@plane/editor-core";
import { Editor } from "@tiptap/react";
import { import {
Check, BulletListItem,
ChevronDown, cn,
TextIcon, CodeItem,
} from "lucide-react"; HeadingOneItem,
HeadingThreeItem,
HeadingTwoItem,
NumberedListItem,
QuoteItem,
TodoListItem,
} from "@plane/editor-core";
import { Editor } from "@tiptap/react";
import { Check, ChevronDown, TextIcon } from "lucide-react";
import { Dispatch, FC, SetStateAction } from "react"; import { Dispatch, FC, SetStateAction } from "react";
import { BubbleMenuItem } from "."; import { BubbleMenuItem } from ".";
@ -15,12 +21,17 @@ interface NodeSelectorProps {
setIsOpen: Dispatch<SetStateAction<boolean>>; setIsOpen: Dispatch<SetStateAction<boolean>>;
} }
export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => { export const NodeSelector: FC<NodeSelectorProps> = ({
editor,
isOpen,
setIsOpen,
}) => {
const items: BubbleMenuItem[] = [ const items: BubbleMenuItem[] = [
{ {
name: "Text", name: "Text",
icon: TextIcon, icon: TextIcon,
command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(), command: () =>
editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
isActive: () => isActive: () =>
editor.isActive("paragraph") && editor.isActive("paragraph") &&
!editor.isActive("bulletList") && !editor.isActive("bulletList") &&
@ -63,7 +74,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
}} }}
className={cn( 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", "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,
},
)} )}
> >
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">

33
packages/editor/rich-text-editor/src/ui/read-only/index.tsx
View File

@ -1,6 +1,11 @@
"use client" "use client";
import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core'; import {
import * as React from 'react'; EditorContainer,
EditorContentWrapper,
getEditorClassNames,
useReadOnlyEditor,
} from "@plane/editor-core";
import * as React from "react";
interface IRichTextReadOnlyEditor { interface IRichTextReadOnlyEditor {
value: string; value: string;
@ -35,23 +40,31 @@ const RichReadOnlyEditor = ({
mentionHighlights, mentionHighlights,
}); });
const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName }); const editorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
if (!editor) return null; if (!editor) return null;
return ( return (
<EditorContainer editor={editor} editorClassNames={editorClassNames}> <EditorContainer editor={editor} editorClassNames={editorClassNames}>
<div className="flex flex-col"> <div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} /> <EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
</div> </div>
</EditorContainer > </EditorContainer>
); );
}; };
const RichReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => ( const RichReadOnlyEditorWithRef = React.forwardRef<
<RichReadOnlyEditor {...props} forwardedRef={ref} /> EditorHandle,
)); IRichTextReadOnlyEditor
>((props, ref) => <RichReadOnlyEditor {...props} forwardedRef={ref} />);
RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef"; RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";
export { RichReadOnlyEditor , RichReadOnlyEditorWithRef }; export { RichReadOnlyEditor, RichReadOnlyEditorWithRef };

6
packages/ui/src/avatar/avatar.tsx
View File

@ -123,7 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
size = "md", size = "md",
shape = "circle", shape = "circle",
src, src,
className = "" className = "",
} = props; } = props;
// get size details based on the size prop // get size details based on the size prop
@ -157,7 +157,9 @@ export const Avatar: React.FC<Props> = (props) => {
<div <div
className={`${ className={`${
sizeInfo.fontSize sizeInfo.fontSize
} grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`} } grid place-items-center h-full w-full ${getBorderRadius(
shape,
)} ${className}`}
style={{ style={{
backgroundColor: backgroundColor:
fallbackBackgroundColor ?? "rgba(var(--color-primary-500))", fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",

2
packages/ui/src/button/button.tsx
View File

@ -58,7 +58,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
)} )}
</button> </button>
); );
} },
); );
Button.displayName = "plane-ui-button"; Button.displayName = "plane-ui-button";

2
packages/ui/src/button/helper.tsx
View File

@ -102,7 +102,7 @@ export const buttonStyling: IButtonStyling = {
export const getButtonStyling = ( export const getButtonStyling = (
variant: TButtonVariant, variant: TButtonVariant,
size: TButtonSizes, size: TButtonSizes,
disabled: boolean = false disabled: boolean = false,
): string => { ): string => {
let _variant: string = ``; let _variant: string = ``;
const currentVariant = buttonStyling[variant]; const currentVariant = buttonStyling[variant];

8
packages/ui/src/dropdowns/custom-search-select.tsx
View File

@ -35,7 +35,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
const [referenceElement, setReferenceElement] = const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null); useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>( const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null null,
); );
const { styles, attributes } = usePopper(referenceElement, popperElement, { const { styles, attributes } = usePopper(referenceElement, popperElement, {
@ -46,7 +46,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
query === "" query === ""
? options ? options
: options?.filter((option) => : options?.filter((option) =>
option.query.toLowerCase().includes(query.toLowerCase()) option.query.toLowerCase().includes(query.toLowerCase()),
); );
const comboboxProps: any = { const comboboxProps: any = {
@ -87,8 +87,8 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
<button <button
ref={setReferenceElement} ref={setReferenceElement}
type="button" type="button"
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${ className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
} ${ } ${
disabled disabled
? "cursor-not-allowed text-custom-text-200" ? "cursor-not-allowed text-custom-text-200"

6
packages/ui/src/dropdowns/custom-select.tsx
View File

@ -30,7 +30,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
const [referenceElement, setReferenceElement] = const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null); useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>( const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null null,
); );
const { styles, attributes } = usePopper(referenceElement, popperElement, { const { styles, attributes } = usePopper(referenceElement, popperElement, {
@ -65,8 +65,8 @@ const CustomSelect = (props: ICustomSelectProps) => {
<button <button
ref={setReferenceElement} ref={setReferenceElement}
type="button" type="button"
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${ className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
} ${ } ${
disabled disabled
? "cursor-not-allowed text-custom-text-200" ? "cursor-not-allowed text-custom-text-200"

2
packages/ui/src/form-fields/index.ts
View File

@ -1,3 +1,3 @@
export * from "./input"; export * from "./input";
export * from "./textarea"; export * from "./textarea";
export * from "./input-color-picker" export * from "./input-color-picker";

4
packages/ui/src/form-fields/textarea.tsx
View File

@ -10,7 +10,7 @@ export interface TextAreaProps
// Updates the height of a <textarea> when the value changes. // Updates the height of a <textarea> when the value changes.
const useAutoSizeTextArea = ( const useAutoSizeTextArea = (
textAreaRef: HTMLTextAreaElement | null, textAreaRef: HTMLTextAreaElement | null,
value: any value: any,
) => { ) => {
React.useEffect(() => { React.useEffect(() => {
if (textAreaRef) { if (textAreaRef) {
@ -63,7 +63,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
{...rest} {...rest}
/> />
); );
} },
); );
export { TextArea }; export { TextArea };

2
packages/ui/src/progress/circular-progress-indicator.tsx
View File

@ -9,7 +9,7 @@ interface ICircularProgressIndicator {
} }
export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = ( export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
props props,
) => { ) => {
const { size = 40, percentage = 25, strokeWidth = 6, children } = props; const { size = 40, percentage = 25, strokeWidth = 6, children } = props;

1
space/components/issues/peek-overview/comment/add-comment.tsx
View File

@ -76,6 +76,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
handleSubmit(onSubmit)(e); handleSubmit(onSubmit)(e);
}); });
}} }}
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspace_slug as string)} uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
deleteFile={fileService.deleteImage} deleteFile={fileService.deleteImage}
ref={editorRef} ref={editorRef}

1
space/components/issues/peek-overview/comment/comment-detail-card.tsx
View File

@ -103,6 +103,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<LiteTextEditorWithRef <LiteTextEditorWithRef
onEnterKeyPress={handleSubmit(handleCommentUpdate)} onEnterKeyPress={handleSubmit(handleCommentUpdate)}
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)} uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage} deleteFile={fileService.deleteImage}
ref={editorRef} ref={editorRef}

15
space/components/issues/peek-overview/issue-details.tsx
View File

@ -9,7 +9,6 @@ type Props = {
}; };
export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => { export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
const mentionConfig = useEditorSuggestions(); const mentionConfig = useEditorSuggestions();
return ( return (
@ -20,15 +19,19 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
<h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4> <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
{issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && ( {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
<RichReadOnlyEditor <RichReadOnlyEditor
value={!issueDetails.description_html || value={
!issueDetails.description_html ||
issueDetails.description_html === "" || issueDetails.description_html === "" ||
(typeof issueDetails.description_html === "object" && (typeof issueDetails.description_html === "object" &&
Object.keys(issueDetails.description_html).length === 0) Object.keys(issueDetails.description_html).length === 0)
? "<p></p>" ? "<p></p>"
: issueDetails.description_html} : issueDetails.description_html
customClassName="p-3 min-h-[50px] shadow-sm" mentionHighlights={mentionConfig.mentionHighlights} /> }
customClassName="p-3 min-h-[50px] shadow-sm"
mentionHighlights={mentionConfig.mentionHighlights}
/>
)} )}
<IssueReactions /> <IssueReactions />
</div> </div>
) );
}; };

15
space/services/file.service.ts
View File

@ -1,5 +1,6 @@
import APIService from "services/api.service"; import APIService from "services/api.service";
import { API_BASE_URL } from "helpers/common.helper"; import { API_BASE_URL } from "helpers/common.helper";
import axios from "axios";
interface UnSplashImage { interface UnSplashImage {
id: string; id: string;
@ -26,25 +27,37 @@ interface UnSplashImageUrls {
} }
class FileService extends APIService { class FileService extends APIService {
private cancelSource: any;
constructor() { constructor() {
super(API_BASE_URL); super(API_BASE_URL);
this.uploadFile = this.uploadFile.bind(this); this.uploadFile = this.uploadFile.bind(this);
this.deleteImage = this.deleteImage.bind(this); this.deleteImage = this.deleteImage.bind(this);
this.cancelUpload = this.cancelUpload.bind(this);
} }
async uploadFile(workspaceSlug: string, file: FormData): Promise<any> { async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
this.cancelSource = axios.CancelToken.source();
return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, { return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
headers: { headers: {
...this.getHeaders(), ...this.getHeaders(),
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
cancelToken: this.cancelSource.token,
}) })
.then((response) => response?.data) .then((response) => response?.data)
.catch((error) => { .catch((error) => {
throw error?.response?.data; if (axios.isCancel(error)) {
console.log(error.message);
} else {
throw error?.response?.data;
}
}); });
} }
cancelUpload() {
this.cancelSource.cancel("Upload cancelled");
}
getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> { getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
return async (file: File) => { return async (file: File) => {
const formData = new FormData(); const formData = new FormData();

62
space/store/mentions.store.ts
View File

@ -3,43 +3,41 @@ import { RootStore } from "./root";
import { computed, makeObservable } from "mobx"; import { computed, makeObservable } from "mobx";
export interface IMentionsStore { export interface IMentionsStore {
// mentionSuggestions: IMentionSuggestion[]; // mentionSuggestions: IMentionSuggestion[];
mentionHighlights: IMentionHighlight[]; mentionHighlights: IMentionHighlight[];
} }
export class MentionsStore implements IMentionsStore{ export class MentionsStore implements IMentionsStore {
// root store
rootStore;
// root store constructor(_rootStore: RootStore) {
rootStore; // rootStore
this.rootStore = _rootStore;
constructor(_rootStore: RootStore ){ makeObservable(this, {
mentionHighlights: computed,
// mentionSuggestions: computed
});
}
// rootStore // get mentionSuggestions() {
this.rootStore = _rootStore; // const projectMembers = this.rootStore.project.project.
makeObservable(this, { // const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
mentionHighlights: computed, // id: member.member.id,
// mentionSuggestions: computed // type: "User",
}) // title: member.member.display_name,
} // subtitle: member.member.email ?? "",
// avatar: member.member.avatar,
// redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
// }))
// get mentionSuggestions() { // return suggestions
// const projectMembers = this.rootStore.project.project. // }
// const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({ get mentionHighlights() {
// id: member.member.id, const user = this.rootStore.user.currentUser;
// type: "User", return user ? [user.id] : [];
// title: member.member.display_name, }
// subtitle: member.member.email ?? "", }
// avatar: member.member.avatar,
// redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
// }))
// return suggestions
// }
get mentionHighlights() {
const user = this.rootStore.user.currentUser;
return user ? [user.id] : []
}
}

24
space/styles/table.css
View File

@ -92,7 +92,7 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.tableWrapper .tableControls .columnsControl > button { .tableWrapper .tableControls .columnsControl .columnsControlDiv {
color: white; color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
width: 30px; width: 30px;
@ -104,26 +104,42 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.tableWrapper .tableControls .rowsControl > button { .tableWrapper .tableControls .rowsControl .rowsControlDiv {
color: white; color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
height: 30px; height: 30px;
width: 15px; width: 15px;
} }
.tableWrapper .tableControls button { .tableWrapper .tableControls .rowsControlDiv {
background-color: rgba(var(--color-primary-100)); background-color: rgba(var(--color-primary-100));
border: 1px solid rgba(var(--color-border-200)); border: 1px solid rgba(var(--color-border-200));
border-radius: 2px; border-radius: 2px;
background-size: 1.25rem; background-size: 1.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: transform ease-out 100ms, background-color ease-out 100ms; transition:
transform ease-out 100ms,
background-color ease-out 100ms;
outline: none; outline: none;
box-shadow: #000 0px 2px 4px; box-shadow: #000 0px 2px 4px;
cursor: pointer; cursor: pointer;
} }
.tableWrapper .tableControls .columnsControlDiv {
background-color: rgba(var(--color-primary-100));
border: 1px solid rgba(var(--color-border-200));
border-radius: 2px;
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: center;
transition:
transform ease-out 100ms,
background-color ease-out 100ms;
outline: none;
box-shadow: #000 0px 2px 4px;
cursor: pointer;
}
.tableWrapper .tableControls .tableToolbox, .tableWrapper .tableControls .tableToolbox,
.tableWrapper .tableControls .tableColorPickerToolbox { .tableWrapper .tableControls .tableColorPickerToolbox {
border: 1px solid rgba(var(--color-border-300)); border: 1px solid rgba(var(--color-border-300));

3
web/components/account/github-login-button.tsx
View File

@ -32,8 +32,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
}, [code, gitCode, handleSignIn]); }, [code, gitCode, handleSignIn]);
useEffect(() => { useEffect(() => {
const origin = const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
setLoginCallBackURL(`${origin}/` as any); setLoginCallBackURL(`${origin}/` as any);
}, []); }, []);

5
web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
View File

@ -49,10 +49,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
: "" : ""
}`} }`}
> >
{params.segment === "assignees__id" {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
? renderAssigneeName(tooltipValue.toString())
: tooltipValue}
:
</span> </span>
<span>{datum.value}</span> <span>{datum.value}</span>
</div> </div>

1
web/components/analytics/custom-analytics/graph/index.tsx
View File

@ -114,6 +114,7 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
y={datum.y} y={datum.y}
textAnchor="end" textAnchor="end"
fontSize={10} fontSize={10}
fill="rgb(var(--color-text-200))"
className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`} className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`}
> >
{generateDisplayName(datum.value, analytics, params, "x_axis")} {generateDisplayName(datum.value, analytics, params, "x_axis")}

4
web/components/analytics/scope-and-demand/scope.tsx
View File

@ -22,9 +22,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
keys={["count"]} keys={["count"]}
height="250px" height="250px"
colors={() => `#f97316`} colors={() => `#f97316`}
customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
d.count > 0 ? d.count : 50
)}
tooltip={(datum) => { tooltip={(datum) => {
const assignee = defaultAnalytics.pending_issue_user.find( const assignee = defaultAnalytics.pending_issue_user.find(
(a) => a.assignees__id === `${datum.indexValue}` (a) => a.assignees__id === `${datum.indexValue}`

4
web/components/auth-screens/not-authorized-view.tsx
View File

@ -31,9 +31,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
alt="ProjectSettingImg" alt="ProjectSettingImg"
/> />
</div> </div>
<h1 className="text-xl font-medium text-custom-text-100"> <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
Oops! You are not authorized to view this page
</h1>
<div className="w-full max-w-md text-base text-custom-text-200"> <div className="w-full max-w-md text-base text-custom-text-200">
{user ? ( {user ? (

92
web/components/automation/auto-archive-automation.tsx
View File

@ -1,7 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// component // component
import { CustomSelect, ToggleSwitch } from "@plane/ui"; import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
import { SelectMonthModal } from "components/automation"; import { SelectMonthModal } from "components/automation";
// icon // icon
import { ArchiveRestore } from "lucide-react"; import { ArchiveRestore } from "lucide-react";
@ -11,15 +13,21 @@ import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
import { IProject } from "types"; import { IProject } from "types";
type Props = { type Props = {
projectDetails: IProject | undefined;
handleChange: (formData: Partial<IProject>) => Promise<void>; handleChange: (formData: Partial<IProject>) => Promise<void>;
disabled?: boolean;
}; };
export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => { const initialValues: Partial<IProject> = { archive_in: 1 };
export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
const { handleChange } = props;
// states
const [monthModal, setmonthModal] = useState(false); const [monthModal, setmonthModal] = useState(false);
const initialValues: Partial<IProject> = { archive_in: 1 }; const { user: userStore, project: projectStore } = useMobxStore();
const projectDetails = projectStore.currentProjectDetails;
const userRole = userStore.currentProjectRole;
return ( return (
<> <>
<SelectMonthModal <SelectMonthModal
@ -48,46 +56,52 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 }) projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
} }
size="sm" size="sm"
disabled={disabled} disabled={userRole !== 20}
/> />
</div> </div>
{projectDetails?.archive_in !== 0 && ( {projectDetails ? (
<div className="ml-12"> projectDetails.archive_in !== 0 && (
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border-[0.5px] border-custom-border-200 gap-2 w-full"> <div className="ml-12">
<div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div> <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
<div className="w-1/2"> <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
<CustomSelect <div className="w-1/2">
value={projectDetails?.archive_in} <CustomSelect
label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`} value={projectDetails?.archive_in}
onChange={(val: number) => { label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`}
handleChange({ archive_in: val }); onChange={(val: number) => {
}} handleChange({ archive_in: val });
input }}
width="w-full" input
disabled={disabled} width="w-full"
> disabled={userRole !== 20}
<> >
{PROJECT_AUTOMATION_MONTHS.map((month) => ( <>
<CustomSelect.Option key={month.label} value={month.value}> {PROJECT_AUTOMATION_MONTHS.map((month) => (
<span className="text-sm">{month.label}</span> <CustomSelect.Option key={month.label} value={month.value}>
</CustomSelect.Option> <span className="text-sm">{month.label}</span>
))} </CustomSelect.Option>
))}
<button <button
type="button" type="button"
className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80" className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
onClick={() => setmonthModal(true)} onClick={() => setmonthModal(true)}
> >
Customise Time Range Customise Time Range
</button> </button>
</> </>
</CustomSelect> </CustomSelect>
</div>
</div> </div>
</div> </div>
</div> )
) : (
<Loader className="ml-12">
<Loader.Item height="50px" />
</Loader>
)} )}
</div> </div>
</> </>
); );
}; });

195
web/components/automation/auto-close-automation.tsx
View File

@ -1,42 +1,32 @@
import React, { useState } from "react"; import React, { useState } from "react";
import useSWR from "swr"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; // mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// component // component
import { SelectMonthModal } from "components/automation"; import { SelectMonthModal } from "components/automation";
import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui"; import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
// icons // icons
import { ArchiveX } from "lucide-react"; import { ArchiveX } from "lucide-react";
// services
import { ProjectStateService } from "services/project";
// constants
import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
import { STATES_LIST } from "constants/fetch-keys";
// types // types
import { IProject } from "types"; import { IProject } from "types";
// helper // fetch keys
import { getStatesList } from "helpers/state.helper"; import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
type Props = { type Props = {
projectDetails: IProject | undefined;
handleChange: (formData: Partial<IProject>) => Promise<void>; handleChange: (formData: Partial<IProject>) => Promise<void>;
disabled?: boolean;
}; };
const projectStateService = new ProjectStateService(); export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
const { handleChange } = props;
export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => { // states
const [monthModal, setmonthModal] = useState(false); const [monthModal, setmonthModal] = useState(false);
const router = useRouter(); const { user: userStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
const { workspaceSlug, projectId } = router.query;
const { data: stateGroups } = useSWR( const userRole = userStore.currentProjectRole;
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null, const projectDetails = projectStore.currentProjectDetails;
workspaceSlug && projectId // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
? () => projectStateService.getStates(workspaceSlug as string, projectId as string) const states = projectStateStore.projectStates;
: null
);
const states = getStatesList(stateGroups);
const options = states const options = states
?.filter((state) => state.group === "cancelled") ?.filter((state) => state.group === "cancelled")
@ -53,7 +43,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
const multipleOptions = (options ?? []).length > 1; const multipleOptions = (options ?? []).length > 1;
const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null; const defaultState = states?.find((s) => s.group === "cancelled")?.id || null;
const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState); const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
const currentDefaultState = states?.find((s) => s.id === defaultState); const currentDefaultState = states?.find((s) => s.id === defaultState);
@ -72,8 +62,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
handleClose={() => setmonthModal(false)} handleClose={() => setmonthModal(false)}
handleChange={handleChange} handleChange={handleChange}
/> />
<div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
<div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90"> <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@ -82,7 +71,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
<div className=""> <div className="">
<h4 className="text-sm font-medium">Auto-close issues</h4> <h4 className="text-sm font-medium">Auto-close issues</h4>
<p className="text-sm text-custom-text-200 tracking-tight"> <p className="text-sm text-custom-text-200 tracking-tight">
Plane will automatically close issue that haven’t been completed or cancelled. Plane will automatically close issue that haven{"'"}t been completed or cancelled.
</p> </p>
</div> </div>
</div> </div>
@ -94,87 +83,93 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
: handleChange({ close_in: 0, default_state: null }) : handleChange({ close_in: 0, default_state: null })
} }
size="sm" size="sm"
disabled={disabled} disabled={userRole !== 20}
/> />
</div> </div>
{projectDetails?.close_in !== 0 && ( {projectDetails ? (
<div className="ml-12"> projectDetails.close_in !== 0 && (
<div className="flex flex-col rounded bg-custom-background-90 border-[0.5px] border-custom-border-200 p-2"> <div className="ml-12">
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full"> <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200">
<div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div> <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
<div className="w-1/2"> <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
<CustomSelect <div className="w-1/2">
value={projectDetails?.close_in} <CustomSelect
label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`} value={projectDetails?.close_in}
onChange={(val: number) => { label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`}
handleChange({ close_in: val }); onChange={(val: number) => {
}} handleChange({ close_in: val });
input }}
width="w-full" input
disabled={disabled} width="w-full"
> disabled={userRole !== 20}
<> >
{PROJECT_AUTOMATION_MONTHS.map((month) => ( <>
<CustomSelect.Option key={month.label} value={month.value}> {PROJECT_AUTOMATION_MONTHS.map((month) => (
{month.label} <CustomSelect.Option key={month.label} value={month.value}>
</CustomSelect.Option> {month.label}
))} </CustomSelect.Option>
<button ))}
type="button" <button
className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80" type="button"
onClick={() => setmonthModal(true)} className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
> onClick={() => setmonthModal(true)}
Customise Time Range >
</button> Customise Time Range
</> </button>
</CustomSelect> </>
</CustomSelect>
</div>
</div> </div>
</div>
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full"> <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
<div className="w-1/2 text-sm font-medium">Auto-close Status</div> <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
<div className="w-1/2 "> <div className="w-1/2 ">
<CustomSearchSelect <CustomSearchSelect
value={projectDetails?.default_state ? projectDetails?.default_state : defaultState} value={projectDetails?.default_state ?? defaultState}
label={ label={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{selectedOption ? ( {selectedOption ? (
<StateGroupIcon <StateGroupIcon
stateGroup={selectedOption.group} stateGroup={selectedOption.group}
color={selectedOption.color} color={selectedOption.color}
height="16px" height="16px"
width="16px" width="16px"
/> />
) : currentDefaultState ? ( ) : currentDefaultState ? (
<StateGroupIcon <StateGroupIcon
stateGroup={currentDefaultState.group} stateGroup={currentDefaultState.group}
color={currentDefaultState.color} color={currentDefaultState.color}
height="16px" height="16px"
width="16px" width="16px"
/> />
) : ( ) : (
<DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" /> <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
)} )}
{selectedOption?.name {selectedOption?.name
? selectedOption.name ? selectedOption.name
: currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>} : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
</div> </div>
} }
onChange={(val: string) => { onChange={(val: string) => {
handleChange({ default_state: val }); handleChange({ default_state: val });
}} }}
options={options} options={options}
disabled={!multipleOptions} disabled={!multipleOptions}
width="w-full" width="w-full"
input input
/> />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )
) : (
<Loader className="ml-12">
<Loader.Item height="50px" />
</Loader>
)} )}
</div> </div>
</> </>
); );
}; });

55
web/components/command-palette/command-modal.tsx
View File

@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
import { import {
FileText, FileText,
FolderPlus, FolderPlus,
@ -16,12 +17,13 @@ import {
UserMinus2, UserMinus2,
UserPlus2, UserPlus2,
} from "lucide-react"; } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services // services
import { WorkspaceService } from "services/workspace.service"; import { WorkspaceService } from "services/workspace.service";
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
// hooks // hooks
import useDebounce from "hooks/use-debounce"; import useDebounce from "hooks/use-debounce";
import useUser from "hooks/use-user";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // components
import { import {
@ -61,11 +63,8 @@ type Props = {
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
const issueService = new IssueService(); const issueService = new IssueService();
export const CommandModal: React.FC<Props> = (props) => { export const CommandModal: React.FC<Props> = observer((props) => {
const { deleteIssue, isPaletteOpen, closePalette } = props; const { deleteIssue, isPaletteOpen, closePalette } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
// states // states
const [placeholder, setPlaceholder] = useState("Type a command or search..."); const [placeholder, setPlaceholder] = useState("Type a command or search...");
const [resultsCount, setResultsCount] = useState(0); const [resultsCount, setResultsCount] = useState(0);
@ -86,14 +85,19 @@ export const CommandModal: React.FC<Props> = (props) => {
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false); const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
const [pages, setPages] = useState<string[]>([]); const [pages, setPages] = useState<string[]>([]);
const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
const user = userStore.currentUser ?? undefined;
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
const page = pages[pages.length - 1]; const page = pages[pages.length - 1];
const debouncedSearchTerm = useDebounce(searchTerm, 500); const debouncedSearchTerm = useDebounce(searchTerm, 500);
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { user } = useUser();
const { data: issueDetails } = useSWR( const { data: issueDetails } = useSWR(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
workspaceSlug && projectId && issueId workspaceSlug && projectId && issueId
@ -468,10 +472,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreateIssueModal(true);
key: "c",
});
document.dispatchEvent(e);
}} }}
className="focus:bg-custom-background-80" className="focus:bg-custom-background-80"
> >
@ -488,10 +489,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreateProjectModal(true);
key: "p",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -510,10 +508,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreateCycleModal(true);
key: "q",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -528,10 +523,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreateModuleModal(true);
key: "m",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -546,10 +538,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreateViewModal(true);
key: "v",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -564,10 +553,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleCreatePageModal(true);
key: "d",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -621,10 +607,7 @@ export const CommandModal: React.FC<Props> = (props) => {
<Command.Item <Command.Item
onSelect={() => { onSelect={() => {
closePalette(); closePalette();
const e = new KeyboardEvent("keydown", { commandPaletteStore.toggleShortcutModal(true);
key: "h",
});
document.dispatchEvent(e);
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
@ -762,4 +745,4 @@ export const CommandModal: React.FC<Props> = (props) => {
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
}; });

12
web/components/command-palette/issue/change-issue-state.tsx
View File

@ -1,9 +1,6 @@
import React, { Dispatch, SetStateAction, useCallback } from "react"; import React, { Dispatch, SetStateAction, useCallback } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// cmdk // cmdk
import { Command } from "cmdk"; import { Command } from "cmdk";
// services // services
@ -13,8 +10,6 @@ import { ProjectStateService } from "services/project";
import { Spinner, StateGroupIcon } from "@plane/ui"; import { Spinner, StateGroupIcon } from "@plane/ui";
// icons // icons
import { Check } from "lucide-react"; import { Check } from "lucide-react";
// helpers
import { getStatesList } from "helpers/state.helper";
// types // types
import { IUser, IIssue } from "types"; import { IUser, IIssue } from "types";
// fetch keys // fetch keys
@ -34,11 +29,10 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query; const { workspaceSlug, projectId, issueId } = router.query;
const { data: stateGroups, mutate: mutateIssueDetails } = useSWR( const { data: states, mutate: mutateStates } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null, workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
); );
const states = getStatesList(stateGroups);
const submitChanges = useCallback( const submitChanges = useCallback(
async (formData: Partial<IIssue>) => { async (formData: Partial<IIssue>) => {
@ -60,14 +54,14 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
await issueService await issueService
.patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user) .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
.then(() => { .then(() => {
mutateIssueDetails(); mutateStates();
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
}) })
.catch((e) => { .catch((e) => {
console.error(e); console.error(e);
}); });
}, },
[workspaceSlug, issueId, projectId, mutateIssueDetails, user] [workspaceSlug, issueId, projectId, mutateStates, user]
); );
const handleIssueState = (stateId: string) => { const handleIssueState = (stateId: string) => {

3
web/components/core/sidebar/progress-chart.tsx
View File

@ -57,8 +57,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
const interval = Math.ceil(totalDates / maxDates); const interval = Math.ceil(totalDates / maxDates);
const limitedDates = []; const limitedDates = [];
for (let i = 0; i < totalDates; i += interval) for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderShortNumericDateFormat(dates[i]));
limitedDates.push(renderShortNumericDateFormat(dates[i]));
if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1]))) if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1])))
limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1])); limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1]));

18
web/components/cycles/active-cycle-details.tsx
View File

@ -1,10 +1,12 @@
import { MouseEvent } from "react"; import { MouseEvent } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr"; import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { SingleProgressStats } from "components/core"; import { SingleProgressStats } from "components/core";
import { import {
@ -25,7 +27,6 @@ import { ActiveCycleProgressStats } from "components/cycles";
import { ViewIssueLabel } from "components/issues"; import { ViewIssueLabel } from "components/issues";
// icons // icons
import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react"; import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
@ -65,12 +66,12 @@ interface IActiveCycleDetails {
projectId: string; projectId: string;
} }
export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => { export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = props; const { workspaceSlug, projectId } = props;
const { cycle: cycleStore } = useMobxStore(); const { cycle: cycleStore, commandPalette: commandPaletteStore } = useMobxStore();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
@ -117,12 +118,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
<button <button
type="button" type="button"
className="text-custom-primary-100 text-sm outline-none" className="text-custom-primary-100 text-sm outline-none"
onClick={() => { onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
const e = new KeyboardEvent("keydown", {
key: "q",
});
document.dispatchEvent(e);
}}
> >
Create a new cycle Create a new cycle
</button> </button>
@ -485,4 +481,4 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
</div> </div>
</div> </div>
); );
}; });

2
web/components/cycles/cycle-peek-overview.tsx
View File

@ -41,7 +41,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
{peekCycle && ( {peekCycle && (
<div <div
ref={ref} ref={ref}
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0" className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
style={{ style={{
boxShadow: boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

20
web/components/cycles/cycles-board.tsx
View File

@ -1,8 +1,11 @@
import { FC } from "react"; import { FC } from "react";
// types import { observer } from "mobx-react-lite";
import { ICycle } from "types"; // mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { CyclePeekOverview, CyclesBoardCard } from "components/cycles"; import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
// types
import { ICycle } from "types";
export interface ICyclesBoard { export interface ICyclesBoard {
cycles: ICycle[]; cycles: ICycle[];
@ -12,9 +15,11 @@ export interface ICyclesBoard {
peekCycle: string; peekCycle: string;
} }
export const CyclesBoard: FC<ICyclesBoard> = (props) => { export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
const { cycles, filter, workspaceSlug, projectId, peekCycle } = props; const { cycles, filter, workspaceSlug, projectId, peekCycle } = props;
const { commandPalette: commandPaletteStore } = useMobxStore();
return ( return (
<> <>
{cycles.length > 0 ? ( {cycles.length > 0 ? (
@ -53,12 +58,7 @@ export const CyclesBoard: FC<ICyclesBoard> = (props) => {
<button <button
type="button" type="button"
className="text-custom-primary-100 text-sm outline-none" className="text-custom-primary-100 text-sm outline-none"
onClick={() => { onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
const e = new KeyboardEvent("keydown", {
key: "q",
});
document.dispatchEvent(e);
}}
> >
Create a new cycle Create a new cycle
</button> </button>
@ -67,4 +67,4 @@ export const CyclesBoard: FC<ICyclesBoard> = (props) => {
)} )}
</> </>
); );
}; });

4
web/components/cycles/cycles-list-item.tsx
View File

@ -231,7 +231,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
</button> </button>
)} )}
<CustomMenu width="auto" ellipsis className="z-10"> <CustomMenu width="auto" ellipsis>
{!isCompleted && ( {!isCompleted && (
<> <>
<CustomMenu.MenuItem onClick={handleEditCycle}> <CustomMenu.MenuItem onClick={handleEditCycle}>
@ -243,7 +243,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
<CustomMenu.MenuItem onClick={handleDeleteCycle}> <CustomMenu.MenuItem onClick={handleDeleteCycle}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
<span>Delete module</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</> </>

17
web/components/cycles/cycles-list.tsx
View File

@ -1,7 +1,9 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { CyclePeekOverview, CyclesListItem } from "components/cycles"; import { CyclePeekOverview, CyclesListItem } from "components/cycles";
// ui // ui
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// types // types
@ -14,9 +16,11 @@ export interface ICyclesList {
projectId: string; projectId: string;
} }
export const CyclesList: FC<ICyclesList> = (props) => { export const CyclesList: FC<ICyclesList> = observer((props) => {
const { cycles, filter, workspaceSlug, projectId } = props; const { cycles, filter, workspaceSlug, projectId } = props;
const { commandPalette: commandPaletteStore } = useMobxStore();
return ( return (
<> <>
{cycles ? ( {cycles ? (
@ -53,12 +57,7 @@ export const CyclesList: FC<ICyclesList> = (props) => {
<button <button
type="button" type="button"
className="text-custom-primary-100 text-sm outline-none" className="text-custom-primary-100 text-sm outline-none"
onClick={() => { onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
const e = new KeyboardEvent("keydown", {
key: "q",
});
document.dispatchEvent(e);
}}
> >
Create a new cycle Create a new cycle
</button> </button>
@ -75,4 +74,4 @@ export const CyclesList: FC<ICyclesList> = (props) => {
)} )}
</> </>
); );
}; });

2
web/components/cycles/form.tsx
View File

@ -135,7 +135,7 @@ export const CycleForm: React.FC<Props> = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 "> <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-100 ">
<Button variant="neutral-primary" onClick={handleClose}> <Button variant="neutral-primary" onClick={handleClose}>
Cancel Cancel
</Button> </Button>

6
web/components/cycles/sidebar.tsx
View File

@ -317,11 +317,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<LinkIcon className="h-3 w-3 text-custom-text-300" /> <LinkIcon className="h-3 w-3 text-custom-text-300" />
</button> </button>
{!isCompleted && ( {!isCompleted && (
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" placement="bottom-end" ellipsis>
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-3 w-3" />
<span>Delete</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>

16
web/components/gantt-chart/chart/month.tsx
View File

@ -34,16 +34,8 @@ export const MonthChartView: FC<any> = () => {
style={{ width: `${currentViewData?.data.width}px` }} style={{ width: `${currentViewData?.data.width}px` }}
> >
<div className="text-xs space-x-1"> <div className="text-xs space-x-1">
<span className="text-custom-text-200"> <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
{monthDay.dayData.shortTitle[0]} <span className={monthDay.today ? "bg-custom-primary-100 text-white px-1 rounded-full" : ""}>
</span>{" "}
<span
className={
monthDay.today
? "bg-custom-primary-100 text-white px-1 rounded-full"
: ""
}
>
{monthDay.day} {monthDay.day}
</span> </span>
</div> </div>
@ -63,9 +55,7 @@ export const MonthChartView: FC<any> = () => {
> >
<div <div
className={`relative h-full w-full flex-1 flex justify-center ${ className={`relative h-full w-full flex-1 flex justify-center ${
["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
? `bg-custom-background-90`
: ``
}`} }`}
> >
{/* {monthDay?.today && ( {/* {monthDay?.today && (

11
web/components/gantt-chart/data/index.ts
View File

@ -27,8 +27,7 @@ export const months: WeekMonthDataType[] = [
{ key: 11, shortTitle: "dec", title: "december" }, { key: 11, shortTitle: "dec", title: "december" },
]; ];
export const charCapitalize = (word: string) => export const charCapitalize = (word: string) => `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
`${word.charAt(0).toUpperCase()}${word.substring(1)}`;
export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`); export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);
@ -50,9 +49,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
month = months[month as number] as WeekMonthDataType; month = months[month as number] as WeekMonthDataType;
const year = date.getFullYear(); const year = date.getFullYear();
return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${ return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
includeTime ? `, ${timePreview(date)}` : ``
}`;
}; };
// context data // context data
@ -137,8 +134,6 @@ export const allViewsWithData: ChartDataType[] = [
]; ];
export const currentViewDataWithView = (view: string = "month") => { export const currentViewDataWithView = (view: string = "month") => {
const currentView: ChartDataType | undefined = allViewsWithData.find( const currentView: ChartDataType | undefined = allViewsWithData.find((_viewData) => _viewData.key === view);
(_viewData) => _viewData.key === view
);
return currentView; return currentView;
}; };

47
web/components/gantt-chart/views/bi-week-view.ts
View File

@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
// data // data
import { weeks, months } from "../data"; import { weeks, months } from "../data";
// helpers // helpers
import { import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
generateDate,
getWeekNumberByDate,
getNumberOfDaysInMonth,
getDatesBetweenTwoDates,
} from "./helpers";
type GetAllDaysInMonthInMonthViewType = { type GetAllDaysInMonthInMonthViewType = {
date: any; date: any;
@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`, title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
active: false, active: false,
today: today:
currentDate.getFullYear() === year && currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
currentDate.getMonth() === month &&
currentDate.getDate() === _day + 1
? true ? true
: false, : false,
}); });
@ -72,16 +65,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
if (side === null) { if (side === null) {
const currentDate = renderState.data.currentDate; const currentDate = renderState.data.currentDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -96,16 +81,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
} else if (side === "left") { } else if (side === "left") {
const currentDate = renderState.data.startDate; const currentDate = renderState.data.startDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -116,16 +93,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
} else if (side === "right") { } else if (side === "right") {
const currentDate = renderState.data.endDate; const currentDate = renderState.data.endDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() + 1,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

54
web/components/gantt-chart/views/day-view.ts
View File

@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000; const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
const weekStart = new Date(firstWeekStart); const weekStart = new Date(firstWeekStart);
const weekNumber = const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
return weekNumber; return weekNumber;
}; };
@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
return date.getDate(); return date.getDate();
}; };
export const generateDate = (day: number, month: number, year: number) => export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
new Date(year, month, day);
export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => { export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
const months = []; const months = [];
@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
months.push(new Date(currentYear, currentMonth)); months.push(new Date(currentYear, currentMonth));
currentDate.setMonth(currentDate.getMonth() + 1); currentDate.setMonth(currentDate.getMonth() + 1);
} }
if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
months.push(endDate);
return months; return months;
}; };
@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
weekNumber: getWeekNumberByDate(date), weekNumber: getWeekNumberByDate(date),
title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`, title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
today: today:
currentDate.getFullYear() === year && currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
currentDate.getMonth() === month &&
currentDate.getDate() === _day + 1
? true ? true
: false, : false,
}); });
@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
return monthPayload; return monthPayload;
}; };
export const generateMonthDataByYear = ( export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
monthPayload: ChartDataType,
side: null | "left" | "right"
) => {
let renderState = monthPayload; let renderState = monthPayload;
const renderPayload: any = []; const renderPayload: any = [];
@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
if (side === null) { if (side === null) {
const currentDate = renderState.data.currentDate; const currentDate = renderState.data.currentDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
} else if (side === "left") { } else if (side === "left") {
const currentDate = renderState.data.startDate; const currentDate = renderState.data.startDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
} else if (side === "right") { } else if (side === "right") {
const currentDate = renderState.data.endDate; const currentDate = renderState.data.endDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() + 1,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

9
web/components/gantt-chart/views/helpers.ts
View File

@ -1,6 +1,5 @@
// Generating the date by using the year, month, and day // Generating the date by using the year, month, and day
export const generateDate = (day: number, month: number, year: number) => export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
new Date(year, month, day);
// Getting the number of days in a month // Getting the number of days in a month
export const getNumberOfDaysInMonth = (month: number, year: number) => { export const getNumberOfDaysInMonth = (month: number, year: number) => {
@ -20,8 +19,7 @@ export const getWeekNumberByDate = (date: Date) => {
const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000; const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
const weekStart = new Date(firstWeekStart); const weekStart = new Date(firstWeekStart);
const weekNumber = const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
return weekNumber; return weekNumber;
}; };
@ -86,8 +84,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
dates.push(new Date(currentYear, currentMonth)); dates.push(new Date(currentYear, currentMonth));
currentDate.setMonth(currentDate.getMonth() + 1); currentDate.setMonth(currentDate.getMonth() + 1);
} }
if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) dates.push(endDate);
dates.push(endDate);
return dates; return dates;
}; };

54
web/components/gantt-chart/views/hours-view.ts
View File

@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000; const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
const weekStart = new Date(firstWeekStart); const weekStart = new Date(firstWeekStart);
const weekNumber = const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
return weekNumber; return weekNumber;
}; };
@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
return date.getDate(); return date.getDate();
}; };
export const generateDate = (day: number, month: number, year: number) => export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
new Date(year, month, day);
export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => { export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
const months = []; const months = [];
@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
months.push(new Date(currentYear, currentMonth)); months.push(new Date(currentYear, currentMonth));
currentDate.setMonth(currentDate.getMonth() + 1); currentDate.setMonth(currentDate.getMonth() + 1);
} }
if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
months.push(endDate);
return months; return months;
}; };
@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
weekNumber: getWeekNumberByDate(date), weekNumber: getWeekNumberByDate(date),
title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`, title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
today: today:
currentDate.getFullYear() === year && currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
currentDate.getMonth() === month &&
currentDate.getDate() === _day + 1
? true ? true
: false, : false,
}); });
@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
return monthPayload; return monthPayload;
}; };
export const generateMonthDataByYear = ( export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
monthPayload: ChartDataType,
side: null | "left" | "right"
) => {
let renderState = monthPayload; let renderState = monthPayload;
const renderPayload: any = []; const renderPayload: any = [];
@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
if (side === null) { if (side === null) {
const currentDate = renderState.data.currentDate; const currentDate = renderState.data.currentDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
} else if (side === "left") { } else if (side === "left") {
const currentDate = renderState.data.startDate; const currentDate = renderState.data.startDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
} else if (side === "right") { } else if (side === "right") {
const currentDate = renderState.data.endDate; const currentDate = renderState.data.endDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() + 1,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

60
web/components/gantt-chart/views/month-view.ts
View File

@ -3,12 +3,7 @@ import { ChartDataType, IGanttBlock } from "../types";
// data // data
import { weeks, months } from "../data"; import { weeks, months } from "../data";
// helpers // helpers
import { import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
generateDate,
getWeekNumberByDate,
getNumberOfDaysInMonth,
getDatesBetweenTwoDates,
} from "./helpers";
type GetAllDaysInMonthInMonthViewType = { type GetAllDaysInMonthInMonthViewType = {
date: any; date: any;
@ -62,9 +57,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number): IMonthChild[
title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`, title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
active: false, active: false,
today: today:
currentDate.getFullYear() === year && currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
currentDate.getMonth() === month &&
currentDate.getDate() === _day + 1
? true ? true
: false, : false,
}); });
@ -100,16 +93,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
if (side === null) { if (side === null) {
const currentDate = renderState.data.currentDate; const currentDate = renderState.data.currentDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -124,16 +109,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
} else if (side === "left") { } else if (side === "left") {
const currentDate = renderState.data.startDate; const currentDate = renderState.data.startDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -144,16 +121,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
} else if (side === "right") { } else if (side === "right") {
const currentDate = renderState.data.endDate; const currentDate = renderState.data.endDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() + 1,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -191,10 +160,7 @@ export const getNumberOfDaysBetweenTwoDatesInMonth = (startDate: Date, endDate:
}; };
// calc item scroll position and width // calc item scroll position and width
export const getMonthChartItemPositionWidthInMonth = ( export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType, itemData: IGanttBlock) => {
chartData: ChartDataType,
itemData: IGanttBlock
) => {
let scrollPosition: number = 0; let scrollPosition: number = 0;
let scrollWidth: number = 0; let scrollWidth: number = 0;
@ -207,9 +173,7 @@ export const getMonthChartItemPositionWidthInMonth = (
// position code starts // position code starts
const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime(); const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
const positionDaysDifference: number = Math.abs( const positionDaysDifference: number = Math.abs(Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24)));
Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
);
scrollPosition = positionDaysDifference * chartData.data.width; scrollPosition = positionDaysDifference * chartData.data.width;
var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12; var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
@ -221,9 +185,7 @@ export const getMonthChartItemPositionWidthInMonth = (
// width code starts // width code starts
const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime(); const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
const widthDaysDifference: number = Math.abs( const widthDaysDifference: number = Math.abs(Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24)));
Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
);
scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1; scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
// width code ends // width code ends

5
web/components/gantt-chart/views/quater-view.ts
View File

@ -36,10 +36,7 @@ const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number)
return weekPayload; return weekPayload;
}; };
export const generateQuarterChart = ( export const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" | "right") => {
quarterPayload: ChartDataType,
side: null | "left" | "right"
) => {
let renderState = quarterPayload; let renderState = quarterPayload;
const renderPayload: any = []; const renderPayload: any = [];

47
web/components/gantt-chart/views/week-view.ts
View File

@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
// data // data
import { weeks, months } from "../data"; import { weeks, months } from "../data";
// helpers // helpers
import { import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
generateDate,
getWeekNumberByDate,
getNumberOfDaysInMonth,
getDatesBetweenTwoDates,
} from "./helpers";
type GetAllDaysInMonthInMonthViewType = { type GetAllDaysInMonthInMonthViewType = {
date: any; date: any;
@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`, title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
active: false, active: false,
today: today:
currentDate.getFullYear() === year && currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
currentDate.getMonth() === month &&
currentDate.getDate() === _day + 1
? true ? true
: false, : false,
}); });
@ -72,16 +65,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
if (side === null) { if (side === null) {
const currentDate = renderState.data.currentDate; const currentDate = renderState.data.currentDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -96,16 +81,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
} else if (side === "left") { } else if (side === "left") {
const currentDate = renderState.data.startDate; const currentDate = renderState.data.startDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
currentDate.getMonth() - range,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
@ -116,16 +93,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
} else if (side === "right") { } else if (side === "right") {
const currentDate = renderState.data.endDate; const currentDate = renderState.data.endDate;
minusDate = new Date( minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
currentDate.getFullYear(), plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
currentDate.getMonth() + 1,
currentDate.getDate()
);
plusDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + range,
currentDate.getDate()
);
if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate); if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

17
web/components/headers/cycle-issues.tsx
View File

@ -31,6 +31,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
cycle: cycleStore, cycle: cycleStore,
cycleIssueFilter: cycleIssueFilterStore, cycleIssueFilter: cycleIssueFilterStore,
project: projectStore, project: projectStore,
projectState: projectStateStore,
commandPalette: commandPaletteStore,
} = useMobxStore(); } = useMobxStore();
const { currentProjectDetails } = projectStore; const { currentProjectDetails } = projectStore;
@ -139,7 +141,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
type="component" type="component"
component={ component={
<CustomMenu <CustomMenu
placement="bottom-start"
label={ label={
<> <>
<ContrastIcon className="h-3 w-3" /> <ContrastIcon className="h-3 w-3" />
@ -148,6 +149,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
} }
className="ml-1.5 flex-shrink-0" className="ml-1.5 flex-shrink-0"
width="auto" width="auto"
placement="bottom-start"
> >
{cyclesList?.map((cycle) => ( {cyclesList?.map((cycle) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
@ -177,7 +179,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
} }
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined} labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)} members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined} states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/> />
</FiltersDropdown> </FiltersDropdown>
<FiltersDropdown title="Display" placement="bottom-end"> <FiltersDropdown title="Display" placement="bottom-end">
@ -194,16 +196,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm"> <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics Analytics
</Button> </Button>
<Button <Button onClick={() => commandPaletteStore.toggleCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue Add Issue
</Button> </Button>
<button <button

19
web/components/headers/cycles.tsx
View File

@ -1,22 +1,20 @@
import { FC } from "react"; import { FC } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui"; import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
// helpers // helpers
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
export interface ICyclesHeader {} export const CyclesHeader: FC = observer(() => {
export const CyclesHeader: FC<ICyclesHeader> = (props) => {
const {} = props;
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// store // store
const { project: projectStore } = useMobxStore(); const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
const { currentProjectDetails } = projectStore; const { currentProjectDetails } = projectStore;
return ( return (
@ -54,14 +52,11 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
<Button <Button
variant="primary" variant="primary"
prependIcon={<Plus />} prependIcon={<Plus />}
onClick={() => { onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
const e = new KeyboardEvent("keydown", { key: "q" });
document.dispatchEvent(e);
}}
> >
Add Cycle Add Cycle
</Button> </Button>
</div> </div>
</div> </div>
); );
}; });

3
web/components/headers/global-issues.tsx
View File

@ -41,6 +41,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
globalViewFilters: globalViewFiltersStore, globalViewFilters: globalViewFiltersStore,
workspaceFilter: workspaceFilterStore, workspaceFilter: workspaceFilterStore,
workspace: workspaceStore, workspace: workspaceStore,
workspaceMember: { workspaceMembers },
project: projectStore, project: projectStore,
} = useMobxStore(); } = useMobxStore();
@ -145,7 +146,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
handleFiltersUpdate={handleFiltersUpdate} handleFiltersUpdate={handleFiltersUpdate}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet} layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
labels={workspaceStore.workspaceLabels ?? undefined} labels={workspaceStore.workspaceLabels ?? undefined}
members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined} members={workspaceMembers?.map((m) => m.member) ?? undefined}
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined} projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
/> />
</FiltersDropdown> </FiltersDropdown>

Some files were not shown because too many files have changed in this diff Show More