[WIKI-519] regression: page creator and version info #7341

apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx

@@ -21,9 +21,9 @@ export const PageNavigationPaneInfoTabActorsInfo: React.FC<Props> = 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();
 

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();
 

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<ICollaborativeDocumentEditorProps> =
 
   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 <DocumentContentLoader className={blockWidthClassName} />;
-
   return (
     <PageRenderer
       aiHandler={aiHandler}
@@ -96,6 +90,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       editor={editor}
       editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
       id={id}
+      isLoading={!hasServerSynced && !hasServerConnectionFailed}
       tabIndex={tabIndex}
     />
   );

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,14 +14,23 @@ 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 (
-    <div className="frame-renderer flex-grow w-full">
+    <div
+      className={cn("frame-renderer flex-grow w-full", {
+        "wide-layout": displayConfig.wideLayout,
+      })}
+    >
+      {isLoading ? (
+        <DocumentContentLoader />
+      ) : (
         <EditorContainer
           displayConfig={displayConfig}
           editor={editor}
@@ -35,6 +46,7 @@ export const PageRenderer = (props: Props) => {
             </div>
           )}
         </EditorContainer>
+      )}
     </div>
   );
 };

packages/editor/src/styles/variables.css

@@ -169,16 +169,22 @@
 #page-content-container {
   container-name: page-content-container;
   container-type: inline-size;
-}
 
-.editor-container.document-editor {
+  .frame-renderer {
     --editor-content-width: var(--normal-content-width);
 
     &.wide-layout {
       --editor-content-width: var(--wide-content-width);
     }
 
-  .ProseMirror {
+    .editor-container.page-title-editor .ProseMirror,
+    .document-editor-loader {
+      max-width: var(--editor-content-width);
+      margin: 0 auto;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .editor-container.document-editor .ProseMirror {
       & > *:not(.editor-full-width-block) {
         max-width: var(--editor-content-width);
         margin-left: auto !important;
@@ -193,6 +199,7 @@
       }
     }
   }
+}
 
 /* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
 @container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
@@ -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);