aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FormattedTextBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/FormattedTextBox.tsx')
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx92
1 files changed, 37 insertions, 55 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index e06be7079..2705fac14 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,20 +1,21 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons';
-import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace, untracked, autorun } from "mobx";
+import { action, computed, IReactionDisposer, Lambda, observable, reaction } from "mobx";
import { observer } from "mobx-react";
import { baseKeymap } from "prosemirror-commands";
import { history } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
-import { Node as ProsNode } from "prosemirror-model";
-import { EditorState, Plugin, Transaction, Selection } from "prosemirror-state";
-import { NodeType, Slice, Node, Fragment } from 'prosemirror-model';
+import { Fragment, Node, Node as ProsNode, NodeType, Slice } from "prosemirror-model";
+import { EditorState, Plugin, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
-import { Doc, Opt, DocListCast } from "../../../new_fields/Doc";
-import { Id, Copy } from '../../../new_fields/FieldSymbols';
+import { DateField } from '../../../new_fields/DateField';
+import { Doc, DocListCast, Opt, WidthSym } from "../../../new_fields/Doc";
+import { Copy, Id } from '../../../new_fields/FieldSymbols';
import { List } from '../../../new_fields/List';
import { RichTextField, ToPlainText, FromPlainText } from "../../../new_fields/RichTextField";
-import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema";
import { BoolCast, Cast, NumCast, StrCast, DateCast } from "../../../new_fields/Types";
+import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { Utils } from '../../../Utils';
import { DocServer } from "../../DocServer";
import { Docs, DocUtils } from '../../documents/Documents';
import { DocumentManager } from '../../util/DocumentManager';
@@ -26,18 +27,14 @@ import { SelectionManager } from "../../util/SelectionManager";
import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu";
import { TooltipTextMenu } from "../../util/TooltipTextMenu";
import { undoBatch, UndoManager } from "../../util/UndoManager";
-import { ContextMenu } from "../../views/ContextMenu";
-import { ContextMenuProps } from '../ContextMenuItem';
import { DocComponent } from "../DocComponent";
import { InkingControl } from "../InkingControl";
import { FieldView, FieldViewProps } from "./FieldView";
import "./FormattedTextBox.scss";
import React = require("react");
-import { DateField } from '../../../new_fields/DateField';
-import { Utils } from '../../../Utils';
-import { MainOverlayTextBox } from '../MainOverlayTextBox';
import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils';
import { DocumentDecorations } from '../DocumentDecorations';
+import { MainOverlayTextBox } from '../MainOverlayTextBox';
library.add(faEdit);
library.add(faSmile, faTextHeight, faUpload);
@@ -74,7 +71,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
public static Instance: FormattedTextBox;
private _ref: React.RefObject<HTMLDivElement>;
- private _outerdiv?: (dominus: HTMLElement) => void;
private _proseRef?: HTMLDivElement;
private _editorView: Opt<EditorView>;
private static _toolTipTextMenu: TooltipTextMenu | undefined = undefined;
@@ -83,6 +79,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
private _reactionDisposer: Opt<IReactionDisposer>;
private _searchReactionDisposer?: Lambda;
private _textReactionDisposer: Opt<IReactionDisposer>;
+ private _heightReactionDisposer: Opt<IReactionDisposer>;
private _proxyReactionDisposer: Opt<IReactionDisposer>;
private pullReactionDisposer: Opt<IReactionDisposer>;
private pushReactionDisposer: Opt<IReactionDisposer>;
@@ -133,13 +130,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
constructor(props: FieldViewProps) {
super(props);
- //if (this.props.firstinstance) {
FormattedTextBox.Instance = this;
- //}
- if (this.props.outer_div) {
- this._outerdiv = this.props.outer_div;
- }
-
this._ref = React.createRef();
if (this.props.isOverlay) {
DragManager.StartDragFunctions.push(() => FormattedTextBox.InputBoxOverlay = undefined);
@@ -182,7 +173,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
dispatchTransaction = (tx: Transaction) => {
if (this._editorView) {
const state = this._editorView.state.apply(tx);
+ FormattedTextBox._toolTipTextMenu && (FormattedTextBox._toolTipTextMenu.HackToFixTextSelectionGlitch = true);
this._editorView.updateState(state);
+ FormattedTextBox._toolTipTextMenu && (FormattedTextBox._toolTipTextMenu.HackToFixTextSelectionGlitch = false);
if (state.selection.empty && FormattedTextBox._toolTipTextMenu) {
const marks = tx.storedMarks;
if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); }
@@ -215,9 +208,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
tokens.forEach((word) => {
if (terms.includes(word) && this._editorView) {
this._editorView.dispatch(this._editorView.state.tr.addMark(start, start + word.length, mark).removeStoredMark(mark));
- // else {
- // this._editorView.state.tr.addMark(start, start + word.length, mark).removeStoredMark(mark);
- // }
}
start += word.length + 1;
});
@@ -271,25 +261,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
this.props.Document.layout = de.data.draggedDocuments[0];
de.data.draggedDocuments[0].isTemplate = true;
e.stopPropagation();
- // let ldocs = Cast(this.dataDoc.subBulletDocs, listSpec(Doc));
- // if (!ldocs) {
- // this.dataDoc.subBulletDocs = new List<Doc>([]);
- // }
- // ldocs = Cast(this.dataDoc.subBulletDocs, listSpec(Doc));
- // if (!ldocs) return;
- // if (!ldocs || !ldocs[0] || ldocs[0] instanceof Promise || StrCast((ldocs[0] as Doc).layout).indexOf("CollectionView") === -1) {
- // ldocs.splice(0, 0, Docs.StackingDocument([], { title: StrCast(this.dataDoc.title) + "-subBullets", x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document.height), width: 300, height: 300 }));
- // this.props.addDocument && this.props.addDocument(ldocs[0] as Doc);
- // this.props.Document.templates = new List<string>([Templates.Bullet.Layout]);
- // this.props.Document.isBullet = true;
- // }
- // let stackDoc = (ldocs[0] as Doc);
- // if (de.data.moveDocument) {
- // de.data.moveDocument(de.data.draggedDocuments[0], stackDoc, (doc) => {
- // Cast(stackDoc.data, listSpec(Doc))!.push(doc);
- // return true;
- // });
- // }
}
}
}
@@ -370,6 +341,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
);
+ this._heightReactionDisposer = reaction(
+ () => this.props.Document[WidthSym](),
+ () => this.tryUpdateHeight()
+ );
+
this._textReactionDisposer = reaction(
() => this.extensionDoc,
() => {
@@ -579,7 +555,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
dispatchTransaction: this.dispatchTransaction,
nodeViews: {
image(node, view, getPos) { return new ImageResizeView(node, view, getPos); },
- star(node, view, getPos) { return new SummarizedView(node, view, getPos); }
+ star(node, view, getPos) { return new SummarizedView(node, view, getPos); },
},
clipboardTextSerializer: this.clipboardTextSerializer,
handlePaste: this.handlePaste,
@@ -593,8 +569,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
if (this.props.selectOnLoad) {
if (!this.props.isOverlay) this.props.select(false);
else this._editorView!.focus();
- this.tryUpdateHeight();
}
+ this.tryUpdateHeight();
}
componentWillUnmount() {
@@ -604,9 +580,14 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
this._textReactionDisposer && this._textReactionDisposer();
this.pushReactionDisposer && this.pushReactionDisposer();
this.pullReactionDisposer && this.pullReactionDisposer();
+ this._heightReactionDisposer && this._heightReactionDisposer();
+ this._searchReactionDisposer && this._searchReactionDisposer();
}
onPointerDown = (e: React.PointerEvent): void => {
+ if (this.props.onClick && e.button === 0) {
+ e.preventDefault();
+ }
if (e.button === 0 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
e.stopPropagation();
if (FormattedTextBox._toolTipTextMenu && FormattedTextBox._toolTipTextMenu.tooltip) {
@@ -752,15 +733,15 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
@action
tryUpdateHeight() {
- if (this.props.isOverlay && this.props.Document.autoHeight) {
- let self = this;
+ if (this.props.Document.autoHeight && this._ref.current!.scrollHeight !== 0) {
+ console.log("DT = " + this.props.Document.title + " " + this._ref.current!.clientHeight + " " + this._ref.current!.scrollHeight + " " + this._ref.current!.textContent);
let xf = this._ref.current!.getBoundingClientRect();
- let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, xf.height);
- let nh = NumCast(this.dataDoc.nativeHeight, 0);
+ let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, this._ref.current!.textContent === "" ? 35 : this._ref.current!.scrollHeight);
+ let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0);
let dh = NumCast(this.props.Document.height, 0);
let sh = scrBounds.height;
const ChromeHeight = MainOverlayTextBox.Instance.ChromeHeight;
- this.props.Document.height = (nh ? dh / nh * sh : sh) + (ChromeHeight ? ChromeHeight() : 0);
+ this.props.Document.height = Math.max(10, (nh ? dh / nh * sh : sh) + (ChromeHeight ? ChromeHeight() : 0));
this.dataDoc.nativeHeight = nh ? sh : undefined;
}
}
@@ -775,12 +756,12 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
specificContextMenu = (e: React.MouseEvent): void => {
- let subitems: ContextMenuProps[] = [];
- subitems.push({
- description: BoolCast(this.props.Document.autoHeight) ? "Manual Height" : "Auto Height",
- event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight)), icon: "expand-arrows-alt"
- });
- ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" });
+ // let subitems: ContextMenuProps[] = [];
+ // subitems.push({
+ // description: BoolCast(this.props.Document.autoHeight) ? "Manual Height" : "Auto Height",
+ // event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight)), icon: "expand-arrows-alt"
+ // });
+ // ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" });
}
@@ -794,8 +775,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
return (
<div className={`formattedTextBox-cont-${style}`} ref={this._ref}
style={{
+ overflowY: this.props.Document.autoHeight ? "hidden" : "auto",
height: this.props.height ? this.props.height : undefined,
- background: this.props.hideOnLeave ? "rgba(0,0,0,0.4)" : undefined,
+ background: this.props.hideOnLeave ? "rgba(0,0,0 ,0.4)" : undefined,
opacity: this.props.hideOnLeave ? (this._entered || this.props.isSelected() || Doc.IsBrushed(this.props.Document) ? 1 : 0.1) : 1,
color: this.props.color ? this.props.color : this.props.hideOnLeave ? "white" : "inherit",
pointerEvents: interactive,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 17:30:48 +0000