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

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

@@ -0,0 +1,252 @@
+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/editor/managers/TextManager.ts

@@ -65,32 +65,57 @@ export class TextManager {
 			padding: string
 			disableOverflowWrapBreaking?: boolean
 		}
+	): BoxModel & { scrollWidth: number } {
+		const div = document.createElement('div')
+		div.textContent = normalizeTextForDom(textToMeasure)
+		return this.measureHtml(div.innerHTML, opts)
+	}
+
+	measureHtml(
+		html: string,
+		opts: {
+			fontStyle: string
+			fontWeight: string
+			fontFamily: string
+			fontSize: number
+			lineHeight: number
+			/**
+			 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
+			 * is null, the text will be measured without wrapping, but explicit line breaks and
+			 * space are preserved.
+			 */
+			maxWidth: null | number
+			minWidth?: null | number
+			padding: string
+			disableOverflowWrapBreaking?: boolean
+		}
 	): BoxModel & { scrollWidth: number } {
 		// Duplicate our base element; we don't need to clone deep
-		const elm = this.baseElem.cloneNode() as HTMLDivElement
-		this.editor.getContainer().appendChild(elm)
+		const wrapperElm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(wrapperElm)
+		wrapperElm.innerHTML = html
+		this.baseElem.insertAdjacentElement('afterend', wrapperElm)
 
-		elm.setAttribute('dir', 'auto')
+		wrapperElm.setAttribute('dir', 'auto')
 		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
 		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
-		elm.style.setProperty('unicode-bidi', 'plaintext')
-		elm.style.setProperty('font-family', opts.fontFamily)
-		elm.style.setProperty('font-style', opts.fontStyle)
-		elm.style.setProperty('font-weight', opts.fontWeight)
-		elm.style.setProperty('font-size', opts.fontSize + 'px')
-		elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
-		elm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
-		elm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
-		elm.style.setProperty('padding', opts.padding)
-		elm.style.setProperty(
+		wrapperElm.style.setProperty('unicode-bidi', 'plaintext')
+		wrapperElm.style.setProperty('font-family', opts.fontFamily)
+		wrapperElm.style.setProperty('font-style', opts.fontStyle)
+		wrapperElm.style.setProperty('font-weight', opts.fontWeight)
+		wrapperElm.style.setProperty('font-size', opts.fontSize + 'px')
+		wrapperElm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
+		wrapperElm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
+		wrapperElm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
+		wrapperElm.style.setProperty('padding', opts.padding)
+		wrapperElm.style.setProperty(
 			'overflow-wrap',
 			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
 		)
 
-		elm.textContent = normalizeTextForDom(textToMeasure)
-		const scrollWidth = elm.scrollWidth
-		const rect = elm.getBoundingClientRect()
-		elm.remove()
+		const scrollWidth = wrapperElm.scrollWidth
+		const rect = wrapperElm.getBoundingClientRect()
+		wrapperElm.remove()
 
 		return {
 			x: 0,

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { EMPTY_ARRAY } from '@tldraw/state'
 import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
@@ -14,6 +15,7 @@ import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import type { Editor } from '../Editor'
+import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
@@ -148,6 +150,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	abstract indicator(shape: Shape): any
 
+	/**
+	 * Get the font faces that should be rendered in the document in order for this shape to render
+	 * correctly.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	getFontFaces(shape: Shape): TLFontFace[] {
+		return EMPTY_ARRAY
+	}
+
 	/**
 	 * Whether the shape can be snapped to by another shape.
 	 *

package/src/lib/editor/types/emit-types.ts

@@ -17,6 +17,7 @@ export interface TLEventMap {
 	tick: [number]
 	frame: [number]
 	'select-all-text': [{ shapeId: TLShapeId }]
+	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
 }
 
 /** @public */

package/src/lib/editor/types/external-content.ts

@@ -45,6 +45,7 @@ export interface TLBaseExternalContent {
 export interface TLTextExternalContent extends TLBaseExternalContent {
 	type: 'text'
 	text: string
+	html?: string
 }
 
 /** @public */

package/src/lib/exports/FontEmbedder.ts

@@ -2,6 +2,8 @@ import { assert, bind, compact } from '@tldraw/utils'
 import { fetchCache, resourceToDataUrl } from './fetchCache'
 import { ParsedFontFace, parseCss, parseCssFontFaces, parseCssFontFamilyValue } from './parseCss'
 
+export const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'
+
 /**
  * Because SVGs cannot refer to external CSS/font resources, any web fonts used in the SVG must be
  * embedded as data URLs in inlined @font-face declarations. This class is responsible for
@@ -81,7 +83,17 @@ export class FontEmbedder {
 async function getCurrentDocumentFontFaces() {
 	const fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []
 
-	for (const styleSheet of document.styleSheets) {
+	// In exportToSvg we add the exported node to the DOM temporarily.
+	// Because of this, and because we do a setTimeout to delay removing that node from the
+	// DOM, when looking at document.styleSheets the number of nodes and stylesheets
+	// can grow unbounded (especially when using "Debug svg" and moving shapes around).
+	// To avoid this, we filter out the stylesheets that are part of the SVG export.
+	const styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(
+		(styleSheet) =>
+			!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)
+	)
+
+	for (const styleSheet of styleSheetsWithoutSvgExports) {
 		let cssRules
 		try {
 			cssRules = styleSheet.cssRules

package/src/lib/exports/StyleEmbedder.ts

@@ -242,7 +242,7 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
-	for (const property of style) {
+	for (const [property, _] of Object.entries(style)) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)

package/src/lib/exports/exportToSvg.tsx

@@ -4,6 +4,7 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
+import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'
 import { embedMedia } from './embedMedia'
 import { getSvgJsx } from './getSvgJsx'
@@ -26,7 +27,7 @@ export async function exportToSvg(
 	// <foreignObject> elements have their styles and content inlined correctly.
 	const container = editor.getContainer()
 	const renderTarget = document.createElement('div')
-	renderTarget.className = 'tldraw-svg-export'
+	renderTarget.className = SVG_EXPORT_CLASSNAME
 	// we hide the element visually, but we don't want it to be focusable or interactive in any way either
 	renderTarget.inert = true
 	renderTarget.tabIndex = -1
@@ -83,9 +84,9 @@ export async function exportToSvg(
 
 async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 	// If any shapes have their own <foreignObject> elements, we don't want to mess with them. Our
-	// ones that we need to embed will have a class of `tl-shape-foreign-object`.
+	// ones that we need to embed will have a class of `tl-export-embed-styles`.
 	const foreignObjectChildren = [
-		...svg.querySelectorAll('foreignObject.tl-shape-foreign-object > *'),
+		...svg.querySelectorAll('foreignObject.tl-export-embed-styles > *'),
 	]
 	if (!foreignObjectChildren.length) return
 

package/src/lib/exports/getSvgAsImage.ts

@@ -16,7 +16,7 @@ export async function getSvgAsImage(
 ) {
 	const { type, width, height, quality = 1, pixelRatio = 2 } = options
 
-	let [clampedWidth, clampedHeight] = await clampToBrowserMaxCanvasSize(
+	let [clampedWidth, clampedHeight] = clampToBrowserMaxCanvasSize(
 		width * pixelRatio,
 		height * pixelRatio
 	)

package/src/lib/exports/getSvgJsx.tsx

@@ -6,7 +6,7 @@ import {
 	TLShapeId,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
-import { hasOwnProperty, promiseWithResolve } from '@tldraw/utils'
+import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
 	ComponentType,
 	Fragment,
@@ -21,6 +21,7 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import { Editor, TLRenderingShape } from '../editor/Editor'
+import { TLFontFace } from '../editor/managers/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {
 	SvgExportContext,
@@ -339,6 +340,25 @@ function SvgExport({
 		})()
 	}, [bbox, editor, exportContext, masksId, renderingShapes, singleFrameShapeId, stateAtom])
 
+	useEffect(() => {
+		const fontsInUse = new Set<TLFontFace>()
+		for (const { id } of renderingShapes) {
+			for (const font of editor.fonts.getShapeFontFaces(id)) {
+				fontsInUse.add(font)
+			}
+		}
+
+		for (const font of fontsInUse) {
+			addExportDef({
+				key: uniqueId(),
+				getElement: async () => {
+					const declaration = await editor.fonts.toEmbeddedCssDeclaration(font)
+					return <style>{declaration}</style>
+				},
+			})
+		}
+	}, [editor, renderingShapes, addExportDef])
+
 	useEffect(() => {
 		if (shapeElements === null) return
 		onMount()
@@ -407,7 +427,7 @@ function ForeignObjectShape({
 				y={bbox.minY}
 				width={bbox.w}
 				height={bbox.h}
-				className="tl-shape-foreign-object"
+				className="tl-shape-foreign-object tl-export-embed-styles"
 			>
 				<div
 					className={className}

package/src/lib/exports/parseCss.ts

@@ -134,6 +134,7 @@ const inheritedProperties = new Set([
 	'list-style-type',
 	'list-style',
 	'orphans',
+	'overflow-wrap',
 	'quotes',
 	'tab-size',
 	'text-align',

package/src/lib/globals/environment.ts

@@ -11,6 +11,7 @@ const tlenv = {
 	isAndroid: false,
 	isWebview: false,
 	isDarwin: false,
+	hasCanvasSupport: false,
 }
 
 if (typeof window !== 'undefined' && 'navigator' in window) {
@@ -20,6 +21,8 @@ if (typeof window !== 'undefined' && 'navigator' in window) {
 	tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
 	tlenv.isAndroid = /android/i.test(navigator.userAgent)
 	tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+	tlenv.hasCanvasSupport =
+		typeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window
 }
 
 export { tlenv }

package/src/lib/hooks/useCanvasEvents.ts

@@ -100,8 +100,9 @@ export function useCanvasEvents() {
 				if (
 					e.target.tagName !== 'A' &&
 					e.target.tagName !== 'TEXTAREA' &&
+					e.target.isContentEditable &&
 					// When in EditingShape state, we are actually clicking on a 'DIV'
-					// not A/TEXTAREA element yet. So, to preserve cursor position
+					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
 					// for edit mode on mobile we need to not preventDefault.
 					// TODO: Find out if we still need this preventDefault in general though.
 					!(editor.getEditingShape() && e.target.className.includes('tl-text-content'))

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -25,6 +25,7 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input
 				if (
 					IGNORED_TAGS.includes((target as Element).tagName?.toLocaleLowerCase()) ||
+					(target as HTMLElement).isContentEditable ||
 					editor.isIn('select.editing_shape')
 				) {
 					return

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -0,0 +1,29 @@
+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/usePassThroughWheelEvents.ts

@@ -5,7 +5,6 @@ import { useContainer } from './useContainer'
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
-
 	const container = useContainer()
 
 	useEffect(() => {

package/src/lib/hooks/useViewportHeight.ts

@@ -0,0 +1,37 @@
+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/license/LicenseManager.test.ts

@@ -56,19 +56,22 @@ describe('LicenseManager', () => {
 	})
 
 	it('Signals that it is development mode when appropriate', async () => {
-		// @ts-ignore
-		delete window.location
-		// @ts-ignore
-		window.location = new URL('http://localhost:3000')
-
-		const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey, 'development')
-		const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
-		const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
-		expect(result).toMatchObject({
-			isLicenseParseable: true,
-			isDomainValid: false,
-			isDevelopment: true,
-		})
+		const schemes = ['http', 'https']
+		for (const scheme of schemes) {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(`${scheme}://localhost:3000`)
+
+			const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey, 'development')
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+			expect(result).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: false,
+				isDevelopment: true,
+			})
+		}
 	})
 
 	it('Cleanses out valid keys that accidentally have zero-width characters or newlines', async () => {