fix(component): children line style in whiteboard

libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx

@@ -13,7 +13,6 @@ import type {
     ReactElement,
 } from 'react';
 import { forwardRef, useState } from 'react';
-import style9 from 'style9';
 import { SCENE_CONFIG } from '../blocks/group/config';
 import { BlockContainer } from '../components/BlockContainer';
 
@@ -30,29 +29,15 @@ const TreeView = forwardRef<
     { lastItem?: boolean } & ComponentPropsWithRef<'div'>
 >(({ lastItem, children, onClick, ...restProps }, ref) => {
     return (
-        <div ref={ref} className={treeStyles('treeWrapper')} {...restProps}>
+        <TreeWrapper ref={ref} {...restProps}>
-            <div className={treeStyles('treeView')}>
+            <StyledTreeView>
-                <div
+                <VerticalLine last={lastItem} onClick={onClick} />
-                    className={treeStyles({
+                <HorizontalLine last={lastItem} onClick={onClick} />
-                        line: true,
+                {lastItem && <LastItemRadius />}
-                        verticalLine: true,
+            </StyledTreeView>
-                        lastItemVerticalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                <div
-                    className={treeStyles({
-                        line: true,
-                        horizontalLine: true,
-                        lastItemHorizontalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                {lastItem && <div className={treeStyles('lastItemRadius')} />}
-            </div>
             {/* maybe need a child wrapper */}
             {children}
-        </div>
+        </TreeWrapper>
     );
 });
 
@@ -71,10 +56,7 @@ const ChildrenView = ({
     const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
 
     return (
-        <div
+        <Children style={{ ...(!isKanbanScene && { marginLeft: indent }) }}>
-            className={styles('children')}
-            style={{ ...(!isKanbanScene && { marginLeft: indent }) }}
-        >
             {childrenIds.map((childId, idx) => {
                 if (isKanbanScene) {
                     return (
@@ -94,7 +76,7 @@ const ChildrenView = ({
                     </TreeView>
                 );
             })}
-        </div>
+        </Children>
     );
 };
 
@@ -104,9 +86,7 @@ const CollapsedNode = forwardRef<
 >((props, ref) => {
     return (
         <TreeView ref={ref} lastItem={true} {...props}>
-            <div className={treeStyles('collapsed')} onClick={props.onClick}>
+            <Collapsed onClick={props.onClick}>···</Collapsed>
-                ···
-            </div>
         </TreeView>
     );
 });
@@ -146,10 +126,10 @@ export const withTreeViewChildren = (
                 editor={props.editor}
                 block={block}
                 selected={isSelect}
-                className={styles('wrapper')}
+                className={Wrapper.toString()}
             >
                 <WrapperWithPendantAndDragDrop editor={editor} block={block}>
-                    <div className={styles('node')}>{creator(props)}</div>
+                    <div>{creator(props)}</div>
                 </WrapperWithPendantAndDragDrop>
 
                 {collapsed && (
@@ -170,93 +150,79 @@ export const withTreeViewChildren = (
     };
 };
 
-const styles = style9.create({
+const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
-    wrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    node: {},
 
-    children: {
+const Children = Wrapper;
-        display: 'flex',
+
-        flexDirection: 'column',
+const TREE_COLOR = '#D5DFE6';
-    },
+// TODO determine the position of the horizontal line by the type of the item
+const ITEM_POINT_HEIGHT = '12.5px'; // '50%'
+
+const TreeWrapper = styled('div')({
+    position: 'relative',
 });
 
-const treeColor = '#D5DFE6';
+const StyledTreeView = styled('div')({
-// TODO determine the position of the horizontal line by the type of the item
+    position: 'absolute',
-const itemPointHeight = '12.5px'; // '50%'
+    left: '-21px',
+    height: '100%',
+});
 
-const treeStyles = style9.create({
+const Line = styled('div')({
-    treeWrapper: {
+    position: 'absolute',
-        position: 'relative',
+    cursor: 'pointer',
-    },
+    backgroundColor: TREE_COLOR,
+    // somehow tldraw would override this
+    boxSizing: 'content-box!important' as any,
+    // See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
+    backgroundClip: 'content-box',
+    backgroundOrigin: 'content-box',
+    // Increase click hot spot
+    padding: '10px',
+});
 
-    treeView: {
+const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
-        position: 'absolute',
+    width: '1px',
-        left: '-21px',
+    height: last ? ITEM_POINT_HEIGHT : '100%',
-        height: '100%',
+    paddingTop: 0,
-    },
+    paddingBottom: 0,
-    line: {
+    transform: 'translate(-50%, 0)',
-        position: 'absolute',
-        cursor: 'pointer',
-        backgroundColor: treeColor,
-        boxSizing: 'content-box',
-        // See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
-        backgroundClip: 'content-box',
-        backgroundOrigin: 'content-box',
-        // Increase click hot spot
-        padding: '10px',
-    },
-    verticalLine: {
-        width: '1px',
-        height: '100%',
-        paddingTop: 0,
-        paddingBottom: 0,
-        transform: 'translate(-50%, 0)',
-    },
-    horizontalLine: {
-        width: '16px',
-        height: '1px',
-        paddingLeft: 0,
-        paddingRight: 0,
-        top: itemPointHeight,
-        transform: 'translate(0, -50%)',
-    },
-    noItemHorizontalLine: {
-        display: 'none',
-    },
 
-    lastItemHorizontalLine: {
+    opacity: last ? 0 : 'unset',
-        opacity: 0,
+}));
-    },
-    lastItemVerticalLine: {
-        height: itemPointHeight,
-        opacity: 0,
-    },
-    lastItemRadius: {
-        boxSizing: 'content-box',
-        position: 'absolute',
-        left: '-0.5px',
-        top: 0,
-        height: itemPointHeight,
-        bottom: '50%',
-        width: '16px',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderLeftColor: treeColor,
-        borderBottomColor: treeColor,
-        borderTop: 'none',
-        borderRight: 'none',
-        borderRadius: '0 0 0 3px',
-        pointerEvents: 'none',
-    },
 
-    collapsed: {
+const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
-        cursor: 'pointer',
+    width: '16px',
-        display: 'inline-block',
+    height: '1px',
-        color: '#B9CAD5',
+    paddingLeft: 0,
-    },
+    paddingRight: 0,
+    top: ITEM_POINT_HEIGHT,
+    transform: 'translate(0, -50%)',
+    opacity: last ? 0 : 'unset',
+}));
+
+const Collapsed = styled('div')({
+    cursor: 'pointer',
+    display: 'inline-block',
+    color: '#B9CAD5',
+});
+
+const LastItemRadius = styled('div')({
+    boxSizing: 'content-box',
+    position: 'absolute',
+    left: '-0.5px',
+    top: 0,
+    height: ITEM_POINT_HEIGHT,
+    bottom: '50%',
+    width: '16px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderLeftColor: TREE_COLOR,
+    borderBottomColor: TREE_COLOR,
+    borderTop: 'none',
+    borderRight: 'none',
+    borderRadius: '0 0 0 3px',
+    pointerEvents: 'none',
 });
 
 const StyledBorder = styled('div')({