makeplane · pushya22 · Oct 8, 2024 · Sep 25, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
@@ -44,7 +44,7 @@
   }
 
   &.sans-serif {
-    --font-style: sans-serif;
+    --font-style: "Inter", sans-serif;
   }
 
   &.serif {

diff --git a/packages/ui/src/modals/constants.ts b/packages/ui/src/modals/constants.ts
@@ -4,6 +4,9 @@ export enum EModalPosition {
 }
 
 export enum EModalWidth {
+  SM = "sm:max-w-sm",
+  MD = "sm:max-w-md",
+  LG = "sm:max-w-lg",
   XL = "sm:max-w-xl",
   XXL = "sm:max-w-2xl",
   XXXL = "sm:max-w-3xl",

diff --git a/web/core/components/editor/index.ts b/web/core/components/editor/index.ts
@@ -1,2 +1,3 @@
 export * from "./lite-text-editor";
+export * from "./pdf";
 export * from "./rich-text-editor";
diff --git a/web/core/components/editor/pdf/document.tsx b/web/core/components/editor/pdf/document.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { Document, Font, Page, PageProps } from "@react-pdf/renderer";
+import { Html } from "react-pdf-html";
+// constants
+import { EDITOR_PDF_DOCUMENT_STYLESHEET } from "@/constants/editor";
+
+Font.register({
+  family: "Inter",
+  fonts: [
+    { src: "/fonts/inter/thin.ttf", fontWeight: "thin" },
+    { src: "/fonts/inter/thin.ttf", fontWeight: "thin", fontStyle: "italic" },
+    { src: "/fonts/inter/ultralight.ttf", fontWeight: "ultralight" },
+    { src: "/fonts/inter/ultralight.ttf", fontWeight: "ultralight", fontStyle: "italic" },
+    { src: "/fonts/inter/light.ttf", fontWeight: "light" },
+    { src: "/fonts/inter/light.ttf", fontWeight: "light", fontStyle: "italic" },
+    { src: "/fonts/inter/regular.ttf", fontWeight: "normal" },
+    { src: "/fonts/inter/regular.ttf", fontWeight: "normal", fontStyle: "italic" },
+    { src: "/fonts/inter/medium.ttf", fontWeight: "medium" },
+    { src: "/fonts/inter/medium.ttf", fontWeight: "medium", fontStyle: "italic" },
+    { src: "/fonts/inter/semibold.ttf", fontWeight: "semibold" },
+    { src: "/fonts/inter/semibold.ttf", fontWeight: "semibold", fontStyle: "italic" },
+    { src: "/fonts/inter/bold.ttf", fontWeight: "bold" },
+    { src: "/fonts/inter/bold.ttf", fontWeight: "bold", fontStyle: "italic" },
+    { src: "/fonts/inter/extrabold.ttf", fontWeight: "ultrabold" },
+    { src: "/fonts/inter/extrabold.ttf", fontWeight: "ultrabold", fontStyle: "italic" },
+    { src: "/fonts/inter/heavy.ttf", fontWeight: "heavy" },
+    { src: "/fonts/inter/heavy.ttf", fontWeight: "heavy", fontStyle: "italic" },
+  ],
+});
+
+type Props = {
+  content: string;
+  pageFormat: PageProps["size"];
+};
+
+export const PDFDocument: React.FC<Props> = (props) => {
+  const { content, pageFormat } = props;
+
+  return (
+    <Document>
+      <Page
+        size={pageFormat}
+        style={{
+          backgroundColor: "#ffffff",
+          padding: 64,
+        }}
+      >
+        <Html stylesheet={EDITOR_PDF_DOCUMENT_STYLESHEET}>{content}</Html>
+      </Page>
+    </Document>
+  );
+};
diff --git a/web/core/components/editor/pdf/index.ts b/web/core/components/editor/pdf/index.ts
@@ -0,0 +1 @@
+export * from "./document";
diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx
@@ -1,12 +1,15 @@
 "use client";
 
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
+import { ArchiveRestoreIcon, ArrowUpToLine, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ExportPageModal } from "@/components/pages";
 // helpers
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -27,6 +30,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const router = useRouter();
   // store values
   const {
+    name,
     archived_at,
     is_locked,
     id,
@@ -38,6 +42,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserLockPage,
     restore,
   } = page;
+  // states
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
   // store hooks
   const { workspaceSlug, projectId } = useParams();
   // page filters
@@ -157,26 +163,41 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       icon: History,
       shouldRender: true,
     },
+    {
+      key: "export",
+      action: () => setIsExportModalOpen(true),
+      label: "Export",
+      icon: ArrowUpToLine,
+      shouldRender: true,
+    },
   ];
 
   return (
-    <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
-      <CustomMenu.MenuItem
-        className="hidden md:flex w-full items-center justify-between gap-2"
-        onClick={() => handleFullWidth(!isFullWidth)}
-      >
-        Full width
-        <ToggleSwitch value={isFullWidth} onChange={() => {}} />
-      </CustomMenu.MenuItem>
-      {MENU_ITEMS.map((item) => {
-        if (!item.shouldRender) return null;
-        return (
-          <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
-            <item.icon className="h-3 w-3" />
-            {item.label}
-          </CustomMenu.MenuItem>
-        );
-      })}
-    </CustomMenu>
+    <>
+      <ExportPageModal
+        editorRef={editorRef}
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        pageTitle={name ?? ""}
+      />
+      <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
+        <CustomMenu.MenuItem
+          className="hidden md:flex w-full items-center justify-between gap-2"
+          onClick={() => handleFullWidth(!isFullWidth)}
+        >
+          Full width
+          <ToggleSwitch value={isFullWidth} onChange={() => {}} />
+        </CustomMenu.MenuItem>
+        {MENU_ITEMS.map((item) => {
+          if (!item.shouldRender) return null;
+          return (
+            <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
+              <item.icon className="h-3 w-3" />
+              {item.label}
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
   );
 });
diff --git a/web/core/components/pages/editor/title.tsx b/web/core/components/pages/editor/title.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
 import { EditorRefApi } from "@plane/editor";
@@ -23,27 +23,21 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   // states
   const [isLengthVisible, setIsLengthVisible] = useState(false);
   // page filters
-  const { fontSize, fontStyle } = usePageFilters();
+  const { fontSize } = usePageFilters();
   // ui
   const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
     "text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
     "text-[2rem] leading-[2.25rem]": fontSize === "large-font",
   });
-  const titleStyle: CSSProperties = {
-    fontFamily: fontStyle,
-  };
 
   return (
     <>
       {readOnly ? (
-        <h6 className={cn(titleClassName, "break-words")} style={titleStyle}>
-          {title}
-        </h6>
+        <h6 className={cn(titleClassName, "break-words")}>{title}</h6>
       ) : (
         <>
           <TextArea
             className={cn(titleClassName, "w-full outline-none p-0 border-none resize-none rounded-none")}
-            style={titleStyle}
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "./document";
aaryan610 marked this conversation as resolved. Show resolved Hide resolved