diff options
Diffstat (limited to 'src/client/views/nodes/FormattedTextBox.tsx')
-rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index a58e1955f..63d00a310 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -3,13 +3,21 @@ import { baseKeymap } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; import { schema } from "prosemirror-schema-basic"; +import { Transform } from "prosemirror-transform"; import { EditorState, Transaction } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; +import { Node } from "prosemirror-model"; import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; import "./FormattedTextBox.scss"; +import { KeyStore } from "../../../fields/KeyStore"; import React = require("react") import { RichTextField } from "../../../fields/RichTextField"; import { FieldViewProps, FieldView } from "./FieldView"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; +import { observer } from "mobx-react"; +import { Schema, DOMParser } from "prosemirror-model" +import { Plugin } from 'prosemirror-state' +import { Decoration, DecorationSet } from 'prosemirror-view' // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -34,6 +42,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { private _ref: React.RefObject<HTMLDivElement>; private _editorView: Opt<EditorView>; private _reactionDisposer: Opt<IReactionDisposer>; + private _lastTextState = ""; constructor(props: FieldViewProps) { super(props); @@ -49,9 +58,24 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { this._editorView.updateState(state); const { doc, fieldKey } = this.props; doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); + this._lastTextState = JSON.stringify(state.toJSON); } } + //enables textboxes to be created with preexisting text or placeholder text + //this method is passed in as part of the config the editor state in componentDidMount() + placeholderPlugin(text: string) { + return new Plugin({ + props: { + decorations(state) { + let doc = state.doc + if (doc.childCount == 1 && doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size == 0) + return DecorationSet.create(doc, [Decoration.widget(1, document.createTextNode(text))]) + } + } + }) + } + componentDidMount() { let state: EditorState; const { doc, fieldKey } = this.props; @@ -60,7 +84,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { plugins: [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }), - keymap(baseKeymap) + keymap(baseKeymap), + //sets the placeholder text to what's in KeyStore.Text! ] }; @@ -85,6 +110,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field))); } }) + + //if tagged to be selected when created, then select & focus + if (this.props.doc.GetNumber(KeyStore.SelectOnLoaded, 0)) { + this.props.select(); + this._editorView!.focus(); + } } componentWillUnmount() { @@ -103,6 +134,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { @action onChange(e: React.ChangeEvent<HTMLInputElement>) { const { fieldKey, doc } = this.props; + this._lastTextState = e.target.value; doc.SetData(fieldKey, e.target.value, RichTextField); } onPointerDown = (e: React.PointerEvent): void => { |