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

package/src/lib/editor/managers/FontManager.ts

@@ -1,252 +0,0 @@
-import { atom, Atom, EMPTY_ARRAY, transact } from '@tldraw/state'
-import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import {
-	areArraysShallowEqual,
-	compact,
-	FileHelpers,
-	mapObjectMapValues,
-	objectMapEntries,
-} from '@tldraw/utils'
-import { Editor } from '../Editor'
-
-/**
- * Represents the `src` property of a {@link TLFontFace}.
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
- * @public
- */
-export interface TLFontFaceSource {
-	/**
-	 * A URL from which to load the font. If the value here is a key in
-	 * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
-	 */
-	url: string
-	format?: string
-	tech?: string
-}
-
-/**
- * A font face that can be used in the editor. The properties of this are largely the same as the
- * ones in the
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
- * @public
- */
-export interface TLFontFace {
-	/**
-	 * How this font can be referred to in CSS.
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
-	 */
-	readonly family: string
-	/**
-	 * The source of the font. This
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
-	 */
-	readonly src: TLFontFaceSource
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
-	 */
-	readonly ascentOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
-	 */
-	readonly descentOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
-	 */
-	readonly stretch?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
-	 */
-	readonly style?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
-	 */
-	readonly weight?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
-	 */
-	readonly featureSettings?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
-	 */
-	readonly lineGapOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
-	 */
-	readonly unicodeRange?: string
-}
-
-interface FontState {
-	readonly state: 'loading' | 'ready' | 'error'
-	readonly instance: FontFace
-	readonly loadingPromise: Promise<void>
-}
-
-/** @public */
-export class FontManager {
-	constructor(
-		private readonly editor: Editor,
-		private readonly assetUrls?: { [key: string]: string | undefined }
-	) {
-		this.shapeFontFacesCache = editor.store.createComputedCache(
-			'shape font faces',
-			(shape: TLShape) => {
-				const shapeUtil = this.editor.getShapeUtil(shape)
-				return shapeUtil.getFontFaces(shape)
-			},
-			{ areResultsEqual: areArraysShallowEqual }
-		)
-
-		this.shapeFontLoadStateCache = editor.store.createComputedCache(
-			'shape font load state',
-			(shape: TLShape) => {
-				const states = this.getShapeFontFaces(shape).map((face) => this.getFontState(face))
-				return states
-			},
-			{ areResultsEqual: areArraysShallowEqual }
-		)
-	}
-
-	private readonly shapeFontFacesCache
-	private readonly shapeFontLoadStateCache
-
-	getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {
-		const shapeId = typeof shape === 'string' ? shape : shape.id
-		return this.shapeFontFacesCache.get(shapeId) ?? EMPTY_ARRAY
-	}
-
-	trackFontsForShape(shape: TLShape | TLShapeId) {
-		const shapeId = typeof shape === 'string' ? shape : shape.id
-		this.shapeFontLoadStateCache.get(shapeId)
-	}
-
-	async loadRequiredFontsForCurrentPage(limit = Infinity) {
-		const neededFonts = new Set<TLFontFace>()
-		for (const shapeId of this.editor.getCurrentPageShapeIds()) {
-			for (const font of this.getShapeFontFaces(this.editor.getShape(shapeId)!)) {
-				neededFonts.add(font)
-			}
-		}
-
-		if (neededFonts.size > limit) {
-			return
-		}
-
-		const promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font))
-		await Promise.all(promises)
-	}
-
-	private readonly fontStates = atom<ReadonlyMap<TLFontFace, Atom<FontState>>>(
-		'font states',
-		new Map()
-	)
-	private getFontState(font: TLFontFace): FontState | null {
-		return this.fontStates.get().get(font)?.get() ?? null
-	}
-
-	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
-		const state = this.getFontState(font)
-		if (state) return state.loadingPromise
-
-		const instance = this.findOrCreateFontFace(font)
-		const stateAtom = atom<FontState>('font state', {
-			state: 'loading',
-			instance,
-			loadingPromise: instance
-				.load()
-				.then(() => {
-					document.fonts.add(instance)
-					stateAtom.update((s) => ({ ...s, state: 'ready' }))
-				})
-				.catch((err) => {
-					console.error(err)
-					stateAtom.update((s) => ({ ...s, state: 'error' }))
-				}),
-		})
-		this.fontStates.update((map) => {
-			const newMap = new Map(map)
-			newMap.set(font, stateAtom)
-			return newMap
-		})
-
-		return stateAtom.get().loadingPromise
-	}
-
-	private fontsToLoad = new Set<TLFontFace>()
-	requestFonts(fonts: TLFontFace[]) {
-		if (!this.fontsToLoad.size) {
-			queueMicrotask(() => {
-				if (this.editor.isDisposed) return
-				const toLoad = this.fontsToLoad
-				this.fontsToLoad = new Set()
-				transact(() => {
-					for (const font of toLoad) {
-						this.ensureFontIsLoaded(font)
-					}
-				})
-			})
-		}
-		for (const font of fonts) {
-			this.fontsToLoad.add(font)
-		}
-	}
-
-	private findOrCreateFontFace(font: TLFontFace) {
-		for (const existing of document.fonts) {
-			if (
-				existing.family === font.family &&
-				objectMapEntries(defaultFontFaceDescriptors).every(
-					([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)
-				)
-			) {
-				return existing
-			}
-		}
-
-		const url = this.assetUrls?.[font.src.url] ?? font.src.url
-		const instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {
-			...mapObjectMapValues(defaultFontFaceDescriptors, (key) => font[key]),
-			display: 'swap',
-		})
-
-		document.fonts.add(instance)
-
-		return instance
-	}
-
-	async toEmbeddedCssDeclaration(font: TLFontFace) {
-		const url = this.assetUrls?.[font.src.url] ?? font.src.url
-		const dataUrl = await FileHelpers.urlToDataUrl(url)
-
-		const src = compact([
-			`url("${dataUrl}")`,
-			font.src.format ? `format(${font.src.format})` : null,
-			font.src.tech ? `tech(${font.src.tech})` : null,
-		]).join(' ')
-		return compact([
-			`@font-face {`,
-			`  font-family: ${font.family};`,
-			`  src: ${src};`,
-			font.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,
-			font.descentOverride ? `  descent-override: ${font.descentOverride};` : null,
-			font.stretch ? `  font-stretch: ${font.stretch};` : null,
-			font.style ? `  font-style: ${font.style};` : null,
-			font.weight ? `  font-weight: ${font.weight};` : null,
-			font.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,
-			font.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,
-			font.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,
-			`}`,
-		]).join('\n')
-	}
-}
-
-// From https://drafts.csswg.org/css-font-loading/#fontface-interface
-const defaultFontFaceDescriptors = {
-	style: 'normal',
-	weight: 'normal',
-	stretch: 'normal',
-	unicodeRange: 'U+0-10FFFF',
-	featureSettings: 'normal',
-	ascentOverride: 'normal',
-	descentOverride: 'normal',
-	lineGapOverride: 'normal',
-}

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,29 +0,0 @@
-import { RefObject, useEffect } from 'react'
-import { preventDefault } from '../utils/dom'
-import { useContainer } from './useContainer'
-
-/** @public */
-export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
-	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
-	const container = useContainer()
-
-	useEffect(() => {
-		function onMouseOver(e: MouseEvent) {
-			if ((e as any).isSpecialRedispatchedEvent) return
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new PointerEvent(e.type, e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
-		}
-
-		const elm = ref.current
-		if (!elm) return
-
-		elm.addEventListener('mouseover', onMouseOver, { passive: false })
-		return () => {
-			elm.removeEventListener('mouseover', onMouseOver)
-		}
-	}, [container, ref])
-}

