feat: better drop cursor for crepe (#1378)

* feat: 🎸 better drop cursor for crepe * chore: fix * chore: fix * chore: optimize style
Milkdown · Jun 17, 2024 · c2dff9c · c2dff9c
1 parent 1ee21e8
commit c2dff9c
Show file tree

Hide file tree

Showing 20 changed files with 282 additions and 129 deletions.
diff --git a/packages/components/src/list-item-block/component.ts b/packages/components/src/list-item-block/component.ts
@@ -1,6 +1,5 @@
 import type { Component } from 'atomico'
 import { c, html, useHost, useLayoutEffect, useRef } from 'atomico'
-import clsx from 'clsx'
 import type { ListItemBlockConfig } from './config'
 
 interface Attrs {
@@ -57,8 +56,8 @@ export const listItemComponent: Component<ListItemComponentProps> = ({
     readonly,
   }
 
-  return html`<host>
-    <li class=${clsx('list-item', selected && 'ProseMirror-selectednode')}>
+  return html`<host class=${selected && 'ProseMirror-selectednode'}>
+    <li class='list-item'>
       <div class="label-wrapper" onclick=${onClickLabel} contenteditable="false">
         ${config?.renderLabel(labelProps)}
       </div>

diff --git a/packages/crepe/src/feature/block-edit/handle/index.ts b/packages/crepe/src/feature/block-edit/handle/index.ts
@@ -23,6 +23,21 @@ export class BlockHandleView implements PluginView {
     this.#provider = new BlockProvider({
       ctx,
       content,
+      getPlacement: ({ active, blockDom }) => {
+        let totalDescendant = 0
+        active.node.descendants((node) => {
+          totalDescendant += node.childCount
+        })
+        const dom = active.el
+        const domRect = dom.getBoundingClientRect()
+        const handleRect = blockDom.getBoundingClientRect()
+        const style = window.getComputedStyle(dom)
+        const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
+        const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
+        const height = domRect.height - paddingTop - paddingBottom
+        const handleHeight = handleRect.height
+        return totalDescendant > 2 || handleHeight * 2 < height ? 'left-start' : 'left'
+      },
     })
     this.update()
   }
@@ -43,9 +58,10 @@ export class BlockHandleView implements PluginView {
       view.focus()
 
     const { state, dispatch } = view
-    const active = this.#provider.activeNode
+    const active = this.#provider.active
     if (!active)
       return
+
     const pos = active.$pos
     const isNoneTextBlock = ['hr', 'image-block'].includes(active.node.type.name)
     const nodeSize = isNoneTextBlock ? active.node.nodeSize : active.node.content.size

diff --git a/packages/crepe/src/feature/cursor/index.ts b/packages/crepe/src/feature/cursor/index.ts
@@ -0,0 +1,22 @@
+import { cursor, dropCursorConfig } from '@milkdown/plugin-cursor'
+
+import type { DefineFeature } from '../shared'
+
+interface CursorConfig {
+  color: string | false
+  width: number
+}
+export type CursorFeatureConfig = CursorConfig
+
+export const defineFeature: DefineFeature<CursorFeatureConfig> = (editor, config) => {
+  editor
+    .config((ctx) => {
+      ctx.update(dropCursorConfig.key, value => ({
+        ...value,
+        class: 'crepe-drop-cursor',
+        width: config?.width ?? 4,
+        color: config?.color ?? false,
+      }))
+    })
+    .use(cursor)
+}
diff --git a/packages/crepe/src/feature/gap-cursor/index.ts b/packages/crepe/src/feature/gap-cursor/index.ts
diff --git a/packages/crepe/src/feature/index.ts b/packages/crepe/src/feature/index.ts
@@ -6,7 +6,7 @@ export enum CrepeFeature {
   CodeMirror = 'code-mirror',
   ListItem = 'list-item',
   LinkTooltip = 'link-tooltip',
-  GapCursor = 'gap-cursor',
+  Cursor = 'cursor',
   ImageBlock = 'image-block',
   BlockEdit = 'block-edit',
   Toolbar = 'toolbar',
@@ -22,7 +22,7 @@ export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.ListItem]: true,
   [CrepeFeature.LinkTooltip]: true,
   [CrepeFeature.ImageBlock]: true,
-  [CrepeFeature.GapCursor]: true,
+  [CrepeFeature.Cursor]: true,
   [CrepeFeature.BlockEdit]: true,
   [CrepeFeature.Placeholder]: true,
   [CrepeFeature.Toolbar]: true,
@@ -47,8 +47,8 @@ export async function loadFeature(feature: CrepeFeature, editor: Editor, config?
       const { defineFeature } = await import('./image-block')
       return defineFeature(editor, config)
     }
-    case CrepeFeature.GapCursor: {
-      const { defineFeature } = await import('./gap-cursor')
+    case CrepeFeature.Cursor: {
+      const { defineFeature } = await import('./cursor')
       return defineFeature(editor, config)
     }
     case CrepeFeature.BlockEdit: {

diff --git a/packages/crepe/src/theme/classic-dark/style.css b/packages/crepe/src/theme/classic-dark/style.css
@@ -50,11 +50,6 @@
   color: var(--crepe-color-on-background);
   background: var(--crepe-color-background);
 
-  input {
-    font-family: var(--crepe-font-default);
-    color: var(--crepe-color-on-background);
-  }
-
   .ProseMirror-focused {
     outline: none;
   }
@@ -64,23 +59,49 @@
     letter-spacing: 0.5px;
 
     & > * {
-      margin: 20px 0 40px;
+      padding: 20px 0;
     }
 
     *::selection {
       background: var(--crepe-color-selected);
+      //background: color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
     }
 
     li.ProseMirror-selectednode {
-      outline: 10px solid var(--crepe-color-selected);
+      background: var(--crepe-color-selected);
+      outline: none;
+      //outline: 10px solid color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+      &::selection {
+        background: transparent;
+      }
     }
     li.ProseMirror-selectednode:after {
       all: unset;
     }
 
     .ProseMirror-selectednode {
       background: var(--crepe-color-selected);
-      outline: 10px solid var(--crepe-color-selected);
+      outline: none;
+      //outline: 10px solid var(--crepe-color-selected);
+      //background: color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      //outline: 10px solid color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+      &::selection {
+        background: transparent;
+      }
+    }
+
+    &[data-dragging="true"] {
+      .ProseMirror-selectednode,
+      &::selection,
+      *::selection {
+        background: transparent;
+      }
     }
 
     img {
@@ -166,11 +187,16 @@
     blockquote {
       position: relative;
       padding-left: 40px;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: content-box;
+
       &::before {
         content: "";
         width: 4px;
-        height: 100%;
         left: 0;
+        top: 0;
+        bottom: 0;
         position: absolute;
         background: var(--crepe-color-selected);
         border-radius: 100px;
@@ -194,10 +220,8 @@
       }
     }
 
-    .ProseMirror-gapcursor:after {
-      box-sizing: border-box;
-      border-top: 1px solid var(--crepe-color-on-background);
-      top: -40px;
+    ul,ol {
+      padding: 0;
     }
   }
 }
diff --git a/packages/crepe/src/theme/classic/style.css b/packages/crepe/src/theme/classic/style.css
@@ -59,23 +59,49 @@
     letter-spacing: 0.5px;
 
     & > * {
-      margin: 20px 0 40px;
+      padding: 20px 0;
     }
 
     *::selection {
       background: var(--crepe-color-selected);
+      //background: color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
     }
 
     li.ProseMirror-selectednode {
-      outline: 10px solid var(--crepe-color-selected);
+      background: var(--crepe-color-selected);
+      outline: none;
+      //outline: 10px solid color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+      &::selection {
+        background: transparent;
+      }
     }
     li.ProseMirror-selectednode:after {
       all: unset;
     }
 
     .ProseMirror-selectednode {
       background: var(--crepe-color-selected);
-      outline: 10px solid var(--crepe-color-selected);
+      outline: none;
+      //outline: 10px solid var(--crepe-color-selected);
+      //background: color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      //outline: 10px solid color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+      &::selection {
+        background: transparent;
+      }
+    }
+
+    &[data-dragging="true"] {
+      .ProseMirror-selectednode,
+      &::selection,
+      *::selection {
+        background: transparent;
+      }
     }
 
     img {
@@ -161,11 +187,16 @@
     blockquote {
       position: relative;
       padding-left: 40px;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: content-box;
+
       &::before {
         content: "";
         width: 4px;
-        height: 100%;
         left: 0;
+        top: 0;
+        bottom: 0;
         position: absolute;
         background: var(--crepe-color-selected);
         border-radius: 100px;
@@ -189,10 +220,8 @@
       }
     }
 
-    .ProseMirror-gapcursor:after {
-      box-sizing: border-box;
-      border-top: 1px solid var(--crepe-color-on-background);
-      top: -40px;
+    ul,ol {
+      padding: 0;
     }
   }
 }
