@fias/create-fias-plugin 1.3.0 → 1.4.0
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/package.json
CHANGED
|
@@ -63,6 +63,55 @@ function MyComponent() {
|
|
|
63
63
|
- `fonts`: `{ body, heading, mono }` (font-family strings)
|
|
64
64
|
- `components`: `{ borderRadius, buttonRadius, cardRadius, inputRadius, shadowSm, shadowMd, shadowLg, borderWidth }`
|
|
65
65
|
|
|
66
|
+
### `useFiasFonts()` — Platform font catalog
|
|
67
|
+
|
|
68
|
+
**Permission:** none
|
|
69
|
+
**Returns:** `{ fonts, ensureFontLoaded }`
|
|
70
|
+
|
|
71
|
+
The platform vendors a catalog of fonts and injects every family's
|
|
72
|
+
`@font-face` into your plugin iframe automatically (the `.woff2` bytes
|
|
73
|
+
load lazily, only when a glyph is actually painted). So you can use any
|
|
74
|
+
catalog `family` name directly in CSS — no `<link>`, no `@import`, no
|
|
75
|
+
bundled font files, and **no Google Fonts** (those are blocked by the
|
|
76
|
+
plugin CSP). Build a font picker from `fonts`:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useFiasFonts } from '@fias/arche-sdk';
|
|
80
|
+
|
|
81
|
+
function FontPicker({ value, onChange }: { value: string; onChange: (f: string) => void }) {
|
|
82
|
+
const { fonts } = useFiasFonts();
|
|
83
|
+
return (
|
|
84
|
+
<select value={value} onChange={(e) => onChange(e.target.value)} style={{ fontFamily: value }}>
|
|
85
|
+
{fonts.map((f) => (
|
|
86
|
+
<option key={f.family} value={f.family} style={{ fontFamily: f.family }}>
|
|
87
|
+
{f.displayName}
|
|
88
|
+
</option>
|
|
89
|
+
))}
|
|
90
|
+
</select>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
- `fonts`: `FontCatalogEntry[]` — `{ family, displayName, category, system }`.
|
|
96
|
+
`category` is one of `sans | serif | display | mono | handwriting | system`;
|
|
97
|
+
`system: true` marks OS fonts (always available, no web font needed).
|
|
98
|
+
- `ensureFontLoaded(family, sizePx?)`: `Promise<void>` — **canvas / PDF only.**
|
|
99
|
+
Normal DOM text needs nothing (the browser fetches the face when it
|
|
100
|
+
paints). But `<canvas>` (incl. Konva / Fabric) and PDF exporters measure
|
|
101
|
+
glyph metrics synchronously, so they rasterize the fallback face if the
|
|
102
|
+
bytes aren't in yet. Call and `await` this before drawing. It never
|
|
103
|
+
rejects, resolves instantly for already-loaded / system fonts, and
|
|
104
|
+
resolves after a 3s timeout if the CDN is unreachable.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
const { ensureFontLoaded } = useFiasFonts();
|
|
108
|
+
await ensureFontLoaded(selectedFamily); // then draw to the canvas
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
`FONT_CATALOG` and `ensureFontLoaded` are also exported standalone for use
|
|
112
|
+
outside React (e.g. an export routine). For curated heading/body theme
|
|
113
|
+
pairings instead of the flat catalog, see `FONT_PAIRINGS`.
|
|
114
|
+
|
|
66
115
|
### `useFiasUser()` — Current user profile
|
|
67
116
|
|
|
68
117
|
**Permission:** `user:profile:read`
|
|
@@ -63,6 +63,55 @@ function MyComponent() {
|
|
|
63
63
|
- `fonts`: `{ body, heading, mono }` (font-family strings)
|
|
64
64
|
- `components`: `{ borderRadius, buttonRadius, cardRadius, inputRadius, shadowSm, shadowMd, shadowLg, borderWidth }`
|
|
65
65
|
|
|
66
|
+
### `useFiasFonts()` — Platform font catalog
|
|
67
|
+
|
|
68
|
+
**Permission:** none
|
|
69
|
+
**Returns:** `{ fonts, ensureFontLoaded }`
|
|
70
|
+
|
|
71
|
+
The platform vendors a catalog of fonts and injects every family's
|
|
72
|
+
`@font-face` into your plugin iframe automatically (the `.woff2` bytes
|
|
73
|
+
load lazily, only when a glyph is actually painted). So you can use any
|
|
74
|
+
catalog `family` name directly in CSS — no `<link>`, no `@import`, no
|
|
75
|
+
bundled font files, and **no Google Fonts** (those are blocked by the
|
|
76
|
+
plugin CSP). Build a font picker from `fonts`:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useFiasFonts } from '@fias/arche-sdk';
|
|
80
|
+
|
|
81
|
+
function FontPicker({ value, onChange }: { value: string; onChange: (f: string) => void }) {
|
|
82
|
+
const { fonts } = useFiasFonts();
|
|
83
|
+
return (
|
|
84
|
+
<select value={value} onChange={(e) => onChange(e.target.value)} style={{ fontFamily: value }}>
|
|
85
|
+
{fonts.map((f) => (
|
|
86
|
+
<option key={f.family} value={f.family} style={{ fontFamily: f.family }}>
|
|
87
|
+
{f.displayName}
|
|
88
|
+
</option>
|
|
89
|
+
))}
|
|
90
|
+
</select>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
- `fonts`: `FontCatalogEntry[]` — `{ family, displayName, category, system }`.
|
|
96
|
+
`category` is one of `sans | serif | display | mono | handwriting | system`;
|
|
97
|
+
`system: true` marks OS fonts (always available, no web font needed).
|
|
98
|
+
- `ensureFontLoaded(family, sizePx?)`: `Promise<void>` — **canvas / PDF only.**
|
|
99
|
+
Normal DOM text needs nothing (the browser fetches the face when it
|
|
100
|
+
paints). But `<canvas>` (incl. Konva / Fabric) and PDF exporters measure
|
|
101
|
+
glyph metrics synchronously, so they rasterize the fallback face if the
|
|
102
|
+
bytes aren't in yet. Call and `await` this before drawing. It never
|
|
103
|
+
rejects, resolves instantly for already-loaded / system fonts, and
|
|
104
|
+
resolves after a 3s timeout if the CDN is unreachable.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
const { ensureFontLoaded } = useFiasFonts();
|
|
108
|
+
await ensureFontLoaded(selectedFamily); // then draw to the canvas
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
`FONT_CATALOG` and `ensureFontLoaded` are also exported standalone for use
|
|
112
|
+
outside React (e.g. an export routine). For curated heading/body theme
|
|
113
|
+
pairings instead of the flat catalog, see `FONT_PAIRINGS`.
|
|
114
|
+
|
|
66
115
|
### `useFiasUser()` — Current user profile
|
|
67
116
|
|
|
68
117
|
**Permission:** `user:profile:read`
|