From f58ea35a599d86dae24abd750e84a8db506531d8 Mon Sep 17 00:00:00 2001
From: ianrowan <i.rowan299@gmail.com>
Date: Wed, 4 Sep 2024 09:43:35 -0500
Subject: [PATCH 01/42] add new chains

---
 libs/shared/src/commonProtocol/chainConfig.ts | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/libs/shared/src/commonProtocol/chainConfig.ts b/libs/shared/src/commonProtocol/chainConfig.ts
index 05a07eb3fe1..514c676f331 100644
--- a/libs/shared/src/commonProtocol/chainConfig.ts
+++ b/libs/shared/src/commonProtocol/chainConfig.ts
@@ -4,6 +4,10 @@ export enum ValidChains {
   SepoliaBase = 84532,
   Sepolia = 11155111,
   Blast = 81457,
+  Linea = 59144,
+  Optimism = 10,
+  Mainnet = 1,
+  Arbitrum = 42161,
 }
 
 export const STAKE_ID = 2;
@@ -39,4 +43,24 @@ export const factoryContracts: {
     communityStake: '0xcc752fd15A7Dd0d5301b6A626316E7211352Cf62',
     chainId: 8453,
   },
+  [ValidChains.Linea]: {
+    factory: '0xe3ae9569f4523161742414480f87967e991741bd',
+    communityStake: '0xcc752fd15a7dd0d5301b6a626316e7211352cf62',
+    chainId: 59144,
+  },
+  [ValidChains.Optimism]: {
+    factory: '0xe3ae9569f4523161742414480f87967e991741bd',
+    communityStake: '0xcc752fd15a7dd0d5301b6a626316e7211352cf62',
+    chainId: 10,
+  },
+  [ValidChains.Mainnet]: {
+    factory: '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
+    communityStake: '0x9ed281e62db1b1d98af90106974891a4c1ca3a47',
+    chainId: 1,
+  },
+  [ValidChains.Arbitrum]: {
+    factory: '0xE3AE9569f4523161742414480f87967e991741bd',
+    communityStake: '0xcc752fd15A7Dd0d5301b6A626316E7211352Cf62',
+    chainId: 42161,
+  },
 };

From abda1710e339b7aecb36d1e342dbb85c221c523c Mon Sep 17 00:00:00 2001
From: ianrowan <i.rowan299@gmail.com>
Date: Wed, 4 Sep 2024 14:53:21 -0500
Subject: [PATCH 02/42] add evm event source migration

---
 .../20240904153821-new-chain-event-sources.js | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js

diff --git a/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
new file mode 100644
index 00000000000..28abdf82bda
--- /dev/null
+++ b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
@@ -0,0 +1,134 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.sequelize.transaction(async (transaction) => {
+      const specificEvmChainIds = [59144, 10, 42161, 1];
+
+      const chainNodes = await queryInterface.sequelize.query(
+        'SELECT id, eth_chain_id FROM "ChainNodes" WHERE eth_chain_id IN (:evmChainIds)',
+        {
+          replacements: { evmChainIds: specificEvmChainIds },
+          type: Sequelize.QueryTypes.SELECT,
+          transaction,
+        },
+      );
+
+      // Define three sets of hard-coded values
+      const hardCodedValueSetsL2 = [
+        {
+          contract_address: '0xedf43C919f59900C82d963E99d822dA3F95575EA',
+          event_signature:
+            '0x8870ba2202802ce285ce6bead5ac915b6dc2d35c8a9d6f96fa56de9de12829d5',
+          kind: 'DeployedNamespace',
+          abi_id: 53,
+          active: true,
+        },
+        {
+          contract_address: '0xcc752fd15A7Dd0d5301b6A626316E7211352Cf62',
+          event_signature:
+            '0xfc13c9a8a9a619ac78b803aecb26abdd009182411d51a986090f82519d88a89e',
+          kind: 'Trade',
+          abi_id: 52,
+          active: true,
+        },
+        {
+          contract_address: '0xedf43C919f59900C82d963E99d822dA3F95575EA',
+          event_signature:
+            '0x990f533044dbc89b838acde9cd2c72c400999871cf8f792d731edcae15ead693',
+          kind: 'NewContest',
+          abi_id: 53,
+          active: true,
+        },
+      ];
+
+      const hardCodedValueSetsETH = [
+        {
+          contract_address: '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
+          event_signature:
+            '0x8870ba2202802ce285ce6bead5ac915b6dc2d35c8a9d6f96fa56de9de12829d5',
+          kind: 'DeployedNamespace',
+          abi_id: 53,
+          active: true,
+        },
+        {
+          contract_address: '0x9ed281e62db1b1d98af90106974891a4c1ca3a47',
+          event_signature:
+            '0xfc13c9a8a9a619ac78b803aecb26abdd009182411d51a986090f82519d88a89e',
+          kind: 'Trade',
+          abi_id: 52,
+          active: true,
+        },
+        {
+          contract_address: '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
+          event_signature:
+            '0x990f533044dbc89b838acde9cd2c72c400999871cf8f792d731edcae15ead693',
+          kind: 'NewContest',
+          abi_id: 53,
+          active: true,
+        },
+      ];
+
+      // Prepare records for insertion
+      const records = chainNodes.flatMap((node) => {
+        if (node.eth_chain_id == 1) {
+          return hardCodedValueSetsETH.map((valueSet) => ({
+            chain_node_id: node.id,
+            ...valueSet,
+          }));
+        } else {
+          return hardCodedValueSetsL2.map((valueSet) => ({
+            chain_node_id: node.id,
+            ...valueSet,
+          }));
+        }
+      });
+      // Insert records into EvmEventSource table
+      await queryInterface.bulkInsert('EvmEventSources', records, {
+        transaction,
+      });
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.sequelize.transaction(async (transaction) => {
+      // Fetch the chain_node_ids that were inserted
+      const chainNodes = await queryInterface.sequelize.query(
+        'SELECT id, eth_chain_id FROM "ChainNodes" WHERE eth_chain_id IN (:evmChainIds)',
+        {
+          replacements: { evmChainIds: [59144, 10, 42161, 1] },
+          type: Sequelize.QueryTypes.SELECT,
+          transaction,
+        },
+      );
+
+      const chainNodeIds = chainNodes.map((node) => node.id);
+
+      const contractAddressesL2 = [
+        '0xedf43C919f59900C82d963E99d822dA3F95575EA',
+        '0xcc752fd15A7Dd0d5301b6A626316E7211352Cf62',
+        '0xedf43C919f59900C82d963E99d822dA3F95575EA',
+      ];
+
+      const contractAddressesETH = [
+        '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
+        '0x9ed281e62db1b1d98af90106974891a4c1ca3a47',
+        '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
+      ];
+
+      // Remove inserted records
+      await queryInterface.bulkDelete(
+        'EvmEventSources',
+        {
+          chain_node_id: chainNodeIds,
+          [Sequelize.Op.or]: [
+            { contract_address: contractAddressesL2 },
+            { contract_address: contractAddressesETH },
+          ],
+        },
+        { transaction },
+      );
+    });
+  },
+};

From 56671940665c0acd2210f36f623ba0a0a5eb9cba Mon Sep 17 00:00:00 2001
From: ianrowan <i.rowan299@gmail.com>
Date: Wed, 4 Sep 2024 14:54:29 -0500
Subject: [PATCH 03/42] fix comments

---
 .../migrations/20240904153821-new-chain-event-sources.js    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
index 28abdf82bda..01d42d151ff 100644
--- a/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
+++ b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
@@ -15,7 +15,6 @@ module.exports = {
         },
       );
 
