fix(json-crdt-peritext-ui): 🐛 fixup caret rendering for spacious lines

streamich · Nov 10, 2024 · 464c9a6 · 464c9a6
1 parent 520389e
commit 464c9a6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx
@@ -36,6 +36,7 @@ export const RenderBlock: React.FC<RenderBlockProps> = ({block, hash, children})
             padding: '2px 4px',
             borderRadius: 3,
             background: 'rgba(0,0,0)',
+            lineHeight: '1.2em',
             color: 'white',
             display: 'inline-block',
           }}

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx
@@ -9,6 +9,7 @@ const blockClass = rule({
   bxz: 'border-box',
   bdrad: '16px',
   pad: '24px 32px',
+  lh: '1.8em',
   bxsh: '0 1px 8px #00000008,0 1px 4px #0000000a,0 4px 10px #0000000f',
   '&:hover': {
     bxsh: '0 1px 8px #00000008,0 1px 4px #0000000a,0 4px 10px #0000000f,0 0 3px #0000001f',

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
@@ -26,16 +26,18 @@ const blockClass = rule({
   w: '0px',
   h: '100%',
   bg: 'black',
-  va: 'top',
+  va: 'center',
 });
 
 const innerClass = rule({
   pos: 'absolute',
-  top: '-0.25em',
-  left: '-0.0625em',
+  d: 'inline-block',
+  b: '-0.4em',
+  l: '-0.065em',
   w: '.2em',
   h: '1.5em',
   bg: DefaultRendererColors.ActiveCursor,
+  bdl: `1px dotted ${DefaultRendererColors.InactiveCursor}`,
   bdrad: '0.0625em',
   'mix-blend-mode': 'multiply',
   an: moveAnimation + ' .25s ease-out',