@tldraw/editor 3.9.0-canary.fae364b5aba5 → 3.9.0-internal.7f0e15f4f7d9

package/editor.css

@@ -156,6 +156,8 @@
 	--color-text-1: hsl(0, 0%, 18%);
 	--color-text-3: hsl(220, 2%, 65%);
 	--color-text-shadow: hsl(0, 0%, 100%);
+	--color-text-highlight: hsl(52, 100%, 50%);
+	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
 	--color-primary: hsl(214, 84%, 56%);
 	--color-success: hsl(123, 46%, 34%);
 	--color-info: hsl(201, 98%, 41%);
@@ -202,6 +204,8 @@
 	--color-text-1: hsl(0, 0%, 85%);
 	--color-text-3: hsl(210, 6%, 45%);
 	--color-text-shadow: hsl(210, 13%, 18%);
+	--color-text-highlight: hsl(52, 100%, 41%);
+	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
 	--color-primary: hsl(214, 84%, 56%);
 	--color-success: hsl(123, 38%, 57%);
 	--color-info: hsl(199, 92%, 56%);
@@ -248,7 +252,7 @@
 input,
 *[contenteditable],
 *[contenteditable] * {
-	-webkit-user-select: text;
+	user-select: text;
 }
 
 /* -------------------------------------------------- */
@@ -722,17 +726,14 @@ input,
 	opacity: 0.7;
 }
 
-/* -------------------------------------------------- */
-/*                       Spinner                      */
-/* -------------------------------------------------- */
-
+/* --------------------- Spinner -------------------- */
 @keyframes spinner {
 	to {
 		transform: rotate(360deg);
 	}
 }
 
-/* ------------------- Text Shape ------------------- */
+/* ---------------------- Text ---------------------- */
 
 .tl-text-shape-label {
 	position: relative;
@@ -782,10 +783,14 @@ input,
 	text-align: right;
 }
 
-.tl-text-wrapper[data-isediting='true'] .tl-text-content {
+.tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {
 	opacity: 0;
 }
 
+.tl-rich-text-wrapper[data-isediting='true'] .tl-text-content {
+	display: none;
+}
+
 .tl-text {
 	/* remove overflow from textarea on windows */
 	margin: 0px;
@@ -852,7 +857,6 @@ input,
 	width: 100%;
 	min-width: 1px;
 	min-height: 1px;
-	overflow: visible;
 	outline: none;
 }
 
@@ -868,6 +872,7 @@ input,
 }
 
 .tl-text-content {
+	overflow: visible;
 	pointer-events: none;
 }
 
@@ -875,10 +880,17 @@ input,
 	resize: none;
 	user-select: all;
 	-webkit-user-select: text;
-	overflow: hidden;
 	cursor: var(--tl-cursor-text);
 }
 
+.tl-text-input:not(.tl-rich-text) {
+	/*
+	 * Note: this `overflow: hidden` is key for scrollbars to not show up
+	 * plaintext/<textarea> editors.
+	 */
+	overflow: hidden;
+}
+
 .tl-text-wrapper[data-isediting='false'] .tl-text-input,
 .tl-arrow-label[data-isediting='false'] .tl-text-input {
 	opacity: 0;
@@ -891,6 +903,109 @@ input,
 	text-shadow: none;
 }
 
