feat: updates slate, finishes rte upload

payloadcms · Sep 28, 2021 · 08db431 · 08db431
1 parent 6f3edf9
commit 08db431
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -164,10 +164,10 @@
     "sass": "^1.42.0",
     "sass-loader": "^10.1.0",
     "sharp": "^0.28.1",
-    "slate": "^0.59.0",
-    "slate-history": "^0.59.0",
-    "slate-hyperscript": "^0.59.0",
-    "slate-react": "^0.59.0",
+    "slate": "^0.66.2",
+    "slate-history": "^0.66.0",
+    "slate-hyperscript": "^0.66.0",
+    "slate-react": "^0.66.4",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.3",
     "ts-essentials": "^7.0.1",

diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import isHotkey from 'is-hotkey';
-import { Editable, withReact, Slate } from 'slate-react';
-import { createEditor, Transforms, Node } from 'slate';
-import { withHistory } from 'slate-history';
+import { createEditor, Transforms, Node, Element as SlateElement, Text, BaseEditor } from 'slate';
+import { ReactEditor, Editable, withReact, Slate } from 'slate-react';
+import { HistoryEditor, withHistory } from 'slate-history';
 import { richText } from '../../../../../fields/validations';
 import useFieldType from '../../useFieldType';
 import withCondition from '../../withCondition';
