refactor(lib/rich-text): refactoring the rich text

src/features/cards/pages/edit.js

@@ -1,22 +1,13 @@
 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,
-  lifecycle,
-  mapProps,
-  withState,
-} from "recompose"
+import { compose, withPropsOnChange } 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"
@@ -103,6 +94,14 @@ CardEditView.propTypes = {
     id: PropTypes.number,
     content: PropTypes.shape({}),
   }),
+  errors: PropTypes.shape({}).isRequired,
+  handleBlur: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  touched: PropTypes.shape({}).isRequired,
+  values: PropTypes.shape({}).isRequired,
 }
 
 export const CardEditPage = enhance(CardEditView)

src/features/cards/pages/home.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { connect } from "react-redux"
 import { compose, lifecycle } from "recompose"
-
+import PropTypes from "prop-types"
 import { getAllCards } from "../effects"
 import { CardsCommonTemplate } from "../templates/common"
 import {
@@ -46,4 +46,8 @@ export const CardsHomeView = ({ ids }) => (
   </CardsCommonTemplate>
 )
 
+CardsHomeView.propTypes = {
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
+}
+
 export const CardsHomePage = enhance(CardsHomeView)

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

@@ -1,5 +1,3 @@
-import Plain from "slate-plain-serializer"
-
 const CONTENT_MIN_LENGTH = 3
 
 export const setupFormikForCreateEdit = {

src/features/common/organisms/header.js

@@ -1,8 +1,7 @@
 import React from "react"
-// import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
-
 import { ToggleThemeConsumer } from "@lib/theme-context"
 import { Container } from "@ui/templates"
 import { WithAccount } from "./with-account"
@@ -40,6 +39,15 @@ const linksForUser = ({ account }) => (
   </>
 )
 
+linksForUser.propTypes = {
+  account: PropTypes.shape({
+    user: PropTypes.shape({
+      id: PropTypes.number,
+      email: PropTypes.string,
+    }),
+  }).isRequired,
+}
+
 const linksForAnonym = () => <NavLink to="/join">Join</NavLink>
 
 const ToggleThemeButton = () => (

src/features/users/pages/user.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types"
 import { fetchStatus } from "symbiote-fetching"
 import { compose, withPropsOnChange, branch, renderComponent } from "recompose"
 import { connect } from "react-redux"
-
 import { Col, Row } from "@lib/styled-components-layout"
 import { H3, H1 } from "@ui/atoms"
 import { CardsList, CardItem } from "@features/cards"

src/lib/rich-text/extensions/code-plugin/code-block.js

@@ -2,6 +2,7 @@ import React from "react"
 import PrismComponents from "prismjs/components"
 import ReactSelect from "react-select"
 import styled from "styled-components"
+import PropTypes from "prop-types"
 
 const MultiSelect = styled(ReactSelect)`
   color: black;
@@ -47,8 +48,19 @@ const optionsForSelect = Object.entries(languages)
   })
 
 export class CodeBlock extends React.Component {
+  static propTypes = {
+    editor: PropTypes.shape({}).isRequired,
+    node: PropTypes.shape({}).isRequired,
+    className: PropTypes.string.isRequired,
+    attributes: PropTypes.shape({}).isRequired,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ]).isRequired,
+  }
+
   componentDidMount() {
-    const { editor, className, node, attributes, children } = this.props
+    const { editor, node } = this.props
 
     const codeLanguage = node.data.get("language")
 
@@ -59,6 +71,7 @@ export class CodeBlock extends React.Component {
           editor.setNodeByKey(node.key, { data: { language: codeLanguage } })
         })
         .catch((error) => {
+          // eslint-disable-next-line no-console
           console.warn(`[@code-plugin/code-block:onChange]: ${error.message}`)
         })
     }
@@ -79,6 +92,7 @@ export class CodeBlock extends React.Component {
             })
           })
           .catch((error) => {
+            // eslint-disable-next-line no-console
             console.warn(`[@code-plugin/code-block:onChange] ${error.message}`)
           })
       }

src/lib/rich-text/extensions/hot-keys/common/events/on-key-down-common.js

@@ -2,7 +2,6 @@ import { isModEnter, isBackspace, isEnter, isModA, isTab } from "../../constant"
 import { onEnter, onBackspace, onModEnter, onSelectAll, onTab } from "."
 
 export const onKeyDownCommon = ({ opts, event, change, editor }) => {
-  const { value } = change
   const args = { opts, event, change, editor }
 
   if (opts.selectAll && isModA(event)) {

src/lib/rich-text/extensions/hover-menu/handles/handle-code.js

@@ -1,31 +1,21 @@
 import { DEFAULT_NODE } from "../constant"
 import { unWrapBlocks } from "../unwrap-blocks"
+import { hasBlock } from "../has-block"
 
-export function handleCode(type) {
-  const { editor, configCodePlugin } = this.props
+export const handleCode = (type, editor, configCodePlugin) => {
   const { value } = editor
   const { document } = value
 
-  if (type !== configCodePlugin.block) {
-    const isActive = this.hasBlock(type)
-    const isCodeLine = this.hasBlock("code_line")
-
-    if (isCodeLine) {
-      unWrapBlocks(editor, ["bulleted-list", "numbered-list", "block-quote"])
-
-      editor.setBlocks(isActive ? DEFAULT_NODE : type)
-    }
-  }
-
   if (type === configCodePlugin.block) {
-    const isCodeLine = this.hasBlock(configCodePlugin.line)
+    const isCodeLine = hasBlock(configCodePlugin.line, editor)
     const isType = value.blocks.some((block) =>
       Boolean(document.getClosest(block.key, (parent) => parent.type === type)),
     )
 
-    // @TODO: To delete all marks, not just selected
-    document.getMarks().forEach((mark) => {
-      editor.removeMark(mark)
+    value.document.nodes.forEach((block) => {
+      block.getMarksAsArray().forEach((mark) => {
+        editor.removeMark(mark)
+      })
     })
 
     unWrapBlocks(editor, ["bulleted-list", "numbered-list", "block-quote"])

src/lib/rich-text/extensions/hover-menu/handles/handle-list.js

@@ -1,30 +1,14 @@
 import { DEFAULT_NODE } from "../constant"
 import { unWrapBlocks } from "../unwrap-blocks"
+import { hasBlock } from "../has-block"
 
-export function handleList(type) {
-  const { editor } = this.props
+export const handleList = (type, editor) => {
   const { value } = editor
   const { document } = value
 
-  // Handle everything but list buttons.
-  if (type !== "bulleted-list" && type !== "numbered-list") {
-    const isActive = this.hasBlock(type)
-    const isList = this.hasBlock("list-item")
-
-    if (isList) {
-      unWrapBlocks(editor, [
-        "bulleted-list",
-        "numbered-list",
-        "block-quote",
-        "code",
-      ])
-      editor.setBlocks(isActive ? DEFAULT_NODE : type)
-    }
-  }
-
   if (type === "bulleted-list" || type === "numbered-list") {
     // Handle the extra wrapping required for list buttons.
-    const isList = this.hasBlock("list-item")
+    const isList = hasBlock("list-item", editor)
     const isType = value.blocks.some((block) =>
       Boolean(document.getClosest(block.key, (parent) => parent.type === type)),
     )

src/lib/rich-text/extensions/hover-menu/handles/handle-quote.js

@@ -1,32 +1,22 @@
 import { DEFAULT_NODE } from "../constant"
 import { unWrapBlocks } from "../unwrap-blocks"
+import { hasBlock } from "../has-block"
 
-export function handleQuote(type) {
-  const { editor } = this.props
+export const handleQuote = (type, editor) => {
   const { value } = editor
   const { document } = value
 
-  if (type !== "block-quote") {
-    const isActive = this.hasBlock(type)
-    const isLine = this.hasBlock(DEFAULT_NODE)
-
-    if (isLine) {
-      unWrapBlocks(editor, ["bulleted-list", "numbered-list", "code"])
-      editor.setBlocks(isActive ? DEFAULT_NODE : type)
-    }
-  }
-
   if (type === "block-quote") {
-    const isBlockQoute = this.hasBlock(DEFAULT_NODE)
+    const isLine = hasBlock(DEFAULT_NODE, editor)
     const isType = value.blocks.some((block) =>
       Boolean(document.getClosest(block.key, (parent) => parent.type === type)),
     )
 
     unWrapBlocks(editor, ["bulleted-list", "numbered-list", "code"])
 
-    if (isBlockQoute && isType) {
+    if (isLine && isType) {
       editor.setBlocks(DEFAULT_NODE).unwrapBlock(type)
-    } else if (isBlockQoute) {
+    } else if (isLine) {
       editor.wrapBlock(type)
     } else {
       editor.setBlocks(DEFAULT_NODE).wrapBlock(type)

src/lib/rich-text/extensions/hover-menu/handles/index.js

@@ -1,4 +1,3 @@
-export { updateMenu } from "./update-menu"
 export { handleCode } from "./handle-code"
 export { handleList } from "./handle-list"
 export { handleQuote } from "./handle-quote"

src/lib/rich-text/extensions/hover-menu/has-block.js

@@ -0,0 +1,5 @@
+export const hasBlock = (type, editor) => {
+  const { value } = editor
+
+  return value.blocks.some((node) => node.type === type)
+}

src/lib/rich-text/extensions/hover-menu/has-mark.js

@@ -0,0 +1,5 @@
+export const hasMark = (type, editor) => {
+  const { value } = editor
+
+  return value.activeMarks.some((mark) => mark.type === type)
+}