[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,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 (
-    <div className="frame-renderer flex-grow w-full">
-      <EditorContainer
-        displayConfig={displayConfig}
-        editor={editor}
-        editorContainerClassName={editorContainerClassName}
-        id={id}
-      >
-        <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-        {editor.isEditable && (
-          <div>
-            {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
-            <BlockMenu editor={editor} />
-            <AIFeaturesMenu menu={aiHandler?.menu} />
-          </div>
-        )}
-      </EditorContainer>
+    <div
+      className={cn("frame-renderer flex-grow w-full", {
+        "wide-layout": displayConfig.wideLayout,
+      })}
+    >
+      {isLoading ? (
+        <DocumentContentLoader />
+      ) : (
+        <EditorContainer
+          displayConfig={displayConfig}
+          editor={editor}
+          editorContainerClassName={editorContainerClassName}
+          id={id}
+        >
+          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+          {editor.isEditable && (
+            <div>
+              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
+              <BlockMenu editor={editor} />
+              <AIFeaturesMenu menu={aiHandler?.menu} />
+            </div>
+          )}
+        </EditorContainer>
+      )}
     </div>
   );
 };

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