SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: устойчивое хранение layout-блоков карточки в detail_layout

This commit is contained in:
DCCONSTRUCTIONS 2026-04-25 18:06:05 +03:00
parent 4ed63cac4e
commit eac010d3d4
16 changed files with 693 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
HDESIGN-CODE.md
View File

@ -46,6 +46,10 @@
## Кнопки
- Все кнопки без жёсткого outline.
- Текстовые кнопки в модалках не сжимают текст:
- минимальный горизонтальный отступ от текста до края кнопки: `10px`
- для CTA предпочтительно использовать общий padding `1.25rem` или больше
- текст не должен визуально прилипать к радиусу кнопки
- Primary button:
- фон: акцентный или `active_card_rgb`
- текст: определяется автоматически по контрасту заливки
@ -89,6 +93,14 @@
- круг на мягком `white/10`
- без внешнего outline и без синей browser-рамки
- Текстовый статус рядом с checker может дублировать состояние, но сам визуальный якорь должен оставаться круглым, а не квадратным checkbox.
- В деталях задачи структурные блоки создаются из меню `Добавить подэлемент` прямо в карточке, без отдельной модалки:
- порядок меню: `Создать текстовый блок`, `Создать чекер`, `Создать новую подзадачу`, `Добавить существующую подзадачу`
- текстовый блок содержит два поля: необязательный заголовок и текст
- чекер отображается без внешней подложки и без заголовка: только строки с круглым checker-якорем и plus-зона добавления строки
- первые 10 строк чекера видны сразу, дальше включается внутренний скролл списка
- у каждого структурного блока справа есть меню `...` с удалением блока
- блок хранится в штатном JSON-поле задачи `detail_layout`, а не в `description_html`: описание проходит HTML-sanitizer и не должно нести layout-состояние
- `detail_layout` является частью самой задачи, поэтому кастомные поля мультиплеерны и восстанавливаются после закрытия/повторного открытия карточки
## Toolbar и верхние панели
- Элементы верхней панели центрируются по одной горизонтальной оси.

1
plane-src/apps/api/plane/app/serializers/issue.py
View File

@ -941,6 +941,7 @@ class IssueDetailSerializer(IssueSerializer):
class Meta(IssueSerializer.Meta):
fields = IssueSerializer.Meta.fields + [
"description_html",
"detail_layout",
"is_subscribed",
"is_intake",
]

18
plane-src/apps/api/plane/db/migrations/0127_issue_detail_layout.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Codex on 2026-04-25
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("db", "0126_workspace_storage_limits"),
]
operations = [
migrations.AddField(
model_name="issue",
name="detail_layout",
field=models.JSONField(blank=True, default=dict),
),
]

1
plane-src/apps/api/plane/db/models/issue.py
View File

