d76d53db95
This is the first of three textfield changes. This starts with making the speech bubble actually have text. Also, it creates a TipTap example and how that would be wired up. 🎵 this is dangerous, I walk through textfields so watch your head rock 🎵 ### Change Type - [x] `minor` — New feature ### Release Notes - Refactor textfields be composable/swappable.
36 lines
911 B
TypeScript
36 lines
911 B
TypeScript
import { TLArrowShape, TLDefaultColorStyle, TLShapeId, VecLike } from '@tldraw/editor'
|
|
import * as React from 'react'
|
|
import { TextLabel } from '../../shared/TextLabel'
|
|
import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../shared/default-shape-constants'
|
|
|
|
export const ArrowTextLabel = React.memo(function ArrowTextLabel({
|
|
id,
|
|
text,
|
|
size,
|
|
font,
|
|
position,
|
|
width,
|
|
labelColor,
|
|
}: { id: TLShapeId; position: VecLike; width?: number; labelColor: TLDefaultColorStyle } & Pick<
|
|
TLArrowShape['props'],
|
|
'text' | 'size' | 'font'
|
|
>) {
|
|
return (
|
|
<TextLabel
|
|
id={id}
|
|
classNamePrefix="tl-arrow"
|
|
type="arrow"
|
|
font={font}
|
|
fontSize={ARROW_LABEL_FONT_SIZES[size]}
|
|
lineHeight={TEXT_PROPS.lineHeight}
|
|
align="middle"
|
|
verticalAlign="middle"
|
|
text={text}
|
|
labelColor={labelColor}
|
|
textWidth={width}
|
|
style={{
|
|
transform: `translate(${position.x}px, ${position.y}px)`,
|
|
}}
|
|
/>
|
|
)
|
|
})
|