web: add support for multiline titles

Signed-off-by: 01zulfi <[email protected]>
streetwriters · Jan 8, 2025 · 8a8f14c · 8a8f14c
1 parent 71db854
commit 8a8f14c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/apps/web/src/components/editor/title-box.tsx b/apps/web/src/components/editor/title-box.tsx
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { Input } from "@theme-ui/components";
+import { Textarea } from "@theme-ui/components";
 import { useEditorStore } from "../../stores/editor-store";
 import { debounceWithId } from "@notesnook/common";
 import useMobile from "../../hooks/use-mobile";
@@ -37,7 +37,7 @@ type TitleBoxProps = {
 
 function TitleBox(props: TitleBoxProps) {
   const { readonly, id } = props;
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const pendingChanges = useRef(false);
   // const id = useStore((store) => store.session.id);
   const sessionType = useEditorStore((store) => store.getActiveSession()?.type);
@@ -113,7 +113,7 @@ function TitleBox(props: TitleBoxProps) {
   }, [updateFontSize]);
 
   return (
-    <Input
+    <Textarea
       ref={inputRef}
       variant="clean"
       id="editor-title"
@@ -122,18 +122,32 @@ function TitleBox(props: TitleBoxProps) {
       placeholder={strings.noteTitle()}
       readOnly={readonly}
       dir="auto"
+      wrap="soft"
+      rows={1}
       sx={{
         p: 0,
         fontFamily,
         fontSize: ["1.625em", "1.625em", "2.625em"],
         fontWeight: "heading",
         width: "100%",
+        fieldSizing: "content",
+        whiteSpace: "pre-wrap",
+        resize: "none",
+        overflow: "hidden",
         "::placeholder": {
           color: "placeholder"
         }
       }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (e.shiftKey) return;
+          e.preventDefault();
+        }
+      }}
       onKeyUp={(e) => {
         if (e.key === "Enter") {
+          if (e.shiftKey) return;
+          e.preventDefault();
           const context = useEditorManager.getState().getEditor(id);
           if (!context) return;
           context.editor?.focus({ scrollIntoView: true });
@@ -176,8 +190,8 @@ function textLengthToFontSize(length: number, max: number) {
 }
 
 function withSelectionPersist(
-  input: HTMLInputElement,
-  action: (input: HTMLInputElement) => void
+  input: HTMLTextAreaElement,
+  action: (input: HTMLTextAreaElement) => void
 ) {
   const selection = {
     start: input.selectionStart,

diff --git a/packages/core/__tests__/notes.test.ts b/packages/core/__tests__/notes.test.ts
@@ -166,11 +166,11 @@ test("note title should allow trailing space", () =>
     }
   ));
 
-test("note title should not allow newlines", () =>
+test("note title should allow newlines", () =>
   noteTest({ title: "Hello\nhello", content: TEST_NOTE.content }).then(
     async ({ db, id }) => {
       const note = await db.notes.note(id);
-      expect(note?.title).toBe("Hello hello");
+      expect(note?.title).toBe("Hello\nhello");
     }
   ));
 

diff --git a/packages/core/src/collections/notes.ts b/packages/core/src/collections/notes.ts
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { getId } from "../utils/id.js";
 import { getContentFromData } from "../content-types/index.js";
-import { NEWLINE_STRIP_REGEX, formatTitle } from "../utils/title-format.js";
+import { formatTitle } from "../utils/title-format.js";
 import { clone } from "../utils/clone.js";
 import { Tiptap } from "../content-types/tiptap.js";
 import { EMPTY_CONTENT } from "./content.js";
@@ -110,7 +110,6 @@ export class Notes implements ICollection {
       }
 
       if (typeof item.title !== "undefined") {
-        item.title = item.title.replace(NEWLINE_STRIP_REGEX, " ");
         dateEdited = Date.now();
       }
 

diff --git a/packages/core/src/utils/title-format.ts b/packages/core/src/utils/title-format.ts
@@ -20,8 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { TimeFormat } from "../types.js";
 import { formatDate } from "./date.js";
 
-export const NEWLINE_STRIP_REGEX = /[\r\n\t\v]+/gm;
-
 const DATE_REGEX = /\$date\$/g;
 const COUNT_REGEX = /\$count\$/g;
 const TIME_REGEX = /\$time\$/g;
@@ -48,7 +46,6 @@ export function formatTitle(
   const timestamp = `${date}${time}`.replace(DATE_TIME_STRIP_REGEX, "");
 
   return titleFormat
-    .replace(NEWLINE_STRIP_REGEX, " ")
     .replace(DATE_REGEX, date)
     .replace(TIME_REGEX, time)
     .replace(HEADLINE_REGEX, headline || "")