fix: select position and run prettier

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

@@ -48,7 +48,13 @@ export const contextBarActionTypes = [
 ] as const
 
 type ContextBarActionType = typeof contextBarActionTypes[number]
-const singleShapeActions: ContextBarActionType[] = ['Edit', 'YoutubeLink', 'TwitterLink', 'IFrameSource', 'Links']
+const singleShapeActions: ContextBarActionType[] = [
+  'Edit',
+  'YoutubeLink',
+  'TwitterLink',
+  'IFrameSource',
+  'Links',
+]
 
 const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 
@@ -122,7 +128,8 @@ const EditAction = observer(() => {
               pageBlocksTree = window.logseq?.api?.get_page_blocks_tree?.(pageId)
             }
 
-            const firstNonePropertyBlock = pageBlocksTree?.find(b => !('propertiesOrder' in b)) || pageBlocksTree[0]
+            const firstNonePropertyBlock =
+              pageBlocksTree?.find(b => !('propertiesOrder' in b)) || pageBlocksTree[0]
 
             uuid = firstNonePropertyBlock?.uuid
           }
@@ -212,9 +219,7 @@ const ScaleLevelAction = observer(() => {
   const shapes = filterShapeByAction<LogseqPortalShape>(app.selectedShapesArray, 'ScaleLevel')
   const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel
 
-  return (
-    <ScaleInput scaleLevel={scaleLevel} compact={isMobile()} />
-  )
+  return <ScaleInput scaleLevel={scaleLevel} compact={isMobile()} />
 })
 
 const IFrameSourceAction = observer(() => {

tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx

@@ -4,17 +4,12 @@ import type { SizeLevel } from '../../lib'
 import { useApp } from '@tldraw/react'
 
 interface ScaleInputProps extends React.HTMLAttributes<HTMLButtonElement> {
-  scaleLevel?: SizeLevel,
-  compact?: boolean,
+  scaleLevel?: SizeLevel
+  compact?: boolean
   popoverSide?: Side
 }
 
-export function ScaleInput({
-  scaleLevel,
-  compact,
-  popoverSide,
-  ...rest
-}: ScaleInputProps) {
+export function ScaleInput({ scaleLevel, compact, popoverSide, ...rest }: ScaleInputProps) {
   const app = useApp<Shape>()
 
   const sizeOptions: SelectOption[] = [

tldraw/apps/tldraw-logseq/src/components/inputs/SelectInput.tsx

@@ -12,13 +12,21 @@ export interface SelectOption {
 interface SelectInputProps extends React.HTMLAttributes<HTMLElement> {
   options: SelectOption[]
   value: string
-  tooltip?: React.ReactNode,
-  popoverSide?: Side,
-  chevron?: boolean,
+  tooltip?: React.ReactNode
+  popoverSide?: Side
+  chevron?: boolean
   onValueChange: (value: string) => void
 }
 
-export function SelectInput({ options, tooltip, popoverSide, chevron = true, value, onValueChange, ...rest }: SelectInputProps) {
+export function SelectInput({
+  options,
+  tooltip,
+  popoverSide,
+  chevron = true,
+  value,
+  onValueChange,
+  ...rest
+}: SelectInputProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   return (
     <div {...rest} className="tl-select-input">
@@ -33,16 +41,22 @@ export function SelectInput({ options, tooltip, popoverSide, chevron = true, val
             <div className="tl-select-input-trigger-value">
               <Select.Value />
             </div>
-            {chevron &&
+            {chevron && (
               <Select.Icon style={{ lineHeight: 1 }} className="ml-1 md:ml-3">
                 <TablerIcon name={isOpen ? 'chevron-up' : 'chevron-down'} />
               </Select.Icon>
-            }
+            )}
           </Select.Trigger>
         </Tooltip>
 
         <Select.Portal className="tl-select-input-portal">
-          <Select.Content className="tl-select-input-content" align="center">
+          <Select.Content
+            className="tl-select-input-content"
+            side={popoverSide}
+            position="popper"
+            sideOffset={14}
+            align="center"
+          >
             <Select.ScrollUpButton />
             <Select.Viewport className="tl-select-input-viewport">
               {options.map(option => {

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -115,7 +115,7 @@ const handleCreatingShapes = async (
       size: await getSizeFromSrc(handlers.makeAssetUrl(url), isVideo),
     }
     return asset
-}
+  }
 
   async function createAssetsFromFiles(files: File[]) {
     const tasks = files
@@ -251,10 +251,7 @@ const handleCreatingShapes = async (
     const rawText = await getDataFromType(item, 'text/plain')
     if (rawText) {
       const text = rawText.trim()
-      return tryCreateShapeHelper(
-        tryCreateShapeFromURL,
-        tryCreateShapeFromIframeString
-      )(text)
+      return tryCreateShapeHelper(tryCreateShapeFromURL, tryCreateShapeFromIframeString)(text)
     }
 
     return null

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

@@ -98,7 +98,11 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
       )
 
       return (
-        <div {...events} style={{ width: '100%', height: '100%', overflow: 'hidden' }}  className="tl-box-container">
+        <div
+          {...events}
+          style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+          className="tl-box-container"
+        >
           <TextLabel
             font={font}
             text={label}