-      // Define three sets of hard-coded values
       const hardCodedValueSetsL2 = [
         {
           contract_address: '0xedf43C919f59900C82d963E99d822dA3F95575EA',
@@ -70,7 +69,6 @@ module.exports = {
         },
       ];
 
-      // Prepare records for insertion
       const records = chainNodes.flatMap((node) => {
         if (node.eth_chain_id == 1) {
           return hardCodedValueSetsETH.map((valueSet) => ({
@@ -84,7 +82,7 @@ module.exports = {
           }));
         }
       });
-      // Insert records into EvmEventSource table
+
       await queryInterface.bulkInsert('EvmEventSources', records, {
         transaction,
       });
@@ -93,7 +91,6 @@ module.exports = {
 
   down: async (queryInterface, Sequelize) => {
     await queryInterface.sequelize.transaction(async (transaction) => {
-      // Fetch the chain_node_ids that were inserted
       const chainNodes = await queryInterface.sequelize.query(
         'SELECT id, eth_chain_id FROM "ChainNodes" WHERE eth_chain_id IN (:evmChainIds)',
         {
@@ -117,7 +114,6 @@ module.exports = {
         '0x90aa47bf6e754f69ee53f05b5187b320e3118b0f',
       ];
 
-      // Remove inserted records
       await queryInterface.bulkDelete(
         'EvmEventSources',
         {

From bc57d0d8210541a28e204dd3b7432c69c09d494f Mon Sep 17 00:00:00 2001
From: ianrowan <i.rowan299@gmail.com>
Date: Wed, 4 Sep 2024 15:09:43 -0500
Subject: [PATCH 04/42] dynamic ABI

---
 .../20240904153821-new-chain-event-sources.js | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
index 01d42d151ff..bfecb2dbdfc 100644
--- a/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
+++ b/packages/commonwealth/server/migrations/20240904153821-new-chain-event-sources.js
@@ -15,13 +15,31 @@ module.exports = {
         },
       );
 
+      const contractAbis = await queryInterface.sequelize.query(
+        'SELECT id, nickname FROM "ContractAbis" WHERE nickname IN (:nicknames)',
+        {
+          replacements: { nicknames: ['NamespaceFactory', 'CommunityStakes'] },
+          type: Sequelize.QueryTypes.SELECT,
+          transaction,
+        },
+      );
+
+      const abiIds = {
+        NamespaceFactory: contractAbis.find(
+          (abi) => abi.nickname === 'NamespaceFactory',
+        ).id,
+        CommunityStakes: contractAbis.find(
+          (abi) => abi.nickname === 'CommunityStakes',
+        ).id,
+      };
+
       const hardCodedValueSetsL2 = [
         {
           contract_address: '0xedf43C919f59900C82d963E99d822dA3F95575EA',
           event_signature:
             '0x8870ba2202802ce285ce6bead5ac915b6dc2d35c8a9d6f96fa56de9de12829d5',
           kind: 'DeployedNamespace',
-          abi_id: 53,
+          abi_id: abiIds.NamespaceFactory,
           active: true,
         },
         {
@@ -29,7 +47,7 @@ module.exports = {
           event_signature:
             '0xfc13c9a8a9a619ac78b803aecb26abdd009182411d51a986090f82519d88a89e',
           kind: 'Trade',
-          abi_id: 52,
+          abi_id: abiIds.CommunityStakes,
           active: true,
         },
         {
@@ -37,7 +55,7 @@ module.exports = {
           event_signature:
             '0x990f533044dbc89b838acde9cd2c72c400999871cf8f792d731edcae15ead693',
           kind: 'NewContest',
-          abi_id: 53,
+          abi_id: abiIds.NamespaceFactory,
           active: true,
         },
       ];
@@ -48,7 +66,7 @@ module.exports = {
           event_signature:
             '0x8870ba2202802ce285ce6bead5ac915b6dc2d35c8a9d6f96fa56de9de12829d5',
           kind: 'DeployedNamespace',
-          abi_id: 53,
+          abi_id: abiIds.NamespaceFactory,
           active: true,
         },
         {
@@ -56,7 +74,7 @@ module.exports = {
           event_signature:
             '0xfc13c9a8a9a619ac78b803aecb26abdd009182411d51a986090f82519d88a89e',
           kind: 'Trade',
-          abi_id: 52,
+          abi_id: abiIds.CommunityStakes,
           active: true,
         },
         {
@@ -64,7 +82,7 @@ module.exports = {
           event_signature:
             '0x990f533044dbc89b838acde9cd2c72c400999871cf8f792d731edcae15ead693',
           kind: 'NewContest',
-          abi_id: 53,
+          abi_id: abiIds.NamespaceFactory,
           active: true,
         },
       ];

From 3ea8700ad16d6d9ab59c68dc4d90c85f023f49fe Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 11:10:26 -0700
Subject: [PATCH 05/42] more icons...

---
 .../components/component_kit/cw_icons/cw_icon_lookup.ts   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts b/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
index 2565f34f950..6ba20a47490 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
@@ -58,12 +58,16 @@ import {
   PlusCircle,
   PushPin,
   Question,
+  Quotes,
   Rows,
   SignOut,
   Sparkle,
   SquaresFour,
   Table,
   TextB,
+  TextHOne,
+  TextHThree,
+  TextHTwo,
   TextItalic,
   TextStrikethrough,
   TextSubscript,
@@ -91,6 +95,10 @@ export const iconLookup = {
   listDashes: withPhosphorIcon(ListDashes),
   listNumbers: withPhosphorIcon(ListNumbers),
   listChecks: withPhosphorIcon(ListChecks),
+  h1: withPhosphorIcon(TextHOne),
+  h2: withPhosphorIcon(TextHTwo),
+  h3: withPhosphorIcon(TextHThree),
+  quotes: withPhosphorIcon(Quotes),
   table: withPhosphorIcon(Table),
   archiveTrayFilled: Icons.CWArchiveTrayFilled,
   arrowDownBlue500: Icons.CWArrowDownBlue500,

From 8a51e2ff5e0926ec63f58068c2f03edf7a791d54 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 11:34:19 -0700
Subject: [PATCH 06/42] Rework the way onPaste happens so that the user can
 paste files.

---
 .../scripts/views/pages/Editor/Editor.tsx     | 57 +++++++++++++------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index b8d70c1eac5..7d89779298e 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -97,35 +97,40 @@ export const Editor = memo(function Editor(props: EditorProps) {
     [handleFile],
   );
 
+  const handleFiles = useCallback(async (files: FileList) => {
+    if (files.length === 1) {
+      const type = files[0].type;
+
+      if (['text/markdown', 'text/plain'].includes(type)) {
+        await handleFile(files[0]);
+      } else {
+        notifyError('File not markdown. Has invalid type: ' + type);
+      }
+    }
+
+    if (files.length > 1) {
+      notifyError('Too many files given');
+      return;
+    }
+  }, []);
+
   const handleDropAsync = useCallback(
     async (event: React.DragEvent) => {
-      const nrFiles = event.dataTransfer.files.length;
-
       try {
-        if (nrFiles === 1) {
-          const type = event.dataTransfer.files[0].type;
-
-          if (['text/markdown', 'text/plain'].includes(type)) {
-            await handleFile(event.dataTransfer.files[0]);
-          } else {
-            notifyError('File not markdown. Has invalid type: ' + type);
-          }
-        }
+        const files = event.dataTransfer.files;
 
-        if (nrFiles <= 0) {
+        if (files.length <= 0) {
+          // for drag and drop... no files is an error.
           notifyError('No files given');
           return;
         }
 
-        if (nrFiles > 1) {
-          notifyError('Too many files given');
-          return;
-        }
+        await handleFiles(files);
       } finally {
         setDragging(false);
       }
     },
-    [handleFile],
+    [handleFiles],
   );
 
   // TODO: handle html files but I'm not sure about the correct way to handle it
@@ -163,6 +168,23 @@ export const Editor = memo(function Editor(props: EditorProps) {
     }
   }, []);
 
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent<HTMLDivElement>) => {
+      const files = event.clipboardData.files;
+
+      if (files.length === 0) {
+        // now files here is acceptable because this could be a paste of other
+        // data like text/markdown, and we're relying on the MDXEditor paste
+        // handler to work
+        return;
+      }
+
+      event.preventDefault();
+      handleFiles(files).catch(console.error);
+    },
+    [handleFiles],
+  );
+
   return (
     <div
       className={clsx(
@@ -173,6 +195,7 @@ export const Editor = memo(function Editor(props: EditorProps) {
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
+      onPaste={(event) => handlePaste(event)}
     >
       <MDXEditor
         onError={errorHandler}

From aaf730399f5b585129280241d58d0707953d1eeb Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:08:14 -0700
Subject: [PATCH 07/42] moved to dedicated directory.

---
 .../commonwealth/client/scripts/views/pages/Editor/Editor.tsx   | 2 +-
 .../views/pages/Editor/{ => indicators}/DragIndicator.scss      | 2 +-
 .../views/pages/Editor/{ => indicators}/DragIndicator.tsx       | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/commonwealth/client/scripts/views/pages/Editor/{ => indicators}/DragIndicator.scss (78%)
 rename packages/commonwealth/client/scripts/views/pages/Editor/{ => indicators}/DragIndicator.tsx (100%)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index 7d89779298e..c64f69bf614 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -24,7 +24,7 @@ import clsx from 'clsx';
 import 'commonwealth-mdxeditor/style.css';
 import { notifyError } from 'controllers/app/notifications';
 import { DesktopEditorFooter } from 'views/pages/Editor/DesktopEditorFooter';
-import { DragIndicator } from 'views/pages/Editor/DragIndicator';
+import { DragIndicator } from 'views/pages/Editor/indicators/DragIndicator';
 import { ToolbarForDesktop } from 'views/pages/Editor/toolbars/ToolbarForDesktop';
 import { ToolbarForMobile } from 'views/pages/Editor/toolbars/ToolbarForMobile';
 import { useEditorErrorHandler } from 'views/pages/Editor/useEditorErrorHandler';
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/DragIndicator.scss b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.scss
similarity index 78%
rename from packages/commonwealth/client/scripts/views/pages/Editor/DragIndicator.scss
rename to packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.scss
index 3d2071da501..54b1a2ff829 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/DragIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/shared';
+@import '../../../../../styles/shared';
 
 .DragIndicator {
   position: absolute;
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/DragIndicator.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/DragIndicator.tsx
rename to packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.tsx

From 8218c626d69f08fd719198be07b7f627d5e546e1 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:09:23 -0700
Subject: [PATCH 08/42] using a dedicated upload indicator

---
 .../client/scripts/views/pages/Editor/Editor.tsx      |  3 ++-
 .../pages/Editor/indicators/UploadIndicator.scss      | 11 +++++++++++
 .../views/pages/Editor/indicators/UploadIndicator.tsx |  7 +++++++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
 create mode 100644 packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index c64f69bf614..0c6552c1d0f 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -25,6 +25,7 @@ import 'commonwealth-mdxeditor/style.css';
 import { notifyError } from 'controllers/app/notifications';
 import { DesktopEditorFooter } from 'views/pages/Editor/DesktopEditorFooter';
 import { DragIndicator } from 'views/pages/Editor/indicators/DragIndicator';
+import { UploadIndicator } from 'views/pages/Editor/indicators/UploadIndicator';
 import { ToolbarForDesktop } from 'views/pages/Editor/toolbars/ToolbarForDesktop';
 import { ToolbarForMobile } from 'views/pages/Editor/toolbars/ToolbarForMobile';
 import { useEditorErrorHandler } from 'views/pages/Editor/useEditorErrorHandler';
@@ -233,7 +234,7 @@ export const Editor = memo(function Editor(props: EditorProps) {
       )}
 
       {dragging && <DragIndicator />}
-      {uploading && <DragIndicator />}
+      {uploading && <UploadIndicator />}
     </div>
   );
 });
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
new file mode 100644
index 00000000000..cb1bfb71704
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
@@ -0,0 +1,11 @@
+@import '../../../../../styles/shared';
+
+.UploadIndicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: $neutral-600;
+}
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
new file mode 100644
index 00000000000..c44d1c5d0c0
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './UploadIndicator.scss';
+
+export const UploadIndicator = () => {
+  return <div className="UploadIndicator"></div>;
+};

From ed18573db94937be7cedfb55d55ba2b2a8c729a6 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:15:56 -0700
Subject: [PATCH 09/42] using a dedicated drag and upload indicator...


From 2ecb6ea413f5c79193c8b1b74e5cae2da0ac8492 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:19:47 -0700
Subject: [PATCH 10/42] Fixed bug with dragging the second time.

---
 .../commonwealth/client/scripts/views/pages/Editor/Editor.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index 0c6552c1d0f..1d559217734 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -129,6 +129,7 @@ export const Editor = memo(function Editor(props: EditorProps) {
         await handleFiles(files);
       } finally {
         setDragging(false);
+        dragCounterRef.current = 0;
       }
     },
     [handleFiles],

From cf4a65b6a3ba67df03828a6a660463c65eaeeed4 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:25:49 -0700
Subject: [PATCH 11/42] Fixed the upload indicators now...

---
 .../client/scripts/views/pages/Editor/README. md      | 11 +++++++++++
 .../pages/Editor/indicators/UploadIndicator.scss      |  6 ++++++
 .../views/pages/Editor/indicators/UploadIndicator.tsx | 10 +++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/README. md b/packages/commonwealth/client/scripts/views/pages/Editor/README. md
index ca438343107..3de4f5a1eb0 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/README. md	
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/README. md	
@@ -5,3 +5,14 @@ This is just temporary as I plan on merging this into the main MDXEditor when
 we are done.
 
 Then we can switch over to the real one.
+
+# Testing
+
+
+
+- success: copy a .md file to the clipboard, try to paste it into the editor. It
+  should replace the editor contents.
+
+- failure: copy multiple .md files ot the clipboard, try to paste into the editor.
+  It should fail because we can't handle multiple .md files
+- success: drag a
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
index cb1bfb71704..460b97ce1e3 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
@@ -8,4 +8,10 @@
   height: 100%;
   z-index: 10;
   background-color: $neutral-600;
+  display: flex;
+
+  .inner {
+    margin: auto auto;
+  }
+
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
index c44d1c5d0c0..bd344f91e78 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
 
 import './UploadIndicator.scss';
+import CWCircleRingSpinner
+  from 'views/components/component_kit/new_designs/CWCircleRingSpinner';
 
 export const UploadIndicator = () => {
-  return <div className="UploadIndicator"></div>;
+  return (
+    <div className="UploadIndicator">
+      <div className="inner">
+        <CWCircleRingSpinner/>
+      </div>
+    </div>
+  );
 };

From 82b4cfb9c73ebb02ff5897e79188d48e412a80a4 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:32:56 -0700
Subject: [PATCH 12/42] handle markdown file paste AND image file paste

---
 .../client/scripts/views/pages/Editor/Editor.tsx | 16 ++++++++++------
 .../pages/Editor/indicators/UploadIndicator.scss |  1 -
 .../pages/Editor/indicators/UploadIndicator.tsx  |  5 ++---
 .../pages/Editor/utils/canAcceptFileForImport.ts |  3 +++
 4 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index 1d559217734..7f591f0e5c7 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -30,6 +30,7 @@ import { ToolbarForDesktop } from 'views/pages/Editor/toolbars/ToolbarForDesktop
 import { ToolbarForMobile } from 'views/pages/Editor/toolbars/ToolbarForMobile';
 import { useEditorErrorHandler } from 'views/pages/Editor/useEditorErrorHandler';
 import { useImageUploadHandler } from 'views/pages/Editor/useImageUploadHandler';
+import { canAcceptFileForImport } from 'views/pages/Editor/utils/canAcceptFileForImport';
 import { codeBlockLanguages } from 'views/pages/Editor/utils/codeBlockLanguages';
 import { editorTranslator } from 'views/pages/Editor/utils/editorTranslator';
 import { fileToText } from 'views/pages/Editor/utils/fileToText';
@@ -100,12 +101,12 @@ export const Editor = memo(function Editor(props: EditorProps) {
 
   const handleFiles = useCallback(async (files: FileList) => {
     if (files.length === 1) {
-      const type = files[0].type;
+      const file = files[0];
 
-      if (['text/markdown', 'text/plain'].includes(type)) {
-        await handleFile(files[0]);
+      if (canAcceptFileForImport(file)) {
+        await handleFile(file);
       } else {
-        notifyError('File not markdown. Has invalid type: ' + type);
+        notifyError('File not markdown. Has invalid type: ' + file.type);
       }
     }
 
@@ -181,8 +182,11 @@ export const Editor = memo(function Editor(props: EditorProps) {
         return;
       }
 
-      event.preventDefault();
-      handleFiles(files).catch(console.error);
+      if (canAcceptFileForImport(files[0])) {
+        // if we can accept this file for import, go ahead and do so...
+        event.preventDefault();
+        handleFiles(files).catch(console.error);
+      }
     },
     [handleFiles],
   );
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
index 460b97ce1e3..dc2408435b8 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
@@ -13,5 +13,4 @@
   .inner {
     margin: auto auto;
   }
-
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
index bd344f91e78..bd3273c779e 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
 
+import CWCircleRingSpinner from 'views/components/component_kit/new_designs/CWCircleRingSpinner';
 import './UploadIndicator.scss';
-import CWCircleRingSpinner
-  from 'views/components/component_kit/new_designs/CWCircleRingSpinner';
 
 export const UploadIndicator = () => {
   return (
     <div className="UploadIndicator">
       <div className="inner">
-        <CWCircleRingSpinner/>
+        <CWCircleRingSpinner />
       </div>
     </div>
   );
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts b/packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts
new file mode 100644
index 00000000000..72156348cef
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts
@@ -0,0 +1,3 @@
+export function canAcceptFileForImport(file: Pick<File, 'type'>) {
+  return ['text/markdown', 'text/plain'].includes(file.type);
+}

From b56ee3e22e9c76173385213abeee9cb077b4fb8a Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:42:33 -0700
Subject: [PATCH 13/42] verify image uploads can fail properly.

---
 .../scripts/views/pages/Editor/Editor.tsx     |  2 +-
 .../pages/Editor/useImageUploadHandler.ts     | 21 ++++++++++++++-----
 .../useImageUploadHandlerWithFailure.ts       | 12 +++++++++++
 3 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index 7f591f0e5c7..99a3b5cf41b 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -41,7 +41,7 @@ export type ImageURL = string;
 
 export type EditorMode = 'desktop' | 'mobile';
 
-export type ImageHandler = 'S3' | 'local';
+export type ImageHandler = 'S3' | 'local' | 'failure';
 
 type EditorProps = {
   readonly mode?: EditorMode;
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts b/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts
index 8b781ec9a4b..7504075c1cf 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts
@@ -1,7 +1,9 @@
+import { notifyError } from 'controllers/app/notifications';
 import { useCallback } from 'react';
 import { ImageHandler, ImageURL } from 'views/pages/Editor/Editor';
 import { useImageUploadHandlerLocal } from 'views/pages/Editor/useImageUploadHandlerLocal';
 import { useImageUploadHandlerS3 } from 'views/pages/Editor/useImageUploadHandlerS3';
+import { useImageUploadHandlerWithFailure } from 'views/pages/Editor/useImageUploadHandlerWithFailure';
 
 /**
  * Handles supporting either of our image handlers.
@@ -9,14 +11,22 @@ import { useImageUploadHandlerS3 } from 'views/pages/Editor/useImageUploadHandle
 export function useImageUploadHandler(imageHandler: ImageHandler) {
   const imageUploadHandlerDelegateLocal = useImageUploadHandlerLocal();
   const imageUploadHandlerDelegateS3 = useImageUploadHandlerS3();
+  const imageUploadHandlerDelegateWithFailure =
+    useImageUploadHandlerWithFailure();
 
   return useCallback(
     async (file: File): Promise<ImageURL> => {
-      switch (imageHandler) {
-        case 'S3':
-          return await imageUploadHandlerDelegateS3(file);
-        case 'local':
-          return await imageUploadHandlerDelegateLocal(file);
+      try {
+        switch (imageHandler) {
+          case 'S3':
+            return await imageUploadHandlerDelegateS3(file);
+          case 'local':
+            return await imageUploadHandlerDelegateLocal(file);
+          case 'failure':
+            return await imageUploadHandlerDelegateWithFailure(file);
+        }
+      } catch (e) {
+        notifyError('Failed to upload image: ' + e.message);
       }
 
       throw new Error('Unknown image handler: ' + imageHandler);
@@ -25,6 +35,7 @@ export function useImageUploadHandler(imageHandler: ImageHandler) {
       imageHandler,
       imageUploadHandlerDelegateLocal,
       imageUploadHandlerDelegateS3,
+      imageUploadHandlerDelegateWithFailure,
     ],
   );
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts b/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts
new file mode 100644
index 00000000000..51aec5a3e1c
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts
@@ -0,0 +1,12 @@
+import { delay } from '@hicommonwealth/shared';
+import { useCallback } from 'react';
+
+/**
+ * Fake image upload handler that just fails
+ */
+export function useImageUploadHandlerWithFailure() {
+  return useCallback(async (file: File) => {
+    await delay(1000);
+    throw new Error('Image upload failed successfully.');
+  }, []);
+}

From e8a2fbc5b25bd5bbfb178dd36c7b14b1b1cbbb0c Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:47:19 -0700
Subject: [PATCH 14/42] new editor flag...

---
 packages/commonwealth/client/scripts/helpers/feature-flags.ts | 1 +
 packages/commonwealth/client/vite.config.ts                   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/commonwealth/client/scripts/helpers/feature-flags.ts b/packages/commonwealth/client/scripts/helpers/feature-flags.ts
index 2c61d3c8fe0..ed00bbcd8d7 100644
--- 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/vite.config.ts b/packages/commonwealth/client/vite.config.ts
index ec66df0cb12..772e09ba80e 100644
--- a/packages/commonwealth/client/vite.config.ts
+++ b/packages/commonwealth/client/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig(({ mode }) => {
 
   // WARN: only used locally never in remote (Heroku) apps
   const featureFlags = {
+    'process.env.FLAG_NEW_EDITOR': JSON.stringify(env.FLAG_NEW_EDITOR),
     'process.env.FLAG_CONTEST': JSON.stringify(env.FLAG_CONTEST),
     'process.env.FLAG_CONTEST_DEV': JSON.stringify(env.FLAG_CONTEST_DEV),
     'process.env.FLAG_KNOCK_PUSH_NOTIFICATIONS_ENABLED': JSON.stringify(

From 6f78186243d50a5f288ef2aa00d8a642e245d5c8 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:51:10 -0700
Subject: [PATCH 15/42] cleanup

---
 .../commonwealth/client/scripts/views/pages/Editor/Editor.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
index 99a3b5cf41b..8710bbec767 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
@@ -68,7 +68,6 @@ export const Editor = memo(function Editor(props: EditorProps) {
   const imageUploadHandler = useCallback(
     async (file: File) => {
       try {
-        // TODO:
         setUploading(true);
         return await imageUploadHandlerDelegate(file);
       } finally {
@@ -136,9 +135,6 @@ export const Editor = memo(function Editor(props: EditorProps) {
     [handleFiles],
   );
 
-  // TODO: handle html files but I'm not sure about the correct way to handle it
-  // because I have to convert to markdown.  This isn't really a typical use
-  // case though
   const handleDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();

From d4c5cf26c68670bf1cd0ecf829ea04127b0de39e Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 14:56:59 -0700
Subject: [PATCH 16/42] Fixed line number issues.

---
 .../client/scripts/views/pages/Editor/Editor.scss            | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss
index e7e3971cdf3..4734b317f91 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss
@@ -39,6 +39,11 @@ body,
     top: initial;
     height: 65px;
   }
+
+  .cm-gutters {
+    // necessary because otherwise code mirror line numbers are too small.
+    font-size: inherit !important;
+  }
 }
 
 .mdxeditor-diff-source-wrapper {

From ad3055fb73f75cc020c192206b4cd2b007bf8654 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:02:28 -0700
Subject: [PATCH 17/42] The Editor was in pages not components.

---
 .../views/{pages => components}/Editor/DesktopEditorFooter.scss | 0
 .../views/{pages => components}/Editor/DesktopEditorFooter.tsx  | 0
 .../scripts/views/{pages => components}/Editor/Editor.scss      | 0
 .../scripts/views/{pages => components}/Editor/Editor.tsx       | 0
 .../scripts/views/{pages => components}/Editor/README. md       | 0
 .../client/scripts/views/{pages => components}/Editor/index.tsx | 0
 .../{pages => components}/Editor/indicators/DragIndicator.scss  | 0
 .../{pages => components}/Editor/indicators/DragIndicator.tsx   | 0
 .../Editor/indicators/UploadIndicator.scss                      | 0
 .../{pages => components}/Editor/indicators/UploadIndicator.tsx | 0
 .../scripts/views/{pages => components}/Editor/markdown/gfm.md  | 0
 .../views/{pages => components}/Editor/markdown/markdown.md     | 0
 .../views/{pages => components}/Editor/markdown/supported.md    | 0
 .../{pages => components}/Editor/toolbars/ToolbarForDesktop.tsx | 0
 .../{pages => components}/Editor/toolbars/ToolbarForMobile.scss | 0
 .../{pages => components}/Editor/toolbars/ToolbarForMobile.tsx  | 0
 .../views/{pages => components}/Editor/useEditorErrorHandler.ts | 0
 .../views/{pages => components}/Editor/useImageUploadHandler.ts | 0
 .../{pages => components}/Editor/useImageUploadHandlerLocal.ts  | 0
 .../{pages => components}/Editor/useImageUploadHandlerS3.ts     | 0
 .../Editor/useImageUploadHandlerWithFailure.ts                  | 0
 .../Editor/utils/canAcceptFileForImport.ts                      | 0
 .../{pages => components}/Editor/utils/codeBlockLanguages.ts    | 0
 .../{pages => components}/Editor/utils/editorTranslator.ts      | 0
 .../views/{pages => components}/Editor/utils/fileToText.ts      | 0
 .../{pages => components}/Editor/utils/iconComponentFor.tsx     | 2 +-
 26 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/DesktopEditorFooter.scss (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/DesktopEditorFooter.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/Editor.scss (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/Editor.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/README. md (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/index.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/indicators/DragIndicator.scss (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/indicators/DragIndicator.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/indicators/UploadIndicator.scss (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/indicators/UploadIndicator.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/markdown/gfm.md (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/markdown/markdown.md (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/markdown/supported.md (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/toolbars/ToolbarForDesktop.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/toolbars/ToolbarForMobile.scss (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/toolbars/ToolbarForMobile.tsx (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/useEditorErrorHandler.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/useImageUploadHandler.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/useImageUploadHandlerLocal.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/useImageUploadHandlerS3.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/useImageUploadHandlerWithFailure.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/utils/canAcceptFileForImport.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/utils/codeBlockLanguages.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/utils/editorTranslator.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/utils/fileToText.ts (100%)
 rename packages/commonwealth/client/scripts/views/{pages => components}/Editor/utils/iconComponentFor.tsx (95%)

diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/DesktopEditorFooter.scss b/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/DesktopEditorFooter.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/DesktopEditorFooter.tsx b/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/DesktopEditorFooter.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/Editor.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/Editor.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/README. md b/packages/commonwealth/client/scripts/views/components/Editor/README. md
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/README. md
rename to packages/commonwealth/client/scripts/views/components/Editor/README. md
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/index.tsx b/packages/commonwealth/client/scripts/views/components/Editor/index.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/index.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/index.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/indicators/DragIndicator.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/indicators/UploadIndicator.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/markdown/gfm.md b/packages/commonwealth/client/scripts/views/components/Editor/markdown/gfm.md
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/markdown/gfm.md
rename to packages/commonwealth/client/scripts/views/components/Editor/markdown/gfm.md
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/markdown/markdown.md b/packages/commonwealth/client/scripts/views/components/Editor/markdown/markdown.md
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/markdown/markdown.md
rename to packages/commonwealth/client/scripts/views/components/Editor/markdown/markdown.md
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/markdown/supported.md b/packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/markdown/supported.md
rename to packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForDesktop.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForDesktop.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForMobile.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForMobile.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForMobile.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/toolbars/ToolbarForMobile.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useEditorErrorHandler.ts b/packages/commonwealth/client/scripts/views/components/Editor/useEditorErrorHandler.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/useEditorErrorHandler.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/useEditorErrorHandler.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandler.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerLocal.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerLocal.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerLocal.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerLocal.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerS3.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerS3.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/useImageUploadHandlerWithFailure.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts b/packages/commonwealth/client/scripts/views/components/Editor/utils/canAcceptFileForImport.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/utils/canAcceptFileForImport.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/utils/canAcceptFileForImport.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/codeBlockLanguages.ts b/packages/commonwealth/client/scripts/views/components/Editor/utils/codeBlockLanguages.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/utils/codeBlockLanguages.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/utils/codeBlockLanguages.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/editorTranslator.ts b/packages/commonwealth/client/scripts/views/components/Editor/utils/editorTranslator.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/utils/editorTranslator.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/utils/editorTranslator.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/fileToText.ts b/packages/commonwealth/client/scripts/views/components/Editor/utils/fileToText.ts
similarity index 100%
rename from packages/commonwealth/client/scripts/views/pages/Editor/utils/fileToText.ts
rename to packages/commonwealth/client/scripts/views/components/Editor/utils/fileToText.ts
diff --git a/packages/commonwealth/client/scripts/views/pages/Editor/utils/iconComponentFor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/utils/iconComponentFor.tsx
similarity index 95%
rename from packages/commonwealth/client/scripts/views/pages/Editor/utils/iconComponentFor.tsx
rename to packages/commonwealth/client/scripts/views/components/Editor/utils/iconComponentFor.tsx
index 9e4369d4cd9..fae7d43b895 100644
--- a/packages/commonwealth/client/scripts/views/pages/Editor/utils/iconComponentFor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/utils/iconComponentFor.tsx
@@ -1,6 +1,6 @@
 import { defaultSvgIcons, IconKey } from 'commonwealth-mdxeditor';
 import React from 'react';
-import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
+import { CWIcon } from '../../component_kit/cw_icons/cw_icon';
 
 const DEFAULT_ICON_SIZE = 'regular';
 

From b4a0f36253427f13b30dd44b00a6f01011585a82 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:08:12 -0700
Subject: [PATCH 18/42] this moved to components

---
 .../scripts/navigation/CommonDomainRoutes.tsx |  8 ++-----
 .../views/components/Editor/Editor.tsx        | 24 +++++++++----------
 .../Editor/useImageUploadHandler.ts           |  8 +++----
 .../Editor/useImageUploadHandlerS3.ts         |  2 +-
 .../views/pages/EditorPage/EditorPage.tsx     |  6 +++++
 .../scripts/views/pages/EditorPage/index.tsx  |  3 +++
 6 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/pages/EditorPage/index.tsx

diff --git a/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx b/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx
index 94741fb677b..4fac51647ad 100644
--- 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/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index 8710bbec767..9d1afdc8ce0 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -23,19 +23,19 @@ import './Editor.scss';
 import clsx from 'clsx';
 import 'commonwealth-mdxeditor/style.css';
 import { notifyError } from 'controllers/app/notifications';
-import { DesktopEditorFooter } from 'views/pages/Editor/DesktopEditorFooter';
-import { DragIndicator } from 'views/pages/Editor/indicators/DragIndicator';
-import { UploadIndicator } from 'views/pages/Editor/indicators/UploadIndicator';
-import { ToolbarForDesktop } from 'views/pages/Editor/toolbars/ToolbarForDesktop';
-import { ToolbarForMobile } from 'views/pages/Editor/toolbars/ToolbarForMobile';
-import { useEditorErrorHandler } from 'views/pages/Editor/useEditorErrorHandler';
-import { useImageUploadHandler } from 'views/pages/Editor/useImageUploadHandler';
-import { canAcceptFileForImport } from 'views/pages/Editor/utils/canAcceptFileForImport';
-import { codeBlockLanguages } from 'views/pages/Editor/utils/codeBlockLanguages';
-import { editorTranslator } from 'views/pages/Editor/utils/editorTranslator';
-import { fileToText } from 'views/pages/Editor/utils/fileToText';
-import { iconComponentFor } from 'views/pages/Editor/utils/iconComponentFor';
+import { DesktopEditorFooter } from './DesktopEditorFooter';
+import { DragIndicator } from './indicators/DragIndicator';
+import { UploadIndicator } from './indicators/UploadIndicator';
 import supported from './markdown/supported.md?raw';
+import { ToolbarForDesktop } from './toolbars/ToolbarForDesktop';
+import { ToolbarForMobile } from './toolbars/ToolbarForMobile';
+import { useEditorErrorHandler } from './useEditorErrorHandler';
+import { useImageUploadHandler } from './useImageUploadHandler';
+import { canAcceptFileForImport } from './utils/canAcceptFileForImport';
+import { codeBlockLanguages } from './utils/codeBlockLanguages';
+import { editorTranslator } from './utils/editorTranslator';
+import { fileToText } from './utils/fileToText';
+import { iconComponentFor } from './utils/iconComponentFor';
 
 export type ImageURL = string;
 
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
index 7504075c1cf..b3d17b5c066 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
+++ b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
@@ -1,9 +1,9 @@
 import { notifyError } from 'controllers/app/notifications';
 import { useCallback } from 'react';
-import { ImageHandler, ImageURL } from 'views/pages/Editor/Editor';
-import { useImageUploadHandlerLocal } from 'views/pages/Editor/useImageUploadHandlerLocal';
-import { useImageUploadHandlerS3 } from 'views/pages/Editor/useImageUploadHandlerS3';
-import { useImageUploadHandlerWithFailure } from 'views/pages/Editor/useImageUploadHandlerWithFailure';
+import { ImageHandler, ImageURL } from './Editor';
+import { useImageUploadHandlerLocal } from './useImageUploadHandlerLocal';
+import { useImageUploadHandlerS3 } from './useImageUploadHandlerS3';
+import { useImageUploadHandlerWithFailure } from './useImageUploadHandlerWithFailure';
 
 /**
  * Handles supporting either of our image handlers.
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts
index 51664972177..74444307363 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts
+++ b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerS3.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { SERVER_URL } from 'state/api/config';
 import useUserStore from 'state/ui/user';
 import { uploadFileToS3 } from 'views/components/react_quill_editor/utils';
-import { ImageURL } from 'views/pages/Editor/Editor';
+import { ImageURL } from './Editor';
 
 /**
  * This is the main/default image handler for S3.
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
new file mode 100644
index 00000000000..71f828408f3
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import Editor from 'views/components/Editor';
+
+export const EditorPage = () => {
+  return <Editor mode={'desktop'} imageHandler="local" />;
+};
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/index.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/index.tsx
new file mode 100644
index 00000000000..60e184225bd
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/index.tsx
@@ -0,0 +1,3 @@
+import { EditorPage } from 'views/pages/EditorPage/EditorPage';
+
+export default EditorPage;

From f29237e6bbc824f56e6f9437dba2c2c722923989 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:15:53 -0700
Subject: [PATCH 19/42] Fixes for CSS layout.

---
 .../views/components/Editor/toolbars/ToolbarForMobile.scss  | 6 ++++++
 .../views/components/Editor/toolbars/ToolbarForMobile.tsx   | 6 +++---
 .../client/scripts/views/pages/EditorPage/EditorPage.tsx    | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
index d734db701d9..34011bf85c0 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
@@ -1,7 +1,13 @@
 .ToolbarForMobile {
+  display: flex;
+  flex-grow: 1;
   .end {
     justify-content: flex-end;
     flex-grow: 1;
     display: flex;
+
+    button: {
+      outline: none;
+    }
   }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
index 84889e00c21..b82b530f9a6 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
@@ -12,8 +12,8 @@ import './ToolbarForMobile.scss';
 
 export const ToolbarForMobile = () => {
   return (
-    <>
-      <div className="mdxeditor-block-type-select ToolbarForMobile">
+    <div className="ToolbarForMobile">
+      <div className="mdxeditor-block-type-select">
         <BlockTypeSelect />
       </div>
       {/*<UndoRedo />*/}
@@ -25,6 +25,6 @@ export const ToolbarForMobile = () => {
       <div className="end">
         <button>➤</button>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
index 71f828408f3..b5a72bbe476 100644
--- a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -2,5 +2,5 @@ import React from 'react';
 import Editor from 'views/components/Editor';
 
 export const EditorPage = () => {
-  return <Editor mode={'desktop'} imageHandler="local" />;
+  return <Editor mode={'mobile'} imageHandler="local" />;
 };

From f84109ca40b32cd5f5ec4de652510110587e72c3 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:23:10 -0700
Subject: [PATCH 20/42] Make sure the submit button works.

---
 .../views/components/Editor/Editor.tsx        | 25 +++++++++++++++++--
 .../Editor/toolbars/ToolbarForMobile.scss     |  4 ---
 .../Editor/toolbars/ToolbarForMobile.tsx      |  8 ++++--
 .../views/pages/EditorPage/EditorPage.tsx     |  8 +++++-
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index 9d1afdc8ce0..b21f9038c07 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -43,13 +43,20 @@ export type EditorMode = 'desktop' | 'mobile';
 
 export type ImageHandler = 'S3' | 'local' | 'failure';
 
+/**
+ * A string that contains markdown.
+ */
+export type MarkdownStr = string;
+
 type EditorProps = {
   readonly mode?: EditorMode;
   readonly placeholder?: string;
   readonly imageHandler?: ImageHandler;
+  readonly onSubmit?: (markdown: MarkdownStr) => void;
 };
 
 export const Editor = memo(function Editor(props: EditorProps) {
+  const { onSubmit } = props;
   const errorHandler = useEditorErrorHandler();
   const [dragging, setDragging] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -187,6 +194,13 @@ export const Editor = memo(function Editor(props: EditorProps) {
     [handleFiles],
   );
 
+  const handleSubmit = useCallback(() => {
+    if (mdxEditorRef.current) {
+      const markdown = mdxEditorRef.current.getMarkdown();
+      onSubmit?.(markdown);
+    }
+  }, [onSubmit]);
+
   return (
     <div
       className={clsx(
@@ -210,7 +224,11 @@ export const Editor = memo(function Editor(props: EditorProps) {
           toolbarPlugin({
             location: mode === 'mobile' ? 'bottom' : 'top',
             toolbarContents: () =>
-              mode === 'mobile' ? <ToolbarForMobile /> : <ToolbarForDesktop />,
+              mode === 'mobile' ? (
+                <ToolbarForMobile onSubmit={handleSubmit} />
+              ) : (
+                <ToolbarForDesktop />
+              ),
           }),
           listsPlugin(),
           quotePlugin(),
@@ -231,7 +249,10 @@ export const Editor = memo(function Editor(props: EditorProps) {
       />
 
       {mode === 'desktop' && (
-        <DesktopEditorFooter onImportMarkdown={handleImportMarkdown} />
+        <DesktopEditorFooter
+          onImportMarkdown={handleImportMarkdown}
+          onSubmit={handleSubmit}
+        />
       )}
 
       {dragging && <DragIndicator />}
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
index 34011bf85c0..18710530990 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
@@ -5,9 +5,5 @@
     justify-content: flex-end;
     flex-grow: 1;
     display: flex;
-
-    button: {
-      outline: none;
-    }
   }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
index b82b530f9a6..72d1b5e0a79 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
@@ -10,7 +10,11 @@ import React from 'react';
 
 import './ToolbarForMobile.scss';
 
-export const ToolbarForMobile = () => {
+type ToolbarForMobileProps = Readonly<{
+  onSubmit?: () => void;
+}>;
+
+export const ToolbarForMobile = (props: ToolbarForMobileProps) => {
   return (
     <div className="ToolbarForMobile">
       <div className="mdxeditor-block-type-select">
@@ -23,7 +27,7 @@ export const ToolbarForMobile = () => {
       <Separator />
       <InsertImage />
       <div className="end">
-        <button>➤</button>
+        <button onClick={() => props.onSubmit?.()}>➤</button>
       </div>
     </div>
   );
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
index b5a72bbe476..9e8f472bbb4 100644
--- a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -2,5 +2,11 @@ import React from 'react';
 import Editor from 'views/components/Editor';
 
 export const EditorPage = () => {
-  return <Editor mode={'mobile'} imageHandler="local" />;
+  return (
+    <Editor
+      mode={'mobile'}
+      imageHandler="local"
+      onSubmit={(markdown) => console.log('markdown: \n' + markdown)}
+    />
+  );
 };

From 778dfd08bcb032f930167bed09fd43d165b1fa4d Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:33:18 -0700
Subject: [PATCH 21/42] changed the layout for desktop + mobile.

---
 .../scripts/views/components/Editor/Editor.scss    |  2 +-
 .../Editor/toolbars/ToolbarForDesktop.scss         |  4 ++++
 .../Editor/toolbars/ToolbarForDesktop.tsx          |  6 ++++--
 .../Editor/toolbars/ToolbarForMobile.scss          |  4 ++++
 .../scripts/views/pages/EditorPage/EditorPage.tsx  | 14 +++++++++++++-
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index 4734b317f91..d66fc39ceaf 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -37,7 +37,7 @@ body,
 
     position: initial;
     top: initial;
-    height: 65px;
+    //height: 65px;
   }
 
   .cm-gutters {
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss
new file mode 100644
index 00000000000..286d78e929a
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss
@@ -0,0 +1,4 @@
+.ToolbarForDesktop {
+  display: flex;
+  flex-grow: 1;
+}
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
index aa050c0b208..bc1941291c5 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
@@ -11,9 +11,11 @@ import {
 } from 'commonwealth-mdxeditor';
 import React from 'react';
 
+import './ToolbarForDesktop.scss';
+
 export const ToolbarForDesktop = () => {
   return (
-    <>
+    <div className="ToolbarForDesktop">
       <div className="mdxeditor-block-type-select">
         <BlockTypeSelect />
       </div>
@@ -28,6 +30,6 @@ export const ToolbarForDesktop = () => {
       <InsertImage />
       <InsertCodeBlock />
       <InsertTable />
-    </>
+    </div>
   );
 };
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
index 18710530990..03f79736f92 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.scss
@@ -6,4 +6,8 @@
     flex-grow: 1;
     display: flex;
   }
+
+  .mdxeditor-toolbar {
+    height: inherit !important;
+  }
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
index 9e8f472bbb4..741629c41af 100644
--- a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -1,10 +1,22 @@
 import React from 'react';
+import { useSearchParams } from 'react-router-dom';
 import Editor from 'views/components/Editor';
+import { EditorMode } from 'views/components/Editor/Editor';
+
+function useParams() {
+  const [searchParams] = useSearchParams();
+  const mode = searchParams.get('mode') ?? 'desktop';
+  return {
+    mode: mode as EditorMode,
+  };
+}
 
 export const EditorPage = () => {
+  const { mode } = useParams();
+
   return (
     <Editor
-      mode={'mobile'}
+      mode={mode}
       imageHandler="local"
       onSubmit={(markdown) => console.log('markdown: \n' + markdown)}
     />

From da694d139b71dcbd5afb9f567cefd38a05bdbf59 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 15:36:44 -0700
Subject: [PATCH 22/42] ability to change the mode...

---
 .../client/scripts/views/pages/EditorPage/EditorPage.tsx       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
index 741629c41af..1c8f377861a 100644
--- a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -11,6 +11,9 @@ function useParams() {
   };
 }
 
+/**
+ * Basic demo page that allows us to use either mode and to log the markdown.
+ */
 export const EditorPage = () => {
   const { mode } = useParams();
 

From 9f61f44393df5ae72b6ef369ac699e6b503bfe3e Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 16:05:14 -0700
Subject: [PATCH 23/42] CSS layout for desktop mode. Mobile needs work next

---
 .../views/components/Editor/Editor.scss       | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index d66fc39ceaf..173bb3303bb 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -18,8 +18,24 @@ body,
   display: none;
 }
 
+.mdxeditor-container-mode-mobile {
+  .mdxeditor {
+    flex-grow: 1;
+  }
+}
+
+.mdxeditor-container-mode-desktop {
+  .mdxeditor-root-contenteditable {
+    min-height: 150px;
+    max-height: 450px;
+  }
+
+  .mdxeditor-toolbar {
+    height: 45px !important;
+  }
+}
+
 .mdxeditor {
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
 
@@ -37,7 +53,6 @@ body,
 
     position: initial;
     top: initial;
-    //height: 65px;
   }
 
   .cm-gutters {

From 2a50a1befa9d1a9b32ac01d8570cb79bc4f68e7d Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 16:17:41 -0700
Subject: [PATCH 24/42] Fixed the mobile layout

---
 .../client/scripts/views/components/Editor/Editor.scss     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index 173bb3303bb..72b663ed896 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -4,7 +4,7 @@ html,
 body,
 #root {
   max-height: 100vh;
-  overflow: auto;
+  //overflow: auto;
 }
 
 #root {
@@ -21,6 +21,11 @@ body,
 .mdxeditor-container-mode-mobile {
   .mdxeditor {
     flex-grow: 1;
+    overflow: auto;
+  }
+
+  .mdxeditor-toolbar {
+    min-height: 45px !important;
   }
 }
 

From ecb55d6705001be811a5f4067f6647eeb924f158 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Thu, 5 Sep 2024 16:24:43 -0700
Subject: [PATCH 25/42] cleanup...

---
 .../scripts/views/components/Editor/Editor.tsx       |  4 ++--
 .../views/components/Editor/markdown/supported.md    | 12 ++++++++++++
 .../scripts/views/pages/EditorPage/EditorPage.tsx    |  3 +++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index b21f9038c07..a545a845033 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -26,7 +26,6 @@ import { notifyError } from 'controllers/app/notifications';
 import { DesktopEditorFooter } from './DesktopEditorFooter';
 import { DragIndicator } from './indicators/DragIndicator';
 import { UploadIndicator } from './indicators/UploadIndicator';
-import supported from './markdown/supported.md?raw';
 import { ToolbarForDesktop } from './toolbars/ToolbarForDesktop';
 import { ToolbarForMobile } from './toolbars/ToolbarForMobile';
 import { useEditorErrorHandler } from './useEditorErrorHandler';
@@ -49,6 +48,7 @@ export type ImageHandler = 'S3' | 'local' | 'failure';
 export type MarkdownStr = string;
 
 type EditorProps = {
+  readonly markdown?: MarkdownStr;
   readonly mode?: EditorMode;
   readonly placeholder?: string;
   readonly imageHandler?: ImageHandler;
@@ -216,7 +216,7 @@ export const Editor = memo(function Editor(props: EditorProps) {
       <MDXEditor
         onError={errorHandler}
         ref={mdxEditorRef}
-        markdown={supported}
+        markdown={props.markdown ?? ''}
         placeholder={placeholder}
         iconComponentFor={iconComponentFor}
         translation={editorTranslator}
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md b/packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md
index 61f35ced46b..89772fe41fc 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md
+++ b/packages/commonwealth/client/scripts/views/components/Editor/markdown/supported.md
@@ -1,5 +1,17 @@
 # Example of all supported markdown features
 
+This is a basic demo of the markdown editor.
+
+You can append to the URL ```?mode=desktop``` or ```?mode=mobile``` to test out a specific mode.
+
+The mobile version works in a desktop browser but should really only be run inside a real mobile browser when verifying functionality.
+
+When you hit submit, it will print the markdown to the console.
+
+Image uploads are local and do not go to S3 to avoid polluting our S3 bucket.
+
+# Markdown Rendering Tests
+
 This just tests all the major markdown features we want to support.
 
 # Header 1
diff --git a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
index 1c8f377861a..52a97ba21db 100644
--- a/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/EditorPage/EditorPage.tsx
@@ -3,6 +3,8 @@ import { useSearchParams } from 'react-router-dom';
 import Editor from 'views/components/Editor';
 import { EditorMode } from 'views/components/Editor/Editor';
 
+import supported from 'views/components/Editor/markdown/supported.md?raw';
+
 function useParams() {
   const [searchParams] = useSearchParams();
   const mode = searchParams.get('mode') ?? 'desktop';
@@ -19,6 +21,7 @@ export const EditorPage = () => {
 
   return (
     <Editor
+      markdown={supported}
       mode={mode}
       imageHandler="local"
       onSubmit={(markdown) => console.log('markdown: \n' + markdown)}

From 4077c88d5514992e7797125ee419a1ba92d65014 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 09:07:03 -0700
Subject: [PATCH 26/42] - cleanup imports. - removed commented out component

---
 .../client/scripts/views/components/Editor/Editor.tsx    | 9 ++++-----
 .../components/Editor/toolbars/ToolbarForDesktop.tsx     | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index a545a845033..64a100c55f0 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import {
   codeBlockPlugin,
   codeMirrorPlugin,
@@ -16,13 +17,9 @@ import {
   thematicBreakPlugin,
   toolbarPlugin,
 } from 'commonwealth-mdxeditor';
-import React, { memo, useCallback, useRef, useState } from 'react';
-
-import './Editor.scss';
-
-import clsx from 'clsx';
 import 'commonwealth-mdxeditor/style.css';
 import { notifyError } from 'controllers/app/notifications';
+import React, { memo, useCallback, useRef, useState } from 'react';
 import { DesktopEditorFooter } from './DesktopEditorFooter';
 import { DragIndicator } from './indicators/DragIndicator';
 import { UploadIndicator } from './indicators/UploadIndicator';
@@ -36,6 +33,8 @@ import { editorTranslator } from './utils/editorTranslator';
 import { fileToText } from './utils/fileToText';
 import { iconComponentFor } from './utils/iconComponentFor';
 
+import './Editor.scss';
+
 export type ImageURL = string;
 
 export type EditorMode = 'desktop' | 'mobile';
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
index bc1941291c5..f729dcaba9d 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
@@ -19,7 +19,6 @@ export const ToolbarForDesktop = () => {
       <div className="mdxeditor-block-type-select">
         <BlockTypeSelect />
       </div>
-      {/*<UndoRedo />*/}
       <BoldItalicUnderlineToggles />
       <Separator />
       <StrikeThroughSupSubToggles />

From 370281f6611b927effaca1a2013206578d7ffef3 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 09:43:45 -0700
Subject: [PATCH 27/42] docs.

---
 .../views/components/Editor/Editor.tsx        | 18 ++++++++++++++-
 .../views/components/Editor/README. md        | 22 ++++++++++++++-----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index 64a100c55f0..be060f4a15d 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -46,6 +46,10 @@ export type ImageHandler = 'S3' | 'local' | 'failure';
  */
 export type MarkdownStr = string;
 
+export type UpdateContentStrategy = 'insert' | 'replace'
+
+export let DEFAULT_UPDATE_CONTENT_STRATEGY: UpdateContentStrategy = 'insert';
+
 type EditorProps = {
   readonly markdown?: MarkdownStr;
   readonly mode?: EditorMode;
@@ -90,7 +94,19 @@ export const Editor = memo(function Editor(props: EditorProps) {
     }
 
     const text = await fileToText(file);
-    mdxEditorRef.current?.setMarkdown(text);
+
+    switch (DEFAULT_UPDATE_CONTENT_STRATEGY) {
+
+      case "insert":
+        mdxEditorRef.current?.insertMarkdown(text);
+        break;
+
+      case "replace":
+        mdxEditorRef.current?.setMarkdown(text);
+        break;
+
+    }
+
   }, []);
 
   const handleImportMarkdown = useCallback(
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/README. md b/packages/commonwealth/client/scripts/views/components/Editor/README. md
index 3de4f5a1eb0..0b26b72f350 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/README. md	
+++ b/packages/commonwealth/client/scripts/views/components/Editor/README. md	
@@ -1,15 +1,27 @@
-This is currently using the commonwealth-mdxeditor which is a fork of the
-mdeditor package.
+# Overview
+
+Markdown Editor based on MDXEditor customized for our usage.
+
+It supports desktop and mobile mode.
+
+In desktop mode the UI is responsive and uses a static layout so it can
+operate within the flow of a regular document.
+
+In mobile mode it docks the toolbar above the keyboard.
+
+# Fork
+
+This is currently using the commonwealth-mdxeditor, which is a fork of the
+mdx-editor package.
 
 This is just temporary as I plan on merging this into the main MDXEditor when
 we are done.
 
-Then we can switch over to the real one.
+Right now the only change is a 'location' property added to the toolbar code
+so that we can place the toolbar below the editor.
 
 # Testing
 
-
-
 - success: copy a .md file to the clipboard, try to paste it into the editor. It
   should replace the editor contents.
 

From 0c4650c88c6915a876da9b1c5ec850c2f8ef3662 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 09:51:50 -0700
Subject: [PATCH 28/42] implemented insert/replace.

---
 .../client/scripts/views/components/Editor/Editor.tsx    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index be060f4a15d..b9ab48335fb 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -46,7 +46,7 @@ export type ImageHandler = 'S3' | 'local' | 'failure';
  */
 export type MarkdownStr = string;
 
-export type UpdateContentStrategy = 'insert' | 'replace'
+export type UpdateContentStrategy = 'insert' | 'replace';
 
 export let DEFAULT_UPDATE_CONTENT_STRATEGY: UpdateContentStrategy = 'insert';
 
@@ -96,17 +96,14 @@ export const Editor = memo(function Editor(props: EditorProps) {
     const text = await fileToText(file);
 
     switch (DEFAULT_UPDATE_CONTENT_STRATEGY) {
-
-      case "insert":
+      case 'insert':
         mdxEditorRef.current?.insertMarkdown(text);
         break;
 
-      case "replace":
+      case 'replace':
         mdxEditorRef.current?.setMarkdown(text);
         break;
-
     }
-
   }, []);
 
   const handleImportMarkdown = useCallback(

From daa9eb0f836c1fb157970c111ad3c3f999239c60 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 10:47:30 -0700
Subject: [PATCH 29/42] upload indicators don't cause any issue.

---
 .../components/Editor/indicators/UploadIndicator.scss  | 10 ++++++++--
 .../components/Editor/indicators/UploadIndicator.tsx   |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
index dc2408435b8..355c6e2ab2a 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
@@ -1,16 +1,22 @@
 @import '../../../../../styles/shared';
 
 .UploadIndicator {
+  // cover the parent
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 10;
-  background-color: $neutral-600;
+
+  // set the background color to grey-ish so that we can indicate something
+  // is 'muted' here.
+  background-color: rgba(128, 128, 128, 0.2);
+
+  // needed so that the .inner progress indicator can be centered
   display: flex;
 
   .inner {
+    // center the contnts
     margin: auto auto;
   }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
index bd3273c779e..e50e441cbdd 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
@@ -7,7 +7,7 @@ export const UploadIndicator = () => {
   return (
     <div className="UploadIndicator">
       <div className="inner">
-        <CWCircleRingSpinner />
+        <CWCircleRingSpinner size="xxl" />
       </div>
     </div>
   );

From 57f57727440f7da1fc30c335e83ce8bc6efc2982 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 10:54:47 -0700
Subject: [PATCH 30/42] fixed layout now...

---
 .../views/components/Editor/Editor.scss       |  10 +-
 .../views/components/Editor/Editor.tsx        | 108 +++++++++---------
 .../Editor/indicators/UploadIndicator.scss    |   4 +
 3 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index 72b663ed896..989c15eda4b 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -40,13 +40,19 @@ body,
   }
 }
 
-.mdxeditor {
+.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
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index b9ab48335fb..de79d4252c8 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -214,61 +214,63 @@ export const Editor = memo(function Editor(props: EditorProps) {
   }, [onSubmit]);
 
   return (
-    <div
-      className={clsx(
-        'mdxeditor-container',
-        'mdxeditor-container-mode-' + mode,
-      )}
-      onDrop={handleDrop}
-      onDragEnter={handleDragEnter}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onPaste={(event) => handlePaste(event)}
-    >
-      <MDXEditor
-        onError={errorHandler}
-        ref={mdxEditorRef}
-        markdown={props.markdown ?? ''}
-        placeholder={placeholder}
-        iconComponentFor={iconComponentFor}
-        translation={editorTranslator}
-        plugins={[
-          toolbarPlugin({
-            location: mode === 'mobile' ? 'bottom' : 'top',
-            toolbarContents: () =>
-              mode === 'mobile' ? (
-                <ToolbarForMobile onSubmit={handleSubmit} />
-              ) : (
-                <ToolbarForDesktop />
-              ),
-          }),
-          listsPlugin(),
-          quotePlugin(),
-          headingsPlugin(),
-          linkPlugin(),
-          linkDialogPlugin(),
-          codeBlockPlugin({ defaultCodeBlockLanguage: 'js' }),
-          codeMirrorPlugin({
-            codeBlockLanguages,
-          }),
-          imagePlugin({ imageUploadHandler }),
-          tablePlugin(),
-          thematicBreakPlugin(),
-          frontmatterPlugin(),
-          diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
-          markdownShortcutPlugin(),
-        ]}
-      />
-
-      {mode === 'desktop' && (
-        <DesktopEditorFooter
-          onImportMarkdown={handleImportMarkdown}
-          onSubmit={handleSubmit}
+    <div className={clsx('mdxeditor-parent', 'mdxeditor-parent-mode-' + mode)}>
+      <div
+        className={clsx(
+          'mdxeditor-container',
+          'mdxeditor-container-mode-' + mode,
+        )}
+        onDrop={handleDrop}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onPaste={(event) => handlePaste(event)}
+      >
+        <MDXEditor
+          onError={errorHandler}
+          ref={mdxEditorRef}
+          markdown={props.markdown ?? ''}
+          placeholder={placeholder}
+          iconComponentFor={iconComponentFor}
+          translation={editorTranslator}
+          plugins={[
+            toolbarPlugin({
+              location: mode === 'mobile' ? 'bottom' : 'top',
+              toolbarContents: () =>
+                mode === 'mobile' ? (
+                  <ToolbarForMobile onSubmit={handleSubmit} />
+                ) : (
+                  <ToolbarForDesktop />
+                ),
+            }),
+            listsPlugin(),
+            quotePlugin(),
+            headingsPlugin(),
+            linkPlugin(),
+            linkDialogPlugin(),
+            codeBlockPlugin({ defaultCodeBlockLanguage: 'js' }),
+            codeMirrorPlugin({
+              codeBlockLanguages,
+            }),
+            imagePlugin({ imageUploadHandler }),
+            tablePlugin(),
+            thematicBreakPlugin(),
+            frontmatterPlugin(),
+            diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
+            markdownShortcutPlugin(),
+          ]}
         />
-      )}
 
-      {dragging && <DragIndicator />}
-      {uploading && <UploadIndicator />}
+        {mode === 'desktop' && (
+          <DesktopEditorFooter
+            onImportMarkdown={handleImportMarkdown}
+            onSubmit={handleSubmit}
+          />
+        )}
+
+        {dragging && <DragIndicator />}
+        {uploading && <UploadIndicator />}
+      </div>
     </div>
   );
 });
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
index 355c6e2ab2a..846c1d0e0c3 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
@@ -8,6 +8,10 @@
   width: 100%;
   height: 100%;
 
+  // the z-index is needed because the 'select' in MDXEditor has its own z-index
+  // which we have to sit on top of.
+  z-index: 10;
+
   // set the background color to grey-ish so that we can indicate something
   // is 'muted' here.
   background-color: rgba(128, 128, 128, 0.2);

From 2cf0cf7612256b7f1d51cc6e939e0bb637b2c403 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 10:58:30 -0700
Subject: [PATCH 31/42] cleanup the first indicator.

---
 .../{UploadIndicator.scss => Indicator.scss}      |  2 +-
 .../components/Editor/indicators/Indicator.tsx    | 15 +++++++++++++++
 .../Editor/indicators/UploadIndicator.tsx         | 10 ++++------
 3 files changed, 20 insertions(+), 7 deletions(-)
 rename packages/commonwealth/client/scripts/views/components/Editor/indicators/{UploadIndicator.scss => Indicator.scss} (96%)
 create mode 100644 packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
similarity index 96%
rename from packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
rename to packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
index 846c1d0e0c3..3c8bb000845 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
@@ -1,6 +1,6 @@
 @import '../../../../../styles/shared';
 
-.UploadIndicator {
+.Indicator {
   // cover the parent
   position: absolute;
   top: 0;
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx
new file mode 100644
index 00000000000..214408e9d62
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+import './Indicator.scss';
+
+export type IndicatorProps = Readonly<{
+  children: ReactNode;
+}>;
+
+export const Indicator = (props: IndicatorProps) => {
+  return (
+    <div className="Indicator">
+      <div className="inner">{props.children}</div>
+    </div>
+  );
+};
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
index e50e441cbdd..af8d2fe42f5 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/UploadIndicator.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 
 import CWCircleRingSpinner from 'views/components/component_kit/new_designs/CWCircleRingSpinner';
-import './UploadIndicator.scss';
+import { Indicator } from 'views/components/Editor/indicators/Indicator';
 
 export const UploadIndicator = () => {
   return (
-    <div className="UploadIndicator">
-      <div className="inner">
-        <CWCircleRingSpinner size="xxl" />
-      </div>
-    </div>
+    <Indicator>
+      <CWCircleRingSpinner size="xxl" />
+    </Indicator>
   );
 };

From d7279fd4707914a59bfcec3cfeafd9587af4e05d Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:02:06 -0700
Subject: [PATCH 32/42] cleanup of indicators and icon for cloud upload.

---
 .../components/Editor/indicators/DragIndicator.scss   | 11 -----------
 .../components/Editor/indicators/DragIndicator.tsx    |  9 +++++++--
 .../component_kit/cw_icons/cw_icon_lookup.ts          |  2 ++
 3 files changed, 9 insertions(+), 13 deletions(-)
 delete mode 100644 packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss
deleted file mode 100644
index 54b1a2ff829..00000000000
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../../../../../styles/shared';
-
-.DragIndicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background-color: $neutral-600;
-}
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx
index e52511d1e22..6267c56ac2a 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/DragIndicator.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 
-import './DragIndicator.scss';
+import { Indicator } from 'views/components/Editor/indicators/Indicator';
+import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
 
 export const DragIndicator = () => {
-  return <div className="DragIndicator"></div>;
+  return (
+    <Indicator>
+      <CWIcon iconName="cloudArrowUp" iconSize="xxl" />
+    </Indicator>
+  );
 };
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts b/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
index 6ba20a47490..31a63a00949 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
@@ -25,6 +25,7 @@ import {
   CircleNotch,
   CirclesThreePlus,
   ClockCounterClockwise,
+  CloudArrowUp,
   Code,
   Coins,
   Compass,
@@ -100,6 +101,7 @@ export const iconLookup = {
   h3: withPhosphorIcon(TextHThree),
   quotes: withPhosphorIcon(Quotes),
   table: withPhosphorIcon(Table),
+  cloudArrowUp: withPhosphorIcon(CloudArrowUp),
   archiveTrayFilled: Icons.CWArchiveTrayFilled,
   arrowDownBlue500: Icons.CWArrowDownBlue500,
   arrowFatUp: Icons.CWArrowFatUp,

From 10164bf15b496a596addb1897749c9ee48f6698b Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:10:36 -0700
Subject: [PATCH 33/42] was missing a flex-grow

---
 .../client/scripts/views/components/Editor/Editor.scss        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index 989c15eda4b..581e2fcbe2d 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -40,6 +40,10 @@ body,
   }
 }
 
+.mdxeditor-parent {
+  flex-grow: 1;
+}
+
 .mdxeditor-parent-mode-mobile {
   display: flex;
 }

From 50d0b5aa727f2d22393c6a6915226685d0364001 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:12:46 -0700
Subject: [PATCH 34/42] conditional bar works now...

---
 .../Editor/toolbars/ToolbarForDesktop.tsx     | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
index f729dcaba9d..bb19185ce35 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.tsx
@@ -1,6 +1,8 @@
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
+  ChangeCodeMirrorLanguage,
+  ConditionalContents,
   CreateLink,
   InsertCodeBlock,
   InsertImage,
@@ -16,19 +18,33 @@ import './ToolbarForDesktop.scss';
 export const ToolbarForDesktop = () => {
   return (
     <div className="ToolbarForDesktop">
-      <div className="mdxeditor-block-type-select">
-        <BlockTypeSelect />
-      </div>
-      <BoldItalicUnderlineToggles />
-      <Separator />
-      <StrikeThroughSupSubToggles />
-      <Separator />
-      <ListsToggle />
-      <Separator />
-      <CreateLink />
-      <InsertImage />
-      <InsertCodeBlock />
-      <InsertTable />
+      <ConditionalContents
+        options={[
+          {
+            when: (editor) => editor?.editorType === 'codeblock',
+            contents: () => <ChangeCodeMirrorLanguage />,
+          },
+          {
+            fallback: () => (
+              <>
+                <div className="mdxeditor-block-type-select">
+                  <BlockTypeSelect />
+                </div>
+                <BoldItalicUnderlineToggles />
+                <Separator />
+                <StrikeThroughSupSubToggles />
+                <Separator />
+                <ListsToggle />
+                <Separator />
+                <CreateLink />
+                <InsertImage />
+                <InsertCodeBlock />
+                <InsertTable />
+              </>
+            ),
+          },
+        ]}
+      />
     </div>
   );
 };

From 17b57c55fa7c3fe694bc32d38830d84ef74a027b Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:34:50 -0700
Subject: [PATCH 35/42] cleanup for eslint issues.

---
 .../views/components/Editor/Editor.tsx        | 32 +++++++++++--------
 .../Editor/indicators/Indicator.tsx           |  3 +-
 .../Editor/toolbars/ToolbarForMobile.tsx      |  4 ++-
 .../useImageUploadHandlerWithFailure.ts       |  2 +-
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index de79d4252c8..705b7fcdca1 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -48,7 +48,8 @@ export type MarkdownStr = string;
 
 export type UpdateContentStrategy = 'insert' | 'replace';
 
-export let DEFAULT_UPDATE_CONTENT_STRATEGY: UpdateContentStrategy = 'insert';
+export const DEFAULT_UPDATE_CONTENT_STRATEGY =
+  'insert' as UpdateContentStrategy;
 
 type EditorProps = {
   readonly markdown?: MarkdownStr;
@@ -117,22 +118,25 @@ export const Editor = memo(function Editor(props: EditorProps) {
     [handleFile],
   );
 
-  const handleFiles = useCallback(async (files: FileList) => {
-    if (files.length === 1) {
-      const file = files[0];
+  const handleFiles = useCallback(
+    async (files: FileList) => {
+      if (files.length === 1) {
+        const file = files[0];
 
-      if (canAcceptFileForImport(file)) {
-        await handleFile(file);
-      } else {
-        notifyError('File not markdown. Has invalid type: ' + file.type);
+        if (canAcceptFileForImport(file)) {
+          await handleFile(file);
+        } else {
+          notifyError('File not markdown. Has invalid type: ' + file.type);
+        }
       }
-    }
 
-    if (files.length > 1) {
-      notifyError('Too many files given');
-      return;
-    }
-  }, []);
+      if (files.length > 1) {
+        notifyError('Too many files given');
+        return;
+      }
+    },
+    [handleFile],
+  );
 
   const handleDropAsync = useCallback(
     async (event: React.DragEvent) => {
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx
index 214408e9d62..6a4ef4f3f19 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.tsx
@@ -7,9 +7,10 @@ export type IndicatorProps = Readonly<{
 }>;
 
 export const Indicator = (props: IndicatorProps) => {
+  const { children } = props;
   return (
     <div className="Indicator">
-      <div className="inner">{props.children}</div>
+      <div className="inner">{children}</div>
     </div>
   );
 };
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
index 72d1b5e0a79..bed706f90f4 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForMobile.tsx
@@ -15,6 +15,8 @@ type ToolbarForMobileProps = Readonly<{
 }>;
 
 export const ToolbarForMobile = (props: ToolbarForMobileProps) => {
+  const { onSubmit } = props;
+
   return (
     <div className="ToolbarForMobile">
       <div className="mdxeditor-block-type-select">
@@ -27,7 +29,7 @@ export const ToolbarForMobile = (props: ToolbarForMobileProps) => {
       <Separator />
       <InsertImage />
       <div className="end">
-        <button onClick={() => props.onSubmit?.()}>➤</button>
+        <button onClick={() => onSubmit?.()}>➤</button>
       </div>
     </div>
   );
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts
index 51aec5a3e1c..8c60d081d89 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts
+++ b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandlerWithFailure.ts
@@ -5,7 +5,7 @@ import { useCallback } from 'react';
  * Fake image upload handler that just fails
  */
 export function useImageUploadHandlerWithFailure() {
-  return useCallback(async (file: File) => {
+  return useCallback(async () => {
     await delay(1000);
     throw new Error('Image upload failed successfully.');
   }, []);

From 548511e39f49fa52be58039e371c3dc3b87480a7 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:36:32 -0700
Subject: [PATCH 36/42] ...

---
 .../client/scripts/views/components/Editor/Editor.tsx        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index 705b7fcdca1..ec7eb43f90c 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -48,6 +48,11 @@ export type MarkdownStr = string;
 
 export type UpdateContentStrategy = 'insert' | 'replace';
 
+/**
+ * Allows us to easily set the strategy back to replace but I suspect we will
+ * have insert used for some things and replace used for others.  File uploads
+ * seem like they should be 'replace'
+ */
 export const DEFAULT_UPDATE_CONTENT_STRATEGY =
   'insert' as UpdateContentStrategy;
 

From 0ddf8bacc466cbaaff45dfaafee7db9bf8eaaf86 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 11:56:15 -0700
Subject: [PATCH 37/42] Fixed compilation error.

---
 .../scripts/views/components/Editor/useImageUploadHandler.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
index b3d17b5c066..ecb1053ff58 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
+++ b/packages/commonwealth/client/scripts/views/components/Editor/useImageUploadHandler.ts
@@ -23,7 +23,7 @@ export function useImageUploadHandler(imageHandler: ImageHandler) {
           case 'local':
             return await imageUploadHandlerDelegateLocal(file);
           case 'failure':
-            return await imageUploadHandlerDelegateWithFailure(file);
+            return await imageUploadHandlerDelegateWithFailure();
         }
       } catch (e) {
         notifyError('Failed to upload image: ' + e.message);

From 87fc05063af4e915cc245313de68e0fdf4d0ab51 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Fri, 6 Sep 2024 12:14:44 -0700
Subject: [PATCH 38/42] README test instructions.

---
 .../Editor/DesktopEditorFooter.scss           |  2 ++
 .../views/components/Editor/README. md        | 24 +++++++++++++++++--
 .../Editor/toolbars/ToolbarForDesktop.scss    |  1 +
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss b/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss
index 62ecafcc215..4eb24fd67a1 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/DesktopEditorFooter.scss
@@ -6,6 +6,8 @@
   display: flex;
   padding: 8px;
 
+  user-select: none;
+
   .Item {
     display: flex;
     margin-top: auto;
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/README. md b/packages/commonwealth/client/scripts/views/components/Editor/README. md
index 0b26b72f350..a4f4a3e8d96 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/README. md	
+++ b/packages/commonwealth/client/scripts/views/components/Editor/README. md	
@@ -22,9 +22,29 @@ so that we can place the toolbar below the editor.
 
 # Testing
 
+## Desktop
+
 - success: copy a .md file to the clipboard, try to paste it into the editor. It
-  should replace the editor contents.
+  should insert the content at the editor's cursor
+
+- success: drag a .md file on top of the editor.  The drag indicator should show
+  up and cover the editor while you're dragging.
+
+- success: use the 'Import markdown' button to upload a file.
 
 - failure: copy multiple .md files ot the clipboard, try to paste into the editor.
   It should fail because we can't handle multiple .md files
-- success: drag a
+
+- success: right click on an image in the browser, try to paste it into the editor.
+
+- success: take a screenshot, try to paste it into the editor. The upload
+  indicator should show up.
+
+- success: use the image button at the top to manually upload an image. The
+  upload indicator should show up while this is happening.
+
+## Mobile
+
+- The toolbar should be present at the bottom of the UI.
+
+
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss
index 286d78e929a..5b33f4e618b 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/toolbars/ToolbarForDesktop.scss
@@ -1,4 +1,5 @@
 .ToolbarForDesktop {
   display: flex;
   flex-grow: 1;
+  user-select: none;
 }

From 904376d017f20adcafdbc2369de8422f5063bf52 Mon Sep 17 00:00:00 2001
From: rotorsoft <rotorsoft@outlook.com>
Date: Mon, 9 Sep 2024 10:40:17 -0400
Subject: [PATCH 39/42] use auth guards

---
 .../src/comment/CreateComment.command.ts      | 18 ++-------
 .../comment/CreateCommentReaction.command.ts  | 24 ++---------
 .../src/comment/UpdateComment.command.ts      | 21 ++++------
 .../UpdateCommunity.command.sample.ts         | 31 --------------
 libs/model/src/middleware/guards.ts           | 40 +++++++++++++++++++
 libs/model/src/thread/CreateThread.command.ts | 16 ++------
 .../thread/CreateThreadReaction.command.ts    | 19 ++-------
 libs/schemas/src/commands/comment.schemas.ts  |  3 ++
 .../src/discord-consumer/handlers.ts          |  4 +-
 9 files changed, 68 insertions(+), 108 deletions(-)
 delete mode 100644 libs/model/src/community/UpdateCommunity.command.sample.ts

diff --git a/libs/model/src/comment/CreateComment.command.ts b/libs/model/src/comment/CreateComment.command.ts
index 65a9ce21732..c0d88853af6 100644
--- a/libs/model/src/comment/CreateComment.command.ts
+++ b/libs/model/src/comment/CreateComment.command.ts
@@ -3,7 +3,7 @@ import * as schemas from '@hicommonwealth/schemas';
 import { models } from '../database';
 import { isAuthorized, type AuthContext } from '../middleware';
 import { verifyCommentSignature } from '../middleware/canvas';
-import { mustExist } from '../middleware/guards';
+import { mustBeAuthorizedThread, mustExist } from '../middleware/guards';
 import {
   emitEvent,
   emitMentions,
@@ -32,25 +32,15 @@ export function CreateComment(): Command<
       isAuthorized({ action: schemas.PermissionEnum.CREATE_COMMENT }),
       verifyCommentSignature,
     ],
-    body: async ({ actor, payload }) => {
-      const { thread_id, parent_id, ...rest } = payload;
+    body: async ({ actor, payload, auth }) => {
+      const { address, thread } = mustBeAuthorizedThread(actor, auth);
 
-      const thread = await models.Thread.findOne({ where: { id: thread_id } });
-      mustExist('Thread', thread);
       if (thread.read_only)
         throw new InvalidState(CreateCommentErrors.CantCommentOnReadOnly);
       if (thread.archived_at)
         throw new InvalidState(CreateCommentErrors.ThreadArchived);
 
-      const address = await models.Address.findOne({
-        where: {
-          community_id: thread.community_id,
-          user_id: actor.user.id,
-          address: actor.address,
-        },
-      });
-      mustExist('Community address', address);
-
+      const { thread_id, parent_id, ...rest } = payload;
       if (parent_id) {
         const parent = await models.Comment.findOne({
           where: { id: parent_id, thread_id },
diff --git a/libs/model/src/comment/CreateCommentReaction.command.ts b/libs/model/src/comment/CreateCommentReaction.command.ts
index 8f1f93dbc5e..373d433f611 100644
--- a/libs/model/src/comment/CreateCommentReaction.command.ts
+++ b/libs/model/src/comment/CreateCommentReaction.command.ts
@@ -3,7 +3,7 @@ import * as schemas from '@hicommonwealth/schemas';
 import { models } from '../database';
 import { isAuthorized, type AuthContext } from '../middleware';
 import { verifyReactionSignature } from '../middleware/canvas';
-import { mustExist } from '../middleware/guards';
+import { mustBeAuthorizedComment } from '../middleware/guards';
 import { getVotingWeight } from '../services/stakeHelper';
 
 export function CreateCommentReaction(): Command<
@@ -16,27 +16,9 @@ export function CreateCommentReaction(): Command<
       isAuthorized({ action: schemas.PermissionEnum.CREATE_COMMENT_REACTION }),
       verifyReactionSignature,
     ],
-    body: async ({ actor, payload }) => {
-      const comment = await models.Comment.findOne({
-        where: { id: payload.comment_id },
-        include: [
-          {
-            model: models.Thread,
-            required: true,
-          },
-        ],
-      });
-      mustExist('Comment', comment);
-
+    body: async ({ payload, actor, auth }) => {
+      const { address, comment } = mustBeAuthorizedComment(actor, auth);
       const thread = comment.Thread!;
-      const address = await models.Address.findOne({
-        where: {
-          community_id: thread.community_id,
-          user_id: actor.user.id,
-          address: actor.address,
-        },
-      });
-      mustExist('Community address', address);
 
       const calculated_voting_weight = await getVotingWeight(
         thread.community_id,
diff --git a/libs/model/src/comment/UpdateComment.command.ts b/libs/model/src/comment/UpdateComment.command.ts
index a0e706e1882..d7033940731 100644
--- a/libs/model/src/comment/UpdateComment.command.ts
+++ b/libs/model/src/comment/UpdateComment.command.ts
@@ -1,8 +1,8 @@
-import { type Command } from '@hicommonwealth/core';
+import { InvalidInput, type Command } from '@hicommonwealth/core';
 import * as schemas from '@hicommonwealth/schemas';
 import { models } from '../database';
 import { isAuthorized, type AuthContext } from '../middleware';
-import { mustExist } from '../middleware/guards';
+import { mustBeAuthorized } from '../middleware/guards';
 import {
   emitMentions,
   findMentionDiff,
@@ -19,31 +19,24 @@ export function UpdateComment(): Command<
   return {
     ...schemas.UpdateComment,
     auth: [isAuthorized({})],
-    body: async ({ actor, payload }) => {
+    body: async ({ actor, payload, auth }) => {
+      const { address } = mustBeAuthorized(actor, auth);
       const { comment_id, discord_meta } = payload;
 
+      // find by comment_id or discord_meta
       const comment = await models.Comment.findOne({
         where: comment_id ? { id: comment_id } : { discord_meta },
         include: [{ model: models.Thread, required: true }],
       });
-      mustExist('Comment', comment);
-      const thread = comment.Thread!;
+      if (!comment) throw new InvalidInput('Comment not found');
 
+      const thread = comment.Thread!;
       const currentVersion = await models.CommentVersionHistory.findOne({
         where: { comment_id: comment.id },
         order: [['timestamp', 'DESC']],
       });
 
       if (currentVersion?.text !== payload.text) {
-        const address = await models.Address.findOne({
-          where: {
-            community_id: thread.community_id,
-            user_id: actor.user.id,
-            address: actor.address,
-          },
-        });
-        mustExist('Community address', address);
-
         const text = sanitizeQuillText(payload.text);
         const plaintext = quillToPlain(text);
         const mentions = findMentionDiff(
diff --git a/libs/model/src/community/UpdateCommunity.command.sample.ts b/libs/model/src/community/UpdateCommunity.command.sample.ts
deleted file mode 100644
index 5e66b8587b4..00000000000
--- a/libs/model/src/community/UpdateCommunity.command.sample.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { type Command } from '@hicommonwealth/core';
-import * as schemas from '@hicommonwealth/schemas';
-import { models } from '../database';
-import { mustExist } from '../middleware/guards';
-import { commonProtocol } from '../services';
-
-export function UpdateCommunity(): Command<typeof schemas.UpdateCommunity> {
-  return {
-    ...schemas.UpdateCommunity,
-    auth: [],
-    body: async ({ payload }) => {
-      const community = await models.Community.findOne({
-        where: { id: payload.id },
-      });
-
-      mustExist('Community', community);
-
-      const namespaceAddress =
-        await commonProtocol.newNamespaceValidator.validateNamespace(
-          payload.namespace,
-          payload.txHash,
-          payload.address,
-          community,
-        );
-
-      community.namespace = payload.namespace;
-      community.namespace_address = namespaceAddress;
-      return (await community.save()).get({ plain: true });
-    },
-  };
-}
diff --git a/libs/model/src/middleware/guards.ts b/libs/model/src/middleware/guards.ts
index 1321b5a4c14..8886316b784 100644
--- a/libs/model/src/middleware/guards.ts
+++ b/libs/model/src/middleware/guards.ts
@@ -4,6 +4,8 @@ import {
   InvalidState,
   logger,
 } from '@hicommonwealth/core';
+import { AddressInstance, ThreadInstance } from '../models';
+import { AuthContext } from './authorization';
 
 const log = logger(import.meta);
 
@@ -56,3 +58,41 @@ export function mustBeSuperAdmin(actor: Actor) {
   if (!actor.user.isAdmin)
     throw new InvalidActor(actor, 'Must be super administrator');
 }
+
+/**
+ * Address authorization guard
+ * @param auth auth context
+ * @returns narrowed auth context
+ */
+export function mustBeAuthorized(actor: Actor, auth?: AuthContext) {
+  if (!auth?.address) throw new InvalidActor(actor, 'Not authorized');
+  return auth as AuthContext & { address: AddressInstance };
+}
+
+/**
+ * Thread authorization guard
+ * @param auth auth context
+ * @returns narrowed auth context
+ */
+export function mustBeAuthorizedThread(actor: Actor, auth?: AuthContext) {
+  if (!auth?.address) throw new InvalidActor(actor, 'Not authorized');
+  if (!auth?.thread) throw new InvalidActor(actor, 'Not authorized thread');
+  return auth as AuthContext & {
+    address: AddressInstance;
+    thread: ThreadInstance;
+  };
+}
+
+/**
+ * Comment authorization guard
+ * @param auth auth context
+ * @returns narrowed auth context
+ */
+export function mustBeAuthorizedComment(actor: Actor, auth?: AuthContext) {
+  if (!auth?.address) throw new InvalidActor(actor, 'Not authorized');
+  if (!auth?.comment) throw new InvalidActor(actor, 'Not authorized comment');
+  return auth as AuthContext & {
+    address: AddressInstance;
+    comment: ThreadInstance;
+  };
+}
diff --git a/libs/model/src/thread/CreateThread.command.ts b/libs/model/src/thread/CreateThread.command.ts
index 2893af3c9e3..62101c10fe5 100644
--- a/libs/model/src/thread/CreateThread.command.ts
+++ b/libs/model/src/thread/CreateThread.command.ts
@@ -13,7 +13,7 @@ import { GetActiveContestManagers } from '../contest';
 import { models } from '../database';
 import { isAuthorized, type AuthContext } from '../middleware';
 import { verifyThreadSignature } from '../middleware/canvas';
-import { mustExist } from '../middleware/guards';
+import { mustBeAuthorized } from '../middleware/guards';
 import { tokenBalanceCache } from '../services';
 import {
   emitMentions,
@@ -90,7 +90,9 @@ export function CreateThread(): Command<
       isAuthorized({ action: schemas.PermissionEnum.CREATE_THREAD }),
       verifyThreadSignature,
     ],
-    body: async ({ actor, payload }) => {
+    body: async ({ actor, payload, auth }) => {
+      const { address } = mustBeAuthorized(actor, auth);
+
       const { community_id, topic_id, kind, url, ...rest } = payload;
 
       if (kind === 'link' && !url?.trim())
@@ -109,16 +111,6 @@ export function CreateThread(): Command<
         checkContestLimits(activeContestManagers, actor.address!);
       }
 
-      // Loading to update last_active
-      const address = await models.Address.findOne({
-        where: {
-          user_id: actor.user.id,
-          community_id,
-          address: actor.address,
-        },
-      });
-      mustExist('Community address', address);
-
       const body = sanitizeQuillText(payload.body);
       const plaintext = kind === 'discussion' ? quillToPlain(body) : body;
       const mentions = uniqueMentions(parseUserMentions(body));
diff --git a/libs/model/src/thread/CreateThreadReaction.command.ts b/libs/model/src/thread/CreateThreadReaction.command.ts
index 5718d294d9d..0450433aa1b 100644
--- a/libs/model/src/thread/CreateThreadReaction.command.ts
+++ b/libs/model/src/thread/CreateThreadReaction.command.ts
@@ -3,7 +3,7 @@ import * as schemas from '@hicommonwealth/schemas';
 import { models } from '../database';
 import { isAuthorized, type AuthContext } from '../middleware';
 import { verifyReactionSignature } from '../middleware/canvas';
-import { mustExist } from '../middleware/guards';
+import { mustBeAuthorizedThread } from '../middleware/guards';
 import { getVotingWeight } from '../services/stakeHelper';
 
 export const CreateThreadReactionErrors = {
@@ -22,23 +22,12 @@ export function CreateThreadReaction(): Command<
       }),
       verifyReactionSignature,
     ],
-    body: async ({ actor, payload }) => {
-      const thread = await models.Thread.findOne({
-        where: { id: payload.thread_id },
-      });
-      mustExist('Thread', thread);
+    body: async ({ payload, actor, auth }) => {
+      const { address, thread } = mustBeAuthorizedThread(actor, auth);
+
       if (thread.archived_at)
         throw new InvalidState(CreateThreadReactionErrors.ThreadArchived);
 
-      const address = await models.Address.findOne({
-        where: {
-          user_id: actor.user.id,
-          community_id: thread.community_id,
-          address: actor.address,
-        },
-      });
-      mustExist('Community address', address);
-
       const calculated_voting_weight = await getVotingWeight(
         thread.community_id,
         address.address,
diff --git a/libs/schemas/src/commands/comment.schemas.ts b/libs/schemas/src/commands/comment.schemas.ts
index a3ebbcc8506..813a171833a 100644
--- a/libs/schemas/src/commands/comment.schemas.ts
+++ b/libs/schemas/src/commands/comment.schemas.ts
@@ -21,6 +21,9 @@ export const UpdateComment = {
   input: z.object({
     comment_id: PG_INT,
     text: z.string().trim().min(1),
+
+    // discord integration
+    thread_id: PG_INT.optional(),
     discord_meta: DiscordMetaSchema.optional(),
   }),
   output: Comment.extend({ community_id: z.string() }),
diff --git a/packages/discord-bot/src/discord-consumer/handlers.ts b/packages/discord-bot/src/discord-consumer/handlers.ts
index 2bd9535fff5..7d839a37eb6 100644
--- a/packages/discord-bot/src/discord-consumer/handlers.ts
+++ b/packages/discord-bot/src/discord-consumer/handlers.ts
@@ -88,7 +88,9 @@ export async function handleCommentMessages(
     case 'comment-update':
       await axios.patch(`${bot_path}/threads/${thread.id}/comments`, {
         ...sharedReqData,
-        body: encodeURIComponent(message.content),
+        comment_id: 0, // required in command
+        thread_id: thread.id, // to auth command
+        text: encodeURIComponent(message.content),
       });
       break;
     case 'comment-delete':

From 374b24cbb2074573a5749b4c34dab6afdfdfedec Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Mon, 9 Sep 2024 09:15:22 -0700
Subject: [PATCH 40/42] yanked commented code.

---
 .../client/scripts/views/components/Editor/Editor.scss           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
index 581e2fcbe2d..c97495b46a0 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.scss
@@ -4,7 +4,6 @@ html,
 body,
 #root {
   max-height: 100vh;
-  //overflow: auto;
 }
 
 #root {

From 24818ffa3f857b881c45d2162688bcbb78f66813 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Mon, 9 Sep 2024 10:57:01 -0700
Subject: [PATCH 41/42] dragging should be fixed now.

---
 .../views/components/Editor/Editor.tsx        | 35 ++++++++++++-------
 .../views/components/Editor/README. md        |  3 ++
 .../Editor/indicators/Indicator.scss          |  4 +++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
index ec7eb43f90c..921b158a299 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Editor/Editor.tsx
@@ -81,16 +81,25 @@ export const Editor = memo(function Editor(props: EditorProps) {
 
   const imageUploadHandlerDelegate = useImageUploadHandler(imageHandler);
 
+  /**
+   * When we've stopped dragging, we also need to decrement the drag counter.
+   */
+  const terminateDragging = useCallback(() => {
+    setDragging(false);
+    dragCounterRef.current = 0;
+  }, []);
+
   const imageUploadHandler = useCallback(
     async (file: File) => {
       try {
+        terminateDragging();
         setUploading(true);
         return await imageUploadHandlerDelegate(file);
       } finally {
         setUploading(false);
       }
     },
-    [imageUploadHandlerDelegate],
+    [imageUploadHandlerDelegate, terminateDragging],
   );
 
   const handleFile = useCallback(async (file: File) => {
@@ -148,25 +157,27 @@ export const Editor = memo(function Editor(props: EditorProps) {
       try {
         const files = event.dataTransfer.files;
 
-        if (files.length <= 0) {
-          // for drag and drop... no files is an error.
-          notifyError('No files given');
-          return;
-        }
-
         await handleFiles(files);
       } finally {
-        setDragging(false);
-        dragCounterRef.current = 0;
+        terminateDragging();
       }
     },
-    [handleFiles],
+    [handleFiles, terminateDragging],
   );
 
   const handleDrop = useCallback(
     (event: React.DragEvent) => {
-      event.preventDefault();
-      handleDropAsync(event).catch(console.error);
+      // ONLY handle this if it is markdown, else, allow the default paste
+      // handler to work
+
+      const files = event.dataTransfer.files;
+
+      if (files.length === 1) {
+        if (canAcceptFileForImport(files[0])) {
+          handleDropAsync(event).catch(console.error);
+          event.preventDefault();
+        }
+      }
     },
     [handleDropAsync],
   );
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/README. md b/packages/commonwealth/client/scripts/views/components/Editor/README. md
index a4f4a3e8d96..255ee9d7703 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/README. md	
+++ b/packages/commonwealth/client/scripts/views/components/Editor/README. md	
@@ -43,6 +43,9 @@ so that we can place the toolbar below the editor.
 - success: use the image button at the top to manually upload an image. The
   upload indicator should show up while this is happening.
 
+- success: drop an image file.  Should upload it for us and not handle it as
+  markdown.
+
 ## Mobile
 
 - The toolbar should be present at the bottom of the UI.
diff --git a/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
index 3c8bb000845..6cb8ec9ba0b 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/Editor/indicators/Indicator.scss
@@ -8,6 +8,10 @@
   width: 100%;
   height: 100%;
 
+  // needed so that drag operations don't get hijacked by the indicator which
+  // would prevent dropping images and markdown files into the editor.
+  pointer-events: none;
+
   // the z-index is needed because the 'select' in MDXEditor has its own z-index
   // which we have to sit on top of.
   z-index: 10;

From c620931fec7359679e2a0dbb4eeb69f44657fb90 Mon Sep 17 00:00:00 2001
From: Kevin Burton <burtonator@gmail.com>
Date: Mon, 9 Sep 2024 11:20:34 -0700
Subject: [PATCH 42/42] more README nodes for testing.

---
 .../scripts/views/components/Editor/README. md | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Editor/README. md b/packages/commonwealth/client/scripts/views/components/Editor/README. md
index 255ee9d7703..57df7f53e58 100644
--- a/packages/commonwealth/client/scripts/views/components/Editor/README. md	
+++ b/packages/commonwealth/client/scripts/views/components/Editor/README. md	
@@ -27,15 +27,17 @@ so that we can place the toolbar below the editor.
 - success: copy a .md file to the clipboard, try to paste it into the editor. It
   should insert the content at the editor's cursor
 
+    - this works via a File object (not text) so it's important to test this path.
+
 - success: drag a .md file on top of the editor.  The drag indicator should show
-  up and cover the editor while you're dragging.
+  up and cover the editor while you're dragging.  Then the file should be inserted
+  at the cursor.
 
 - success: use the 'Import markdown' button to upload a file.
 
-- failure: copy multiple .md files ot the clipboard, try to paste into the editor.
-  It should fail because we can't handle multiple .md files
-
-- success: right click on an image in the browser, try to paste it into the editor.
+- success: right click and copy an image in the browser, this should upload it
+to the editor and insert it at the current point (I use msnbc.com for this as
+their images are copyable and not CSS background images)
 
 - success: take a screenshot, try to paste it into the editor. The upload
   indicator should show up.
@@ -46,8 +48,14 @@ so that we can place the toolbar below the editor.
 - success: drop an image file.  Should upload it for us and not handle it as
   markdown.
 
+- failure: copy multiple .md files ot the clipboard, try to paste into the editor.
+  It should fail because we can't handle multiple .md files
+
 ## Mobile
 
+It's probably best to test this on a REAL mobile browser (not on a desktop).
+
 - The toolbar should be present at the bottom of the UI.
 
+- They keyboard should stay on top of the keyboard.