diff --git a/packages/editor/document-editor/src/ui/components/heading-component.tsx b/packages/editor/document-editor/src/ui/components/heading-component.tsx
index d8ceea8f9..ce3489418 100644
--- a/packages/editor/document-editor/src/ui/components/heading-component.tsx
+++ b/packages/editor/document-editor/src/ui/components/heading-component.tsx
@@ -23,7 +23,7 @@ export const SubheadingComp = ({
}) => (
{subHeading}
@@ -39,7 +39,7 @@ export const HeadingThreeComp = ({
}) => (
{heading}
diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx
index 41d131afb..0d650667e 100644
--- a/packages/editor/document-editor/src/ui/components/info-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx
@@ -19,10 +19,7 @@ const renderDate = (date: Date): string => {
hour12: true,
};
- const formattedDate: string = new Intl.DateTimeFormat(
- "en-US",
- options,
- ).format(date);
+ const formattedDate: string = new Intl.DateTimeFormat("en-US", options).format(date);
return formattedDate;
};
@@ -32,42 +29,35 @@ export const InfoPopover: React.FC = (props) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
- const [referenceElement, setReferenceElement] =
- useState(null);
- const [popperElement, setPopperElement] = useState(
- null,
- );
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
- const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } =
- usePopper(referenceElement, popperElement, {
- placement: "bottom-start",
- });
+ const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
+ placement: "bottom-start",
+ });
return (
- setIsPopoverOpen(true)}
- onMouseLeave={() => setIsPopoverOpen(false)}
- >
+
setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
{isPopoverOpen && (
-
Last updated on
-
+ Last updated on
+
-
Created on
-
+ Created on
+
diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
index 198a03b64..d25e9ca43 100644
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -25,14 +25,7 @@ const debounce = (func: (...args: any[]) => void, wait: number) => {
};
export const PageRenderer = (props: IPageRenderer) => {
- const {
- documentDetails,
- editor,
- editorClassNames,
- editorContentCustomClassNames,
- updatePageTitle,
- readonly,
- } = props;
+ const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
const [pageTitle, setPagetitle] = useState(documentDetails.title);
@@ -44,27 +37,24 @@ export const PageRenderer = (props: IPageRenderer) => {
};
return (
-
+
{!readonly ? (
handlePageTitleChange(e.target.value)}
- className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none"
+ className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
value={pageTitle}
/>
) : (
handlePageTitleChange(e.target.value)}
- className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none overflow-x-clip"
+ className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
value={pageTitle}
disabled
/>
)}
-
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 67054212d..61361c049 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -17,26 +17,24 @@ type Props = {
export const SummaryPopover: React.FC
= (props) => {
const { editor, markings, sidePeekVisible, setSidePeekVisible } = props;
- const [referenceElement, setReferenceElement] =
- useState(null);
- const [popperElement, setPopperElement] = useState(
- null,
- );
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
- const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } =
- usePopper(referenceElement, popperElement, {
+ const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper(
+ referenceElement,
+ popperElement,
+ {
placement: "bottom-start",
- });
+ }
+ );
return (
setSidePeekVisible(!sidePeekVisible)}
>
@@ -44,7 +42,7 @@ export const SummaryPopover: React.FC = (props) => {
{!sidePeekVisible && (
{
+export const SummarySideBar = ({ editor, markings, sidePeekVisible }: ISummarySideBarProps) => {
return (
diff --git a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
index fd897b156..93fea4730 100644
--- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
+++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
@@ -23,11 +23,7 @@ export interface IVerticalDropdownMenuProps {
items: IVerticalDropdownItemProps[];
}
-const VerticalDropdownItem = ({
- Icon,
- label,
- action,
-}: IVerticalDropdownItemProps) => {
+const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => {
return (
#issue_
",
+ "#issue_
"
)
.run();
},
@@ -35,7 +34,7 @@ export const DocumentEditorExtensions = (
];
return [
- SlashCommand(uploadFile, setIsSubmitting, additonalOptions),
+ SlashCommand(uploadFile, setIsSubmitting, additionalOptions),
DragAndDrop,
Placeholder.configure({
placeholder: ({ node }) => {
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx
index 54d1dec21..07a10031d 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx
@@ -18,34 +18,32 @@ export interface IIssueListSuggestion {
}
export const IssueSuggestions = (suggestions: any[]) => {
- const mappedSuggestions: IIssueListSuggestion[] = suggestions.map(
- (suggestion): IIssueListSuggestion => {
- let transactionId = uuidv4();
- return {
- title: suggestion.name,
- priority: suggestion.priority.toString(),
- identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`,
- state: suggestion.state_detail.name,
- command: ({ editor, range }) => {
- editor
- .chain()
- .focus()
- .insertContentAt(range, {
- type: "issue-embed-component",
- attrs: {
- entity_identifier: suggestion.id,
- id: transactionId,
- title: suggestion.name,
- project_identifier: suggestion.project_detail.identifier,
- sequence_id: suggestion.sequence_id,
- entity_name: "issue",
- },
- })
- .run();
- },
- };
- },
- );
+ const mappedSuggestions: IIssueListSuggestion[] = suggestions.map((suggestion): IIssueListSuggestion => {
+ let transactionId = uuidv4();
+ return {
+ title: suggestion.name,
+ priority: suggestion.priority.toString(),
+ identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`,
+ state: suggestion.state_detail.name,
+ command: ({ editor, range }) => {
+ editor
+ .chain()
+ .focus()
+ .insertContentAt(range, {
+ type: "issue-embed-component",
+ attrs: {
+ entity_identifier: suggestion.id,
+ id: transactionId,
+ title: suggestion.name,
+ project_identifier: suggestion.project_detail.identifier,
+ sequence_id: suggestion.sequence_id,
+ entity_name: "issue",
+ },
+ })
+ .run();
+ },
+ };
+ });
return IssueEmbedSuggestions.configure({
suggestion: {
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx
index fbd31c257..75d977e49 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx
@@ -9,15 +9,7 @@ export const IssueEmbedSuggestions = Extension.create({
addOptions() {
return {
suggestion: {
- command: ({
- editor,
- range,
- props,
- }: {
- editor: Editor;
- range: Range;
- props: any;
- }) => {
+ command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
props.command({ editor, range });
},
},
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx
index ae5e164a2..b1f27ece3 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx
@@ -1,8 +1,6 @@
import { IIssueListSuggestion } from ".";
-export const getIssueSuggestionItems = (
- issueSuggestions: Array,
-) => {
+export const getIssueSuggestionItems = (issueSuggestions: Array) => {
return ({ query }: { query: string }) => {
const search = query.toLowerCase();
const filteredSuggestions = issueSuggestions.filter((item) => {
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx
index 892a7f09b..487d4f075 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx
@@ -2,13 +2,7 @@ import { cn } from "@plane/editor-core";
import { Editor } from "@tiptap/core";
import tippy from "tippy.js";
import { ReactRenderer } from "@tiptap/react";
-import {
- useCallback,
- useEffect,
- useLayoutEffect,
- useRef,
- useState,
-} from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { PriorityIcon } from "@plane/ui";
const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
@@ -62,9 +56,7 @@ const IssueSuggestionList = ({
let newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
let totalLength = 0;
sections.forEach((section) => {
- newDisplayedItems[section] = items
- .filter((item) => item.state === section)
- .slice(0, 5);
+ newDisplayedItems[section] = items.filter((item) => item.state === section).slice(0, 5);
totalLength += newDisplayedItems[section].length;
});
@@ -79,7 +71,7 @@ const IssueSuggestionList = ({
command(item);
}
},
- [command, displayedItems, currentSection],
+ [command, displayedItems, currentSection]
);
useEffect(() => {
@@ -93,22 +85,17 @@ const IssueSuggestionList = ({
// }
if (e.key === "ArrowUp") {
setSelectedIndex(
- (selectedIndex + displayedItems[currentSection].length - 1) %
- displayedItems[currentSection].length,
+ (selectedIndex + displayedItems[currentSection].length - 1) % displayedItems[currentSection].length
);
return true;
}
if (e.key === "ArrowDown") {
- const nextIndex =
- (selectedIndex + 1) % displayedItems[currentSection].length;
+ const nextIndex = (selectedIndex + 1) % displayedItems[currentSection].length;
setSelectedIndex(nextIndex);
if (nextIndex === 4) {
const nextItems = items
.filter((item) => item.state === currentSection)
- .slice(
- displayedItems[currentSection].length,
- displayedItems[currentSection].length + 5,
- );
+ .slice(displayedItems[currentSection].length, displayedItems[currentSection].length + 5);
setDisplayedItems((prevItems) => ({
...prevItems,
[currentSection]: [...prevItems[currentSection], ...nextItems],
@@ -138,29 +125,17 @@ const IssueSuggestionList = ({
return () => {
document.removeEventListener("keydown", onKeyDown);
};
- }, [
- displayedItems,
- selectedIndex,
- setSelectedIndex,
- selectItem,
- currentSection,
- ]);
+ }, [displayedItems, selectedIndex, setSelectedIndex, selectItem, currentSection]);
useLayoutEffect(() => {
const container = commandListContainer?.current;
if (container) {
- const sectionContainer = container?.querySelector(
- `#${currentSection}-container`,
- ) as HTMLDivElement;
+ const sectionContainer = container?.querySelector(`#${currentSection}-container`) as HTMLDivElement;
if (sectionContainer) {
updateScrollView(container, sectionContainer);
}
- const sectionScrollContainer = container?.querySelector(
- `#${currentSection}`,
- ) as HTMLElement;
- const item = sectionScrollContainer?.children[
- selectedIndex
- ] as HTMLElement;
+ const sectionScrollContainer = container?.querySelector(`#${currentSection}`) as HTMLElement;
+ const item = sectionScrollContainer?.children[selectedIndex] as HTMLElement;
if (item && sectionScrollContainer) {
updateScrollView(sectionScrollContainer, item);
}
@@ -171,56 +146,41 @@ const IssueSuggestionList = ({
{sections.map((section) => {
const sectionItems = displayedItems[section];
return (
sectionItems &&
sectionItems.length > 0 && (
-
+
{section}
-
- {sectionItems.map(
- (item: IssueSuggestionProps, index: number) => (
-
selectItem(index)}
- >
-
- {item.identifier}
-
-
- ),
- )}
+
+ {sectionItems.map((item: IssueSuggestionProps, index: number) => (
+
selectItem(index)}
+ >
+ {item.identifier}
+
+ ))}
)
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx
index bbe8ec021..fb521efef 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx
@@ -5,8 +5,7 @@ interface IssueWidgetExtensionProps {
issueEmbedConfig?: IIssueEmbedConfig;
}
-export const IssueWidgetExtension = ({
- issueEmbedConfig,
-}: IssueWidgetExtensionProps) => IssueWidget.configure({
- issueEmbedConfig,
-});
+export const IssueWidgetExtension = ({ issueEmbedConfig }: IssueWidgetExtensionProps) =>
+ IssueWidget.configure({
+ issueEmbedConfig,
+ });
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx
index 79aabcdfa..18dad8cae 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx
@@ -30,15 +30,13 @@ const IssueWidgetCard = (props) => {
{loading == 0 ? (
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
-
- {issueDetails.name}
-
-
+
{issueDetails.name}
+
@@ -46,18 +44,13 @@ const IssueWidgetCard = (props) => {
{issueDetails.assignee_details.map((assignee) => {
return (
-
{issueDetails.target_date && (
-
+
@@ -65,17 +58,15 @@ const IssueWidgetCard = (props) => {
) : loading == -1 ? (
-
+
- {
- "This Issue embed is not found in any project. It can no longer be updated or accessed from here."
- }
+ {"This Issue embed is not found in any project. It can no longer be updated or accessed from here."}
) : (
-
+
+
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx
index 014197184..c30fe5e5b 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx
@@ -35,10 +35,7 @@ export const IssueWidget = Node.create({
addNodeView() {
return ReactNodeViewRenderer((props: Object) => (
-
+
));
},
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts
index 9e633c0c8..615b55dee 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts
@@ -5,5 +5,5 @@ export interface IEmbedConfig {
export interface IIssueEmbedConfig {
fetchIssue: (issueId: string) => Promise
;
clickAction: (issueId: string, issueTitle: string) => void;
- issues: Array;
+ issues: Array;
}
diff --git a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx b/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx
index e8b58a2b8..9dfef6c39 100644
--- a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx
+++ b/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx
@@ -15,21 +15,14 @@ export const useEditorMarkings = () => {
nodes.forEach((node) => {
if (
node.type === "heading" &&
- (node.attrs.level === 1 ||
- node.attrs.level === 2 ||
- node.attrs.level === 3) &&
+ (node.attrs.level === 1 || node.attrs.level === 2 || node.attrs.level === 3) &&
node.content
) {
tempMarkings.push({
type: "heading",
level: node.attrs.level,
text: node.content[0].text,
- sequence:
- node.attrs.level === 1
- ? ++h1Sequence
- : node.attrs.level === 2
- ? ++h2Sequence
- : ++h3Sequence,
+ sequence: node.attrs.level === 1 ? ++h1Sequence : node.attrs.level === 2 ? ++h2Sequence : ++h3Sequence,
});
}
});
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index f2ff77455..a99d1e6a8 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -2,11 +2,7 @@
import React, { useState } from "react";
import { getEditorClassNames, useEditor } from "@plane/editor-core";
import { DocumentEditorExtensions } from "./extensions";
-import {
- IDuplicationConfig,
- IPageArchiveConfig,
- IPageLockConfig,
-} from "./types/menu-actions";
+import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "./types/menu-actions";
import { EditorHeader } from "./components/editor-header";
import { useEditorMarkings } from "./hooks/use-editor-markings";
import { SummarySideBar } from "./components/summary-side-bar";
@@ -41,9 +37,7 @@ interface IDocumentEditor {
customClassName?: string;
editorContentCustomClassNames?: string;
onChange: (json: any, html: string) => void;
- setIsSubmitting?: (
- isSubmitting: "submitting" | "submitted" | "saved",
- ) => void;
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any;
updatePageTitle: (title: string) => Promise;
@@ -118,11 +112,7 @@ const DocumentEditor = ({
cancelUploadImage,
rerenderOnPropsChange,
forwardedRef,
- extensions: DocumentEditorExtensions(
- uploadFile,
- embedConfig?.issueEmbedConfig,
- setIsSubmitting,
- ),
+ extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting),
});
if (!editor) {
@@ -147,7 +137,7 @@ const DocumentEditor = ({
if (!editor) return null;
return (
-
+
-
-
);
};
-const DocumentEditorWithRef = React.forwardRef
(
- (props, ref) => ((props, ref) => (
+ {
type="button"
onClick={item.command}
className={cn(
- "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
+ "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
{
- "text-custom-text-100 bg-custom-background-80": item.isActive(),
- },
+ "bg-custom-background-80 text-custom-text-100": item.isActive(),
+ }
)}
>
{
type="button"
onClick={item.command}
className={cn(
- "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
+ "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
{
- "text-custom-text-100 bg-custom-background-80": item.isActive(),
- },
+ "bg-custom-background-80 text-custom-text-100": item.isActive(),
+ }
)}
>
= ({ iconName, className = "" }) => (
-
- {iconName}
-
+ {iconName}
);
diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx
index c6e8ef025..e7897755e 100644
--- a/packages/editor/document-editor/src/ui/readonly/index.tsx
+++ b/packages/editor/document-editor/src/ui/readonly/index.tsx
@@ -8,11 +8,7 @@ import { IssueWidgetExtension } from "../extensions/widgets/IssueEmbedWidget";
import { IEmbedConfig } from "../extensions/widgets/IssueEmbedWidget/types";
import { useEditorMarkings } from "../hooks/use-editor-markings";
import { DocumentDetails } from "../types/editor-types";
-import {
- IPageArchiveConfig,
- IPageLockConfig,
- IDuplicationConfig,
-} from "../types/menu-actions";
+import { IPageArchiveConfig, IPageLockConfig, IDuplicationConfig } from "../types/menu-actions";
import { getMenuOptions } from "../utils/menu-options";
interface IDocumentReadOnlyEditor {
@@ -67,9 +63,7 @@ const DocumentReadOnlyEditor = ({
value,
forwardedRef,
rerenderOnPropsChange,
- extensions: [
- IssueWidgetExtension({ issueEmbedConfig: embedConfig?.issueEmbedConfig }),
- ],
+ extensions: [IssueWidgetExtension({ issueEmbedConfig: embedConfig?.issueEmbedConfig })],
});
useEffect(() => {
@@ -98,7 +92,7 @@ const DocumentReadOnlyEditor = ({
});
return (
-
+
-
-
);
};
-const DocumentReadOnlyEditorWithRef = forwardRef<
- EditorHandle,
- IDocumentReadOnlyEditor
->((props, ref) =>
);
+const DocumentReadOnlyEditorWithRef = forwardRef
((props, ref) => (
+ = ({
content={
{tooltipHeading && (
-
+
{tooltipHeading}
)}
@@ -69,11 +63,7 @@ export const Tooltip: React.FC = ({
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+ additionalOptions?: Array
) =>
- ({ query }: { query: string }) => {
- let slashCommands: ISlashCommandItem[] = [
- {
- title: "Text",
- description: "Just start typing with plain text.",
- searchTerms: ["p", "paragraph"],
- icon:
,
- command: ({ editor, range }: CommandProps) => {
- toggleBulletList(editor, range);
- },
+ },
+ {
+ key: "bullet_list",
+ title: "Bullet list",
+ description: "Create a simple bullet list.",
+ searchTerms: ["unordered", "point"],
+ icon:
,
+ command: ({ editor, range }: CommandProps) => {
+ toggleBulletList(editor, range);
},
- {
- title: "Divider",
- description: "Visually divide blocks",
- searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
- icon:
,
+ command: ({ editor, range }: CommandProps) => toggleBlockquote(editor, range),
+ },
+ {
+ key: "code_block",
+ title: "Code",
+ description: "Capture a code snippet.",
+ searchTerms: ["codeblock"],
+ icon:
- {items.map((item: CommandItemProps, index: number) => (
+ {items.map((item, index) => (
selectItem(index)}
>
-
- {item.icon}
-
-
-
{item.title}
-
{item.description}
-
{item.icon}
+ {item.title}
))}
,
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+ additionalOptions?: Array
) =>
Command.configure({
suggestion: {
- items: getSuggestionItems(uploadFile, setIsSubmitting, additonalOptions),
+ items: getSuggestionItems(uploadFile, setIsSubmitting, additionalOptions),
render: renderItems,
},
});
diff --git a/packages/editor/lite-text-editor/.eslintrc.js b/packages/editor/lite-text-editor/.eslintrc.js
new file mode 100644
index 000000000..c8df60750
--- /dev/null
+++ b/packages/editor/lite-text-editor/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: ["custom"],
+};
diff --git a/packages/editor/lite-text-editor/.prettierignore b/packages/editor/lite-text-editor/.prettierignore
new file mode 100644
index 000000000..43e8a7b8f
--- /dev/null
+++ b/packages/editor/lite-text-editor/.prettierignore
@@ -0,0 +1,6 @@
+.next
+.vercel
+.tubro
+out/
+dis/
+build/
\ No newline at end of file
diff --git a/packages/editor/lite-text-editor/.prettierrc b/packages/editor/lite-text-editor/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/editor/lite-text-editor/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "printWidth": 120,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}
diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
index 49001e055..f09ce54a4 100644
--- a/packages/editor/lite-text-editor/src/index.ts
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -1,6 +1,3 @@
export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
-export type {
- IMentionSuggestion,
- IMentionHighlight,
-} from "@plane/editor-types";
+export type { IMentionSuggestion, IMentionHighlight } from "@plane/editor-types";
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index b0cf3ebbb..0eb0e20df 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -1,18 +1,8 @@
import * as React from "react";
-import {
- EditorContainer,
- EditorContentWrapper,
- getEditorClassNames,
- useEditor,
-} from "@plane/editor-core";
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from "@plane/editor-core";
import { FixedMenu } from "./menus/fixed-menu";
import { LiteTextEditorExtensions } from "./extensions";
-import {
- UploadImage,
- DeleteImage,
- IMentionSuggestion,
- RestoreImage,
-} from "@plane/editor-types";
+import { UploadImage, DeleteImage, IMentionSuggestion, RestoreImage } from "@plane/editor-types";
interface ILiteTextEditor {
value: string;
@@ -25,9 +15,7 @@ interface ILiteTextEditor {
customClassName?: string;
editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void;
- setIsSubmitting?: (
- isSubmitting: "submitting" | "submitted" | "saved",
- ) => void;
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any;
debouncedUpdatesEnabled?: boolean;
@@ -107,11 +95,8 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
return (
-
-
+
+
{
);
};
-const LiteTextEditorWithRef = React.forwardRef(
- (props, ref) => ((props, ref) => (
+ = ({ iconName, className = "" }) => (
-
- {iconName}
-
+ {iconName}
);
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index 2f727936c..95bd8d6dd 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -47,9 +47,7 @@ type EditorBubbleMenuProps = {
| undefined;
};
uploadFile: UploadImage;
- setIsSubmitting?: (
- isSubmitting: "submitting" | "submitted" | "saved",
- ) => void;
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
submitButton: React.ReactNode;
};
@@ -61,23 +59,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
StrikeThroughItem(props.editor),
];
- const listFormattingItems: BubbleMenuItem[] = [
- BulletListItem(props.editor),
- NumberedListItem(props.editor),
- ];
+ const listFormattingItems: BubbleMenuItem[] = [BulletListItem(props.editor), NumberedListItem(props.editor)];
- const userActionItems: BubbleMenuItem[] = [
- QuoteItem(props.editor),
- CodeItem(props.editor),
- ];
+ const userActionItems: BubbleMenuItem[] = [QuoteItem(props.editor), CodeItem(props.editor)];
function getComplexItems(): BubbleMenuItem[] {
const items: BubbleMenuItem[] = [TableItem(props.editor)];
if (shouldShowImageItem()) {
- items.push(
- ImageItem(props.editor, props.uploadFile, props.setIsSubmitting),
- );
+ items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
}
return items;
@@ -109,22 +99,20 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
};
return (
-
+
{props.commentAccessSpecifier && (
-
+
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
handleAccessChange(access.key)}
- className={`aspect-square grid place-items-center p-1 rounded-sm hover:bg-custom-background-90 ${
- props.commentAccessSpecifier?.accessValue === access.key
- ? "bg-custom-background-90"
- : ""
+ className={`grid aspect-square place-items-center rounded-sm p-1 hover:bg-custom-background-90 ${
+ props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-90" : ""
}`}
>
{
))}
)}
-
+
-
+
{basicTextFormattingItems.map((item, index) => (
- {item.name}}
- >
+ {item.name}}>
{
))}
-
+
{listFormattingItems.map((item, index) => (
- {item.name}}
- >
+ {item.name}}>
{
))}
-
+
{userActionItems.map((item, index) => (
- {item.name}}
- >
+ {item.name}}>
{
{complexItems.map((item, index) => (
-
{item.name}}
- >
+ {item.name}}>
-
);
};
-const LiteReadOnlyEditorWithRef = React.forwardRef<
- EditorHandle,
- ICoreReadOnlyEditor
->((props, ref) => ((props, ref) => (
+ = ({
content={
{tooltipHeading && (
-
+
{tooltipHeading}
)}
@@ -68,11 +62,7 @@ export const Tooltip: React.FC = ({
{editor &&
-
);
};
-const RichTextEditorWithRef = React.forwardRef(
- (props, ref) => ((props, ref) => (
+ = (props: any) => {
type="button"
onClick={item.command}
className={cn(
- "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+ "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
{
- "text-custom-text-100 bg-custom-primary-100/5":
- item.isActive(),
- },
+ "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+ }
)}
>
>;
}
-export const LinkSelector: FC = ({
- editor,
- isOpen,
- setIsOpen,
-}) => {
+export const LinkSelector: FC = ({ editor, isOpen, setIsOpen }) => {
const inputRef = useRef(null);
const onLinkSubmit = useCallback(() => {
@@ -47,7 +31,7 @@ export const LinkSelector: FC = ({
type="button"
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",
- { "bg-custom-background-100": isOpen },
+ { "bg-custom-background-100": isOpen }
)}
onClick={() => {
setIsOpen(!isOpen);
@@ -64,7 +48,7 @@ export const LinkSelector: FC = ({
{isOpen && (
{
if (e.key === "Enter") {
e.preventDefault();
@@ -76,7 +60,7 @@ export const LinkSelector: FC
= ({
ref={inputRef}
type="url"
placeholder="Paste a link"
- className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+ className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
defaultValue={editor.getAttributes("link").href || ""}
/>
{editor.getAttributes("link").href ? (
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
index 7681fbe5b..34892ad22 100644
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@@ -21,21 +21,13 @@ interface NodeSelectorProps {
setIsOpen: Dispatch>;
}
-export const NodeSelector: FC = ({
- editor,
- isOpen,
- setIsOpen,
-}) => {
+export const NodeSelector: FC = ({ editor, isOpen, setIsOpen }) => {
const items: BubbleMenuItem[] = [
{
name: "Text",
icon: TextIcon,
- command: () =>
- editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
- isActive: () =>
- editor.isActive("paragraph") &&
- !editor.isActive("bulletList") &&
- !editor.isActive("orderedList"),
+ command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+ isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"),
},
HeadingOneItem(editor),
HeadingTwoItem(editor),
@@ -75,9 +67,8 @@ export const NodeSelector: FC = ({
className={cn(
"flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
{
- "bg-custom-primary-100/5 text-custom-text-100":
- activeItem.name === item.name,
- },
+ "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
+ }
)}
>
diff --git a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
index f6ccdddf5..9b0f43f57 100644
--- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@@ -1,10 +1,5 @@
"use client";
-import {
- EditorContainer,
- EditorContentWrapper,
- getEditorClassNames,
- useReadOnlyEditor,
-} from "@plane/editor-core";
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
import * as React from "react";
interface IRichTextReadOnlyEditor {
@@ -51,19 +46,15 @@ const RichReadOnlyEditor = ({
return (
-
);
};
-const RichReadOnlyEditorWithRef = React.forwardRef<
- EditorHandle,
- IRichTextReadOnlyEditor
->((props, ref) =>
);
+const RichReadOnlyEditorWithRef = React.forwardRef
((props, ref) => (
+ = (props) => {
return (
{avatarsWithUpdatedProps.map((avatar, index) => (
-
+
{avatar}
))}
{maxAvatarsToRender < totalAvatars && (
-
+
{
* @param value The value to check
* @returns Whether the value is a valid number or not
*/
-export const isAValidNumber = (value: any) => {
- return typeof value === "number" && !isNaN(value);
-};
+export const isAValidNumber = (value: any) => typeof value === "number" && !isNaN(value);
export const Avatar: React.FC
= (props) => {
const {
@@ -130,14 +128,11 @@ export const Avatar: React.FC = (props) => {
const sizeInfo = getSizeInfo(size);
return (
-
+
= (props) => {
}
>
{src ? (
-
+
) : (
diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx
index 4533b9361..cec490ab1 100644
--- a/packages/ui/src/badge/badge.tsx
+++ b/packages/ui/src/badge/badge.tsx
@@ -1,14 +1,8 @@
import * as React from "react";
-import {
- getIconStyling,
- getBadgeStyling,
- TBadgeVariant,
- TBadgeSizes,
-} from "./helper";
+import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";
-export interface BadgeProps
- extends React.ButtonHTMLAttributes
{
+export interface BadgeProps extends React.ButtonHTMLAttributes {
variant?: TBadgeVariant;
size?: TBadgeSizes;
className?: string;
@@ -37,24 +31,10 @@ const Badge = React.forwardRef((props, ref) => {
const buttonIconStyle = getIconStyling(size);
return (
-
- {prependIcon && (
-
- {React.cloneElement(prependIcon, { strokeWidth: 2 })}
-
- )}
+
+ {prependIcon && {React.cloneElement(prependIcon, { strokeWidth: 2 })}
}
{children}
- {appendIcon && (
-
- {React.cloneElement(appendIcon, { strokeWidth: 2 })}
-
- )}
+ {appendIcon && {React.cloneElement(appendIcon, { strokeWidth: 2 })}
}
);
});
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 745b5d047..88e6fd8d3 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -121,17 +121,11 @@ export const badgeStyling: IBadgeStyling = {
},
};
-export const getBadgeStyling = (
- variant: TBadgeVariant,
- size: TBadgeSizes,
- disabled: boolean = false
-): string => {
+export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => {
let _variant: string = ``;
const currentVariant = badgeStyling[variant];
- _variant = `${currentVariant.default} ${
- disabled ? currentVariant.disabled : currentVariant.hover
- }`;
+ _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
let _size: string = ``;
if (size) _size = badgeSizeStyling[size];
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 94f317825..e82944c03 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -12,13 +12,10 @@ type BreadcrumbsProps = {
const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
{React.Children.map(children, (child, index) => (
-
+
{child}
{index !== React.Children.count(children) - 1 && (
-
))}
@@ -41,31 +38,21 @@ const BreadcrumbItem: React.FC
= (props) => {
) : (
-
+
{link ? (
{icon && (
-
- {icon}
-
+ {icon}
)}
-
- {label}
-
+ {label}
) : (
-
- {icon && (
-
- {icon}
-
- )}
-
- {label}
-
+
+ {icon &&
{icon}
}
+
{label}
)}
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index d7377bcf8..d63d89eb2 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -1,14 +1,8 @@
import * as React from "react";
-import {
- getIconStyling,
- getButtonStyling,
- TButtonVariant,
- TButtonSizes,
-} from "./helper";
+import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
-export interface ButtonProps
- extends React.ButtonHTMLAttributes
{
+export interface ButtonProps extends React.ButtonHTMLAttributes {
variant?: TButtonVariant;
size?: TButtonSizes;
className?: string;
@@ -19,47 +13,31 @@ export interface ButtonProps
children: React.ReactNode;
}
-const Button = React.forwardRef(
- (props, ref) => {
- const {
- variant = "primary",
- size = "md",
- className = "",
- type = "button",
- loading = false,
- disabled = false,
- prependIcon = null,
- appendIcon = null,
- children,
- ...rest
- } = props;
+const Button = React.forwardRef((props, ref) => {
+ const {
+ variant = "primary",
+ size = "md",
+ className = "",
+ type = "button",
+ loading = false,
+ disabled = false,
+ prependIcon = null,
+ appendIcon = null,
+ children,
+ ...rest
+ } = props;
- const buttonStyle = getButtonStyling(variant, size, disabled || loading);
- const buttonIconStyle = getIconStyling(size);
+ const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+ const buttonIconStyle = getIconStyling(size);
- return (
-
- {prependIcon && (
-
- {React.cloneElement(prependIcon, { strokeWidth: 2 })}
-
- )}
- {children}
- {appendIcon && (
-
- {React.cloneElement(appendIcon, { strokeWidth: 2 })}
-
- )}
-
- );
- },
-);
+ return (
+
+ {prependIcon && {React.cloneElement(prependIcon, { strokeWidth: 2 })}
}
+ {children}
+ {appendIcon && {React.cloneElement(appendIcon, { strokeWidth: 2 })}
}
+
+ );
+});
Button.displayName = "plane-ui-button";
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index 5e6ff6a51..0a3094b32 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -99,17 +99,13 @@ export const buttonStyling: IButtonStyling = {
},
};
-export const getButtonStyling = (
- variant: TButtonVariant,
- size: TButtonSizes,
- disabled: boolean = false,
-): string => {
+export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
let _variant: string = ``;
const currentVariant = buttonStyling[variant];
- _variant = `${currentVariant.default} ${
- disabled ? currentVariant.disabled : currentVariant.hover
- } ${currentVariant.pressed}`;
+ _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+ currentVariant.pressed
+ }`;
let _size: string = ``;
if (size) _size = buttonSizeStyling[size];
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index 9888dd205..9a1c01ae9 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -19,7 +19,7 @@ const ToggleSwitch: React.FC = (props) => {
checked={value}
disabled={disabled}
onChange={onChange}
- className={`relative flex-shrink-0 inline-flex ${
+ className={`relative inline-flex flex-shrink-0 ${
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
} flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
value ? "bg-custom-primary-100" : "bg-gray-700"
@@ -28,15 +28,11 @@ const ToggleSwitch: React.FC = (props) => {
{label}
(null);
- const [popperElement, setPopperElement] =
- React.useState(null);
+ const [referenceElement, setReferenceElement] = React.useState(null);
+ const [popperElement, setPopperElement] = React.useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "auto",
@@ -61,17 +59,11 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
type="button"
onClick={menuButtonOnClick}
disabled={disabled}
- className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
- disabled
- ? "cursor-not-allowed"
- : "cursor-pointer hover:bg-custom-background-80"
+ className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
+ disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
- {
)}
{
} = props;
const [query, setQuery] = useState("");
- const [referenceElement, setReferenceElement] =
- useState
(null);
- const [popperElement, setPopperElement] = useState(
- null,
- );
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
});
const filteredOptions =
- query === ""
- ? options
- : options?.filter((option) =>
- option.query.toLowerCase().includes(query.toLowerCase()),
- );
+ query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const comboboxProps: any = {
value,
@@ -58,11 +51,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
if (multiple) comboboxProps.multiple = true;
return (
-
+
{({ open }: { open: boolean }) => {
if (open && onOpen) onOpen();
@@ -73,7 +62,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
{
{
} ${buttonClassName}`}
>
{label}
- {!noChevron && !disabled && (
-
)}
{
setQuery(e.target.value)}
placeholder="Type to search..."
@@ -126,12 +113,12 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
- ? "max-h-48"
- : maxHeight === "rg"
- ? "max-h-36"
- : maxHeight === "sm"
- ? "max-h-28"
- : ""
+ ? "max-h-48"
+ : maxHeight === "rg"
+ ? "max-h-36"
+ : maxHeight === "sm"
+ ? "max-h-28"
+ : ""
} overflow-y-scroll`}
>
{filteredOptions ? (
@@ -141,15 +128,9 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
key={option.value}
value={option.value}
className={({ active, selected }) =>
- `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
- active || selected
- ? "bg-custom-background-80"
- : ""
- } ${
- selected
- ? "text-custom-text-100"
- : "text-custom-text-200"
- }`
+ `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
+ active || selected ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ active, selected }) => (
@@ -158,23 +139,13 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
{multiple ? (
-
) : (
-
-
- No matching results
-
+ No matching results
)
) : (
-
- Loading...
-
+ Loading...
)}
{footerOption}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 41b1d8209..8fbe3fbdc 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -27,11 +27,8 @@ const CustomSelect = (props: ICustomSelectProps) => {
value,
width = "auto",
} = props;
- const [referenceElement, setReferenceElement] =
- useState
(null);
- const [popperElement, setPopperElement] = useState(
- null,
- );
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
@@ -52,9 +49,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 text-xs ${
- disabled
- ? "cursor-not-allowed text-custom-text-200"
- : "cursor-pointer hover:bg-custom-background-80"
+ disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`}
>
{customButton}
@@ -65,37 +60,31 @@ const CustomSelect = (props: ICustomSelectProps) => {
{label}
- {!noChevron && !disabled && (
-
)}
{
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
- } ${
- selected ? "text-custom-text-100" : "text-custom-text-200"
- } ${className}`
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
}
>
{({ selected }) => (
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 0a91a8838..05cb75f04 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -17,13 +17,10 @@ export interface InputColorPickerProps {
}
export const InputColorPicker: React.FC
= (props) => {
- const { value, hasError, onChange, name, className, style, placeholder } =
- props;
+ const { value, hasError, onChange, name, className, style, placeholder } = props;
- const [referenceElement, setReferenceElement] =
- React.useState(null);
- const [popperElement, setPopperElement] =
- React.useState(null);
+ const [referenceElement, setReferenceElement] = React.useState(null);
+ const [popperElement, setPopperElement] = React.useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "auto",
@@ -52,10 +49,7 @@ export const InputColorPicker: React.FC = (props) => {
style={style}
/>
-
+
{({ open }) => {
if (open) {
}
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 501af5c7d..6688d6778 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -1,7 +1,6 @@
import * as React from "react";
-export interface InputProps
- extends React.InputHTMLAttributes {
+export interface InputProps extends React.InputHTMLAttributes {
mode?: "primary" | "transparent" | "true-transparent";
inputSize?: "sm" | "md";
hasError?: boolean;
@@ -9,16 +8,7 @@ export interface InputProps
}
const Input = React.forwardRef((props, ref) => {
- const {
- id,
- type,
- name,
- mode = "primary",
- inputSize = "sm",
- hasError = false,
- className = "",
- ...rest
- } = props;
+ const { id, type, name, mode = "primary", inputSize = "sm", hasError = false, className = "", ...rest } = props;
return (
{
+export interface TextAreaProps extends React.TextareaHTMLAttributes {
mode?: "primary" | "transparent";
hasError?: boolean;
className?: string;
}
// Updates the height of a