New Editor Interface

next.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -10,6 +12,15 @@ const nextConfig = {
       },
     ],
   },
+  transpilePackages: ['slate-transcript-editor'],
+  webpack: (config) => {
+    // Resolve React dependencies for local development of slate-transcript-editor
+    // This configuration is only necessary when working with a local version of the library
+    // It prevents "Invalid hook call" errors by ensuring consistent React versions
+    config.resolve.alias['react'] = path.resolve('./node_modules/react');
+    config.resolve.alias['react-dom'] = path.resolve('./node_modules/react-dom');
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -31,13 +31,14 @@
     "match-sorter": "^6.3.1",
     "next": "^13.4.13",
     "next-auth": "^4.22.5",
+    "next-transpile-modules": "^10.0.1",
     "react": "^18.2.0",
     "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
-    "react-markdown-editor-lite": "^1.3.4",
     "react-youtube": "^10.1.0",
     "sanitize-html": "^2.11.0",
+    "slate-transcript-editor": "https://github.com/kouloumos/slate-transcript-editor.git#v0.1.6",
     "slugify": "^1.6.6",
     "use-debounce": "^10.0.0"
   },