Migrate from react-popper to floating-ui #479

crosshare-org · Apr 1, 2024 · aa34a4a · aa34a4a
1 parent ade20dc
commit aa34a4a
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 962 deletions.
diff --git a/app/__tests__/Markdown.test.tsx b/app/__tests__/Markdown.test.tsx
@@ -514,59 +514,6 @@ test('clueMap rendering', async () => {
       white-space: nowrap;
     }
 
-    .emotion-1 {
-      display: block;
-      z-index: 100000;
-      border-radius: 5px;
-      background-color: var(--black);
-      color: var(--white);
-      text-align: center;
-      max-width: 30em;
-      padding: 10px;
-      visibility: hidden;
-    }
-
-    .emotion-1[data-popper-reference-hidden=true] {
-      visibility: hidden;
-    }
-
-    .emotion-2 {
-      margin-right: 0.5em;
-      white-space: nowrap;
-    }
-
-    .emotion-3 {
-      margin-left: 0.5em;
-      white-space: nowrap;
-    }
-
-    .emotion-4 {
-      display: block;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-    }
-
-    [data-popper-placement^="bottom"] .emotion-4 {
-      top: -5px;
-    }
-
-    [data-popper-placement^="top"] .emotion-4 {
-      bottom: -5px;
-    }
-
-    .emotion-4::after {
-      content: " ";
-      position: absolute;
-      -webkit-transform: rotate(45deg);
-      -moz-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-      width: 10px;
-      height: 10px;
-      background-color: var(--black);
-    }
-
     <div>
       <div>
         <div
@@ -578,33 +525,6 @@ test('clueMap rendering', async () => {
           >
             1A
           </span>
-          <span
-            class="emotion-1"
-            data-popper-escaped="true"
-            data-popper-placement="bottom"
-            data-popper-reference-hidden="true"
-            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-          >
-            <b
-              class="emotion-2"
-            >
-              1
-              A
-            </b>
-            Well now
-            <b
-              class="emotion-3"
-            >
-              [
-              12ACLUE
-              1
-              ]
-            </b>
-            <span
-              class="emotion-4"
-              style="position: absolute; left: 0px; transform: translate(0px, 0px);"
-            />
-          </span>
           , but 
           this 
           <strong>
@@ -664,59 +584,6 @@ test('clueMap rendering', async () => {
       white-space: nowrap;
     }
 
-    .emotion-1 {
-      display: block;
-      z-index: 100000;
-      border-radius: 5px;
-      background-color: var(--black);
-      color: var(--white);
-      text-align: center;
-      max-width: 30em;
-      padding: 10px;
-      visibility: hidden;
-    }
-
-    .emotion-1[data-popper-reference-hidden=true] {
-      visibility: hidden;
-    }
-
-    .emotion-2 {
-      margin-right: 0.5em;
-      white-space: nowrap;
-    }
-
-    .emotion-3 {
-      margin-left: 0.5em;
-      white-space: nowrap;
-    }
-
-    .emotion-4 {
-      display: block;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-    }
-
-    [data-popper-placement^="bottom"] .emotion-4 {
-      top: -5px;
-    }
-
-    [data-popper-placement^="top"] .emotion-4 {
-      bottom: -5px;
-    }
-
-    .emotion-4::after {
-      content: " ";
-      position: absolute;
-      -webkit-transform: rotate(45deg);
-      -moz-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-      width: 10px;
-      height: 10px;
-      background-color: var(--black);
-    }
-
     <div>
       <div>
         <div
@@ -728,66 +595,12 @@ test('clueMap rendering', async () => {
           >
             1A
           </span>
-          <span
-            class="emotion-1"
-            data-popper-escaped="true"
-            data-popper-placement="bottom"
-            data-popper-reference-hidden="true"
-            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-          >
-            <b
-              class="emotion-2"
-            >
-              1
-              A
-            </b>
-            Well now
-            <b
-              class="emotion-3"
-            >
-              [
-              12ACLUE
-              1
-              ]
-            </b>
-            <span
-              class="emotion-4"
-              style="position: absolute; left: 0px; transform: translate(0px, 0px);"
-            />
-          </span>
           ! (
           <span
             class="emotion-0"
           >
             2D
           </span>
-          <span
-            class="emotion-1"
-            data-popper-escaped="true"
-            data-popper-placement="bottom"
-            data-popper-reference-hidden="true"
-            style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-          >
-            <b
-              class="emotion-2"
-            >
-              2
-              D
-            </b>
-            here is the clue?
-            <b
-              class="emotion-3"
-            >
-              [
-              1
-              M
-              ]
-            </b>
-            <span
-              class="emotion-4"
-              style="position: absolute; left: 0px; transform: translate(0px, 0px);"
-            />
-          </span>
           ... not so much)
         </div>
       </div>