added more individual text formatting features + journal like background

2 files changed, 79 insertions, 18 deletions

diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx
index ec1f7a023..c8f049ecf 100644
--- a/src/client/views/nodes/formattedText/DailyJournal.tsx
+++ b/src/client/views/nodes/formattedText/DailyJournal.tsx
@@ -50,24 +50,19 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     @action
     setDailyText() {
-        console.log('setDailyText() called...');
         const placeholderText = 'Start writing here...';
-        const initialText = `Journal Entry - ${this.journalDate}\n${placeholderText}`;
+        const dateText = `${this.journalDate}\n`;
 
         console.log('Checking if dataDoc has text field...');
 
-        const styles = {
-            bold: true, // Make the journal date bold
-            color: 'blue', // Set the journal date color to blue
-            fontSize: 18, // Set the font size to 18px for the whole text
-        };
-
-        console.log('Setting new text field with:', initialText);
-        this.dataDoc[this.fieldKey] = RichTextField.textToRtf(
-            initialText,
-            undefined, // No image DocId
-            styles, // Pass the styles object here
-            placeholderText.length // The position for text selection
+        this.dataDoc[this.fieldKey] = RichTextField.textToRtfFormat(
+            [
+                { text: 'Journal Entry:', styles: { bold: true, color: 'black', fontSize: 20 } },
+                { text: dateText, styles: { italic: true, color: 'gray', fontSize: 15 } },
+                { text: placeholderText, styles: { fontSize: 14, color: 'gray' } },
+            ],
+            undefined,
+            placeholderText.length - 2
         );
 
         console.log('Current text field:', this.dataDoc[this.fieldKey]);
@@ -83,7 +78,22 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     render() {
         return (
-            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+            <div
+                style={{
+                    // background: 'beige',
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'beige',
+                    backgroundImage: `
+                    repeating-linear-gradient(
+                        to bottom, 
+                        rgba(255, 26, 26, 0.2) 0px, rgba(255, 26, 26, 0.2) 1px,  /* Thin red stripes */
+                        transparent 1px, transparent 20px
+                    )
+                `,
+                    backgroundSize: '100% 20px',
+                    backgroundRepeat: 'repeat',
+                }}>
                 <FormattedTextBox {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
             </div>
         );
diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts
index 63ae61c2f..8f4d782b4 100644
--- a/src/fields/RichTextField.ts
+++ b/src/fields/RichTextField.ts
@@ -42,7 +42,8 @@ export class RichTextField extends ObjectField {
         return this.Text;
     }
 
-    // AARAV ADD=
+    // AARAV ADD
+
     static ToProsemirrorDoc = (content: Record<string, unknown>[], selection: Record<string, unknown>) => ({
         doc: {
             type: 'doc',
@@ -86,7 +87,57 @@ export class RichTextField extends ObjectField {
             { type: 'text', anchor: 2 + plaintext.length - (selectBack ?? 0), head: 2 + plaintext.length }
         );
 
-    public static textToRtf(text: string, imgDocId?: string, styles?: { bold?: boolean; italic?: boolean; fontSize?: number; color?: string }, selectBack?: number) {
-        return new RichTextField(JSON.stringify(RichTextField.ToProsemirror(text, imgDocId, styles, selectBack)), text);
+
+    // AARAV ADD 
+
+    // takes in text segments instead of single text field
+    private static ToProsemirrorSegmented = (
+        textSegments: { text: string; styles?: { bold?: boolean; italic?: boolean; fontSize?: number; color?: string } }[],
+        imgDocId?: string,
+        selectBack?: number
+    ) =>
+        RichTextField.ToProsemirrorDoc(
+            textSegments.map(seg => ({
+                type: 'paragraph', // Each segment becomes its own paragraph
+                content: [
+                    ...RichTextField.ToProsemirrorTextContent(seg.text, seg.styles),
+                    ...(imgDocId ? RichTextField.ToProsemirrorDashDocContent(imgDocId) : []),
+                ],
+            })),
+            {
+                type: 'text',
+                anchor: 2 + textSegments.map(seg => seg.text).join('').length - (selectBack ?? 0),
+                head: 2 + textSegments.map(seg => seg.text).join('').length,
+            }
+        );
+        
+    // AARAV ADD ||
+
+
+
+    public static textToRtf(
+        text: string, 
+        imgDocId?: string, 
+        styles?: { bold?: boolean; italic?: boolean; fontSize?: number; color?: string }, 
+        selectBack?: number
+    ) {
+        return new RichTextField(
+            JSON.stringify(RichTextField.ToProsemirror(text, imgDocId, styles, selectBack)), text);
+    }
+
+    // AARAV ADD
+    public static textToRtfFormat(
+        textSegments: { text: string; styles?: { bold?: boolean; italic?: boolean; fontSize?: number; color?: string } }[], 
+        imgDocId?: string, 
+        selectBack?: number
+    ) {
+        return new RichTextField(
+            JSON.stringify(RichTextField.ToProsemirrorSegmented(textSegments, imgDocId, selectBack)), 
+            textSegments.map(seg => seg.text).join(''));
     }
+
+    // AARAV ADD
+
+
+
 }