forked from github/plane
Merge pull request #12 from aaryan610/master
style: issue details page, feat: add to cycle
This commit is contained in:
Vamsi Kurama
GitHub
commit
7b0034c41d
@ -9,7 +9,11 @@ import useTheme from "lib/hooks/useTheme";
|
|||||||
import useToast from "lib/hooks/useToast";
|
import useToast from "lib/hooks/useToast";
|
||||||
// icons
|
// icons
|
||||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||||
import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline";
|
import {
|
||||||
|
FolderIcon,
|
||||||
|
RectangleStackIcon,
|
||||||
|
ClipboardDocumentListIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
// commons
|
// commons
|
||||||
import { classNames, copyTextToClipboard } from "constants/common";
|
import { classNames, copyTextToClipboard } from "constants/common";
|
||||||
// components
|
// components
|
||||||
@ -19,12 +23,19 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
|
|||||||
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||||
// types
|
// types
|
||||||
import { IIssue } from "types";
|
import { IIssue } from "types";
|
||||||
|
import { Button } from "ui";
|
||||||
|
import { SubmitHandler, useForm } from "react-hook-form";
|
||||||
|
|
||||||
type ItemType = {
|
type ItemType = {
|
||||||
name: string;
|
name: string;
|
||||||
url?: string;
|
url?: string;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type FormInput = {
|
||||||
|
issue: string[];
|
||||||
|
};
|
||||||
|
|
||||||
const CommandPalette: React.FC = () => {
|
const CommandPalette: React.FC = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -51,7 +62,7 @@ const CommandPalette: React.FC = () => {
|
|||||||
const quickActions = [
|
const quickActions = [
|
||||||
{
|
{
|
||||||
name: "Add new issue...",
|
name: "Add new issue...",
|
||||||
icon: DocumentPlusIcon,
|
icon: RectangleStackIcon,
|
||||||
shortcut: "I",
|
shortcut: "I",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
setIsIssueModalOpen(true);
|
setIsIssueModalOpen(true);
|
||||||
@ -59,7 +70,7 @@ const CommandPalette: React.FC = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Add new project...",
|
name: "Add new project...",
|
||||||
icon: FolderPlusIcon,
|
icon: ClipboardDocumentListIcon,
|
||||||
shortcut: "P",
|
shortcut: "P",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
setIsProjectModalOpen(true);
|
setIsProjectModalOpen(true);
|
||||||
@ -116,6 +127,23 @@ const CommandPalette: React.FC = () => {
|
|||||||
[toggleCollapsed, setToastAlert, router]
|
[toggleCollapsed, setToastAlert, router]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
setError,
|
||||||
|
control,
|
||||||
|
} = useForm<FormInput>();
|
||||||
|
|
||||||
|
const handleDelete: SubmitHandler<FormInput> = (data) => {
|
||||||
|
console.log("Deleting... " + JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
|
||||||
|
console.log("Adding to cycle...");
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.addEventListener("keydown", handleKeyDown);
|
document.addEventListener("keydown", handleKeyDown);
|
||||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||||
@ -137,7 +165,6 @@ const CommandPalette: React.FC = () => {
|
|||||||
setIsOpen={setIsIssueModalOpen}
|
setIsOpen={setIsIssueModalOpen}
|
||||||
projectId={activeProject?.id}
|
projectId={activeProject?.id}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Transition.Root
|
<Transition.Root
|
||||||
show={isPaletteOpen}
|
show={isPaletteOpen}
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
@ -168,129 +195,152 @@ const CommandPalette: React.FC = () => {
|
|||||||
leaveTo="opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||||
<Combobox
|
<form>
|
||||||
onChange={(item: ItemType) => {
|
<Combobox
|
||||||
const { url, onClick } = item;
|
// onChange={(item: ItemType) => {
|
||||||
if (url) router.push(url);
|
// const { url, onClick } = item;
|
||||||
else if (onClick) onClick();
|
// if (url) router.push(url);
|
||||||
handleCommandPaletteClose();
|
// else if (onClick) onClick();
|
||||||
}}
|
// handleCommandPaletteClose();
|
||||||
>
|
// }}
|
||||||
<div className="relative m-1">
|
|
||||||
<MagnifyingGlassIcon
|
|
||||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<Combobox.Input
|
|
||||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
|
||||||
placeholder="Search..."
|
|
||||||
onChange={(event) => setQuery(event.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Combobox.Options
|
|
||||||
static
|
|
||||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
|
||||||
>
|
>
|
||||||
{filteredIssues.length > 0 && (
|
<div className="relative m-1">
|
||||||
<>
|
<MagnifyingGlassIcon
|
||||||
|
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<Combobox.Input
|
||||||
|
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
||||||
|
placeholder="Search..."
|
||||||
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Combobox.Options
|
||||||
|
static
|
||||||
|
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||||
|
>
|
||||||
|
{filteredIssues.length > 0 && (
|
||||||
|
<>
|
||||||
|
<li className="p-2">
|
||||||
|
{query === "" && (
|
||||||
|
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||||
|
Issues
|
||||||
|
</h2>
|
||||||
|
)}
|
||||||
|
<ul className="text-sm text-gray-700">
|
||||||
|
{filteredIssues.map((issue) => (
|
||||||
|
<Combobox.Option
|
||||||
|
key={issue.id}
|
||||||
|
value={{
|
||||||
|
name: issue.name,
|
||||||
|
url: `/projects/${issue.project}/issues/${issue.id}`,
|
||||||
|
}}
|
||||||
|
className={({ active }) =>
|
||||||
|
classNames(
|
||||||
|
"flex cursor-pointer select-none items-center rounded-md px-3 py-2",
|
||||||
|
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{({ active }) => (
|
||||||
|
<>
|
||||||
|
{/* <FolderIcon
|
||||||
|
className={classNames(
|
||||||
|
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
||||||
|
active ? "text-opacity-100" : ""
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
/> */}
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
{...register("issue")}
|
||||||
|
value={issue.id}
|
||||||
|
/>
|
||||||
|
<span className="ml-3 flex-auto truncate">{issue.name}</span>
|
||||||
|
{active && (
|
||||||
|
<span className="ml-3 flex-none text-gray-500">
|
||||||
|
Jump to...
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Combobox.Option>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{query === "" && (
|
||||||
<li className="p-2">
|
<li className="p-2">
|
||||||
{query === "" && (
|
<h2 className="sr-only">Quick actions</h2>
|
||||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
|
||||||
Issues
|
|
||||||
</h2>
|
|
||||||
)}
|
|
||||||
<ul className="text-sm text-gray-700">
|
<ul className="text-sm text-gray-700">
|
||||||
{filteredIssues.map((issue) => (
|
{quickActions.map((action) => (
|
||||||
<Combobox.Option
|
<Combobox.Option
|
||||||
key={issue.id}
|
key={action.shortcut}
|
||||||
value={{
|
value={{
|
||||||
name: issue.name,
|
name: action.name,
|
||||||
url: `/projects/${issue.project}/issues/${issue.id}`,
|
onClick: action.onClick,
|
||||||
}}
|
}}
|
||||||
className={({ active }) =>
|
className={({ active }) =>
|
||||||
classNames(
|
classNames(
|
||||||
"flex cursor-pointer select-none items-center rounded-md px-3 py-2",
|
"flex cursor-default select-none items-center rounded-md px-3 py-2",
|
||||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{({ active }) => (
|
{({ active }) => (
|
||||||
<>
|
<>
|
||||||
<FolderIcon
|
<action.icon
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
||||||
active ? "text-opacity-100" : ""
|
active ? "text-opacity-100" : ""
|
||||||
)}
|
)}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
<span className="ml-3 flex-auto truncate">{issue.name}</span>
|
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
||||||
{active && (
|
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
||||||
<span className="ml-3 flex-none text-gray-500">
|
<kbd className="font-sans">⌘</kbd>
|
||||||
Jump to...
|
<kbd className="font-sans">{action.shortcut}</kbd>
|
||||||
</span>
|
</span>
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Combobox.Option>
|
</Combobox.Option>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</>
|
)}
|
||||||
)}
|
</Combobox.Options>
|
||||||
{query === "" && (
|
|
||||||
<li className="p-2">
|
|
||||||
<h2 className="sr-only">Quick actions</h2>
|
|
||||||
<ul className="text-sm text-gray-700">
|
|
||||||
{quickActions.map((action) => (
|
|
||||||
<Combobox.Option
|
|
||||||
key={action.shortcut}
|
|
||||||
value={{
|
|
||||||
name: action.name,
|
|
||||||
onClick: action.onClick,
|
|
||||||
}}
|
|
||||||
className={({ active }) =>
|
|
||||||
classNames(
|
|
||||||
"flex cursor-default select-none items-center rounded-md px-3 py-2",
|
|
||||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{({ active }) => (
|
|
||||||
<>
|
|
||||||
<action.icon
|
|
||||||
className={classNames(
|
|
||||||
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
|
||||||
active ? "text-opacity-100" : ""
|
|
||||||
)}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
|
||||||
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
|
||||||
<kbd className="font-sans">⌘</kbd>
|
|
||||||
<kbd className="font-sans">{action.shortcut}</kbd>
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Combobox.Option>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</Combobox.Options>
|
|
||||||
|
|
||||||
{query !== "" && filteredIssues.length === 0 && (
|
{query !== "" && filteredIssues.length === 0 && (
|
||||||
<div className="py-14 px-6 text-center sm:px-14">
|
<div className="py-14 px-6 text-center sm:px-14">
|
||||||
<FolderIcon
|
<FolderIcon
|
||||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
<p className="mt-4 text-sm text-gray-900">
|
<p className="mt-4 text-sm text-gray-900">
|
||||||
We couldn{"'"}t find any issue with that term. Please try again.
|
We couldn{"'"}t find any issue with that term. Please try again.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Combobox>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center gap-2 p-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
|
||||||
|
Add to Cycle
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div>
|
||||||
</Combobox>
|
<Button type="button" size="sm" onClick={handleCommandPaletteClose}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</Dialog.Panel>
|
</Dialog.Panel>
|
||||||
</Transition.Child>
|
</Transition.Child>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
31
components/lexical/config.ts
Normal file
31
components/lexical/config.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
||||||
|
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
|
||||||
|
import { ListItemNode, ListNode } from "@lexical/list";
|
||||||
|
import { CodeHighlightNode, CodeNode } from "@lexical/code";
|
||||||
|
import { AutoLinkNode, LinkNode } from "@lexical/link";
|
||||||
|
// theme
|
||||||
|
import { defaultTheme } from "./theme";
|
||||||
|
|
||||||
|
export const initialConfig = {
|
||||||
|
namespace: "LexicalEditor",
|
||||||
|
// The editor theme
|
||||||
|
theme: defaultTheme,
|
||||||
|
// Handling of errors during update
|
||||||
|
onError(error: any) {
|
||||||
|
console.error(error);
|
||||||
|
},
|
||||||
|
// Any custom nodes go here
|
||||||
|
nodes: [
|
||||||
|
HeadingNode,
|
||||||
|
ListNode,
|
||||||
|
ListItemNode,
|
||||||
|
QuoteNode,
|
||||||
|
CodeNode,
|
||||||
|
CodeHighlightNode,
|
||||||
|
TableNode,
|
||||||
|
TableCellNode,
|
||||||
|
TableRowNode,
|
||||||
|
AutoLinkNode,
|
||||||
|
LinkNode,
|
||||||
|
],
|
||||||
|
};
|
||||||
73
components/lexical/editor.tsx
Normal file
73
components/lexical/editor.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
||||||
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||||
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||||
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
||||||
|
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
||||||
|
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
||||||
|
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
||||||
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||||
|
import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown";
|
||||||
|
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
||||||
|
import { $generateHtmlFromNodes } from "@lexical/html";
|
||||||
|
import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
|
||||||
|
|
||||||
|
// custom plugins
|
||||||
|
import { CodeHighlightPlugin } from "./plugins/code-highlight";
|
||||||
|
import { LexicalToolbar } from "./toolbar";
|
||||||
|
// config
|
||||||
|
import { initialConfig } from "./config";
|
||||||
|
// helpers
|
||||||
|
import { getValidatedValue } from "./helpers/editor";
|
||||||
|
|
||||||
|
export interface RichTextEditorProps {
|
||||||
|
onChange: (state: string) => void;
|
||||||
|
id: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
||||||
|
// props
|
||||||
|
const { onChange, value, id } = props;
|
||||||
|
|
||||||
|
function handleChange(state: EditorState, editor: LexicalEditor) {
|
||||||
|
state.read(() => {
|
||||||
|
onChange(JSON.stringify(state.toJSON()));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LexicalComposer
|
||||||
|
initialConfig={{
|
||||||
|
...initialConfig,
|
||||||
|
namespace: id || "Lexical Editor",
|
||||||
|
editorState: getValidatedValue(value),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="border border-[#e2e2e2] rounded-md">
|
||||||
|
<LexicalToolbar />
|
||||||
|
<div className="relative">
|
||||||
|
<RichTextPlugin
|
||||||
|
contentEditable={
|
||||||
|
<ContentEditable className='className="h-[450px] outline-none py-[15px] px-2.5 resize-none overflow-hidden text-ellipsis' />
|
||||||
|
}
|
||||||
|
placeholder={
|
||||||
|
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||||
|
Enter some text...
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<OnChangePlugin onChange={handleChange} />
|
||||||
|
<HistoryPlugin />
|
||||||
|
<CodeHighlightPlugin />
|
||||||
|
<ListPlugin />
|
||||||
|
<LinkPlugin />
|
||||||
|
<CheckListPlugin />
|
||||||
|
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LexicalComposer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RichTextEditor;
|
||||||
33
components/lexical/helpers/editor.ts
Normal file
33
components/lexical/helpers/editor.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
export const positionEditorElement = (editor: any, rect: any) => {
|
||||||
|
if (window) {
|
||||||
|
if (rect === null) {
|
||||||
|
editor.style.opacity = "0";
|
||||||
|
editor.style.top = "-1000px";
|
||||||
|
editor.style.left = "-1000px";
|
||||||
|
} else {
|
||||||
|
editor.style.opacity = "1";
|
||||||
|
editor.style.top = `${
|
||||||
|
rect.top + rect.height + window.pageYOffset + 10
|
||||||
|
}px`;
|
||||||
|
editor.style.left = `${
|
||||||
|
rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
|
||||||
|
}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getValidatedValue = (value: string) => {
|
||||||
|
const defaultValue =
|
||||||
|
'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
try {
|
||||||
|
const json = JSON.parse(value);
|
||||||
|
return JSON.stringify(json);
|
||||||
|
} catch (error) {
|
||||||
|
return defaultValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultValue;
|
||||||
|
};
|
||||||
17
components/lexical/helpers/node.ts
Normal file
17
components/lexical/helpers/node.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { $isAtNodeEnd } from "@lexical/selection";
|
||||||
|
|
||||||
|
export const getSelectedNode = (selection: any) => {
|
||||||
|
const anchor = selection.anchor;
|
||||||
|
const focus = selection.focus;
|
||||||
|
const anchorNode = selection.anchor.getNode();
|
||||||
|
const focusNode = selection.focus.getNode();
|
||||||
|
if (anchorNode === focusNode) {
|
||||||
|
return anchorNode;
|
||||||
|
}
|
||||||
|
const isBackward = selection.isBackward();
|
||||||
|
if (isBackward) {
|
||||||
|
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
|
||||||
|
} else {
|
||||||
|
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
|
||||||
|
}
|
||||||
|
};
|
||||||
11
components/lexical/plugins/code-highlight.tsx
Normal file
11
components/lexical/plugins/code-highlight.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { registerCodeHighlighting } from "@lexical/code";
|
||||||
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||||
|
|
||||||
|
export const CodeHighlightPlugin = () => {
|
||||||
|
const [editor] = useLexicalComposerContext();
|
||||||
|
useEffect(() => {
|
||||||
|
return registerCodeHighlighting(editor);
|
||||||
|
}, [editor]);
|
||||||
|
return null;
|
||||||
|
};
|
||||||
21
components/lexical/plugins/read-only.tsx
Normal file
21
components/lexical/plugins/read-only.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||||
|
import { getValidatedValue } from "../helpers/editor";
|
||||||
|
|
||||||
|
const ReadOnlyPlugin = ({ value }: { value: string }) => {
|
||||||
|
const [editor] = useLexicalComposerContext();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (editor && value) {
|
||||||
|
const initialEditorState = editor?.parseEditorState(
|
||||||
|
getValidatedValue(value) || ""
|
||||||
|
);
|
||||||
|
editor.setEditorState(initialEditorState);
|
||||||
|
}
|
||||||
|
}, [editor, value]);
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReadOnlyPlugin;
|
||||||
67
components/lexical/theme.ts
Normal file
67
components/lexical/theme.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
export const defaultTheme = {
|
||||||
|
ltr: "ltr",
|
||||||
|
rtl: "rtl",
|
||||||
|
placeholder: "editor-placeholder",
|
||||||
|
paragraph: "mb-1",
|
||||||
|
quote: "editor-quote",
|
||||||
|
heading: {
|
||||||
|
h1: "text-3xl font-bold",
|
||||||
|
h2: "text-2xl font-bold",
|
||||||
|
h3: "text-xl font-bold",
|
||||||
|
h4: "text-lg font-bold",
|
||||||
|
h5: "text-base font-bold",
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
nested: {
|
||||||
|
listitem: "list-item",
|
||||||
|
},
|
||||||
|
ol: "list-decimal pl-4",
|
||||||
|
ul: "list-disc pl-4",
|
||||||
|
listitem: "list-item",
|
||||||
|
},
|
||||||
|
image: "editor-image",
|
||||||
|
link: "editor-link",
|
||||||
|
text: {
|
||||||
|
bold: "font-bold",
|
||||||
|
italic: "italic",
|
||||||
|
overflowed: "editor-text-overflowed",
|
||||||
|
hashtag: "editor-text-hashtag",
|
||||||
|
underline: "underline",
|
||||||
|
strikethrough: "line-through",
|
||||||
|
underlineStrikethrough: "editor-text-underlineStrikethrough",
|
||||||
|
code: "editor-text-code",
|
||||||
|
},
|
||||||
|
code: "editor-code",
|
||||||
|
codeHighlight: {
|
||||||
|
atrule: "editor-tokenAttr",
|
||||||
|
attr: "editor-tokenAttr",
|
||||||
|
boolean: "editor-tokenProperty",
|
||||||
|
builtin: "editor-tokenSelector",
|
||||||
|
cdata: "editor-tokenComment",
|
||||||
|
char: "editor-tokenSelector",
|
||||||
|
class: "editor-tokenFunction",
|
||||||
|
"class-name": "editor-tokenFunction",
|
||||||
|
comment: "editor-tokenComment",
|
||||||
|
constant: "editor-tokenProperty",
|
||||||
|
deleted: "editor-tokenProperty",
|
||||||
|
doctype: "editor-tokenComment",
|
||||||
|
entity: "editor-tokenOperator",
|
||||||
|
function: "editor-tokenFunction",
|
||||||
|
important: "editor-tokenVariable",
|
||||||
|
inserted: "editor-tokenSelector",
|
||||||
|
keyword: "editor-tokenAttr",
|
||||||
|
namespace: "editor-tokenVariable",
|
||||||
|
number: "editor-tokenProperty",
|
||||||
|
operator: "editor-tokenOperator",
|
||||||
|
prolog: "editor-tokenComment",
|
||||||
|
property: "editor-tokenProperty",
|
||||||
|
punctuation: "editor-tokenPunctuation",
|
||||||
|
regex: "editor-tokenVariable",
|
||||||
|
selector: "editor-tokenSelector",
|
||||||
|
string: "editor-tokenSelector",
|
||||||
|
symbol: "editor-tokenProperty",
|
||||||
|
tag: "editor-tokenProperty",
|
||||||
|
url: "editor-tokenOperator",
|
||||||
|
variable: "editor-tokenVariable",
|
||||||
|
},
|
||||||
|
};
|
||||||
333
components/lexical/toolbar/block-type-select.tsx
Normal file
333
components/lexical/toolbar/block-type-select.tsx
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
import { FC, Fragment, useState, useEffect, useRef } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import {
|
||||||
|
CAN_REDO_COMMAND,
|
||||||
|
CAN_UNDO_COMMAND,
|
||||||
|
REDO_COMMAND,
|
||||||
|
UNDO_COMMAND,
|
||||||
|
SELECTION_CHANGE_COMMAND,
|
||||||
|
FORMAT_TEXT_COMMAND,
|
||||||
|
FORMAT_ELEMENT_COMMAND,
|
||||||
|
$getSelection,
|
||||||
|
$isRangeSelection,
|
||||||
|
$createParagraphNode,
|
||||||
|
$getNodeByKey,
|
||||||
|
} from "lexical";
|
||||||
|
import {
|
||||||
|
INSERT_ORDERED_LIST_COMMAND,
|
||||||
|
INSERT_UNORDERED_LIST_COMMAND,
|
||||||
|
INSERT_CHECK_LIST_COMMAND,
|
||||||
|
REMOVE_LIST_COMMAND,
|
||||||
|
$isListNode,
|
||||||
|
ListNode,
|
||||||
|
} from "@lexical/list";
|
||||||
|
import {
|
||||||
|
$isParentElementRTL,
|
||||||
|
$isAtNodeEnd,
|
||||||
|
$wrapNodes,
|
||||||
|
} from "@lexical/selection";
|
||||||
|
import {
|
||||||
|
$createHeadingNode,
|
||||||
|
$createQuoteNode,
|
||||||
|
$isHeadingNode,
|
||||||
|
} from "@lexical/rich-text";
|
||||||
|
import {
|
||||||
|
$createCodeNode,
|
||||||
|
$isCodeNode,
|
||||||
|
getDefaultCodeLanguage,
|
||||||
|
getCodeLanguages,
|
||||||
|
} from "@lexical/code";
|
||||||
|
|
||||||
|
const BLOCK_DATA = [
|
||||||
|
{ type: "paragraph", name: "Normal" },
|
||||||
|
{ type: "h1", name: "Large Heading" },
|
||||||
|
{ type: "h2", name: "Small Heading" },
|
||||||
|
{ type: "h3", name: "Heading" },
|
||||||
|
{ type: "h4", name: "Heading" },
|
||||||
|
{ type: "h5", name: "Heading" },
|
||||||
|
{ type: "Quote", name: "quote" },
|
||||||
|
{ type: "ol", name: "Numbered List" },
|
||||||
|
{ type: "ul", name: "Bulleted List" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const supportedBlockTypes = new Set([
|
||||||
|
"paragraph",
|
||||||
|
"quote",
|
||||||
|
"code",
|
||||||
|
"h1",
|
||||||
|
"h2",
|
||||||
|
"ul",
|
||||||
|
"ol",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const blockTypeToBlockName: any = {
|
||||||
|
code: "Code Block",
|
||||||
|
h1: "Large Heading",
|
||||||
|
h2: "Small Heading",
|
||||||
|
h3: "Heading",
|
||||||
|
h4: "Heading",
|
||||||
|
h5: "Heading",
|
||||||
|
ol: "Numbered List",
|
||||||
|
paragraph: "Normal",
|
||||||
|
quote: "Quote",
|
||||||
|
ul: "Bulleted List",
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface BlockTypeSelectProps {
|
||||||
|
editor: any;
|
||||||
|
toolbarRef: any;
|
||||||
|
blockType: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
||||||
|
const { editor, toolbarRef, blockType } = props;
|
||||||
|
// refs
|
||||||
|
const dropDownRef = useRef<any>(null);
|
||||||
|
// states
|
||||||
|
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const toolbar = toolbarRef.current;
|
||||||
|
const dropDown = dropDownRef.current;
|
||||||
|
|
||||||
|
if (toolbar !== null && dropDown !== null) {
|
||||||
|
const { top, left } = toolbar.getBoundingClientRect();
|
||||||
|
dropDown.style.top = `${top + 40}px`;
|
||||||
|
dropDown.style.left = `${left}px`;
|
||||||
|
}
|
||||||
|
}, [dropDownRef, toolbarRef]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const dropDown = dropDownRef.current;
|
||||||
|
const toolbar = toolbarRef.current;
|
||||||
|
|
||||||
|
if (dropDown !== null && toolbar !== null) {
|
||||||
|
const handle = (event: any) => {
|
||||||
|
const target = event.target;
|
||||||
|
|
||||||
|
if (!dropDown.contains(target) && !toolbar.contains(target)) {
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("click", handle);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("click", handle);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
|
||||||
|
|
||||||
|
const formatParagraph = () => {
|
||||||
|
if (blockType !== "paragraph") {
|
||||||
|
editor.update(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
$wrapNodes(selection, () => $createParagraphNode());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatLargeHeading = () => {
|
||||||
|
console.log("blockType ", blockType);
|
||||||
|
if (blockType !== "h1") {
|
||||||
|
editor.update(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
$wrapNodes(selection, () => $createHeadingNode("h1"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatSmallHeading = () => {
|
||||||
|
if (blockType !== "h2") {
|
||||||
|
editor.update(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
$wrapNodes(selection, () => $createHeadingNode("h2"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatBulletList = () => {
|
||||||
|
if (blockType !== "ul") {
|
||||||
|
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
|
||||||
|
} else {
|
||||||
|
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatNumberedList = () => {
|
||||||
|
if (blockType !== "ol") {
|
||||||
|
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
|
||||||
|
} else {
|
||||||
|
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatQuote = () => {
|
||||||
|
if (blockType !== "quote") {
|
||||||
|
editor.update(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
$wrapNodes(selection, () => $createQuoteNode());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCode = () => {
|
||||||
|
if (blockType !== "code") {
|
||||||
|
editor.update(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
$wrapNodes(selection, () => $createCodeNode());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowBlockOptionsDropDown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
className="p-2 mr-2 text-sm flex items-center"
|
||||||
|
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
|
||||||
|
aria-label="Formatting Options"
|
||||||
|
>
|
||||||
|
<span className="mr-2">{blockTypeToBlockName[blockType]}</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-chevron-down"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{showBlockOptionsDropDown && (
|
||||||
|
<ul
|
||||||
|
className="absolute mt-1 w-full min-w-[160px] overflow-auto rounded-md bg-white z-10 p-1 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||||
|
ref={dropDownRef}
|
||||||
|
>
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatParagraph}>
|
||||||
|
<span className="icon paragraph" />
|
||||||
|
<span className="text">Normal</span>
|
||||||
|
{blockType === "paragraph" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatLargeHeading}>
|
||||||
|
<span className="icon large-heading" />
|
||||||
|
<span className="text">Large Heading</span>
|
||||||
|
{blockType === "h1" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatSmallHeading}>
|
||||||
|
<span className="icon small-heading" />
|
||||||
|
<span className="text">Small Heading</span>
|
||||||
|
{blockType === "h2" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatBulletList}>
|
||||||
|
<span className="icon bullet-list" />
|
||||||
|
<span className="text">Bullet List</span>
|
||||||
|
{blockType === "ul" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatNumberedList}>
|
||||||
|
<span className="icon numbered-list" />
|
||||||
|
<span className="text">Numbered List</span>
|
||||||
|
{blockType === "ol" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="p-1 cursor-pointer" onClick={formatQuote}>
|
||||||
|
<span className="icon quote" />
|
||||||
|
<span className="text">Quote</span>
|
||||||
|
{blockType === "quote" && <span className="active" />}
|
||||||
|
</li>
|
||||||
|
{/* <button className="item" onClick={formatCode}>
|
||||||
|
<span className="icon code" />
|
||||||
|
<span className="text">Code Block</span>
|
||||||
|
{blockType === 'code' && <span className="active" />}
|
||||||
|
</button> */}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// export const BlockTypeSelect: FC<any> = () => {
|
||||||
|
// const [selected, setSelected] = useState(BLOCK_DATA[0]);
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="inline-flex pr-1">
|
||||||
|
// <Listbox value={selected} onChange={setSelected}>
|
||||||
|
// <div className="relative">
|
||||||
|
// <Listbox.Button className="relative w-full min-w-[160px] cursor-default rounded border border-[#e2e2e2] bg-white py-1 pl-3 pr-10 text-left outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-xs">
|
||||||
|
// <span className="block truncate">{selected.name}</span>
|
||||||
|
// <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||||
|
// <svg
|
||||||
|
// xmlns="http://www.w3.org/2000/svg"
|
||||||
|
// width="16"
|
||||||
|
// height="16"
|
||||||
|
// fill="currentColor"
|
||||||
|
// className="bi bi-chevron-down"
|
||||||
|
// viewBox="0 0 16 16"
|
||||||
|
// >
|
||||||
|
// <path
|
||||||
|
// fillRule="evenodd"
|
||||||
|
// d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
|
||||||
|
// ></path>
|
||||||
|
// </svg>
|
||||||
|
// </span>
|
||||||
|
// </Listbox.Button>
|
||||||
|
// <Transition
|
||||||
|
// as={Fragment}
|
||||||
|
// leave="transition ease-in duration-100"
|
||||||
|
// leaveFrom="opacity-100"
|
||||||
|
// leaveTo="opacity-0"
|
||||||
|
// >
|
||||||
|
// <Listbox.Options className="absolute mt-1 max-h-60 w-full min-w-[160px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||||
|
// {BLOCK_DATA.map((blockType, index) => (
|
||||||
|
// <Listbox.Option
|
||||||
|
// key={index}
|
||||||
|
// className={({ active }) =>
|
||||||
|
// `relative cursor-default select-none py-2 px-2 ${
|
||||||
|
// active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
|
||||||
|
// }`
|
||||||
|
// }
|
||||||
|
// value={blockType}
|
||||||
|
// >
|
||||||
|
// {({ selected }) => (
|
||||||
|
// <>
|
||||||
|
// <span
|
||||||
|
// className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
|
||||||
|
// >
|
||||||
|
// {blockType.name}
|
||||||
|
// </span>
|
||||||
|
// </>
|
||||||
|
// )}
|
||||||
|
// </Listbox.Option>
|
||||||
|
// ))}
|
||||||
|
// </Listbox.Options>
|
||||||
|
// </Transition>
|
||||||
|
// </div>
|
||||||
|
// </Listbox>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
156
components/lexical/toolbar/floating-link-editor.tsx
Normal file
156
components/lexical/toolbar/floating-link-editor.tsx
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
import { useRef, useState, useCallback, useEffect } from 'react';
|
||||||
|
import { SELECTION_CHANGE_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
|
||||||
|
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
|
||||||
|
import { mergeRegister } from '@lexical/utils';
|
||||||
|
|
||||||
|
// helper functions
|
||||||
|
import { positionEditorElement } from '../helpers/editor';
|
||||||
|
import { getSelectedNode } from '../helpers/node';
|
||||||
|
|
||||||
|
const LowPriority = 1;
|
||||||
|
|
||||||
|
export interface FloatingLinkEditorProps {
|
||||||
|
editor: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FloatingLinkEditor = ({ editor }: FloatingLinkEditorProps) => {
|
||||||
|
// refs
|
||||||
|
const editorRef = useRef<any>(null);
|
||||||
|
const inputRef = useRef<any>(null);
|
||||||
|
const mouseDownRef = useRef(false);
|
||||||
|
// states
|
||||||
|
const [linkUrl, setLinkUrl] = useState('');
|
||||||
|
const [isEditMode, setEditMode] = useState(false);
|
||||||
|
const [lastSelection, setLastSelection] = useState<any>(null);
|
||||||
|
|
||||||
|
const updateLinkEditor = useCallback(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
const node = getSelectedNode(selection);
|
||||||
|
const parent = node.getParent();
|
||||||
|
if ($isLinkNode(parent)) {
|
||||||
|
setLinkUrl(parent.getURL());
|
||||||
|
} else if ($isLinkNode(node)) {
|
||||||
|
setLinkUrl(node.getURL());
|
||||||
|
} else {
|
||||||
|
setLinkUrl('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const editorElem = editorRef.current;
|
||||||
|
const nativeSelection = window?.getSelection();
|
||||||
|
const activeElement = document.activeElement;
|
||||||
|
|
||||||
|
if (editorElem === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = editor.getRootElement();
|
||||||
|
if (
|
||||||
|
selection !== null &&
|
||||||
|
!nativeSelection?.isCollapsed &&
|
||||||
|
rootElement !== null &&
|
||||||
|
rootElement.contains(nativeSelection?.anchorNode)
|
||||||
|
) {
|
||||||
|
const domRange = nativeSelection?.getRangeAt(0);
|
||||||
|
let rect;
|
||||||
|
if (nativeSelection?.anchorNode === rootElement) {
|
||||||
|
let inner = rootElement;
|
||||||
|
while (inner.firstElementChild != null) {
|
||||||
|
inner = inner.firstElementChild;
|
||||||
|
}
|
||||||
|
rect = inner.getBoundingClientRect();
|
||||||
|
} else {
|
||||||
|
rect = domRange?.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!mouseDownRef.current) {
|
||||||
|
positionEditorElement(editorElem, rect);
|
||||||
|
}
|
||||||
|
setLastSelection(selection);
|
||||||
|
} else if (!activeElement || activeElement.className !== 'link-input') {
|
||||||
|
positionEditorElement(editorElem, null);
|
||||||
|
setLastSelection(null);
|
||||||
|
setEditMode(false);
|
||||||
|
setLinkUrl('');
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}, [editor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return mergeRegister(
|
||||||
|
editor.registerUpdateListener(({ editorState }: any) => {
|
||||||
|
editorState.read(() => {
|
||||||
|
updateLinkEditor();
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
|
||||||
|
editor.registerCommand(
|
||||||
|
SELECTION_CHANGE_COMMAND,
|
||||||
|
() => {
|
||||||
|
updateLinkEditor();
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
LowPriority
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, [editor, updateLinkEditor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
editor.getEditorState().read(() => {
|
||||||
|
updateLinkEditor();
|
||||||
|
});
|
||||||
|
}, [editor, updateLinkEditor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEditMode && inputRef?.current) {
|
||||||
|
inputRef.current.focus();
|
||||||
|
}
|
||||||
|
}, [isEditMode]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={editorRef} className="link-editor">
|
||||||
|
{isEditMode ? (
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
className="link-input"
|
||||||
|
value={linkUrl}
|
||||||
|
onChange={(event) => {
|
||||||
|
setLinkUrl(event.target.value);
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
event.preventDefault();
|
||||||
|
if (lastSelection !== null) {
|
||||||
|
if (linkUrl !== '') {
|
||||||
|
editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
|
||||||
|
}
|
||||||
|
setEditMode(false);
|
||||||
|
}
|
||||||
|
} else if (event.key === 'Escape') {
|
||||||
|
event.preventDefault();
|
||||||
|
setEditMode(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="link-input">
|
||||||
|
<a href={linkUrl} target="_blank" rel="noopener noreferrer">
|
||||||
|
{linkUrl}
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
className="link-edit"
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onMouseDown={(event) => event.preventDefault()}
|
||||||
|
onClick={() => {
|
||||||
|
setEditMode(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
430
components/lexical/toolbar/index.tsx
Normal file
430
components/lexical/toolbar/index.tsx
Normal file
@ -0,0 +1,430 @@
|
|||||||
|
import { useEffect, useState, useRef, useCallback } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import {
|
||||||
|
CAN_REDO_COMMAND,
|
||||||
|
CAN_UNDO_COMMAND,
|
||||||
|
REDO_COMMAND,
|
||||||
|
UNDO_COMMAND,
|
||||||
|
SELECTION_CHANGE_COMMAND,
|
||||||
|
FORMAT_TEXT_COMMAND,
|
||||||
|
FORMAT_ELEMENT_COMMAND,
|
||||||
|
$getSelection,
|
||||||
|
$isRangeSelection,
|
||||||
|
$createParagraphNode,
|
||||||
|
$getNodeByKey,
|
||||||
|
RangeSelection,
|
||||||
|
NodeSelection,
|
||||||
|
GridSelection,
|
||||||
|
} from "lexical";
|
||||||
|
import {
|
||||||
|
INSERT_ORDERED_LIST_COMMAND,
|
||||||
|
INSERT_UNORDERED_LIST_COMMAND,
|
||||||
|
REMOVE_LIST_COMMAND,
|
||||||
|
$isListNode,
|
||||||
|
ListNode,
|
||||||
|
} from "@lexical/list";
|
||||||
|
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
||||||
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||||
|
import {
|
||||||
|
$isParentElementRTL,
|
||||||
|
$wrapNodes,
|
||||||
|
$isAtNodeEnd,
|
||||||
|
} from "@lexical/selection";
|
||||||
|
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
|
||||||
|
import {
|
||||||
|
$createHeadingNode,
|
||||||
|
$createQuoteNode,
|
||||||
|
$isHeadingNode,
|
||||||
|
} from "@lexical/rich-text";
|
||||||
|
// custom elements
|
||||||
|
import { FloatingLinkEditor } from "./floating-link-editor";
|
||||||
|
import { BlockTypeSelect } from "./block-type-select";
|
||||||
|
|
||||||
|
const LowPriority = 1;
|
||||||
|
|
||||||
|
function getSelectedNode(selection: any) {
|
||||||
|
const anchor = selection.anchor;
|
||||||
|
const focus = selection.focus;
|
||||||
|
const anchorNode = selection.anchor.getNode();
|
||||||
|
const focusNode = selection.focus.getNode();
|
||||||
|
if (anchorNode === focusNode) {
|
||||||
|
return anchorNode;
|
||||||
|
}
|
||||||
|
const isBackward = selection.isBackward();
|
||||||
|
if (isBackward) {
|
||||||
|
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
|
||||||
|
} else {
|
||||||
|
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LexicalToolbar = () => {
|
||||||
|
// editor
|
||||||
|
const [editor] = useLexicalComposerContext();
|
||||||
|
// ref
|
||||||
|
const toolbarRef = useRef(null);
|
||||||
|
// states
|
||||||
|
const [canUndo, setCanUndo] = useState(false);
|
||||||
|
const [canRedo, setCanRedo] = useState(false);
|
||||||
|
const [blockType, setBlockType] = useState("paragraph");
|
||||||
|
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const [isRTL, setIsRTL] = useState(false);
|
||||||
|
const [isLink, setIsLink] = useState(false);
|
||||||
|
const [isBold, setIsBold] = useState(false);
|
||||||
|
const [isItalic, setIsItalic] = useState(false);
|
||||||
|
const [isUnderline, setIsUnderline] = useState(false);
|
||||||
|
const [isStrikethrough, setIsStrikethrough] = useState(false);
|
||||||
|
const [isCode, setIsCode] = useState(false);
|
||||||
|
|
||||||
|
const updateToolbar = useCallback(() => {
|
||||||
|
const selection = $getSelection();
|
||||||
|
if ($isRangeSelection(selection)) {
|
||||||
|
const anchorNode = selection.anchor.getNode();
|
||||||
|
const element =
|
||||||
|
anchorNode.getKey() === "root"
|
||||||
|
? anchorNode
|
||||||
|
: anchorNode.getTopLevelElementOrThrow();
|
||||||
|
const elementKey = element.getKey();
|
||||||
|
const elementDOM = editor.getElementByKey(elementKey);
|
||||||
|
if (elementDOM !== null) {
|
||||||
|
setSelectedElementKey(elementKey);
|
||||||
|
if ($isListNode(element)) {
|
||||||
|
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
|
||||||
|
const type = parentList ? parentList.getTag() : element.getTag();
|
||||||
|
setBlockType(type);
|
||||||
|
} else {
|
||||||
|
const type = $isHeadingNode(element)
|
||||||
|
? element.getTag()
|
||||||
|
: element.getType();
|
||||||
|
setBlockType(type);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Update text format
|
||||||
|
setIsBold(selection.hasFormat("bold"));
|
||||||
|
setIsItalic(selection.hasFormat("italic"));
|
||||||
|
setIsUnderline(selection.hasFormat("underline"));
|
||||||
|
setIsStrikethrough(selection.hasFormat("strikethrough"));
|
||||||
|
setIsRTL($isParentElementRTL(selection));
|
||||||
|
|
||||||
|
// Update links
|
||||||
|
const node = getSelectedNode(selection);
|
||||||
|
const parent = node.getParent();
|
||||||
|
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||||
|
setIsLink(true);
|
||||||
|
} else {
|
||||||
|
setIsLink(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [editor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return mergeRegister(
|
||||||
|
editor.registerUpdateListener(({ editorState }) => {
|
||||||
|
editorState.read(() => {
|
||||||
|
updateToolbar();
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
editor.registerCommand(
|
||||||
|
SELECTION_CHANGE_COMMAND,
|
||||||
|
(_payload, newEditor) => {
|
||||||
|
updateToolbar();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
LowPriority
|
||||||
|
),
|
||||||
|
editor.registerCommand(
|
||||||
|
CAN_UNDO_COMMAND,
|
||||||
|
(payload) => {
|
||||||
|
setCanUndo(payload);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
LowPriority
|
||||||
|
),
|
||||||
|
editor.registerCommand(
|
||||||
|
CAN_REDO_COMMAND,
|
||||||
|
(payload) => {
|
||||||
|
setCanRedo(payload);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
LowPriority
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, [editor, updateToolbar]);
|
||||||
|
|
||||||
|
const insertLink = useCallback(
|
||||||
|
(e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!isLink) {
|
||||||
|
editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
|
||||||
|
} else {
|
||||||
|
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[editor, isLink]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
|
||||||
|
ref={toolbarRef}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
disabled={!canUndo}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(UNDO_COMMAND, undefined);
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Undo"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-arrow-counterclockwise"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M8 3a5 5 0 11-4.546 2.914.5.5 0 00-.908-.417A6 6 0 108 2v1z"
|
||||||
|
></path>
|
||||||
|
<path d="M8 4.466V.534a.25.25 0 00-.41-.192L5.23 2.308a.25.25 0 000 .384l2.36 1.966A.25.25 0 008 4.466z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
disabled={!canRedo}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(REDO_COMMAND, undefined);
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Redo"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-arrow-clockwise"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M8 3a5 5 0 104.546 2.914.5.5 0 01.908-.417A6 6 0 118 2v1z"
|
||||||
|
></path>
|
||||||
|
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<BlockTypeSelect
|
||||||
|
editor={editor}
|
||||||
|
toolbarRef={toolbarRef}
|
||||||
|
blockType={blockType}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||||
|
}}
|
||||||
|
className={`p-2 mr-2 ${isBold ? "active" : ""}`}
|
||||||
|
aria-label="Format Bold"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-type-bold"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||||
|
}}
|
||||||
|
className={"p-2 mr-2" + (isItalic ? "active" : "")}
|
||||||
|
aria-label="Format Italics"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-type-italic"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||||
|
}}
|
||||||
|
className={"p-2 mr-2" + (isUnderline ? "active" : "")}
|
||||||
|
aria-label="Format Underline"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-type-underline"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
||||||
|
}}
|
||||||
|
className={"p-2 mr-2" + (isStrikethrough ? "active" : "")}
|
||||||
|
aria-label="Format Strikethrough"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-type-strikethrough"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 01-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
||||||
|
}}
|
||||||
|
className={"p-2 mr-2 " + (isCode ? "active" : "")}
|
||||||
|
aria-label="Insert Code"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-code"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={insertLink}
|
||||||
|
className={"p-2 mr-2 " + (isLink ? "active" : "")}
|
||||||
|
aria-label="Insert Link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-link"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M6.354 5.5H4a3 3 0 000 6h3a3 3 0 002.83-4H9c-.086 0-.17.01-.25.031A2 2 0 017 10.5H4a2 2 0 110-4h1.535c.218-.376.495-.714.82-1z"></path>
|
||||||
|
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{isLink &&
|
||||||
|
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Left Align"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-text-left"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M2 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Center Align"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-text-center"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M4 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm2-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Right Align"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-text-right"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M6 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm4-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
|
||||||
|
}}
|
||||||
|
className="p-2 mr-2"
|
||||||
|
aria-label="Justify Align"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-justify"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M2 12.5a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>{" "}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
58
components/lexical/viewer.tsx
Normal file
58
components/lexical/viewer.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||||
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||||
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
||||||
|
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
||||||
|
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
||||||
|
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
||||||
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||||
|
import { TRANSFORMERS } from "@lexical/markdown";
|
||||||
|
// custom plugins
|
||||||
|
import { CodeHighlightPlugin } from "./plugins/code-highlight";
|
||||||
|
import ReadOnlyPlugin from "./plugins/read-only";
|
||||||
|
// config
|
||||||
|
import { initialConfig } from "./config";
|
||||||
|
// helpers
|
||||||
|
import { getValidatedValue } from "./helpers/editor";
|
||||||
|
|
||||||
|
export interface RichTextViewerProps {
|
||||||
|
id: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RichTextViewer: FC<RichTextViewerProps> = (props) => {
|
||||||
|
// props
|
||||||
|
const { value, id } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LexicalComposer
|
||||||
|
initialConfig={{
|
||||||
|
...initialConfig,
|
||||||
|
namespace: id || "Lexical Editor",
|
||||||
|
editorState: getValidatedValue(value),
|
||||||
|
editable: false,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<RichTextPlugin
|
||||||
|
contentEditable={
|
||||||
|
<ContentEditable className='className="h-[450px] outline-none py-[15px] resize-none overflow-hidden text-ellipsis' />
|
||||||
|
}
|
||||||
|
placeholder={
|
||||||
|
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||||
|
Enter some text...
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ReadOnlyPlugin value={value} />
|
||||||
|
<HistoryPlugin />
|
||||||
|
<CodeHighlightPlugin />
|
||||||
|
<ListPlugin />
|
||||||
|
<LinkPlugin />
|
||||||
|
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||||
|
</div>
|
||||||
|
</LexicalComposer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RichTextViewer;
|
||||||
@ -175,7 +175,7 @@ const SprintView: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-gray-500">This sprint has no issues.</p>
|
<p className="text-sm text-gray-500">This cycle has no issues.</p>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full flex items-center justify-center">
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
|||||||
@ -18,6 +18,7 @@ import {
|
|||||||
PlusIcon,
|
PlusIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { divide } from "lodash";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||||
@ -190,7 +191,7 @@ const SingleBoard: React.FC<Props> = ({
|
|||||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
<div
|
<div
|
||||||
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 ${
|
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
|
||||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||||
} ${!show ? "hidden" : "block"}`}
|
} ${!show ? "hidden" : "block"}`}
|
||||||
{...provided.droppableProps}
|
{...provided.droppableProps}
|
||||||
@ -219,7 +220,7 @@ const SingleBoard: React.FC<Props> = ({
|
|||||||
key={key}
|
key={key}
|
||||||
className={`${
|
className={`${
|
||||||
key === "name"
|
key === "name"
|
||||||
? "text-sm font-medium mb-2"
|
? "text-sm mb-2"
|
||||||
: key === "description"
|
: key === "description"
|
||||||
? "text-xs text-black"
|
? "text-xs text-black"
|
||||||
: key === "priority"
|
: key === "priority"
|
||||||
@ -236,7 +237,7 @@ const SingleBoard: React.FC<Props> = ({
|
|||||||
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
|
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
|
||||||
: "text-sm text-gray-500"
|
: "text-sm text-gray-500"
|
||||||
} gap-1
|
} gap-1
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
{key === "target_date" ? (
|
{key === "target_date" ? (
|
||||||
<>
|
<>
|
||||||
@ -300,27 +301,27 @@ const SingleBoard: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* <div
|
{/* <div
|
||||||
className={`p-2 bg-indigo-50 flex items-center justify-between ${
|
className={`p-2 bg-indigo-50 flex items-center justify-between ${
|
||||||
snapshot.isDragging ? "bg-indigo-200" : ""
|
snapshot.isDragging ? "bg-indigo-200" : ""
|
||||||
}`}
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex flex-col"
|
||||||
|
{...provided.dragHandleProps}
|
||||||
>
|
>
|
||||||
<button
|
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
||||||
type="button"
|
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
|
||||||
className="flex flex-col"
|
</button>
|
||||||
{...provided.dragHandleProps}
|
<div className="flex gap-1 items-center">
|
||||||
>
|
<button type="button">
|
||||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
<HeartIcon className="h-4 w-4 text-yellow-500" />
|
||||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
|
|
||||||
</button>
|
</button>
|
||||||
<div className="flex gap-1 items-center">
|
<button type="button">
|
||||||
<button type="button">
|
<CheckCircleIcon className="h-4 w-4 text-green-500" />
|
||||||
<HeartIcon className="h-4 w-4 text-yellow-500" />
|
</button>
|
||||||
</button>
|
</div>
|
||||||
<button type="button">
|
</div> */}
|
||||||
<CheckCircleIcon className="h-4 w-4 text-green-500" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -21,6 +21,8 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
|
|||||||
import { Spinner } from "ui";
|
import { Spinner } from "ui";
|
||||||
// types
|
// types
|
||||||
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
|
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
|
||||||
|
import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
|
||||||
|
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
properties: Properties;
|
properties: Properties;
|
||||||
@ -35,6 +37,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
|
|||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
const [isIssueOpen, setIsIssueOpen] = useState(false);
|
const [isIssueOpen, setIsIssueOpen] = useState(false);
|
||||||
|
const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
|
||||||
|
const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
|
||||||
|
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
const [preloadedData, setPreloadedData] = useState<
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||||
@ -58,72 +62,96 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
|
|||||||
if (!result.destination) return;
|
if (!result.destination) return;
|
||||||
const { source, destination, type } = result;
|
const { source, destination, type } = result;
|
||||||
|
|
||||||
if (type === "state") {
|
if (destination.droppableId === "trashBox") {
|
||||||
const newStates = Array.from(states ?? []);
|
const removedItem = groupedByIssues[source.droppableId][source.index];
|
||||||
const [reorderedState] = newStates.splice(source.index, 1);
|
|
||||||
newStates.splice(destination.index, 0, reorderedState);
|
|
||||||
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
|
|
||||||
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
|
|
||||||
|
|
||||||
const sequenceNumber =
|
setIssueDeletionData(removedItem);
|
||||||
prevSequenceNumber && nextSequenceNumber
|
setIsIssueDeletionOpen(true);
|
||||||
? (prevSequenceNumber + nextSequenceNumber) / 2
|
|
||||||
: nextSequenceNumber
|
|
||||||
? nextSequenceNumber - 15000 / 2
|
|
||||||
: prevSequenceNumber
|
|
||||||
? prevSequenceNumber + 15000 / 2
|
|
||||||
: 15000;
|
|
||||||
|
|
||||||
newStates[destination.index].sequence = sequenceNumber;
|
console.log(removedItem);
|
||||||
|
|
||||||
mutateState(newStates, false);
|
|
||||||
if (!activeWorkspace) return;
|
|
||||||
stateServices
|
|
||||||
.patchState(activeWorkspace.slug, projectId as string, newStates[destination.index].id, {
|
|
||||||
sequence: sequenceNumber,
|
|
||||||
})
|
|
||||||
.then((response) => {
|
|
||||||
console.log(response);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(err);
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
if (source.droppableId !== destination.droppableId) {
|
if (type === "state") {
|
||||||
const sourceGroup = source.droppableId; // source group id
|
const newStates = Array.from(states ?? []);
|
||||||
const destinationGroup = destination.droppableId; // destination group id
|
const [reorderedState] = newStates.splice(source.index, 1);
|
||||||
if (!sourceGroup || !destinationGroup) return;
|
newStates.splice(destination.index, 0, reorderedState);
|
||||||
|
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
|
||||||
|
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
|
||||||
|
|
||||||
// removed/dragged item
|
const sequenceNumber =
|
||||||
const removedItem = groupedByIssues[source.droppableId][source.index];
|
prevSequenceNumber && nextSequenceNumber
|
||||||
|
? (prevSequenceNumber + nextSequenceNumber) / 2
|
||||||
|
: nextSequenceNumber
|
||||||
|
? nextSequenceNumber - 15000 / 2
|
||||||
|
: prevSequenceNumber
|
||||||
|
? prevSequenceNumber + 15000 / 2
|
||||||
|
: 15000;
|
||||||
|
|
||||||
if (selectedGroup === "priority") {
|
newStates[destination.index].sequence = sequenceNumber;
|
||||||
// update the removed item for mutation
|
|
||||||
removedItem.priority = destinationGroup;
|
|
||||||
|
|
||||||
// patch request
|
mutateState(newStates, false);
|
||||||
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
|
if (!activeWorkspace) return;
|
||||||
priority: destinationGroup,
|
stateServices
|
||||||
|
.patchState(
|
||||||
|
activeWorkspace.slug,
|
||||||
|
projectId as string,
|
||||||
|
newStates[destination.index].id,
|
||||||
|
{
|
||||||
|
sequence: sequenceNumber,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
});
|
});
|
||||||
} else if (selectedGroup === "state_detail.name") {
|
} else {
|
||||||
const destinationState = states?.find((s) => s.name === destinationGroup);
|
if (source.droppableId !== destination.droppableId) {
|
||||||
const destinationStateId = destinationState?.id;
|
const sourceGroup = source.droppableId; // source group id
|
||||||
|
const destinationGroup = destination.droppableId; // destination group id
|
||||||
|
if (!sourceGroup || !destinationGroup) return;
|
||||||
|
|
||||||
// update the removed item for mutation
|
// removed/dragged item
|
||||||
if (!destinationStateId || !destinationState) return;
|
const removedItem = groupedByIssues[source.droppableId][source.index];
|
||||||
removedItem.state = destinationStateId;
|
|
||||||
removedItem.state_detail = destinationState;
|
|
||||||
|
|
||||||
// patch request
|
if (selectedGroup === "priority") {
|
||||||
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
|
// update the removed item for mutation
|
||||||
state: destinationStateId,
|
removedItem.priority = destinationGroup;
|
||||||
});
|
|
||||||
|
// patch request
|
||||||
|
issuesServices.patchIssue(
|
||||||
|
activeWorkspace!.slug,
|
||||||
|
projectId as string,
|
||||||
|
removedItem.id,
|
||||||
|
{
|
||||||
|
priority: destinationGroup,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else if (selectedGroup === "state_detail.name") {
|
||||||
|
const destinationState = states?.find((s) => s.name === destinationGroup);
|
||||||
|
const destinationStateId = destinationState?.id;
|
||||||
|
|
||||||
|
// update the removed item for mutation
|
||||||
|
if (!destinationStateId || !destinationState) return;
|
||||||
|
removedItem.state = destinationStateId;
|
||||||
|
removedItem.state_detail = destinationState;
|
||||||
|
|
||||||
|
// patch request
|
||||||
|
issuesServices.patchIssue(
|
||||||
|
activeWorkspace!.slug,
|
||||||
|
projectId as string,
|
||||||
|
removedItem.id,
|
||||||
|
{
|
||||||
|
state: destinationStateId,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove item from the source group
|
||||||
|
groupedByIssues[source.droppableId].splice(source.index, 1);
|
||||||
|
// add item to the destination group
|
||||||
|
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
// remove item from the source group
|
|
||||||
groupedByIssues[source.droppableId].splice(source.index, 1);
|
|
||||||
// add item to the destination group
|
|
||||||
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -155,6 +183,11 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
|
|||||||
setIsOpen={setIsOpen}
|
setIsOpen={setIsOpen}
|
||||||
data={preloadedData as Partial<IIssue>}
|
data={preloadedData as Partial<IIssue>}
|
||||||
/> */}
|
/> */}
|
||||||
|
<ConfirmIssueDeletion
|
||||||
|
isOpen={isIssueDeletionOpen}
|
||||||
|
handleClose={() => setIsIssueDeletionOpen(false)}
|
||||||
|
data={issueDeletionData}
|
||||||
|
/>
|
||||||
<CreateUpdateIssuesModal
|
<CreateUpdateIssuesModal
|
||||||
isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"}
|
isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"}
|
||||||
setIsOpen={setIsIssueOpen}
|
setIsOpen={setIsIssueOpen}
|
||||||
@ -164,57 +197,69 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
|
|||||||
projectId={projectId as string}
|
projectId={projectId as string}
|
||||||
/>
|
/>
|
||||||
{groupedByIssues ? (
|
{groupedByIssues ? (
|
||||||
groupedByIssues ? (
|
<div className="h-full w-full">
|
||||||
<div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}>
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
{/* <StrictModeDroppable droppableId="trashBox">
|
||||||
<div className="h-full w-full overflow-hidden">
|
{(provided, snapshot) => (
|
||||||
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
|
<button
|
||||||
{(provided) => (
|
type="button"
|
||||||
<div
|
className={`fixed bottom-2 right-8 z-10 px-2 py-1 flex items-center gap-2 rounded-lg mb-5 text-red-600 text-sm bg-red-100 border-2 border-transparent ${
|
||||||
className="h-full w-full"
|
snapshot.isDraggingOver ? "border-red-600" : ""
|
||||||
{...provided.droppableProps}
|
}`}
|
||||||
ref={provided.innerRef}
|
{...provided.droppableProps}
|
||||||
>
|
ref={provided.innerRef}
|
||||||
<div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3">
|
>
|
||||||
{Object.keys(groupedByIssues).map((singleGroup, index) => (
|
<TrashIcon className="h-3 w-3" />
|
||||||
<SingleBoard
|
Drop to delete
|
||||||
key={singleGroup}
|
</button>
|
||||||
selectedGroup={selectedGroup}
|
)}
|
||||||
groupTitle={singleGroup}
|
</StrictModeDroppable> */}
|
||||||
createdBy={
|
<div className="h-full w-full overflow-hidden">
|
||||||
members
|
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
|
||||||
? members?.find((m) => m.member.id === singleGroup)?.member
|
{(provided) => (
|
||||||
.first_name
|
<div
|
||||||
: undefined
|
className="h-full w-full"
|
||||||
}
|
{...provided.droppableProps}
|
||||||
groupedByIssues={groupedByIssues}
|
ref={provided.innerRef}
|
||||||
index={index}
|
>
|
||||||
setIsIssueOpen={setIsIssueOpen}
|
<div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3">
|
||||||
properties={properties}
|
{Object.keys(groupedByIssues).map((singleGroup, index) => (
|
||||||
setPreloadedData={setPreloadedData}
|
<SingleBoard
|
||||||
stateId={
|
key={singleGroup}
|
||||||
selectedGroup === "state_detail.name"
|
selectedGroup={selectedGroup}
|
||||||
? states?.find((s) => s.name === singleGroup)?.id
|
groupTitle={singleGroup}
|
||||||
: undefined
|
createdBy={
|
||||||
}
|
members
|
||||||
bgColor={
|
? members?.find((m) => m.member.id === singleGroup)?.member.first_name
|
||||||
selectedGroup === "state_detail.name"
|
: undefined
|
||||||
? states?.find((s) => s.name === singleGroup)?.color
|
}
|
||||||
: undefined
|
groupedByIssues={groupedByIssues}
|
||||||
}
|
index={index}
|
||||||
/>
|
setIsIssueOpen={setIsIssueOpen}
|
||||||
))}
|
properties={properties}
|
||||||
</div>
|
setPreloadedData={setPreloadedData}
|
||||||
{provided.placeholder}
|
stateId={
|
||||||
|
selectedGroup === "state_detail.name"
|
||||||
|
? states?.find((s) => s.name === singleGroup)?.id
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
bgColor={
|
||||||
|
selectedGroup === "state_detail.name"
|
||||||
|
? states?.find((s) => s.name === singleGroup)?.color
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
{provided.placeholder}
|
||||||
</StrictModeDroppable>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</DragDropContext>
|
</StrictModeDroppable>
|
||||||
</div>
|
</div>
|
||||||
) : null
|
</DragDropContext>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full flex justify-center items-center">
|
<div className="h-full w-full flex justify-center items-center">
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -52,6 +52,7 @@ const SelectParent: React.FC<Props> = ({ control }) => {
|
|||||||
};
|
};
|
||||||
})}
|
})}
|
||||||
value={value}
|
value={value}
|
||||||
|
width="xs"
|
||||||
buttonClassName="max-h-30 overflow-y-scroll"
|
buttonClassName="max-h-30 overflow-y-scroll"
|
||||||
optionsClassName="max-h-30 overflow-y-scroll"
|
optionsClassName="max-h-30 overflow-y-scroll"
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
|||||||
@ -77,11 +77,11 @@ const ListView: React.FC<Props> = ({
|
|||||||
|
|
||||||
const handleHover = (issueId: string) => {
|
const handleHover = (issueId: string) => {
|
||||||
document.addEventListener("keydown", (e) => {
|
document.addEventListener("keydown", (e) => {
|
||||||
if (e.code === "Space") {
|
// if (e.code === "Space") {
|
||||||
e.preventDefault();
|
// e.preventDefault();
|
||||||
setPreviewModalIssueId(issueId);
|
// setPreviewModalIssueId(issueId);
|
||||||
setIssuePreviewModal(true);
|
// setIssuePreviewModal(true);
|
||||||
}
|
// }
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -21,7 +21,7 @@ import {
|
|||||||
// commons
|
// commons
|
||||||
import { classNames, copyTextToClipboard } from "constants/common";
|
import { classNames, copyTextToClipboard } from "constants/common";
|
||||||
// ui
|
// ui
|
||||||
import { Input, Button } from "ui";
|
import { Input, Button, Spinner } from "ui";
|
||||||
// icons
|
// icons
|
||||||
import {
|
import {
|
||||||
UserIcon,
|
UserIcon,
|
||||||
@ -32,6 +32,7 @@ import {
|
|||||||
ChartBarIcon,
|
ChartBarIcon,
|
||||||
ClipboardDocumentIcon,
|
ClipboardDocumentIcon,
|
||||||
LinkIcon,
|
LinkIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { Control } from "react-hook-form";
|
import type { Control } from "react-hook-form";
|
||||||
@ -50,7 +51,7 @@ const defaultValues: Partial<IIssueLabels> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
|
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
|
||||||
const { activeWorkspace, activeProject } = useUser();
|
const { activeWorkspace, activeProject, cycles } = useUser();
|
||||||
|
|
||||||
const { data: states } = useSWR<IState[]>(
|
const { data: states } = useSWR<IState[]>(
|
||||||
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
|
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
|
||||||
@ -121,6 +122,16 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
value: state.id,
|
value: state.id,
|
||||||
})),
|
})),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "Cycle",
|
||||||
|
name: "cycle",
|
||||||
|
canSelectMultipleOptions: false,
|
||||||
|
icon: ArrowPathIcon,
|
||||||
|
options: cycles?.map((cycle) => ({
|
||||||
|
label: cycle.name,
|
||||||
|
value: cycle.id,
|
||||||
|
})),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "Assignees",
|
label: "Assignees",
|
||||||
name: "assignees_list",
|
name: "assignees_list",
|
||||||
@ -153,6 +164,13 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const handleCycleChange = (cycleId: string) => {
|
||||||
|
if (activeWorkspace && activeProject && issueDetail)
|
||||||
|
issuesServices.addIssueToSprint(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||||
|
issue: issueDetail.id,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
@ -193,7 +211,10 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
as="div"
|
as="div"
|
||||||
value={value}
|
value={value}
|
||||||
multiple={item.canSelectMultipleOptions}
|
multiple={item.canSelectMultipleOptions}
|
||||||
onChange={(value: any) => submitChanges({ [item.name]: value })}
|
onChange={(value: any) => {
|
||||||
|
if (item.name === "cycle") handleCycleChange(value);
|
||||||
|
else submitChanges({ [item.name]: value });
|
||||||
|
}}
|
||||||
className="flex-shrink-0"
|
className="flex-shrink-0"
|
||||||
>
|
>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
@ -229,21 +250,31 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
>
|
>
|
||||||
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||||
<div className="p-1">
|
<div className="p-1">
|
||||||
{item.options?.map((option) => (
|
{item.options ? (
|
||||||
<Listbox.Option
|
item.options.length > 0 ? (
|
||||||
key={option.value}
|
item.options.map((option) => (
|
||||||
className={({ active, selected }) =>
|
<Listbox.Option
|
||||||
`${
|
key={option.value}
|
||||||
active || selected ? "text-white bg-theme" : "text-gray-900"
|
className={({ active, selected }) =>
|
||||||
} ${
|
`${
|
||||||
item.label === "Priority" && "capitalize"
|
active || selected
|
||||||
} cursor-pointer select-none relative p-2 rounded-md truncate`
|
? "text-white bg-theme"
|
||||||
}
|
: "text-gray-900"
|
||||||
value={option.value}
|
} ${
|
||||||
>
|
item.label === "Priority" && "capitalize"
|
||||||
{option.label}
|
} cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||||
</Listbox.Option>
|
}
|
||||||
))}
|
value={option.value}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</Listbox.Option>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center">No {item.label}s found</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<Spinner />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Listbox.Options>
|
</Listbox.Options>
|
||||||
</Transition>
|
</Transition>
|
||||||
@ -321,19 +352,29 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
>
|
>
|
||||||
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||||
<div className="p-1">
|
<div className="p-1">
|
||||||
{issueLabels?.map((label: any) => (
|
{issueLabels ? (
|
||||||
<Listbox.Option
|
issueLabels.length > 0 ? (
|
||||||
key={label.id}
|
issueLabels.map((label: any) => (
|
||||||
className={({ active, selected }) =>
|
<Listbox.Option
|
||||||
`${
|
key={label.id}
|
||||||
active || selected ? "text-white bg-theme" : "text-gray-900"
|
className={({ active, selected }) =>
|
||||||
} cursor-pointer select-none relative p-2 rounded-md truncate`
|
`${
|
||||||
}
|
active || selected
|
||||||
value={label.id}
|
? "text-white bg-theme"
|
||||||
>
|
: "text-gray-900"
|
||||||
{label.name}
|
} cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||||
</Listbox.Option>
|
}
|
||||||
))}
|
value={label.id}
|
||||||
|
>
|
||||||
|
{label.name}
|
||||||
|
</Listbox.Option>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center">No labels found</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<Spinner />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Listbox.Options>
|
</Listbox.Options>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|||||||
@ -45,7 +45,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative z-10 flex-shrink-0 border-2 border-white -ml-1.5">
|
<div className="relative z-10 flex-shrink-0 border-2 border-white rounded-full h-[34px] -ml-1.5">
|
||||||
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
|
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
|
||||||
<Image
|
<Image
|
||||||
src={activity.actor_detail.avatar}
|
src={activity.actor_detail.avatar}
|
||||||
|
|||||||
@ -39,7 +39,7 @@ const ProjectMemberInvitations = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`w-full h-full flex flex-col px-4 py-3 rounded-lg bg-indigo-50 ${
|
className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
|
||||||
selected ? "ring-2 ring-indigo-400" : ""
|
selected ? "ring-2 ring-indigo-400" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
77
components/workspace/SingleInvitation.tsx
Normal file
77
components/workspace/SingleInvitation.tsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
// next
|
||||||
|
import Image from "next/image";
|
||||||
|
// react
|
||||||
|
import { useState } from "react";
|
||||||
|
// types
|
||||||
|
import { IWorkspaceInvitation } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
invitation: IWorkspaceInvitation;
|
||||||
|
invitationsRespond: string[];
|
||||||
|
handleInvitation: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SingleInvitation: React.FC<Props> = ({
|
||||||
|
invitation,
|
||||||
|
invitationsRespond,
|
||||||
|
handleInvitation,
|
||||||
|
}) => {
|
||||||
|
const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<li>
|
||||||
|
<label
|
||||||
|
className={`group relative flex border-2 border-transparent items-start space-x-3 cursor-pointer px-4 py-4 ${
|
||||||
|
isChecked ? "border-theme rounded-lg" : ""
|
||||||
|
}`}
|
||||||
|
htmlFor={invitation.id}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<span className="inline-flex items-center justify-center h-10 w-10 rounded-lg">
|
||||||
|
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
|
||||||
|
<Image
|
||||||
|
src={invitation.workspace.logo}
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
className="rounded"
|
||||||
|
alt={invitation.workspace.name}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="h-full w-full p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase">
|
||||||
|
{invitation.workspace.name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Invited by {invitation.workspace.owner.first_name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 self-center">
|
||||||
|
<input
|
||||||
|
id={invitation.id}
|
||||||
|
aria-describedby="workspaces"
|
||||||
|
name={invitation.id}
|
||||||
|
checked={invitationsRespond.includes(invitation.id)}
|
||||||
|
value={invitation.workspace.name}
|
||||||
|
onChange={(e) => {
|
||||||
|
handleInvitation(
|
||||||
|
invitation,
|
||||||
|
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
|
||||||
|
);
|
||||||
|
setIsChecked(e.target.checked);
|
||||||
|
}}
|
||||||
|
type="checkbox"
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SingleInvitation;
|
||||||
@ -16,7 +16,6 @@ import {
|
|||||||
CURRENT_USER,
|
CURRENT_USER,
|
||||||
PROJECTS_LIST,
|
PROJECTS_LIST,
|
||||||
USER_WORKSPACES,
|
USER_WORKSPACES,
|
||||||
USER_WORKSPACE_INVITATIONS,
|
|
||||||
PROJECT_ISSUES_LIST,
|
PROJECT_ISSUES_LIST,
|
||||||
STATE_LIST,
|
STATE_LIST,
|
||||||
CYCLE_LIST,
|
CYCLE_LIST,
|
||||||
@ -24,7 +23,8 @@ import {
|
|||||||
|
|
||||||
// types
|
// types
|
||||||
import type { KeyedMutator } from "swr";
|
import type { KeyedMutator } from "swr";
|
||||||
import type { IUser, IWorkspace, IProject, IIssue, IssueResponse, ICycle, IState } from "types";
|
import type { IUser, IWorkspace, IProject, IssueResponse, ICycle, IState } from "types";
|
||||||
|
|
||||||
interface IUserContextProps {
|
interface IUserContextProps {
|
||||||
user?: IUser;
|
user?: IUser;
|
||||||
isUserLoading: boolean;
|
isUserLoading: boolean;
|
||||||
@ -38,8 +38,8 @@ interface IUserContextProps {
|
|||||||
activeProject?: IProject;
|
activeProject?: IProject;
|
||||||
issues?: IssueResponse;
|
issues?: IssueResponse;
|
||||||
mutateIssues: KeyedMutator<IssueResponse>;
|
mutateIssues: KeyedMutator<IssueResponse>;
|
||||||
sprints?: ICycle[];
|
cycles?: ICycle[];
|
||||||
mutateSprints: KeyedMutator<ICycle[]>;
|
mutateCycles: KeyedMutator<ICycle[]>;
|
||||||
states?: IState[];
|
states?: IState[];
|
||||||
mutateStates: KeyedMutator<IState[]>;
|
mutateStates: KeyedMutator<IState[]>;
|
||||||
}
|
}
|
||||||
@ -92,7 +92,7 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: sprints, mutate: mutateSprints } = useSWR<ICycle[]>(
|
const { data: cycles, mutate: mutateCycles } = useSWR<ICycle[]>(
|
||||||
activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null,
|
activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null,
|
||||||
activeWorkspace && activeProject
|
activeWorkspace && activeProject
|
||||||
? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id)
|
? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id)
|
||||||
@ -141,8 +141,8 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
|
|||||||
activeProject,
|
activeProject,
|
||||||
issues,
|
issues,
|
||||||
mutateIssues,
|
mutateIssues,
|
||||||
sprints,
|
cycles,
|
||||||
mutateSprints,
|
mutateCycles,
|
||||||
states,
|
states,
|
||||||
mutateStates,
|
mutateStates,
|
||||||
setActiveProject,
|
setActiveProject,
|
||||||
|
|||||||
@ -28,11 +28,13 @@ import {
|
|||||||
XMarkIcon,
|
XMarkIcon,
|
||||||
ArrowLongLeftIcon,
|
ArrowLongLeftIcon,
|
||||||
QuestionMarkCircleIcon,
|
QuestionMarkCircleIcon,
|
||||||
|
EllipsisHorizontalIcon,
|
||||||
|
ClipboardDocumentIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// constants
|
// constants
|
||||||
import { classNames } from "constants/common";
|
import { classNames, copyTextToClipboard } from "constants/common";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner, Tooltip } from "ui";
|
import { CustomListbox, Spinner, Tooltip } from "ui";
|
||||||
// types
|
// types
|
||||||
import type { IUser } from "types";
|
import type { IUser } from "types";
|
||||||
|
|
||||||
@ -423,23 +425,66 @@ const Sidebar: React.FC = () => {
|
|||||||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<Disclosure.Button
|
<div className="flex items-center">
|
||||||
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
|
<Disclosure.Button
|
||||||
sidebarCollapse ? "justify-center" : ""
|
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
|
||||||
}`}
|
sidebarCollapse ? "justify-center" : ""
|
||||||
>
|
}`}
|
||||||
<span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
|
>
|
||||||
{project?.name.charAt(0)}
|
<span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
|
||||||
</span>
|
{project?.name.charAt(0)}
|
||||||
{!sidebarCollapse && (
|
|
||||||
<span className="flex items-center justify-between w-full">
|
|
||||||
{project?.name}
|
|
||||||
<ChevronDownIcon
|
|
||||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
|
||||||
/>
|
|
||||||
</span>
|
</span>
|
||||||
|
{!sidebarCollapse && (
|
||||||
|
<span className="flex items-center justify-between w-full">
|
||||||
|
{project?.name}
|
||||||
|
<span>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`h-4 w-4 duration-300 ${
|
||||||
|
open ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Disclosure.Button>
|
||||||
|
{!sidebarCollapse && (
|
||||||
|
<Menu as="div" className="relative inline-block">
|
||||||
|
<Menu.Button className="grid relative place-items-center focus:outline-none">
|
||||||
|
<EllipsisHorizontalIcon className="h-4 w-4" />
|
||||||
|
</Menu.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
as={React.Fragment}
|
||||||
|
enter="transition ease-out duration-100"
|
||||||
|
enterFrom="transform opacity-0 scale-95"
|
||||||
|
enterTo="transform opacity-100 scale-100"
|
||||||
|
leave="transition ease-in duration-75"
|
||||||
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
|
leaveTo="transform opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||||
|
<div className="p-1">
|
||||||
|
<Menu.Item as="div">
|
||||||
|
{(active) => (
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
|
||||||
|
onClick={() =>
|
||||||
|
copyTextToClipboard(
|
||||||
|
`https://app.plane.so/projects/${project?.id}/issues/`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ClipboardDocumentIcon className="h-3 w-3" />
|
||||||
|
Copy Link
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
</div>
|
||||||
|
</Menu.Items>
|
||||||
|
</Transition>
|
||||||
|
</Menu>
|
||||||
)}
|
)}
|
||||||
</Disclosure.Button>
|
</div>
|
||||||
<Transition
|
<Transition
|
||||||
enter="transition duration-100 ease-out"
|
enter="transition duration-100 ease-out"
|
||||||
enterFrom="transform scale-95 opacity-0"
|
enterFrom="transform scale-95 opacity-0"
|
||||||
@ -509,21 +554,21 @@ const Sidebar: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
|
<div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
|
||||||
<button
|
<Tooltip content="Click to toggle sidebar" position="right">
|
||||||
type="button"
|
<button
|
||||||
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
|
type="button"
|
||||||
sidebarCollapse ? "justify-center w-full" : ""
|
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
|
||||||
}`}
|
sidebarCollapse ? "justify-center w-full" : ""
|
||||||
onClick={() => toggleCollapsed()}
|
}`}
|
||||||
>
|
onClick={() => toggleCollapsed()}
|
||||||
<Tooltip content="Click to toggle sidebar" position="right">
|
>
|
||||||
<ArrowLongLeftIcon
|
<ArrowLongLeftIcon
|
||||||
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
|
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
|
||||||
sidebarCollapse ? "rotate-180" : ""
|
sidebarCollapse ? "rotate-180" : ""
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</button>
|
||||||
</button>
|
</Tooltip>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|||||||
@ -92,8 +92,6 @@ class ProjectIssuesServices extends APIService {
|
|||||||
issue: string;
|
issue: string;
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
|
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
|
|||||||
@ -11,8 +11,12 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.7.3",
|
"@headlessui/react": "^1.7.3",
|
||||||
"@heroicons/react": "^2.0.12",
|
"@heroicons/react": "^2.0.12",
|
||||||
|
"@lexical/link": "^0.6.3",
|
||||||
|
"@lexical/react": "^0.5.0",
|
||||||
|
"@lexical/utils": "^0.5.0",
|
||||||
"axios": "^1.1.3",
|
"axios": "^1.1.3",
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
|
"lexical": "^0.5.0",
|
||||||
"next": "12.2.2",
|
"next": "12.2.2",
|
||||||
"prosemirror-example-setup": "^1.2.1",
|
"prosemirror-example-setup": "^1.2.1",
|
||||||
"prosemirror-model": "^1.18.1",
|
"prosemirror-model": "^1.18.1",
|
||||||
|
|||||||
@ -1,41 +1,26 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React from "react";
|
||||||
// next
|
import dynamic from "next/dynamic";
|
||||||
import type { NextPage } from "next";
|
|
||||||
// prose mirror
|
|
||||||
import { EditorState } from "prosemirror-state";
|
|
||||||
import { EditorView } from "prosemirror-view";
|
|
||||||
import { Schema, DOMParser } from "prosemirror-model";
|
|
||||||
import { schema } from "prosemirror-schema-basic";
|
|
||||||
import { addListNodes } from "prosemirror-schema-list";
|
|
||||||
import { exampleSetup } from "prosemirror-example-setup";
|
|
||||||
|
|
||||||
const Editor: NextPage = () => {
|
const RichTextEditor = dynamic(() => import("../components/lexical/editor"), {
|
||||||
const editorRef = useRef<HTMLDivElement>(null);
|
ssr: false,
|
||||||
const contentRef = useRef<HTMLDivElement>(null);
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
const LexicalViewer = dynamic(() => import("../components/lexical/viewer"), {
|
||||||
if (!editorRef.current || !contentRef.current) return;
|
ssr: false,
|
||||||
|
});
|
||||||
const mySchema = new Schema({
|
|
||||||
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
|
|
||||||
marks: schema.spec.marks,
|
|
||||||
});
|
|
||||||
|
|
||||||
const myEditorView = new EditorView(editorRef.current, {
|
|
||||||
state: EditorState.create({
|
|
||||||
doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
|
|
||||||
plugins: exampleSetup({ schema: mySchema }),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => myEditorView.destroy();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
const [value, setValue] = React.useState("");
|
||||||
|
const onChange: any = (value: any) => {
|
||||||
|
console.log(value);
|
||||||
|
setValue(value);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div id="editor" ref={editorRef}>
|
<>
|
||||||
<div id="content" ref={contentRef} />
|
<RichTextEditor onChange={onChange} value={value} id="editor" />
|
||||||
</div>
|
<LexicalViewer id="institution_viewer" value={value} />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Editor;
|
export default Home;
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
// next
|
// next
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// swr
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
@ -14,12 +13,19 @@ import useUser from "lib/hooks/useUser";
|
|||||||
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
|
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
|
||||||
// layouts
|
// layouts
|
||||||
import DefaultLayout from "layouts/DefaultLayout";
|
import DefaultLayout from "layouts/DefaultLayout";
|
||||||
|
// components
|
||||||
|
import SingleInvitation from "components/workspace/SingleInvitation";
|
||||||
// ui
|
// ui
|
||||||
import { Button, Spinner } from "ui";
|
import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
|
||||||
|
// icons
|
||||||
|
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { IWorkspaceInvitation } from "types";
|
import type { IWorkspaceInvitation } from "types";
|
||||||
|
<<<<<<< Updated upstream
|
||||||
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||||
|
=======
|
||||||
|
>>>>>>> Stashed changes
|
||||||
|
|
||||||
const OnBoard: NextPage = () => {
|
const OnBoard: NextPage = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -66,10 +72,15 @@ const OnBoard: NextPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
<<<<<<< Updated upstream
|
||||||
userService.updateUserOnBoard().then((response) => {
|
userService.updateUserOnBoard().then((response) => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
=======
|
||||||
|
if (workspaces && workspaces.length === 0) setCanRedirect(false);
|
||||||
|
}, [workspaces]);
|
||||||
|
>>>>>>> Stashed changes
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultLayout
|
<DefaultLayout
|
||||||
@ -85,9 +96,11 @@ const OnBoard: NextPage = () => {
|
|||||||
<p className="text-sm text-center">logged in as {user.email}</p>
|
<p className="text-sm text-center">logged in as {user.email}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
|
<div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
|
||||||
{invitations && workspaces ? (
|
{invitations && workspaces ? (
|
||||||
invitations.length > 0 ? (
|
invitations.length > 0 ? (
|
||||||
|
<<<<<<< Updated upstream
|
||||||
<div className="mt-3 sm:mt-5">
|
<div className="mt-3 sm:mt-5">
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
|
<h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
|
||||||
@ -128,10 +141,32 @@ const OnBoard: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<div className="max-w-lg">
|
||||||
|
<div className="mb-4">
|
||||||
|
<CubeIcon className="h-14 w-14 text-gray-400" />
|
||||||
|
>>>>>>> Stashed changes
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between mt-4">
|
<h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
|
||||||
|
<p className="mt-1 text-sm text-gray-500">
|
||||||
|
Select invites that you want to accept.
|
||||||
|
</p>
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||||
|
>
|
||||||
|
{invitations.map((invitation) => (
|
||||||
|
<SingleInvitation
|
||||||
|
key={invitation.id}
|
||||||
|
invitation={invitation}
|
||||||
|
invitationsRespond={invitationsRespond}
|
||||||
|
handleInvitation={handleInvitation}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="mt-6">
|
||||||
<Button className="w-full" onClick={submitInvitations}>
|
<Button className="w-full" onClick={submitInvitations}>
|
||||||
Continue to Dashboard
|
Accept and Continue
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -145,7 +145,9 @@ const MyIssues: NextPage = () => {
|
|||||||
<a>{myIssue.name}</a>
|
<a>{myIssue.name}</a>
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td>
|
<td className="px-3 py-4 max-w-[15rem] truncate">
|
||||||
|
{myIssue.description}
|
||||||
|
</td>
|
||||||
<td className="px-3 py-4">
|
<td className="px-3 py-4">
|
||||||
{myIssue.project_detail?.name}
|
{myIssue.project_detail?.name}
|
||||||
<br />
|
<br />
|
||||||
|
|||||||
@ -14,21 +14,18 @@ import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
|
|||||||
// layouts
|
// layouts
|
||||||
import AdminLayout from "layouts/AdminLayout";
|
import AdminLayout from "layouts/AdminLayout";
|
||||||
// components
|
// components
|
||||||
import SprintView from "components/project/cycles/CycleView";
|
import CycleView from "components/project/cycles/CycleView";
|
||||||
import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
|
import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
|
||||||
import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
|
import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
|
||||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||||
import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
|
import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner } from "ui";
|
import { BreadcrumbItem, Breadcrumbs, HeaderButton, Spinner, EmptySpace, EmptySpaceItem } from "ui";
|
||||||
// icons
|
// icons
|
||||||
import { PlusIcon } from "@heroicons/react/20/solid";
|
import { PlusIcon } from "@heroicons/react/20/solid";
|
||||||
|
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types";
|
import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types";
|
||||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
|
||||||
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
|
||||||
import HeaderButton from "ui/HeaderButton";
|
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
|
||||||
|
|
||||||
const ProjectSprints: NextPage = () => {
|
const ProjectSprints: NextPage = () => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
@ -44,7 +41,7 @@ const ProjectSprints: NextPage = () => {
|
|||||||
|
|
||||||
const { projectId } = router.query;
|
const { projectId } = router.query;
|
||||||
|
|
||||||
const { data: sprints } = useSWR<ICycle[]>(
|
const { data: cycles } = useSWR<ICycle[]>(
|
||||||
projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null,
|
projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null,
|
||||||
activeWorkspace && projectId
|
activeWorkspace && projectId
|
||||||
? () => sprintService.getCycles(activeWorkspace.slug, projectId as string)
|
? () => sprintService.getCycles(activeWorkspace.slug, projectId as string)
|
||||||
@ -52,14 +49,14 @@ const ProjectSprints: NextPage = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const openIssueModal = (
|
const openIssueModal = (
|
||||||
sprintId: string,
|
cycleId: string,
|
||||||
issue?: IIssue,
|
issue?: IIssue,
|
||||||
actionType: "create" | "edit" | "delete" = "create"
|
actionType: "create" | "edit" | "delete" = "create"
|
||||||
) => {
|
) => {
|
||||||
const sprint = sprints?.find((sprint) => sprint.id === sprintId);
|
const cycle = cycles?.find((cycle) => cycle.id === cycleId);
|
||||||
if (sprint) {
|
if (cycle) {
|
||||||
setSelectedSprint({
|
setSelectedSprint({
|
||||||
...sprint,
|
...cycle,
|
||||||
actionType: "create-issue",
|
actionType: "create-issue",
|
||||||
});
|
});
|
||||||
if (issue) setSelectedIssues({ ...issue, actionType });
|
if (issue) setSelectedIssues({ ...issue, actionType });
|
||||||
@ -67,16 +64,16 @@ const ProjectSprints: NextPage = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const addIssueToSprint = (sprintId: string, issueId: string) => {
|
const addIssueToSprint = (cycleId: string, issueId: string) => {
|
||||||
if (!activeWorkspace || !projectId) return;
|
if (!activeWorkspace || !projectId) return;
|
||||||
|
|
||||||
issuesServices
|
issuesServices
|
||||||
.addIssueToSprint(activeWorkspace.slug, projectId as string, sprintId, {
|
.addIssueToSprint(activeWorkspace.slug, projectId as string, cycleId, {
|
||||||
issue: issueId,
|
issue: issueId,
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
mutate(CYCLE_ISSUES(sprintId));
|
mutate(CYCLE_ISSUES(cycleId));
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
@ -134,8 +131,8 @@ const ProjectSprints: NextPage = () => {
|
|||||||
setIsOpen={setIsOpen}
|
setIsOpen={setIsOpen}
|
||||||
projectId={projectId as string}
|
projectId={projectId as string}
|
||||||
/>
|
/>
|
||||||
{sprints ? (
|
{cycles ? (
|
||||||
sprints.length > 0 ? (
|
cycles.length > 0 ? (
|
||||||
<div className="h-full w-full space-y-5">
|
<div className="h-full w-full space-y-5">
|
||||||
<Breadcrumbs>
|
<Breadcrumbs>
|
||||||
<BreadcrumbItem title="Projects" link="/projects" />
|
<BreadcrumbItem title="Projects" link="/projects" />
|
||||||
@ -146,15 +143,15 @@ const ProjectSprints: NextPage = () => {
|
|||||||
<HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
|
<HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
|
||||||
</div>
|
</div>
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
{sprints.map((sprint) => (
|
{cycles.map((cycle) => (
|
||||||
<SprintView
|
<CycleView
|
||||||
sprint={sprint}
|
key={cycle.id}
|
||||||
|
sprint={cycle}
|
||||||
selectSprint={setSelectedSprint}
|
selectSprint={setSelectedSprint}
|
||||||
projectId={projectId as string}
|
projectId={projectId as string}
|
||||||
workspaceSlug={activeWorkspace?.slug as string}
|
workspaceSlug={activeWorkspace?.slug as string}
|
||||||
openIssueModal={openIssueModal}
|
openIssueModal={openIssueModal}
|
||||||
addIssueToSprint={addIssueToSprint}
|
addIssueToSprint={addIssueToSprint}
|
||||||
key={sprint.id}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -162,12 +162,14 @@ const IssueDetail: NextPage = () => {
|
|||||||
/>
|
/>
|
||||||
</Breadcrumbs>
|
</Breadcrumbs>
|
||||||
<div className="flex items-center justify-between w-full">
|
<div className="flex items-center justify-between w-full">
|
||||||
<h2 className="text-2xl font-medium">{`${activeProject?.name}/${activeProject?.identifier}-${issueDetail?.sequence_id}`}</h2>
|
<h2 className="text-lg font-medium">{`${activeProject?.name ?? "Project"}/${
|
||||||
|
activeProject?.identifier ?? "..."
|
||||||
|
}-${issueDetail?.sequence_id ?? "..."}`}</h2>
|
||||||
<div className="flex items-center gap-x-3">
|
<div className="flex items-center gap-x-3">
|
||||||
<HeaderButton
|
<HeaderButton
|
||||||
Icon={ChevronLeftIcon}
|
Icon={ChevronLeftIcon}
|
||||||
disabled={!prevIssue}
|
|
||||||
label="Previous"
|
label="Previous"
|
||||||
|
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!prevIssue) return;
|
if (!prevIssue) return;
|
||||||
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
|
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
|
||||||
@ -177,6 +179,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
Icon={ChevronRightIcon}
|
Icon={ChevronRightIcon}
|
||||||
disabled={!nextIssue}
|
disabled={!nextIssue}
|
||||||
label="Next"
|
label="Next"
|
||||||
|
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!nextIssue) return;
|
if (!nextIssue) return;
|
||||||
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
|
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
|
||||||
@ -188,7 +191,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
{issueDetail && activeProject ? (
|
{issueDetail && activeProject ? (
|
||||||
<div className="grid grid-cols-4 gap-5">
|
<div className="grid grid-cols-4 gap-5">
|
||||||
<div className="col-span-3 space-y-5">
|
<div className="col-span-3 space-y-5">
|
||||||
<div className="bg-secondary rounded-lg p-5">
|
<div className="bg-secondary rounded-lg p-4">
|
||||||
<TextArea
|
<TextArea
|
||||||
id="name"
|
id="name"
|
||||||
placeholder="Enter issue name"
|
placeholder="Enter issue name"
|
||||||
@ -200,7 +203,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
handleSubmit(submitChanges)();
|
handleSubmit(submitChanges)();
|
||||||
}, 5000)}
|
}, 5000)}
|
||||||
mode="transparent"
|
mode="transparent"
|
||||||
className="text-3xl sm:text-3xl"
|
className="text-xl font-medium"
|
||||||
/>
|
/>
|
||||||
<TextArea
|
<TextArea
|
||||||
id="description"
|
id="description"
|
||||||
@ -217,7 +220,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
register={register}
|
register={register}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-secondary rounded-lg p-5">
|
<div className="bg-secondary rounded-lg p-4">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||||
<div className="w-full border-t border-gray-300" />
|
<div className="w-full border-t border-gray-300" />
|
||||||
@ -233,7 +236,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
<Tab
|
<Tab
|
||||||
key={item}
|
key={item}
|
||||||
className={({ selected }) =>
|
className={({ selected }) =>
|
||||||
`px-3 py-1 text-sm rounded-md border border-gray-700 ${
|
`px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
|
||||||
selected ? "bg-gray-700 text-white" : ""
|
selected ? "bg-gray-700 text-white" : ""
|
||||||
}`
|
}`
|
||||||
}
|
}
|
||||||
|
|||||||
@ -141,152 +141,154 @@ const ProjectIssues: NextPage = () => {
|
|||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
) : projectIssues.count > 0 ? (
|
) : projectIssues.count > 0 ? (
|
||||||
<div className="w-full space-y-5">
|
<>
|
||||||
<Breadcrumbs>
|
<div className="w-full space-y-5 mb-5">
|
||||||
<BreadcrumbItem title="Projects" link="/projects" />
|
<Breadcrumbs>
|
||||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
|
<BreadcrumbItem title="Projects" link="/projects" />
|
||||||
</Breadcrumbs>
|
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
|
||||||
<div className="flex items-center justify-between w-full">
|
</Breadcrumbs>
|
||||||
<h2 className="text-2xl font-medium">Project Issues</h2>
|
<div className="flex items-center justify-between w-full">
|
||||||
<div className="flex items-center gap-x-3">
|
<h2 className="text-2xl font-medium">Project Issues</h2>
|
||||||
<div className="flex items-center gap-x-1">
|
<div className="flex items-center gap-x-3">
|
||||||
<button
|
<div className="flex items-center gap-x-1">
|
||||||
type="button"
|
<button
|
||||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
type="button"
|
||||||
issueView === "list" ? "bg-gray-200" : ""
|
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||||
}`}
|
issueView === "list" ? "bg-gray-200" : ""
|
||||||
onClick={() => {
|
}`}
|
||||||
setIssueView("list");
|
onClick={() => {
|
||||||
setGroupByProperty(null);
|
setIssueView("list");
|
||||||
}}
|
setGroupByProperty(null);
|
||||||
>
|
}}
|
||||||
<ListBulletIcon className="h-4 w-4" />
|
>
|
||||||
</button>
|
<ListBulletIcon className="h-4 w-4" />
|
||||||
<button
|
</button>
|
||||||
type="button"
|
<button
|
||||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
type="button"
|
||||||
issueView === "kanban" ? "bg-gray-200" : ""
|
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||||
}`}
|
issueView === "kanban" ? "bg-gray-200" : ""
|
||||||
onClick={() => {
|
}`}
|
||||||
setIssueView("kanban");
|
onClick={() => {
|
||||||
setGroupByProperty("state_detail.name");
|
setIssueView("kanban");
|
||||||
}}
|
setGroupByProperty("state_detail.name");
|
||||||
>
|
}}
|
||||||
<Squares2X2Icon className="h-4 w-4" />
|
>
|
||||||
</button>
|
<Squares2X2Icon className="h-4 w-4" />
|
||||||
</div>
|
</button>
|
||||||
<Menu as="div" className="relative inline-block w-40">
|
|
||||||
<div className="w-full">
|
|
||||||
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
|
|
||||||
<span className="flex gap-x-1 items-center">
|
|
||||||
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
|
|
||||||
"No Grouping"}
|
|
||||||
</span>
|
|
||||||
<div className="flex-grow flex justify-end">
|
|
||||||
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
</Menu.Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Menu as="div" className="relative inline-block w-40">
|
||||||
|
<div className="w-full">
|
||||||
|
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
|
||||||
|
<span className="flex gap-x-1 items-center">
|
||||||
|
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
|
||||||
|
"No Grouping"}
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow flex justify-end">
|
||||||
|
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
</Menu.Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
enter="transition ease-out duration-100"
|
enter="transition ease-out duration-100"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="transform opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="transform opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="transform opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||||
<div className="p-1">
|
<div className="p-1">
|
||||||
{groupByOptions.map((option) => (
|
{groupByOptions.map((option) => (
|
||||||
<Menu.Item key={option.key}>
|
<Menu.Item key={option.key}>
|
||||||
{({ active }) => (
|
{({ active }) => (
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`${
|
|
||||||
active ? "bg-theme text-white" : "text-gray-900"
|
|
||||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
|
||||||
onClick={() => setGroupByProperty(option.key)}
|
|
||||||
>
|
|
||||||
{option.name}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
{issueView === "list" ? (
|
|
||||||
<Menu.Item>
|
|
||||||
{({ active }) => (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`hover:bg-theme hover:text-white ${
|
|
||||||
active ? "bg-theme text-white" : "text-gray-900"
|
|
||||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
|
||||||
onClick={() => setGroupByProperty(null)}
|
|
||||||
>
|
|
||||||
No grouping
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</Menu.Items>
|
|
||||||
</Transition>
|
|
||||||
</Menu>
|
|
||||||
<Popover className="relative">
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
|
|
||||||
<span>Properties</span>
|
|
||||||
<ChevronDownIcon className="h-4 w-4" />
|
|
||||||
</Popover.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="transition ease-out duration-200"
|
|
||||||
enterFrom="opacity-0 translate-y-1"
|
|
||||||
enterTo="opacity-100 translate-y-0"
|
|
||||||
leave="transition ease-in duration-150"
|
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
|
||||||
leaveTo="opacity-0 translate-y-1"
|
|
||||||
>
|
|
||||||
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
|
|
||||||
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
||||||
<div className="relative grid bg-white p-1">
|
|
||||||
{Object.keys(properties).map((key) => (
|
|
||||||
<button
|
<button
|
||||||
key={key}
|
type="button"
|
||||||
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
|
className={`${
|
||||||
onClick={() => setProperties(key as keyof Properties)}
|
active ? "bg-theme text-white" : "text-gray-900"
|
||||||
|
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||||
|
onClick={() => setGroupByProperty(option.key)}
|
||||||
>
|
>
|
||||||
<p className="capitalize">{key.replace("_", " ")}</p>
|
{option.name}
|
||||||
<span className="self-end">
|
|
||||||
{properties[key as keyof Properties] ? (
|
|
||||||
<EyeIcon width="18" height="18" />
|
|
||||||
) : (
|
|
||||||
<EyeSlashIcon width="18" height="18" />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
))}
|
||||||
|
{issueView === "list" ? (
|
||||||
|
<Menu.Item>
|
||||||
|
{({ active }) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`hover:bg-theme hover:text-white ${
|
||||||
|
active ? "bg-theme text-white" : "text-gray-900"
|
||||||
|
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||||
|
onClick={() => setGroupByProperty(null)}
|
||||||
|
>
|
||||||
|
No grouping
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Menu.Items>
|
||||||
|
</Transition>
|
||||||
|
</Menu>
|
||||||
|
<Popover className="relative">
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
|
||||||
|
<span>Properties</span>
|
||||||
|
<ChevronDownIcon className="h-4 w-4" />
|
||||||
|
</Popover.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
as={React.Fragment}
|
||||||
|
enter="transition ease-out duration-200"
|
||||||
|
enterFrom="opacity-0 translate-y-1"
|
||||||
|
enterTo="opacity-100 translate-y-0"
|
||||||
|
leave="transition ease-in duration-150"
|
||||||
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
|
leaveTo="opacity-0 translate-y-1"
|
||||||
|
>
|
||||||
|
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
|
||||||
|
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
||||||
|
<div className="relative grid bg-white p-1">
|
||||||
|
{Object.keys(properties).map((key) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
|
||||||
|
onClick={() => setProperties(key as keyof Properties)}
|
||||||
|
>
|
||||||
|
<p className="capitalize">{key.replace("_", " ")}</p>
|
||||||
|
<span className="self-end">
|
||||||
|
{properties[key as keyof Properties] ? (
|
||||||
|
<EyeIcon width="18" height="18" />
|
||||||
|
) : (
|
||||||
|
<EyeSlashIcon width="18" height="18" />
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Popover.Panel>
|
||||||
</Popover.Panel>
|
</Transition>
|
||||||
</Transition>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
</Popover>
|
||||||
</Popover>
|
<HeaderButton
|
||||||
<HeaderButton
|
Icon={PlusIcon}
|
||||||
Icon={PlusIcon}
|
label="Add Issue"
|
||||||
label="Add Issue"
|
onClick={() => {
|
||||||
onClick={() => {
|
const e = new KeyboardEvent("keydown", {
|
||||||
const e = new KeyboardEvent("keydown", {
|
key: "i",
|
||||||
key: "i",
|
ctrlKey: true,
|
||||||
ctrlKey: true,
|
});
|
||||||
});
|
document.dispatchEvent(e);
|
||||||
document.dispatchEvent(e);
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{issueView === "list" ? (
|
{issueView === "list" ? (
|
||||||
@ -298,14 +300,16 @@ const ProjectIssues: NextPage = () => {
|
|||||||
handleDeleteIssue={setDeleteIssue}
|
handleDeleteIssue={setDeleteIssue}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<BoardView
|
<div className="h-full pb-7 mb-7">
|
||||||
properties={properties}
|
<BoardView
|
||||||
selectedGroup={groupByProperty}
|
properties={properties}
|
||||||
groupedByIssues={groupedByIssues}
|
selectedGroup={groupByProperty}
|
||||||
members={members}
|
groupedByIssues={groupedByIssues}
|
||||||
/>
|
members={members}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
|
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
|
||||||
<EmptySpace
|
<EmptySpace
|
||||||
|
|||||||
@ -33,6 +33,8 @@ import {
|
|||||||
CheckIcon,
|
CheckIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
PencilSquareIcon,
|
PencilSquareIcon,
|
||||||
|
RectangleGroupIcon,
|
||||||
|
PencilIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
|
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
|
||||||
@ -58,6 +60,7 @@ const ProjectSettings: NextPage = () => {
|
|||||||
|
|
||||||
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
|
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
|
||||||
const [selectedState, setSelectedState] = useState<string | undefined>();
|
const [selectedState, setSelectedState] = useState<string | undefined>();
|
||||||
|
const [newGroupForm, setNewGroupForm] = useState(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -414,8 +417,8 @@ const ProjectSettings: NextPage = () => {
|
|||||||
<div className="w-full space-y-5">
|
<div className="w-full space-y-5">
|
||||||
{states?.map((state) => (
|
{states?.map((state) => (
|
||||||
<div
|
<div
|
||||||
className="border p-1 px-4 rounded flex justify-between items-center"
|
|
||||||
key={state.id}
|
key={state.id}
|
||||||
|
className="bg-white px-4 py-2 rounded flex justify-between items-center"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-x-2">
|
<div className="flex items-center gap-x-2">
|
||||||
<div
|
<div
|
||||||
@ -433,25 +436,69 @@ const ProjectSettings: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
className="flex items-center gap-x-1"
|
className="flex items-center gap-x-1"
|
||||||
onClick={() => setIsCreateStateModalOpen(true)}
|
onClick={() => setIsCreateStateModalOpen(true)}
|
||||||
>
|
>
|
||||||
<PlusIcon className="h-4 w-4 text-gray-400" />
|
<PlusIcon className="h-4 w-4" />
|
||||||
<span>Add State</span>
|
<span>Add State</span>
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="space-y-5">
|
<section className="space-y-5">
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
|
<div>
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
|
||||||
Manage the labels of this project.
|
<p className="mt-1 text-sm text-gray-500">
|
||||||
</p>
|
Manage the labels of this project.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className="flex items-center gap-x-1"
|
||||||
|
onClick={() => setNewGroupForm(true)}
|
||||||
|
>
|
||||||
|
<PlusIcon className="h-4 w-4" />
|
||||||
|
New group
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div
|
||||||
|
className={`bg-white px-4 py-2 flex items-center gap-2 ${
|
||||||
|
newGroupForm ? "" : "hidden"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Input type="text" name="groupName" />
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
theme="secondary"
|
||||||
|
onClick={() => setNewGroupForm(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="button">Save</Button>
|
||||||
|
</div>
|
||||||
|
{["", ""].map((group, index) => (
|
||||||
|
<div key={index} className="bg-white p-4 text-gray-900 rounded-md">
|
||||||
|
<h3 className="font-medium leading-5 flex items-center gap-2">
|
||||||
|
<RectangleGroupIcon className="h-5 w-5" />
|
||||||
|
This is the label group title
|
||||||
|
</h3>
|
||||||
|
<div className="pl-5 mt-4">
|
||||||
|
<div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
|
||||||
|
<h5 className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 bg-red-600 rounded-full"></div>
|
||||||
|
This is the label title
|
||||||
|
</h5>
|
||||||
|
<div className="hidden group-hover:block">
|
||||||
|
<PencilIcon className="h-3 w-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -95,7 +95,7 @@ const SignIn: NextPage = () => {
|
|||||||
>
|
>
|
||||||
{isGoogleAuthenticationLoading && (
|
{isGoogleAuthenticationLoading && (
|
||||||
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
|
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
|
||||||
<h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2>
|
<h2 className="text-2xl text-black">Signing in with Google. Please wait...</h2>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
|
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
|
||||||
|
|||||||
@ -18,11 +18,13 @@ import { Button } from "ui";
|
|||||||
// icons
|
// icons
|
||||||
import {
|
import {
|
||||||
ChartBarIcon,
|
ChartBarIcon,
|
||||||
|
CheckIcon,
|
||||||
ChevronRightIcon,
|
ChevronRightIcon,
|
||||||
CubeIcon,
|
CubeIcon,
|
||||||
ShareIcon,
|
ShareIcon,
|
||||||
StarIcon,
|
StarIcon,
|
||||||
UserIcon,
|
UserIcon,
|
||||||
|
XMarkIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||||
|
|
||||||
@ -60,87 +62,75 @@ const WorkspaceInvitation: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="bg-gray-50 rounded shadow-2xl border px-4 py-8 w-full md:w-1/3 space-y-4 flex flex-col justify-between">
|
{invitationDetail.accepted ? (
|
||||||
{invitationDetail.accepted ? (
|
<>
|
||||||
<>
|
<EmptySpace
|
||||||
<h2 className="text-2xl">
|
title={`You are already a member of ${invitationDetail.workspace.name}`}
|
||||||
You are already a member of {invitationDetail.workspace.name}
|
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||||
</h2>
|
>
|
||||||
<div className="w-full flex gap-x-4">
|
<EmptySpaceItem
|
||||||
<Link href="/signin">
|
Icon={CubeIcon}
|
||||||
<a className="w-full">
|
title="Continue to Dashboard"
|
||||||
<Button className="w-full">Go To Login Page</Button>
|
action={() => router.push("/")}
|
||||||
</a>
|
/>
|
||||||
</Link>
|
</EmptySpace>
|
||||||
</div>
|
</>
|
||||||
</>
|
) : (
|
||||||
) : (
|
<EmptySpace
|
||||||
<>
|
title={`You have been invited to ${invitationDetail.workspace.name}`}
|
||||||
<h2 className="text-2xl">
|
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||||
You have been invited to{" "}
|
>
|
||||||
<span className="font-semibold italic">
|
<EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
|
||||||
{invitationDetail.workspace.name}
|
<EmptySpaceItem
|
||||||
</span>
|
Icon={XMarkIcon}
|
||||||
</h2>
|
title="Ignore"
|
||||||
<div className="w-full flex gap-x-4">
|
action={() => {
|
||||||
<Link href="/">
|
router.push("/");
|
||||||
<a className="w-full">
|
}}
|
||||||
<Button theme="secondary" className="w-full">
|
/>
|
||||||
Ignore
|
</EmptySpace>
|
||||||
</Button>
|
)}
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Button className="w-full" onClick={handleAccept}>
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<EmptySpace
|
||||||
<EmptySpace
|
title="This invitation link is not active anymore."
|
||||||
title="This invitation link is not active anymore."
|
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
link={{ text: "Or start from an empty project", href: "/" }}
|
||||||
link={{ text: "Or start from an empty project", href: "/" }}
|
>
|
||||||
>
|
{!user ? (
|
||||||
{!user ? (
|
|
||||||
<EmptySpaceItem
|
|
||||||
Icon={UserIcon}
|
|
||||||
title="Sign in to continue"
|
|
||||||
action={() => {
|
|
||||||
router.push("/signin");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<EmptySpaceItem
|
|
||||||
Icon={CubeIcon}
|
|
||||||
title="Continue to Dashboard"
|
|
||||||
action={() => {
|
|
||||||
router.push("/");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
Icon={StarIcon}
|
Icon={UserIcon}
|
||||||
title="Star us on GitHub"
|
title="Sign in to continue"
|
||||||
action={() => {
|
action={() => {
|
||||||
router.push("https://github.com/makeplane");
|
router.push("/signin");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
Icon={ShareIcon}
|
Icon={CubeIcon}
|
||||||
title="Join our community of active creators"
|
title="Continue to Dashboard"
|
||||||
action={() => {
|
action={() => {
|
||||||
router.push("https://discord.com/invite/8SR2N9PAcJ");
|
router.push("/");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</EmptySpace>
|
)}
|
||||||
</>
|
<EmptySpaceItem
|
||||||
|
Icon={StarIcon}
|
||||||
|
title="Star us on GitHub"
|
||||||
|
action={() => {
|
||||||
|
router.push("https://github.com/makeplane");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<EmptySpaceItem
|
||||||
|
Icon={ShareIcon}
|
||||||
|
title="Join our community of active creators"
|
||||||
|
action={() => {
|
||||||
|
router.push("https://discord.com/invite/8SR2N9PAcJ");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</EmptySpace>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</DefaultLayout>
|
</DefaultLayout>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 267 B After Width: | Height: | Size: 287 B |
Binary file not shown.
|
Before Width: | Height: | Size: 584 B After Width: | Height: | Size: 366 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
1
public/favicon/site.webmanifest
Normal file
1
public/favicon/site.webmanifest
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||||
@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
|
|||||||
children,
|
children,
|
||||||
onClick,
|
onClick,
|
||||||
type = "button",
|
type = "button",
|
||||||
size = "rg",
|
size = "sm",
|
||||||
className,
|
className,
|
||||||
theme = "primary",
|
theme = "primary",
|
||||||
disabled = false,
|
disabled = false,
|
||||||
@ -36,12 +36,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
|
|||||||
"inline-flex items-center rounded justify-center font-medium",
|
"inline-flex items-center rounded justify-center font-medium",
|
||||||
theme === "primary"
|
theme === "primary"
|
||||||
? `${
|
? `${
|
||||||
disabled ? "bg-indigo-700 hover:bg-indigo-800" : "bg-theme hover:bg-indigo-700"
|
disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
|
||||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
|
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
|
||||||
: theme === "secondary"
|
: theme === "secondary"
|
||||||
? "border border-gray-300 bg-white"
|
? "border border-gray-300 bg-white"
|
||||||
: `${
|
: `${
|
||||||
disabled ? "bg-red-700 hover:bg-red-800" : "bg-red-600 hover:bg-red-700"
|
disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
|
||||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
|
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
|
||||||
size === "sm"
|
size === "sm"
|
||||||
? "p-2 text-xs"
|
? "p-2 text-xs"
|
||||||
|
|||||||
@ -13,7 +13,7 @@ const SearchListbox: React.FC<Props> = ({
|
|||||||
value,
|
value,
|
||||||
multiple: canSelectMultiple,
|
multiple: canSelectMultiple,
|
||||||
icon,
|
icon,
|
||||||
width,
|
width = "sm",
|
||||||
optionsFontsize,
|
optionsFontsize,
|
||||||
buttonClassName,
|
buttonClassName,
|
||||||
optionsClassName,
|
optionsClassName,
|
||||||
@ -83,7 +83,9 @@ const SearchListbox: React.FC<Props> = ({
|
|||||||
>
|
>
|
||||||
<Combobox.Options
|
<Combobox.Options
|
||||||
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
|
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
|
||||||
width === "sm"
|
width === "xs"
|
||||||
|
? "w-20"
|
||||||
|
: width === "sm"
|
||||||
? "w-32"
|
? "w-32"
|
||||||
: width === "md"
|
: width === "md"
|
||||||
? "w-48"
|
? "w-48"
|
||||||
|
|||||||
2
ui/SearchListbox/types.d.ts
vendored
2
ui/SearchListbox/types.d.ts
vendored
@ -9,6 +9,6 @@ export type Props = {
|
|||||||
icon?: JSX.Element;
|
icon?: JSX.Element;
|
||||||
buttonClassName?: string;
|
buttonClassName?: string;
|
||||||
optionsClassName?: string;
|
optionsClassName?: string;
|
||||||
width?: "sm" | "md" | "lg" | "xl" | "2xl";
|
width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
||||||
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
|
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||||
};
|
};
|
||||||
|
|||||||
@ -20,7 +20,7 @@ const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
|
|||||||
: "top-14"
|
: "top-14"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<p className="truncate text-sx">{content}</p>
|
<p className="truncate text-xs">{content}</p>
|
||||||
<span
|
<span
|
||||||
className={`absolute w-2 h-2 bg-black ${
|
className={`absolute w-2 h-2 bg-black ${
|
||||||
position === "top"
|
position === "top"
|
||||||
|
|||||||
191
yarn.lock
191
yarn.lock
@ -61,6 +61,187 @@
|
|||||||
resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
|
resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
|
||||||
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
||||||
|
|
||||||
|
"@lexical/clipboard@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/clipboard/-/clipboard-0.5.0.tgz#3d835289c0e1543a13a5fd032294aa2614e4373a"
|
||||||
|
integrity sha512-JFvdH4N/80GxC0jhaiO/fdUOeYcX8pMFrcrpBDeNIcBN/9eF8Rn/czvoPLLNB9Kcbz8d8XXqabKEGCz2hFL//w==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/html" "0.5.0"
|
||||||
|
"@lexical/list" "0.5.0"
|
||||||
|
"@lexical/selection" "0.5.0"
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/code@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/code/-/code-0.5.0.tgz#05c92e3b077af3148a494b44f5663dea14f7631f"
|
||||||
|
integrity sha512-GmqRaQ8EBtlu13ObSZYiGDzIsrkwRyyqI2HRVBrPo2iszLBpby+7uIncAVQVkxt1JNYOKE2n4JfxK8TSYyMtYQ==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
prismjs "^1.27.0"
|
||||||
|
|
||||||
|
"@lexical/dragon@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.5.0.tgz#54ec8812e3fb907af5913c5d0436b8d28fa4efe8"
|
||||||
|
integrity sha512-Gf0jN8hjlF8E71wAsvbRpR1u9oS6RUjUw3VWp/Qa+IrtjBFFVzdTUloUs3cjMX9E/MFRJgt3wPsaKx2IuLBWQw==
|
||||||
|
|
||||||
|
"@lexical/hashtag@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.5.0.tgz#dfe39ea73d1c4658c724419ef1113e27fb75a7f3"
|
||||||
|
integrity sha512-3MT72y72BmK4q7Rtb9gP3n83UL4vWC078T9io4zyPxKEI1Mh3UAVuRwh6Ypn0FeH94XvmuZAGVdoOC/nTd1now==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/history@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/history/-/history-0.5.0.tgz#5a13077e012f27f783beadca1c3fe545a2968f20"
|
||||||
|
integrity sha512-DCQgh1aQ1KS5JVYPU6GYr52BN0MQqmoXfFtf5uYCX9CbSAC0hDSK8ZPqwFW7jINqe6GwXxy7bo32j7E0A5023A==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/html@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/html/-/html-0.5.0.tgz#5eb2ccb9ffb7c24fff097db369d81431d7a98833"
|
||||||
|
integrity sha512-uJAof6gXTLOH9JnmPJ+wxILFtu7I/eCebFyVMjV53sqaeLsQ3pDfBTUe4RO+NciC+XBQ1WVpZgCM8Yx5c5cMmQ==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/selection" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/link@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.5.0.tgz#fa5f3baa1122eb2a1be12ac7a30977eb4c557e1e"
|
||||||
|
integrity sha512-XB8e+UPI9jeqsi7+Wr0n9SToljiS+gZmJ5gXANtR6lSZPtpcSUPs1iJZU2A2dNKXdvsZwSPCFdPL6ogFaaRvvQ==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/link@^0.6.3":
|
||||||
|
version "0.6.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.6.3.tgz#e09b670e69be7ea4509654aacec87e74b834d84f"
|
||||||
|
integrity sha512-duP+8OYEsIJ5AZLO5Y/cND+oNajvlc0geggmzrJ/XRcFiQAWXJ9BsmEeg6KZFzl2+Whkz3Zdkfu/1h80qllktA==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.6.3"
|
||||||
|
|
||||||
|
"@lexical/list@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.5.0.tgz#6ab4e1789d037af43f3d01012d2533c7c94daf15"
|
||||||
|
integrity sha512-TYXe4FtNL7Lk3XDEhPyUbT0Pb1TU58qZywGCdrtuRjPnF4oDvRXgg9EhYWfHzYwdsyhNgaHId+Fq41CjrwTMYg==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/list@0.6.3":
|
||||||
|
version "0.6.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.6.3.tgz#6389d051549860b53b93f53d537e116150ba20c7"
|
||||||
|
integrity sha512-zrQwX9J9hmLRjh4VkDykiv4P7et86ez85wAcvcoZNSwRGdLRMDxJLOyzJI6njr3CrebEKzHWVCsEcpn5T8bZcw==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.6.3"
|
||||||
|
|
||||||
|
"@lexical/mark@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/mark/-/mark-0.5.0.tgz#59c2a2a9f0ecfa063d48ce6f4a50e6d8bc6fcae1"
|
||||||
|
integrity sha512-leeqegWD4hqUdfYNsxB5iwsWozX2oc6mnJzcJfR4UB3Ksr0zH2xHc/z3Zp+CTeGuK5Tzppq5yGS+4cQ5xNpVgQ==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/markdown@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/markdown/-/markdown-0.5.0.tgz#3424a98e8600bc719f99bb4ab2484f0cf0e3c0f7"
|
||||||
|
integrity sha512-02RLx7PdVzvYxvx65FTbXkW6KcjQZ1waAaMDNKdtBV9r9Mv2Y2XunCUjErYHQ1JN9JkGGv0+JuliRT7qZTsF+Q==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/code" "0.5.0"
|
||||||
|
"@lexical/link" "0.5.0"
|
||||||
|
"@lexical/list" "0.5.0"
|
||||||
|
"@lexical/rich-text" "0.5.0"
|
||||||
|
"@lexical/text" "0.5.0"
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/offset@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/offset/-/offset-0.5.0.tgz#445aae1c74198dd4ed7d59669735925621139e0a"
|
||||||
|
integrity sha512-ie4AFbvtt0CFBqaMcb0/gUuhoTt+YwbFXPFo1hW+oDVpmo3rJsEJKVsHhftBvHIP+/G5QlgPIhVmnlcSvEteTw==
|
||||||
|
|
||||||
|
"@lexical/overflow@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/overflow/-/overflow-0.5.0.tgz#70daabdb96a3de9bf2f052ab2e38917aaf6e3b18"
|
||||||
|
integrity sha512-N+BQvgODU9lS7VK4FlxIRhGeASwsxfdkECtZ5iomHfqqNEI0WPLHbCTCkwS10rjfH1NrkXC314Y0SG2F7Ncv9Q==
|
||||||
|
|
||||||
|
"@lexical/plain-text@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/plain-text/-/plain-text-0.5.0.tgz#385ac7c67b34116578e45fe34cca41e9f62cbcad"
|
||||||
|
integrity sha512-t1rnVnSXbPs9jLN/36/xZLNAlF9jwv8rSh6GHsjRIYiWX/MovNmgPmhNq/nkc+gRFZ2FKTFjdz3UeAUF4xQZMw==
|
||||||
|
|
||||||
|
"@lexical/react@^0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/react/-/react-0.5.0.tgz#f227dd71f95e49bf817d648b9ffd5a31850876bc"
|
||||||
|
integrity sha512-bba0KXslxjf6M8XXJhx1rsrq9UV/6eo73WCZel2K+tGz8NEn1HCRTebQoebmRikzEQatEa3SoB6R47drMlk7Yw==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/clipboard" "0.5.0"
|
||||||
|
"@lexical/code" "0.5.0"
|
||||||
|
"@lexical/dragon" "0.5.0"
|
||||||
|
"@lexical/hashtag" "0.5.0"
|
||||||
|
"@lexical/history" "0.5.0"
|
||||||
|
"@lexical/link" "0.5.0"
|
||||||
|
"@lexical/list" "0.5.0"
|
||||||
|
"@lexical/mark" "0.5.0"
|
||||||
|
"@lexical/markdown" "0.5.0"
|
||||||
|
"@lexical/overflow" "0.5.0"
|
||||||
|
"@lexical/plain-text" "0.5.0"
|
||||||
|
"@lexical/rich-text" "0.5.0"
|
||||||
|
"@lexical/selection" "0.5.0"
|
||||||
|
"@lexical/table" "0.5.0"
|
||||||
|
"@lexical/text" "0.5.0"
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
"@lexical/yjs" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/rich-text@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/rich-text/-/rich-text-0.5.0.tgz#9b7ddacdd74a49761f15486ed2846c5117a55d14"
|
||||||
|
integrity sha512-JhgMn70K410j3T/2WefPpEswZ+hWF3aJMNu7zkrCf2wB+KdrrGYoeNSZUzg2r4e6BuJgS117KlD99+MDnokCuw==
|
||||||
|
|
||||||
|
"@lexical/selection@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/selection/-/selection-0.5.0.tgz#fe94f06fb17d9f5848921a0bbce10774398d3486"
|
||||||
|
integrity sha512-6I5qlqkYDIbDZPGwSOuvpWQUrqMY6URaKwrWsijQZMnNNKscGpC7IKb7sSDKn6YkLm7tuqig3hf2p+6hshkyWg==
|
||||||
|
|
||||||
|
"@lexical/table@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.5.0.tgz#cf33fac7c2e0b520ab4747f9322cce434d117cb6"
|
||||||
|
integrity sha512-VNHWSsTFDSHNzLdQOR9qgKx4tvTuiDz6w0GfwBnMP4Ro2iKKtNowmZO4wDEZtVlUHvLMuOGuYqipOtKEDKbD4w==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/table@0.6.3":
|
||||||
|
version "0.6.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.6.3.tgz#10eb7f1edd0269da18352145854ba0fc41d709f1"
|
||||||
|
integrity sha512-7ces57Y9wBwr2UXccXguyFC87QF6epdp2EZybb8yVEoWvMM5z51CnWELEbADYv5lnevPS2LC8LtJV3v1iSPZbA==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/utils" "0.6.3"
|
||||||
|
|
||||||
|
"@lexical/text@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/text/-/text-0.5.0.tgz#803e34d9b1e2430e8062d2db50c7452d4e03c86e"
|
||||||
|
integrity sha512-RqhOBU2Ecg0WVW8p1d3OB2a8sQyvh3suADdr7We50+Dn/k1M+jhKVWiQnf07ve4/yqYTj6/9/8AAg7kuNS2P/A==
|
||||||
|
|
||||||
|
"@lexical/utils@0.5.0", "@lexical/utils@^0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.5.0.tgz#4f03e8090e65cde5e81801ab08a2450e2e03733a"
|
||||||
|
integrity sha512-FhQ+thPFTOyBxyRGcd3yJuYh/rvD8ro43DaelWD1KpSlwQ/YuWpdxsSuMqJ32ERpl+bmPPFP2kjkBofxSw1Quw==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/list" "0.5.0"
|
||||||
|
"@lexical/table" "0.5.0"
|
||||||
|
|
||||||
|
"@lexical/utils@0.6.3":
|
||||||
|
version "0.6.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.6.3.tgz#85276f9ef095d23634cb3f2d059f5781cee656ec"
|
||||||
|
integrity sha512-LijfKzH9Fdl30eZ/fWDigLsRPs/rz8sZAnRg6UsJGKR1SS3PeWLoO4RRWhnNzpMypVX8UdvbKv1DxMjQn3d/kw==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/list" "0.6.3"
|
||||||
|
"@lexical/table" "0.6.3"
|
||||||
|
|
||||||
|
"@lexical/yjs@0.5.0":
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@lexical/yjs/-/yjs-0.5.0.tgz#a6a6e12f5eceaa5a37ae7999b97ba8ce217987b6"
|
||||||
|
integrity sha512-2io4GqnRoSh6Nu9bzsDOlwPFJYjXZ9SdgU4ZioH2VvyW4wVstd+ZF2QVcUJlhuwgQr6DzuvM/pqN914IufLzpw==
|
||||||
|
dependencies:
|
||||||
|
"@lexical/offset" "0.5.0"
|
||||||
|
|
||||||
"@next/env@12.2.2":
|
"@next/env@12.2.2":
|
||||||
version "12.2.2"
|
version "12.2.2"
|
||||||
resolved "https://registry.npmjs.org/@next/env/-/env-12.2.2.tgz"
|
resolved "https://registry.npmjs.org/@next/env/-/env-12.2.2.tgz"
|
||||||
@ -1424,6 +1605,11 @@ levn@^0.4.1:
|
|||||||
prelude-ls "^1.2.1"
|
prelude-ls "^1.2.1"
|
||||||
type-check "~0.4.0"
|
type-check "~0.4.0"
|
||||||
|
|
||||||
|
lexical@^0.5.0:
|
||||||
|
version "0.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.5.0.tgz#03a8abc816f6d922384ecd01bd14ed36a1ea4d63"
|
||||||
|
integrity sha512-J0cFuNPQQY5P9W5XW2/xgqp5W0eEQ2rxShLf8eevLvxFWsPSY3zjg3RCzTHyheSiGBBjKDIaM4gxtO8eNeJr2A==
|
||||||
|
|
||||||
lilconfig@^2.0.5, lilconfig@^2.0.6:
|
lilconfig@^2.0.5, lilconfig@^2.0.6:
|
||||||
version "2.0.6"
|
version "2.0.6"
|
||||||
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
|
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
|
||||||
@ -1769,6 +1955,11 @@ prelude-ls@^1.2.1:
|
|||||||
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
|
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
|
||||||
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
|
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
|
||||||
|
|
||||||
|
prismjs@^1.27.0:
|
||||||
|
version "1.29.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
|
||||||
|
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
|
||||||
|
|
||||||
prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
|
prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
|
||||||
version "15.8.1"
|
version "15.8.1"
|
||||||
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user