Styles API follow-ups (#1636)

tldraw-zero themed follow-ups to the styles API added in #1580.

- Removed style related helpers from `ShapeUtil`
- `editor.css` no longer includes the tldraw default color palette.
Instead, a global `DefaultColorPalette` is defined as part of the color
style. If developers wish to cusomise the colors, they can mutate that
global.
- `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an
"svg export context" that can be used to add `<defs>` to the exported
SVG element. Converting e.g. fonts to inlined data urls is now the
responsibility of the shapes that use them rather than the Editor.
- `usePattern` is not longer a core part of the editor. Instead,
`ShapeUtil` has a `getCanvasSvgDefs` method for returning react
components representing anything a shape needs included in `<defs>` for
the canvas.
- The shape-specific cleanup logic in `setStyle` has been deleted. It
turned out that none of that logic has been running anyway, and instead
the relevant logic lives in shape `onBeforeChange` callbacks already.

### Change Type
- [x] `minor` — New feature

### Test Plan


- [x] Unit Tests
- [x] End to end tests

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/editor/src/lib/components/Canvas.tsx

@@ -1,7 +1,7 @@
 import { Matrix2d, toDomPrecision } from '@tldraw/primitives'
 import { react, track, useQuickReactor, useValue } from '@tldraw/state'
 import { TLHandle, TLShapeId } from '@tldraw/tlschema'
-import { dedupe, modulate } from '@tldraw/utils'
+import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import React from 'react'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useCoarsePointer } from '../hooks/useCoarsePointer'
@@ -11,7 +11,6 @@ import { useEditorComponents } from '../hooks/useEditorComponents'
 import { useFixSafariDoubleTapZoomPencilEvents } from '../hooks/useFixSafariDoubleTapZoomPencilEvents'
 import { useGestureEvents } from '../hooks/useGestureEvents'
 import { useHandleEvents } from '../hooks/useHandleEvents'
-import { usePattern } from '../hooks/usePattern'
 import { useScreenBounds } from '../hooks/useScreenBounds'
 import { debugFlags } from '../utils/debug-flags'
 import { LiveCollaborators } from './LiveCollaborators'
@@ -60,32 +59,28 @@ export const Canvas = track(function Canvas() {
 		[editor]
 	)
 
-	const { context: patternContext, isReady: patternIsReady } = usePattern()
-
 	const events = useCanvasEvents()
 
-	React.useEffect(() => {
-		if (patternIsReady && editor.isSafari) {
-			const htmlElm = rHtmlLayer.current
-
-			if (htmlElm) {
-				// Wait for `patternContext` to be picked up
-				requestAnimationFrame(() => {
-					htmlElm.style.display = 'none'
-
-					// Wait for 'display = "none"' to take effect
-					requestAnimationFrame(() => {
-						htmlElm.style.display = ''
-					})
-				})
+	const shapeSvgDefs = useValue(
+		'shapeSvgDefs',
+		() => {
+			const shapeSvgDefsByKey = new Map<string, JSX.Element>()
+			for (const util of objectMapValues(editor.shapeUtils)) {
+				if (!util) return
+				const defs = util.getCanvasSvgDefs()
+				for (const { key, component: Component } of defs) {
+					if (shapeSvgDefsByKey.has(key)) continue
+					shapeSvgDefsByKey.set(key, <Component key={key} />)
+				}
 			}
-		}
-	}, [editor, patternIsReady])
+			return [...shapeSvgDefsByKey.values()]
+		},
+		[editor]
+	)
 
 	React.useEffect(() => {
 		rCanvas.current?.focus()
 	}, [])
-
 	return (
 		<div ref={rCanvas} draggable={false} className="tl-canvas" data-testid="canvas" {...events}>
 			{Background && <Background />}
@@ -94,7 +89,7 @@ export const Canvas = track(function Canvas() {
 			<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
 				<svg className="tl-svg-context">
 					<defs>
-						{patternContext}
+						{shapeSvgDefs}
 						{Cursor && <Cursor />}
 						<CollaboratorHint />
 						<ArrowheadDot />