@@ -30,6 +30,17 @@ const defaultLeaves: RichTextLeaf[] = ['bold', 'italic', 'underline', 'strikethr
 const enterBreakOutTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 const baseClass = 'rich-text';
+type CustomText = { text: string; [x: string]: unknown }
+
+type CustomElement = { type: string; children: CustomText[] }
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor & HistoryEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}
 
 const RichText: React.FC<Props> = (props) => {
   const {
@@ -258,19 +269,21 @@ const RichText: React.FC<Props> = (props) => {
                   } else {
                     const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
 
-                    // Allow hard enter to "break out" of certain elements
-                    if (enterBreakOutTypes.includes(String(selectedElement.type))) {
-                      event.preventDefault();
-                      const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-
-                      if (String(selectedLeaf.text).length === editor.selection.anchor.offset) {
-                        Transforms.insertNodes(editor, {
-                          type: 'p',
-                          children: [{ text: '', marks: [] }],
-                        });
-                      } else {
-                        Transforms.splitNodes(editor);
-                        Transforms.setNodes(editor, { type: 'p' });
+                    if (SlateElement.isElement(selectedElement)) {
+                      // Allow hard enter to "break out" of certain elements
+                      if (enterBreakOutTypes.includes(String(selectedElement.type))) {
+                        event.preventDefault();
+                        const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+
+                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
+                          Transforms.insertNodes(editor, {
+                            type: 'p',
+                            children: [{ text: '' }],
+                          });
+                        } else {
+                          Transforms.splitNodes(editor);
+                          Transforms.setNodes(editor, { type: 'p' });
+                        }
                       }
                     }
                   }
@@ -279,11 +292,11 @@ const RichText: React.FC<Props> = (props) => {
                 if (event.key === 'Backspace') {
                   const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
 
-                  if (selectedElement.type === 'li') {
+                  if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
                     const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                    if (String(selectedLeaf.text).length === 1) {
+                    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 1) {
                       Transforms.unwrapNodes(editor, {
-                        match: (n) => listTypes.includes(n.type as string),
+                        match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),
                         split: true,
                       });
 

diff --git a/src/admin/components/forms/field-types/RichText/elements/isActive.tsx b/src/admin/components/forms/field-types/RichText/elements/isActive.tsx
@@ -1,8 +1,8 @@
-import { Editor } from 'slate';
+import { Editor, Element } from 'slate';
 
 const isElementActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
-    match: (n) => n.type === format,
+    match: (n) => Element.isElement(n) && n.type === format,
   });
 
   return !!match;

diff --git a/src/admin/components/forms/field-types/RichText/elements/link/utilities.tsx b/src/admin/components/forms/field-types/RichText/elements/link/utilities.tsx
@@ -1,12 +1,12 @@
-import { Editor, Transforms, Range } from 'slate';
+import { Editor, Transforms, Range, Element } from 'slate';
 
 export const isLinkActive = (editor: Editor): boolean => {
-  const [link] = Editor.nodes(editor, { match: (n) => n.type === 'link' });
+  const [link] = Editor.nodes(editor, { match: (n) => Element.isElement(n) && n.type === 'link' });
   return !!link;
 };
 
 export const unwrapLink = (editor: Editor): void => {
-  Transforms.unwrapNodes(editor, { match: (n) => n.type === 'link' });
+  Transforms.unwrapNodes(editor, { match: (n) => Element.isElement(n) && n.type === 'link' });
 };
 
 export const wrapLink = (editor: Editor, url?: string, newTab?: boolean): void => {

diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx b/src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx
@@ -31,7 +31,7 @@ const insertRelationship = (editor, { value, relationTo }) => {
     ],
   };
 
-  const nodes = [relationship, { children: [{ text: '' }] }];
+  const nodes = [relationship, { type: 'p', children: [{ text: '' }] }];
 
   if (editor.blurSelection) {
     Transforms.select(editor, editor.blurSelection);

diff --git a/src/admin/components/forms/field-types/RichText/elements/toggle.tsx b/src/admin/components/forms/field-types/RichText/elements/toggle.tsx
@@ -1,4 +1,4 @@
-import { Transforms } from 'slate';
+import { Element, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 import isElementActive from './isActive';
 import listTypes from './listTypes';
@@ -20,7 +20,7 @@ const toggleElement = (editor, format) => {
   }
 
   Transforms.unwrapNodes(editor, {
-    match: (n) => listTypes.includes(n.type as string),
+    match: (n) => Element.isElement(n) && listTypes.includes(n.type as string),
     split: true,
   });
 

diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
@@ -34,18 +34,13 @@ const insertUpload = (editor, { value, relationTo }) => {
     ],
   };
 
-  const nodes = [upload, { children: [{ text: '' }] }];
+  const nodes = [upload, { type: 'p', children: [{ text: '' }] }];
 
   if (editor.blurSelection) {
     Transforms.select(editor, editor.blurSelection);
   }
 
   Transforms.insertNodes(editor, nodes);
-
-  const currentPath = editor.selection.anchor.path[0];
-  const newSelection = { anchor: { path: [currentPath + 1, 0], offset: 0 }, focus: { path: [currentPath + 1, 0], offset: 0 } };
-
-  Transforms.select(editor, newSelection);
   ReactEditor.focus(editor);
 };
 

diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
@@ -34,6 +34,8 @@
   &__wrap {
     padding: base(.5) base(.5) base(.5) base(1);
     text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &--selected {

diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Modal, useModal } from '@faceless-ui/modal';
 import { Transforms } from 'slate';
-import { ReactEditor, useEditor, useFocused, useSelected } from 'slate-react';
+import { ReactEditor, useSlateStatic, useFocused, useSelected } from 'slate-react';
 import { useConfig } from '@payloadcms/config-provider';
 import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
 import FileGraphic from '../../../../../../graphics/File';
@@ -39,7 +39,7 @@ const Element = ({ attributes, children, element, path }) => {
   const [page, setPage] = useState(null);
   const [sort, setSort] = useState(null);
   const [fields, setFields] = useState(formatFields(relatedCollection));
-  const editor = useEditor();
+  const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
 

diff --git a/src/collections/operations/create.ts b/src/collections/operations/create.ts
@@ -139,8 +139,6 @@ async function create(this: Payload, incomingArgs: Arguments): Promise<Document>
     };
   }
 
-  console.log(data);
-
   // /////////////////////////////////////
   // beforeValidate - Fields
   // /////////////////////////////////////

diff --git a/yarn.lock b/yarn.lock
@@ -1871,11 +1871,6 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/esrever@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/@types/esrever/-/esrever-0.2.0.tgz#96404a2284b2c7527f08a1e957f8a31705f9880f"
-  integrity sha512-5NI6TeGzVEy/iBcuYtcPzzIC6EqlfQ2+UZ54vT0ulq8bPNGAy8UJD+XcsAyEOcnYFUjOVWuUV+k4/rVkxt9/XQ==
-
 "@types/estree@*", "@types/estree@^0.0.50":
   version "0.0.50"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
@@ -5730,11 +5725,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-esrever@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/esrever/-/esrever-0.2.0.tgz#96e9d28f4f1b1a76784cd5d490eaae010e7407b8"
-  integrity sha1-lunSj08bGnZ4TNXUkOquAQ50B7g=
-
 estraverse@^4.1.1:
   version "4.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
@@ -6962,10 +6952,10 @@ image-extensions@^1.1.0:
   resolved "https://registry.npmjs.org/image-extensions/-/image-extensions-1.1.0.tgz#b8e6bf6039df0056e333502a00b6637a3105d894"
   integrity sha1-uOa/YDnfAFbjM1AqALZjejEF2JQ=
 
-immer@^5.0.0:
-  version "5.3.6"
-  resolved "https://registry.npmjs.org/immer/-/immer-5.3.6.tgz#51eab8cbbeb13075fe2244250f221598818cac04"
-  integrity sha512-pqWQ6ozVfNOUDjrLfm4Pt7q4Q12cGw2HUZgry4Q5+Myxu9nmHRkWBpI0J4+MK0AxbdFtdMTwEGVl7Vd+vEiK+A==
+immer@^9.0.6:
+  version "9.0.6"
+  resolved "https://registry.npmjs.org/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73"
+  integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==
 
 [email protected]:
   version "3.0.0"
@@ -7477,11 +7467,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
-  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
-
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
@@ -12037,43 +12022,41 @@ slash@^3.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slate-history@^0.59.0:
-  version "0.59.0"
-  resolved "https://registry.npmjs.org/slate-history/-/slate-history-0.59.0.tgz#3c5ecbe8893ce2ae9523068ccc17c62d52b24a1a"
-  integrity sha512-LBaVmxA7QKr5faDUt0rjgFH4TwAslyl4rrltpM6PVZYeJ301KkpUTqZf83asDjwgt5pl9nEx4huKL7IlX+rZfA==
+slate-history@^0.66.0:
+  version "0.66.0"
+  resolved "https://registry.npmjs.org/slate-history/-/slate-history-0.66.0.tgz#ac63fddb903098ceb4c944433e3f75fe63acf940"
+  integrity sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==
   dependencies:
-    immer "^5.0.0"
-    is-plain-object "^3.0.0"
+    is-plain-object "^5.0.0"
 
-slate-hyperscript@^0.59.0:
-  version "0.59.0"
-  resolved "https://registry.npmjs.org/slate-hyperscript/-/slate-hyperscript-0.59.0.tgz#3bab0c418854b3e26530064c142b8a64b87dc7a8"
-  integrity sha512-HvZLA5RSAs27ZznD2r5sy2RP114K7+I/jOt3glFtQLFKEptxsIFTgTsEyxMhD6864tOPqs56m6IyA0tX/jhzjA==
+slate-hyperscript@^0.66.0:
+  version "0.66.0"
+  resolved "https://registry.npmjs.org/slate-hyperscript/-/slate-hyperscript-0.66.0.tgz#87f0581de00f71ee61014e2afc825a2c11897e2f"
+  integrity sha512-uMBwuVBKl5jk0V37BMYhJdqO/R8mgoKvYGo1NmJbTxwf2capX4/4RgQtPPH20o09rbx8l9e554hLc8UiRPGg4w==
   dependencies:
-    is-plain-object "^3.0.0"
+    is-plain-object "^5.0.0"
 
-slate-react@^0.59.0:
-  version "0.59.0"
-  resolved "https://registry.npmjs.org/slate-react/-/slate-react-0.59.0.tgz#c8043dce7ea71279f314d9951c32e4f548b1ea0b"
-  integrity sha512-Fx5vfTi0s1fY5PaXzPH8uA9mW8aevVVYrGGvqX/k363tlPDnQSs/QTibIyFl1Y3MPJ+GdocoyOGjAaZMUIXfIg==
+slate-react@^0.66.4:
+  version "0.66.4"
+  resolved "https://registry.npmjs.org/slate-react/-/slate-react-0.66.4.tgz#cc412c7f256bae1f9edff85a7a25aa4f490c8de5"
+  integrity sha512-MXXX5zoZu/Jb049yeYwkTUs6Pd/Fxq7Hu86Jb8BGvHJoBcUhh9dasNutVNu5Znoc2Fh7ajYcyeJOJPFbiKPo6Q==
   dependencies:
     "@types/is-hotkey" "^0.1.1"
     "@types/lodash" "^4.14.149"
     direction "^1.0.3"
     is-hotkey "^0.1.6"
-    is-plain-object "^3.0.0"
+    is-plain-object "^5.0.0"
     lodash "^4.17.4"
     scroll-into-view-if-needed "^2.2.20"
+    tiny-invariant "1.0.6"
 
-slate@^0.59.0:
-  version "0.59.0"
-  resolved "https://registry.npmjs.org/slate/-/slate-0.59.0.tgz#3169daf2f036e84aa149f60e0d12ef2fc4c0839e"
-  integrity sha512-M4UTMkXExxuq8tCD+knn7BtV2pmY8pepay++EF59rmg/v4RB6X1gNzA0xP3aw2rqYl8TmWdOBdy9InFrm3WyXw==
+slate@^0.66.2:
+  version "0.66.2"
+  resolved "https://registry.npmjs.org/slate/-/slate-0.66.2.tgz#e2a66f295db3c5a8daa02685b31e924fe8874b65"
+  integrity sha512-3SFvuF68k8dVZounmKH7dULSlWFc2WsIdvOs4xfTqdPnh6KAcbHHg+XtV6lOEz9YCf/KqDdRrKlSUDCbsZ8nAw==
   dependencies:
-    "@types/esrever" "^0.2.0"
-    esrever "^0.2.0"
-    immer "^5.0.0"
-    is-plain-object "^3.0.0"
+    immer "^9.0.6"
+    is-plain-object "^5.0.0"
     tiny-warning "^1.0.3"
 
 slice-ansi@^2.1.0:
@@ -12778,6 +12761,11 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+[email protected]:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
+  integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
+
 tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   version "1.1.0"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"