diff --git a/packages/crepe/src/theme/common/block-edit.css b/packages/crepe/src/theme/common/block-edit.css
@@ -35,9 +35,8 @@
 
   milkdown-slash-menu {
     &[data-show='false'] {
-      opacity: 0;
+      display: none;
     }
-    transition: opacity 0.2s;
     position: absolute;
     display: block;
     width: 254px;

diff --git a/packages/crepe/src/theme/common/code-mirror.css b/packages/crepe/src/theme/common/code-mirror.css
@@ -2,7 +2,7 @@
   milkdown-code-block {
     display: block;
     position: relative;
-    padding: 24px 40px;
+    padding: 24px 40px !important;
     background: var(--crepe-color-surface);
     margin: 20px 0;
 

diff --git a/packages/crepe/src/theme/common/cursor.css b/packages/crepe/src/theme/common/cursor.css
@@ -0,0 +1,16 @@
+@import "@milkdown/prose/gapcursor/style/gapcurosr.css";
+
+.milkdown {
+  .crepe-drop-cursor {
+    background-color: color-mix(in srgb, var(--crepe-color-outline), transparent 50%);
+    opacity: 0.5;
+    transition: all 0.2s;
+    pointer-events: none
+  }
+
+  .ProseMirror-gapcursor:after {
+    box-sizing: border-box;
+    border-top: 1px solid var(--crepe-color-on-background);
+    top: -40px;
+  }
+}
diff --git a/packages/crepe/src/theme/common/gap-cursor.css b/packages/crepe/src/theme/common/gap-cursor.css
diff --git a/packages/crepe/src/theme/common/list-item.css b/packages/crepe/src/theme/common/list-item.css
@@ -1,7 +1,7 @@
 .milkdown {
   milkdown-list-item-block {
     display: block;
-    margin-top: 10px;
+    padding: 5px 0;
 
     & > .list-item {
       display: flex;

diff --git a/packages/crepe/src/theme/common/style.css b/packages/crepe/src/theme/common/style.css
@@ -1,7 +1,7 @@
 @import "./prosemirror.css";
 @import "./block-edit.css";
 @import "./code-mirror.css";
-@import "./gap-cursor.css";
+@import "./cursor.css";
 @import "./image-block.css";
 @import "./link-tooltip.css";
 @import "./list-item.css";