@ -134,6 +134,7 @@ class Issue(ProjectBaseModel):
name = models.CharField(max_length=255, verbose_name="Issue Name")
description_json = models.JSONField(blank=True, default=dict)
description_html = models.TextField(blank=True, default="<p></p>")
detail_layout = models.JSONField(blank=True, default=dict)
description_stripped = models.TextField(blank=True, null=True)
description_binary = models.BinaryField(null=True)
priority = models.CharField(

16
plane-src/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
View File

@ -28,10 +28,22 @@ type Props = {
issueServiceType: TIssueServiceType;
hideWidgets?: TWorkItemWidgets[];
compactView?: boolean;
onOpenChecker?: () => void;
onOpenTextBlock?: () => void;
};
export function IssueDetailWidgetActionButtons(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets, compactView = false } = props;
const {
workspaceSlug,
projectId,
issueId,
disabled,
issueServiceType,
hideWidgets,
compactView = false,
onOpenChecker,
onOpenTextBlock,
} = props;
// translation
const { t } = useTranslation();
@ -50,6 +62,8 @@ export function IssueDetailWidgetActionButtons(props: Props) {
}
disabled={disabled}
issueServiceType={issueServiceType}
onOpenChecker={onOpenChecker}
onOpenTextBlock={onOpenTextBlock}
/>
)}
{!hideWidgets?.includes("relations") && (

36
plane-src/apps/web/core/components/issues/issue-detail-widgets/root.tsx
View File

@ -8,10 +8,18 @@ import React from "react";
// plane imports
import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
// local imports
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { IssueAttachmentsCollapsibleContent } from "./attachments/content";
import { IssueDetailWidgetActionButtons } from "./action-buttons";
import { IssueDetailWidgetCollapsibles } from "./issue-detail-widget-collapsibles";
import { IssueDetailWidgetModals } from "./issue-detail-widget-modals";
import { IssueStructuredContentBlocks } from "./structured-content-blocks";
import {
createIssueStructuredBlock,
extractIssueStructuredContent,
serializeIssueStructuredContent,
} from "./structured-content.helpers";
import type { TIssueOperations } from "../issue-detail/root";
type Props = {
workspaceSlug: string;
@ -22,6 +30,7 @@ type Props = {
issueServiceType: TIssueServiceType;
hideWidgets?: TWorkItemWidgets[];
compactView?: boolean;
issueOperations?: TIssueOperations;
};
export function IssueDetailWidgets(props: Props) {
@ -34,11 +43,26 @@ export function IssueDetailWidgets(props: Props) {
issueServiceType,
hideWidgets,
compactView = false,
issueOperations,
} = props;
const {
issue: { getIssueById },
} = useIssueDetail(issueServiceType);
const issue = getIssueById(issueId);
const hideWidgetsWithInlineAttachments = hideWidgets?.includes("attachments")
? hideWidgets
: ([...(hideWidgets ?? []), "attachments"] as TWorkItemWidgets[]);
const addStructuredBlock = async (type: "checker" | "text") => {
if (!issueOperations || disabled || !issue) return;
const { blocks } = extractIssueStructuredContent(issue.detail_layout, issue.description_html);
await issueOperations.update(workspaceSlug, issue.project_id ?? projectId, issueId, {
detail_layout: serializeIssueStructuredContent(issue.detail_layout, [createIssueStructuredBlock(type), ...blocks]),
});
};
return (
<>
<div className="flex flex-col space-y-4">
@ -50,7 +74,19 @@ export function IssueDetailWidgets(props: Props) {
issueServiceType={issueServiceType}
hideWidgets={hideWidgetsWithInlineAttachments}
compactView={compactView}
onOpenChecker={issueOperations ? () => addStructuredBlock("checker") : undefined}
onOpenTextBlock={issueOperations ? () => addStructuredBlock("text") : undefined}
/>
{issueOperations && (
<IssueStructuredContentBlocks
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
disabled={disabled}
issueServiceType={issueServiceType}
issueOperations={issueOperations}
/>
)}
{!hideWidgets?.includes("attachments") && (
<IssueAttachmentsCollapsibleContent
workspaceSlug={workspaceSlug}

224
plane-src/apps/web/core/components/issues/issue-detail-widgets/structured-content-blocks.tsx Normal file
View File

@ -0,0 +1,224 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import { useEffect, useMemo, useState } from "react";
import { Check, MoreHorizontal, Plus, Trash2 } from "lucide-react";
import { observer } from "mobx-react";
// plane imports
import type { TIssueServiceType } from "@plane/types";
import type { TContextMenuItem } from "@plane/ui";
import { ActionDropdown } from "@plane/ui";
import { cn } from "@plane/utils";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// local imports
import type { TIssueOperations } from "../issue-detail/root";
import {
createIssueStructuredCheckerItem,
extractIssueStructuredContent,
serializeIssueStructuredContent,
type TIssueStructuredBlock,
} from "./structured-content.helpers";
type Props = {
workspaceSlug: string;
projectId: string;
issueId: string;
disabled: boolean;
issueServiceType: TIssueServiceType;
issueOperations: TIssueOperations;
};
export const IssueStructuredContentBlocks = observer(function IssueStructuredContentBlocks(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType, issueOperations } = props;
const {
issue: { getIssueById },
} = useIssueDetail(issueServiceType);
const issue = getIssueById(issueId);
const parsedContent = useMemo(
() => extractIssueStructuredContent(issue?.detail_layout, issue?.description_html),
[issue?.description_html, issue?.detail_layout]
);
const [draftBlocks, setDraftBlocks] = useState<TIssueStructuredBlock[]>(parsedContent.blocks);
useEffect(() => {
setDraftBlocks(parsedContent.blocks);
}, [parsedContent.blocks]);
if (!issue || parsedContent.blocks.length === 0) return null;
const saveBlocks = async (nextBlocks: TIssueStructuredBlock[]) => {
setDraftBlocks(nextBlocks);
await issueOperations.update(workspaceSlug, issue.project_id ?? projectId, issueId, {
detail_layout: serializeIssueStructuredContent(issue.detail_layout, nextBlocks),
});
};
const updateBlockDraft = (blockId: string, patch: Partial<TIssueStructuredBlock>) => {
setDraftBlocks((currentBlocks) =>
currentBlocks.map((block) => (block.id === blockId ? ({ ...block, ...patch } as TIssueStructuredBlock) : block))
);
};
const getLatestBlock = (blockId: string) => draftBlocks.find((block) => block.id === blockId);
const removeBlock = (blockId: string) => saveBlocks(draftBlocks.filter((block) => block.id !== blockId));
const getBlockMenuItems = (blockId: string): TContextMenuItem[] => [
{
key: "delete",
title: "Удалить блок",
icon: Trash2,
action: () => removeBlock(blockId),
},
];
return (
<div className="nodedc-structured-inline-stack">
{draftBlocks.map((block) => {
if (block.type === "text") {
return (
<section key={block.id} className="nodedc-structured-inline-block">
<div className="nodedc-structured-inline-header nodedc-structured-inline-header--menu-only">
<ActionDropdown
items={getBlockMenuItems(block.id)}
button={<MoreHorizontal className="h-4 w-4" />}
buttonClassName="nodedc-structured-menu-button"
placement="bottom-end"
disabled={disabled}
/>
</div>
<div className="space-y-3">
<input
type="text"
value={block.title}
onChange={(event) => updateBlockDraft(block.id, { title: event.target.value })}
onBlur={() => {
const latestBlock = getLatestBlock(block.id);
if (latestBlock) saveBlocks(draftBlocks.map((item) => (item.id === block.id ? latestBlock : item)));
}}
placeholder="Заголовок"
className="nodedc-modal-input h-11 w-full px-4 text-13 text-primary placeholder:text-placeholder"
disabled={disabled}
/>
<textarea
value={block.body}
onChange={(event) => updateBlockDraft(block.id, { body: event.target.value })}
onBlur={() => {
const latestBlock = getLatestBlock(block.id);
if (latestBlock) saveBlocks(draftBlocks.map((item) => (item.id === block.id ? latestBlock : item)));
}}
placeholder="Текст"
className="nodedc-modal-input min-h-28 w-full resize-y px-4 py-3 text-13 text-primary placeholder:text-placeholder"
disabled={disabled}
/>
</div>
</section>
);
}
return (
<section key={block.id} className="nodedc-structured-inline-block">
<div className="nodedc-structured-inline-header nodedc-structured-inline-header--menu-only">
<ActionDropdown
items={getBlockMenuItems(block.id)}
button={<MoreHorizontal className="h-4 w-4" />}
buttonClassName="nodedc-structured-menu-button"
placement="bottom-end"
disabled={disabled}
/>
</div>
<div className="nodedc-structured-checklist">
{block.items.map((item, index) => (
<div key={item.id} className="nodedc-structured-check-row">
<button
type="button"
className={cn("nodedc-structured-check-dot", item.checked && "is-checked")}
onClick={() => {
const nextBlocks = draftBlocks.map((draftBlock) =>
draftBlock.id === block.id && draftBlock.type === "checker"
? {
...draftBlock,
items: draftBlock.items.map((draftItem) =>
draftItem.id === item.id ? { ...draftItem, checked: !draftItem.checked } : draftItem
),
}
: draftBlock
);
saveBlocks(nextBlocks);
}}
aria-label="Отметить пункт"
disabled={disabled}
>
{item.checked && <Check className="h-3.5 w-3.5" />}
</button>
<input
type="text"
value={item.text}
onChange={(event) =>
setDraftBlocks((currentBlocks) =>
currentBlocks.map((draftBlock) =>
draftBlock.id === block.id && draftBlock.type === "checker"
? {
...draftBlock,
items: draftBlock.items.map((draftItem) =>
draftItem.id === item.id ? { ...draftItem, text: event.target.value } : draftItem
),
}
: draftBlock
)
)
}
onBlur={() => saveBlocks(draftBlocks)}
placeholder={`Пункт ${index + 1}`}
className="nodedc-modal-input h-11 flex-1 px-4 text-13 text-primary placeholder:text-placeholder"
disabled={disabled}
/>
<button
type="button"
className="nodedc-structured-delete"
onClick={() => {
const nextBlocks = draftBlocks.map((draftBlock) =>
draftBlock.id === block.id && draftBlock.type === "checker"
? { ...draftBlock, items: draftBlock.items.filter((draftItem) => draftItem.id !== item.id) }
: draftBlock
);
saveBlocks(nextBlocks);
}}
aria-label="Удалить пункт"
disabled={disabled}
>
<Trash2 className="h-4 w-4" />
</button>
</div>
))}
</div>
<button
type="button"
className="nodedc-structured-add-zone"
onClick={() => {
const nextBlocks = draftBlocks.map((draftBlock) =>
draftBlock.id === block.id && draftBlock.type === "checker"
? { ...draftBlock, items: [...draftBlock.items, createIssueStructuredCheckerItem()] }
: draftBlock
);
saveBlocks(nextBlocks);
}}
disabled={disabled}
>
<span className="nodedc-structured-add-icon">
<Plus className="h-4 w-4" />
</span>
<span className="text-left text-13 font-medium text-primary">Добавить пункт чекера</span>
</button>
</section>
);
})}
</div>
);
});

157
plane-src/apps/web/core/components/issues/issue-detail-widgets/structured-content.helpers.ts Normal file
View File

@ -0,0 +1,157 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
const MARKER_REGEX = /<!--NODEDC_STRUCTURED_BLOCKS:([\s\S]*?):NODEDC_STRUCTURED_BLOCKS-->/;
const DETAIL_LAYOUT_BLOCKS_KEY = "nodedc_structured_blocks";
export type TIssueStructuredTextBlock = {
id: string;
type: "text";
title: string;
body: string;
};
export type TIssueStructuredCheckerItem = {
id: string;
text: string;
checked: boolean;
};
export type TIssueStructuredCheckerBlock = {
id: string;
type: "checker";
items: TIssueStructuredCheckerItem[];
};
export type TIssueStructuredBlock = TIssueStructuredTextBlock | TIssueStructuredCheckerBlock;
export type TIssueDetailLayout = Record<string, unknown> & {
[DETAIL_LAYOUT_BLOCKS_KEY]?: TIssueStructuredBlock[];
};
const createLocalId = () => `${Date.now()}-${Math.random().toString(16).slice(2)}`;
const isRecord = (value: unknown): value is Record<string, unknown> =>
typeof value === "object" && value !== null && !Array.isArray(value);
const normalizeDescriptionBody = (value: string | null | undefined) => {
const cleanValue = `${value ?? ""}`.replace(MARKER_REGEX, "").trim();
return cleanValue || "<p></p>";
};
const normalizeDetailLayout = (value: unknown): TIssueDetailLayout =>
isRecord(value) ? ({ ...value } as TIssueDetailLayout) : {};
const sanitizeBlocks = (value: unknown): TIssueStructuredBlock[] => {
if (!Array.isArray(value)) return [];
return value.flatMap((block) => {
if (!isRecord(block)) return [];
if (block.type === "text") {
return [
{
id: typeof block.id === "string" ? block.id : createLocalId(),
type: "text",
title: typeof block.title === "string" ? block.title : "",
body: typeof block.body === "string" ? block.body : "",
},
];
}
if (block.type === "checker") {
const items = Array.isArray(block.items)
? block.items.flatMap((item) => {
if (!isRecord(item)) return [];
return [
{
id: typeof item.id === "string" ? item.id : createLocalId(),
text: typeof item.text === "string" ? item.text : "",
checked: Boolean(item.checked),
},
];
})
: [];
return [
{
id: typeof block.id === "string" ? block.id : createLocalId(),
type: "checker",
items,
},
];
}
return [];
});
};
export const createIssueStructuredBlock = (type: "checker" | "text"): TIssueStructuredBlock => {
if (type === "checker") {
return {
id: createLocalId(),
type: "checker",
items: [{ id: createLocalId(), text: "", checked: false }],
};
}
return {
id: createLocalId(),
type: "text",
title: "",
body: "",
};
};
export const createIssueStructuredCheckerItem = (): TIssueStructuredCheckerItem => ({
id: createLocalId(),
text: "",
checked: false,
});
const extractLegacyDescriptionBlocks = (descriptionHtml: string | null | undefined) => {
const value = `${descriptionHtml ?? ""}`;
const markerMatch = value.match(MARKER_REGEX);
if (!markerMatch?.[1]) return [] as TIssueStructuredBlock[];
try {
const parsedBlocks = JSON.parse(decodeURIComponent(markerMatch[1]));
return sanitizeBlocks(parsedBlocks);
} catch {
return [] as TIssueStructuredBlock[];
}
};
export const extractIssueStructuredContent = (
detailLayout: unknown,
descriptionHtml: string | null | undefined
) => {
const layout = normalizeDetailLayout(detailLayout);
const hasPersistedBlocks = Object.prototype.hasOwnProperty.call(layout, DETAIL_LAYOUT_BLOCKS_KEY);
const persistedBlocks = sanitizeBlocks(layout[DETAIL_LAYOUT_BLOCKS_KEY]);
return {
bodyHtml: normalizeDescriptionBody(descriptionHtml),
detailLayout: layout,
blocks: hasPersistedBlocks ? persistedBlocks : extractLegacyDescriptionBlocks(descriptionHtml),
};
};
export const serializeIssueStructuredContent = (detailLayout: unknown, blocks: TIssueStructuredBlock[]) => {
const layout = normalizeDetailLayout(detailLayout);
layout[DETAIL_LAYOUT_BLOCKS_KEY] = blocks;
return layout;
};
export const mergeIssueDescriptionWithStructuredBlocks = (
nextBodyHtml: string | null | undefined,
_currentDescriptionHtml?: string | null | undefined
) => normalizeDescriptionBody(nextBodyHtml);

30
plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
View File

@ -5,6 +5,7 @@
*/
import React from "react";
import { ListChecks, TextCursorInput } from "lucide-react";
import { observer } from "mobx-react";
// plane imports
import { useTranslation } from "@plane/i18n";
@ -21,10 +22,19 @@ type Props = {
customButton?: React.ReactNode;
disabled?: boolean;
issueServiceType: TIssueServiceType;
onOpenChecker?: () => void;
onOpenTextBlock?: () => void;
};
export const SubIssuesActionButton = observer(function SubIssuesActionButton(props: Props) {
const { issueId, customButton, disabled = false, issueServiceType } = props;
const {
issueId,
customButton,
disabled = false,
issueServiceType,
onOpenChecker,
onOpenTextBlock,
} = props;
// translation
const { t } = useTranslation();
// store hooks
@ -69,15 +79,29 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
// options
const optionItems: TContextMenuItem[] = [
{
key: "create-text-block",
title: "Создать текстовый блок",
icon: TextCursorInput,
action: () => onOpenTextBlock?.(),
shouldRender: Boolean(onOpenTextBlock),
},
{
key: "create-checker",
title: "Создать чекер",
icon: ListChecks,
action: () => onOpenChecker?.(),
shouldRender: Boolean(onOpenChecker),
},
{
key: "create-new",
title: t("common.create_new"),
title: "Создать новую подзадачу",
icon: PlusIcon,
action: handleCreateNew,
},
{
key: "add-existing",
title: t("common.add_existing"),
title: "Добавить существующую подзадачу",
icon: WorkItemsIcon,
action: handleAddExisting,
},

18
plane-src/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
View File

@ -76,14 +76,14 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
return (
<ModalCore isOpen={isModalOpen} handleClose={onClose}>
<form onSubmit={handleSubmit(handleFormSubmit)}>
<form className="nodedc-link-modal" onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-5 p-5">
<h3 className="text-h4-medium text-secondary">
{preloadedData?.id ? t("common.update_link") : t("common.add_link")}
</h3>
<div className="mt-2 space-y-3">
<div>
<label htmlFor="url" className="mb-2 text-secondary">
<label htmlFor="url" className="mb-2 block text-secondary">
{t("common.url")}
</label>
<Controller
@ -101,7 +101,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
ref={ref}
hasError={Boolean(errors.url)}
placeholder={t("common.type_or_paste_a_url")}
className="w-full"
className="nodedc-modal-input h-10 w-full px-4"
/>
)}
/>
@ -110,9 +110,9 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
)}
</div>
<div>
<label htmlFor="title" className="mb-2 text-secondary">
<label htmlFor="title" className="mb-3 block text-secondary">
{t("common.display_title")}
<span className="block text-caption-xs-regular">{t("common.optional")}</span>
<span className="mt-1 block text-caption-xs-regular">{t("common.optional")}</span>
</label>
<Controller
control={control}
@ -126,18 +126,18 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
ref={ref}
hasError={Boolean(errors.title)}
placeholder={t("common.link_title_placeholder")}
className="w-full"
className="nodedc-modal-input h-10 w-full px-4"
/>
)}
/>
</div>
</div>
</div>
<div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
<Button variant="secondary" size="lg" onClick={onClose}>
<div className="flex items-center justify-end gap-2 px-5 pb-5 pt-3">
<Button variant="secondary" size="lg" className="nodedc-modal-secondary-button" onClick={onClose}>
{t("common.cancel")}
</Button>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" className="nodedc-modal-primary-button" type="submit" loading={isSubmitting}>
{`${
preloadedData?.id
? isSubmitting

10
plane-src/apps/web/core/components/issues/issue-detail/main-content.tsx
View File

@ -29,6 +29,10 @@ import { useDebouncedDuplicateIssues } from "@/plane-web/hooks/use-debounced-dup
import { WorkItemVersionService } from "@/services/issue";
// local imports
import { IssueDetailWidgets } from "../issue-detail-widgets";
import {
extractIssueStructuredContent,
mergeIssueDescriptionWithStructuredBlocks,
} from "../issue-detail-widgets/structured-content.helpers";
import { NameDescriptionUpdateStatus } from "../issue-update-status";
import { PeekOverviewProperties } from "../peek-overview/properties";
import { IssueTitleInput } from "../title-input";
@ -67,6 +71,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
// derived values
const projectDetails = getProjectById(projectId);
const issue = issueId ? getIssueById(issueId) : undefined;
const issueDescription = extractIssueStructuredContent(issue?.detail_layout, issue?.description_html).bodyHtml;
// debounced duplicate issues swr
const { duplicateIssues } = useDebouncedDuplicateIssues(
workspaceSlug,
@ -139,12 +144,12 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
editorRef={editorRef}
entityId={issue.id}
fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
initialValue={issue.description_html}
initialValue={issueDescription}
key={issue.id}
onSubmit={async (value, isMigrationUpdate) => {
if (!issue.id || !issue.project_id) return;
await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
description_html: value.description_html,
description_html: mergeIssueDescriptionWithStructuredBlocks(value.description_html, issue.description_html),
...(isMigrationUpdate ? { skip_activity: "true" } : {}),
});
}}
@ -191,6 +196,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={!isEditable || isArchived}
renderWidgetModals={!isPeekModeActive}
issueServiceType={EIssueServiceType.ISSUES}

13
plane-src/apps/web/core/components/issues/peek-overview/issue-detail.tsx
View File

@ -32,6 +32,10 @@ import { WorkItemVersionService } from "@/services/issue";
import type { TIssueOperations } from "../issue-detail";
import { IssueParentDetail } from "../issue-detail/parent";
import { IssueReaction } from "../issue-detail/reactions";
import {
extractIssueStructuredContent,
mergeIssueDescriptionWithStructuredBlocks,
} from "../issue-detail-widgets/structured-content.helpers";
import { IssueTitleInput } from "../title-input";
// services init
const workItemVersionService = new WorkItemVersionService();
@ -89,12 +93,7 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
if (!issue || !issue.project_id) return <></>;
const issueDescription =
issue.description_html !== undefined || issue.description_html !== null
? issue.description_html != ""
? issue.description_html
: "<p></p>"
: undefined;
const issueDescription = extractIssueStructuredContent(issue.detail_layout, issue.description_html).bodyHtml;
return (
<div className="space-y-2">
@ -143,7 +142,7 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
onSubmit={async (value, isMigrationUpdate) => {
if (!issue.id || !issue.project_id) return;
await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
description_html: value.description_html,
description_html: mergeIssueDescriptionWithStructuredBlocks(value.description_html, issue.description_html),
...(isMigrationUpdate ? { skip_activity: "true" } : {}),
});
}}

2
plane-src/apps/web/core/components/issues/peek-overview/view.tsx
View File

@ -345,6 +345,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
issueId={issueId}
disabled={disabled || is_archived}
compactView
issueOperations={issueOperations}
issueServiceType={EIssueServiceType.ISSUES}
/>
</div>
@ -387,6 +388,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
projectId={projectId}
issueId={issueId}
disabled={disabled}
issueOperations={issueOperations}
issueServiceType={EIssueServiceType.ISSUES}
/>
</div>

1
plane-src/apps/web/core/store/issue/issue-details/issue.store.ts
View File

@ -145,6 +145,7 @@ export class IssueStore implements IIssueStore {
sequence_id: issue?.sequence_id,
name: issue?.name,
description_html: issue?.description_html,
detail_layout: issue?.detail_layout,
sort_order: issue?.sort_order,
state_id: issue?.state_id,
priority: issue?.priority,

289
plane-src/apps/web/styles/globals.css
View File

@ -227,134 +227,45 @@
.nodedc-work-item-card,
.nodedc-external-card {
--nodedc-priority-card-rgb: var(--nodedc-priority-none-rgb);
--nodedc-priority-card-mix-rgb: var(--nodedc-priority-none-mix-rgb);
--nodedc-priority-card-border-opacity: 0.08;
--nodedc-priority-card-fill-opacity: 0;
--nodedc-priority-card-glow-opacity: 0;
position: relative;
overflow: hidden;
isolation: isolate;
border: 0 !important;
outline: none !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.006) 100%),
rgb(var(--nodedc-card-passive-rgb)) !important;
box-shadow:
0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
0 12px 28px rgba(0, 0, 0, 0.2),
0 0 18px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
0 14px 34px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
.nodedc-work-item-card[data-priority="low"],
.nodedc-external-card[data-priority="low"] {
--nodedc-priority-card-rgb: var(--nodedc-priority-low-rgb);
--nodedc-priority-card-mix-rgb: var(--nodedc-priority-low-mix-rgb);
--nodedc-priority-card-border-opacity: 0.42;
--nodedc-priority-card-fill-opacity: 0.46;
--nodedc-priority-card-glow-opacity: 0.12;
}
.nodedc-work-item-card[data-priority="medium"],
.nodedc-external-card[data-priority="medium"] {
--nodedc-priority-card-rgb: var(--nodedc-priority-medium-rgb);
--nodedc-priority-card-mix-rgb: var(--nodedc-priority-medium-mix-rgb);
--nodedc-priority-card-border-opacity: 0.46;
--nodedc-priority-card-fill-opacity: 0.5;
--nodedc-priority-card-glow-opacity: 0.13;
}
.nodedc-work-item-card[data-priority="high"],
.nodedc-external-card[data-priority="high"] {
--nodedc-priority-card-rgb: var(--nodedc-priority-high-rgb);
--nodedc-priority-card-mix-rgb: var(--nodedc-priority-high-mix-rgb);
--nodedc-priority-card-border-opacity: 0.5;
--nodedc-priority-card-fill-opacity: 0.54;
--nodedc-priority-card-glow-opacity: 0.15;
}
.nodedc-work-item-card[data-priority="urgent"],
.nodedc-external-card[data-priority="urgent"] {
--nodedc-priority-card-rgb: var(--nodedc-priority-urgent-rgb);
--nodedc-priority-card-mix-rgb: var(--nodedc-priority-urgent-mix-rgb);
--nodedc-priority-card-border-opacity: 0.62;
--nodedc-priority-card-fill-opacity: 0.62;
--nodedc-priority-card-glow-opacity: 0.2;
}
.nodedc-work-item-card[data-active="true"],
.nodedc-external-card[data-active="true"] {
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
box-shadow:
0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
0 14px 32px rgba(0, 0, 0, 0.22),
0 0 20px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.nodedc-work-item-card[data-active="true"] .text-primary,
.nodedc-work-item-card[data-active="true"] .text-secondary,
.nodedc-work-item-card[data-active="true"] .text-tertiary,
.nodedc-work-item-card[data-active="true"] .text-placeholder {
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
}
.nodedc-work-item-card::before,
.nodedc-external-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(
120% 90% at 50% 118%,
rgb(var(--nodedc-priority-card-rgb) / 0.74) 0%,
rgb(var(--nodedc-priority-card-rgb) / 0.28) 30%,
transparent 64%
),
radial-gradient(
105% 78% at 50% -26%,
rgb(var(--nodedc-priority-card-mix-rgb) / 0.3) 0%,
transparent 62%
),
radial-gradient(
62% 70% at -18% 50%,
rgb(var(--nodedc-priority-card-rgb) / 0.24) 0%,
transparent 68%
),
radial-gradient(
62% 70% at 118% 50%,
rgb(var(--nodedc-priority-card-mix-rgb) / 0.22) 0%,
transparent 68%
);
opacity: var(--nodedc-priority-card-fill-opacity);
mask: radial-gradient(72% 58% at 50% 50%, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.42) 68%, #000 100%);
-webkit-mask: radial-gradient(
72% 58% at 50% 50%,
transparent 0%,
transparent 52%,
rgba(0, 0, 0, 0.42) 68%,
#000 100%
);
content: none !important;
display: none !important;
}
.nodedc-work-item-card::after,
.nodedc-external-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
padding: 1px;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
145deg,
rgb(var(--nodedc-priority-card-rgb) / 0.82) 0%,
rgb(var(--nodedc-priority-card-mix-rgb) / 0.44) 32%,
rgba(255, 255, 255, 0.18) 48%,
rgb(var(--nodedc-priority-card-rgb) / 0.34) 100%
);
opacity: var(--nodedc-priority-card-border-opacity);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
content: none !important;
display: none !important;
}
.nodedc-work-item-card > *,
@ -904,6 +815,11 @@
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 82%, white) !important;
}
.nodedc-link-modal [data-slot="button"] {
min-width: 4.25rem;
padding-inline: 1.6rem !important;
}
.nodedc-modal-primary-button,
.nodedc-modal-danger-button,
.nodedc-modal-primary-button *,
@ -933,6 +849,145 @@
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 82%, white) !important;
}
.nodedc-structured-inline-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.nodedc-structured-inline-block {
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
padding: 0;
}
.nodedc-structured-inline-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.8rem;
color: var(--text-color-primary);
font-size: 0.82rem;
font-weight: 600;
}
.nodedc-structured-inline-header--menu-only {
justify-content: flex-end;
margin-bottom: 0.35rem;
min-height: 1.8rem;
}
.nodedc-structured-menu-button {
display: grid !important;
height: 1.8rem !important;
width: 1.8rem !important;
place-items: center !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--text-color-secondary) !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.nodedc-structured-menu-button:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
}
.nodedc-structured-add-zone {
display: flex;
min-height: 2.75rem;
width: 100%;
align-items: center;
gap: 0.7rem;
border: 0 !important;
border-radius: 1rem;
background: transparent !important;
padding: 0.35rem 0.2rem;
outline: none !important;
box-shadow: none !important;
transition:
background-color 160ms ease,
transform 160ms ease;
}
.nodedc-structured-add-zone:hover {
background: rgba(255, 255, 255, 0.035) !important;
}
.nodedc-structured-add-icon {
display: grid;
height: 2rem;
width: 2rem;
flex-shrink: 0;
place-items: center;
border-radius: 999px;
color: rgb(var(--nodedc-accent-rgb));
}
.nodedc-structured-checklist {
display: flex;
max-height: 32.25rem;
flex-direction: column;
gap: 0.7rem;
overflow-y: auto;
margin-bottom: 0.8rem;
padding-right: 0;
}
.nodedc-structured-check-row {
display: flex;
min-height: 3rem;
align-items: center;
gap: 0.65rem;
border-radius: 0;
background: transparent !important;
padding: 0;
}
.nodedc-structured-check-dot {
display: grid;
height: 1.55rem;
width: 1.55rem;
flex-shrink: 0;
place-items: center;
border: 0 !important;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgb(var(--nodedc-on-accent-rgb));
outline: none !important;
box-shadow: none !important;
}
.nodedc-structured-check-dot.is-checked {
background: rgb(var(--nodedc-accent-rgb));
}
.nodedc-structured-delete {
display: grid;
height: 2.4rem;
width: 2.4rem;
flex-shrink: 0;
place-items: center;
border: 0 !important;
border-radius: 999px;
background: transparent !important;
color: rgba(255, 255, 255, 0.7);
outline: none !important;
box-shadow: none !important;
}
.nodedc-structured-delete:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.94);
}
.nodedc-glass-modal button.bg-danger-primary,
.nodedc-glass-modal button.border-danger-strong {
border: 0 !important;
@ -1518,7 +1573,6 @@
rgb(var(--nodedc-card-active-rgb)) !important;
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.32),
0 12px 32px rgba(0, 0, 0, 0.16) !important;
}
@ -1535,22 +1589,29 @@
.nodedc-work-item-card,
.nodedc-external-card {
box-shadow:
0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
0 12px 28px rgba(0, 0, 0, 0.2),
0 0 18px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
.nodedc-work-item-card[data-active="true"],
.nodedc-external-card[data-active="true"] {
box-shadow:
0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
0 14px 32px rgba(0, 0, 0, 0.22),
0 0 20px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.nodedc-work-item-card[data-active="true"] {
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
}
.nodedc-work-item-card[data-active="true"] .text-primary,
.nodedc-work-item-card[data-active="true"] .text-secondary,
.nodedc-work-item-card[data-active="true"] .text-tertiary,
.nodedc-work-item-card[data-active="true"] .text-placeholder {
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
}
.nodedc-external-content-shell {
border: 0 !important;
outline: none !important;

1
plane-src/packages/types/src/issues/issue.ts
View File

@ -92,6 +92,7 @@ type IssueRelation = {
export type TIssue = TBaseIssue & {
description_html?: string;
detail_layout?: Record<string, unknown> | null;
is_subscribed?: boolean;
created_by_avatar_url?: string | null;
created_by_detail?: Pick<IUserLite, "id" | "display_name" | "avatar_url"> | null;