@tldraw/editor/dist-esm/lib/exports/FontEmbedder.mjs.map

tldraw infinite canvas SDK (editor).

{
  "version": 3,
  "sources": ["../../../src/lib/exports/FontEmbedder.ts"],
  "sourcesContent": ["import { assert, bind, compact } from '@tldraw/utils'\nimport { fetchCache, resourceToDataUrl } from './fetchCache'\nimport { ParsedFontFace, parseCss, parseCssFontFaces, parseCssFontFamilyValue } from './parseCss'\n\nexport const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'\n\n/**\n * Because SVGs cannot refer to external CSS/font resources, any web fonts used in the SVG must be\n * embedded as data URLs in inlined @font-face declarations. This class is responsible for\n * collecting used font faces and creating a CSS string with embedded fonts that can be used in the\n * SVG.\n *\n * It works in three steps:\n * 1. `startFindingCurrentDocumentFontFaces` - this traverses the current document, finding all the\n *    stylesheets in use (including those imported via `@import` rules etc) and extracting the\n *    @font-face declarations from them.\n * 2. `onFontFamilyValue` - as `StyleEmbedder` traverses the SVG, it will call this method with the\n *    value of the `font-family` property for each element. We parse out the font names in use, and\n *    mark them as needing to be embedded.\n * 3. `createCss` - once all the font families have been collected, this method will return a CSS\n *    string with embedded fonts.\n */\nexport class FontEmbedder {\n\tprivate fontFacesPromise: Promise<ParsedFontFace[]> | null = null\n\tprivate readonly foundFontNames = new Set<string>()\n\tprivate readonly fontFacesToEmbed = new Set<ParsedFontFace>()\n\tprivate readonly pendingPromises: Promise<void>[] = []\n\n\tstartFindingCurrentDocumentFontFaces() {\n\t\tassert(!this.fontFacesPromise, 'FontEmbedder already started')\n\t\tthis.fontFacesPromise = getCurrentDocumentFontFaces()\n\t}\n\n\t@bind onFontFamilyValue(fontFamilyValue: string) {\n\t\tassert(this.fontFacesPromise, 'FontEmbedder not started')\n\n\t\tconst fonts = parseCssFontFamilyValue(fontFamilyValue)\n\t\tfor (const font of fonts) {\n\t\t\tif (this.foundFontNames.has(font)) return\n\t\t\tthis.foundFontNames.add(font)\n\n\t\t\tthis.pendingPromises.push(\n\t\t\t\tthis.fontFacesPromise.then((fontFaces) => {\n\t\t\t\t\tconst relevantFontFaces = fontFaces.filter((fontFace) => fontFace.fontFamilies.has(font))\n\t\t\t\t\tfor (const fontFace of relevantFontFaces) {\n\t\t\t\t\t\tif (this.fontFacesToEmbed.has(fontFace)) continue\n\n\t\t\t\t\t\tthis.fontFacesToEmbed.add(fontFace)\n\t\t\t\t\t\tfor (const url of fontFace.urls) {\n\t\t\t\t\t\t\tif (!url.resolved || url.embedded) continue\n\t\t\t\t\t\t\t// kick off fetching this font\n\t\t\t\t\t\t\turl.embedded = resourceToDataUrl(url.resolved)\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t}\n\n\tasync createCss() {\n\t\tawait Promise.all(this.pendingPromises)\n\n\t\tlet css = ''\n\n\t\tfor (const fontFace of this.fontFacesToEmbed) {\n\t\t\tlet fontFaceString = `@font-face {${fontFace.fontFace}}`\n\n\t\t\tfor (const url of fontFace.urls) {\n\t\t\t\tif (!url.embedded) continue\n\t\t\t\tconst dataUrl = await url.embedded\n\t\t\t\tif (!dataUrl) continue\n\n\t\t\t\tfontFaceString = fontFaceString.replace(url.original, dataUrl)\n\t\t\t}\n\n\t\t\tcss += fontFaceString\n\t\t}\n\n\t\treturn css\n\t}\n}\n\nasync function getCurrentDocumentFontFaces() {\n\tconst fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []\n\n\t// In exportToSvg we add the exported node to the DOM temporarily.\n\t// Because of this, and because we do a setTimeout to delay removing that node from the\n\t// DOM, when looking at document.styleSheets the number of nodes and stylesheets\n\t// can grow unbounded (especially when using \"Debug svg\" and moving shapes around).\n\t// To avoid this, we filter out the stylesheets that are part of the SVG export.\n\tconst styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(\n\t\t(styleSheet) =>\n\t\t\t!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)\n\t)\n\n\tfor (const styleSheet of styleSheetsWithoutSvgExports) {\n\t\tlet cssRules\n\t\ttry {\n\t\t\tcssRules = styleSheet.cssRules\n\t\t} catch {\n\t\t\t// some stylesheets don't allow access through the DOM. We'll try to fetch them instead.\n\t\t}\n\n\t\tif (cssRules) {\n\t\t\tfor (const rule of styleSheet.cssRules) {\n\t\t\t\tif (rule instanceof CSSFontFaceRule) {\n\t\t\t\t\tfontFaces.push(parseCssFontFaces(rule.cssText, styleSheet.href ?? document.baseURI))\n\t\t\t\t} else if (rule instanceof CSSImportRule) {\n\t\t\t\t\tconst absoluteUrl = new URL(rule.href, rule.parentStyleSheet?.href ?? document.baseURI)\n\t\t\t\t\tfontFaces.push(fetchCssFontFaces(absoluteUrl.href))\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (styleSheet.href) {\n\t\t\tfontFaces.push(fetchCssFontFaces(styleSheet.href))\n\t\t}\n\t}\n\n\treturn compact(await Promise.all(fontFaces)).flat()\n}\n\nconst fetchCssFontFaces = fetchCache(async (response: Response): Promise<ParsedFontFace[]> => {\n\tconst parsed = parseCss(await response.text(), response.url)\n\n\tconst importedFontFaces = await Promise.all(\n\t\tparsed.imports.map(({ url }) => fetchCssFontFaces(new URL(url, response.url).href))\n\t)\n\n\treturn [...parsed.fontFaces, ...compact(importedFontFaces).flat()]\n})\n"],
  "mappings": "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",
  "names": []
}