fixed being able to use text menu on text in comparison box. Allow TextDocuments to be created with a RichText field. Changed comparisonBox to horizontally center flashcard text.

4 files changed, 38 insertions, 31 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5f2a592ae..0d7e0b20e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -240,7 +240,6 @@ export class DocumentOptions {
     borderWidth?: STRt = new StrInfo('Width of user-added border', false);
     borderColor?: STRt = new StrInfo('Color of user-added border', false);
     text_fontColor?: STRt = new StrInfo('Color of text', false);
-    text_align?: STRt = new StrInfo('alignment');
     hCentering?: 'h-left' | 'h-center' | 'h-right';
     isDefaultTemplateDoc?: BOOLt = new BoolInfo('');
     contentBold?: BOOLt = new BoolInfo('');
@@ -697,7 +696,7 @@ export namespace Docs {
             dataProps.author_date = new DateField();
             if (fieldKey) {
                 dataProps[`${fieldKey}_modificationDate`] = new DateField();
-                dataProps[fieldKey] = options.data ?? data;
+                dataProps[fieldKey] = (options as unknown as { [key: string]: FieldType | undefined })[fieldKey] ?? data;
 
                 // so that the list of annotations is already initialised, prevents issues in addonly.
                 // without this, if a doc has no annotations but the user has AddOnly privileges, they won't be able to add an annotation because they would have needed to create the field's list which they don't have permissions to do.
@@ -827,7 +826,7 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.MESSAGE), field, options, undefined, fieldKey);
         }
 
-        export function TextDocument(text: string, options: DocumentOptions = {}, fieldKey: string = 'text') {
+        export function TextDocument(text: string | RichTextField, options: DocumentOptions = {}, fieldKey: string = 'text') {
             const rtf = {
                 doc: {
                     type: 'doc',
@@ -846,7 +845,7 @@ export namespace Docs {
                 selection: { type: 'text', anchor: 1, head: 1 },
                 storedMarks: [],
             };
-            const field = text ? new RichTextField(JSON.stringify(rtf), text) : undefined;
+            const field = text instanceof RichTextField ? text : text ? new RichTextField(JSON.stringify(rtf), text) : options.text instanceof RichTextField ? options.text : undefined;
             return InstanceFromProto(Prototypes.get(DocumentType.RTF), field, options, undefined, fieldKey);
         }
 
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index ccbe98257..f8cf0f464 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -425,6 +425,27 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         }
     }
 
+    textToRtf = (text: string, img?: Doc) =>
+        new RichTextField(
+            JSON.stringify({
+                // this is a RichText json that has the question text placed above a related image
+                doc: {
+                    type: 'doc',
+                    content: [
+                        {
+                            type: 'paragraph',
+                            attrs: { align: 'center', color: null, id: null, indent: null, inset: null, lineSpacing: null, paddingBottom: null, paddingTop: null },
+                            content: [
+                                ...(text ? [{ type: 'text', text }] : []), //
+                                ...(img ? [{ type: 'dashDoc', attrs: { width: '200px', height: '200px', title: 'dashDoc', float: 'unset', hidden: false, docId: img[Id] } }] : []),
+                            ],
+                        },
+                    ],
+                },
+                selection: { type: 'text', anchor: 2, head: 2 },
+            }),
+            text
+        );
     /**
      * Transfers the content of flashcards into a flashcard pile.
      */
@@ -440,25 +461,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 const questionTxt = question[0].includes('Answer: ') ? question[0].split('Answer: ')[0] : question[0];
                 const answerTxt = question[0].includes('Answer: ') ? question[0].split('Answer: ')[1] : question[1];
                 this.fetchImages(question[1]).then(img => {
-                    const rtfiel = new RichTextField(
-                        JSON.stringify({
-                            // this is a RichText json that has the question text placed above a related image
-                            doc: {
-                                type: 'doc',
-                                content: [
-                                    {
-                                        type: 'paragraph',
-                                        attrs: { align: null, color: null, id: null, indent: null, inset: null, lineSpacing: null, paddingBottom: null, paddingTop: null },
-                                        content: [{ type: 'text', text: questionTxt }, img ? { type: 'dashDoc', attrs: { width: '200px', height: '200px', title: 'dashDoc', float: 'unset', hidden: false, docId: img[Id] } } : {}],
-                                    },
-                                ],
-                            },
-                            selection: { type: 'text', anchor: 2, head: 2 },
-                        }),
-                        questionTxt
-                    );
-                    newDoc[DocData][this.fieldKey + '_1'] = Docs.Create.TextDocument(questionTxt, { text: rtfiel });
-                    newDoc[DocData][this.fieldKey + '_0'] = Docs.Create.TextDocument(answerTxt);
+                    newDoc[DocData][this.fieldKey + '_1'] = Docs.Create.TextDocument(this.textToRtf(questionTxt));
+                    newDoc[DocData][this.fieldKey + '_0'] = Docs.Create.TextDocument(this.textToRtf(answerTxt, img));
                 });
             }
 
