Asset improvements (#1557)
This PR does the following: - Add `selfHosted.js`, which is a great option for users that wish to self host the assets. Works well for both self hosting from the public folder or via a CDN. - Updates the docs for assets. We now have a dedicated page for assets where all the options are more clearly explained. I also removed the assets explanation from the main docs as the unpkg option should work out of the box and setting up the assets is no longer necessary. - Cleaned up the `refresh-assets` script. We now use common `types.d.ts` file to define our types. All the other options then reuse them. - Pulled out the `formatAssetUrl` into it's own file. It's now static an no longer generated. - `urls.d.ts`, `import.d.ts`, and newly added `selfhosted.d.ts` are now also no longer generated as we can import the types from `types.d.ts`. - You can now pass a subset of `assetUrls` to `<Tldraw />` and it will override the default option with the passed in overrides. This makes it easy to only customizes certain assets (only change the draw font as an example). ### Change Type - [x] `patch` — Bug Fix
This commit is contained in:
Mitja Bezenšek
GitHub
parent
707ddc876f
commit
bacb307bad
24 changed files with 682 additions and 608 deletions
69
apps/docs/content/docs/assets.mdx
Normal file
69
apps/docs/content/docs/assets.mdx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
---
|
||||||
|
title: Assets
|
||||||
|
status: published
|
||||||
|
author: steveruizok
|
||||||
|
date: 6/9/2023
|
||||||
|
order: 9
|
||||||
|
---
|
||||||
|
|
||||||
|
In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. We offer a few different ways of making these assets available to your app.
|
||||||
|
|
||||||
|
### 1. Using a public CDN
|
||||||
|
|
||||||
|
By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/), so everything should work out of the box and is a good way to get started.
|
||||||
|
|
||||||
|
If you would like to customize some of the assets you can pass the customizations to our `<Tldraw />` component. For example, to use a custom icon for the `hand` tool you can do the following:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const assetUrls = {
|
||||||
|
icons: {
|
||||||
|
'tool-hand': './custom-tool-hand.svg',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
<Tldraw assetUrls={assetUrls} />
|
||||||
|
```
|
||||||
|
|
||||||
|
This will use the custom icon for the `hand` tool and the default assets for everything else.
|
||||||
|
|
||||||
|
|
||||||
|
### 2. Hosting the assets yourself
|
||||||
|
|
||||||
|
If you want more flexibility you can also host these assets yourself:
|
||||||
|
1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
|
||||||
|
2. Place the folders in your project's public path.
|
||||||
|
3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live.
|
||||||
|
|
||||||
|
You can use our `getAssetUrls` helper function from the `@tldraw/assets` package to generate these urls for you.
|
||||||
|
```javascript
|
||||||
|
import { getAssetUrls } from '@tldraw/assets/selfHosted'
|
||||||
|
|
||||||
|
const assetUrls = getAssetUrls()
|
||||||
|
|
||||||
|
<Tldraw assetUrls={assetUrls} />
|
||||||
|
```
|
||||||
|
|
||||||
|
While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
|
||||||
|
|
||||||
|
If you use a CDN for hosting these files you can specify the base url of your assets. To recreate the above option of serving the assets from unpkg you would do the following:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const assetUrls = getAssetUrls({
|
||||||
|
baseUrl: 'https://unpkg.com/@tldraw/assets@2.0.0-alpha.12/',
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Using a bundler
|
||||||
|
|
||||||
|
If you're using a bundler like webpack or rollup, you can import the assets directly from the `@tldraw/assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
|
||||||
|
```javascript
|
||||||
|
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
|
||||||
|
|
||||||
|
const assetUrls = getAssetUrlsByMetaUrl()
|
||||||
|
|
||||||
|
<Tldraw assetUrls={assetUrls} />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Adding custom assets
|
||||||
|
|
||||||
|
We have plans to offer more rich asset customizations in the future (e.g. custom cursors, custom fonts, translations for other languages etc).
|
||||||
|
|
@ -30,8 +30,6 @@ yarn add @tldraw/tldraw@alpha signia signia-react
|
||||||
npm install @tldraw/tldraw@alpha signia signia-react
|
npm install @tldraw/tldraw@alpha signia signia-react
|
||||||
```
|
```
|
||||||
|
|
||||||
Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!)
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
You should be able to use the `<Tldraw/>` component in any React editor.
|
You should be able to use the `<Tldraw/>` component in any React editor.
|
||||||
|
|
@ -60,7 +58,6 @@ export default function () {
|
||||||
In addition to the library, you will also need to:
|
In addition to the library, you will also need to:
|
||||||
|
|
||||||
- import the **CSS files** for the editor and UI
|
- import the **CSS files** for the editor and UI
|
||||||
- have the library's **assets** available on the same host
|
|
||||||
- probably set a `viewport` meta tag in your **html**.
|
- probably set a `viewport` meta tag in your **html**.
|
||||||
|
|
||||||
See below for more detail on these.
|
See below for more detail on these.
|
||||||
|
|
@ -94,24 +91,6 @@ The `<Tldraw/>` component combines several other pieces:
|
||||||
|
|
||||||
If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
|
If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
|
||||||
|
|
||||||
### Assets
|
|
||||||
|
|
||||||
In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
|
|
||||||
|
|
||||||
If you want more flexibility you can also host these assets yourself:
|
|
||||||
1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
|
|
||||||
2. Place the folders in your project's public path.
|
|
||||||
3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
|
|
||||||
```
|
|
||||||
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
|
|
||||||
|
|
||||||
const assetUrls = getAssetUrlsByMetaUrl()
|
|
||||||
|
|
||||||
<Tldraw assetUrls={assetUrls} />
|
|
||||||
```
|
|
||||||
|
|
||||||
While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
|
|
||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
|
In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@ export default function () {
|
||||||
In addition to the library, you will also need to:
|
In addition to the library, you will also need to:
|
||||||
|
|
||||||
- import the **CSS files** for the editor and UI
|
- import the **CSS files** for the editor and UI
|
||||||
- have the library's **assets** available on the same host
|
|
||||||
- probably set a `viewport` meta tag in your **html**.
|
- probably set a `viewport` meta tag in your **html**.
|
||||||
|
|
||||||
See below for more detail on these.
|
See below for more detail on these.
|
||||||
|
|
@ -66,24 +65,6 @@ The `<Tldraw/>` component combines several other pieces:
|
||||||
|
|
||||||
If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
|
If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
|
||||||
|
|
||||||
### Assets
|
|
||||||
|
|
||||||
In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
|
|
||||||
|
|
||||||
If you want more flexibility you can also host these assets yourself:
|
|
||||||
1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
|
|
||||||
2. Place the folders in your project's public path.
|
|
||||||
3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
|
|
||||||
```
|
|
||||||
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
|
|
||||||
|
|
||||||
const assetUrls = getAssetUrlsByMetaUrl()
|
|
||||||
|
|
||||||
<Tldraw assetUrls={assetUrls} />
|
|
||||||
```
|
|
||||||
|
|
||||||
While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
|
|
||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
|
In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
|
||||||
|
|
|
||||||
234
packages/assets/imports.d.ts
vendored
234
packages/assets/imports.d.ts
vendored
|
|
@ -1,232 +1,2 @@
|
||||||
// This file is automatically generated by scripts/refresh-assets.ts.
|
import { AssetUrlOptions, AssetUrls } from './types'
|
||||||
// Do not edit manually.
|
export function getAssetUrlsByImport(opts?: AssetUrlOptions): AssetUrls
|
||||||
|
|
||||||
type AssetUrl = string | { src: string }
|
|
||||||
type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
|
||||||
|
|
||||||
export function getAssetUrlsByImport(opts?: AssetUrlOptions): {
|
|
||||||
fonts: {
|
|
||||||
monospace: string
|
|
||||||
sansSerif: string
|
|
||||||
serif: string
|
|
||||||
draw: string
|
|
||||||
}
|
|
||||||
icons: {
|
|
||||||
'align-bottom-center': string
|
|
||||||
'align-bottom-left': string
|
|
||||||
'align-bottom-right': string
|
|
||||||
'align-bottom': string
|
|
||||||
'align-center-center': string
|
|
||||||
'align-center-horizontal': string
|
|
||||||
'align-center-left': string
|
|
||||||
'align-center-right': string
|
|
||||||
'align-center-vertical': string
|
|
||||||
'align-left': string
|
|
||||||
'align-right': string
|
|
||||||
'align-top-center': string
|
|
||||||
'align-top-left': string
|
|
||||||
'align-top-right': string
|
|
||||||
'align-top': string
|
|
||||||
'arrow-left': string
|
|
||||||
'arrowhead-arrow': string
|
|
||||||
'arrowhead-bar': string
|
|
||||||
'arrowhead-diamond': string
|
|
||||||
'arrowhead-dot': string
|
|
||||||
'arrowhead-none': string
|
|
||||||
'arrowhead-square': string
|
|
||||||
'arrowhead-triangle-inverted': string
|
|
||||||
'arrowhead-triangle': string
|
|
||||||
'aspect-ratio': string
|
|
||||||
avatar: string
|
|
||||||
blob: string
|
|
||||||
'bring-forward': string
|
|
||||||
'bring-to-front': string
|
|
||||||
check: string
|
|
||||||
'checkbox-checked': string
|
|
||||||
'checkbox-empty': string
|
|
||||||
'chevron-down': string
|
|
||||||
'chevron-left': string
|
|
||||||
'chevron-right': string
|
|
||||||
'chevron-up': string
|
|
||||||
'chevrons-ne': string
|
|
||||||
'chevrons-sw': string
|
|
||||||
'clipboard-copied': string
|
|
||||||
'clipboard-copy': string
|
|
||||||
code: string
|
|
||||||
collab: string
|
|
||||||
color: string
|
|
||||||
comment: string
|
|
||||||
'cross-2': string
|
|
||||||
cross: string
|
|
||||||
'dash-dashed': string
|
|
||||||
'dash-dotted': string
|
|
||||||
'dash-draw': string
|
|
||||||
'dash-solid': string
|
|
||||||
discord: string
|
|
||||||
'distribute-horizontal': string
|
|
||||||
'distribute-vertical': string
|
|
||||||
dot: string
|
|
||||||
'dots-horizontal': string
|
|
||||||
'dots-vertical': string
|
|
||||||
'drag-handle-dots': string
|
|
||||||
duplicate: string
|
|
||||||
edit: string
|
|
||||||
'external-link': string
|
|
||||||
file: string
|
|
||||||
'fill-none': string
|
|
||||||
'fill-pattern': string
|
|
||||||
'fill-semi': string
|
|
||||||
'fill-solid': string
|
|
||||||
follow: string
|
|
||||||
following: string
|
|
||||||
'font-draw': string
|
|
||||||
'font-mono': string
|
|
||||||
'font-sans': string
|
|
||||||
'font-serif': string
|
|
||||||
'geo-arrow-down': string
|
|
||||||
'geo-arrow-left': string
|
|
||||||
'geo-arrow-right': string
|
|
||||||
'geo-arrow-up': string
|
|
||||||
'geo-check-box': string
|
|
||||||
'geo-diamond': string
|
|
||||||
'geo-ellipse': string
|
|
||||||
'geo-hexagon': string
|
|
||||||
'geo-octagon': string
|
|
||||||
'geo-oval': string
|
|
||||||
'geo-pentagon': string
|
|
||||||
'geo-rectangle': string
|
|
||||||
'geo-rhombus-2': string
|
|
||||||
'geo-rhombus': string
|
|
||||||
'geo-star': string
|
|
||||||
'geo-trapezoid': string
|
|
||||||
'geo-triangle': string
|
|
||||||
'geo-x-box': string
|
|
||||||
github: string
|
|
||||||
group: string
|
|
||||||
hidden: string
|
|
||||||
image: string
|
|
||||||
'info-circle': string
|
|
||||||
leading: string
|
|
||||||
link: string
|
|
||||||
'lock-small': string
|
|
||||||
lock: string
|
|
||||||
menu: string
|
|
||||||
minus: string
|
|
||||||
mixed: string
|
|
||||||
pack: string
|
|
||||||
page: string
|
|
||||||
plus: string
|
|
||||||
'question-mark-circle': string
|
|
||||||
'question-mark': string
|
|
||||||
redo: string
|
|
||||||
'reset-zoom': string
|
|
||||||
'rotate-ccw': string
|
|
||||||
'rotate-cw': string
|
|
||||||
ruler: string
|
|
||||||
search: string
|
|
||||||
'send-backward': string
|
|
||||||
'send-to-back': string
|
|
||||||
'settings-horizontal': string
|
|
||||||
'settings-vertical-1': string
|
|
||||||
'settings-vertical': string
|
|
||||||
'share-1': string
|
|
||||||
'share-2': string
|
|
||||||
'size-extra-large': string
|
|
||||||
'size-large': string
|
|
||||||
'size-medium': string
|
|
||||||
'size-small': string
|
|
||||||
'spline-cubic': string
|
|
||||||
'spline-line': string
|
|
||||||
'stack-horizontal': string
|
|
||||||
'stack-vertical': string
|
|
||||||
'stretch-horizontal': string
|
|
||||||
'stretch-vertical': string
|
|
||||||
'text-align-center': string
|
|
||||||
'text-align-justify': string
|
|
||||||
'text-align-left': string
|
|
||||||
'text-align-right': string
|
|
||||||
'tool-arrow': string
|
|
||||||
'tool-embed': string
|
|
||||||
'tool-eraser': string
|
|
||||||
'tool-frame': string
|
|
||||||
'tool-hand': string
|
|
||||||
'tool-highlight': string
|
|
||||||
'tool-laser': string
|
|
||||||
'tool-line': string
|
|
||||||
'tool-media': string
|
|
||||||
'tool-note': string
|
|
||||||
'tool-pencil': string
|
|
||||||
'tool-pointer': string
|
|
||||||
'tool-text': string
|
|
||||||
trash: string
|
|
||||||
'triangle-down': string
|
|
||||||
'triangle-up': string
|
|
||||||
twitter: string
|
|
||||||
undo: string
|
|
||||||
ungroup: string
|
|
||||||
'unlock-small': string
|
|
||||||
unlock: string
|
|
||||||
'vertical-align-center': string
|
|
||||||
'vertical-align-end': string
|
|
||||||
'vertical-align-start': string
|
|
||||||
visible: string
|
|
||||||
'warning-triangle': string
|
|
||||||
'zoom-in': string
|
|
||||||
'zoom-out': string
|
|
||||||
}
|
|
||||||
translations: {
|
|
||||||
ar: string
|
|
||||||
ca: string
|
|
||||||
da: string
|
|
||||||
de: string
|
|
||||||
en: string
|
|
||||||
es: string
|
|
||||||
fa: string
|
|
||||||
fi: string
|
|
||||||
fr: string
|
|
||||||
gl: string
|
|
||||||
he: string
|
|
||||||
'hi-in': string
|
|
||||||
hu: string
|
|
||||||
it: string
|
|
||||||
ja: string
|
|
||||||
'ko-kr': string
|
|
||||||
ku: string
|
|
||||||
languages: string
|
|
||||||
main: string
|
|
||||||
my: string
|
|
||||||
ne: string
|
|
||||||
no: string
|
|
||||||
pl: string
|
|
||||||
'pt-br': string
|
|
||||||
'pt-pt': string
|
|
||||||
ro: string
|
|
||||||
ru: string
|
|
||||||
sv: string
|
|
||||||
te: string
|
|
||||||
th: string
|
|
||||||
tr: string
|
|
||||||
uk: string
|
|
||||||
vi: string
|
|
||||||
'zh-cn': string
|
|
||||||
'zh-tw': string
|
|
||||||
}
|
|
||||||
embedIcons: {
|
|
||||||
codepen: string
|
|
||||||
codesandbox: string
|
|
||||||
excalidraw: string
|
|
||||||
felt: string
|
|
||||||
figma: string
|
|
||||||
github_gist: string
|
|
||||||
google_calendar: string
|
|
||||||
google_maps: string
|
|
||||||
google_slides: string
|
|
||||||
observable: string
|
|
||||||
replit: string
|
|
||||||
scratch: string
|
|
||||||
spotify: string
|
|
||||||
tldraw: string
|
|
||||||
vimeo: string
|
|
||||||
youtube: string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
/// <reference path="./modules.d.ts" />
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
|
|
||||||
import embedIconsCodepen from './embed-icons/codepen.png'
|
import embedIconsCodepen from './embed-icons/codepen.png'
|
||||||
import embedIconsCodesandbox from './embed-icons/codesandbox.png'
|
import embedIconsCodesandbox from './embed-icons/codesandbox.png'
|
||||||
import embedIconsExcalidraw from './embed-icons/excalidraw.png'
|
import embedIconsExcalidraw from './embed-icons/excalidraw.png'
|
||||||
|
|
@ -220,27 +222,6 @@ import translationsVi from './translations/vi.json'
|
||||||
import translationsZhCn from './translations/zh-cn.json'
|
import translationsZhCn from './translations/zh-cn.json'
|
||||||
import translationsZhTw from './translations/zh-tw.json'
|
import translationsZhTw from './translations/zh-tw.json'
|
||||||
|
|
||||||
/** @typedef {string | { src: string }} AssetUrl */
|
|
||||||
/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {AssetUrl} assetUrl
|
|
||||||
* @param {AssetUrlOptions} [format]
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
function formatAssetUrl(assetUrl, format = {}) {
|
|
||||||
const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
|
|
||||||
|
|
||||||
if (typeof format === 'function') return format(assetUrlString)
|
|
||||||
|
|
||||||
const { baseUrl = '' } = format
|
|
||||||
|
|
||||||
if (assetUrlString.startsWith('data:')) return assetUrlString
|
|
||||||
if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
|
|
||||||
|
|
||||||
return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {AssetUrlOptions} [opts]
|
* @param {AssetUrlOptions} [opts]
|
||||||
* @public
|
* @public
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,13 @@
|
||||||
"translations",
|
"translations",
|
||||||
"imports.js",
|
"imports.js",
|
||||||
"imports.d.ts",
|
"imports.d.ts",
|
||||||
|
"selfHosted.js",
|
||||||
|
"selfHosted.d.ts",
|
||||||
|
"types.d.ts",
|
||||||
"urls.js",
|
"urls.js",
|
||||||
"urls.d.ts"
|
"urls.d.ts",
|
||||||
|
"utils.js",
|
||||||
|
"utils.d.ts"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"pack-tarball": "yarn pack",
|
"pack-tarball": "yarn pack",
|
||||||
|
|
|
||||||
2
packages/assets/selfHosted.d.ts
vendored
Normal file
2
packages/assets/selfHosted.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
import { AssetUrlOptions, AssetUrls } from './types'
|
||||||
|
export function getAssetUrls(opts?: AssetUrlOptions): AssetUrls
|
||||||
242
packages/assets/selfHosted.js
Normal file
242
packages/assets/selfHosted.js
Normal file
|
|
@ -0,0 +1,242 @@
|
||||||
|
// This file is automatically generated by scripts/refresh-assets.ts.
|
||||||
|
// Do not edit manually.
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {AssetUrlOptions} [opts]
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export function getAssetUrls(opts) {
|
||||||
|
return {
|
||||||
|
fonts: {
|
||||||
|
monospace: formatAssetUrl('./fonts/IBMPlexMono-Medium.woff2', opts),
|
||||||
|
sansSerif: formatAssetUrl('./fonts/IBMPlexSans-Medium.woff2', opts),
|
||||||
|
serif: formatAssetUrl('./fonts/IBMPlexSerif-Medium.woff2', opts),
|
||||||
|
draw: formatAssetUrl('./fonts/Shantell_Sans-Normal-SemiBold.woff2', opts),
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
'align-bottom-center': formatAssetUrl('./icons/icon/align-bottom-center.svg', opts),
|
||||||
|
'align-bottom-left': formatAssetUrl('./icons/icon/align-bottom-left.svg', opts),
|
||||||
|
'align-bottom-right': formatAssetUrl('./icons/icon/align-bottom-right.svg', opts),
|
||||||
|
'align-bottom': formatAssetUrl('./icons/icon/align-bottom.svg', opts),
|
||||||
|
'align-center-center': formatAssetUrl('./icons/icon/align-center-center.svg', opts),
|
||||||
|
'align-center-horizontal': formatAssetUrl('./icons/icon/align-center-horizontal.svg', opts),
|
||||||
|
'align-center-left': formatAssetUrl('./icons/icon/align-center-left.svg', opts),
|
||||||
|
'align-center-right': formatAssetUrl('./icons/icon/align-center-right.svg', opts),
|
||||||
|
'align-center-vertical': formatAssetUrl('./icons/icon/align-center-vertical.svg', opts),
|
||||||
|
'align-left': formatAssetUrl('./icons/icon/align-left.svg', opts),
|
||||||
|
'align-right': formatAssetUrl('./icons/icon/align-right.svg', opts),
|
||||||
|
'align-top-center': formatAssetUrl('./icons/icon/align-top-center.svg', opts),
|
||||||
|
'align-top-left': formatAssetUrl('./icons/icon/align-top-left.svg', opts),
|
||||||
|
'align-top-right': formatAssetUrl('./icons/icon/align-top-right.svg', opts),
|
||||||
|
'align-top': formatAssetUrl('./icons/icon/align-top.svg', opts),
|
||||||
|
'arrow-left': formatAssetUrl('./icons/icon/arrow-left.svg', opts),
|
||||||
|
'arrowhead-arrow': formatAssetUrl('./icons/icon/arrowhead-arrow.svg', opts),
|
||||||
|
'arrowhead-bar': formatAssetUrl('./icons/icon/arrowhead-bar.svg', opts),
|
||||||
|
'arrowhead-diamond': formatAssetUrl('./icons/icon/arrowhead-diamond.svg', opts),
|
||||||
|
'arrowhead-dot': formatAssetUrl('./icons/icon/arrowhead-dot.svg', opts),
|
||||||
|
'arrowhead-none': formatAssetUrl('./icons/icon/arrowhead-none.svg', opts),
|
||||||
|
'arrowhead-square': formatAssetUrl('./icons/icon/arrowhead-square.svg', opts),
|
||||||
|
'arrowhead-triangle-inverted': formatAssetUrl(
|
||||||
|
'./icons/icon/arrowhead-triangle-inverted.svg',
|
||||||
|
opts
|
||||||
|
),
|
||||||
|
'arrowhead-triangle': formatAssetUrl('./icons/icon/arrowhead-triangle.svg', opts),
|
||||||
|
'aspect-ratio': formatAssetUrl('./icons/icon/aspect-ratio.svg', opts),
|
||||||
|
avatar: formatAssetUrl('./icons/icon/avatar.svg', opts),
|
||||||
|
blob: formatAssetUrl('./icons/icon/blob.svg', opts),
|
||||||
|
'bring-forward': formatAssetUrl('./icons/icon/bring-forward.svg', opts),
|
||||||
|
'bring-to-front': formatAssetUrl('./icons/icon/bring-to-front.svg', opts),
|
||||||
|
check: formatAssetUrl('./icons/icon/check.svg', opts),
|
||||||
|
'checkbox-checked': formatAssetUrl('./icons/icon/checkbox-checked.svg', opts),
|
||||||
|
'checkbox-empty': formatAssetUrl('./icons/icon/checkbox-empty.svg', opts),
|
||||||
|
'chevron-down': formatAssetUrl('./icons/icon/chevron-down.svg', opts),
|
||||||
|
'chevron-left': formatAssetUrl('./icons/icon/chevron-left.svg', opts),
|
||||||
|
'chevron-right': formatAssetUrl('./icons/icon/chevron-right.svg', opts),
|
||||||
|
'chevron-up': formatAssetUrl('./icons/icon/chevron-up.svg', opts),
|
||||||
|
'chevrons-ne': formatAssetUrl('./icons/icon/chevrons-ne.svg', opts),
|
||||||
|
'chevrons-sw': formatAssetUrl('./icons/icon/chevrons-sw.svg', opts),
|
||||||
|
'clipboard-copied': formatAssetUrl('./icons/icon/clipboard-copied.svg', opts),
|
||||||
|
'clipboard-copy': formatAssetUrl('./icons/icon/clipboard-copy.svg', opts),
|
||||||
|
code: formatAssetUrl('./icons/icon/code.svg', opts),
|
||||||
|
collab: formatAssetUrl('./icons/icon/collab.svg', opts),
|
||||||
|
color: formatAssetUrl('./icons/icon/color.svg', opts),
|
||||||
|
comment: formatAssetUrl('./icons/icon/comment.svg', opts),
|
||||||
|
'cross-2': formatAssetUrl('./icons/icon/cross-2.svg', opts),
|
||||||
|
cross: formatAssetUrl('./icons/icon/cross.svg', opts),
|
||||||
|
'dash-dashed': formatAssetUrl('./icons/icon/dash-dashed.svg', opts),
|
||||||
|
'dash-dotted': formatAssetUrl('./icons/icon/dash-dotted.svg', opts),
|
||||||
|
'dash-draw': formatAssetUrl('./icons/icon/dash-draw.svg', opts),
|
||||||
|
'dash-solid': formatAssetUrl('./icons/icon/dash-solid.svg', opts),
|
||||||
|
discord: formatAssetUrl('./icons/icon/discord.svg', opts),
|
||||||
|
'distribute-horizontal': formatAssetUrl('./icons/icon/distribute-horizontal.svg', opts),
|
||||||
|
'distribute-vertical': formatAssetUrl('./icons/icon/distribute-vertical.svg', opts),
|
||||||
|
dot: formatAssetUrl('./icons/icon/dot.svg', opts),
|
||||||
|
'dots-horizontal': formatAssetUrl('./icons/icon/dots-horizontal.svg', opts),
|
||||||
|
'dots-vertical': formatAssetUrl('./icons/icon/dots-vertical.svg', opts),
|
||||||
|
'drag-handle-dots': formatAssetUrl('./icons/icon/drag-handle-dots.svg', opts),
|
||||||
|
duplicate: formatAssetUrl('./icons/icon/duplicate.svg', opts),
|
||||||
|
edit: formatAssetUrl('./icons/icon/edit.svg', opts),
|
||||||
|
'external-link': formatAssetUrl('./icons/icon/external-link.svg', opts),
|
||||||
|
file: formatAssetUrl('./icons/icon/file.svg', opts),
|
||||||
|
'fill-none': formatAssetUrl('./icons/icon/fill-none.svg', opts),
|
||||||
|
'fill-pattern': formatAssetUrl('./icons/icon/fill-pattern.svg', opts),
|
||||||
|
'fill-semi': formatAssetUrl('./icons/icon/fill-semi.svg', opts),
|
||||||
|
'fill-solid': formatAssetUrl('./icons/icon/fill-solid.svg', opts),
|
||||||
|
follow: formatAssetUrl('./icons/icon/follow.svg', opts),
|
||||||
|
following: formatAssetUrl('./icons/icon/following.svg', opts),
|
||||||
|
'font-draw': formatAssetUrl('./icons/icon/font-draw.svg', opts),
|
||||||
|
'font-mono': formatAssetUrl('./icons/icon/font-mono.svg', opts),
|
||||||
|
'font-sans': formatAssetUrl('./icons/icon/font-sans.svg', opts),
|
||||||
|
'font-serif': formatAssetUrl('./icons/icon/font-serif.svg', opts),
|
||||||
|
'geo-arrow-down': formatAssetUrl('./icons/icon/geo-arrow-down.svg', opts),
|
||||||
|
'geo-arrow-left': formatAssetUrl('./icons/icon/geo-arrow-left.svg', opts),
|
||||||
|
'geo-arrow-right': formatAssetUrl('./icons/icon/geo-arrow-right.svg', opts),
|
||||||
|
'geo-arrow-up': formatAssetUrl('./icons/icon/geo-arrow-up.svg', opts),
|
||||||
|
'geo-check-box': formatAssetUrl('./icons/icon/geo-check-box.svg', opts),
|
||||||
|
'geo-diamond': formatAssetUrl('./icons/icon/geo-diamond.svg', opts),
|
||||||
|
'geo-ellipse': formatAssetUrl('./icons/icon/geo-ellipse.svg', opts),
|
||||||
|
'geo-hexagon': formatAssetUrl('./icons/icon/geo-hexagon.svg', opts),
|
||||||
|
'geo-octagon': formatAssetUrl('./icons/icon/geo-octagon.svg', opts),
|
||||||
|
'geo-oval': formatAssetUrl('./icons/icon/geo-oval.svg', opts),
|
||||||
|
'geo-pentagon': formatAssetUrl('./icons/icon/geo-pentagon.svg', opts),
|
||||||
|
'geo-rectangle': formatAssetUrl('./icons/icon/geo-rectangle.svg', opts),
|
||||||
|
'geo-rhombus-2': formatAssetUrl('./icons/icon/geo-rhombus-2.svg', opts),
|
||||||
|
'geo-rhombus': formatAssetUrl('./icons/icon/geo-rhombus.svg', opts),
|
||||||
|
'geo-star': formatAssetUrl('./icons/icon/geo-star.svg', opts),
|
||||||
|
'geo-trapezoid': formatAssetUrl('./icons/icon/geo-trapezoid.svg', opts),
|
||||||
|
'geo-triangle': formatAssetUrl('./icons/icon/geo-triangle.svg', opts),
|
||||||
|
'geo-x-box': formatAssetUrl('./icons/icon/geo-x-box.svg', opts),
|
||||||
|
github: formatAssetUrl('./icons/icon/github.svg', opts),
|
||||||
|
group: formatAssetUrl('./icons/icon/group.svg', opts),
|
||||||
|
hidden: formatAssetUrl('./icons/icon/hidden.svg', opts),
|
||||||
|
image: formatAssetUrl('./icons/icon/image.svg', opts),
|
||||||
|
'info-circle': formatAssetUrl('./icons/icon/info-circle.svg', opts),
|
||||||
|
leading: formatAssetUrl('./icons/icon/leading.svg', opts),
|
||||||
|
link: formatAssetUrl('./icons/icon/link.svg', opts),
|
||||||
|
'lock-small': formatAssetUrl('./icons/icon/lock-small.svg', opts),
|
||||||
|
lock: formatAssetUrl('./icons/icon/lock.svg', opts),
|
||||||
|
menu: formatAssetUrl('./icons/icon/menu.svg', opts),
|
||||||
|
minus: formatAssetUrl('./icons/icon/minus.svg', opts),
|
||||||
|
mixed: formatAssetUrl('./icons/icon/mixed.svg', opts),
|
||||||
|
pack: formatAssetUrl('./icons/icon/pack.svg', opts),
|
||||||
|
page: formatAssetUrl('./icons/icon/page.svg', opts),
|
||||||
|
plus: formatAssetUrl('./icons/icon/plus.svg', opts),
|
||||||
|
'question-mark-circle': formatAssetUrl('./icons/icon/question-mark-circle.svg', opts),
|
||||||
|
'question-mark': formatAssetUrl('./icons/icon/question-mark.svg', opts),
|
||||||
|
redo: formatAssetUrl('./icons/icon/redo.svg', opts),
|
||||||
|
'reset-zoom': formatAssetUrl('./icons/icon/reset-zoom.svg', opts),
|
||||||
|
'rotate-ccw': formatAssetUrl('./icons/icon/rotate-ccw.svg', opts),
|
||||||
|
'rotate-cw': formatAssetUrl('./icons/icon/rotate-cw.svg', opts),
|
||||||
|
ruler: formatAssetUrl('./icons/icon/ruler.svg', opts),
|
||||||
|
search: formatAssetUrl('./icons/icon/search.svg', opts),
|
||||||
|
'send-backward': formatAssetUrl('./icons/icon/send-backward.svg', opts),
|
||||||
|
'send-to-back': formatAssetUrl('./icons/icon/send-to-back.svg', opts),
|
||||||
|
'settings-horizontal': formatAssetUrl('./icons/icon/settings-horizontal.svg', opts),
|
||||||
|
'settings-vertical-1': formatAssetUrl('./icons/icon/settings-vertical-1.svg', opts),
|
||||||
|
'settings-vertical': formatAssetUrl('./icons/icon/settings-vertical.svg', opts),
|
||||||
|
'share-1': formatAssetUrl('./icons/icon/share-1.svg', opts),
|
||||||
|
'share-2': formatAssetUrl('./icons/icon/share-2.svg', opts),
|
||||||
|
'size-extra-large': formatAssetUrl('./icons/icon/size-extra-large.svg', opts),
|
||||||
|
'size-large': formatAssetUrl('./icons/icon/size-large.svg', opts),
|
||||||
|
'size-medium': formatAssetUrl('./icons/icon/size-medium.svg', opts),
|
||||||
|
'size-small': formatAssetUrl('./icons/icon/size-small.svg', opts),
|
||||||
|
'spline-cubic': formatAssetUrl('./icons/icon/spline-cubic.svg', opts),
|
||||||
|
'spline-line': formatAssetUrl('./icons/icon/spline-line.svg', opts),
|
||||||
|
'stack-horizontal': formatAssetUrl('./icons/icon/stack-horizontal.svg', opts),
|
||||||
|
'stack-vertical': formatAssetUrl('./icons/icon/stack-vertical.svg', opts),
|
||||||
|
'stretch-horizontal': formatAssetUrl('./icons/icon/stretch-horizontal.svg', opts),
|
||||||
|
'stretch-vertical': formatAssetUrl('./icons/icon/stretch-vertical.svg', opts),
|
||||||
|
'text-align-center': formatAssetUrl('./icons/icon/text-align-center.svg', opts),
|
||||||
|
'text-align-justify': formatAssetUrl('./icons/icon/text-align-justify.svg', opts),
|
||||||
|
'text-align-left': formatAssetUrl('./icons/icon/text-align-left.svg', opts),
|
||||||
|
'text-align-right': formatAssetUrl('./icons/icon/text-align-right.svg', opts),
|
||||||
|
'tool-arrow': formatAssetUrl('./icons/icon/tool-arrow.svg', opts),
|
||||||
|
'tool-embed': formatAssetUrl('./icons/icon/tool-embed.svg', opts),
|
||||||
|
'tool-eraser': formatAssetUrl('./icons/icon/tool-eraser.svg', opts),
|
||||||
|
'tool-frame': formatAssetUrl('./icons/icon/tool-frame.svg', opts),
|
||||||
|
'tool-hand': formatAssetUrl('./icons/icon/tool-hand.svg', opts),
|
||||||
|
'tool-highlight': formatAssetUrl('./icons/icon/tool-highlight.svg', opts),
|
||||||
|
'tool-laser': formatAssetUrl('./icons/icon/tool-laser.svg', opts),
|
||||||
|
'tool-line': formatAssetUrl('./icons/icon/tool-line.svg', opts),
|
||||||
|
'tool-media': formatAssetUrl('./icons/icon/tool-media.svg', opts),
|
||||||
|
'tool-note': formatAssetUrl('./icons/icon/tool-note.svg', opts),
|
||||||
|
'tool-pencil': formatAssetUrl('./icons/icon/tool-pencil.svg', opts),
|
||||||
|
'tool-pointer': formatAssetUrl('./icons/icon/tool-pointer.svg', opts),
|
||||||
|
'tool-text': formatAssetUrl('./icons/icon/tool-text.svg', opts),
|
||||||
|
trash: formatAssetUrl('./icons/icon/trash.svg', opts),
|
||||||
|
'triangle-down': formatAssetUrl('./icons/icon/triangle-down.svg', opts),
|
||||||
|
'triangle-up': formatAssetUrl('./icons/icon/triangle-up.svg', opts),
|
||||||
|
twitter: formatAssetUrl('./icons/icon/twitter.svg', opts),
|
||||||
|
undo: formatAssetUrl('./icons/icon/undo.svg', opts),
|
||||||
|
ungroup: formatAssetUrl('./icons/icon/ungroup.svg', opts),
|
||||||
|
'unlock-small': formatAssetUrl('./icons/icon/unlock-small.svg', opts),
|
||||||
|
unlock: formatAssetUrl('./icons/icon/unlock.svg', opts),
|
||||||
|
'vertical-align-center': formatAssetUrl('./icons/icon/vertical-align-center.svg', opts),
|
||||||
|
'vertical-align-end': formatAssetUrl('./icons/icon/vertical-align-end.svg', opts),
|
||||||
|
'vertical-align-start': formatAssetUrl('./icons/icon/vertical-align-start.svg', opts),
|
||||||
|
visible: formatAssetUrl('./icons/icon/visible.svg', opts),
|
||||||
|
'warning-triangle': formatAssetUrl('./icons/icon/warning-triangle.svg', opts),
|
||||||
|
'zoom-in': formatAssetUrl('./icons/icon/zoom-in.svg', opts),
|
||||||
|
'zoom-out': formatAssetUrl('./icons/icon/zoom-out.svg', opts),
|
||||||
|
},
|
||||||
|
translations: {
|
||||||
|
ar: formatAssetUrl('./translations/ar.json', opts),
|
||||||
|
ca: formatAssetUrl('./translations/ca.json', opts),
|
||||||
|
da: formatAssetUrl('./translations/da.json', opts),
|
||||||
|
de: formatAssetUrl('./translations/de.json', opts),
|
||||||
|
en: formatAssetUrl('./translations/en.json', opts),
|
||||||
|
es: formatAssetUrl('./translations/es.json', opts),
|
||||||
|
fa: formatAssetUrl('./translations/fa.json', opts),
|
||||||
|
fi: formatAssetUrl('./translations/fi.json', opts),
|
||||||
|
fr: formatAssetUrl('./translations/fr.json', opts),
|
||||||
|
gl: formatAssetUrl('./translations/gl.json', opts),
|
||||||
|
he: formatAssetUrl('./translations/he.json', opts),
|
||||||
|
'hi-in': formatAssetUrl('./translations/hi-in.json', opts),
|
||||||
|
hu: formatAssetUrl('./translations/hu.json', opts),
|
||||||
|
it: formatAssetUrl('./translations/it.json', opts),
|
||||||
|
ja: formatAssetUrl('./translations/ja.json', opts),
|
||||||
|
'ko-kr': formatAssetUrl('./translations/ko-kr.json', opts),
|
||||||
|
ku: formatAssetUrl('./translations/ku.json', opts),
|
||||||
|
languages: formatAssetUrl('./translations/languages.json', opts),
|
||||||
|
main: formatAssetUrl('./translations/main.json', opts),
|
||||||
|
my: formatAssetUrl('./translations/my.json', opts),
|
||||||
|
ne: formatAssetUrl('./translations/ne.json', opts),
|
||||||
|
no: formatAssetUrl('./translations/no.json', opts),
|
||||||
|
pl: formatAssetUrl('./translations/pl.json', opts),
|
||||||
|
'pt-br': formatAssetUrl('./translations/pt-br.json', opts),
|
||||||
|
'pt-pt': formatAssetUrl('./translations/pt-pt.json', opts),
|
||||||
|
ro: formatAssetUrl('./translations/ro.json', opts),
|
||||||
|
ru: formatAssetUrl('./translations/ru.json', opts),
|
||||||
|
sv: formatAssetUrl('./translations/sv.json', opts),
|
||||||
|
te: formatAssetUrl('./translations/te.json', opts),
|
||||||
|
th: formatAssetUrl('./translations/th.json', opts),
|
||||||
|
tr: formatAssetUrl('./translations/tr.json', opts),
|
||||||
|
uk: formatAssetUrl('./translations/uk.json', opts),
|
||||||
|
vi: formatAssetUrl('./translations/vi.json', opts),
|
||||||
|
'zh-cn': formatAssetUrl('./translations/zh-cn.json', opts),
|
||||||
|
'zh-tw': formatAssetUrl('./translations/zh-tw.json', opts),
|
||||||
|
},
|
||||||
|
embedIcons: {
|
||||||
|
codepen: formatAssetUrl('./embed-icons/codepen.png', opts),
|
||||||
|
codesandbox: formatAssetUrl('./embed-icons/codesandbox.png', opts),
|
||||||
|
excalidraw: formatAssetUrl('./embed-icons/excalidraw.png', opts),
|
||||||
|
felt: formatAssetUrl('./embed-icons/felt.png', opts),
|
||||||
|
figma: formatAssetUrl('./embed-icons/figma.png', opts),
|
||||||
|
github_gist: formatAssetUrl('./embed-icons/github_gist.png', opts),
|
||||||
|
google_calendar: formatAssetUrl('./embed-icons/google_calendar.png', opts),
|
||||||
|
google_maps: formatAssetUrl('./embed-icons/google_maps.png', opts),
|
||||||
|
google_slides: formatAssetUrl('./embed-icons/google_slides.png', opts),
|
||||||
|
observable: formatAssetUrl('./embed-icons/observable.png', opts),
|
||||||
|
replit: formatAssetUrl('./embed-icons/replit.png', opts),
|
||||||
|
scratch: formatAssetUrl('./embed-icons/scratch.png', opts),
|
||||||
|
spotify: formatAssetUrl('./embed-icons/spotify.png', opts),
|
||||||
|
tldraw: formatAssetUrl('./embed-icons/tldraw.png', opts),
|
||||||
|
vimeo: formatAssetUrl('./embed-icons/vimeo.png', opts),
|
||||||
|
youtube: formatAssetUrl('./embed-icons/youtube.png', opts),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "../../config/tsconfig.base.json",
|
"extends": "../../config/tsconfig.base.json",
|
||||||
"include": ["urls.js", "imports.js", "modules.d.ts"],
|
"include": ["urls.js", "imports.js", "selfHosted.js", "utils.js", "modules.d.ts"],
|
||||||
"exclude": ["node_modules", "dist", ".tsbuild*"],
|
"exclude": ["node_modules", "dist", ".tsbuild*"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./.tsbuild",
|
"outDir": "./.tsbuild",
|
||||||
|
|
|
||||||
231
packages/assets/types.d.ts
vendored
Normal file
231
packages/assets/types.d.ts
vendored
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
// This file is automatically generated by scripts/refresh-assets.ts.
|
||||||
|
// Do not edit manually.
|
||||||
|
|
||||||
|
export type AssetUrl = string | { src: string }
|
||||||
|
export type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
||||||
|
export type AssetUrls = {
|
||||||
|
fonts: {
|
||||||
|
monospace: string
|
||||||
|
sansSerif: string
|
||||||
|
serif: string
|
||||||
|
draw: string
|
||||||
|
}
|
||||||
|
icons: {
|
||||||
|
'align-bottom-center': string
|
||||||
|
'align-bottom-left': string
|
||||||
|
'align-bottom-right': string
|
||||||
|
'align-bottom': string
|
||||||
|
'align-center-center': string
|
||||||
|
'align-center-horizontal': string
|
||||||
|
'align-center-left': string
|
||||||
|
'align-center-right': string
|
||||||
|
'align-center-vertical': string
|
||||||
|
'align-left': string
|
||||||
|
'align-right': string
|
||||||
|
'align-top-center': string
|
||||||
|
'align-top-left': string
|
||||||
|
'align-top-right': string
|
||||||
|
'align-top': string
|
||||||
|
'arrow-left': string
|
||||||
|
'arrowhead-arrow': string
|
||||||
|
'arrowhead-bar': string
|
||||||
|
'arrowhead-diamond': string
|
||||||
|
'arrowhead-dot': string
|
||||||
|
'arrowhead-none': string
|
||||||
|
'arrowhead-square': string
|
||||||
|
'arrowhead-triangle-inverted': string
|
||||||
|
'arrowhead-triangle': string
|
||||||
|
'aspect-ratio': string
|
||||||
|
avatar: string
|
||||||
|
blob: string
|
||||||
|
'bring-forward': string
|
||||||
|
'bring-to-front': string
|
||||||
|
check: string
|
||||||
|
'checkbox-checked': string
|
||||||
|
'checkbox-empty': string
|
||||||
|
'chevron-down': string
|
||||||
|
'chevron-left': string
|
||||||
|
'chevron-right': string
|
||||||
|
'chevron-up': string
|
||||||
|
'chevrons-ne': string
|
||||||
|
'chevrons-sw': string
|
||||||
|
'clipboard-copied': string
|
||||||
|
'clipboard-copy': string
|
||||||
|
code: string
|
||||||
|
collab: string
|
||||||
|
color: string
|
||||||
|
comment: string
|
||||||
|
'cross-2': string
|
||||||
|
cross: string
|
||||||
|
'dash-dashed': string
|
||||||
|
'dash-dotted': string
|
||||||
|
'dash-draw': string
|
||||||
|
'dash-solid': string
|
||||||
|
discord: string
|
||||||
|
'distribute-horizontal': string
|
||||||
|
'distribute-vertical': string
|
||||||
|
dot: string
|
||||||
|
'dots-horizontal': string
|
||||||
|
'dots-vertical': string
|
||||||
|
'drag-handle-dots': string
|
||||||
|
duplicate: string
|
||||||
|
edit: string
|
||||||
|
'external-link': string
|
||||||
|
file: string
|
||||||
|
'fill-none': string
|
||||||
|
'fill-pattern': string
|
||||||
|
'fill-semi': string
|
||||||
|
'fill-solid': string
|
||||||
|
follow: string
|
||||||
|
following: string
|
||||||
|
'font-draw': string
|
||||||
|
'font-mono': string
|
||||||
|
'font-sans': string
|
||||||
|
'font-serif': string
|
||||||
|
'geo-arrow-down': string
|
||||||
|
'geo-arrow-left': string
|
||||||
|
'geo-arrow-right': string
|
||||||
|
'geo-arrow-up': string
|
||||||
|
'geo-check-box': string
|
||||||
|
'geo-diamond': string
|
||||||
|
'geo-ellipse': string
|
||||||
|
'geo-hexagon': string
|
||||||
|
'geo-octagon': string
|
||||||
|
'geo-oval': string
|
||||||
|
'geo-pentagon': string
|
||||||
|
'geo-rectangle': string
|
||||||
|
'geo-rhombus-2': string
|
||||||
|
'geo-rhombus': string
|
||||||
|
'geo-star': string
|
||||||
|
'geo-trapezoid': string
|
||||||
|
'geo-triangle': string
|
||||||
|
'geo-x-box': string
|
||||||
|
github: string
|
||||||
|
group: string
|
||||||
|
hidden: string
|
||||||
|
image: string
|
||||||
|
'info-circle': string
|
||||||
|
leading: string
|
||||||
|
link: string
|
||||||
|
'lock-small': string
|
||||||
|
lock: string
|
||||||
|
menu: string
|
||||||
|
minus: string
|
||||||
|
mixed: string
|
||||||
|
pack: string
|
||||||
|
page: string
|
||||||
|
plus: string
|
||||||
|
'question-mark-circle': string
|
||||||
|
'question-mark': string
|
||||||
|
redo: string
|
||||||
|
'reset-zoom': string
|
||||||
|
'rotate-ccw': string
|
||||||
|
'rotate-cw': string
|
||||||
|
ruler: string
|
||||||
|
search: string
|
||||||
|
'send-backward': string
|
||||||
|
'send-to-back': string
|
||||||
|
'settings-horizontal': string
|
||||||
|
'settings-vertical-1': string
|
||||||
|
'settings-vertical': string
|
||||||
|
'share-1': string
|
||||||
|
'share-2': string
|
||||||
|
'size-extra-large': string
|
||||||
|
'size-large': string
|
||||||
|
'size-medium': string
|
||||||
|
'size-small': string
|
||||||
|
'spline-cubic': string
|
||||||
|
'spline-line': string
|
||||||
|
'stack-horizontal': string
|
||||||
|
'stack-vertical': string
|
||||||
|
'stretch-horizontal': string
|
||||||
|
'stretch-vertical': string
|
||||||
|
'text-align-center': string
|
||||||
|
'text-align-justify': string
|
||||||
|
'text-align-left': string
|
||||||
|
'text-align-right': string
|
||||||
|
'tool-arrow': string
|
||||||
|
'tool-embed': string
|
||||||
|
'tool-eraser': string
|
||||||
|
'tool-frame': string
|
||||||
|
'tool-hand': string
|
||||||
|
'tool-highlight': string
|
||||||
|
'tool-laser': string
|
||||||
|
'tool-line': string
|
||||||
|
'tool-media': string
|
||||||
|
'tool-note': string
|
||||||
|
'tool-pencil': string
|
||||||
|
'tool-pointer': string
|
||||||
|
'tool-text': string
|
||||||
|
trash: string
|
||||||
|
'triangle-down': string
|
||||||
|
'triangle-up': string
|
||||||
|
twitter: string
|
||||||
|
undo: string
|
||||||
|
ungroup: string
|
||||||
|
'unlock-small': string
|
||||||
|
unlock: string
|
||||||
|
'vertical-align-center': string
|
||||||
|
'vertical-align-end': string
|
||||||
|
'vertical-align-start': string
|
||||||
|
visible: string
|
||||||
|
'warning-triangle': string
|
||||||
|
'zoom-in': string
|
||||||
|
'zoom-out': string
|
||||||
|
}
|
||||||
|
translations: {
|
||||||
|
ar: string
|
||||||
|
ca: string
|
||||||
|
da: string
|
||||||
|
de: string
|
||||||
|
en: string
|
||||||
|
es: string
|
||||||
|
fa: string
|
||||||
|
fi: string
|
||||||
|
fr: string
|
||||||
|
gl: string
|
||||||
|
he: string
|
||||||
|
'hi-in': string
|
||||||
|
hu: string
|
||||||
|
it: string
|
||||||
|
ja: string
|
||||||
|
'ko-kr': string
|
||||||
|
ku: string
|
||||||
|
languages: string
|
||||||
|
main: string
|
||||||
|
my: string
|
||||||
|
ne: string
|
||||||
|
no: string
|
||||||
|
pl: string
|
||||||
|
'pt-br': string
|
||||||
|
'pt-pt': string
|
||||||
|
ro: string
|
||||||
|
ru: string
|
||||||
|
sv: string
|
||||||
|
te: string
|
||||||
|
th: string
|
||||||
|
tr: string
|
||||||
|
uk: string
|
||||||
|
vi: string
|
||||||
|
'zh-cn': string
|
||||||
|
'zh-tw': string
|
||||||
|
}
|
||||||
|
embedIcons: {
|
||||||
|
codepen: string
|
||||||
|
codesandbox: string
|
||||||
|
excalidraw: string
|
||||||
|
felt: string
|
||||||
|
figma: string
|
||||||
|
github_gist: string
|
||||||
|
google_calendar: string
|
||||||
|
google_maps: string
|
||||||
|
google_slides: string
|
||||||
|
observable: string
|
||||||
|
replit: string
|
||||||
|
scratch: string
|
||||||
|
spotify: string
|
||||||
|
tldraw: string
|
||||||
|
vimeo: string
|
||||||
|
youtube: string
|
||||||
|
}
|
||||||
|
}
|
||||||
234
packages/assets/urls.d.ts
vendored
234
packages/assets/urls.d.ts
vendored
|
|
@ -1,232 +1,2 @@
|
||||||
// This file is automatically generated by scripts/refresh-assets.ts.
|
import { AssetUrlOptions, AssetUrls } from './types'
|
||||||
// Do not edit manually.
|
export function getAssetUrlsByMetaUrl(opts?: AssetUrlOptions): AssetUrls
|
||||||
|
|
||||||
type AssetUrl = string | { src: string }
|
|
||||||
type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
|
||||||
|
|
||||||
export function getAssetUrlsByMetaUrl(opts?: AssetUrlOptions): {
|
|
||||||
fonts: {
|
|
||||||
monospace: string
|
|
||||||
sansSerif: string
|
|
||||||
serif: string
|
|
||||||
draw: string
|
|
||||||
}
|
|
||||||
icons: {
|
|
||||||
'align-bottom-center': string
|
|
||||||
'align-bottom-left': string
|
|
||||||
'align-bottom-right': string
|
|
||||||
'align-bottom': string
|
|
||||||
'align-center-center': string
|
|
||||||
'align-center-horizontal': string
|
|
||||||
'align-center-left': string
|
|
||||||
'align-center-right': string
|
|
||||||
'align-center-vertical': string
|
|
||||||
'align-left': string
|
|
||||||
'align-right': string
|
|
||||||
'align-top-center': string
|
|
||||||
'align-top-left': string
|
|
||||||
'align-top-right': string
|
|
||||||
'align-top': string
|
|
||||||
'arrow-left': string
|
|
||||||
'arrowhead-arrow': string
|
|
||||||
'arrowhead-bar': string
|
|
||||||
'arrowhead-diamond': string
|
|
||||||
'arrowhead-dot': string
|
|
||||||
'arrowhead-none': string
|
|
||||||
'arrowhead-square': string
|
|
||||||
'arrowhead-triangle-inverted': string
|
|
||||||
'arrowhead-triangle': string
|
|
||||||
'aspect-ratio': string
|
|
||||||
avatar: string
|
|
||||||
blob: string
|
|
||||||
'bring-forward': string
|
|
||||||
'bring-to-front': string
|
|
||||||
check: string
|
|
||||||
'checkbox-checked': string
|
|
||||||
'checkbox-empty': string
|
|
||||||
'chevron-down': string
|
|
||||||
'chevron-left': string
|
|
||||||
'chevron-right': string
|
|
||||||
'chevron-up': string
|
|
||||||
'chevrons-ne': string
|
|
||||||
'chevrons-sw': string
|
|
||||||
'clipboard-copied': string
|
|
||||||
'clipboard-copy': string
|
|
||||||
code: string
|
|
||||||
collab: string
|
|
||||||
color: string
|
|
||||||
comment: string
|
|
||||||
'cross-2': string
|
|
||||||
cross: string
|
|
||||||
'dash-dashed': string
|
|
||||||
'dash-dotted': string
|
|
||||||
'dash-draw': string
|
|
||||||
'dash-solid': string
|
|
||||||
discord: string
|
|
||||||
'distribute-horizontal': string
|
|
||||||
'distribute-vertical': string
|
|
||||||
dot: string
|
|
||||||
'dots-horizontal': string
|
|
||||||
'dots-vertical': string
|
|
||||||
'drag-handle-dots': string
|
|
||||||
duplicate: string
|
|
||||||
edit: string
|
|
||||||
'external-link': string
|
|
||||||
file: string
|
|
||||||
'fill-none': string
|
|
||||||
'fill-pattern': string
|
|
||||||
'fill-semi': string
|
|
||||||
'fill-solid': string
|
|
||||||
follow: string
|
|
||||||
following: string
|
|
||||||
'font-draw': string
|
|
||||||
'font-mono': string
|
|
||||||
'font-sans': string
|
|
||||||
'font-serif': string
|
|
||||||
'geo-arrow-down': string
|
|
||||||
'geo-arrow-left': string
|
|
||||||
'geo-arrow-right': string
|
|
||||||
'geo-arrow-up': string
|
|
||||||
'geo-check-box': string
|
|
||||||
'geo-diamond': string
|
|
||||||
'geo-ellipse': string
|
|
||||||
'geo-hexagon': string
|
|
||||||
'geo-octagon': string
|
|
||||||
'geo-oval': string
|
|
||||||
'geo-pentagon': string
|
|
||||||
'geo-rectangle': string
|
|
||||||
'geo-rhombus-2': string
|
|
||||||
'geo-rhombus': string
|
|
||||||
'geo-star': string
|
|
||||||
'geo-trapezoid': string
|
|
||||||
'geo-triangle': string
|
|
||||||
'geo-x-box': string
|
|
||||||
github: string
|
|
||||||
group: string
|
|
||||||
hidden: string
|
|
||||||
image: string
|
|
||||||
'info-circle': string
|
|
||||||
leading: string
|
|
||||||
link: string
|
|
||||||
'lock-small': string
|
|
||||||
lock: string
|
|
||||||
menu: string
|
|
||||||
minus: string
|
|
||||||
mixed: string
|
|
||||||
pack: string
|
|
||||||
page: string
|
|
||||||
plus: string
|
|
||||||
'question-mark-circle': string
|
|
||||||
'question-mark': string
|
|
||||||
redo: string
|
|
||||||
'reset-zoom': string
|
|
||||||
'rotate-ccw': string
|
|
||||||
'rotate-cw': string
|
|
||||||
ruler: string
|
|
||||||
search: string
|
|
||||||
'send-backward': string
|
|
||||||
'send-to-back': string
|
|
||||||
'settings-horizontal': string
|
|
||||||
'settings-vertical-1': string
|
|
||||||
'settings-vertical': string
|
|
||||||
'share-1': string
|
|
||||||
'share-2': string
|
|
||||||
'size-extra-large': string
|
|
||||||
'size-large': string
|
|
||||||
'size-medium': string
|
|
||||||
'size-small': string
|
|
||||||
'spline-cubic': string
|
|
||||||
'spline-line': string
|
|
||||||
'stack-horizontal': string
|
|
||||||
'stack-vertical': string
|
|
||||||
'stretch-horizontal': string
|
|
||||||
'stretch-vertical': string
|
|
||||||
'text-align-center': string
|
|
||||||
'text-align-justify': string
|
|
||||||
'text-align-left': string
|
|
||||||
'text-align-right': string
|
|
||||||
'tool-arrow': string
|
|
||||||
'tool-embed': string
|
|
||||||
'tool-eraser': string
|
|
||||||
'tool-frame': string
|
|
||||||
'tool-hand': string
|
|
||||||
'tool-highlight': string
|
|
||||||
'tool-laser': string
|
|
||||||
'tool-line': string
|
|
||||||
'tool-media': string
|
|
||||||
'tool-note': string
|
|
||||||
'tool-pencil': string
|
|
||||||
'tool-pointer': string
|
|
||||||
'tool-text': string
|
|
||||||
trash: string
|
|
||||||
'triangle-down': string
|
|
||||||
'triangle-up': string
|
|
||||||
twitter: string
|
|
||||||
undo: string
|
|
||||||
ungroup: string
|
|
||||||
'unlock-small': string
|
|
||||||
unlock: string
|
|
||||||
'vertical-align-center': string
|
|
||||||
'vertical-align-end': string
|
|
||||||
'vertical-align-start': string
|
|
||||||
visible: string
|
|
||||||
'warning-triangle': string
|
|
||||||
'zoom-in': string
|
|
||||||
'zoom-out': string
|
|
||||||
}
|
|
||||||
translations: {
|
|
||||||
ar: string
|
|
||||||
ca: string
|
|
||||||
da: string
|
|
||||||
de: string
|
|
||||||
en: string
|
|
||||||
es: string
|
|
||||||
fa: string
|
|
||||||
fi: string
|
|
||||||
fr: string
|
|
||||||
gl: string
|
|
||||||
he: string
|
|
||||||
'hi-in': string
|
|
||||||
hu: string
|
|
||||||
it: string
|
|
||||||
ja: string
|
|
||||||
'ko-kr': string
|
|
||||||
ku: string
|
|
||||||
languages: string
|
|
||||||
main: string
|
|
||||||
my: string
|
|
||||||
ne: string
|
|
||||||
no: string
|
|
||||||
pl: string
|
|
||||||
'pt-br': string
|
|
||||||
'pt-pt': string
|
|
||||||
ro: string
|
|
||||||
ru: string
|
|
||||||
sv: string
|
|
||||||
te: string
|
|
||||||
th: string
|
|
||||||
tr: string
|
|
||||||
uk: string
|
|
||||||
vi: string
|
|
||||||
'zh-cn': string
|
|
||||||
'zh-tw': string
|
|
||||||
}
|
|
||||||
embedIcons: {
|
|
||||||
codepen: string
|
|
||||||
codesandbox: string
|
|
||||||
excalidraw: string
|
|
||||||
felt: string
|
|
||||||
figma: string
|
|
||||||
github_gist: string
|
|
||||||
google_calendar: string
|
|
||||||
google_maps: string
|
|
||||||
google_slides: string
|
|
||||||
observable: string
|
|
||||||
replit: string
|
|
||||||
scratch: string
|
|
||||||
spotify: string
|
|
||||||
tldraw: string
|
|
||||||
vimeo: string
|
|
||||||
youtube: string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,27 +3,7 @@
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
/// <reference path="./modules.d.ts" />
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
/** @typedef {string | { src: string }} AssetUrl */
|
|
||||||
/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {AssetUrl} assetUrl
|
|
||||||
* @param {AssetUrlOptions} [format]
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
function formatAssetUrl(assetUrl, format = {}) {
|
|
||||||
const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
|
|
||||||
|
|
||||||
if (typeof format === 'function') return format(assetUrlString)
|
|
||||||
|
|
||||||
const { baseUrl = '' } = format
|
|
||||||
|
|
||||||
if (assetUrlString.startsWith('data:')) return assetUrlString
|
|
||||||
if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
|
|
||||||
|
|
||||||
return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {AssetUrlOptions} [opts]
|
* @param {AssetUrlOptions} [opts]
|
||||||
|
|
|
||||||
2
packages/assets/utils.d.ts
vendored
Normal file
2
packages/assets/utils.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
import { AssetUrl, AssetUrlOptions } from './types'
|
||||||
|
export function formatAssetUrl(assetUrl: AssetUrl, format: AssetUrlOptions): string
|
||||||
20
packages/assets/utils.js
Normal file
20
packages/assets/utils.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
|
/// <reference path="./modules.d.ts" />
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {AssetUrl} assetUrl
|
||||||
|
* @param {AssetUrlOptions} [format]
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function formatAssetUrl(assetUrl, format = {}) {
|
||||||
|
const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
|
||||||
|
|
||||||
|
if (typeof format === 'function') return format(assetUrlString)
|
||||||
|
|
||||||
|
const { baseUrl = '' } = format
|
||||||
|
|
||||||
|
if (assetUrlString.startsWith('data:')) return assetUrlString
|
||||||
|
if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
|
||||||
|
|
||||||
|
return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
|
||||||
|
}
|
||||||
|
|
@ -24,6 +24,7 @@ import { Migrations } from '@tldraw/store';
|
||||||
import { Polyline2d } from '@tldraw/primitives';
|
import { Polyline2d } from '@tldraw/primitives';
|
||||||
import { default as React_2 } from 'react';
|
import { default as React_2 } from 'react';
|
||||||
import * as React_3 from 'react';
|
import * as React_3 from 'react';
|
||||||
|
import { RecursivePartial } from '@tldraw/utils';
|
||||||
import { RotateCorner } from '@tldraw/primitives';
|
import { RotateCorner } from '@tldraw/primitives';
|
||||||
import { SelectionCorner } from '@tldraw/primitives';
|
import { SelectionCorner } from '@tldraw/primitives';
|
||||||
import { SelectionEdge } from '@tldraw/primitives';
|
import { SelectionEdge } from '@tldraw/primitives';
|
||||||
|
|
@ -2192,7 +2193,7 @@ export type TldrawEditorProps = {
|
||||||
children?: any;
|
children?: any;
|
||||||
shapes?: Record<string, TLShapeInfo>;
|
shapes?: Record<string, TLShapeInfo>;
|
||||||
tools?: TLStateNodeConstructor[];
|
tools?: TLStateNodeConstructor[];
|
||||||
assetUrls?: TLEditorAssetUrls;
|
assetUrls?: RecursivePartial<TLEditorAssetUrls>;
|
||||||
autoFocus?: boolean;
|
autoFocus?: boolean;
|
||||||
components?: Partial<TLEditorComponents>;
|
components?: Partial<TLEditorComponents>;
|
||||||
onMount?: (editor: Editor) => (() => void) | undefined | void;
|
onMount?: (editor: Editor) => (() => void) | undefined | void;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { Store, StoreSnapshot } from '@tldraw/store'
|
import { Store, StoreSnapshot } from '@tldraw/store'
|
||||||
import { TLRecord, TLStore } from '@tldraw/tlschema'
|
import { TLRecord, TLStore } from '@tldraw/tlschema'
|
||||||
import { annotateError } from '@tldraw/utils'
|
import { RecursivePartial, annotateError } from '@tldraw/utils'
|
||||||
import React, { memo, useCallback, useLayoutEffect, useState, useSyncExternalStore } from 'react'
|
import React, { memo, useCallback, useLayoutEffect, useState, useSyncExternalStore } from 'react'
|
||||||
import { TLEditorAssetUrls, defaultEditorAssetUrls } from './assetUrls'
|
import { TLEditorAssetUrls, useDefaultEditorAssetsWithOverrides } from './assetUrls'
|
||||||
import { DefaultErrorFallback } from './components/DefaultErrorFallback'
|
import { DefaultErrorFallback } from './components/DefaultErrorFallback'
|
||||||
import { OptionalErrorBoundary } from './components/ErrorBoundary'
|
import { OptionalErrorBoundary } from './components/ErrorBoundary'
|
||||||
import { TLShapeInfo } from './config/createTLStore'
|
import { TLShapeInfo } from './config/createTLStore'
|
||||||
|
|
@ -39,7 +39,7 @@ export type TldrawEditorProps = {
|
||||||
/**
|
/**
|
||||||
* Urls for where to find fonts and other assets.
|
* Urls for where to find fonts and other assets.
|
||||||
*/
|
*/
|
||||||
assetUrls?: TLEditorAssetUrls
|
assetUrls?: RecursivePartial<TLEditorAssetUrls>
|
||||||
/**
|
/**
|
||||||
* Whether to automatically focus the editor when it mounts.
|
* Whether to automatically focus the editor when it mounts.
|
||||||
*/
|
*/
|
||||||
|
|
@ -164,9 +164,8 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
|
||||||
assetUrls,
|
assetUrls,
|
||||||
...rest
|
...rest
|
||||||
}: TldrawEditorProps & { store: TLStoreWithStatus }) {
|
}: TldrawEditorProps & { store: TLStoreWithStatus }) {
|
||||||
const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(
|
const assets = useDefaultEditorAssetsWithOverrides(assetUrls)
|
||||||
assetUrls ?? defaultEditorAssetUrls
|
const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(assets)
|
||||||
)
|
|
||||||
|
|
||||||
switch (store.status) {
|
switch (store.status) {
|
||||||
case 'error': {
|
case 'error': {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { RecursivePartial } from '@tldraw/utils'
|
||||||
|
import { useMemo } from 'react'
|
||||||
import { version } from '../version'
|
import { version } from '../version'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
|
|
@ -24,3 +26,16 @@ export let defaultEditorAssetUrls: TLEditorAssetUrls = {
|
||||||
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls) {
|
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls) {
|
||||||
defaultEditorAssetUrls = assetUrls
|
defaultEditorAssetUrls = assetUrls
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @internal */
|
||||||
|
export function useDefaultEditorAssetsWithOverrides(
|
||||||
|
overrides?: RecursivePartial<TLEditorAssetUrls>
|
||||||
|
): TLEditorAssetUrls {
|
||||||
|
return useMemo(() => {
|
||||||
|
if (!overrides) return defaultEditorAssetUrls
|
||||||
|
|
||||||
|
return {
|
||||||
|
fonts: Object.assign({ ...defaultEditorAssetUrls.fonts }, { ...overrides?.fonts }),
|
||||||
|
}
|
||||||
|
}, [overrides])
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import { NamedExoticComponent } from 'react';
|
||||||
import { default as React_2 } from 'react';
|
import { default as React_2 } from 'react';
|
||||||
import * as React_3 from 'react';
|
import * as React_3 from 'react';
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
import { RecursivePartial } from '@tldraw/utils';
|
||||||
import { TLCopyType } from '@tldraw/editor';
|
import { TLCopyType } from '@tldraw/editor';
|
||||||
import { TLEditorAssetUrls } from '@tldraw/editor';
|
import { TLEditorAssetUrls } from '@tldraw/editor';
|
||||||
import { TLExportType } from '@tldraw/editor';
|
import { TLExportType } from '@tldraw/editor';
|
||||||
|
|
@ -224,7 +225,7 @@ export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, child
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export interface TldrawUiContextProviderProps {
|
export interface TldrawUiContextProviderProps {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
assetUrls?: TLUiAssetUrls;
|
assetUrls?: RecursivePartial<TLUiAssetUrls>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
children?: any;
|
children?: any;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { TLUiAssetUrls, defaultUiAssetUrls } from './assetUrls'
|
import { RecursivePartial } from '@tldraw/utils'
|
||||||
|
import { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from './assetUrls'
|
||||||
import { ActionsProvider } from './hooks/useActions'
|
import { ActionsProvider } from './hooks/useActions'
|
||||||
import { ActionsMenuSchemaProvider } from './hooks/useActionsMenuSchema'
|
import { ActionsMenuSchemaProvider } from './hooks/useActionsMenuSchema'
|
||||||
import { AssetUrlsProvider } from './hooks/useAssetUrls'
|
import { AssetUrlsProvider } from './hooks/useAssetUrls'
|
||||||
|
|
@ -17,7 +18,7 @@ import { TLUiOverrides, useMergedOverrides, useMergedTranslationOverrides } from
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export interface TldrawUiContextProviderProps {
|
export interface TldrawUiContextProviderProps {
|
||||||
assetUrls?: TLUiAssetUrls
|
assetUrls?: RecursivePartial<TLUiAssetUrls>
|
||||||
overrides?: TLUiOverrides | TLUiOverrides[]
|
overrides?: TLUiOverrides | TLUiOverrides[]
|
||||||
onUiEvent?: TLUiEventHandler
|
onUiEvent?: TLUiEventHandler
|
||||||
children?: any
|
children?: any
|
||||||
|
|
@ -31,7 +32,7 @@ export function TldrawUiContextProvider({
|
||||||
children,
|
children,
|
||||||
}: TldrawUiContextProviderProps) {
|
}: TldrawUiContextProviderProps) {
|
||||||
return (
|
return (
|
||||||
<AssetUrlsProvider assetUrls={assetUrls ?? defaultUiAssetUrls}>
|
<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
|
||||||
<TranslationProvider overrides={useMergedTranslationOverrides(overrides)}>
|
<TranslationProvider overrides={useMergedTranslationOverrides(overrides)}>
|
||||||
<EventsProvider onEvent={onUiEvent}>
|
<EventsProvider onEvent={onUiEvent}>
|
||||||
<ToastsProvider>
|
<ToastsProvider>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
TLEditorAssetUrls,
|
TLEditorAssetUrls,
|
||||||
defaultEditorAssetUrls,
|
defaultEditorAssetUrls,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
|
import { RecursivePartial } from '@tldraw/utils'
|
||||||
import { version } from '../version'
|
import { version } from '../version'
|
||||||
import { TLUiIconType, iconTypes } from './icon-types'
|
import { TLUiIconType, iconTypes } from './icon-types'
|
||||||
|
|
||||||
|
|
@ -39,3 +40,20 @@ export let defaultUiAssetUrls: TLUiAssetUrls = {
|
||||||
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
|
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
|
||||||
defaultUiAssetUrls = urls
|
defaultUiAssetUrls = urls
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @internal */
|
||||||
|
export function useDefaultUiAssetUrlsWithOverrides(
|
||||||
|
overrides?: RecursivePartial<TLUiAssetUrls>
|
||||||
|
): TLUiAssetUrls {
|
||||||
|
if (!overrides) return defaultUiAssetUrls
|
||||||
|
|
||||||
|
return {
|
||||||
|
fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
|
||||||
|
icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
|
||||||
|
embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
|
||||||
|
translations: Object.assign(
|
||||||
|
{ ...defaultUiAssetUrls.translations },
|
||||||
|
{ ...overrides?.translations }
|
||||||
|
),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -130,6 +130,11 @@ export function promiseWithResolve<T>(): Promise<T> & {
|
||||||
// @internal
|
// @internal
|
||||||
export function rafThrottle(fn: () => void): () => void;
|
export function rafThrottle(fn: () => void): () => void;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type RecursivePartial<T> = {
|
||||||
|
[P in keyof T]?: RecursivePartial<T[P]>;
|
||||||
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type Result<T, E> = ErrorResult<E> | OkResult<T>;
|
export type Result<T, E> = ErrorResult<E> | OkResult<T>;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,4 +26,5 @@ export {
|
||||||
} from './lib/object'
|
} from './lib/object'
|
||||||
export { rafThrottle, throttledRaf } from './lib/raf'
|
export { rafThrottle, throttledRaf } from './lib/raf'
|
||||||
export { sortById } from './lib/sort'
|
export { sortById } from './lib/sort'
|
||||||
|
export type { RecursivePartial } from './lib/types'
|
||||||
export { isDefined, isNonNull, isNonNullish, structuredClone } from './lib/value'
|
export { isDefined, isNonNull, isNonNullish, structuredClone } from './lib/value'
|
||||||
|
|
|
||||||
4
packages/utils/src/lib/types.ts
Normal file
4
packages/utils/src/lib/types.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/** @public */
|
||||||
|
export type RecursivePartial<T> = {
|
||||||
|
[P in keyof T]?: RecursivePartial<T[P]>
|
||||||
|
}
|
||||||
|
|
@ -256,40 +256,14 @@ async function copyTranslations() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const assetDeclarationFileCommon = `
|
|
||||||
/** @typedef {string | { src: string }} AssetUrl */
|
|
||||||
/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {AssetUrl} assetUrl
|
|
||||||
* @param {AssetUrlOptions} [format]
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
function formatAssetUrl(assetUrl, format = {}) {
|
|
||||||
const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
|
|
||||||
|
|
||||||
if (typeof format === 'function') return format(assetUrlString)
|
|
||||||
|
|
||||||
const { baseUrl = '' } = format
|
|
||||||
|
|
||||||
if (assetUrlString.startsWith('data:')) return assetUrlString
|
|
||||||
if (assetUrlString.match(/^https?:\\/\\//)) return assetUrlString
|
|
||||||
|
|
||||||
return \`\${baseUrl.replace(/\\/$/, '')}/\${assetUrlString.replace(/^\\.?\\//, '')}\`
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
// 4. ASSET DECLARATION FILES
|
// 4. ASSET DECLARATION FILES
|
||||||
async function writeUrlBasedAssetDeclarationFile() {
|
async function writeUrlBasedAssetDeclarationFile() {
|
||||||
const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'urls.js')
|
const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'urls.js')
|
||||||
let assetDeclarationFile = `
|
const codeFile = `
|
||||||
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
/// <reference path="./modules.d.ts" />
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
|
|
||||||
${assetDeclarationFileCommon}
|
|
||||||
`
|
|
||||||
|
|
||||||
assetDeclarationFile += `
|
|
||||||
/**
|
/**
|
||||||
* @param {AssetUrlOptions} [opts]
|
* @param {AssetUrlOptions} [opts]
|
||||||
* @public
|
* @public
|
||||||
|
|
@ -312,24 +286,18 @@ async function writeUrlBasedAssetDeclarationFile() {
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
await writeCodeFile(
|
await writeCodeFile('scripts/refresh-assets.ts', 'javascript', codeFilePath, codeFile)
|
||||||
'scripts/refresh-assets.ts',
|
|
||||||
'javascript',
|
|
||||||
assetDeclarationFilePath,
|
|
||||||
assetDeclarationFile
|
|
||||||
)
|
|
||||||
|
|
||||||
await writeAssetDeclarationDTSFile('urls', 'getAssetUrlsByMetaUrl')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function writeImportBasedAssetDeclarationFile(): Promise<void> {
|
async function writeImportBasedAssetDeclarationFile(): Promise<void> {
|
||||||
let imports = `
|
let imports = `
|
||||||
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
/// <reference path="./modules.d.ts" />
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
|
|
||||||
`
|
`
|
||||||
|
|
||||||
let declarations = `
|
let declarations = `
|
||||||
${assetDeclarationFileCommon}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {AssetUrlOptions} [opts]
|
* @param {AssetUrlOptions} [opts]
|
||||||
* @public
|
* @public
|
||||||
|
|
@ -356,23 +324,50 @@ async function writeImportBasedAssetDeclarationFile(): Promise<void> {
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'imports.js')
|
const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'imports.js')
|
||||||
await writeCodeFile(
|
await writeCodeFile(
|
||||||
'scripts/refresh-assets.ts',
|
'scripts/refresh-assets.ts',
|
||||||
'javascript',
|
'javascript',
|
||||||
assetDeclarationFilePath,
|
codeFilePath,
|
||||||
imports + declarations
|
imports + declarations
|
||||||
)
|
)
|
||||||
|
|
||||||
await writeAssetDeclarationDTSFile('imports', 'getAssetUrlsByImport')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function writeAssetDeclarationDTSFile(fileName: string, functionName: string) {
|
async function writeSelfHostedAssetDeclarationFile(): Promise<void> {
|
||||||
let dts = `
|
const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'selfHosted.js')
|
||||||
type AssetUrl = string | { src: string }
|
const codeFile = `
|
||||||
type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||||
|
/// <reference path="./modules.d.ts" />
|
||||||
|
import { formatAssetUrl } from './utils.js'
|
||||||
|
|
||||||
export function ${functionName}(opts?: AssetUrlOptions): {
|
/**
|
||||||
|
* @param {AssetUrlOptions} [opts]
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export function getAssetUrls(opts) {
|
||||||
|
return {
|
||||||
|
${Object.entries(collectedAssetUrls)
|
||||||
|
.flatMap(([type, assets]) => [
|
||||||
|
`${type}: {`,
|
||||||
|
...Object.entries(assets).map(
|
||||||
|
([name, href]) =>
|
||||||
|
`${JSON.stringify(name)}: formatAssetUrl(${JSON.stringify('./' + href)}, opts),`
|
||||||
|
),
|
||||||
|
'},',
|
||||||
|
])
|
||||||
|
.join('\n')}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
await writeCodeFile('scripts/refresh-assets.ts', 'javascript', codeFilePath, codeFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function writeAssetDeclarationDTSFile() {
|
||||||
|
let dts = `
|
||||||
|
export type AssetUrl = string | { src: string }
|
||||||
|
export type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
||||||
|
export type AssetUrls = {
|
||||||
`
|
`
|
||||||
|
|
||||||
for (const [type, assets] of Object.entries(collectedAssetUrls)) {
|
for (const [type, assets] of Object.entries(collectedAssetUrls)) {
|
||||||
|
|
@ -387,7 +382,7 @@ async function writeAssetDeclarationDTSFile(fileName: string, functionName: stri
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', `${fileName}.d.ts`)
|
const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'types.d.ts')
|
||||||
await writeCodeFile('scripts/refresh-assets.ts', 'typescript', assetDeclarationFilePath, dts)
|
await writeCodeFile('scripts/refresh-assets.ts', 'typescript', assetDeclarationFilePath, dts)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -402,8 +397,10 @@ async function main() {
|
||||||
nicelog('Copying translations...')
|
nicelog('Copying translations...')
|
||||||
await copyTranslations()
|
await copyTranslations()
|
||||||
nicelog('Writing asset declaration file...')
|
nicelog('Writing asset declaration file...')
|
||||||
|
await writeAssetDeclarationDTSFile()
|
||||||
await writeUrlBasedAssetDeclarationFile()
|
await writeUrlBasedAssetDeclarationFile()
|
||||||
await writeImportBasedAssetDeclarationFile()
|
await writeImportBasedAssetDeclarationFile()
|
||||||
|
await writeSelfHostedAssetDeclarationFile()
|
||||||
nicelog('Done!')
|
nicelog('Done!')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue