diff options
| author | bob <bcz@cs.brown.edu> | 2019-04-03 12:42:32 -0400 |
|---|---|---|
| committer | bob <bcz@cs.brown.edu> | 2019-04-03 12:42:32 -0400 |
| commit | 5fbee077873c3dd0a9b5939babbaa1fd4dfe1393 (patch) | |
| tree | 1418a22161e88c734f51c4e1a117c3957a14115d /src/client/views/nodes/FormattedTextBox.tsx | |
| parent | d9076d48a17a4ec2a5b4f4dbd82160bd10f1af22 (diff) | |
| parent | c406c8d123ce0aa9d63fb8a4dd90adfe83d2889d (diff) | |
merged with master
Diffstat (limited to 'src/client/views/nodes/FormattedTextBox.tsx')
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index ad7ddf37a..512ad7d70 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -14,6 +14,9 @@ import { Plugin } from 'prosemirror-state' import { Decoration, DecorationSet } from 'prosemirror-view' import { TooltipTextMenu } from "../../util/TooltipTextMenu" import { ContextMenu } from "../../views/ContextMenu"; +import { inpRules } from "../../util/RichTextRules"; +const { buildMenuItems } = require("prosemirror-example-setup"); +const { menuBar } = require("prosemirror-menu"); @@ -31,7 +34,7 @@ import { ContextMenu } from "../../views/ContextMenu"; // and 'doc' property to the document that is being rendered // // When rendered() by React, this extracts the TextController from the Document stored at the -// specified Key and assigns it to an HTML input node. When changes are made tot his node, +// 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> { @@ -52,7 +55,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { if (this._editorView) { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); - this.props.doc.SetData(this.props.fieldKey, JSON.stringify(state.toJSON()), RichTextField); + const { doc, fieldKey } = this.props; + doc.SetDataOnPrototype(fieldKey, JSON.stringify(state.toJSON()), RichTextField); + // doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); } } @@ -60,6 +65,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { let state: EditorState; const config = { schema, + inpRules, //these currently don't do anything, but could eventually be helpful plugins: [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }), @@ -110,10 +116,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { @action onChange(e: React.ChangeEvent<HTMLInputElement>) { - this.props.doc.SetData(this.props.fieldKey, e.target.value, RichTextField); + const { fieldKey, doc } = this.props; + doc.SetOnPrototype(fieldKey, new RichTextField(e.target.value)) + // doc.SetData(fieldKey, e.target.value, RichTextField); } onPointerDown = (e: React.PointerEvent): void => { - if (e.buttons === 1 && this.props.isSelected()) { + if (e.buttons === 1 && this.props.isSelected() && !e.altKey) { e.stopPropagation(); } } @@ -150,15 +158,19 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { } }) } - onKeyPress(e: React.KeyboardEvent) { 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; } render() { return (<div className="formattedTextBox-cont" + onKeyDown={this.onKeyPress} onKeyPress={this.onKeyPress} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} + // tfs: do we need this event handler onWheel={this.onPointerWheel} ref={this._ref} />) } |
