fix: add text size control to text shape

src/main/frontend/components/whiteboard.css

@@ -90,7 +90,6 @@
 .whiteboard-page-refs-count {
   border-radius: 8px;
   background: var(--ls-primary-background-color);
-  height: 38px;
 }
 
 .whiteboard-page-refs-count:hover,

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -55,7 +55,7 @@ const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   line: ['Edit', 'Swatch', 'ArrowMode'],
   pencil: ['Swatch'],
   highlighter: ['Swatch'],
-  text: ['Edit', 'Swatch'],
+  text: ['Edit', 'Swatch', 'ScaleLevel'],
 }
 
 const noStrokeShapes = Object.entries(shapeMapping)
@@ -154,7 +154,7 @@ const ScaleLevelAction = observer(() => {
       value: 'xl',
     },
     {
-      label: '2 Extra Large',
+      label: 'Huge',
       value: 'xxl',
     },
   ]

tldraw/apps/tldraw-logseq/src/index.ts

@@ -1,2 +1,16 @@
 export * from './app'
-export * from './lib/preview-manager'
+export * from './lib/preview-manager'
+
+declare global {
+  interface Window {
+    logseq?: {
+      api?: {
+        make_asset_url?: (url: string) => string
+        get_page_blocks_tree?: (pageName: string) => any[]
+        edit_block?: (uuid: string) => void
+        set_blocks_id?: (uuids: string[]) => void
+        open_external_link?: (url: string) => void
+      }
+    }
+  }
+}

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -8,7 +8,7 @@ import * as React from 'react'
 import { TablerIcon } from '~components/icons'
 import { TextInput } from '~components/inputs/TextInput'
 import { useCameraMovingRef } from '~hooks/useCameraMoving'
-import type { Shape } from '~lib'
+import type { Shape, SizeLevel } from '~lib'
 import { LogseqContext, SearchResult } from '~lib/logseq-context'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 
@@ -38,8 +38,6 @@ const levelToScale = {
   xxl: 3,
 }
 
-type SizeLevel = keyof typeof levelToScale
-
 const LogseqTypeTag = ({
   type,
   active,

tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
-import { HTMLContainer, TLComponentProps, TLTextMeasure } from '@tldraw/react'
 import { TextUtils, TLBounds, TLResizeStartInfo, TLTextShape, TLTextShapeProps } from '@tldraw/core'
+import { HTMLContainer, TLComponentProps, TLTextMeasure } from '@tldraw/react'
+import { action, computed } from 'mobx'
 import { observer } from 'mobx-react-lite'
+import * as React from 'react'
+import type { SizeLevel } from '~lib'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 
 export interface TextShapeProps extends TLTextShapeProps, CustomStyleProps {
@@ -13,6 +15,16 @@ export interface TextShapeProps extends TLTextShapeProps, CustomStyleProps {
   lineHeight: number
   padding: number
   type: 'text'
+  scaleLevel?: SizeLevel
+}
+
+const levelToScale = {
+  xs: 10,
+  sm: 16,
+  md: 20,
+  lg: 32,
+  xl: 48,
+  xxl: 60,
 }
 
 export class TextShape extends TLTextShape<TextShapeProps> {
@@ -198,6 +210,18 @@ export class TextShape extends TLTextShape<TextShapeProps> {
     )
   })
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      fontSize: levelToScale[v ?? 'md']
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const {
       props: { borderRadius },

tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts

@@ -58,16 +58,4 @@ export const shapes: TLReactShapeConstructor<Shape>[] = [
   LogseqPortalShape,
 ]
 
-declare global {
-  interface Window {
-    logseq?: {
-      api?: {
-        make_asset_url?: (url: string) => string
-        get_page_blocks_tree?: (pageName: string) => any[]
-        edit_block?: (uuid: string) => void
-        set_blocks_id?: (uuids: string[]) => void
-        open_external_link?: (url: string) => void
-      }
-    }
-  }
-}
+export type SizeLevel = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'