diff options
Diffstat (limited to 'src')
3 files changed, 27 insertions, 11 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 4ba8c8469..6663fb68f 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -6,12 +6,15 @@ import { DocumentIconContainer } from "../../nodes/DocumentIcon"; import React, { FormEvent } from "react"; import { FieldView, FieldViewProps } from "../../nodes/FieldView"; import { ObjectField } from "../../../../fields/ObjectField"; +import { Doc } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; export interface SchemaCellFieldProps { contents: any; fieldContents?: FieldViewProps; editing?: boolean; oneLine?: boolean; + Document: Doc; highlightCells?: (text: string) => void; GetValue(): string | undefined; SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean; @@ -33,7 +36,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro makeObservable(this); } + get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore + componentDidMount(): void { + this._content = this.props.GetValue() ?? ''; + this.setContent(this._content); this._disposers.editing = reaction( () => this._editing, editing => { @@ -43,6 +50,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); this._props.highlightCells?.(this._props.GetValue() ?? ''); + this.setContent(this._content); } }); } else { @@ -53,8 +61,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro }, { fireImmediately: true } ); - this._content = this.props.GetValue() ?? ''; - this.setContent(this._content); } componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) { @@ -74,13 +80,24 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro } chunkContent = (content: string) => { - const matches = this._props.func(content, true); + const pattern = /(this|d(\d+))\.(\w+)/g; + interface Match { docRef: string; field: string; } + + const matches: Match[] = []; + let match: RegExpExecArray | null; + + while ((match = pattern.exec(content)) !== null) { + const docRef = match[1] === 'this' ? match[1] : match[2]; + matches.push({ docRef, field: match[3] }); + } + const cells = this._props.func(content, false); let chunkedText = content; let matchNum = 0; - matches.forEach((docRef, field) => { - console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop) - chunkedText = chunkedText.replace(`d5.type`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d5.type</span>`); + matches.forEach((match: Match) => { + const {docRef, field} = match; + // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef; + chunkedText = chunkedText.replace(`d${docRef}.${field}`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d${docRef}.${field}</span>`); ++matchNum; }) return chunkedText; @@ -88,9 +105,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro @action setContent = (content: string) => { - console.log(this.chunkContent(content)); this._displayedContent = this.chunkContent(content); - console.log('displayed: ' + this._displayedContent); } @action @@ -157,11 +172,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); } this._content = targVal; + this._props.highlightCells?.(targVal); if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) { this.setContent(targVal); setTimeout(() => this.restoreCursorPosition(cursorPos), 0); } - this._props.highlightCells?.(targVal); }; @action @@ -245,7 +260,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro onPointerDown={e => e.stopPropagation} onClick={e => e.stopPropagation} onPointerUp={e => e.stopPropagation} - dangerouslySetInnerHTML={{ __html: `<span>${this._displayedContent}</span>` }} + dangerouslySetInnerHTML={{ __html: this._displayedContent }} > </div> ); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 121605a2b..c0ad95141 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -131,7 +131,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { <div className="schema-row" onPointerDown={e => this.setCursorIndex(e.clientY)} - style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} + style={{ height: this._props.PanelHeight()}} ref={(row: HTMLDivElement | null) => { row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 74ee46065..3233e363a 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -181,6 +181,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro pointerEvents: this.lockedInteraction ? 'none' : pointerEvents, }}> <SchemaCellField + Document={this._props.Document} highlightCells={this.adjustedHighlight} func={this._props.func} ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)} |