[WIP] Fix for #132, but need to fix tests which break after these cha…

…nges.
OpusCapita · Sep 24, 2018 · e2a1c34 · e2a1c34
1 parent 87e1330
commit e2a1c34
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/src/client/components/MarkdownInput/MarkdownInput.DOCUMENTATION.md b/src/client/components/MarkdownInput/MarkdownInput.DOCUMENTATION.md
@@ -68,7 +68,7 @@ function (optional) that is called on when the user presses the button, the func
   <MarkdownInput
     onChange={_scope.handleValueChange}
     onBlur={() => console.log('blur')}
-    value={_scope.state.markdownExample}
+    value={_scope.state.updatedMarkdown}
     autoFocus={false}
     readOnly={false}
     showFullScreenButton={true}

diff --git a/src/client/components/MarkdownInput/MarkdownInput.SCOPE.react.js b/src/client/components/MarkdownInput/MarkdownInput.SCOPE.react.js
@@ -13,14 +13,20 @@ export default
 class MarkdownInputScope extends React.Component {
   state = {
     markdownExample: text,
-    updatedMarkdown: ''
+    updatedMarkdown: text
   };
 
   handleValueChange = (value) => {
+    console.log('handleValueChange', { value });
     this.setState({ updatedMarkdown: value });
   };
 
   render() {
-    return this._renderChildren();
+    return (
+      <div>
+        <button onClick={_ => this.handleValueChange(text)}>Reset</button>
+        {this._renderChildren()}
+      </div>
+    )
   }
 }
diff --git a/src/client/components/PlainMarkdownInput/PlainMarkdownInput.react.js b/src/client/components/PlainMarkdownInput/PlainMarkdownInput.react.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import { Editor } from 'slate-react';
 import Plain from 'slate-plain-serializer';
-
 import schema from './slate/schema';
 import './PlainMarkdownInput.less';
 import { parse } from './slate/tokenizer';
@@ -103,9 +102,18 @@ class PlainMarkdownInput extends React.Component {
     this.handleNewValue(this.props.value);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      this.handleNewValue(nextProps.value);
+  // componentWillReceiveProps(nextProps) {
+  //   if (this.props.value !== nextProps.value) {
+  //     this.handleNewValue(nextProps.value);
+  //   }
+  // }
+
+  componentDidUpdate() {
+    if (this.props.value !== Plain.serialize(this.state.editorState)) {
+      // console.log('cdu: >>>>> NOT <<<<<< equal');
+      this.handleNewValue(this.props.value);
+    } else {
+      // console.log('cdu: equal, skip');
     }
   }
 
@@ -332,9 +340,11 @@ class PlainMarkdownInput extends React.Component {
 
   handleLinkButtonClick = () => this.handleChange(wrapLink(this.state.editorState));
 
-  getCurrentText = () => this.state.editorState.document.nodes.toArray().
-    map(block => block.text).
-    join('\n')
+  // getCurrentText = () => this.state.editorState.document.nodes.toArray(). // TODO replace with Plain.serialize ?
+  //   map(block => block.text).
+  //   join('\n')
+
+  getCurrentText = _ => Plain.serialize(this.state.editorState);
 
   insertAtCursorPosition = insertedText => {
     const change = this.state.editorState.change();