fix: 🐛 improve styles for crepe (#1306)

Author: Saul-Mirone

Diff for: packages/components/src/link-tooltip/preview/preview-configure.ts

@@ -27,7 +27,7 @@ export function configureLinkPreviewTooltip(ctx: Ctx) {
     const result = shouldShowPreviewWhenHover(ctx, view, event)
     if (result) {
       const position = view.state.doc.resolve(result.pos)
-      const markPosition = findMarkPosition(result.mark, view.state.doc, position.before(), position.after())
+      const markPosition = findMarkPosition(result.mark, result.node, view.state.doc, position.before(), position.after())
       const from = markPosition.start
       const to = markPosition.end
       linkPreviewTooltipView.setRect(posToDOMRect(view, from, to))

Diff for: packages/components/src/link-tooltip/utils.ts

@@ -5,17 +5,17 @@ import type { EditorView } from '@milkdown/prose/view'
 import { linkSchema } from '@milkdown/preset-commonmark'
 import { linkPreviewTooltip } from './tooltips'
 
-export function findMarkPosition(mark: Mark, doc: Node, from: number, to: number) {
+export function findMarkPosition(mark: Mark, node: Node, doc: Node, from: number, to: number) {
   let markPos = { start: -1, end: -1 }
-  doc.nodesBetween(from, to, (node, pos) => {
+  doc.nodesBetween(from, to, (n, pos) => {
     // stop recursive finding if result is found
     if (markPos.start > -1)
       return false
 
-    if (markPos.start === -1 && mark.isInSet(node.marks)) {
+    if (markPos.start === -1 && mark.isInSet(n.marks) && node === n) {
       markPos = {
         start: pos,
-        end: pos + Math.max(node.textContent.length, 1),
+        end: pos + Math.max(n.textContent.length, 1),
       }
     }
 

Diff for: packages/crepe/src/theme/classic-dark/style.css

@@ -59,6 +59,7 @@
 
   .ProseMirror {
     padding: 60px 120px;
+    letter-spacing: 0.5px;
 
     & > * {
       margin: 20px 0 40px;
@@ -141,10 +142,13 @@
       background: color-mix(in srgb, var(--crepe-color-inline-area), transparent 40%);
       padding: 0 10px;
       border-radius: 4px;
+      display: inline-block;
+      line-height: 24px;
     }
 
     a {
       color: var(--crepe-color-primary);
+      text-decoration: underline;
     }
 
     pre {
@@ -177,7 +181,7 @@
 
     hr {
       border: none;
-      border-bottom: 1px solid color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      border-bottom: 1px solid color-mix(in srgb, var(--crepe-color-outline), transparent 20%);
       height: 16px;
       position: relative;
 

Diff for: packages/crepe/src/theme/classic/style.css

@@ -54,6 +54,7 @@
 
   .ProseMirror {
     padding: 60px 120px;
+    letter-spacing: 0.5px;
 
     & > * {
       margin: 20px 0 40px;
@@ -136,10 +137,13 @@
       background: color-mix(in srgb, var(--crepe-color-inline-area), transparent 40%);
       padding: 0 10px;
       border-radius: 4px;
+      display: inline-block;
+      line-height: 24px;
     }
 
     a {
       color: var(--crepe-color-primary);
+      text-decoration: underline;
     }
 
     pre {
@@ -172,7 +176,7 @@
 
     hr {
       border: none;
-      border-bottom: 1px solid color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      border-bottom: 1px solid color-mix(in srgb, var(--crepe-color-outline), transparent 20%);
       height: 16px;
       position: relative;