diff --git a/src/client/components/MarkdownInput/MarkdownInput.DOCUMENTATION.md b/src/client/components/MarkdownInput/MarkdownInput.DOCUMENTATION.md index 58bd6fcd..645e6ec9 100644 --- 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 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 index b7d7ba1b..e9b5bd8a 100644 --- 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 ( +
+ + {this._renderChildren()} +
+ ) } } diff --git a/src/client/components/PlainMarkdownInput/PlainMarkdownInput.react.js b/src/client/components/PlainMarkdownInput/PlainMarkdownInput.react.js index b83e29ec..73b05ef7 100644 --- 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();