+.tl-rich-text[data-iseditinganything='true'] {
+	cursor: var(--tl-cursor-text);
+}
+
+.tl-rich-text .ProseMirror {
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	white-space: pre-wrap;
+
+	/**
+	 * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31
+	 * However, that was from 8 years ago and the browser caret issue
+	 * it mentions seems to be fixed. So, we're re-enabling it.
+	 * We'll tell ProseMirror maybe to get rid of this on their end.
+	 */
+	-webkit-font-variant-ligatures: inherit;
+	font-variant-ligatures: inherit;
+	font-feature-settings: inherit;
+
+	/**
+	 * N.B. This following CSS Rule comes standard with the tiptap editor.
+	 * Combined with the above rule that it supersedes, it allows for
+	 * the auto-linking to work in text. Say, when typing example.com
+	 * this helps it automatically turn that bit of text into a link.
+	 *
+	 * However, specifically, the break-spaces features seems to cause
+	 * rendering differences when going in-and-out of edit mode. For example,
+	 * the statically rendered text 'the rain in spain falls mainly on the plain'
+	 * in a note shape will render differently when going in-and-out of edit mode.
+	 *
+	 * So, this is commented out to help make both the autolinking work (which now
+	 * relies on the white-space: pre-wrap to work and to make the static/edit-mode
+	 * rendering consistent.
+	 * In the future, we might consider just making the static rendering just use
+	 * white-space: break-spaces to make it consistent with the edit mode if need be.
+	 *
+	 * Also, the amount of ink I've spilt in my career writing comments explaining
+	 * white-space in contenteditable is incredible.
+	 *
+	/* white-space: break-spaces; */
+}
+
+.tl-rich-text p {
+	margin: 0;
+}
+
+.tl-rich-text ul,
+.tl-rich-text ol {
+	text-align: left;
+	margin: 0;
+}
+
+.tl-rich-text h1,
+.tl-rich-text h2,
+.tl-rich-text h3,
+.tl-rich-text h4,
+.tl-rich-text h5,
+.tl-rich-text h6 {
+	margin-top: 5px;
+	margin-bottom: 10px;
+}
+
+.tl-rich-text a {
+	color: var(--color-primary);
+	text-decoration: underline;
+}
+
+.tl-rich-text code {
+	font-family: var(--tl-font-mono);
+}
+
+.tl-rich-text mark {
+	background-color: #fddd00;
+	color: currentColor;
+	border-radius: 2px;
+}
+
+.tl-theme__light .tl-rich-text mark {
+	text-shadow: none;
+}
+
+.tl-theme__dark .tl-rich-text mark {
+	background-color: var(--color-text-highlight);
+	color: currentColor;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+	@media (color-gamut: p3) {
+		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
+			background-color: var(--color-text-highlight-p3);
+		}
+	}
+}
+
+.tl-text-label__inner > .tl-text-input.tl-rich-text {
+	display: none;
+	position: static;
+}
+
+.tl-text-wrapper[data-isediting='true'] .tl-rich-text {
+	display: block;
+}
+
 /* ------------------- Snap Lines ------------------- */
 
 .tl-snap-indicator {
@@ -1175,10 +1290,6 @@ input,
 	min-height: auto;
 }
 
