-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Removed Issue Embeds from the Document Editor (#3449)
* fix: issue embed going to next line when selected on slash commands * fix: issue suggestions selecting next embed on arrow down * fix: pages crashing, because of incorrect data type * chore: removed issue embeds from document editor and page interface * fix: upgraded issue widget card to show only Placeholder * fix: pricing url changes for issue embed placeholder * fix: build errors
- Loading branch information
1 parent
8d3ea5b
commit 1a1594e
Showing
10 changed files
with
82 additions
and
241 deletions.
There are no files selected for viewing
69 changes: 21 additions & 48 deletions
69
packages/editor/document-editor/src/ui/extensions/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,29 @@ | ||
| import Placeholder from "@tiptap/extension-placeholder"; | ||
| import { IssueWidgetExtension } from "src/ui/extensions/widgets/issue-embed-widget"; | ||
|
|
||
| import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; | ||
| import { IssueWidgetPlaceholder } from "src/ui/extensions/widgets/issue-embed-widget"; | ||
|
|
||
| import { SlashCommand, DragAndDrop } from "@plane/editor-extensions"; | ||
| import { ISlashCommandItem, UploadImage } from "@plane/editor-core"; | ||
| import { IssueSuggestions } from "src/ui/extensions/widgets/issue-embed-suggestion-list"; | ||
| import { LayersIcon } from "@plane/ui"; | ||
| import { UploadImage } from "@plane/editor-core"; | ||
|
|
||
| export const DocumentEditorExtensions = ( | ||
| uploadFile: UploadImage, | ||
| issueEmbedConfig?: IIssueEmbedConfig, | ||
| setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, | ||
| setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void | ||
| ) => { | ||
| const additionalOptions: ISlashCommandItem[] = [ | ||
| { | ||
| key: "issue_embed", | ||
| title: "Issue embed", | ||
| description: "Embed an issue from the project.", | ||
| searchTerms: ["issue", "link", "embed"], | ||
| icon: <LayersIcon className="h-3.5 w-3.5" />, | ||
| command: ({ editor, range }) => { | ||
| editor | ||
| .chain() | ||
| .focus() | ||
| .insertContentAt( | ||
| range, | ||
| "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>\n" | ||
| ) | ||
| .run(); | ||
| }, | ||
| }, | ||
| ]; | ||
| setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void, | ||
| setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void | ||
| ) => [ | ||
| SlashCommand(uploadFile, setIsSubmitting), | ||
| DragAndDrop(setHideDragHandle), | ||
| Placeholder.configure({ | ||
| placeholder: ({ node }) => { | ||
| if (node.type.name === "heading") { | ||
| return `Heading ${node.attrs.level}`; | ||
| } | ||
| if (node.type.name === "image" || node.type.name === "table") { | ||
| return ""; | ||
| } | ||
|
|
||
| return [ | ||
| SlashCommand(uploadFile, setIsSubmitting, additionalOptions), | ||
| DragAndDrop(setHideDragHandle), | ||
| Placeholder.configure({ | ||
| placeholder: ({ node }) => { | ||
| if (node.type.name === "heading") { | ||
| return `Heading ${node.attrs.level}`; | ||
| } | ||
| if (node.type.name === "image" || node.type.name === "table") { | ||
| return ""; | ||
| } | ||
| return "Press '/' for commands..."; | ||
| }, | ||
| includeChildren: true, | ||
| }), | ||
| IssueWidgetPlaceholder(), | ||
| ]; | ||
|
|
||
| return "Press '/' for commands..."; | ||
| }, | ||
| includeChildren: true, | ||
| }), | ||
| IssueWidgetExtension({ issueEmbedConfig }), | ||
| IssueSuggestions(issueEmbedConfig ? issueEmbedConfig.issues : []), | ||
| ]; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 1 addition & 9 deletions
10
packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,3 @@ | ||
| import { IssueWidget } from "src/ui/extensions/widgets/issue-embed-widget/issue-widget-node"; | ||
| import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; | ||
|
|
||
| interface IssueWidgetExtensionProps { | ||
| issueEmbedConfig?: IIssueEmbedConfig; | ||
| } | ||
|
|
||
| export const IssueWidgetExtension = ({ issueEmbedConfig }: IssueWidgetExtensionProps) => | ||
| IssueWidget.configure({ | ||
| issueEmbedConfig, | ||
| }); | ||
| export const IssueWidgetPlaceholder = () => IssueWidget.configure({}); |
96 changes: 26 additions & 70 deletions
96
...editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,33 @@ | ||
| // @ts-nocheck | ||
| import { useState, useEffect } from "react"; | ||
| import { Button } from "@plane/ui"; | ||
| import { NodeViewWrapper } from "@tiptap/react"; | ||
| import { Avatar, AvatarGroup, Loader, PriorityIcon } from "@plane/ui"; | ||
| import { Calendar, AlertTriangle } from "lucide-react"; | ||
| import { Crown } from "lucide-react"; | ||
|
|
||
| export const IssueWidgetCard = (props) => { | ||
| const [loading, setLoading] = useState<number>(1); | ||
| const [issueDetails, setIssueDetails] = useState(); | ||
|
|
||
| useEffect(() => { | ||
| props.issueEmbedConfig | ||
| .fetchIssue(props.node.attrs.entity_identifier) | ||
| .then((issue) => { | ||
| setIssueDetails(issue); | ||
| setLoading(0); | ||
| }) | ||
| .catch(() => { | ||
| setLoading(-1); | ||
| }); | ||
| }, []); | ||
|
|
||
| const completeIssueEmbedAction = () => { | ||
| props.issueEmbedConfig.clickAction(issueDetails.id, props.node.attrs.title); | ||
| }; | ||
|
|
||
| return ( | ||
| <NodeViewWrapper className="issue-embed-component m-2"> | ||
| {loading == 0 ? ( | ||
| <div | ||
| onClick={completeIssueEmbedAction} | ||
| className={`${ | ||
| props.selected ? "border-custom-primary-200 border-[2px]" : "" | ||
| } w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs`} | ||
| > | ||
| <h5 className="text-xs text-custom-text-300"> | ||
| {issueDetails.project_detail.identifier}-{issueDetails.sequence_id} | ||
| </h5> | ||
| <h4 className="break-words text-sm font-medium">{issueDetails.name}</h4> | ||
| <div className="flex flex-wrap items-center gap-x-3 gap-y-2"> | ||
| <div> | ||
| <PriorityIcon priority={issueDetails.priority} /> | ||
| export const IssueWidgetCard = (props) => ( | ||
| <NodeViewWrapper className="issue-embed-component m-2"> | ||
| <div | ||
| className={`${ | ||
| props.selected ? "border-custom-primary-200 border-[2px]" : "" | ||
| } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`} | ||
| > | ||
| <h5 className="h-[20%] text-xs text-custom-text-300 p-2"> | ||
| {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id} | ||
| </h5> | ||
| <div className="relative h-[71%]"> | ||
| <div className="h-full backdrop-filter backdrop-blur-[30px] bg-custom-background-80 bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative"> | ||
| <div className="flex gap-2 items-center"> | ||
| <div className="rounded"> | ||
| <Crown className="m-2" size={16} color="#FFBA18" /> | ||
| </div> | ||
| <div> | ||
| <AvatarGroup size="sm"> | ||
| {issueDetails.assignee_details.map((assignee) => ( | ||
| <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} className={"m-0"} /> | ||
| ))} | ||
| </AvatarGroup> | ||
| <div className="text-custom-text text-sm"> | ||
| Embed and access issues in pages seamlessly, upgrade to plane pro now. | ||
| </div> | ||
| {issueDetails.target_date && ( | ||
| <div className="flex h-5 items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs text-custom-text-100"> | ||
| <Calendar className="h-3 w-3" strokeWidth={1.5} /> | ||
| {new Date(issueDetails.target_date).toLocaleDateString()} | ||
| </div> | ||
| )} | ||
| </div> | ||
| <a href="https://plane.so/pricing" target="_blank" rel="noreferrer"> | ||
| <Button>Upgrade</Button> | ||
| </a> | ||
| </div> | ||
| ) : loading == -1 ? ( | ||
| <div className="flex items-center gap-[8px] rounded border-2 border-[#D97706] bg-[#FFFBEB] pb-[10px] pl-[13px] pt-[10px] text-[#D97706]"> | ||
| <AlertTriangle color={"#D97706"} /> | ||
| {"This Issue embed is not found in any project. It can no longer be updated or accessed from here."} | ||
| </div> | ||
| ) : ( | ||
| <div className="w-full space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs"> | ||
| <Loader className={"px-6"}> | ||
| <Loader.Item height={"30px"} /> | ||
| <div className={"mt-3 space-y-2"}> | ||
| <Loader.Item height={"20px"} width={"70%"} /> | ||
| <Loader.Item height={"20px"} width={"60%"} /> | ||
| </div> | ||
| </Loader> | ||
| </div> | ||
| )} | ||
| </NodeViewWrapper> | ||
| ); | ||
| }; | ||
| </div> | ||
| </div> | ||
| </NodeViewWrapper> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 0 additions & 9 deletions
9
packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/types.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.