forked from github/plane
feat: markdown to custom component
This commit is contained in:
anmolsinghbhatia
parent
6684dd4ab6
commit
eb99b4adc9
@ -45,6 +45,7 @@ import {
|
||||
ChangeIssuePriority,
|
||||
ChangeIssueAssignee,
|
||||
ChangeInterfaceTheme,
|
||||
ProductUpdatesModal,
|
||||
} from "components/command-palette";
|
||||
import { BulkDeleteIssuesModal } from "components/core";
|
||||
import { CreateUpdateCycleModal } from "components/cycles";
|
||||
@ -74,6 +75,7 @@ export const CommandPalette: React.FC = () => {
|
||||
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
|
||||
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
|
||||
const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
|
||||
const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
|
||||
const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
|
||||
const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
|
||||
const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
|
||||
@ -221,6 +223,8 @@ export const CommandPalette: React.FC = () => {
|
||||
setIsCreateCycleModalOpen(true);
|
||||
} else if (keyPressed === "m") {
|
||||
setIsCreateModuleModalOpen(true);
|
||||
} else if (keyPressed === "u") {
|
||||
setIsProductUpdatesModalOpen(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -324,6 +328,10 @@ export const CommandPalette: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
|
||||
<ProductUpdatesModal
|
||||
isOpen={isProductUpdatesModalOpen}
|
||||
setIsOpen={setIsProductUpdatesModalOpen}
|
||||
/>
|
||||
{workspaceSlug && (
|
||||
<CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
|
||||
)}
|
||||
@ -393,7 +401,7 @@ export const CommandPalette: React.FC = () => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl bg-brand-surface-2 border-brand-base border shadow-2xl transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl border border-brand-base bg-brand-surface-2 shadow-2xl transition-all">
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
if (value.toLowerCase().includes(search.toLowerCase())) return 1;
|
||||
|
||||
@ -4,3 +4,4 @@ export * from "./change-issue-state";
|
||||
export * from "./change-issue-priority";
|
||||
export * from "./change-issue-assignee";
|
||||
export * from "./change-interface-theme";
|
||||
export * from "./product-updates-modal";
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
import React from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/20/solid";
|
||||
import workspaceService from "services/workspace.service";
|
||||
import { MarkdownRenderer } from "components/ui";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
|
||||
console.log("updates:", updates);
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20 max-h-96 overflow-y-auto" onClose={setIsOpen}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="max-h-[600px] overflow-y-auto bg-white p-5">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="flex justify-between text-lg font-medium leading-6 text-gray-900"
|
||||
>
|
||||
<span>Product Updates</span>
|
||||
<span>
|
||||
<button type="button" onClick={() => setIsOpen(false)}>
|
||||
<XMarkIcon
|
||||
className="h-6 w-6 text-gray-400 hover:text-gray-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</Dialog.Title>
|
||||
{updates &&
|
||||
updates.length > 0 &&
|
||||
updates.map((item: any) => <MarkdownRenderer markdown={item.body} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
@ -20,3 +20,4 @@ export * from "./progress-bar";
|
||||
export * from "./spinner";
|
||||
export * from "./tooltip";
|
||||
export * from "./toggle-switch";
|
||||
export * from "./markdown-to-component";
|
||||
|
||||
77
apps/app/components/ui/markdown-to-component.tsx
Normal file
77
apps/app/components/ui/markdown-to-component.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
interface CustomComponentProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
type CustomComponent = React.ComponentType<CustomComponentProps>;
|
||||
|
||||
interface Props {
|
||||
markdown: string;
|
||||
components?: {
|
||||
a?: CustomComponent;
|
||||
blockquote?: CustomComponent;
|
||||
code?: CustomComponent;
|
||||
del?: CustomComponent;
|
||||
em?: CustomComponent;
|
||||
heading?: CustomComponent;
|
||||
hr?: CustomComponent;
|
||||
image?: CustomComponent;
|
||||
inlineCode?: CustomComponent;
|
||||
link?: CustomComponent;
|
||||
list?: CustomComponent;
|
||||
listItem?: CustomComponent;
|
||||
paragraph?: CustomComponent;
|
||||
strong?: CustomComponent;
|
||||
table?: CustomComponent;
|
||||
tableCell?: CustomComponent;
|
||||
tableHead?: CustomComponent;
|
||||
tableRow?: CustomComponent;
|
||||
};
|
||||
options?: any;
|
||||
}
|
||||
|
||||
const HeadingPrimary: CustomComponent = ({ children }) => (
|
||||
<h1 className="text-lg font-semibold text-brand-base">{children}</h1>
|
||||
);
|
||||
|
||||
const HeadingSecondary: CustomComponent = ({ children }) => (
|
||||
<h3 className="text-base font-semibold text-brand-base">{children}</h3>
|
||||
);
|
||||
|
||||
const Paragraph: CustomComponent = ({ children }) => (
|
||||
<p className="text-sm text-brand-secondary">{children}</p>
|
||||
);
|
||||
|
||||
const OrderedList: CustomComponent = ({ children }) => (
|
||||
<ol className="ml-8 mb-4 list-decimal text-sm text-brand-secondary">{children}</ol>
|
||||
);
|
||||
|
||||
const UnorderedList: CustomComponent = ({ children }) => (
|
||||
<ul className="ml-8 mb-4 list-disc text-sm text-brand-secondary">{children}</ul>
|
||||
);
|
||||
|
||||
const Link: CustomComponent = ({ href, children }) => (
|
||||
<a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
|
||||
export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
|
||||
const customComponents = {
|
||||
h1: HeadingPrimary,
|
||||
h3: HeadingSecondary,
|
||||
p: Paragraph,
|
||||
ol: OrderedList,
|
||||
ul: UnorderedList,
|
||||
a: Link,
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactMarkdown components={customComponents} {...options}>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
};
|
||||
@ -36,6 +36,7 @@
|
||||
"react-dom": "18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-hook-form": "^7.38.0",
|
||||
"react-markdown": "^8.0.7",
|
||||
"recharts": "^2.3.2",
|
||||
"remirror": "^2.0.23",
|
||||
"swr": "^1.3.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user