From b909416c748ec6a12f306279c3821e27cc12bc65 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 4 Jul 2025 17:10:03 +0530 Subject: [PATCH] [WIKI-519] regression: page creator and version info #7341 --- .../tab-panels/info/actors-info.tsx | 4 +- .../tab-panels/info/version-history.tsx | 2 +- .../editors/document/collaborative-editor.tsx | 9 +--- .../editors/document/page-renderer.tsx | 48 ++++++++++++------- packages/editor/src/styles/variables.css | 44 ++++++++++------- 5 files changed, 62 insertions(+), 45 deletions(-) diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx index d4c166ddf..d0bd1b907 100644 --- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx +++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx @@ -21,9 +21,9 @@ export const PageNavigationPaneInfoTabActorsInfo: React.FC = observer((pr // store hooks const { getUserDetails } = useMember(); // derived values - const { created_by, updated_by } = page; + const { owned_by, updated_by } = page; const editorInformation = updated_by ? getUserDetails(updated_by) : undefined; - const creatorInformation = created_by ? getUserDetails(created_by) : undefined; + const creatorInformation = owned_by ? getUserDetails(owned_by) : undefined; // translation const { t } = useTranslation(); diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx index 31069299f..d1454b12c 100644 --- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx +++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx @@ -34,7 +34,7 @@ const VersionHistoryItem = observer((props: VersionHistoryItemProps) => { // store hooks const { getUserDetails } = useMember(); // derived values - const versionCreator = getUserDetails(version.created_by); + const versionCreator = getUserDetails(version.owned_by); // translation const { t } = useTranslation(); diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx index e20ac3f5f..daaa56177 100644 --- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx +++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx @@ -3,7 +3,7 @@ import React from "react"; // plane imports import { cn } from "@plane/utils"; // components -import { DocumentContentLoader, PageRenderer } from "@/components/editors"; +import { PageRenderer } from "@/components/editors"; // constants import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config"; // extensions @@ -82,12 +82,6 @@ const CollaborativeDocumentEditor: React.FC = if (!editor) return null; - const blockWidthClassName = cn("w-full max-w-[720px] mx-auto transition-all duration-200 ease-in-out", { - "max-w-[1152px]": displayConfig.wideLayout, - }); - - if (!hasServerSynced && !hasServerConnectionFailed) return ; - return ( = editor={editor} editorContainerClassName={cn(editorContainerClassNames, "document-editor")} id={id} + isLoading={!hasServerSynced && !hasServerConnectionFailed} tabIndex={tabIndex} /> ); diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx index 62613b0a1..1316d2d72 100644 --- a/packages/editor/src/core/components/editors/document/page-renderer.tsx +++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx @@ -1,6 +1,8 @@ import { Editor } from "@tiptap/react"; +// plane imports +import { cn } from "@plane/utils"; // components -import { EditorContainer, EditorContentWrapper } from "@/components/editors"; +import { DocumentContentLoader, EditorContainer, EditorContentWrapper } from "@/components/editors"; import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus"; // types import { TAIHandler, TDisplayConfig } from "@/types"; @@ -12,29 +14,39 @@ type Props = { editor: Editor; editorContainerClassName: string; id: string; + isLoading?: boolean; tabIndex?: number; }; export const PageRenderer = (props: Props) => { - const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, tabIndex } = props; + const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, isLoading, tabIndex } = + props; return ( -
- - - {editor.isEditable && ( -
- {bubbleMenuEnabled && } - - -
- )} - +
+ {isLoading ? ( + + ) : ( + + + {editor.isEditable && ( +
+ {bubbleMenuEnabled && } + + +
+ )} + + )}
); }; diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css index 8d4e41a3c..f03808c1a 100644 --- a/packages/editor/src/styles/variables.css +++ b/packages/editor/src/styles/variables.css @@ -169,27 +169,34 @@ #page-content-container { container-name: page-content-container; container-type: inline-size; -} -.editor-container.document-editor { - --editor-content-width: var(--normal-content-width); + .frame-renderer { + --editor-content-width: var(--normal-content-width); - &.wide-layout { - --editor-content-width: var(--wide-content-width); - } + &.wide-layout { + --editor-content-width: var(--wide-content-width); + } - .ProseMirror { - & > *:not(.editor-full-width-block) { + .editor-container.page-title-editor .ProseMirror, + .document-editor-loader { max-width: var(--editor-content-width); - margin-left: auto !important; - margin-right: auto !important; + margin: 0 auto; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - & > .editor-full-width-block { - max-width: 100%; - padding-inline-start: calc((100% - var(--editor-content-width)) / 2); - padding-inline-end: var(--wide-content-margin); + .editor-container.document-editor .ProseMirror { + & > *:not(.editor-full-width-block) { + max-width: var(--editor-content-width); + margin-left: auto !important; + margin-right: auto !important; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + } + + & > .editor-full-width-block { + max-width: 100%; + padding-inline-start: calc((100% - var(--editor-content-width)) / 2); + padding-inline-end: var(--wide-content-margin); + } } } } @@ -219,7 +226,8 @@ /* keep a static padding of 96px for wide layouts for container width >912px and <1344px */ @container page-content-container (min-width: 912px) and (max-width: 1344px) { - .editor-container.wide-layout, + #page-content-container .frame-renderer.wide-layout .editor-container, + #page-content-container .frame-renderer.wide-layout .document-editor-loader, .page-header-container { padding-left: var(--wide-content-margin); padding-right: var(--wide-content-margin); @@ -228,7 +236,8 @@ /* keep a static padding of 20px for wide layouts for container width <912px */ @container page-content-container (max-width: 912px) { - .editor-container.wide-layout, + #page-content-container .frame-renderer.wide-layout .editor-container, + #page-content-container .frame-renderer.wide-layout .document-editor-loader, .page-header-container { padding-left: var(--normal-content-margin); padding-right: var(--normal-content-margin); @@ -237,7 +246,8 @@ /* keep a static padding of 20px for normal layouts for container width <760px */ @container page-content-container (max-width: 760px) { - .editor-container:not(.wide-layout), + #page-content-container .frame-renderer:not(.wide-layout) .editor-container, + #page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader, .page-header-container { padding-left: var(--normal-content-margin); padding-right: var(--normal-content-margin);