aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FormattedTextBox.tsx
diff options
context:
space:
mode:
authorSam Wilkins <abdullah_ahmed@brown.edu>2019-04-13 19:11:49 -0400
committerSam Wilkins <abdullah_ahmed@brown.edu>2019-04-13 19:11:49 -0400
commit35f09470b2939a6640b85c94a9a4ea2551a6ea42 (patch)
tree5beb6aaaa2198d28d30bce288f9041398d6d4f84 /src/client/views/nodes/FormattedTextBox.tsx
parent8c58ff299e371c70147aa8123ed9fb0ae1a9e880 (diff)
parentc392a9322c1df269cfd823dd82d07d991fe065c0 (diff)
resolved merge conflicts
Diffstat (limited to 'src/client/views/nodes/FormattedTextBox.tsx')
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx77
1 files changed, 51 insertions, 26 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index e872ea48b..41cb34416 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -5,7 +5,6 @@ import { keymap } from "prosemirror-keymap";
import { EditorState, Plugin, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { FieldWaiting, Opt } from "../../../fields/Field";
-import { KeyStore } from "../../../fields/KeyStore";
import { RichTextField } from "../../../fields/RichTextField";
import { inpRules } from "../../util/RichTextRules";
import { Schema } from "prosemirror-model";
@@ -37,7 +36,12 @@ const { menuBar } = require("prosemirror-menu");
// specified Key and assigns it to an HTML input node. When changes are made to this node,
// this will edit the document and assign the new value to that field.
//]
-export class FormattedTextBox extends React.Component<FieldViewProps> {
+
+export interface FormattedTextBoxOverlay {
+ isOverlay?: boolean;
+}
+
+export class FormattedTextBox extends React.Component<(FieldViewProps & FormattedTextBoxOverlay)> {
public static LayoutString(fieldStr: string = "DataKey") {
return FieldView.LayoutString(FormattedTextBox, fieldStr);
}
@@ -45,6 +49,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
private _inputReactionDisposer: Opt<IReactionDisposer>;
+ private _proxyReactionDisposer: Opt<IReactionDisposer>;
constructor(props: FieldViewProps) {
super(props);
@@ -57,8 +62,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
if (this._editorView) {
const state = this._editorView.state.apply(tx);
this._editorView.updateState(state);
- this.FieldDoc.SetDataOnPrototype(
- this.FieldKey,
+ this.props.Document.SetDataOnPrototype(
+ this.props.fieldKey,
JSON.stringify(state.toJSON()),
RichTextField
);
@@ -66,22 +71,28 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
}
- get FieldDoc() { return this.props.fieldKey === KeyStore.Archives ? Main.Instance._textDoc! : this.props.Document; }
- get FieldKey() { return this.props.fieldKey === KeyStore.Archives ? KeyStore.Data : this.props.fieldKey; }
-
componentDidMount() {
const config = {
schema,
inpRules, //these currently don't do anything, but could eventually be helpful
- plugins: [
+ plugins: this.props.isOverlay ? [
history(),
keymap(buildKeymap(schema)),
keymap(baseKeymap),
- this.tooltipMenuPlugin()
- ]
+ this.tooltipMenuPlugin(),
+ new Plugin({
+ props: {
+ attributes: { class: "ProseMirror-example-setup-style" }
+ }
+ })
+ ] : [
+ history(),
+ keymap({ "Mod-z": undo, "Mod-y": redo }),
+ keymap(baseKeymap),
+ ]
};
- if (this.props.fieldKey === KeyStore.Archives) {
+ if (this.props.isOverlay) {
this._inputReactionDisposer = reaction(() => Main.Instance._textDoc && Main.Instance._textDoc.Id,
() => {
if (this._editorView) {
@@ -91,11 +102,14 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
this.setupEditor(config);
}
);
+ } else {
+ this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
+ () => this.props.isSelected() && Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform()));
}
this._reactionDisposer = reaction(
() => {
- const field = this.FieldDoc.GetT(this.FieldKey, RichTextField);
+ const field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined;
return field && field !== FieldWaiting ? field.Data : undefined;
},
field => {
@@ -110,9 +124,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
private setupEditor(config: any) {
-
let state: EditorState;
- let field = this.FieldDoc.GetT(this.FieldKey, RichTextField);
+ let field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined;
if (field && field !== FieldWaiting && field.Data) {
state = EditorState.fromJSON(config, JSON.parse(field.Data));
} else {
@@ -141,6 +154,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
if (this._inputReactionDisposer) {
this._inputReactionDisposer();
}
+ if (this._proxyReactionDisposer) {
+ this._proxyReactionDisposer();
+ }
}
shouldComponentUpdate() {
@@ -154,23 +170,30 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
// doc.SetData(fieldKey, e.target.value, RichTextField);
}
onPointerDown = (e: React.PointerEvent): void => {
- if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
+ console.log("pointer down");
+ if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
+ console.log("first");
e.stopPropagation();
}
+ if (e.button === 2) {
+ console.log("second");
+ e.preventDefault();
+ }
}
onPointerUp = (e: React.PointerEvent): void => {
+ console.log("pointer up");
if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
e.stopPropagation();
}
- if (this.props.fieldKey !== KeyStore.Archives) {
- e.preventDefault();
- Main.Instance.SetTextDoc(this.props.Document, this._ref.current!);
- }
}
onFocused = (e: React.FocusEvent): void => {
- if (this.props.fieldKey !== KeyStore.Archives) {
- Main.Instance.SetTextDoc(this.props.Document, this._ref.current!);
+ if (!this.props.isOverlay) {
+ Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform());
+ } else {
+ if (this._ref.current) {
+ this._ref.current.scrollTop = Main.Instance._textScroll;
+ }
}
}
@@ -201,16 +224,16 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
e.stopPropagation();
}
- tooltipMenuPlugin(): Plugin<any, any> {
+ tooltipMenuPlugin() {
+ let myprops = this.props;
return new Plugin({
view(_editorView) {
- return new TooltipTextMenu(_editorView);
+ return new TooltipTextMenu(_editorView, myprops);
}
});
}
onKeyPress(e: React.KeyboardEvent) {
- console.log(e.keyCode)
- // e.stopPropagation();
+ e.stopPropagation();
// stop propagation doesn't seem to stop propagation of native keyboard events.
// so we set a flag on the native event that marks that the event's been handled.
// (e.nativeEvent as any).DASHFormattedTextBoxHandled = true;
@@ -218,9 +241,11 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
render() {
return (
<div
- className="formattedTextBox-cont"
+ className={`formattedTextBox-cont`}
+ style={{ overflow: "visible" }}
onKeyDown={this.onKeyPress}
onKeyPress={this.onKeyPress}
+ onFocus={this.onFocused}
onPointerUp={this.onPointerUp}
onPointerDown={this.onPointerDown}
onContextMenu={this.specificContextMenu}