fix: 🐛 slash plugin position error when editor size is small

Milkdown · Apr 15, 2022 · d022991 · d022991
1 parent fd841bc
commit d022991
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 102 deletions.
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -7,10 +7,10 @@
         "start": "vite"
     },
     "dependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "@types/react": "^17.0.6",
-        "@types/react-dom": "^17.0.5",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
         "@milkdown/core": "workspace:*",
         "@milkdown/preset-commonmark": "workspace:*",
         "@milkdown/plugin-tooltip": "workspace:*",

diff --git a/examples/vanilla/main.ts b/examples/vanilla/main.ts
@@ -3,6 +3,7 @@ import './style.css';
 
 import { defaultValueCtx, Editor, themeManagerCtx } from '@milkdown/core';
 import { math } from '@milkdown/plugin-math';
+import { slash } from '@milkdown/plugin-slash';
 import { commonmark } from '@milkdown/preset-commonmark';
 import { nord } from '@milkdown/theme-nord';
 import { tokyo } from '@milkdown/theme-tokyo';
@@ -20,6 +21,7 @@ async function main() {
         .use(tokyo)
         .use(commonmark)
         .use(math)
+        .use(slash())
         .create();
 
     await sleep(2000);

diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -11,6 +11,7 @@
         "@milkdown/preset-commonmark": "workspace:*",
         "@milkdown/theme-nord": "workspace:*",
         "@milkdown/theme-tokyo": "workspace:*",
-        "@milkdown/plugin-math": "workspace:*"
+        "@milkdown/plugin-math": "workspace:*",
+        "@milkdown/plugin-slash": "workspace:*"
     }
 }
diff --git a/gh-pages/style.css b/gh-pages/style.css
@@ -54,6 +54,13 @@ body {
         width: 100%;
     }
     transition: all 0.4s ease-in-out;
+
+    .editor {
+        @media only screen and (min-width: 72rem) {
+            max-width: 57.375em;
+            padding: 3.125em 7.25em !important;
+        }
+    }
 }
 
 .loading {
@@ -67,8 +74,10 @@ body {
     max-width: 72rem !important;
 
     .milkdown {
-        overflow: auto;
-        height: calc(100vh - 11.5rem - 20px);
+        .editor {
+            overflow: auto;
+            height: calc(100vh - 11.5rem - 110px);
+        }
     }
 
     position: relative;

diff --git a/packages/plugin-slash/src/prose-plugin/view.ts b/packages/plugin-slash/src/prose-plugin/view.ts
@@ -29,7 +29,10 @@ const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
         }
 
         if (parent.height + parent.top - selected.bottom < target.height) {
-            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
+            const topOffset = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
+            if (topOffset > 0) {
+                top = topOffset;
+            }
         }
         return [top, left];
     });

diff --git a/packages/theme-nord/src/style.ts b/packages/theme-nord/src/style.ts
@@ -38,11 +38,6 @@ export const getStyle = (manager: ThemeManager, emotion: Emotion) => {
         & > * {
             margin: 1.875em 0;
         }
-
-        @media only screen and (min-width: 72rem) {
-            max-width: 57.375em;
-            padding: 3.125em 7.25em;
-        }
     `;
 
     const paragraph = css`

diff --git a/packages/theme-tokyo/src/style.ts b/packages/theme-tokyo/src/style.ts
@@ -38,11 +38,6 @@ export const getStyle = (manager: ThemeManager, emotion: Emotion) => {
         & > * {
             margin: 1.875em 0;
         }
-
-        @media only screen and (min-width: 72rem) {
-            max-width: 57.375em;
-            padding: 3.125em 7.25em;
-        }
     `;
 
     const paragraph = css`