Merge pull request #5139 from topcoder-platform/fix_for_job_description

fix for job description new PR

Author: luizrrodrigues

package.json

@@ -140,7 +140,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1000.25.7",
+    "topcoder-react-lib": "1000.25.8",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/assets/images/settings/profile/work/tc-text-16-bold-active.svg

@@ -46,37 +46,69 @@ export default class EditorWrapper extends React.Component {
     this.customPlugin = createCustomPlugin({
       editor: this,
     });
+
+    this.onBeforeInput = this.onBeforeInput.bind(this);
+    this.onPasteText = this.onPasteText.bind(this);
   }
 
   componentDidMount() {
     const { connector, initialContent } = this.props;
     connector.addEditor(this);
-    if (initialContent) {
-      let editorState = convertFromHTML(initialContent);
-      editorState = ContentState.createFromBlockArray(
-        editorState.contentBlocks,
-        editorState.entityMap,
-      );
-      editorState = EditorState.createWithContent(editorState);
-      this.initialContent = editorState.getCurrentContent();
-      setImmediate(() => this.setState({ editor: editorState }));
-    }
+    this.setInitialContent(initialContent);
   }
 
-  componentWillReceiveProps({ connector, id }) {
-    const { connector: prevConnector } = this.props;
+  componentWillReceiveProps({ connector, id, initialContent }) {
+    const { connector: prevConnector, initialContent: prevInitialContent } = this.props;
     this.id = id;
     if (connector !== prevConnector) {
       if (prevConnector) prevConnector.removeEditor(this);
       if (connector) connector.addEditor(this);
     }
+    if (initialContent !== prevInitialContent) {
+      this.setInitialContent(initialContent);
+    }
   }
 
   componentWillUnmount() {
     const { connector } = this.props;
     connector.removeEditor(this);
   }
 
+  onBeforeInput() { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  onPasteText(text) { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= text.length + editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  setInitialContent(content) {
+    if (content) {
+      let editorState = convertFromHTML(content);
+      if (editorState.contentBlocks) {
+        editorState = ContentState.createFromBlockArray(
+          editorState.contentBlocks,
+          editorState.entityMap,
+        );
+        editorState = EditorState.createWithContent(editorState);
+        this.initialContent = editorState.getCurrentContent();
+        setImmediate(() => this.setState({ editor: editorState }));
+      }
+    } else {
+      let { editor: editorState } = this.state;
+      editorState = EditorState.push(editorState, ContentState.createFromText(''));
+      this.setState({ editor: editorState });
+    }
+  }
+
   getHtml() {
     const { editor } = this.state;
     return editorStateToHTML(editor.getCurrentContent());
@@ -98,10 +130,9 @@ export default class EditorWrapper extends React.Component {
    * @param {String} type The new block style
    */
   applyBlockStyle(type) {
-    const { editor } = this.state;
-    let editorState = editor;
+    let { editor: editorState } = this.state;
     editorState = RichUtils.toggleBlockType(editorState, type);
-    this.setState({ editorState }); // eslint-disable-line
+    this.setState({ editor: editorState }); // eslint-disable-line
   }
 
   /**
@@ -231,13 +262,16 @@ export default class EditorWrapper extends React.Component {
   }
 
   render() {
-    const { connector, theme } = this.props;
+    const { connector, theme, placeholder } = this.props;
 
     const st = this.state;
 
     let containerStyles = style.container;
     if (st.editor.getSelection().getHasFocus()) {
-      containerStyles += ` ${style.focused}`;
+      containerStyles += ` ${style.focused} is-focused`;
+    }
+    if (st.editor.getCurrentContent().hasText() || /<ol>|<ul>/.test(this.getHtml())) {
+      containerStyles += ' has-user-input';
     }
     if (theme.container) {
       containerStyles += ` ${theme.container}`;
@@ -253,6 +287,7 @@ export default class EditorWrapper extends React.Component {
         tabIndex={0}
       >
         <Editor
+          placeholder={placeholder}
           editorState={st.editor}
           handleKeyCommand={(command, state) => {
             const editorState = RichUtils.handleKeyCommand(state, command);
@@ -283,6 +318,8 @@ export default class EditorWrapper extends React.Component {
           ]}
           ref={(node) => { this.node = node; }}
           spellCheck
+          handleBeforeInput={this.onBeforeInput}
+          handlePastedText={this.onPasteText}
         />
       </div>
     );
@@ -292,13 +329,17 @@ export default class EditorWrapper extends React.Component {
 EditorWrapper.defaultProps = {
   connector: new Connector(),
   id: null,
-  initialContent: null,
+  initialContent: '',
   theme: {},
+  placeholder: '',
+  maxLength: -1,
 };
 
 EditorWrapper.propTypes = {
   connector: PT.instanceOf(Connector),
   id: PT.string,
   initialContent: PT.string,
   theme: PT.shape(),
+  placeholder: PT.string,
+  maxLength: PT.number,
 };

src/assets/images/settings/profile/work/tc-text-16-bold.svg

@@ -0,0 +1,42 @@
+@import "~styles/mixins";
+
+@mixin html-content-style() {
+  @include roboto-regular;
+
+  font-size: 15px;
+  color: #262628;
+
+  em {
+    font-style: italic;
+  }
+
+  p {
+    margin: 6px 0 10px;
+    line-height: 20px;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul,
+  ol {
+    margin: 0 0 0 25px;
+
+    li {
+      min-height: auto;
+      line-height: 20px;
+      padding: 0 0 0 12px;
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+
+  @content;
+}