From 08db431c0c4626a0d10f4e1c7bca29fa075eedc6 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 28 Sep 2021 13:52:28 -0400 Subject: [PATCH] feat: updates slate, finishes rte upload --- package.json | 8 +- .../forms/field-types/RichText/RichText.tsx | 51 ++++++++----- .../RichText/elements/isActive.tsx | 4 +- .../RichText/elements/link/utilities.tsx | 6 +- .../elements/relationship/Button/index.tsx | 2 +- .../field-types/RichText/elements/toggle.tsx | 4 +- .../RichText/elements/upload/Button/index.tsx | 7 +- .../elements/upload/Element/index.scss | 2 + .../elements/upload/Element/index.tsx | 4 +- src/collections/operations/create.ts | 2 - yarn.lock | 74 ++++++++----------- 11 files changed, 80 insertions(+), 84 deletions(-) diff --git a/package.json b/package.json index 50440da0bb5..c754fb278a1 100644 --- 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 index 842b7a0f508..6efce62e08d 100644 --- 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) => { const { @@ -258,19 +269,21 @@ const RichText: React.FC = (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) => { 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 index 11f2baff53d..d6df9893a13 100644 --- 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 index 1a4f1da6f6c..fa2d9e16909 100644 --- 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 index c5f532a1fb7..71cf0826626 100644 --- 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 index baae4bf864e..e4ece8c910b 100644 --- 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 index 88055ec279c..6742e8dc27f 100644 --- 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 index 5fcc63764a0..aa157ff4b99 100644 --- 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 index 60ec0b80b76..0ff937f76d7 100644 --- 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 index a0971b63491..9138fbce2fa 100644 --- a/src/collections/operations/create.ts +++ b/src/collections/operations/create.ts @@ -139,8 +139,6 @@ async function create(this: Payload, incomingArgs: Arguments): Promise }; } - console.log(data); - // ///////////////////////////////////// // beforeValidate - Fields // ///////////////////////////////////// diff --git a/yarn.lock b/yarn.lock index a13d120816f..b7d0a9d3f6c 100644 --- 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== import-cwd@3.0.0: 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= +tiny-invariant@1.0.6: + 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"