fix(lib/rich-text): replace string to json

src/features/cards/pages/edit.js

@@ -92,7 +92,7 @@ CardEditView.propTypes = {
   card: PropTypes.shape({
     title: PropTypes.string,
     id: PropTypes.number,
-    content: PropTypes.string,
+    content: PropTypes.shape({}),
   }),
 }
 

src/features/cards/setup-formik-for-create-edit.js

@@ -17,9 +17,10 @@ export const setupFormikForCreateEdit = {
 
     if (values.title.trim().length < CONTENT_MIN_LENGTH) {
       errors.title = "Please, fill title"
-    } else if (values.content.trim().length < CONTENT_MIN_LENGTH) {
-      errors.content = "Please, fill card content"
     }
+    // else if (values.content.trim().length < CONTENT_MIN_LENGTH) {
+    //   errors.content = "Please, fill card content"
+    // }
     return errors
   },
   handleSubmit: async (values, { props, setSubmitting }) => {

src/lib/rich-text/rich-editor.js

@@ -31,17 +31,10 @@ export const MARKS_COMPONENTS = {
   underlined: "u",
 }
 
-let firstUpdate = false
+const fromJsonToValue = (content) =>
+  content ? Value.fromJSON(content) : Plain.deserialize("")
 
 export class RichEditor extends React.Component {
-  state = {
-    // eslint-disable-next-line react/destructuring-assignment
-    value: this.props.content
-      ? // eslint-disable-next-line react/destructuring-assignment
-        Value.fromJSON(JSON.parse(this.props.content))
-      : Plain.deserialize(""),
-  }
-
   renderNode = (props, editor, next) => {
     const { attributes, children, node } = props
 
@@ -50,17 +43,6 @@ export class RichEditor extends React.Component {
     return Type ? <Type {...attributes}>{children}</Type> : next()
   }
 
-  componentDidUpdate() {
-    const { content } = this.props
-
-    if (!firstUpdate) {
-      firstUpdate = true
-      // @TODO: Fix this fucking thing.
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({ value: Value.fromJSON(JSON.parse(content)) })
-    }
-  }
-
   renderMark = (props, editor, next) => {
     const { children, mark, attributes } = props
 
@@ -72,11 +54,9 @@ export class RichEditor extends React.Component {
   onChange = ({ value }) => {
     const { onChange } = this.props
 
-    this.setState({ value }, () => {
-      if (typeof onChange === "function") {
-        onChange(JSON.stringify(value))
-      }
-    })
+    if (typeof onChange === "function") {
+      onChange(value)
+    }
   }
 
   renderEditor = (props, editor, next) => {
@@ -91,18 +71,17 @@ export class RichEditor extends React.Component {
   }
 
   render() {
-    const { value } = this.state
-    const { readOnly } = this.props
+    const { content, readOnly } = this.props
 
     return (
       <RichEditorStyle>
         <Editor
+          value={fromJsonToValue(content)}
           readOnly={readOnly}
           {...HotKeys(configCodePlugin)}
           style={{
             minHeight: "300px",
           }}
-          value={value}
           onChange={this.onChange}
           renderEditor={this.renderEditor}
           renderMark={this.renderMark}