From 87495cce1e23b25312efc56a84b849babf367e82 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 19 Jan 2019 00:27:59 -0500 Subject: Got basic version of ProseMirror working --- src/documents/Documents.ts | 2 +- src/views/nodes/FieldTextBox.tsx | 82 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 76 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index bba678bbd..beee44bee 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -44,7 +44,7 @@ export namespace Documents { export function TextDocument(text: string, options:DocumentOptions = {}): Document { let doc = GetTextPrototype().MakeDelegate(); setupOptions(doc, options); - doc.SetField(KeyStore.Data, new TextField(text)); + // doc.SetField(KeyStore.Data, new TextField(text)); return doc; } diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx index 5df3e6012..dbac3906a 100644 --- a/src/views/nodes/FieldTextBox.tsx +++ b/src/views/nodes/FieldTextBox.tsx @@ -1,14 +1,21 @@ -import { Key } from "../../fields/Key"; +import { Key, KeyStore } from "../../fields/Key"; import { Document } from "../../fields/Document"; import { observer } from "mobx-react"; import { TextField } from "../../fields/TextField"; import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, reaction, IReactionDisposer } from "mobx"; + +import {schema} from "prosemirror-schema-basic"; +import {EditorState, Transaction} from "prosemirror-state" +import {EditorView} from "prosemirror-view" +import {keymap} from "prosemirror-keymap" +import {baseKeymap} from "prosemirror-commands" +import {undo, redo, history} from "prosemirror-history" +import { Opt } from "../../fields/Field"; interface IProps { fieldKey:Key; doc:Document; - test:string; } // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -28,13 +35,76 @@ interface IProps { // this will edit the document and assign the new value to that field. // @observer -export class FieldTextBox extends React.Component { +export class FieldTextBox extends React.Component { + private _ref: React.RefObject; + private _editorView: Opt; + private _reactionDisposer: Opt; constructor(props:IProps) { super(props); + + this._ref = React.createRef(); + this.onChange = this.onChange.bind(this); } + dispatchTransaction = (tx: Transaction) => { + if(this._editorView) { + const state = this._editorView.state.apply(tx); + this._editorView.updateState(state); + const {doc, fieldKey} = this.props; + doc.SetFieldValue(fieldKey, JSON.stringify(state.toJSON()), TextField); + } + } + + componentDidMount() { + let state:EditorState; + const {doc, fieldKey} = this.props; + const config = { + schema, + plugins: [ + history(), + keymap({"Mod-z": undo, "Mod-y": redo}), + keymap(baseKeymap) + ] + }; + + let field = doc.GetFieldT(fieldKey, TextField); + if(field) { + state = EditorState.fromJSON(config, JSON.parse(field.Data)); + } else { + state = EditorState.create(config); + } + if(this._ref.current) { + this._editorView = new EditorView(this._ref.current, { + state, + dispatchTransaction: this.dispatchTransaction + }); + } + + this._reactionDisposer = reaction(() => { + const field = this.props.doc.GetFieldT(this.props.fieldKey, TextField); + return field ? field.Data : undefined; + }, (field) => { + if(field && this._editorView) { + this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field))); + } + }) + } + + componentWillUnmount() { + if(this._editorView) { + this._editorView.destroy(); + } + if(this._reactionDisposer) { + this._reactionDisposer(); + } + } + + shouldComponentUpdate() { + return false; + } + @action onChange(e: React.ChangeEvent) { const {fieldKey, doc} = this.props; @@ -42,8 +112,6 @@ export class FieldTextBox extends React.Component { } render() { - const {fieldKey, doc} = this.props; - const value = doc.GetFieldValue(fieldKey, TextField, String("")); - return () + return (
) } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 957bb8a462d233b8064ad1a957f2525dbd5995bc Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 19 Jan 2019 22:17:26 -0500 Subject: Added normalize.css --- package-lock.json | 5 +++++ package.json | 1 + src/Main.tsx | 1 + 3 files changed, 7 insertions(+) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 15ae9d764..955f0f3ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4482,6 +4482,11 @@ "remove-trailing-separator": "^1.0.1" } }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", diff --git a/package.json b/package.json index f0c5c84c5..08e999058 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "mobx-react": "^5.3.5", "mobx-react-devtools": "^6.0.3", "node-sass": "^4.11.0", + "normalize.css": "^8.0.1", "prosemirror-commands": "^1.0.7", "prosemirror-history": "^1.0.3", "prosemirror-keymap": "^1.0.1", diff --git a/src/Main.tsx b/src/Main.tsx index 09c2b111f..3d0cf052f 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import "./Main.scss"; +import "normalize.css" import { NodeCollectionStore } from './stores/NodeCollectionStore'; import { StaticTextNodeStore } from './stores/StaticTextNodeStore'; import { VideoNodeStore } from './stores/VideoNodeStore'; -- cgit v1.2.3-70-g09d2