Remove draftJS (and related legacy blocks text, table and hero)…

… from core and cleanup dependencies (#5846)

Co-authored-by: Steve Piercy <[email protected]>

.github/workflows/unit.yml

@@ -43,8 +43,8 @@ jobs:
 
       - run: pnpm i
 
-      # node test
-      - run: pnpm --filter @plone/volto i18n:ci
+      # Locales in place are needed for the tests to pass
+      - run: pnpm --filter @plone/volto i18n
 
       - name: Run unit tests Volto
         run: pnpm --filter @plone/volto test

apps/plone/package.json

@@ -148,14 +148,6 @@
     "debug": "4.3.2",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
-    "draft-js": "0.10.5",
-    "draft-js-block-breakout-plugin": "2.0.1",
-    "draft-js-buttons": "2.0.2",
-    "draft-js-import-html": "1.4.1",
-    "draft-js-inline-toolbar-plugin": "2.0.3",
-    "draft-js-plugins-editor": "2.1.1",
-    "draft-js-plugins-utils": "2.0.3",
-    "draftjs-filters": "2.3.0",
     "express": "4.17.3",
     "filesize": "6",
     "github-slugger": "1.4.0",
@@ -208,7 +200,6 @@
     "react-toastify": "5.4.1",
     "react-transition-group": "4.4.5",
     "react-virtualized": "9.22.3",
-    "redraft": "0.10.2",
     "redux": "4.1.0",
     "redux-actions": "2.6.5",
     "redux-connect": "10.0.0",

apps/vite-ssr/package.json

@@ -16,7 +16,7 @@
     "@plone/components": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/blocks": "workspace:*",
-    "@tanstack/react-query": "5.0.5",
+    "@tanstack/react-query": "5.24.1",
     "@tanstack/react-router": "^1.16.0",
     "@tanstack/react-router-server": "^1.16.0",
     "@tanstack/router-devtools": "^1.16.0",
@@ -33,7 +33,7 @@
     "@babel/generator": "^7.23.6",
     "@plone/types": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
-    "@tanstack/react-query-devtools": "^5.20.1",
+    "@tanstack/react-query-devtools": "^5.24.1",
     "@types/express": "^4.17.21",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

docs/source/upgrade-guide/index.md

@@ -39,6 +39,16 @@ This aligns Volto with the latests developments in the React ecosystem and opens
 - Transitions
 - New hooks `useId`, `useTransition`, `useDeferredValue`, `useSyncExternalStore`, and other hooks
 
+### `draftJS` dependency and `text`, `table`, and `hero` blocks removed
+
+In Volto 16, the `text` block powered by the `Draft.js` library was deprecated, and it was announced that it would be removed in Volto 18.
+Two other blocks, `table` and `hero`, that depended on `Draft.js` were also removed.
+
+If you still need these blocks in your site, you can copy over the block code and settings into your project.
+You can also migrate these blocks to use either `slate` or `slateTable` blocks.
+The `hero` block can be replaced by the `teaser` block, but a migration is also needed.
+See {ref}`existing-projects-using-core-draftjs-opting-to-migrate-to-slate`.
+
 ### `react-portal` dependency removed
 
 `react-portal` is deprecated and it was removed from Volto.
@@ -432,6 +442,8 @@ For projects already using `volto-slate`, take the following steps in your proje
 + import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 ```
 
+(existing-projects-using-core-draftjs-opting-to-migrate-to-slate)=
+
 #### Existing projects using core `draftJS`, opting to continue using `draftJS`
 
 You will have to configure your project to continue using `draftJS`, for example, in your `config.js` or in your add-on:

packages/components/news/5846.internal

@@ -0,0 +1 @@
+Cleanup deps @sneridagh

packages/components/package.json

@@ -116,7 +116,6 @@
     "storybook": "^7.6.17",
     "stylelint": "16.2.1",
     "stylelint-config-idiomatic-order": "10.0.0",
-    "stylelint-config-prettier": "9.0.5",
     "stylelint-prettier": "5.0.0",
     "typescript": "5.2.2",
     "vite": "^5.1.4",

packages/coresandbox/package.json

@@ -29,8 +29,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intl": "3.8.0",
-    "react-redux": "7.2.4",
-    "semantic-ui-react": "2.0.3"
+    "react-redux": "8.1.2",
+    "semantic-ui-react": "2.1.5"
   },
   "devDependencies": {
     "@plone/types": "workspace:*",

packages/helpers/package.json

@@ -54,15 +54,15 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@parcel/packager-ts": "2.10.2",
-    "@parcel/transformer-typescript-types": "2.10.2",
+    "@parcel/packager-ts": "2.12.0",
+    "@parcel/transformer-typescript-types": "2.12.0",
     "@plone/types": "workspace:*",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "parcel": "2.10.2",
-    "release-it": "17.1.1",
+    "parcel": "2.12.0",
+    "release-it": "^17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
     "vitest": "^1.3.1"
   }
 }

packages/types/news/5846.internal

@@ -0,0 +1 @@
+Cleanup deps @sneridagh

packages/types/package.json

@@ -48,17 +48,14 @@
     }
   },
   "devDependencies": {
-    "@parcel/packager-ts": "2.10.2",
-    "@parcel/transformer-typescript-types": "2.10.2",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "history": "^5.3.0",
-    "parcel": "2.10.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "3.8.0",
-    "release-it": "16.2.1",
+    "release-it": "^17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.2.2"
+    "typescript": "5.3.3"
   }
 }

packages/volto-slate/news/5846.breaking

@@ -0,0 +1 @@
+Remove legacy `text`, `table` and `hero` blocks based in `draftJS` @sneridagh

packages/volto-slate/src/blocks/Table/index.js

@@ -50,7 +50,6 @@ export default function install(config) {
     // },
   };
 
-  config.blocks.blocksConfig.table.restricted = true;
   config.blocks.blocksConfig.slateTable = {
     ...tableBlockConfig,
     id: 'slateTable',

packages/volto-slate/src/blocks/Text/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import redraft from 'redraft';
 import TextBlockView from './TextBlockView';
 import TextBlockEdit from './TextBlockEdit';
 import TextBlockSchema from './TextBlockSchema';
@@ -133,24 +132,6 @@ export default function applyConfig(config) {
     },
   };
 
-  // Make draft js compatible with ToC
-  config.blocks.blocksConfig.text = {
-    ...config.blocks.blocksConfig.text,
-    restricted: true,
-    tocEntry: (block = {}) => {
-      const draft = redraft(
-        block.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      );
-      const type = draft?.[0]?.[0]?.type;
-
-      return config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), block.text.blocks[0].text]
-        : null;
-    },
-  };
-
   config.blocks.blocksConfig.slate = slateBlockConfig;
   config.blocks.blocksConfig.detachedSlate = {
     ...config.blocks.blocksConfig.slate,