fix(json-crdt-peritext-ui): 🐛 do not break words due to focus edge

streamich · Nov 12, 2024 · 182fcbb · 182fcbb
1 parent d546ef5
commit 182fcbb
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -20,7 +20,7 @@ export const App: React.FC = () => {
   return (
     <Provider theme={'light'}>
       <GlobalCss />
-      <div style={{maxWidth: '640px', fontSize: '21px', margin: '32px auto'}}>
+      <div style={{maxWidth: '690px', fontSize: '32px', lineHeight: '1em', margin: '32px auto'}}>
         <PeritextView peritext={peritext} renderers={[renderers, debugRenderers({enabled: true})]} />
       </div>
     </Provider>

diff --git a/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
@@ -40,10 +40,10 @@ export const RenderPeritext: React.FC<RenderPeritextProps> = ({enabled: enabledP
       enabled,
       ctx,
       flags: {
-        dom: new ValueSyncStore<boolean>(true),
-        editor: new ValueSyncStore<boolean>(true),
-        peritext: new ValueSyncStore<boolean>(false),
-        model: new ValueSyncStore<boolean>(false),
+        dom: new ValueSyncStore(true),
+        editor: new ValueSyncStore(true),
+        peritext: new ValueSyncStore(false),
+        model: new ValueSyncStore(false),
       },
     }),
     [enabled, ctx],

diff --git a/src/json-crdt-peritext-ui/plugins/default/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/default/Chrome/index.tsx
@@ -9,7 +9,6 @@ const blockClass = rule({
   bxz: 'border-box',
   bdrad: '16px',
   pad: '24px 32px',
-  lh: '1.7em',
   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/default/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/default/RenderFocus.tsx
@@ -20,19 +20,18 @@ const animation = keyframes({
 
 const blockClass = rule({
   pos: 'relative',
-  d: 'inline-block',
   pe: 'none',
   us: 'none',
   w: '0px',
   h: '100%',
-  va: 'center',
+  va: 'bottom',
 });
 
 const innerClass = drule({
   an: `${animationTime} ${animation} step-end infinite`,
   pos: 'absolute',
-  w: `calc(max(${width}em, 3px))`,
-  t: '-1.1em',
+  w: `calc(max(${width}em, 2px))`,
+  t: '-.175em',
   h: '1.45em',
   bg: DefaultRendererColors.ActiveCursor,
   'mix-blend-mode': 'multiply',
@@ -54,6 +53,7 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({left, italic, children}
 
   return (
     <span className={blockClass}>
+      {children}
       <span
         className={innerClass({
           bdrad: left ? `0 ${width * 0.5}em ${width * 0.5}em 0` : `${width * 0.5}em 0 0 ${width * 0.5}em`,