diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/DragManager.ts | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 34 | ||||
| -rw-r--r-- | src/fields/Key.ts | 8 |
4 files changed, 37 insertions, 8 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f4dcce7c8..dd8a63725 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -63,6 +63,7 @@ export namespace DragManager { let _lastPointerX: number = 0; let _lastPointerY: number = 0; export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) { + if (!dragDiv) { dragDiv = document.createElement("div"); DragManager.Root().appendChild(dragDiv); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index e1b1db685..a53df2d38 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -214,6 +214,8 @@ export class CollectionFreeFormView extends CollectionViewBase { //newBox.SetData(KeyStore.Data, e.key, RichTextField); //SelectionManager.SelectDoc(newBox, false); this.addDocument(newBox); + newBox.SetText(KeyStore.Text, e.key); + newBox.SetNumber(KeyStore.SelectOnLoaded, 1); //remove cursor from screen this._previewCursorVisible = false; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 887a377b5..885cb55c4 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -10,12 +10,15 @@ import { Node } from "prosemirror-model"; import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; import { SelectionManager } from "../../util/SelectionManager"; import "./FormattedTextBox.scss"; +import { KeyStore } from "../../../fields/Key"; 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 @@ -40,6 +43,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); @@ -55,16 +59,22 @@ 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); } } - setText(txt: string) { - let tr = new Transaction(new Node()); - let node = new Node(); - node.text = txt; - tr.insert(0, node); - - this.dispatchTransaction(tr); + //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() { @@ -75,7 +85,11 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { plugins: [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }), - keymap(baseKeymap) + keymap(baseKeymap), + //sets the placeholder text! + this.placeholderPlugin( + this.props.doc.GetText(KeyStore.Text, "") + ) ] }; @@ -118,6 +132,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 => { @@ -127,6 +142,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { } } render() { + //if (this.props.doc.GetText(KeyStore.Text, "") !== ; + + return (<div className="formattedTextBox-cont" style={{ color: "initial", diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 8d92b89b6..eeda7be4e 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -54,4 +54,12 @@ export namespace KeyStore { export const LayoutKeys = new Key("LayoutKeys"); export const LayoutFields = new Key("LayoutFields"); export const ColumnsKey = new Key("SchemaColumns"); + + //used for setting the text of a text document + export const Text = new Key("Text"); + //determines whether doc views will be selected when they are first loaded + //should be NumberField where 0 = false and 1 = true + //currently only implemented for FormattedTextView + export const SelectOnLoaded = new Key("SelectOnLoaded"); + }
\ No newline at end of file |