-.tl-text-label[data-isediting='true'] p {
-	opacity: 0;
-}
-
 .tl-arrow-hint {
 	stroke: var(--color-text-1);
 	fill: none;
@@ -1270,6 +1381,9 @@ input,
 	opacity: 0;
 	animation: fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
+	position: absolute;
+	inset: 0px;
+	z-index: var(--layer-canvas-blocker);
 }
 
 @keyframes fade-in {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.9.0-canary.fae364b5aba5",
+  "version": "3.9.0-internal.7f0e15f4f7d9",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,15 +45,17 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.9.0-canary.fae364b5aba5",
-    "@tldraw/state-react": "3.9.0-canary.fae364b5aba5",
-    "@tldraw/store": "3.9.0-canary.fae364b5aba5",
-    "@tldraw/tlschema": "3.9.0-canary.fae364b5aba5",
-    "@tldraw/utils": "3.9.0-canary.fae364b5aba5",
-    "@tldraw/validate": "3.9.0-canary.fae364b5aba5",
+    "@tiptap/core": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/react": "^2.9.1",
+    "@tldraw/state": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/state-react": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/store": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/tlschema": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/utils": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/validate": "3.9.0-internal.7f0e15f4f7d9",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
-    "canvas-size": "~2.0.0",
     "classnames": "^2.5.1",
     "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
@@ -70,7 +72,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
-    "@types/canvas-size": "^1.2.2",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",

package/src/index.ts

@@ -26,6 +26,14 @@ export {
 	useValue,
 } from '@tldraw/state-react'
 export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
+export {
+	getFontsFromRichText,
+	type RichTextFontVisitor,
+	type RichTextFontVisitorState,
+	type TLTextOptions,
+	type TiptapEditor,
+	type TiptapNode,
+} from './lib/utils/richText'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
@@ -163,6 +171,11 @@ export {
 } from './lib/editor/bindings/BindingUtil'
 export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager'
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager'
+export {
+	FontManager,
+	type TLFontFace,
+	type TLFontFaceSource,
+} from './lib/editor/managers/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager'
 export { ScribbleManager, type ScribbleItem } from './lib/editor/managers/ScribbleManager'
 export {
@@ -297,6 +310,7 @@ export { useIsCropping } from './lib/hooks/useIsCropping'
 export { useIsDarkMode } from './lib/hooks/useIsDarkMode'
 export { useIsEditing } from './lib/hooks/useIsEditing'
 export { useLocalStore } from './lib/hooks/useLocalStore'
+export { usePassThroughMouseOverEvents } from './lib/hooks/usePassThroughMouseOverEvents'
 export { usePassThroughWheelEvents } from './lib/hooks/usePassThroughWheelEvents'
 export { usePeerIds } from './lib/hooks/usePeerIds'
 export { usePresence } from './lib/hooks/usePresence'
@@ -311,6 +325,7 @@ export {
 export { useSelectionEvents } from './lib/hooks/useSelectionEvents'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
 export { useTransform } from './lib/hooks/useTransform'
+export { useViewportHeight } from './lib/hooks/useViewportHeight'
 export {
 	LicenseManager,
 	type InvalidLicenseKeyResult,

package/src/lib/TldrawEditor.tsx

@@ -14,7 +14,6 @@ import React, {
 } from 'react'
 
 import classNames from 'classnames'
-import { TLDeepLinkOptions } from '..'
 import { version } from '../version'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
@@ -44,7 +43,9 @@ import { useZoomCss } from './hooks/useZoomCss'
 import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
+import { TLDeepLinkOptions } from './utils/deepLinks'
 import { stopEventPropagation } from './utils/dom'
+import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
 /**
@@ -167,6 +168,11 @@ export interface TldrawEditorBaseProps {
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
 
+	/**
+	 * Text options for the editor.
+	 */
+	textOptions?: TLTextOptions
+
 	/**
 	 * Options for the editor.
 	 */
@@ -190,6 +196,11 @@ export interface TldrawEditorBaseProps {
 	 * remain in the store and participate in all other operations.
 	 */
 	isShapeHidden?(shape: TLShape, editor: Editor): boolean
+
+	/**
+	 * The URLs for the fonts to use in the editor.
+	 */
+	assetUrls?: { fonts?: { [key: string]: string | undefined } }
 }
 
 /**
@@ -372,10 +383,12 @@ function TldrawEditorWithReadyStore({
 	autoFocus = true,
 	inferDarkMode,
 	cameraOptions,
+	textOptions,
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
 	isShapeHidden,
+	assetUrls,
 }: Required<
 	TldrawEditorProps & {
 		store: TLStore
@@ -430,9 +443,11 @@ function TldrawEditorWithReadyStore({
 				autoFocus,
 				inferDarkMode,
 				cameraOptions,
+				textOptions,
 				options,
 				licenseKey,
 				isShapeHidden,
+				fontAssetUrls: assetUrls?.fonts,
 			})
 
 			editor.updateViewportScreenBounds(canvasRef.current ?? container)
@@ -467,6 +482,8 @@ function TldrawEditorWithReadyStore({
 			setEditor,
 			licenseKey,
 			isShapeHidden,
+			textOptions,
+			assetUrls,
 		]
 	)
 
@@ -532,10 +549,41 @@ function TldrawEditorWithReadyStore({
 		[editor, autoFocus]
 	)
 
-	const { Canvas } = useEditorComponents()
+	const [_fontLoadingState, setFontLoadingState] = useState<{
+		editor: Editor
+		isLoaded: boolean
+	} | null>(null)
+	let fontLoadingState = _fontLoadingState
+	if (editor !== fontLoadingState?.editor) {
+		const newFontLoadingState = editor ? { editor, isLoaded: false } : null
+		if (fontLoadingState !== newFontLoadingState) setFontLoadingState(newFontLoadingState)
+		fontLoadingState = newFontLoadingState
+	}
+	useEffect(() => {
+		if (!editor) return
+		let isCancelled = false
 
-	if (!editor) {
-		return <div className="tl-canvas" ref={canvasRef} />
+		editor.fonts
+			.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
+			.finally(() => {
+				if (isCancelled) return
+				setFontLoadingState({ editor, isLoaded: true })
+			})
+
+		return () => {
+			isCancelled = true
+		}
+	}, [editor])
+
+	const { Canvas, LoadingScreen } = useEditorComponents()
+
+	if (!editor || !fontLoadingState?.isLoaded) {
+		return (
+			<>
+				{LoadingScreen && <LoadingScreen />}
+				<div className="tl-canvas" ref={canvasRef} />
+			</>
+		)
 	}
 
 	return (

package/src/lib/components/Shape.tsx

@@ -1,6 +1,7 @@
+import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { memo, useCallback, useRef } from 'react'
+import { memo, useCallback, useEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
@@ -41,6 +42,13 @@ export const Shape = memo(function Shape({
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
 
+	useEffect(() => {
+		return react('load fonts', () => {
+			const fonts = editor.fonts.getShapeFontFaces(shape)
+			editor.fonts.requestFonts(fonts)
+		})
+	}, [editor, shape])
+
 	const memoizedStuffRef = useRef({
 		transform: '',
 		clipPath: 'none',

package/src/lib/editor/Editor.ts

@@ -1,4 +1,12 @@
-import { EMPTY_ARRAY, atom, computed, react, transact, unsafe__withoutCapture } from '@tldraw/state'
+import {
+	Atom,
+	EMPTY_ARRAY,
+	atom,
+	computed,
+	react,
+	transact,
+	unsafe__withoutCapture,
+} from '@tldraw/state'
 import {
 	ComputedCache,
 	RecordType,
@@ -34,6 +42,7 @@ import {
 	TLImageAsset,
 	TLInstance,
 	TLInstancePageState,
+	TLNoteShape,
 	TLPOINTER_ID,
 	TLPage,
 	TLPageId,
@@ -129,6 +138,7 @@ import {
 import { getIncrementedName } from '../utils/getIncrementedName'
 import { isAccelKey } from '../utils/keyboard'
 import { getReorderingShapesChanges } from '../utils/reorderShapes'
+import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
 import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
 import { bindingsIndex } from './derivations/bindingsIndex'
@@ -138,6 +148,7 @@ import { deriveShapeIdsInCurrentPage } from './derivations/shapeIdsInCurrentPage
 import { ClickManager } from './managers/ClickManager'
 import { EdgeScrollManager } from './managers/EdgeScrollManager'
 import { FocusManager } from './managers/FocusManager'
+import { FontManager } from './managers/FontManager'
 import { HistoryManager } from './managers/HistoryManager'
 import { ScribbleManager } from './managers/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
@@ -224,8 +235,10 @@ export interface TLEditorOptions {
 	 * Options for the editor's camera.
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
+	textOptions?: TLTextOptions
 	options?: Partial<TldrawOptions>
 	licenseKey?: string
+	fontAssetUrls?: { [key: string]: string | undefined }
 	/**
 	 * A predicate that should return true if the given shape should be hidden.
 	 * @param shape - The shape to check.
@@ -262,11 +275,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 		tools,
 		getContainer,
 		cameraOptions,
+		textOptions,
 		initialState,
 		autoFocus,
 		inferDarkMode,
 		options,
 		isShapeHidden,
+		fontAssetUrls,
 	}: TLEditorOptions) {
 		super()
 
@@ -290,12 +305,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
 
+		this._textOptions = atom('text options', textOptions ?? null)
+
 		this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false)
 		this.disposables.add(() => this.user.dispose())
 
 		this.getContainer = getContainer
 
 		this.textMeasure = new TextManager(this)
+		this.fonts = new FontManager(this, fontAssetUrls)
+
 		this._tickManager = new TickManager(this)
 
 		class NewRoot extends RootState {
@@ -834,6 +853,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly textMeasure: TextManager
 
+	/**
+	 * A utility for managing the set of fonts that should be rendered in the document.
+	 *
+	 * @public
+	 */
+	readonly fonts: FontManager
+
 	/**
 	 * A manager for the editor's environment.
 	 *
@@ -2022,6 +2048,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
+		this.setRichTextEditor(null)
 		if (id !== this.getEditingShapeId()) {
 			if (id) {
 				const shape = this.getShape(id)
@@ -2040,6 +2067,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.run(
 				() => {
 					this._updateCurrentPageState({ editingShapeId: null })
+					this._currentRichTextEditor.set(null)
 				},
 				{ history: 'ignore' }
 			)
@@ -2047,6 +2075,42 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	// Rich text editor
+
+	private _currentRichTextEditor = atom('rich text editor', null as TiptapEditor | null)
+
+	/**
+	 * The current editing shape's text editor.
+	 *
+	 * @public
+	 */
+	@computed getRichTextEditor(): TiptapEditor | null {
+		return this._currentRichTextEditor.get()
+	}
+
+	/**
+	 * Set the current editing shape's rich text editor.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.setRichTextEditor(richTextEditorView)
+	 * ```
+	 *
+	 * @param textEditor - The text editor to set as the current editing shape's text editor.
+	 *
+	 * @public
+	 */
+	setRichTextEditor(textEditor: TiptapEditor | null) {
+		// If the new editor is different from the current one, destroy the current one
+		const current = this._currentRichTextEditor.__unsafe__getWithoutCapture()
+		if (current !== textEditor) {
+			current?.destroy()
+		}
+
+		this._currentRichTextEditor.set(textEditor)
+		return this
+	}
+
 	// Hovered
 
 	/**
@@ -2103,6 +2167,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed getHintingShapeIds() {
 		return this.getCurrentPageState().hintingShapeIds
 	}
+
 	/**
 	 * The editor's current hinting shapes.
 	 *
@@ -2251,6 +2316,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	private _textOptions: Atom<TLTextOptions | null>
+
+	/**
+	 * Get the current text options.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.getTextOptions()
+	 * ```
+	 *
+	 *  @public */
+	getTextOptions() {
+		return assertExists(this._textOptions.get(), 'Cannot use text without setting textOptions')
+	}
+
 	/* --------------------- Camera --------------------- */
 
 	/** @internal */
@@ -4207,8 +4287,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 	private _getShapeGeometryCache(): ComputedCache<Geometry2d, TLShape> {
 		return this.store.createComputedCache(
 			'bounds',
-			(shape) => this.getShapeUtil(shape).getGeometry(shape),
-			(a, b) => a.props === b.props
+			(shape) => {
+				this.fonts.trackFontsForShape(shape)
+				return this.getShapeUtil(shape).getGeometry(shape)
+			},
+			{ areRecordsEqual: (a, b) => a.props === b.props }
 		)
 	}
 
@@ -4758,9 +4841,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// Check labels first
 			if (
 				this.isShapeOfType<TLFrameShape>(shape, 'frame') ||
-				((this.isShapeOfType<TLArrowShape>(shape, 'arrow') ||
+				(this.isShapeOfType<TLArrowShape>(shape, 'arrow') && shape.props.text.trim()) ||
+				((this.isShapeOfType<TLNoteShape>(shape, 'note') ||
 					(this.isShapeOfType<TLGeoShape>(shape, 'geo') && shape.props.fill === 'none')) &&
-					shape.props.text.trim())
+					this.getShapeUtil(shape).getText(shape)?.trim())
 			) {
 				for (const childGeometry of (geometry as Group2d).children) {
 					if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
@@ -7007,7 +7091,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.createShape(myShape)
-	 * editor.createShape({ id: 'box1', type: 'text', props: { text: "ok" } })
+	 * editor.createShape({ id: 'box1', type: 'text', props: { richText: toRichText("ok") } })
 	 * ```
 	 *
 	 * @param shape - The shape (or shape partial) to create.
@@ -7025,7 +7109,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.createShapes([myShape])
-	 * editor.createShapes([{ id: 'box1', type: 'text', props: { text: "ok" } }])
+	 * editor.createShapes([{ id: 'box1', type: 'text', props: { richText: toRichText("ok") } }])
 	 * ```
 	 *
 	 * @param shapes - The shapes (or shape partials) to create.