From de4cc95e406b10bd92975abd5eef8f708cbf8f02 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Oct 2024 22:32:52 -0400 Subject: 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. --- src/client/views/nodes/ComparisonBox.tsx | 44 ++++++++++++---------- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 +-- .../views/nodes/formattedText/RichTextMenu.tsx | 12 ++++-- 3 files changed, 35 insertions(+), 27 deletions(-) (limited to 'src/client/views') 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() } } + 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() 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() 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 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 { this._editorView!.dispatch(tr.replaceSelectionWith(state.schema.nodes.paragraph.create({ align: textAlign }))); }); @@ -1775,7 +1775,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { }); } + @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 { // 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 { const activeSizes = new Set(); const activeColors = new Set(); const activeHighlights = new Set(); - 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 { // 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 { 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)) { -- cgit v1.2.3-70-g09d2