[WIKI-537] chore: use description json to render content (#3822)

* chore: use description json to render content

* chore: update base page instance

apps/api/plane/ee/serializers/space/page.py

@@ -16,7 +16,7 @@ class PagePublicSerializer(BaseSerializer):
         fields = [
             "id",
             "name",
-            "description_html",
+            "description",
             "created_at",
             "updated_at",
             "logo_props",

apps/space/ee/components/pages/main-content.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { FileText } from "lucide-react";
 // plane imports
-import { DocumentEditorWithRef, EditorRefApi } from "@plane/editor";
+import { DocumentEditorWithRef, type EditorRefApi } from "@plane/editor";
 import { ERowVariant, Logo, Row } from "@plane/ui";
 // components
 import { EditorMentionsRoot } from "@/components/editor";
@@ -44,7 +44,7 @@ export const PageDetailsMainContent: React.FC<Props> = observer((props) => {
     }
   );
 
-  if (!publishSettings || !pageDetails || !pageDetails.id) return null;
+  if (!publishSettings || !pageDetails || !pageDetails.id || !pageDetails.description) return null;
 
   return (
     <Row
@@ -71,7 +71,7 @@ export const PageDetailsMainContent: React.FC<Props> = observer((props) => {
             id={pageDetails.id}
             disabledExtensions={[]}
             flaggedExtensions={[]}
-            value={pageDetails.description_html ?? "<p></p>"}
+            value={pageDetails.description}
             containerClassName="p-0 pb-64 border-none"
             fileHandler={getEditorFileHandlers({
               anchor,

apps/space/ee/store/pages/page.ts

@@ -38,7 +38,7 @@ export class Page implements IPage {
   issueEmbedData: TIssueEmbed[] | undefined = undefined;
   // page properties
   created_at: Date | undefined;
-  description_html: string | undefined;
+  description: object | undefined;
   id: string | undefined;
   logo_props: TLogoProps | undefined;
   name: string | undefined;
@@ -57,7 +57,7 @@ export class Page implements IPage {
     page: TPublicPageResponse
   ) {
     this.created_at = page.created_at || undefined;
-    this.description_html = page.description_html || undefined;
+    this.description = page.description || undefined;
     this.id = page.id || undefined;
     this.logo_props = page.logo_props || undefined;
     this.name = page.name || undefined;
@@ -74,7 +74,7 @@ export class Page implements IPage {
       issueEmbedData: observable,
       // page properties
       created_at: observable,
-      description_html: observable.ref,
+      description: observable,
       id: observable.ref,
       logo_props: observable,
       name: observable.ref,
@@ -98,7 +98,7 @@ export class Page implements IPage {
   get asJSON() {
     return {
       created_at: this.created_at,
-      description_html: this.description_html,
+      description: this.description,
       id: this.id,
       logo_props: this.logo_props,
       name: this.name,
@@ -152,7 +152,7 @@ export class Page implements IPage {
     runInAction(() => {
       // Update basic properties
       if (data.created_at !== undefined) this.created_at = data.created_at;
-      if (data.description_html !== undefined) this.description_html = data.description_html;
+      if (data.description !== undefined) this.description = data.description;
       if (data.id !== undefined) this.id = data.id;
       if (data.logo_props !== undefined) this.logo_props = data.logo_props;
       if (shouldUpdateName && data.name !== undefined) this.name = data.name;

apps/web/core/store/pages/base-page.ts

@@ -105,6 +105,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
   id: string | undefined;
   name: string | undefined;
   logo_props: TLogoProps | undefined;
+  description: object | undefined;
   description_html: string | undefined;
   is_description_empty: boolean;
   color: string | undefined;
@@ -144,6 +145,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
     this.id = page?.id || undefined;
     this.name = page?.name;
     this.logo_props = page?.logo_props || undefined;
+    this.description = page?.description || undefined;
     this.description_html = page?.description_html || undefined;
     this.color = page?.color || undefined;
     this.label_ids = page?.label_ids || undefined;
@@ -171,6 +173,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       id: observable.ref,
       name: observable.ref,
       logo_props: observable,
+      description: observable,
       description_html: observable.ref,
       color: observable.ref,
       label_ids: observable,
@@ -251,6 +254,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
     return {
       id: this.id,
       name: this.name,
+      description: this.description,
       description_html: this.description_html,
       color: this.color,
       label_ids: this.label_ids,

packages/types/src/page/core.ts

@@ -2,12 +2,13 @@ import { TLogoProps } from "../common";
 import { EPageAccess } from "../enums";
 import { TPageExtended } from "./extended";
 
-export type TPage = TPageExtended & {
+export type TPage = {
   access: EPageAccess | undefined;
   archived_at: string | null | undefined;
   color: string | undefined;
   created_at: Date | undefined;
   created_by: string | undefined;
+  description: object | undefined;
   description_html: string | undefined;
   is_description_empty: boolean;
   id: string | undefined;
@@ -90,7 +91,7 @@ export type TWebhookConnectionQueryParams = {
 export type TPublicPageResponse = Pick<
   TPage,
   | "created_at"
-  | "description_html"
+  | "description"
   | "id"
   | "logo_props"
   | "name"