From 9d4bfd04760753b6fdd7ed81372ab8d85b615bc3 Mon Sep 17 00:00:00 2001 From: aaravkumar Date: Fri, 7 Mar 2025 12:55:31 -0500 Subject: added more individual text formatting features + journal like background --- .../views/nodes/formattedText/DailyJournal.tsx | 40 +++++++++------ src/fields/RichTextField.ts | 57 ++++++++++++++++++++-- 2 files changed, 79 insertions(+), 18 deletions(-) (limited to 'src') 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() @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() render() { return ( -
+
); 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[], selection: Record) => ({ 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 + + + } -- cgit v1.2.3-70-g09d2