fix(json-crdt-peritext-ui): 🐛 do not break line at caret position

streamich · Nov 12, 2024 · d4598ce · d4598ce
1 parent 7343d52
commit d4598ce
Show file tree

Hide file tree

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

diff --git a/src/json-crdt-peritext-ui/plugins/default/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/default/RenderAnchor.tsx
@@ -48,7 +48,7 @@ export const RenderAnchor: React.FC<RenderAnchorProps> = ({children}) => {
 
   return (
     <span className={blockClass} contentEditable={false}>
-      <span>{children}</span>
+      {children}
       <span className={innerClass} style={style} />
     </span>
   );

diff --git a/src/json-crdt-peritext-ui/plugins/default/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/default/RenderCaret.tsx
@@ -21,21 +21,19 @@ const moveAnimation = keyframes({
 
 const blockClass = rule({
   pos: 'relative',
-  d: 'inline-block',
   pe: 'none',
   us: 'none',
   w: '0px',
   h: '100%',
   bg: 'black',
-  va: 'center',
+  va: 'bottom',
 });
 
 const innerClass = rule({
   pos: 'absolute',
-  d: 'inline-block',
-  b: '-0.4em',
-  l: '-0.065em',
-  w: 'calc(max(.2em, 3px))',
+  b: '-.18em',
+  l: '-.065em',
+  w: 'calc(max(.2em, 2px))',
   h: '1.5em',
   bg: DefaultRendererColors.ActiveCursor,
   bdl: `1px dotted ${DefaultRendererColors.InactiveCursor}`,
@@ -74,10 +72,9 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, children}) => {
 
   return (
     <span className={blockClass}>
+      {children}
       {score !== plugin.lastVisScore.value && <CaretScore score={score} delta={delta} />}
-      <span className={innerClass} style={style}>
-        {children}
-      </span>
+      <span className={innerClass} style={style} />
     </span>
   );
 };

diff --git a/src/json-crdt-peritext-ui/plugins/default/index.ts b/src/json-crdt-peritext-ui/plugins/default/index.ts
@@ -14,7 +14,7 @@ export const renderers: PeritextPlugin = {
   text,
   caret: (props, children) => h(RenderCaret, <any>props, children),
   focus: (props, children) => h(RenderFocus, <any>props, children),
-  anchor: (props) => h(RenderAnchor, <any>props),
+  anchor: (props, children) => h(RenderAnchor, <any>props, children),
   inline: (props, children) => h(RenderInline, props as any, children),
   block: (props, children) => h(RenderBlock, props as any, children),
   peritext: (props, children, ctx) => h(RenderPeritext, {...props, children, ctx}),