fix(lib/rich-text): editor loading on edit page

src/features/cards/pages/create.js

@@ -1,8 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
+import Plain from "slate-plain-serializer"
+
 import { connect } from "react-redux"
 import { withFormik } from "formik"
-import { compose } from "recompose"
+import { compose, withProps } from "recompose"
 
 import { Col } from "@lib/styled-components-layout"
 import { RichEditor } from "@lib/rich-text"
@@ -23,6 +25,12 @@ const enhance = compose(
     mapStateToProps,
     mapDispatchToProps,
   ),
+  withProps({
+    card: {
+      title: "",
+      content: Plain.deserialize("").toJS(),
+    },
+  }),
   withFormik(setupFormikForCreateEdit),
 )
 

src/features/cards/pages/edit.js

@@ -1,14 +1,22 @@
 import React from "react"
 import PropTypes from "prop-types"
+import Plain from "slate-plain-serializer"
 import { connect } from "react-redux"
 import { withFormik } from "formik"
-import { compose, withPropsOnChange } from "recompose"
+import {
+  compose,
+  withPropsOnChange,
+  lifecycle,
+  mapProps,
+  withState,
+} from "recompose"
 
 import { Col } from "@lib/styled-components-layout"
 import { RichEditor } from "@lib/rich-text"
 import { Authenticated } from "@features/common"
 import { Card, ButtonPrimary, Input } from "@ui/atoms"
 
+import { PlaneDimensions } from "styled-icons/fa-solid/Plane"
 import { CardsCommonTemplate } from "../templates/common"
 import { fetchFullCard, cardEdit } from "../effects"
 import { setupFormikForCreateEdit } from "../setup-formik-for-create-edit"
