v3 of the editor

packages/commonwealth/client/scripts/hooks/useDraft.tsx

@@ -1,10 +1,14 @@
-const KEY_VERSION = 'v2'; // update this for breaking changes
-const PREFIX = `cw-draft-${KEY_VERSION}`;
-
 const MAX_DRAFT_SIZE = 1024 * 1024 * 4;
 
-export function useDraft<T>(key: string) {
-  const fullKey = `${PREFIX}-${key}`;
+type DraftOpts = {
+  keyVersion?: string;
+};
+
+export function useDraft<T>(key: string, opts: DraftOpts = {}) {
+  const keyVersion = opts.keyVersion ?? 'v2';
+  const prefix = `cw-draft-${keyVersion}`;
+
+  const fullKey = `${prefix}-${key}`;
 
   const saveDraft = (data: T) => {
     const draft = JSON.stringify(data);

packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx

@@ -4,8 +4,12 @@ import { Route } from 'react-router-dom';
 import { withLayout } from 'views/Layout';
 import { RouteFeatureFlags } from './Router';
 
+const QuillPage = lazy(() => import('views/pages/QuillPage'));
 const MarkdownEditorPage = lazy(() => import('views/pages/MarkdownEditorPage'));
 const MarkdownViewerPage = lazy(() => import('views/pages/MarkdownViewerPage'));
+const MarkdownHitHighlighterPage = lazy(
+  () => import('views/pages/MarkdownHitHighlighterPage'),
+);
 
 const DashboardPage = lazy(() => import('views/pages/user_dashboard'));
 const CommunitiesPage = lazy(() => import('views/pages/Communities'));
@@ -118,14 +122,26 @@ const CommonDomainRoutes = ({
   tokenizedCommunityEnabled,
 }: RouteFeatureFlags) => [
   <Route
-    key="/markdown-editor"
-    path="/markdown-editor"
+    key="/_internal/quill"
+    path="/_internal/quill"
+    element={<QuillPage />}
+  />,
+
+  <Route
+    key="/_internal/markdown-editor"
+    path="/_internal/markdown-editor"
     element={<MarkdownEditorPage />}
   />,
 
   <Route
-    key="/markdown-viewer"
-    path="/markdown-viewer"
+    key="/_internal/markdown-hit-highlighter"
+    path="/_internal/markdown-hit-highlighter"
+    element={<MarkdownHitHighlighterPage />}
+  />,
+
+  <Route
+    key="/_internal/markdown-viewer"
+    path="/_internal/markdown-viewer"
     element={<MarkdownViewerPage />}
   />,
 

packages/commonwealth/client/scripts/views/components/MarkdownEditor/MarkdownEditor.scss

@@ -18,19 +18,38 @@ body,
   display: none;
 }
 
+.mdxeditor-container {
+  outline: 1px solid $neutral-200;
+  border-radius: 4px;
+}
+
+.mdxeditor-container-active {
+  outline: 1px solid $primary-300;
+}
+
 .mdxeditor-container-mode-mobile {
   .mdxeditor {
     flex-grow: 1;
     overflow: auto;
   }
 
   .mdxeditor-toolbar {
+    border-top: solid $neutral-200 1px;
+
     min-height: 45px !important;
   }
 }
 
+.mdxeditor-container-disabled {
+  .mdxeditor-root-contenteditable {
+    // TODO: disable editing here...
+  }
+}
+
 .mdxeditor-container-mode-desktop {
   .mdxeditor-root-contenteditable {
+    border-top: 1px solid $neutral-200;
+
     min-height: 150px;
     max-height: 450px;
   }
@@ -61,7 +80,6 @@ body,
   .mdxeditor-toolbar {
     // TODO this only shows up properly for the *mobile* editor not the desktop
     // one.
-    border-top: solid $neutral-200 1px;
     border-radius: inherit;
     background-color: inherit;
     overflow: hidden;
@@ -74,6 +92,10 @@ body,
     // necessary because otherwise code mirror line numbers are too small.
     font-size: inherit !important;
   }
+
+  button {
+    outline: none;
+  }
 }
 
 .mdxeditor-diff-source-wrapper {