package/src/lib/hooks/useViewportHeight.ts

@@ -1,37 +0,0 @@
-import { useLayoutEffect, useState } from 'react'
-
-/*!
- * BSD License: https://github.com/outline/rich-markdown-editor/blob/main/LICENSE
- * Copyright (c) 2020 General Outline, Inc (https://www.getoutline.com/) and individual contributors.
- *
- * Returns the height of the viewport.
- * This is mainly to account for virtual keyboards on mobile devices.
- *
- * N.B. On iOS, you have to take into account the offsetTop as well so that you get an accurate position
- * while using the virtual keyboard.
- */
-/** @public */
-export function useViewportHeight(): number {
-	const visualViewport = window.visualViewport
-	const [height, setHeight] = useState<number>(() =>
-		visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
-	)
-
-	useLayoutEffect(() => {
-		const handleResize = () => {
-			const visualViewport = window.visualViewport
-			setHeight(() =>
-				visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
-			)
-		}
-
-		window.visualViewport?.addEventListener('resize', handleResize)
-		window.visualViewport?.addEventListener('scroll', handleResize)
-
-		return () => {
-			window.visualViewport?.removeEventListener('resize', handleResize)
-			window.visualViewport?.removeEventListener('scroll', handleResize)
-		}
-	}, [])
-	return height
-}

package/src/lib/utils/richText.ts

@@ -1,72 +0,0 @@
-import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'
-import { Node } from '@tiptap/pm/model'
-import { EditorProviderProps } from '@tiptap/react'
-import { TLRichText } from '@tldraw/tlschema'
-import { assert } from '@tldraw/utils'
-import { Editor } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager'
-
-/**
- * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.
- *
- * @public
- */
-export type TiptapEditor = TTEditor
-
-/**
- * A TipTap node. See {@link https://tiptap.dev/docs}.
- * @public
- */
-export type TiptapNode = Node
-
-/** @public */
-export interface TLTextOptions {
-	tipTapConfig?: EditorProviderProps
-	addFontsFromNode?: RichTextFontVisitor
-}
-
-/** @public */
-export interface RichTextFontVisitorState {
-	readonly family: string
-	readonly weight: string
-	readonly style: string
-}
-
-/** @public */
-export type RichTextFontVisitor = (
-	node: TiptapNode,
-	state: RichTextFontVisitorState,
-	addFont: (font: TLFontFace) => void
-) => RichTextFontVisitorState
-
-/** @public */
-export function getFontsFromRichText(
-	editor: Editor,
-	richText: TLRichText,
-	initialState: RichTextFontVisitorState
-) {
-	const { tipTapConfig, addFontsFromNode } = editor.getTextOptions()
-	assert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')
-	assert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')
-
-	const schema = getSchema(tipTapConfig.extensions ?? [])
-	const rootNode = Node.fromJSON(schema, richText as JSONContent)
-
-	const fonts = new Set<TLFontFace>()
-
-	function addFont(font: TLFontFace) {
-		fonts.add(font)
-	}
-
-	function visit(node: TiptapNode, state: RichTextFontVisitorState) {
-		state = addFontsFromNode!(node, state, addFont)
-
-		for (const child of node.children) {
-			visit(child, state)
-		}
-	}
-
-	visit(rootNode, initialState)
-
-	return Array.from(fonts)
-}