feat: migrate rich text editor to CKEditor

Author: timwessman

.env.local.example

@@ -29,3 +29,8 @@ REACT_APP_RASTER_MAP_TILES=https://helsinki-maptiles.dev.hel.ninja/styles/hel-os
 REACT_APP_HIGH_CONTRAST_RASTER_MAP_TILES=https://helsinki-maptiles.dev.hel.ninja/styles/turku-osm-high-contrast-pattern-{language}/{z}/{x}/{y}@2x.png
 ENABLE_E2E_COVERAGE=false
 GENERATE_SOURCEMAPS=false
+# CKEditor 5 rich text editor. 'GPL' uses the free open-source build (shows a
+# small "Powered by CKEditor" badge); set a commercial license key to remove it.
+REACT_APP_CKEDITOR_LICENSE_KEY=GPL
+# Backend endpoint for editor image uploads (relative to the API base).
+REACT_APP_IMAGE_UPLOAD_ENDPOINT=/v1/image

assets/sass/kerrokantasi/_hearing-form.scss

@@ -179,9 +179,37 @@ div:has(> .hearing-form-child-modal) {
   }
 
   .rich-text-editor {
-    .DraftEditor-editorContainer {
-      border: 2px solid $black;
-      min-height: 90px;
+    margin-bottom: var(--spacing-s);
+
+    .rich-text-editor-extra-controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2-xs);
+      margin: var(--spacing-2-xs) 0;
+    }
+
+    .rich-text-editor-extra-button {
+      background: $gray-lighter;
+      border: 1px solid $black;
+      padding: 4px 10px;
+      cursor: pointer;
+      font-size: 0.875rem;
+    }
+
+    .ck-editor__editable {
+      min-height: 200px;
+    }
+
+    // Mirror the published-page styling for these block classes inside the editor.
+    .ck-content {
+      .lead {
+        font-weight: bold;
+      }
+
+      .image-caption {
+        font-size: 0.875rem;
+        font-style: italic;
+      }
     }
   }
 

package.json

@@ -42,11 +42,7 @@
   },
   "dependencies": {
     "@city-of-helsinki/react-helsinki-notification-manager": "^0.1.0",
-    "@draft-js-plugins/drag-n-drop": "^4.2.0",
-    "@draft-js-plugins/editor": "^4.1.0",
-    "@draft-js-plugins/focus": "^4.1.1",
-    "@draft-js-plugins/image": "^4.1.1",
-    "@draft-js-plugins/resizeable": "^5.0.4",
+    "@ckeditor/ckeditor5-react": "^11.2.0",
     "@eslint/js": "^9.25.1",
     "@formatjs/intl-relativetimeformat": "^11.2.14",
     "@sentry/react": "^9.22.0",
@@ -56,12 +52,10 @@
     "alertifyjs": "^1.13.1",
     "bootstrap-sass": "3.4.3",
     "browser-image-compression": "^2.0.2",
+    "ckeditor5": "^48.2.0",
     "classnames": "^2.3.1",
     "dompurify": "^3.4.0",
     "dotenv": "^16.4.5",
-    "draft-convert": "^2.1.10",
-    "draft-js": "^0.11.7",
-    "draft-js-export-html": "^1.4.1",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.2",
     "eslint-config-vitest-globals": "^2.0.2",