@tldraw/editor 3.12.0-canary.d81bcb86d4e7 → 3.12.0-canary.e333011facbe
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +40 -3
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/lib/TldrawEditor.js +4 -0
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +24 -8
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/exports/StyleEmbedder.js +19 -5
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
- package/dist-cjs/lib/exports/cssRules.js +127 -0
- package/dist-cjs/lib/exports/cssRules.js.map +7 -0
- package/dist-cjs/lib/exports/parseCss.js +0 -69
- package/dist-cjs/lib/exports/parseCss.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +40 -3
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/TldrawEditor.mjs +4 -0
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +24 -8
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/exports/StyleEmbedder.mjs +21 -12
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
- package/dist-esm/lib/exports/cssRules.mjs +107 -0
- package/dist-esm/lib/exports/cssRules.mjs.map +7 -0
- package/dist-esm/lib/exports/parseCss.mjs +0 -69
- package/dist-esm/lib/exports/parseCss.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/package.json +7 -7
- package/src/lib/TldrawEditor.tsx +27 -1
- package/src/lib/editor/Editor.ts +52 -8
- package/src/lib/exports/StyleEmbedder.ts +25 -15
- package/src/lib/exports/cssRules.ts +126 -0
- package/src/lib/exports/parseCss.ts +0 -79
- package/src/version.ts +3 -3
|
@@ -23,6 +23,7 @@ __export(StyleEmbedder_exports, {
|
|
|
23
23
|
module.exports = __toCommonJS(StyleEmbedder_exports);
|
|
24
24
|
var import_utils = require("@tldraw/utils");
|
|
25
25
|
var import_FontEmbedder = require("./FontEmbedder");
|
|
26
|
+
var import_cssRules = require("./cssRules");
|
|
26
27
|
var import_domUtils = require("./domUtils");
|
|
27
28
|
var import_fetchCache = require("./fetchCache");
|
|
28
29
|
var import_parseCss = require("./parseCss");
|
|
@@ -184,25 +185,38 @@ function styleFromPseudoElement(element, pseudo) {
|
|
|
184
185
|
}
|
|
185
186
|
function styleFromComputedStyleMap(style, { defaultStyles, parentStyles }) {
|
|
186
187
|
const styles = {};
|
|
188
|
+
const currentColor = style.get("color")?.toString() || "";
|
|
189
|
+
const ruleOptions = {
|
|
190
|
+
currentColor,
|
|
191
|
+
parentStyles,
|
|
192
|
+
defaultStyles,
|
|
193
|
+
getStyle: (property) => style.get(property)?.toString() ?? ""
|
|
194
|
+
};
|
|
187
195
|
for (const property of style.keys()) {
|
|
188
196
|
if (!(0, import_parseCss.shouldIncludeCssProperty)(property)) continue;
|
|
189
197
|
const value = style.get(property).toString();
|
|
190
198
|
if (defaultStyles[property] === value) continue;
|
|
191
|
-
|
|
192
|
-
if (
|
|
193
|
-
continue;
|
|
199
|
+
const rule = (0, import_utils.getOwnProperty)(import_cssRules.cssRules, property);
|
|
200
|
+
if (rule && rule(value, property, ruleOptions)) continue;
|
|
194
201
|
styles[property] = value;
|
|
195
202
|
}
|
|
196
203
|
return styles;
|
|
197
204
|
}
|
|
198
205
|
function styleFromComputedStyle(style, { defaultStyles, parentStyles }) {
|
|
199
206
|
const styles = {};
|
|
207
|
+
const currentColor = style.color;
|
|
208
|
+
const ruleOptions = {
|
|
209
|
+
currentColor,
|
|
210
|
+
parentStyles,
|
|
211
|
+
defaultStyles,
|
|
212
|
+
getStyle: (property) => style.getPropertyValue(property)
|
|
213
|
+
};
|
|
200
214
|
for (const property in style) {
|
|
201
215
|
if (!(0, import_parseCss.shouldIncludeCssProperty)(property)) continue;
|
|
202
216
|
const value = style.getPropertyValue(property);
|
|
203
217
|
if (defaultStyles[property] === value) continue;
|
|
204
|
-
|
|
205
|
-
if (
|
|
218
|
+
const rule = (0, import_utils.getOwnProperty)(import_cssRules.cssRules, property);
|
|
219
|
+
if (rule && rule(value, property, ruleOptions)) continue;
|
|
206
220
|
styles[property] = value;
|
|
207
221
|
}
|
|
208
222
|
return styles;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/exports/StyleEmbedder.ts"],
|
|
4
|
-
"sourcesContent": ["import { assertExists, objectMapValues, uniqueId } from '@tldraw/utils'\nimport { FontEmbedder } from './FontEmbedder'\nimport {\n\telementStyle,\n\tgetComputedStyle,\n\tgetRenderedChildNodes,\n\tgetRenderedChildren,\n} from './domUtils'\nimport { resourceToDataUrl } from './fetchCache'\nimport {\n\tisPropertyCoveredByCurrentColor,\n\tisPropertyInherited,\n\tparseCssValueUrls,\n\tshouldIncludeCssProperty,\n} from './parseCss'\n\ntype Styles = { [K in string]?: string }\ntype ReadonlyStyles = { readonly [K in string]?: string }\nconst NO_STYLES = {} as const\n\ninterface ElementStyleInfo {\n\tself: Styles\n\tbefore: Styles | undefined\n\tafter: Styles | undefined\n}\n\nexport class StyleEmbedder {\n\tconstructor(private readonly root: Element) {}\n\tprivate readonly styles = new Map<Element, ElementStyleInfo>()\n\treadonly fonts = new FontEmbedder()\n\n\treadRootElementStyles(rootElement: Element) {\n\t\t// when reading a root, we always apply _all_ the styles, even if they match the defaults\n\t\tthis.readElementStyles(rootElement, {\n\t\t\tshouldRespectDefaults: false,\n\t\t\tshouldSkipInheritedParentStyles: false,\n\t\t})\n\n\t\tconst children = Array.from(getRenderedChildren(rootElement))\n\t\twhile (children.length) {\n\t\t\tconst child = children.pop()!\n\t\t\tchildren.push(...getRenderedChildren(child))\n\n\t\t\t// when reading children, we don't apply styles that match the defaults for that\n\t\t\t// element, or that would be inherited from the parent\n\t\t\tthis.readElementStyles(child, {\n\t\t\t\tshouldRespectDefaults: true,\n\t\t\t\tshouldSkipInheritedParentStyles: true,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate readElementStyles(\n\t\telement: Element,\n\t\t{ shouldRespectDefaults = true, shouldSkipInheritedParentStyles = true }\n\t) {\n\t\tconst defaultStyles = shouldRespectDefaults\n\t\t\t? getDefaultStylesForTagName(element.tagName.toLowerCase())\n\t\t\t: NO_STYLES\n\n\t\tconst parentStyles = Object.assign({}, NO_STYLES) as Styles\n\t\tif (shouldSkipInheritedParentStyles) {\n\t\t\tlet el = element.parentElement\n\t\t\t// Keep going up the tree to find all the relevant styles\n\t\t\twhile (el) {\n\t\t\t\tconst currentStyles = this.styles.get(el)?.self\n\t\t\t\tfor (const style in currentStyles) {\n\t\t\t\t\tif (!parentStyles[style]) {\n\t\t\t\t\t\tparentStyles[style] = currentStyles[style]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tel = el.parentElement\n\t\t\t}\n\t\t}\n\n\t\tconst info: ElementStyleInfo = {\n\t\t\tself: styleFromElement(element, { defaultStyles, parentStyles }),\n\t\t\tbefore: styleFromPseudoElement(element, '::before'),\n\t\t\tafter: styleFromPseudoElement(element, '::after'),\n\t\t}\n\t\tthis.styles.set(element, info)\n\t}\n\n\tfetchResources() {\n\t\tconst promises: Promise<void>[] = []\n\n\t\tfor (const info of this.styles.values()) {\n\t\t\tfor (const styles of objectMapValues(info)) {\n\t\t\t\tif (!styles) continue\n\t\t\t\tfor (const [property, value] of Object.entries(styles)) {\n\t\t\t\t\tif (!value) continue\n\t\t\t\t\tif (property === 'font-family') {\n\t\t\t\t\t\tthis.fonts.onFontFamilyValue(value)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst urlMatches = parseCssValueUrls(value)\n\t\t\t\t\tif (urlMatches.length === 0) continue\n\n\t\t\t\t\tpromises.push(\n\t\t\t\t\t\t...urlMatches.map(async ({ url, original }) => {\n\t\t\t\t\t\t\tconst dataUrl = (await resourceToDataUrl(url)) ?? 'data:'\n\t\t\t\t\t\t\tstyles[property] = value.replace(original, `url(\"${dataUrl}\")`)\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\n\t\treturn Promise.all(promises)\n\t}\n\n\t// custom elements are tricky. if we serialize the dom as-is, the custom elements wont have\n\t// their shadow-dom contents serialized. after we've read all the styles, we need to unwrap the\n\t// contents of each custom elements shadow dom directly into the parent element itself.\n\tunwrapCustomElements() {\n\t\tconst visited = new Set<Node>()\n\n\t\tconst visit = (element: Element, clonedParent: Element | null) => {\n\t\t\tif (visited.has(element)) return\n\t\t\tvisited.add(element)\n\n\t\t\tconst shadowRoot = element.shadowRoot\n\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst clonedCustomEl = document.createElement('div')\n\t\t\t\tthis.styles.set(clonedCustomEl, this.styles.get(element)!)\n\n\t\t\t\tclonedCustomEl.setAttribute('data-tl-custom-element', element.tagName)\n\t\t\t\t;(clonedParent ?? element.parentElement!).appendChild(clonedCustomEl)\n\n\t\t\t\tfor (const child of shadowRoot.childNodes) {\n\t\t\t\t\tif (child instanceof Element) {\n\t\t\t\t\t\tvisit(child, clonedCustomEl)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tclonedCustomEl.appendChild(child.cloneNode(true))\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\telement.remove()\n\t\t\t} else if (clonedParent) {\n\t\t\t\tif (element.tagName.toLowerCase() === 'style') {\n\t\t\t\t\t// we don't clone style tags at that would break the style scoping. instead we\n\t\t\t\t\t// rely on the computed styles we've already read\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst clonedEl = element.cloneNode(false) as Element\n\t\t\t\tthis.styles.set(clonedEl, this.styles.get(element)!)\n\n\t\t\t\tclonedParent.appendChild(clonedEl)\n\n\t\t\t\tfor (const child of getRenderedChildNodes(element)) {\n\t\t\t\t\tif (child instanceof Element) {\n\t\t\t\t\t\tvisit(child, clonedEl)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tclonedEl.appendChild(child.cloneNode(true))\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (const element of this.styles.keys()) {\n\t\t\tvisit(element, null)\n\t\t}\n\t}\n\n\tembedStyles(): string {\n\t\tlet css = ''\n\n\t\tfor (const [element, info] of this.styles) {\n\t\t\tif (info.after || info.before) {\n\t\t\t\tconst className = `pseudo-${uniqueId()}`\n\t\t\t\telement.classList.add(className)\n\n\t\t\t\tif (info.before) {\n\t\t\t\t\tcss += `.${className}::before {${formatCss(info.before)}}\\n`\n\t\t\t\t}\n\t\t\t\tif (info.after) {\n\t\t\t\t\tcss += `.${className}::after {${formatCss(info.after)}}\\n`\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst style = elementStyle(element)\n\t\t\tfor (const [property, value] of Object.entries(info.self)) {\n\t\t\t\tif (!value) continue\n\t\t\t\tstyle.setProperty(property, value)\n\t\t\t}\n\n\t\t\t// in HTML, font-kerning: auto is equivalent to font-kerning: normal. But in SVG, it's\n\t\t\t// none. We set it to normal here to match the HTML behavior, as otherwise this can\n\t\t\t// cause rendering differences.\n\t\t\tif (style.fontKerning === 'auto') {\n\t\t\t\tstyle.fontKerning = 'normal'\n\t\t\t}\n\t\t}\n\n\t\treturn css\n\t}\n\n\tasync getFontFaceCss() {\n\t\treturn await this.fonts.createCss()\n\t}\n\n\tdispose() {\n\t\tdestroyDefaultStyleFrame()\n\t}\n}\n\ninterface ReadStyleOpts {\n\tdefaultStyles: ReadonlyStyles\n\tparentStyles: ReadonlyStyles\n}\n\nfunction styleFromElement(element: Element, { defaultStyles, parentStyles }: ReadStyleOpts) {\n\t// `computedStyleMap` produces a more accurate representation of the styles, but it's not\n\t// supported in firefox at the time of writing. So we fall back to `getComputedStyle` if it's\n\t// not available.\n\tif (element.computedStyleMap) {\n\t\treturn styleFromComputedStyleMap(element.computedStyleMap(), { defaultStyles, parentStyles })\n\t}\n\treturn styleFromComputedStyle(getComputedStyle(element), { defaultStyles, parentStyles })\n}\n\nfunction styleFromPseudoElement(element: Element, pseudo: string) {\n\t// the equivalent of `computedStyleMap` for pseudo-elements isn't even fully specced out yet, so\n\t// for those we have to use `getComputedStyle` in all browsers.\n\tconst style = getComputedStyle(element, pseudo)\n\n\tconst content = style.getPropertyValue('content')\n\tif (content === '' || content === 'none') {\n\t\treturn undefined\n\t}\n\n\treturn styleFromComputedStyle(style, { defaultStyles: NO_STYLES, parentStyles: NO_STYLES })\n}\n\nfunction styleFromComputedStyleMap(\n\tstyle: StylePropertyMapReadOnly,\n\t{ defaultStyles, parentStyles }: ReadStyleOpts\n) {\n\tconst styles: Record<string, string> = {}\n\tfor (const property of style.keys()) {\n\t\tif (!shouldIncludeCssProperty(property)) continue\n\n\t\tconst value = style.get(property)!.toString()\n\n\t\tif (defaultStyles[property] === value) continue\n\t\tif (parentStyles[property] === value && isPropertyInherited(property)) continue\n\t\tif (isPropertyCoveredByCurrentColor(style.get('color')?.toString() || '', property, value))\n\t\t\tcontinue\n\n\t\tstyles[property] = value\n\t}\n\n\treturn styles\n}\n\nfunction styleFromComputedStyle(\n\tstyle: CSSStyleDeclaration,\n\t{ defaultStyles, parentStyles }: ReadStyleOpts\n) {\n\tconst styles: Record<string, string> = {}\n\tfor (const property in style) {\n\t\tif (!shouldIncludeCssProperty(property)) continue\n\n\t\tconst value = style.getPropertyValue(property)\n\n\t\tif (defaultStyles[property] === value) continue\n\t\tif (parentStyles[property] === value && isPropertyInherited(property)) continue\n\t\tif (isPropertyCoveredByCurrentColor(style.color, property, value)) continue\n\n\t\tstyles[property] = value\n\t}\n\treturn styles\n}\n\nfunction formatCss(style: ReadonlyStyles) {\n\tlet cssText = ''\n\tfor (const [property, value] of Object.entries(style)) {\n\t\tcssText += `${property}: ${value};`\n\t}\n\treturn cssText\n}\n\n// when we're figuring out the default values for a tag, we need read them from a separate document\n// so they're not affected by the current document's styles\nlet defaultStyleFrame:\n\t| { iframe: HTMLIFrameElement; foreignObject: SVGForeignObjectElement; document: Document }\n\t| undefined\nconst defaultStylesByTagName: Record<string, ReadonlyStyles> = {}\nfunction getDefaultStyleFrame() {\n\tif (!defaultStyleFrame) {\n\t\tconst frame = document.createElement('iframe')\n\t\tframe.style.display = 'none'\n\t\tdocument.body.appendChild(frame)\n\t\tconst frameDocument = assertExists(frame.contentDocument, 'frame must have a document')\n\t\tconst svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n\t\tconst foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')\n\t\tsvg.appendChild(foreignObject)\n\t\tframeDocument.body.appendChild(svg)\n\t\tdefaultStyleFrame = { iframe: frame, foreignObject, document: frameDocument }\n\t}\n\treturn defaultStyleFrame\n}\n\nfunction destroyDefaultStyleFrame() {\n\tif (defaultStyleFrame) {\n\t\tdocument.body.removeChild(defaultStyleFrame.iframe)\n\t\tdefaultStyleFrame = undefined\n\t}\n}\n\nconst defaultStyleReadOptions: ReadStyleOpts = { defaultStyles: NO_STYLES, parentStyles: NO_STYLES }\nfunction getDefaultStylesForTagName(tagName: string) {\n\tlet existing = defaultStylesByTagName[tagName]\n\tif (!existing) {\n\t\tconst { foreignObject, document } = getDefaultStyleFrame()\n\t\tconst element = document.createElement(tagName)\n\t\tforeignObject.appendChild(element)\n\t\texisting = element.computedStyleMap\n\t\t\t? styleFromComputedStyleMap(element.computedStyleMap(), defaultStyleReadOptions)\n\t\t\t: styleFromComputedStyle(getComputedStyle(element), defaultStyleReadOptions)\n\t\tforeignObject.removeChild(element)\n\t\tdefaultStylesByTagName[tagName] = existing\n\t}\n\treturn existing\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { assertExists, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'\nimport { FontEmbedder } from './FontEmbedder'\nimport { ReadonlyStyles, Styles, cssRules } from './cssRules'\nimport {\n\telementStyle,\n\tgetComputedStyle,\n\tgetRenderedChildNodes,\n\tgetRenderedChildren,\n} from './domUtils'\nimport { resourceToDataUrl } from './fetchCache'\nimport { parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'\n\nconst NO_STYLES = {} as const\n\ninterface ElementStyleInfo {\n\tself: Styles\n\tbefore: Styles | undefined\n\tafter: Styles | undefined\n}\n\nexport class StyleEmbedder {\n\tconstructor(private readonly root: Element) {}\n\tprivate readonly styles = new Map<Element, ElementStyleInfo>()\n\treadonly fonts = new FontEmbedder()\n\n\treadRootElementStyles(rootElement: Element) {\n\t\t// when reading a root, we always apply _all_ the styles, even if they match the defaults\n\t\tthis.readElementStyles(rootElement, {\n\t\t\tshouldRespectDefaults: false,\n\t\t\tshouldSkipInheritedParentStyles: false,\n\t\t})\n\n\t\tconst children = Array.from(getRenderedChildren(rootElement))\n\t\twhile (children.length) {\n\t\t\tconst child = children.pop()!\n\t\t\tchildren.push(...getRenderedChildren(child))\n\n\t\t\t// when reading children, we don't apply styles that match the defaults for that\n\t\t\t// element, or that would be inherited from the parent\n\t\t\tthis.readElementStyles(child, {\n\t\t\t\tshouldRespectDefaults: true,\n\t\t\t\tshouldSkipInheritedParentStyles: true,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate readElementStyles(\n\t\telement: Element,\n\t\t{ shouldRespectDefaults = true, shouldSkipInheritedParentStyles = true }\n\t) {\n\t\tconst defaultStyles = shouldRespectDefaults\n\t\t\t? getDefaultStylesForTagName(element.tagName.toLowerCase())\n\t\t\t: NO_STYLES\n\n\t\tconst parentStyles = Object.assign({}, NO_STYLES) as Styles\n\t\tif (shouldSkipInheritedParentStyles) {\n\t\t\tlet el = element.parentElement\n\t\t\t// Keep going up the tree to find all the relevant styles\n\t\t\twhile (el) {\n\t\t\t\tconst currentStyles = this.styles.get(el)?.self\n\t\t\t\tfor (const style in currentStyles) {\n\t\t\t\t\tif (!parentStyles[style]) {\n\t\t\t\t\t\tparentStyles[style] = currentStyles[style]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tel = el.parentElement\n\t\t\t}\n\t\t}\n\n\t\tconst info: ElementStyleInfo = {\n\t\t\tself: styleFromElement(element, { defaultStyles, parentStyles }),\n\t\t\tbefore: styleFromPseudoElement(element, '::before'),\n\t\t\tafter: styleFromPseudoElement(element, '::after'),\n\t\t}\n\t\tthis.styles.set(element, info)\n\t}\n\n\tfetchResources() {\n\t\tconst promises: Promise<void>[] = []\n\n\t\tfor (const info of this.styles.values()) {\n\t\t\tfor (const styles of objectMapValues(info)) {\n\t\t\t\tif (!styles) continue\n\t\t\t\tfor (const [property, value] of Object.entries(styles)) {\n\t\t\t\t\tif (!value) continue\n\t\t\t\t\tif (property === 'font-family') {\n\t\t\t\t\t\tthis.fonts.onFontFamilyValue(value)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst urlMatches = parseCssValueUrls(value)\n\t\t\t\t\tif (urlMatches.length === 0) continue\n\n\t\t\t\t\tpromises.push(\n\t\t\t\t\t\t...urlMatches.map(async ({ url, original }) => {\n\t\t\t\t\t\t\tconst dataUrl = (await resourceToDataUrl(url)) ?? 'data:'\n\t\t\t\t\t\t\tstyles[property] = value.replace(original, `url(\"${dataUrl}\")`)\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\n\t\treturn Promise.all(promises)\n\t}\n\n\t// custom elements are tricky. if we serialize the dom as-is, the custom elements wont have\n\t// their shadow-dom contents serialized. after we've read all the styles, we need to unwrap the\n\t// contents of each custom elements shadow dom directly into the parent element itself.\n\tunwrapCustomElements() {\n\t\tconst visited = new Set<Node>()\n\n\t\tconst visit = (element: Element, clonedParent: Element | null) => {\n\t\t\tif (visited.has(element)) return\n\t\t\tvisited.add(element)\n\n\t\t\tconst shadowRoot = element.shadowRoot\n\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst clonedCustomEl = document.createElement('div')\n\t\t\t\tthis.styles.set(clonedCustomEl, this.styles.get(element)!)\n\n\t\t\t\tclonedCustomEl.setAttribute('data-tl-custom-element', element.tagName)\n\t\t\t\t;(clonedParent ?? element.parentElement!).appendChild(clonedCustomEl)\n\n\t\t\t\tfor (const child of shadowRoot.childNodes) {\n\t\t\t\t\tif (child instanceof Element) {\n\t\t\t\t\t\tvisit(child, clonedCustomEl)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tclonedCustomEl.appendChild(child.cloneNode(true))\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\telement.remove()\n\t\t\t} else if (clonedParent) {\n\t\t\t\tif (element.tagName.toLowerCase() === 'style') {\n\t\t\t\t\t// we don't clone style tags at that would break the style scoping. instead we\n\t\t\t\t\t// rely on the computed styles we've already read\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst clonedEl = element.cloneNode(false) as Element\n\t\t\t\tthis.styles.set(clonedEl, this.styles.get(element)!)\n\n\t\t\t\tclonedParent.appendChild(clonedEl)\n\n\t\t\t\tfor (const child of getRenderedChildNodes(element)) {\n\t\t\t\t\tif (child instanceof Element) {\n\t\t\t\t\t\tvisit(child, clonedEl)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tclonedEl.appendChild(child.cloneNode(true))\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (const element of this.styles.keys()) {\n\t\t\tvisit(element, null)\n\t\t}\n\t}\n\n\tembedStyles(): string {\n\t\tlet css = ''\n\n\t\tfor (const [element, info] of this.styles) {\n\t\t\tif (info.after || info.before) {\n\t\t\t\tconst className = `pseudo-${uniqueId()}`\n\t\t\t\telement.classList.add(className)\n\n\t\t\t\tif (info.before) {\n\t\t\t\t\tcss += `.${className}::before {${formatCss(info.before)}}\\n`\n\t\t\t\t}\n\t\t\t\tif (info.after) {\n\t\t\t\t\tcss += `.${className}::after {${formatCss(info.after)}}\\n`\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst style = elementStyle(element)\n\t\t\tfor (const [property, value] of Object.entries(info.self)) {\n\t\t\t\tif (!value) continue\n\t\t\t\tstyle.setProperty(property, value)\n\t\t\t}\n\n\t\t\t// in HTML, font-kerning: auto is equivalent to font-kerning: normal. But in SVG, it's\n\t\t\t// none. We set it to normal here to match the HTML behavior, as otherwise this can\n\t\t\t// cause rendering differences.\n\t\t\tif (style.fontKerning === 'auto') {\n\t\t\t\tstyle.fontKerning = 'normal'\n\t\t\t}\n\t\t}\n\n\t\treturn css\n\t}\n\n\tasync getFontFaceCss() {\n\t\treturn await this.fonts.createCss()\n\t}\n\n\tdispose() {\n\t\tdestroyDefaultStyleFrame()\n\t}\n}\n\ninterface ReadStyleOpts {\n\tdefaultStyles: ReadonlyStyles\n\tparentStyles: ReadonlyStyles\n}\n\nfunction styleFromElement(element: Element, { defaultStyles, parentStyles }: ReadStyleOpts) {\n\t// `computedStyleMap` produces a more accurate representation of the styles, but it's not\n\t// supported in firefox at the time of writing. So we fall back to `getComputedStyle` if it's\n\t// not available.\n\tif (element.computedStyleMap) {\n\t\treturn styleFromComputedStyleMap(element.computedStyleMap(), { defaultStyles, parentStyles })\n\t}\n\treturn styleFromComputedStyle(getComputedStyle(element), { defaultStyles, parentStyles })\n}\n\nfunction styleFromPseudoElement(element: Element, pseudo: string) {\n\t// the equivalent of `computedStyleMap` for pseudo-elements isn't even fully specced out yet, so\n\t// for those we have to use `getComputedStyle` in all browsers.\n\tconst style = getComputedStyle(element, pseudo)\n\n\tconst content = style.getPropertyValue('content')\n\tif (content === '' || content === 'none') {\n\t\treturn undefined\n\t}\n\n\treturn styleFromComputedStyle(style, { defaultStyles: NO_STYLES, parentStyles: NO_STYLES })\n}\n\nfunction styleFromComputedStyleMap(\n\tstyle: StylePropertyMapReadOnly,\n\t{ defaultStyles, parentStyles }: ReadStyleOpts\n) {\n\tconst styles: Record<string, string> = {}\n\tconst currentColor = style.get('color')?.toString() || ''\n\tconst ruleOptions = {\n\t\tcurrentColor,\n\t\tparentStyles,\n\t\tdefaultStyles,\n\t\tgetStyle: (property: string) => style.get(property)?.toString() ?? '',\n\t}\n\tfor (const property of style.keys()) {\n\t\tif (!shouldIncludeCssProperty(property)) continue\n\n\t\tconst value = style.get(property)!.toString()\n\n\t\tif (defaultStyles[property] === value) continue\n\n\t\tconst rule = getOwnProperty(cssRules, property)\n\t\tif (rule && rule(value, property, ruleOptions)) continue\n\n\t\tstyles[property] = value\n\t}\n\n\treturn styles\n}\n\nfunction styleFromComputedStyle(\n\tstyle: CSSStyleDeclaration,\n\t{ defaultStyles, parentStyles }: ReadStyleOpts\n) {\n\tconst styles: Record<string, string> = {}\n\tconst currentColor = style.color\n\tconst ruleOptions = {\n\t\tcurrentColor,\n\t\tparentStyles,\n\t\tdefaultStyles,\n\t\tgetStyle: (property: string) => style.getPropertyValue(property),\n\t}\n\n\tfor (const property in style) {\n\t\tif (!shouldIncludeCssProperty(property)) continue\n\n\t\tconst value = style.getPropertyValue(property)\n\n\t\tif (defaultStyles[property] === value) continue\n\n\t\tconst rule = getOwnProperty(cssRules, property)\n\t\tif (rule && rule(value, property, ruleOptions)) continue\n\n\t\tstyles[property] = value\n\t}\n\treturn styles\n}\n\nfunction formatCss(style: ReadonlyStyles) {\n\tlet cssText = ''\n\tfor (const [property, value] of Object.entries(style)) {\n\t\tcssText += `${property}: ${value};`\n\t}\n\treturn cssText\n}\n\n// when we're figuring out the default values for a tag, we need read them from a separate document\n// so they're not affected by the current document's styles\nlet defaultStyleFrame:\n\t| { iframe: HTMLIFrameElement; foreignObject: SVGForeignObjectElement; document: Document }\n\t| undefined\nconst defaultStylesByTagName: Record<string, ReadonlyStyles> = {}\nfunction getDefaultStyleFrame() {\n\tif (!defaultStyleFrame) {\n\t\tconst frame = document.createElement('iframe')\n\t\tframe.style.display = 'none'\n\t\tdocument.body.appendChild(frame)\n\t\tconst frameDocument = assertExists(frame.contentDocument, 'frame must have a document')\n\t\tconst svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n\t\tconst foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')\n\t\tsvg.appendChild(foreignObject)\n\t\tframeDocument.body.appendChild(svg)\n\t\tdefaultStyleFrame = { iframe: frame, foreignObject, document: frameDocument }\n\t}\n\treturn defaultStyleFrame\n}\n\nfunction destroyDefaultStyleFrame() {\n\tif (defaultStyleFrame) {\n\t\tdocument.body.removeChild(defaultStyleFrame.iframe)\n\t\tdefaultStyleFrame = undefined\n\t}\n}\n\nconst defaultStyleReadOptions: ReadStyleOpts = { defaultStyles: NO_STYLES, parentStyles: NO_STYLES }\nfunction getDefaultStylesForTagName(tagName: string) {\n\tlet existing = defaultStylesByTagName[tagName]\n\tif (!existing) {\n\t\tconst { foreignObject, document } = getDefaultStyleFrame()\n\t\tconst element = document.createElement(tagName)\n\t\tforeignObject.appendChild(element)\n\t\texisting = element.computedStyleMap\n\t\t\t? styleFromComputedStyleMap(element.computedStyleMap(), defaultStyleReadOptions)\n\t\t\t: styleFromComputedStyle(getComputedStyle(element), defaultStyleReadOptions)\n\t\tforeignObject.removeChild(element)\n\t\tdefaultStylesByTagName[tagName] = existing\n\t}\n\treturn existing\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["document"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var cssRules_exports = {};
|
|
20
|
+
__export(cssRules_exports, {
|
|
21
|
+
cssRules: () => cssRules
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(cssRules_exports);
|
|
24
|
+
const isCoveredByCurrentColor = (value, property, { currentColor }) => {
|
|
25
|
+
return value === "currentColor" || value === currentColor;
|
|
26
|
+
};
|
|
27
|
+
const isInherited = (value, property, { parentStyles }) => {
|
|
28
|
+
return parentStyles[property] === value;
|
|
29
|
+
};
|
|
30
|
+
const isExcludedBorder = (borderDirection) => (value, property, { getStyle }) => {
|
|
31
|
+
const borderWidth = getStyle(`border-${borderDirection}-width`);
|
|
32
|
+
const borderStyle = getStyle(`border-${borderDirection}-style`);
|
|
33
|
+
if (borderWidth === "0px") return true;
|
|
34
|
+
if (borderStyle === "none") return true;
|
|
35
|
+
return false;
|
|
36
|
+
};
|
|
37
|
+
const cssRules = {
|
|
38
|
+
// currentColor properties:
|
|
39
|
+
"border-block-end-color": isCoveredByCurrentColor,
|
|
40
|
+
"border-block-start-color": isCoveredByCurrentColor,
|
|
41
|
+
"border-bottom-color": isCoveredByCurrentColor,
|
|
42
|
+
"border-inline-end-color": isCoveredByCurrentColor,
|
|
43
|
+
"border-inline-start-color": isCoveredByCurrentColor,
|
|
44
|
+
"border-left-color": isCoveredByCurrentColor,
|
|
45
|
+
"border-right-color": isCoveredByCurrentColor,
|
|
46
|
+
"border-top-color": isCoveredByCurrentColor,
|
|
47
|
+
"caret-color": isCoveredByCurrentColor,
|
|
48
|
+
"column-rule-color": isCoveredByCurrentColor,
|
|
49
|
+
"outline-color": isCoveredByCurrentColor,
|
|
50
|
+
"text-decoration": (value, property, { currentColor }) => {
|
|
51
|
+
return value === "none solid currentColor" || value === "none solid " + currentColor;
|
|
52
|
+
},
|
|
53
|
+
"text-decoration-color": isCoveredByCurrentColor,
|
|
54
|
+
"text-emphasis-color": isCoveredByCurrentColor,
|
|
55
|
+
// inherited properties:
|
|
56
|
+
"border-collapse": isInherited,
|
|
57
|
+
"border-spacing": isInherited,
|
|
58
|
+
"caption-side": isInherited,
|
|
59
|
+
// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
|
|
60
|
+
// 'color': isInherited,
|
|
61
|
+
cursor: isInherited,
|
|
62
|
+
direction: isInherited,
|
|
63
|
+
"empty-cells": isInherited,
|
|
64
|
+
"font-family": isInherited,
|
|
65
|
+
"font-size": isInherited,
|
|
66
|
+
"font-style": isInherited,
|
|
67
|
+
"font-variant": isInherited,
|
|
68
|
+
"font-weight": isInherited,
|
|
69
|
+
"font-size-adjust": isInherited,
|
|
70
|
+
"font-stretch": isInherited,
|
|
71
|
+
font: isInherited,
|
|
72
|
+
"letter-spacing": isInherited,
|
|
73
|
+
"line-height": isInherited,
|
|
74
|
+
"list-style-image": isInherited,
|
|
75
|
+
"list-style-position": isInherited,
|
|
76
|
+
"list-style-type": isInherited,
|
|
77
|
+
"list-style": isInherited,
|
|
78
|
+
orphans: isInherited,
|
|
79
|
+
"overflow-wrap": isInherited,
|
|
80
|
+
quotes: isInherited,
|
|
81
|
+
"stroke-linecap": isInherited,
|
|
82
|
+
"stroke-linejoin": isInherited,
|
|
83
|
+
"tab-size": isInherited,
|
|
84
|
+
"text-align": isInherited,
|
|
85
|
+
"text-align-last": isInherited,
|
|
86
|
+
"text-indent": isInherited,
|
|
87
|
+
"text-justify": isInherited,
|
|
88
|
+
"text-shadow": isInherited,
|
|
89
|
+
"text-transform": isInherited,
|
|
90
|
+
visibility: isInherited,
|
|
91
|
+
"white-space": isInherited,
|
|
92
|
+
"white-space-collapse": isInherited,
|
|
93
|
+
widows: isInherited,
|
|
94
|
+
"word-break": isInherited,
|
|
95
|
+
"word-spacing": isInherited,
|
|
96
|
+
"word-wrap": isInherited,
|
|
97
|
+
// special border cases - we have a weird case (tailwind seems to trigger this) where all
|
|
98
|
+
// border-styles sometimes get set to 'solid', but the border-width is 0 so they don't render.
|
|
99
|
+
// but in SVGs, **sometimes**, the border-width defaults (i think from a UA style-sheet? but
|
|
100
|
+
// honestly can't tell) to 1.5px so the border displays. we work around this by only including
|
|
101
|
+
// border styles at all if both the border-width and border-style are set to something that
|
|
102
|
+
// would show a border.
|
|
103
|
+
"border-top": isExcludedBorder("top"),
|
|
104
|
+
"border-right": isExcludedBorder("right"),
|
|
105
|
+
"border-bottom": isExcludedBorder("bottom"),
|
|
106
|
+
"border-left": isExcludedBorder("left"),
|
|
107
|
+
"border-block-end": isExcludedBorder("block-end"),
|
|
108
|
+
"border-block-start": isExcludedBorder("block-start"),
|
|
109
|
+
"border-inline-end": isExcludedBorder("inline-end"),
|
|
110
|
+
"border-inline-start": isExcludedBorder("inline-start"),
|
|
111
|
+
"border-top-style": isExcludedBorder("top"),
|
|
112
|
+
"border-right-style": isExcludedBorder("right"),
|
|
113
|
+
"border-bottom-style": isExcludedBorder("bottom"),
|
|
114
|
+
"border-left-style": isExcludedBorder("left"),
|
|
115
|
+
"border-block-end-style": isExcludedBorder("block-end"),
|
|
116
|
+
"border-block-start-style": isExcludedBorder("block-start"),
|
|
117
|
+
"border-inline-end-style": isExcludedBorder("inline-end"),
|
|
118
|
+
"border-inline-start-style": isExcludedBorder("inline-start"),
|
|
119
|
+
"border-top-width": isExcludedBorder("top"),
|
|
120
|
+
"border-right-width": isExcludedBorder("right"),
|
|
121
|
+
"border-bottom-width": isExcludedBorder("bottom"),
|
|
122
|
+
"border-left-width": isExcludedBorder("left"),
|
|
123
|
+
"border-block-end-width": isExcludedBorder("block-end"),
|
|
124
|
+
"border-block-start-width": isExcludedBorder("block-start"),
|
|
125
|
+
"border-inline-end-width": isExcludedBorder("inline-end")
|
|
126
|
+
};
|
|
127
|
+
//# sourceMappingURL=cssRules.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/lib/exports/cssRules.ts"],
|
|
4
|
+
"sourcesContent": ["export type Styles = { [K in string]?: string }\nexport type ReadonlyStyles = { readonly [K in string]?: string }\n\ntype CanSkipRule = (\n\tvalue: string,\n\tproperty: string,\n\toptions: {\n\t\tgetStyle(property: string): string\n\t\tparentStyles: ReadonlyStyles\n\t\tdefaultStyles: ReadonlyStyles\n\t\tcurrentColor: string\n\t}\n) => boolean\n\nconst isCoveredByCurrentColor: CanSkipRule = (value, property, { currentColor }) => {\n\treturn value === 'currentColor' || value === currentColor\n}\n\nconst isInherited: CanSkipRule = (value, property, { parentStyles }) => {\n\treturn parentStyles[property] === value\n}\n\n// see comment below about why we exclude border styles\nconst isExcludedBorder =\n\t(borderDirection: string): CanSkipRule =>\n\t(value, property, { getStyle }) => {\n\t\tconst borderWidth = getStyle(`border-${borderDirection}-width`)\n\t\tconst borderStyle = getStyle(`border-${borderDirection}-style`)\n\n\t\tif (borderWidth === '0px') return true\n\t\tif (borderStyle === 'none') return true\n\t\treturn false\n\t}\n\nexport const cssRules = {\n\t// currentColor properties:\n\t'border-block-end-color': isCoveredByCurrentColor,\n\t'border-block-start-color': isCoveredByCurrentColor,\n\t'border-bottom-color': isCoveredByCurrentColor,\n\t'border-inline-end-color': isCoveredByCurrentColor,\n\t'border-inline-start-color': isCoveredByCurrentColor,\n\t'border-left-color': isCoveredByCurrentColor,\n\t'border-right-color': isCoveredByCurrentColor,\n\t'border-top-color': isCoveredByCurrentColor,\n\t'caret-color': isCoveredByCurrentColor,\n\t'column-rule-color': isCoveredByCurrentColor,\n\t'outline-color': isCoveredByCurrentColor,\n\t'text-decoration': (value, property, { currentColor }) => {\n\t\treturn value === 'none solid currentColor' || value === 'none solid ' + currentColor\n\t},\n\t'text-decoration-color': isCoveredByCurrentColor,\n\t'text-emphasis-color': isCoveredByCurrentColor,\n\n\t// inherited properties:\n\t'border-collapse': isInherited,\n\t'border-spacing': isInherited,\n\t'caption-side': isInherited,\n\t// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements\n\t// 'color': isInherited,\n\tcursor: isInherited,\n\tdirection: isInherited,\n\t'empty-cells': isInherited,\n\t'font-family': isInherited,\n\t'font-size': isInherited,\n\t'font-style': isInherited,\n\t'font-variant': isInherited,\n\t'font-weight': isInherited,\n\t'font-size-adjust': isInherited,\n\t'font-stretch': isInherited,\n\tfont: isInherited,\n\t'letter-spacing': isInherited,\n\t'line-height': isInherited,\n\t'list-style-image': isInherited,\n\t'list-style-position': isInherited,\n\t'list-style-type': isInherited,\n\t'list-style': isInherited,\n\torphans: isInherited,\n\t'overflow-wrap': isInherited,\n\tquotes: isInherited,\n\t'stroke-linecap': isInherited,\n\t'stroke-linejoin': isInherited,\n\t'tab-size': isInherited,\n\t'text-align': isInherited,\n\t'text-align-last': isInherited,\n\t'text-indent': isInherited,\n\t'text-justify': isInherited,\n\t'text-shadow': isInherited,\n\t'text-transform': isInherited,\n\tvisibility: isInherited,\n\t'white-space': isInherited,\n\t'white-space-collapse': isInherited,\n\twidows: isInherited,\n\t'word-break': isInherited,\n\t'word-spacing': isInherited,\n\t'word-wrap': isInherited,\n\n\t// special border cases - we have a weird case (tailwind seems to trigger this) where all\n\t// border-styles sometimes get set to 'solid', but the border-width is 0 so they don't render.\n\t// but in SVGs, **sometimes**, the border-width defaults (i think from a UA style-sheet? but\n\t// honestly can't tell) to 1.5px so the border displays. we work around this by only including\n\t// border styles at all if both the border-width and border-style are set to something that\n\t// would show a border.\n\t'border-top': isExcludedBorder('top'),\n\t'border-right': isExcludedBorder('right'),\n\t'border-bottom': isExcludedBorder('bottom'),\n\t'border-left': isExcludedBorder('left'),\n\t'border-block-end': isExcludedBorder('block-end'),\n\t'border-block-start': isExcludedBorder('block-start'),\n\t'border-inline-end': isExcludedBorder('inline-end'),\n\t'border-inline-start': isExcludedBorder('inline-start'),\n\t'border-top-style': isExcludedBorder('top'),\n\t'border-right-style': isExcludedBorder('right'),\n\t'border-bottom-style': isExcludedBorder('bottom'),\n\t'border-left-style': isExcludedBorder('left'),\n\t'border-block-end-style': isExcludedBorder('block-end'),\n\t'border-block-start-style': isExcludedBorder('block-start'),\n\t'border-inline-end-style': isExcludedBorder('inline-end'),\n\t'border-inline-start-style': isExcludedBorder('inline-start'),\n\t'border-top-width': isExcludedBorder('top'),\n\t'border-right-width': isExcludedBorder('right'),\n\t'border-bottom-width': isExcludedBorder('bottom'),\n\t'border-left-width': isExcludedBorder('left'),\n\t'border-block-end-width': isExcludedBorder('block-end'),\n\t'border-block-start-width': isExcludedBorder('block-start'),\n\t'border-inline-end-width': isExcludedBorder('inline-end'),\n} satisfies Record<string, CanSkipRule>\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -18,8 +18,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var parseCss_exports = {};
|
|
20
20
|
__export(parseCss_exports, {
|
|
21
|
-
isPropertyCoveredByCurrentColor: () => isPropertyCoveredByCurrentColor,
|
|
22
|
-
isPropertyInherited: () => isPropertyInherited,
|
|
23
21
|
parseCss: () => parseCss,
|
|
24
22
|
parseCssFontFaces: () => parseCssFontFaces,
|
|
25
23
|
parseCssFontFamilyValue: () => parseCssFontFamilyValue,
|
|
@@ -97,71 +95,4 @@ function parseCssValueUrls(value) {
|
|
|
97
95
|
url: m[1] || m[2] || m[3]
|
|
98
96
|
}));
|
|
99
97
|
}
|
|
100
|
-
const currentColorProperties = /* @__PURE__ */ new Set([
|
|
101
|
-
"border-block-end-color",
|
|
102
|
-
"border-block-start-color",
|
|
103
|
-
"border-bottom-color",
|
|
104
|
-
"border-inline-end-color",
|
|
105
|
-
"border-inline-start-color",
|
|
106
|
-
"border-left-color",
|
|
107
|
-
"border-right-color",
|
|
108
|
-
"border-top-color",
|
|
109
|
-
"caret-color",
|
|
110
|
-
"column-rule-color",
|
|
111
|
-
"outline-color",
|
|
112
|
-
"text-decoration",
|
|
113
|
-
"text-decoration-color",
|
|
114
|
-
"text-emphasis-color"
|
|
115
|
-
]);
|
|
116
|
-
function isPropertyCoveredByCurrentColor(currentColor, property, value) {
|
|
117
|
-
if (currentColorProperties.has(property)) {
|
|
118
|
-
return value === "currentColor" || value === currentColor || property === "text-decoration" && value === `none solid ${currentColor}`;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
const inheritedProperties = /* @__PURE__ */ new Set([
|
|
122
|
-
"border-collapse",
|
|
123
|
-
"border-spacing",
|
|
124
|
-
"caption-side",
|
|
125
|
-
// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
|
|
126
|
-
// 'color',
|
|
127
|
-
"cursor",
|
|
128
|
-
"direction",
|
|
129
|
-
"empty-cells",
|
|
130
|
-
"font-family",
|
|
131
|
-
"font-size",
|
|
132
|
-
"font-style",
|
|
133
|
-
"font-variant",
|
|
134
|
-
"font-weight",
|
|
135
|
-
"font-size-adjust",
|
|
136
|
-
"font-stretch",
|
|
137
|
-
"font",
|
|
138
|
-
"letter-spacing",
|
|
139
|
-
"line-height",
|
|
140
|
-
"list-style-image",
|
|
141
|
-
"list-style-position",
|
|
142
|
-
"list-style-type",
|
|
143
|
-
"list-style",
|
|
144
|
-
"orphans",
|
|
145
|
-
"overflow-wrap",
|
|
146
|
-
"quotes",
|
|
147
|
-
"stroke-linecap",
|
|
148
|
-
"stroke-linejoin",
|
|
149
|
-
"tab-size",
|
|
150
|
-
"text-align",
|
|
151
|
-
"text-align-last",
|
|
152
|
-
"text-indent",
|
|
153
|
-
"text-justify",
|
|
154
|
-
"text-shadow",
|
|
155
|
-
"text-transform",
|
|
156
|
-
"visibility",
|
|
157
|
-
"white-space",
|
|
158
|
-
"white-space-collapse",
|
|
159
|
-
"widows",
|
|
160
|
-
"word-break",
|
|
161
|
-
"word-spacing",
|
|
162
|
-
"word-wrap"
|
|
163
|
-
]);
|
|
164
|
-
function isPropertyInherited(property) {
|
|
165
|
-
return inheritedProperties.has(property);
|
|
166
|
-
}
|
|
167
98
|
//# sourceMappingURL=parseCss.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/exports/parseCss.ts"],
|
|
4
|
-
"sourcesContent": ["import { safeParseUrl } from '@tldraw/utils'\n\nexport interface ParsedFontFace {\n\tfontFace: string\n\turls: { original: string; resolved: string | null; embedded?: Promise<string | null> }[]\n\tfontFamilies: Set<string>\n}\n\n// parsing CSS with regular expressions doesn't really work. There are almost certainly edge cases\n// in the regular expressions we're using here. They're based formal grammars of CSS, but aren't\n// perfect. These were written with https://regexper.com/ - give it a go if you're editing these.\n\n// The regexes themselves would be nicer to work with if we were using named capturing groups\n// (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group).\n// We use a lot of disjunctions (the `|`) to cover different syntaxes though, and at the time of\n// writing, browser support for using named capturing groups across disjunctions is rough.\n\n// Parse @import declarations:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/@import#formal_syntax\nconst importsRegex =\n\t/@import\\s+(?:\"([^\"]+)\"|'([^']+)'|url\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([^'\")]+))\\s*\\))([^;]+);/gi\n\n// Locate @font-face declarations:\nconst fontFaceRegex = /@font-face\\s*{([^}]+)}/gi\n\n// Parse url() calls within a CSS value:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/url#syntax\nconst urlsRegex = /url\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([^'\")]+))\\s*\\)/gi\n\n// Locate and parse the value of `font-family` within a @font-face declaration:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family#formal_syntax\nconst fontFamilyRegex =\n\t/(?:^|;)\\s*font-family\\s*:\\s*(?:([^'\"][^;\\n]+)|\"([^\"]+)\"|'([^']+)')\\s*(?:;|$)/gi\n\nexport function parseCssImports(css: string) {\n\treturn Array.from(css.matchAll(importsRegex), (m) => ({\n\t\turl: m[1] || m[2] || m[3] || m[4] || m[5],\n\t\textras: m[6],\n\t}))\n}\n\nexport function parseCssFontFaces(css: string, baseUrl: string) {\n\treturn Array.from(css.matchAll(fontFaceRegex), (m): ParsedFontFace => {\n\t\tconst fontFace = m[1]\n\t\tconst urls = Array.from(fontFace.matchAll(urlsRegex), (m) => {\n\t\t\tconst original = m[1] || m[2] || m[3]\n\t\t\treturn {\n\t\t\t\toriginal,\n\t\t\t\tresolved: safeParseUrl(original, baseUrl)?.href ?? null,\n\t\t\t}\n\t\t})\n\t\tconst fontFamilies = new Set(\n\t\t\tArray.from(fontFace.matchAll(fontFamilyRegex), (m) => (m[1] || m[2] || m[3]).toLowerCase())\n\t\t)\n\n\t\treturn { fontFace, urls, fontFamilies }\n\t})\n}\n\nexport function parseCssFontFamilyValue(value: string) {\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#formal_syntax\n\t// we use two regexes here to parse each value in a comma separated list of font families\n\tconst valueRegex = /\\s*(?:([^'\"][^;\\n\\s,]+)|\"([^\"]+)\"|'([^']+)')\\s*/gi\n\tconst separatorRegex = /\\s*,\\s*/gi\n\n\tconst fontFamilies = new Set<string>()\n\n\twhile (true) {\n\t\tconst valueMatch = valueRegex.exec(value)\n\t\tif (!valueMatch) {\n\t\t\tbreak\n\t\t}\n\n\t\tconst fontFamily = valueMatch[1] || valueMatch[2] || valueMatch[3]\n\t\tfontFamilies.add(fontFamily.toLowerCase())\n\n\t\tseparatorRegex.lastIndex = valueRegex.lastIndex\n\t\tconst separatorMatch = separatorRegex.exec(value)\n\t\tif (!separatorMatch) {\n\t\t\tbreak\n\t\t}\n\n\t\tvalueRegex.lastIndex = separatorRegex.lastIndex\n\t}\n\n\treturn fontFamilies\n}\n\nexport function shouldIncludeCssProperty(property: string) {\n\tif (property.startsWith('-')) return false\n\tif (property.startsWith('animation')) return false\n\tif (property.startsWith('transition')) return false\n\tif (property === 'cursor') return false\n\tif (property === 'pointer-events') return false\n\tif (property === 'user-select') return false\n\tif (property === 'touch-action') return false\n\treturn true\n}\n\nexport function parseCss(css: string, baseUrl: string) {\n\treturn {\n\t\timports: parseCssImports(css),\n\t\tfontFaces: parseCssFontFaces(css, baseUrl),\n\t}\n}\n\nexport function parseCssValueUrls(value: string) {\n\treturn Array.from(value.matchAll(urlsRegex), (m) => ({\n\t\toriginal: m[0],\n\t\turl: m[1] || m[2] || m[3],\n\t}))\n}\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { safeParseUrl } from '@tldraw/utils'\n\nexport interface ParsedFontFace {\n\tfontFace: string\n\turls: { original: string; resolved: string | null; embedded?: Promise<string | null> }[]\n\tfontFamilies: Set<string>\n}\n\n// parsing CSS with regular expressions doesn't really work. There are almost certainly edge cases\n// in the regular expressions we're using here. They're based formal grammars of CSS, but aren't\n// perfect. These were written with https://regexper.com/ - give it a go if you're editing these.\n\n// The regexes themselves would be nicer to work with if we were using named capturing groups\n// (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group).\n// We use a lot of disjunctions (the `|`) to cover different syntaxes though, and at the time of\n// writing, browser support for using named capturing groups across disjunctions is rough.\n\n// Parse @import declarations:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/@import#formal_syntax\nconst importsRegex =\n\t/@import\\s+(?:\"([^\"]+)\"|'([^']+)'|url\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([^'\")]+))\\s*\\))([^;]+);/gi\n\n// Locate @font-face declarations:\nconst fontFaceRegex = /@font-face\\s*{([^}]+)}/gi\n\n// Parse url() calls within a CSS value:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/url#syntax\nconst urlsRegex = /url\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([^'\")]+))\\s*\\)/gi\n\n// Locate and parse the value of `font-family` within a @font-face declaration:\n// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family#formal_syntax\nconst fontFamilyRegex =\n\t/(?:^|;)\\s*font-family\\s*:\\s*(?:([^'\"][^;\\n]+)|\"([^\"]+)\"|'([^']+)')\\s*(?:;|$)/gi\n\nexport function parseCssImports(css: string) {\n\treturn Array.from(css.matchAll(importsRegex), (m) => ({\n\t\turl: m[1] || m[2] || m[3] || m[4] || m[5],\n\t\textras: m[6],\n\t}))\n}\n\nexport function parseCssFontFaces(css: string, baseUrl: string) {\n\treturn Array.from(css.matchAll(fontFaceRegex), (m): ParsedFontFace => {\n\t\tconst fontFace = m[1]\n\t\tconst urls = Array.from(fontFace.matchAll(urlsRegex), (m) => {\n\t\t\tconst original = m[1] || m[2] || m[3]\n\t\t\treturn {\n\t\t\t\toriginal,\n\t\t\t\tresolved: safeParseUrl(original, baseUrl)?.href ?? null,\n\t\t\t}\n\t\t})\n\t\tconst fontFamilies = new Set(\n\t\t\tArray.from(fontFace.matchAll(fontFamilyRegex), (m) => (m[1] || m[2] || m[3]).toLowerCase())\n\t\t)\n\n\t\treturn { fontFace, urls, fontFamilies }\n\t})\n}\n\nexport function parseCssFontFamilyValue(value: string) {\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#formal_syntax\n\t// we use two regexes here to parse each value in a comma separated list of font families\n\tconst valueRegex = /\\s*(?:([^'\"][^;\\n\\s,]+)|\"([^\"]+)\"|'([^']+)')\\s*/gi\n\tconst separatorRegex = /\\s*,\\s*/gi\n\n\tconst fontFamilies = new Set<string>()\n\n\twhile (true) {\n\t\tconst valueMatch = valueRegex.exec(value)\n\t\tif (!valueMatch) {\n\t\t\tbreak\n\t\t}\n\n\t\tconst fontFamily = valueMatch[1] || valueMatch[2] || valueMatch[3]\n\t\tfontFamilies.add(fontFamily.toLowerCase())\n\n\t\tseparatorRegex.lastIndex = valueRegex.lastIndex\n\t\tconst separatorMatch = separatorRegex.exec(value)\n\t\tif (!separatorMatch) {\n\t\t\tbreak\n\t\t}\n\n\t\tvalueRegex.lastIndex = separatorRegex.lastIndex\n\t}\n\n\treturn fontFamilies\n}\n\nexport function shouldIncludeCssProperty(property: string) {\n\tif (property.startsWith('-')) return false\n\tif (property.startsWith('animation')) return false\n\tif (property.startsWith('transition')) return false\n\tif (property === 'cursor') return false\n\tif (property === 'pointer-events') return false\n\tif (property === 'user-select') return false\n\tif (property === 'touch-action') return false\n\treturn true\n}\n\nexport function parseCss(css: string, baseUrl: string) {\n\treturn {\n\t\timports: parseCssImports(css),\n\t\tfontFaces: parseCssFontFaces(css, baseUrl),\n\t}\n}\n\nexport function parseCssValueUrls(value: string) {\n\treturn Array.from(value.matchAll(urlsRegex), (m) => ({\n\t\toriginal: m[0],\n\t\turl: m[1] || m[2] || m[3],\n\t}))\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAmB7B,MAAM,eACL;AAGD,MAAM,gBAAgB;AAItB,MAAM,YAAY;AAIlB,MAAM,kBACL;AAEM,SAAS,gBAAgB,KAAa;AAC5C,SAAO,MAAM,KAAK,IAAI,SAAS,YAAY,GAAG,CAAC,OAAO;AAAA,IACrD,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;AAAA,IACxC,QAAQ,EAAE,CAAC;AAAA,EACZ,EAAE;AACH;AAEO,SAAS,kBAAkB,KAAa,SAAiB;AAC/D,SAAO,MAAM,KAAK,IAAI,SAAS,aAAa,GAAG,CAAC,MAAsB;AACrE,UAAM,WAAW,EAAE,CAAC;AACpB,UAAM,OAAO,MAAM,KAAK,SAAS,SAAS,SAAS,GAAG,CAACA,OAAM;AAC5D,YAAM,WAAWA,GAAE,CAAC,KAAKA,GAAE,CAAC,KAAKA,GAAE,CAAC;AACpC,aAAO;AAAA,QACN;AAAA,QACA,cAAU,2BAAa,UAAU,OAAO,GAAG,QAAQ;AAAA,MACpD;AAAA,IACD,CAAC;AACD,UAAM,eAAe,IAAI;AAAA,MACxB,MAAM,KAAK,SAAS,SAAS,eAAe,GAAG,CAACA,QAAOA,GAAE,CAAC,KAAKA,GAAE,CAAC,KAAKA,GAAE,CAAC,GAAG,YAAY,CAAC;AAAA,IAC3F;AAEA,WAAO,EAAE,UAAU,MAAM,aAAa;AAAA,EACvC,CAAC;AACF;AAEO,SAAS,wBAAwB,OAAe;AAGtD,QAAM,aAAa;AACnB,QAAM,iBAAiB;AAEvB,QAAM,eAAe,oBAAI,IAAY;AAErC,SAAO,MAAM;AACZ,UAAM,aAAa,WAAW,KAAK,KAAK;AACxC,QAAI,CAAC,YAAY;AAChB;AAAA,IACD;AAEA,UAAM,aAAa,WAAW,CAAC,KAAK,WAAW,CAAC,KAAK,WAAW,CAAC;AACjE,iBAAa,IAAI,WAAW,YAAY,CAAC;AAEzC,mBAAe,YAAY,WAAW;AACtC,UAAM,iBAAiB,eAAe,KAAK,KAAK;AAChD,QAAI,CAAC,gBAAgB;AACpB;AAAA,IACD;AAEA,eAAW,YAAY,eAAe;AAAA,EACvC;AAEA,SAAO;AACR;AAEO,SAAS,yBAAyB,UAAkB;AAC1D,MAAI,SAAS,WAAW,GAAG,EAAG,QAAO;AACrC,MAAI,SAAS,WAAW,WAAW,EAAG,QAAO;AAC7C,MAAI,SAAS,WAAW,YAAY,EAAG,QAAO;AAC9C,MAAI,aAAa,SAAU,QAAO;AAClC,MAAI,aAAa,iBAAkB,QAAO;AAC1C,MAAI,aAAa,cAAe,QAAO;AACvC,MAAI,aAAa,eAAgB,QAAO;AACxC,SAAO;AACR;AAEO,SAAS,SAAS,KAAa,SAAiB;AACtD,SAAO;AAAA,IACN,SAAS,gBAAgB,GAAG;AAAA,IAC5B,WAAW,kBAAkB,KAAK,OAAO;AAAA,EAC1C;AACD;AAEO,SAAS,kBAAkB,OAAe;AAChD,SAAO,MAAM,KAAK,MAAM,SAAS,SAAS,GAAG,CAAC,OAAO;AAAA,IACpD,UAAU,EAAE,CAAC;AAAA,IACb,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;AAAA,EACzB,EAAE;AACH;",
|
|
6
6
|
"names": ["m"]
|
|
7
7
|
}
|
package/dist-cjs/version.js
CHANGED
|
@@ -22,10 +22,10 @@ __export(version_exports, {
|
|
|
22
22
|
version: () => version
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(version_exports);
|
|
25
|
-
const version = "3.12.0-canary.
|
|
25
|
+
const version = "3.12.0-canary.e333011facbe";
|
|
26
26
|
const publishDates = {
|
|
27
27
|
major: "2024-09-13T14:36:29.063Z",
|
|
28
|
-
minor: "2025-04-
|
|
29
|
-
patch: "2025-04-
|
|
28
|
+
minor: "2025-04-03T09:52:50.298Z",
|
|
29
|
+
patch: "2025-04-03T09:52:50.298Z"
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=version.js.map
|
package/dist-cjs/version.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.e333011facbe'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-04-03T09:52:50.298Z',\n\tpatch: '2025-04-03T09:52:50.298Z',\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.d.mts
CHANGED
|
@@ -986,8 +986,8 @@ export declare class EdgeScrollManager {
|
|
|
986
986
|
/** @public */
|
|
987
987
|
export declare class Editor extends EventEmitter<TLEventMap> {
|
|
988
988
|
readonly id: string;
|
|
989
|
-
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, textOptions, initialState, autoFocus, inferDarkMode, options, isShapeHidden, fontAssetUrls, }: TLEditorOptions);
|
|
990
|
-
private readonly
|
|
989
|
+
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, textOptions, initialState, autoFocus, inferDarkMode, options, isShapeHidden, getShapeVisibility, fontAssetUrls, }: TLEditorOptions);
|
|
990
|
+
private readonly _getShapeVisibility?;
|
|
991
991
|
private getIsShapeHiddenCache;
|
|
992
992
|
isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
|
|
993
993
|
readonly options: TldrawOptions;
|
|
@@ -6045,11 +6045,29 @@ export declare interface TldrawEditorBaseProps {
|
|
|
6045
6045
|
/**
|
|
6046
6046
|
* Predicate for whether or not a shape should be hidden.
|
|
6047
6047
|
*
|
|
6048
|
+
* @deprecated Use {@link TldrawEditorBaseProps#getShapeVisibility} instead.
|
|
6049
|
+
*/
|
|
6050
|
+
isShapeHidden?(shape: TLShape, editor: Editor): boolean;
|
|
6051
|
+
/**
|
|
6052
|
+
* Provides a way to hide shapes.
|
|
6053
|
+
*
|
|
6048
6054
|
* Hidden shapes will not render in the editor, and they will not be eligible for hit test via
|
|
6049
6055
|
* {@link Editor#getShapeAtPoint} and {@link Editor#getShapesAtPoint}. But otherwise they will
|
|
6050
6056
|
* remain in the store and participate in all other operations.
|
|
6057
|
+
*
|
|
6058
|
+
* @example
|
|
6059
|
+
* ```ts
|
|
6060
|
+
* getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}
|
|
6061
|
+
* ```
|
|
6062
|
+
*
|
|
6063
|
+
* - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.
|
|
6064
|
+
* - `'hidden'` - The shape will be hidden.
|
|
6065
|
+
* - `'visible'` - The shape will be visible.
|
|
6066
|
+
*
|
|
6067
|
+
* @param shape - The shape to check.
|
|
6068
|
+
* @param editor - The editor instance.
|
|
6051
6069
|
*/
|
|
6052
|
-
|
|
6070
|
+
getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
|
|
6053
6071
|
/**
|
|
6054
6072
|
* The URLs for the fonts to use in the editor.
|
|
6055
6073
|
*/
|
|
@@ -6277,10 +6295,29 @@ export declare interface TLEditorOptions {
|
|
|
6277
6295
|
};
|
|
6278
6296
|
/**
|
|
6279
6297
|
* A predicate that should return true if the given shape should be hidden.
|
|
6298
|
+
*
|
|
6299
|
+
* @deprecated Use {@link Editor#getShapeVisibility} instead.
|
|
6300
|
+
*
|
|
6280
6301
|
* @param shape - The shape to check.
|
|
6281
6302
|
* @param editor - The editor instance.
|
|
6282
6303
|
*/
|
|
6283
6304
|
isShapeHidden?(shape: TLShape, editor: Editor): boolean;
|
|
6305
|
+
/**
|
|
6306
|
+
* Provides a way to hide shapes.
|
|
6307
|
+
*
|
|
6308
|
+
* @example
|
|
6309
|
+
* ```ts
|
|
6310
|
+
* getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}
|
|
6311
|
+
* ```
|
|
6312
|
+
*
|
|
6313
|
+
* - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.
|
|
6314
|
+
* - `'hidden'` - The shape will be hidden.
|
|
6315
|
+
* - `'visible'` - The shape will be visible.
|
|
6316
|
+
*
|
|
6317
|
+
* @param shape - The shape to check.
|
|
6318
|
+
* @param editor - The editor instance.
|
|
6319
|
+
*/
|
|
6320
|
+
getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
|
|
6284
6321
|
}
|
|
6285
6322
|
|
|
6286
6323
|
/**
|
package/dist-esm/index.mjs
CHANGED
|
@@ -163,7 +163,9 @@ function TldrawEditorWithReadyStore({
|
|
|
163
163
|
options,
|
|
164
164
|
licenseKey,
|
|
165
165
|
deepLinks: _deepLinks,
|
|
166
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
166
167
|
isShapeHidden,
|
|
168
|
+
getShapeVisibility,
|
|
167
169
|
assetUrls
|
|
168
170
|
}) {
|
|
169
171
|
const { ErrorFallback } = useEditorComponents();
|
|
@@ -208,6 +210,7 @@ function TldrawEditorWithReadyStore({
|
|
|
208
210
|
options,
|
|
209
211
|
licenseKey,
|
|
210
212
|
isShapeHidden,
|
|
213
|
+
getShapeVisibility,
|
|
211
214
|
fontAssetUrls: assetUrls?.fonts
|
|
212
215
|
});
|
|
213
216
|
editor2.updateViewportScreenBounds(canvasRef.current ?? container);
|
|
@@ -235,6 +238,7 @@ function TldrawEditorWithReadyStore({
|
|
|
235
238
|
setEditor,
|
|
236
239
|
licenseKey,
|
|
237
240
|
isShapeHidden,
|
|
241
|
+
getShapeVisibility,
|
|
238
242
|
textOptions,
|
|
239
243
|
assetUrls
|
|
240
244
|
]
|