Update Slate for Content Editor (#1371)

jesstelford · web-flow · commit ac7934fee085 · 2019-07-08T18:40:35.000+10:00
diff --git a/.changeset/five-shoes-develop/changes.json b/.changeset/five-shoes-develop/changes.json
@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/field-content", "type": "patch" }], "dependents": [] }
diff --git a/.changeset/five-shoes-develop/changes.md b/.changeset/five-shoes-develop/changes.md
@@ -0,0 +1 @@
+Ensure all plugins for default Blocks are added to Slate correctly
diff --git a/.changeset/green-worms-dress/changes.json b/.changeset/green-worms-dress/changes.json
@@ -0,0 +1,15 @@
+{
+  "releases": [{ "name": "@keystone-alpha/field-content", "type": "major" }],
+  "dependents": [
+    {
+      "name": "@keystone-alpha/fields",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/field-content"]
+    },
+    {
+      "name": "@keystone-alpha/cypress-project-basic",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields", "@keystone-alpha/field-content"]
+    }
+  ]
+}
diff --git a/.changeset/green-worms-dress/changes.md b/.changeset/green-worms-dress/changes.md
@@ -0,0 +1 @@
+Update Slate 0.44.12 -> 0.47.4 & slate-rect 0.21.18 -> 0.22.4
diff --git a/.changeset/smooth-papayas-wonder/changes.json b/.changeset/smooth-papayas-wonder/changes.json
@@ -0,0 +1 @@
+{ "releases": [{ "name": "@arch-ui/tooltip", "type": "patch" }], "dependents": [] }
diff --git a/.changeset/smooth-papayas-wonder/changes.md b/.changeset/smooth-papayas-wonder/changes.md
@@ -0,0 +1 @@
+Turn off warnings about 'preventOverflow' modifier is required by 'hide' modifier in order to work, be sure to include it before 'hide'!
diff --git a/.changeset/tender-dryers-hunt/changes.json b/.changeset/tender-dryers-hunt/changes.json
@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/fields", "type": "patch" }], "dependents": [] }
diff --git a/.changeset/tender-dryers-hunt/changes.md b/.changeset/tender-dryers-hunt/changes.md
@@ -0,0 +1 @@
+CloudinaryImage, Unsplash, and OEmbed blocks will correctly re-connect to existing block data if present rather than disconnecting and reconnecting on every save of the Content editor.
diff --git a/package.json b/package.json
@@ -248,10 +248,9 @@
     "rxjs": "^6.4.0",
     "sarcastic": "^1.5.0",
     "serialize-error": "^3.0.0",
-    "slate": "^0.44.12",
+    "slate": "^0.47.4",
     "slate-drop-or-paste-images": "^0.9.1",
-    "slate-html-serializer": "^0.7.36",
-    "slate-react": "^0.21.18",
+    "slate-react": "^0.22.4",
     "source-map-support": "^0.5.12",
     "spawndamnit": "^2.0.0",
     "split": "^1.0.1",
diff --git a/packages/arch/packages/tooltip/src/index.js b/packages/arch/packages/tooltip/src/index.js
@@ -40,7 +40,7 @@ let TooltipPositioner = (props: PositionerProps) => {
     <Popper
       referenceElement={props.targetNode}
       placement={props.placement}
-      modifiers={{ preventOverflow: { enabled: false } }}
+      modifiers={{ hide: { enabled: false }, preventOverflow: { enabled: false } }}
     >
       {({ ref, style }) => (
         <div ref={ref} css={{ zIndex: 2000 }} style={{ ...props.style, ...style }}>
diff --git a/packages/field-content/package.json b/packages/field-content/package.json
@@ -32,10 +32,9 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-popper": "^1.3.3",
-    "slate": "^0.44.12",
+    "slate": "^0.47.4",
     "slate-drop-or-paste-images": "^0.9.1",
-    "slate-html-serializer": "^0.7.36",
-    "slate-react": "^0.21.18"
+    "slate-react": "^0.22.4"
   },
   "peerDependencies": {},
   "field-types": {
diff --git a/packages/field-content/serialiser.test.js b/packages/field-content/serialiser.test.js
@@ -14,11 +14,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
           nodes: [
             {
               object: 'text',
-              leaves: [
-                {
-                  text: '',
-                },
-              ],
+              text: '',
             },
           ],
         },
@@ -30,7 +26,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
         document: {
           object: 'document',
           data: {},
-          nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
+          nodes: [{ object: 'text', text: '' }],
         },
       });
     });
@@ -45,11 +41,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
               nodes: [
                 {
                   object: 'text',
-                  leaves: [
-                    {
-                      text: '',
-                    },
-                  ],
+                  text: '',
                 },
               ],
             },
@@ -68,7 +60,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
               object: 'block',
               type: 'paragraph',
               data: {},
-              nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
+              nodes: [{ object: 'text', text: '' }],
             },
           ],
         },
@@ -116,11 +108,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
               nodes: [
                 {
                   object: 'text',
-                  leaves: [
-                    {
-                      text: '',
-                    },
-                  ],
+                  text: '',
                 },
               ],
             },
@@ -146,7 +134,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
               object: 'block',
               type: 'paragraph',
               data: {},
-              nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
+              nodes: [{ object: 'text', text: '' }],
             },
           ],
         },
