Plate september update (#7393)

Author: sneridagh

apps/seven/news/7393.internal

@@ -0,0 +1 @@
+Make plate configure itself before blocks at the top. @sneridagh

apps/seven/registry.config.ts

@@ -1,11 +1,11 @@
 const addons = [
   '@plone/theming',
+  '@plone/plate',
   '@plone/blocks',
   '@plone/layout',
   '@plone/cmsui',
   '@plone/publicui',
   '@plone/agave',
-  '@plone/plate',
 ];
 const theme = '';
 

package.json

@@ -54,6 +54,7 @@
       "cypress",
       "esbuild",
       "lightningcss-cli",
+      "msgpackr-extract",
       "unrs-resolver"
     ]
   }

packages/blocks/Text/TextBlockEdit.tsx

@@ -1,19 +1,18 @@
 import type { BlockEditProps } from '@plone/types';
-import { PlateEditor } from '@plone/plate/components/editor/plate-editor';
-import { SettingsProvider } from '@plone/plate/components/editor/settings';
+import { PlateEditor, type Value } from '@plone/plate/components/editor';
+import plateBlockConfig from '@plone/plate/config/presets/block';
 
 const TextBlockEdit = (props: BlockEditProps) => {
   const { data, setBlock } = props;
 
   return (
-    <SettingsProvider>
-      <PlateEditor
-        value={data.value}
-        onChange={(options) => {
-          setBlock({ ...data, value: options.value });
-        }}
-      />
-    </SettingsProvider>
+    <PlateEditor
+      editorConfig={plateBlockConfig.editorConfig}
+      value={data.value as Value}
+      onChange={(options) => {
+        setBlock({ ...data, value: options.value });
+      }}
+    />
   );
 };
 

packages/blocks/Text/TextBlockView.tsx

@@ -1,22 +1,15 @@
 import type { BlockViewProps } from '@plone/types';
-import { renderSlate } from './slate';
-import config from '@plone/registry';
+import { PlateRenderer, type Value } from '@plone/plate/components/editor';
+import plateBlockConfig from '@plone/plate/config/presets/block';
 
 const TextBlockView = (props: BlockViewProps) => {
-  const { id, data } = props;
-  const metadata = props.metadata || props.properties;
+  const { data } = props;
 
   return data?.value ? (
-    <>
-      {renderSlate(
-        id,
-        config.settings.slate.elements,
-        config.settings.slate.topLevelTargetElements,
-        data.value,
-        data?.override_toc,
-        metadata,
-      )}
-    </>
+    <PlateRenderer
+      editorConfig={plateBlockConfig.rendererConfig}
+      value={data.value as Value}
+    />
   ) : null;
 };
 

packages/blocks/Text/slate.tsx

@@ -1,12 +1,11 @@
 import type { ConfigType } from '@plone/registry';
-import { slate } from './config/slate';
+
 import TitleBlockInfo from './Title';
 import TextBlockInfo from './Text';
 import ImageBlockInfo from './Image';
 import TeaserBlockInfo from './Teaser';
 
 export default function install(config: ConfigType) {
-  config.settings.slate = slate;
   // @ts-expect-error this is a quick hack for now
   // Initializing blocksConfig to empty.
   // We of course are assuming that this package will be installed before any

packages/blocks/config/slate.tsx

@@ -0,0 +1 @@
+Remove all slate related components. Use the new plate unified configuration in `@plone/plate`. @sneridagh

packages/blocks/index.ts

@@ -51,7 +51,8 @@
     "@plone/components": "workspace:*",
     "@plone/plate": "workspace:*",
     "@plone/registry": "workspace:*",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@plone/helpers": "workspace:*",
@@ -61,6 +62,7 @@
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "catalog:",
     "@types/jest-axe": "^3.5.7",
+    "@types/lodash.clonedeep": "4.5.6",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",