@@ -52,7 +60,7 @@ const CardEditView = ({
   values,
 }) => (
   <>
-    {card && (
+    {values.content && (
       <CardsCommonTemplate>
         <Authenticated
           render={() => (
@@ -70,6 +78,7 @@ const CardEditView = ({
                     failed={touched.title && Boolean(errors.title)}
                   />
                   <RichEditor
+                    key={card.id}
                     disabled={isSubmitting}
                     content={values.content}
                     onChange={(content) => setFieldValue("content", content)}
@@ -92,7 +101,7 @@ CardEditView.propTypes = {
   card: PropTypes.shape({
     title: PropTypes.string,
     id: PropTypes.number,
-    content: PropTypes.string,
+    content: PropTypes.shape({}),
   }),
 }
 

src/features/cards/pages/view.js

@@ -74,7 +74,7 @@ CardView.propTypes = {
     title: PropTypes.string,
     authorId: PropTypes.number,
     updatedAt: PropTypes.string,
-    content: PropTypes.string,
+    content: PropTypes.shape({}),
   }).isRequired,
 }
 

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

@@ -1,25 +1,21 @@
+import Plain from "slate-plain-serializer"
+
 const CONTENT_MIN_LENGTH = 3
 
 export const setupFormikForCreateEdit = {
   enableReinitialize: true,
-  mapPropsToValues: (props) => {
-    const initialValues = {
-      title: "",
-      content: "",
-    }
-
-    const values = props.card
-
-    return values || initialValues
-  },
+  mapPropsToValues: (props) => ({
+    ...props.card,
+  }),
   validate: (values) => {
     const errors = {}
 
     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/extensions/code-plugin/code-block.js

@@ -59,7 +59,7 @@ export class CodeBlock extends React.Component {
           editor.setNodeByKey(node.key, { data: { language: codeLanguage } })
         })
         .catch((error) => {
-          console.error(`[@code-block/prismjs]: ${error.message}`)
+          console.warn(`[@code-plugin/code-block:onChange]: ${error.message}`)
         })
     }
   }
@@ -79,7 +79,7 @@ export class CodeBlock extends React.Component {
             })
           })
           .catch((error) => {
-            console.error(`[@code-block/prismjs]: ${error.message}`)
+            console.warn(`[@code-plugin/code-block:onChange] ${error.message}`)
           })
       }
     }

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

@@ -1,5 +1,6 @@
 import React from "react"
-import { Value } from "slate"
+import PropTypes from "prop-types"
+import { Value, Document } from "slate"
 import { Editor } from "slate-react"
 import Plain from "slate-plain-serializer"
 import { HoverMenu, CodePlugin, HotKeys, PrismPlugin } from "./extensions"
@@ -18,28 +19,29 @@ const plugins = [
   CodePlugin(configCodePlugin),
 ]
 
-export const NODES_COMPONENTS = {
+const NODES_COMPONENTS = {
   "block-quote": "blockquote",
   "bulleted-list": "ul",
   "list-item": "li",
   "numbered-list": "ol",
 }
 
-export const MARKS_COMPONENTS = {
+const MARKS_COMPONENTS = {
   bold: "strong",
   italic: "em",
   underlined: "u",
 }
 
-let firstUpdate = false
-
 export class RichEditor extends React.Component {
+  static propTypes = {
+    content: PropTypes.shape({
+      document: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  }
+
   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(""),
+    // eslint-disable-next-line react/no-unused-state, react/destructuring-assignment
+    value: Value.fromJS(this.props.content),
   }
 
   renderNode = (props, editor, next) => {
@@ -50,17 +52,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
 
@@ -69,16 +60,6 @@ export class RichEditor extends React.Component {
     return Type ? <Type {...attributes}>{children}</Type> : next()
   }
 
-  onChange = ({ value }) => {
-    const { onChange } = this.props
-
-    this.setState({ value }, () => {
-      if (typeof onChange === "function") {
-        onChange(JSON.stringify(value))
-      }
-    })
-  }
-
   renderEditor = (props, editor, next) => {
     const children = next()
 
@@ -90,13 +71,25 @@ export class RichEditor extends React.Component {
     )
   }
 
+  onChange = ({ value }) => {
+    const { onChange, readOnly } = this.props
+    const toJS = value.toJS()
+
+    this.setState({ value }, () => {
+      if (!readOnly && typeof onChange === "function") {
+        onChange(toJS)
+      }
+    })
+  }
+
   render() {
-    const { value } = this.state
     const { readOnly } = this.props
+    const { value } = this.state
 
     return (
       <RichEditorStyle>
         <Editor
+          id="foo1"
           readOnly={readOnly}
           {...HotKeys(configCodePlugin)}
           style={{

src/ui/themes/prismcss.js

@@ -50,9 +50,8 @@ export const prismcssDark = css`
     overflow: auto;
     padding: 4rem 2rem;
     border: 1px solid ${(p) => p.theme.palette.decoration.borders};
-    ${({ theme }) =>
-      theme.embed
-        .canvas} /* border: 0.3em solid hsl(30, 20%, 40%);
+    ${({ theme }) => theme.embed.canvas};
+    background-color: #171717; /* border: 0.3em solid hsl(30, 20%, 40%);
     border-radius: 0.5em;
     box-shadow: 1px 1px 0.5em black inset; */
   }
@@ -85,21 +84,27 @@ export const prismcssDark = css`
   }
 
   .token.property,
-  .token.tag,
   .token.boolean,
   .token.number,
-  .token.constant,
+  .token.tag,
   .token.symbol {
     color: hsl(350, 40%, 70%);
   }
 
+  .token.tag.script {
+    color: #4096ae;
+  }
+
   .token.selector,
   .token.attr-name,
-  .token.string,
   .token.char,
   .token.builtin,
   .token.inserted {
-    color: hsl(75, 70%, 60%);
+    color: #4096ae;
+  }
+
+  .token.string {
+    color: #bb7b66;
   }
 
   .token.operator,
@@ -138,8 +143,21 @@ export const prismcssDark = css`
     color: red;
   }
   .token.function-variable.function,
-  .token.class-name {
-    color: #2f75fa;
+  .token.function {
+    color: #c0c28f;
+  }
+
+  .token.class-name,
+  .token.tag {
+    color: #00a78f;
+  }
+  .token.tag.spread.attr-value,
+  .token.tag.spread.punctuation,
+  .token.tag.attr-name,
+  .token.tag.script.language-javascript.script-punctuation.punctuation,
+  .token.tag.script.language-javascript,
+  .token.tag.script.language-javascript.punctuation {
+    color: white;
   }
 `
 
@@ -226,11 +244,14 @@ export const prismcssLight = css`
   .token.tag,
   .token.boolean,
   .token.number,
-  .token.constant,
   .token.symbol {
     color: #c034b4;
   }
 
+  .token.tag.script {
+    color: #4096ae;
+  }
+
   .token.selector,
   .token.attr-name,
   .token.string,
@@ -277,7 +298,16 @@ export const prismcssLight = css`
   }
 
   .token.function-variable.function,
-  .token.class-name {
+  .token.class-name,
+  .token.function {
     color: #2f75fa;
   }
+  .token.tag.spread.attr-value,
+  .token.tag.spread.punctuation,
+  .token.tag.attr-name,
+  .token.tag.script.language-javascript.script-punctuation.punctuation,
+  .token.tag.script.language-javascript,
+  .token.tag.script.language-javascript.punctuation {
+    color: black;
+  }
 `