@@ -163,11 +151,7 @@ describe('Deserializing JSON -> a Slate.js Value', () => {
               nodes: [
                 {
                   object: 'text',
-                  leaves: [
-                    {
-                      text: '',
-                    },
-                  ],
+                  text: '',
                 },
               ],
             },
diff --git a/packages/field-content/src/views/editor/constants.js b/packages/field-content/src/views/editor/constants.js
@@ -7,11 +7,7 @@ export const initialValue = {
         nodes: [
           {
             object: 'text',
-            leaves: [
-              {
-                text: '',
-              },
-            ],
+            text: '',
           },
         ],
       },
diff --git a/packages/field-content/src/views/editor/index.js b/packages/field-content/src/views/editor/index.js
@@ -37,30 +37,30 @@ function Stories({ value: editorState, onChange, blocks, className }) {
     return getSchema(blocks);
   }, [blocks]);
 
-  let plugins = useMemo(
-    () =>
-      Object.values(blocks).reduce(
-        (combinedPlugins, block) => {
-          if (typeof block.getPlugins !== 'function') {
-            return combinedPlugins;
-          }
-          return [...combinedPlugins, block.getPlugins({ blocks })];
+  let plugins = useMemo(() => {
+    const renderNode = props => {
+      let block = blocks[props.node.type];
+      if (block) {
+        return <block.Node {...props} blocks={blocks} />;
+      }
+      return null;
+    };
+    return Object.values(blocks).reduce(
+      (combinedPlugins, block) => {
+        if (typeof block.getPlugins !== 'function') {
+          return combinedPlugins;
+        }
+        return [...combinedPlugins, ...block.getPlugins({ blocks })];
+      },
+      [
+        ...markPlugins,
+        {
+          renderBlock: renderNode,
+          renderInline: renderNode,
         },
-        [
-          ...markPlugins,
-          {
-            renderNode(props) {
-              let block = blocks[props.node.type];
-              if (block) {
-                return <block.Node {...props} blocks={blocks} />;
-              }
-              return null;
-            },
-          },
-        ]
-      ),
-    [blocks]
-  );
+      ]
+    );
+  }, [blocks]);
 
   let [editor, setEditor] = useStateWithEqualityCheck(null);
   return (
diff --git a/packages/field-content/src/views/editor/renderer.js b/packages/field-content/src/views/editor/renderer.js
diff --git a/packages/fields/package.json b/packages/fields/package.json
@@ -61,9 +61,9 @@
     "react-color": "^2.17.0",
     "react-dom": "^16.8.6",
     "react-select": "2.3.0",
-    "slate": "^0.44.12",
+    "slate": "^0.47.4",
     "slate-drop-or-paste-images": "^0.9.1",
-    "slate-react": "^0.21.18",
+    "slate-react": "^0.22.4",
     "unsplash-js": "^5.0.0"
   },
   "devDependencies": {
diff --git a/packages/fields/src/types/CloudinaryImage/views/blocks/single-image.js b/packages/fields/src/types/CloudinaryImage/views/blocks/single-image.js
@@ -188,19 +188,27 @@ export function serialize({ node, blocks }) {
     return;
   }
 
+  const joinIds = node.data.get('_joinIds');
   const alignment = node.data.get('alignment');
   const file = imageNode.data.get('file');
 
   // zero out the data field to ensure we don't accidentally store the `file` as
   // a JSON blob
   const newNode = node.setNode(node.getPath(imageNode.key), { data: {} });
 
+  const mutations =
+    joinIds && joinIds.length
+      ? {
+          connect: { id: joinIds[0] },
+        }
+      : {
+          create: {
+            image: file,
+          },
+        };
+
   return {
-    mutations: {
-      create: {
-        image: file,
-      },
-    },
+    mutations,
     node: {
       ...newNode.toJSON(),
       data: {
diff --git a/packages/fields/src/types/OEmbed/views/blocks/o-embed.js b/packages/fields/src/types/OEmbed/views/blocks/o-embed.js
@@ -124,13 +124,21 @@ export let getSchema = () => ({
 
 export function serialize({ node }) {
   const url = node.data.get('url');
+  const joinIds = node.data.get('_joinIds');
+
+  const mutations =
+    joinIds && joinIds.length
+      ? {
+          connect: { id: joinIds[0] },
+        }
+      : {
+          create: {
+            embed: url,
+          },
+        };
 
   return {
-    mutations: {
-      create: {
-        embed: url,
-      },
-    },
+    mutations,
     node: {
       ...node.toJSON(),
       // Zero out the data so we don't unnecesarily duplicate the url
diff --git a/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js b/packages/fields/src/types/Unsplash/views/blocks/unsplash-image.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{ "releases": [{ "name": "@keystone-alpha/field-content", "type": "patch" }], "dependents": [] }`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Ensure all plugins for default Blocks are added to Slate correctly`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Update Slate 0.44.12 -> 0.47.4 & slate-rect 0.21.18 -> 0.22.4`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{ "releases": [{ "name": "@arch-ui/tooltip", "type": "patch" }], "dependents": [] }`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Turn off warnings about 'preventOverflow' modifier is required by 'hide' modifier in order to work, be sure to include it before 'hide'!`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+CloudinaryImage, Unsplash, and OEmbed blocks will correctly re-connect to existing block data if present rather than disconnecting and reconnecting on every save of the Content editor.`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ let TooltipPositioner = (props: PositionerProps) => {`
`40`	`40`	`<Popper`
`41`	`41`	`referenceElement={props.targetNode}`
`42`	`42`	`placement={props.placement}`
`43`		`- modifiers={{ preventOverflow: { enabled: false } }}`
	`43`	`+ modifiers={{ hide: { enabled: false }, preventOverflow: { enabled: false } }}`
`44`	`44`	`>`
`45`	`45`	`{({ ref, style }) => (`
`46`	`46`	`<div ref={ref} css={{ zIndex: 2000 }} style={{ ...props.style, ...style }}>`