Merge pull request #9143 from hicommonwealth/burton/mdxeditor-integra…

…tion-v1 v1 of the editor
hicommonwealth · Sep 9, 2024 · 897e5bd · 897e5bd
2 parents 1a805d2 + c620931
commit 897e5bd
Show file tree

Hide file tree

Showing 39 changed files with 656 additions and 321 deletions.
diff --git a/packages/commonwealth/client/scripts/helpers/feature-flags.ts b/packages/commonwealth/client/scripts/helpers/feature-flags.ts
@@ -27,6 +27,7 @@ const featureFlags = {
     process.env.FLAG_KNOCK_PUSH_NOTIFICATIONS_ENABLED,
   ),
   farcasterContest: buildFlag(process.env.FLAG_FARCASTER_CONTEST),
+  newEditor: buildFlag(process.env.FLAG_NEW_EDITOR),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

diff --git a/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx b/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx
@@ -4,7 +4,7 @@ import { Route } from 'react-router-dom';
 import { withLayout } from 'views/Layout';
 import { RouteFeatureFlags } from './Router';
 
-const EditorPage = lazy(() => import('views/pages/Editor'));
+const EditorPage = lazy(() => import('views/pages/EditorPage'));
 
 const DashboardPage = lazy(() => import('views/pages/user_dashboard'));
 const CommunitiesPage = lazy(() => import('views/pages/Communities'));
@@ -113,11 +113,7 @@ const CommonDomainRoutes = ({
   contestEnabled,
   farcasterContestEnabled,
 }: RouteFeatureFlags) => [
-  <Route
-    key="/editor"
-    path="/editor"
-    element={<EditorPage imageHandler="local" />}
-  />,
+  <Route key="/editor" path="/editor" element={<EditorPage />} />,
 
   <Route
     key="/"

diff --git a/...ews/pages/Editor/DesktopEditorFooter.scss → ...omponents/Editor/DesktopEditorFooter.scss b/...ews/pages/Editor/DesktopEditorFooter.scss → ...omponents/Editor/DesktopEditorFooter.scss
@@ -6,6 +6,8 @@
   display: flex;
   padding: 8px;
 
+  user-select: none;
+
   .Item {
     display: flex;
     margin-top: auto;

diff --git a/...iews/pages/Editor/DesktopEditorFooter.tsx → ...components/Editor/DesktopEditorFooter.tsx b/...iews/pages/Editor/DesktopEditorFooter.tsx → ...components/Editor/DesktopEditorFooter.tsx
diff --git a/...nt/scripts/views/pages/Editor/Editor.scss → ...ripts/views/components/Editor/Editor.scss b/...nt/scripts/views/pages/Editor/Editor.scss → ...ripts/views/components/Editor/Editor.scss
@@ -4,7 +4,6 @@ html,
 body,
 #root {
   max-height: 100vh;
-  overflow: auto;
 }
 
 #root {
@@ -18,14 +17,45 @@ body,
   display: none;
 }
 
-.mdxeditor {
+.mdxeditor-container-mode-mobile {
+  .mdxeditor {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  .mdxeditor-toolbar {
+    min-height: 45px !important;
+  }
+}
+
+.mdxeditor-container-mode-desktop {
+  .mdxeditor-root-contenteditable {
+    min-height: 150px;
+    max-height: 450px;
+  }
+
+  .mdxeditor-toolbar {
+    height: 45px !important;
+  }
+}
+
+.mdxeditor-parent {
   flex-grow: 1;
+}
+
+.mdxeditor-parent-mode-mobile {
   display: flex;
-  flex-direction: column;
+}
 
+.mdxeditor-container {
   // this is needed so that we can have a progress indicator on top of the main
   // content.
   position: relative;
+}
+
+.mdxeditor {
+  display: flex;
+  flex-direction: column;
 
   .mdxeditor-toolbar {
     // TODO this only shows up properly for the *mobile* editor not the desktop
@@ -37,7 +67,11 @@ body,
 
     position: initial;
     top: initial;
-    height: 65px;
+  }
+
+  .cm-gutters {
+    // necessary because otherwise code mirror line numbers are too small.
+    font-size: inherit !important;
   }
 }