import { LABEL_FONT_SIZES, TEXT_PROPS, TLDefaultSizeStyle, getDefaultColorTheme } from 'tldraw' import Tiptap from '../../shared/TipTap' import type { SpeechBubbleShape, SpeechBubbleShapeProps, } from '../speech-bubble/SpeechBubble/SpeechBubbleUtil' import { STROKE_SIZES, SpeechBubbleUtil } from '../speech-bubble/SpeechBubble/SpeechBubbleUtil' import { getSpeechBubbleVertices } from '../speech-bubble/SpeechBubble/helpers' export class SpeechBubbleUtilRichText extends SpeechBubbleUtil { override getDefaultProps(): SpeechBubbleShapeProps { return { ...super.getDefaultProps(), text: '

Hello World! Some rich text

' } } override component(shape: SpeechBubbleShape) { const { id, type, props: { color, font, size, align, text }, } = shape const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode(), }) const vertices = getSpeechBubbleVertices(shape) const pathData = 'M' + vertices[0] + 'L' + vertices.slice(1) + 'Z' return ( <>

) } } /* For this particular guide check out the main `speech-bubble` example. This is the same guide except this adds rich text to the shape using TipTap. */

Speech bubble with rich text