merges rte-crashing

package.json

@@ -30,7 +30,7 @@
     "@faceless-ui/modal": "^1.0.4",
     "@faceless-ui/scroll-info": "^1.1.1",
     "@faceless-ui/window-info": "^1.2.2",
-    "@udecode/slate-plugins": "^0.60.0",
+    "@udecode/slate-plugins": "^0.64.3",
     "async-some": "^1.0.2",
     "autoprefixer": "^9.7.4",
     "babel-core": "^7.0.0-bridge.0",

src/client/components/forms/field-types/RichText/CommandToolbar/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useSlate, useFocused } from 'slate-react';
 import { ToolbarElement, ToolbarMark, ToolbarList } from '@udecode/slate-plugins';
 

src/client/components/forms/field-types/RichText/icons/Headings/H3/index.js

@@ -12,12 +12,12 @@ const H3Icon = () => {
     >
       <path
         fill="none"
-        d="M0 0h24v24H0z"
+        d="M.01 0h24v24h-24z"
-      />
+      ></path>
       <path
         className="fill"
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 01-2 2h-2v2h4v2H9v-4a2 2 0 012-2h2V9H9V7h4a2 2 0 012 2v2z"
+        d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15a2 2 0 01-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4a2 2 0 012 2v1.5z"
-      />
+      ></path>
     </svg>
   );
 };

src/client/components/forms/field-types/RichText/index.js

@@ -15,10 +15,10 @@ import {
   ListPlugin,
   ParagraphPlugin,
   pipe,
+  ExitBreakPlugin,
   SoftBreakPlugin,
   StrikethroughPlugin,
   UnderlinePlugin,
-  withList,
   withToggleType,
 } from '@udecode/slate-plugins';
 
@@ -63,7 +63,6 @@ const plugins = [
 const withPlugins = [
   withReact,
   withHistory,
-  withList(nodeTypes),
   withToggleType({ defaultType: nodeTypes.typeP }),
 ];
 
@@ -101,19 +100,6 @@ const RichText = (props) => {
     errorMessage,
   } = fieldType;
 
-  const [internalState, setInternalState] = useState(value);
-  const [valueHasLoaded, setValueHasLoaded] = useState(false);
-
-  useEffect(() => { setValue(internalState); }, [setValue, internalState]);
-
-  useEffect(() => {
-    // ! could use review
-    if (value !== undefined && !valueHasLoaded) {
-      setInternalState(value);
-      setValueHasLoaded(true);
-    }
-  }, [value, valueHasLoaded]);
-
   const classes = [
     baseClass,
     'field-type',
@@ -141,8 +127,8 @@ const RichText = (props) => {
       <div className={`${baseClass}__wrapper`}>
         <Slate
           editor={editor}
-          value={internalState ?? emptyRichTextNode}
+          value={value ?? emptyRichTextNode}
-          onChange={(val) => setInternalState(val)}
+          onChange={val => setValue(val)}
         >
           <CommandToolbar enabledPluginList={plugins} />
 

src/client/components/forms/field-types/RichText/types/index.js

@@ -1,11 +1,29 @@
 import {
-  ACTION_ITEM,
+  ELEMENT_PARAGRAPH,
-  BLOCKQUOTE,
+  ELEMENT_MENTION,
-  CODE_BLOCK,
+  ELEMENT_BLOCKQUOTE,
-  HeadingType,
+  ELEMENT_CODE_BLOCK,
-  IMAGE,
+  ELEMENT_LINK,
-  LINK,
+  ELEMENT_IMAGE,
-  ListType,
+  ELEMENT_MEDIA_EMBED,
+  ELEMENT_TODO_LI,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_ALIGN_LEFT,
+  ELEMENT_ALIGN_CENTER,
+  ELEMENT_ALIGN_RIGHT,
+  ELEMENT_UL,
+  ELEMENT_OL,
+  ELEMENT_LI,
+  ELEMENT_TABLE,
+  ELEMENT_TH,
+  ELEMENT_TR,
+  ELEMENT_TD,
+
   MARK_BOLD,
   MARK_CODE,
   MARK_HIGHLIGHT,
@@ -15,43 +33,31 @@ import {
   MARK_SUBSCRIPT,
   MARK_SUPERSCRIPT,
   MARK_UNDERLINE,
-  MEDIA_EMBED,
-  MENTION,
-  PARAGRAPH,
-  TableType,
 } from '@udecode/slate-plugins';
 
-export const headingTypes = [
-  HeadingType.H1,
-  HeadingType.H2,
-  HeadingType.H3,
-  HeadingType.H4,
-  HeadingType.H5,
-  HeadingType.H6,
-];
-
 export const nodeTypes = {
   // elements
-  typeP: PARAGRAPH,
+  typeP: ELEMENT_PARAGRAPH,
-  typeMention: MENTION,
+  typeMention: ELEMENT_MENTION,
-  typeBlockquote: BLOCKQUOTE,
+  typeBlockquote: ELEMENT_BLOCKQUOTE,
-  typeCodeBlock: CODE_BLOCK,
+  typeCodeBlock: ELEMENT_CODE_BLOCK,
-  typeLink: LINK,
+  typeLink: ELEMENT_LINK,
-  typeImg: IMAGE,
+  typeImg: ELEMENT_IMAGE,
-  typeMediaEmbed: MEDIA_EMBED,
+  typeMediaEmbed: ELEMENT_MEDIA_EMBED,
-  typeActionItem: ACTION_ITEM,
+  typeTodoLi: ELEMENT_TODO_LI,
-  typeTable: TableType.TABLE,
+  typeTable: ELEMENT_TABLE,
-  typeTr: TableType.ROW,
+  typeTh: ELEMENT_TH,
-  typeTd: TableType.CELL,
+  typeTr: ELEMENT_TR,
-  typeUl: ListType.UL,
+  typeTd: ELEMENT_TD,
-  typeOl: ListType.OL,
+  typeUl: ELEMENT_UL,
-  typeLi: ListType.LI,
+  typeOl: ELEMENT_OL,
-  typeH1: HeadingType.H1,
+  typeLi: ELEMENT_LI,
-  typeH2: HeadingType.H2,
+  typeH1: ELEMENT_H1,
-  typeH3: HeadingType.H3,
+  typeH2: ELEMENT_H2,
-  typeH4: HeadingType.H4,
+  typeH3: ELEMENT_H3,
-  typeH5: HeadingType.H5,
+  typeH4: ELEMENT_H4,
-  typeH6: HeadingType.H6,
+  typeH5: ELEMENT_H5,
+  typeH6: ELEMENT_H6,
   // marks
   typeBold: MARK_BOLD,
   typeItalic: MARK_ITALIC,