@@ -723,7 +727,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             const side = this._frontSide ? 1 : 0;
             const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
             const textCreator = (which: number, title: string, text: string) => {
-                const newDoc = Docs.Create.TextDocument(text, {
+                const newDoc = Docs.Create.TextDocument(this.textToRtf(text), {
                     title, //
                     _layout_autoHeight: true,
                     _layout_centered: true,
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 18b8c9d34..c57307974 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1328,7 +1328,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         );
 
         this._disposers.selected = reaction(
-            () => this._props.rootSelected?.(),
+            () => this._props.rootSelected?.() || this._props.isContentActive(),
             action(selected => {
                 this.prepareForTyping();
                 if (FormattedTextBox._globalHighlights.has('Bold Text')) {
@@ -1514,7 +1514,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     dispatch(state.tr.insertText(startupText));
                 }
                 const textAlign = StrCast(this.dataDoc.text_align, StrCast(Doc.UserDoc().textAlign, 'left'));
-                if (textAlign !== 'left') {
+                if (textAlign && textAlign !== 'left') {
                     selectAll(this._editorView.state, tr => {
                         this._editorView!.dispatch(tr.replaceSelectionWith(state.schema.nodes.paragraph.create({ align: textAlign })));
                     });
@@ -1775,7 +1775,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 }
             }
         }
-        if (RichTextMenu.Instance?.view === this._editorView && !this._props.rootSelected?.()) {
+        if (RichTextMenu.Instance?.view === this._editorView && !(this._props.isContentActive() || this._props.rootSelected?.())) {
             RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
         }
 
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 88e2e4248..55e6a3a5b 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -76,6 +76,10 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         });
     }
 
+    @computed get RootSelected() {
+        return this.TextView?._props.rootSelected?.() || this.TextView?._props.isContentActive();
+    }
+
     @computed get noAutoLink() {
         return this._noLinkActive;
     }
@@ -183,7 +187,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // finds font sizes and families in selection
     getActiveAlignment = () => {
-        if (this.view && this.TextView?._props.rootSelected?.()) {
+        if (this.view && this.RootSelected) {
             const from = this.view.state.selection.$from;
             for (let i = from.depth; i >= 0; i--) {
                 const node = from.node(i);
@@ -216,7 +220,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         const activeSizes = new Set<string>();
         const activeColors = new Set<string>();
         const activeHighlights = new Set<string>();
-        if (this.view && this.TextView?._props.rootSelected?.()) {
+        if (this.view && this.RootSelected) {
             const { state } = this.view;
             const pos = this.view.state.selection.$from;
             let marks: Mark[] = [...(state.storedMarks ?? [])];
@@ -252,7 +256,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // finds all active marks on selection in given group
     getActiveMarksOnSelection() {
-        if (!this.view || !this.TextView?._props.rootSelected?.()) return [] as MarkType[];
+        if (!this.view || !this.RootSelected) return [] as MarkType[];
 
         const { state } = this.view;
         let marks: Mark[] = [...(state.storedMarks ?? [])];
@@ -409,7 +413,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         this.layoutDoc && (this.layoutDoc._layout_centered = !this.layoutDoc._layout_centered);
     };
     align = (view: EditorView, dispatch: (tr: Transaction) => void, alignment: 'left' | 'right' | 'center') => {
-        if (this.TextView?._props.rootSelected?.()) {
+        if (this.RootSelected) {
             let { tr } = view.state;
             view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos) => {
                 if ([schema.nodes.paragraph, schema.nodes.heading].includes(node.type)) {