core: support customizable monograph title

Signed-off-by: 01zulfi <[email protected]>

Author: 01zulfi

apps/web/src/components/publish-view/index.tsx

@@ -51,6 +51,7 @@ function PublishView(props: PublishViewProps) {
     current: number;
   }>();
   const passwordInput = useRef<HTMLInputElement>(null);
+  const titleInput = useRef<HTMLInputElement>(null);
   const publishNote = useStore((store) => store.publish);
   const unpublishNote = useStore((store) => store.unpublish);
 
@@ -65,6 +66,10 @@ function PublishView(props: PublishViewProps) {
         setIsPasswordProtected(!!monograph.password);
         setSelfDestruct(!!monograph.selfDestruct);
 
+        if (titleInput.current) {
+          titleInput.current.value = monograph.title;
+        }
+
         if (monograph.password) {
           const password = await db.monographs.decryptPassword(
             monograph.password
@@ -192,6 +197,19 @@ function PublishView(props: PublishViewProps) {
                 {strings.monographDesc()}
               </Text>
             )}
+            <Field
+              inputRef={titleInput}
+              id="monograph-title"
+              label={strings.monographTitle()}
+              placeholder={strings.enterMonographTitle()}
+              defaultValue={publishId ? "" : note.title}
+              sx={{
+                my: 1,
+                "& > label": {
+                  fontSize: "body"
+                }
+              }}
+            />
             <Toggle
               title={strings.monographSelfDestructHeading()}
               tip={strings.monographSelfDestructDesc()}
@@ -231,8 +249,9 @@ function PublishView(props: PublishViewProps) {
             try {
               setIsPublishing(true);
               const password = passwordInput.current?.value;
+              const title = titleInput.current?.value ?? "";
 
-              const publishId = await publishNote(note.id, {
+              const publishId = await publishNote(note.id, title, {
                 selfDestruct,
                 password
               });

apps/web/src/stores/monograph-store.ts

@@ -33,8 +33,8 @@ class MonographStore extends BaseStore<MonographStore> {
     this.set({ monographs: grouping });
   };
 
-  publish = async (noteId: string, opts: PublishOptions) => {
-    const publishId = await db.monographs.publish(noteId, opts);
+  publish = async (noteId: string, title: string, opts: PublishOptions) => {
+    const publishId = await db.monographs.publish(noteId, title, opts);
     await this.get().refresh();
     await noteStore.refreshContext();
     return publishId;

packages/core/__e2e__/monographs.test.js

@@ -51,14 +51,14 @@ test(
       await login(db);
       await db.monographs.refresh();
 
-      const monographId = await db.monographs.publish(id);
+      const title = "mono";
+      const monographId = await db.monographs.publish(id, title);
 
       expect(await db.monographs.all.has(id)).toBeTruthy();
 
       const monograph = await db.monographs.get(monographId);
-      const note = await db.notes.note(id);
       expect(monograph.id).toBe(monographId);
-      expect(monograph.title).toBe(note.title);
+      expect(monograph.title).toBe(title);
 
       await logout(db);
     }),
@@ -72,14 +72,13 @@ test(
       await login(db);
       await db.monographs.refresh();
 
-      const monographId = await db.monographs.publish(id);
+      const title = "mono";
+      const monographId = await db.monographs.publish(id, title);
       let monograph = await db.monographs.get(monographId);
-      const note = await db.notes.note(id);
-      expect(monograph.title).toBe(note.title);
+      expect(monograph.title).toBe(title);
 
-      const editedTitle = "EDITED TITLE OF MY NOTE!";
-      await db.notes.add({ id, title: editedTitle });
-      await db.monographs.publish(id);
+      const editedTitle = "monograph";
+      await db.monographs.publish(id, editedTitle);
       monograph = await db.monographs.get(monographId);
       expect(monograph.title).toBe(editedTitle);
 

packages/core/src/api/monographs.ts

@@ -38,7 +38,10 @@ type MonographApiRequest = (UnencryptedMonograph | EncryptedMonograph) & {
   userId: string;
 };
 
-export type PublishOptions = { password?: string; selfDestruct?: boolean };
+export type PublishOptions = {
+  password?: string;
+  selfDestruct?: boolean;
+};
 export class Monographs {
   monographs: string[] = [];
   constructor(private readonly db: Database) {}
@@ -70,7 +73,9 @@ export class Monographs {
   /**
    * Publish a note as a monograph
    */
-  async publish(noteId: string, opts: PublishOptions = {}) {
+  async publish(noteId: string, title: string, opts: PublishOptions = {}) {
+    if (title === "") throw new Error("Title cannot be empty.");
+
     if (!this.monographs.length) await this.refresh();
 
     const update = !!this.isPublished(noteId);
@@ -99,7 +104,7 @@ export class Monographs {
     const monographPasswordsKey = await this.db.user.getMonographPasswordsKey();
     const monograph: MonographApiRequest = {
       id: noteId,
-      title: note.title,
+      title,
       userId: user.id,
       selfDestruct: opts.selfDestruct || false,
       ...(opts.password

packages/intl/locale/en.po

@@ -2448,6 +2448,10 @@ msgstr "Enter full name"
 msgid "Enter fullscreen"
 msgstr "Enter fullscreen"
 
+#: src/strings.ts:2496
+msgid "Enter monograph title"
+msgstr "Enter monograph title"
+
 #: src/strings.ts:1489
 msgid "Enter notebook description"
 msgstr "Enter notebook description"
@@ -3717,6 +3721,10 @@ msgstr "Monday"
 msgid "Monograph server"
 msgstr "Monograph server"
 
+#: src/strings.ts:2495
+msgid "Monograph title"
+msgstr "Monograph title"
+
 #: src/strings.ts:869
 msgid "Monograph URL copied"
 msgstr "Monograph URL copied"
@@ -3956,7 +3964,7 @@ msgstr "No links found"
 msgid "No note history available for this device."
 msgstr "No note history available for this device."
 
-#: src/strings.ts:2489
+#: src/strings.ts:2492
 msgid "No notebooks selected to move"
 msgstr "No notebooks selected to move"
 
@@ -5309,11 +5317,11 @@ msgstr "Scan the QR code with your authenticator app"
 msgid "School work"
 msgstr "School work"
 
-#: src/strings.ts:2491
+#: src/strings.ts:2494
 msgid "Scroll to bottom"
 msgstr "Scroll to bottom"
 
-#: src/strings.ts:2490
+#: src/strings.ts:2493
 msgid "Scroll to top"
 msgstr "Scroll to top"
 

packages/intl/locale/pseudo-LOCALE.po

@@ -2437,6 +2437,10 @@ msgstr ""
 msgid "Enter fullscreen"
 msgstr ""
 
+#: src/strings.ts:2496
+msgid "Enter monograph title"
+msgstr ""
+
 #: src/strings.ts:1489
 msgid "Enter notebook description"
 msgstr ""
@@ -3697,6 +3701,10 @@ msgstr ""
 msgid "Monograph server"
 msgstr ""
 
+#: src/strings.ts:2495
+msgid "Monograph title"
+msgstr ""
+
 #: src/strings.ts:869
 msgid "Monograph URL copied"
 msgstr ""
@@ -3936,7 +3944,7 @@ msgstr ""
 msgid "No note history available for this device."
 msgstr ""
 
-#: src/strings.ts:2489
+#: src/strings.ts:2492
 msgid "No notebooks selected to move"
 msgstr ""
 
@@ -5283,11 +5291,11 @@ msgstr ""
 msgid "School work"
 msgstr ""
 
-#: src/strings.ts:2491
+#: src/strings.ts:2494
 msgid "Scroll to bottom"
 msgstr ""
 
-#: src/strings.ts:2490
+#: src/strings.ts:2493
 msgid "Scroll to top"
 msgstr ""
 

packages/intl/src/strings.ts

@@ -2491,5 +2491,7 @@ Use this if changes from other devices are not appearing on this device. This wi
   paragraphs: () => t`Paragraphs`,
   noNotebooksSelectedToMove: () => t`No notebooks selected to move`,
   scrollToTop: () => t`Scroll to top`,
-  scrollToBottom: () => t`Scroll to bottom`
+  scrollToBottom: () => t`Scroll to bottom`,
+  monographTitle: () => t`Monograph title`,
+  enterMonographTitle: () => t`Enter monograph title`
 };