@colixsystems/widget-sdk 0.275.2 → 0.277.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/README.md +13 -3
- package/dist/bundled-assets.cjs +6 -2
- package/dist/bundled-assets.js +0 -1
- package/dist/contract.cjs +13 -9
- package/dist/contract.js +10 -7
- package/dist/define-widget.js +8 -1
- package/dist/index.d.ts +15 -16
- package/dist/linter.cjs +279 -210
- package/dist/lucideIconName.cjs +14 -5
- package/dist/manifest.cjs +7 -15
- package/dist/manifest.js +10 -69
- package/dist/markdown-doc.js +209 -0
- package/dist/markdown-editor-bridge.js +162 -0
- package/dist/markdown-editor-core.js +184 -0
- package/dist/markdown-editor-css.js +50 -0
- package/dist/markdown-editor-field.js +111 -0
- package/dist/markdown-editor-field.native.js +9 -0
- package/dist/markdown-editor-html.js +4 -0
- package/dist/markdown-editor-webview.js +70 -0
- package/dist/markdown-input-view.js +43 -101
- package/dist/markdown-input.js +4 -6
- package/dist/markdown-input.native.js +3 -5
- package/dist/markdown.js +1 -112
- package/dist/navigation.cjs +31 -11
- package/dist/richtext-tokens.js +1 -25
- package/dist/source-mask.cjs +169 -0
- package/dist/theme-appearance.cjs +7 -5
- package/dist/theme-appearance.js +1 -1
- package/dist/theme-background.cjs +3 -8
- package/dist/theme-components.cjs +13 -10
- package/package.json +63 -3
- package/src/contract.js +10 -7
- package/dist/markdown-edit.js +0 -164
- package/dist/markdown-live-field.js +0 -312
- package/dist/markdown-live-field.native.js +0 -36
package/README.md
CHANGED
|
@@ -86,7 +86,17 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
|
|
|
86
86
|
|
|
87
87
|
## Status
|
|
88
88
|
|
|
89
|
-
`v0.
|
|
89
|
+
`v0.277.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
|
|
90
|
+
|
|
91
|
+
### What's new in 0.277.0
|
|
92
|
+
|
|
93
|
+
**`validateManifest` refuses `manifest.actions` in ESM too.** The CommonJS build the backend runs has refused a widget-declared action since actions became their own marketplace deliverable, but the ESM build the CLI and the Builder import still validated the old shape. So `appstudio-widget lint` passed a manifest the publish step then rejected. Both builds now give the same error, which names `@colixsystems/action-sdk` as the replacement. The `actions` field in `index.d.ts` is marked `@deprecated`. This is a breaking change for a manifest that still declares `actions`, so it ships as a minor version. A widget already published with them still loads: `defineWidget` ignores the retired key.
|
|
94
|
+
|
|
95
|
+
**Every CommonJS module is generated from its ESM source.** `linter.cjs`, `manifest.cjs`, `navigation.cjs`, `theme-appearance.cjs`, `theme-background.cjs`, `theme-components.cjs`, `lucideIconName.cjs`, `bundled-assets.cjs` and the new `source-mask.cjs` are now produced by `scripts/generate-cjs.js` alongside `contract.cjs`, rather than kept by hand. Edit the `.js` file, then run `npm run generate:cjs`. `cjs-generated.test.js` fails when a `.cjs` is stale or hand-edited. The exports map is unchanged.
|
|
96
|
+
|
|
97
|
+
### What's new in 0.276.0 (contract 1.226.0)
|
|
98
|
+
|
|
99
|
+
**`<MarkdownInput>` edits the formatted result directly.** The field is now a rich-text editor: headings, bold, italic, code, links, bulleted and numbered lists and real tables appear as they will read, with no markdown markers in view. The toolbar applies formatting to the selection, the Table button inserts a real table, and while the caret is in one the toolbar adds buttons to add or remove rows and columns or delete it, and typing `## `, `- `, `1. ` or `**bold**` formats as you type. The value is still markdown in the `<RichText>` grammar, so stored content and `<RichText>` output are unchanged; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the editor runs in a WebView from a page bundled into the SDK, so it needs no network. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Nothing to change in a widget that uses it.
|
|
90
100
|
|
|
91
101
|
### What's new in 0.275.2
|
|
92
102
|
|
|
@@ -2180,7 +2190,7 @@ Content is **markdown text** now: one primitive authors it, the other renders it
|
|
|
2180
2190
|
<RichText value={post.body} />
|
|
2181
2191
|
```
|
|
2182
2192
|
|
|
2183
|
-
`<MarkdownInput>` is a
|
|
2193
|
+
`<MarkdownInput>` is a rich-text field where the author edits the formatted result directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list, each toggling back off), a Table button and a Link button. The value it reads and writes is markdown in the `<RichText>` grammar below; loading a value never rewrites it. `minHeight` (150) and `maxHeight` (280) bound the field: it grows with its content between them, then scrolls inside its box instead of growing past its card. Don't put a `<RichText>` preview under it — the field already shows the result. Reach for it instead of a bare `TextInput` plus hand-rolled formatting buttons, which can only splice literal tags into the text.
|
|
2184
2194
|
|
|
2185
2195
|
`<RichText>` parses the subset — `**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, and one-line `` images — and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. Colour, type scale and leading come from the workspace theme; never re-style them. Pass `renderImage` (`({ src, alt, size }) => node`) when images are filestore ids, because resolving one needs the scopes your own widget holds — without it only absolute `http(s)` URLs render. HTML is never interpreted: stored text that still holds markup is stripped to plain text rather than shown as tags.
|
|
2186
2196
|
|
|
@@ -3348,7 +3358,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
|
|
|
3348
3358
|
- `ConfirmDialog` — the standard confirmation prompt, a preset of `Modal` and `Button`. `<ConfirmDialog visible={asking} tone="destructive" title="Delete this order?" message="This cannot be undone." confirmLabel="Delete" onCancel={() => setAsking(false)} onConfirm={removeOrder} />` asks before a delete or any other action that cannot be undone. Cancel, the close button, the backdrop, Escape and the Android back button fire `onCancel`; a promise returned from `onConfirm` keeps it busy (buttons disabled, a second press ignored) until it settles. Props: `visible`, `title`, `message`, `confirmLabel`, `cancelLabel`, `tone` (`default` | `destructive`), `busy`, `onConfirm`, `onCancel`, `closeAccessibilityLabel`, `testID`. Use it instead of building a confirmation from `Modal` yourself.
|
|
3349
3359
|
- `Modal` — the standard dialog, built on `Overlay`. `<Modal visible={open} onRequestClose={() => setOpen(false)} title="Edit order" footer={<Button title="Save" onPress={save} />}>…</Modal>` draws a title, a close button, a body that scrolls when it is long and a footer action row laid out below it. Its background, corner radius, padding, scrim, shadow and title colour come from the theme's `modal` scope (Design > Components > Dialogs), so every dialog in an app matches. Props: `visible`, `onRequestClose`, `dismissible`, `title`, `footer`, `presentation` (`dialog` | `sheet`), `size` (`sm` | `md` | `lg` | `full`), `dismissOnBackdropPress`, `role`, `initialFocusRef`, `closeAccessibilityLabel`, `accessibilityLabel`, `testID`. Use it for every dialog instead of hand-building a header and an action row inside `Overlay`.
|
|
3350
3360
|
- `RichText` — the formatted-content renderer. `<RichText value={post.body} />` parses the markdown subset (`**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, one-line `` images) and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. `value` is markdown, NOT HTML — widgets have no `dangerouslySetInnerHTML` on either host, so tags in a content string render as literal tag soup; stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value`, `renderImage` (`({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving one needs the scopes your own widget holds; without it only absolute `http(s)` URLs render), `style`, `testID`. Colour, type scale and leading come from the workspace theme — never re-style them.
|
|
3351
|
-
- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a
|
|
3361
|
+
- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a rich-text field where the author edits the formatted result directly (headings, emphasis, code, links, lists and real tables), with a toolbar, a Table button and a Link button — the way to let an app USER write formatted text, instead of a bare `TextInput` plus hand-rolled buttons that can only splice literal tags into the value. The value stays markdown. Props: `value`, `onChange(next)`, `placeholder`, `pages` (offered by name in the Link form), `minHeight` (150) and `maxHeight` (280) — it grows between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are accepted and ignored.
|
|
3352
3362
|
- `parseMarkdown`, `markdownToPlainText`, `parseMarkdownImage`, `formatMarkdownImage`, `stripHtmlToMarkdown`, `MARKDOWN_IMAGE_SIZES` — the same grammar as pure helpers, for content you inspect rather than render: the block list, a marker-free projection (list previews, search, a11y labels), the one-line image form read and written, a legacy-HTML row normalised to markdown on read, and the closed size list (`small` | `medium` | `large` | `full`).
|
|
3353
3363
|
- `isSafeMarkdownImageSrc`, `isHttpImageSrc`, `normaliseMarkdownImageSize`, `readMarkdownAlt` — the image half of that grammar, for a widget rendering images itself via `renderImage`. `isSafeMarkdownImageSrc` is the same allowlist the parser applies (an `http(s)` URL or a filestore id; a `javascript:` scheme is refused), so the widget and the parser cannot disagree about which src is renderable.
|
|
3354
3364
|
- `List`, `ListRow`, `ListHeader`, `EmptyState` — the themed list building blocks. `<ListRow title subtitle leading trailing onPress selected divider>` draws one record row from the theme's `list` scope (padding, height, gap, radius, background, divider); `<List>` spaces its rows and hands overrides down; `<ListHeader>` labels a table's columns on the rows' own inset; `<EmptyState icon title message>` is the "nothing here" panel. Use them by default for record rows and a table's header; build your own row when it needs what `ListRow` cannot do (a swipe-to-delete row, a row that expands in place).
|
package/dist/bundled-assets.cjs
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
// GENERATED from bundled-assets.js by scripts/generate-cjs.js — DO NOT EDIT.
|
|
2
|
+
// Change bundled-assets.js, then run `npm run generate:cjs` in packages/widget-sdk.
|
|
3
|
+
"use strict";
|
|
4
|
+
|
|
5
|
+
const { CONTRACT } = require("./contract.cjs");
|
|
6
|
+
|
|
1
7
|
// The files a widget package ships in its assets/ directory: which names and
|
|
2
8
|
// types are allowed. Pure and filesystem-free, so the CLI, the dev server, the
|
|
3
9
|
// first-party packer and the backend all apply one rule set.
|
|
4
|
-
// CommonJS twin of bundled-assets.js for the backend. Keep both in lockstep.
|
|
5
10
|
|
|
6
|
-
const { CONTRACT } = require("./contract.cjs");
|
|
7
11
|
|
|
8
12
|
const RULES = CONTRACT.bundledAssets;
|
|
9
13
|
const BUNDLED_ASSET_DIRECTORY = RULES.directory;
|
package/dist/bundled-assets.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// The files a widget package ships in its assets/ directory: which names and
|
|
2
2
|
// types are allowed. Pure and filesystem-free, so the CLI, the dev server, the
|
|
3
3
|
// first-party packer and the backend all apply one rule set.
|
|
4
|
-
// Keep bundled-assets.cjs in lockstep.
|
|
5
4
|
|
|
6
5
|
import { CONTRACT } from "./contract.js";
|
|
7
6
|
|
package/dist/contract.cjs
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
// GENERATED from contract.js by scripts/
|
|
2
|
-
// Change contract.js, then run `npm run generate:
|
|
1
|
+
// GENERATED from contract.js by scripts/generate-cjs.js — DO NOT EDIT.
|
|
2
|
+
// Change contract.js, then run `npm run generate:cjs` in packages/widget-sdk.
|
|
3
|
+
"use strict";
|
|
3
4
|
|
|
4
5
|
// The widget SDK contract: the ONE source the linter, the AI agents, the
|
|
5
6
|
// compiler and both hosts read. `contract.cjs` is GENERATED from `contract.js`
|
|
6
|
-
// (`npm run generate:
|
|
7
|
-
//
|
|
7
|
+
// (`npm run generate:cjs`) for CommonJS consumers — never edit it by hand;
|
|
8
|
+
// cjs-generated.test.js fails when it is stale.
|
|
8
9
|
|
|
9
10
|
// REQ-AI-AGENT-DESIGN (sc-3696): the ONE cross-platform elevation vocabulary.
|
|
10
11
|
// `shadow*` applies on iOS + react-native-web, `elevation` drives Android.
|
|
@@ -3467,13 +3468,13 @@ const PRIMITIVES = [
|
|
|
3467
3468
|
rnComponent: null,
|
|
3468
3469
|
docsUrl: null,
|
|
3469
3470
|
},
|
|
3470
|
-
// sc-6970 — formatted content, authored. The authoring half of `<RichText
|
|
3471
|
-
// a
|
|
3472
|
-
//
|
|
3471
|
+
// sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
|
|
3472
|
+
// so a generated widget never has to splice HTML tags into a plain TextInput
|
|
3473
|
+
// again. sc-15080: the field edits the formatted result directly.
|
|
3473
3474
|
{
|
|
3474
3475
|
name: "MarkdownInput",
|
|
3475
3476
|
description:
|
|
3476
|
-
|
|
3477
|
+
"Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; without it the form offers only an external address, because a widget cannot know the app's pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
|
|
3477
3478
|
rnComponent: null,
|
|
3478
3479
|
docsUrl: null,
|
|
3479
3480
|
},
|
|
@@ -6573,7 +6574,10 @@ const CONTRACT = deepFreeze({
|
|
|
6573
6574
|
// ships a hand-written `sv` value beside `en`.
|
|
6574
6575
|
// 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
|
|
6575
6576
|
// live; `showPreview` now defaults to false.
|
|
6576
|
-
|
|
6577
|
+
// 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
|
|
6578
|
+
// showing the formatted result; `showPreview`, `previewLabel` and
|
|
6579
|
+
// `renderImage` are accepted and ignored.
|
|
6580
|
+
version: "1.226.0",
|
|
6577
6581
|
sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
|
|
6578
6582
|
hooks: HOOKS,
|
|
6579
6583
|
primitives: PRIMITIVES,
|
package/dist/contract.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// The widget SDK contract: the ONE source the linter, the AI agents, the
|
|
2
2
|
// compiler and both hosts read. `contract.cjs` is GENERATED from `contract.js`
|
|
3
|
-
// (`npm run generate:
|
|
4
|
-
//
|
|
3
|
+
// (`npm run generate:cjs`) for CommonJS consumers — never edit it by hand;
|
|
4
|
+
// cjs-generated.test.js fails when it is stale.
|
|
5
5
|
|
|
6
6
|
// REQ-AI-AGENT-DESIGN (sc-3696): the ONE cross-platform elevation vocabulary.
|
|
7
7
|
// `shadow*` applies on iOS + react-native-web, `elevation` drives Android.
|
|
@@ -3464,13 +3464,13 @@ const PRIMITIVES = [
|
|
|
3464
3464
|
rnComponent: null,
|
|
3465
3465
|
docsUrl: null,
|
|
3466
3466
|
},
|
|
3467
|
-
// sc-6970 — formatted content, authored. The authoring half of `<RichText
|
|
3468
|
-
// a
|
|
3469
|
-
//
|
|
3467
|
+
// sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
|
|
3468
|
+
// so a generated widget never has to splice HTML tags into a plain TextInput
|
|
3469
|
+
// again. sc-15080: the field edits the formatted result directly.
|
|
3470
3470
|
{
|
|
3471
3471
|
name: "MarkdownInput",
|
|
3472
3472
|
description:
|
|
3473
|
-
|
|
3473
|
+
"Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; without it the form offers only an external address, because a widget cannot know the app's pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
|
|
3474
3474
|
rnComponent: null,
|
|
3475
3475
|
docsUrl: null,
|
|
3476
3476
|
},
|
|
@@ -6570,7 +6570,10 @@ const CONTRACT = deepFreeze({
|
|
|
6570
6570
|
// ships a hand-written `sv` value beside `en`.
|
|
6571
6571
|
// 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
|
|
6572
6572
|
// live; `showPreview` now defaults to false.
|
|
6573
|
-
|
|
6573
|
+
// 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
|
|
6574
|
+
// showing the formatted result; `showPreview`, `previewLabel` and
|
|
6575
|
+
// `renderImage` are accepted and ignored.
|
|
6576
|
+
version: "1.226.0",
|
|
6574
6577
|
sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
|
|
6575
6578
|
hooks: HOOKS,
|
|
6576
6579
|
primitives: PRIMITIVES,
|
package/dist/define-widget.js
CHANGED
|
@@ -16,7 +16,7 @@ export function defineWidget(opts) {
|
|
|
16
16
|
if (typeof component !== "function") {
|
|
17
17
|
throw new TypeError("defineWidget: component must be a function");
|
|
18
18
|
}
|
|
19
|
-
const result = validateManifest(manifest);
|
|
19
|
+
const result = validateManifest(withoutRetiredActions(manifest));
|
|
20
20
|
if (!result.ok) {
|
|
21
21
|
const msg = `Invalid widget manifest:\n - ${result.errors.join("\n - ")}`;
|
|
22
22
|
throw new Error(msg);
|
|
@@ -27,3 +27,10 @@ export function defineWidget(opts) {
|
|
|
27
27
|
_kind: "appstudio-widget-module",
|
|
28
28
|
};
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
// Publishing refuses `actions`; a widget published before then must still load.
|
|
32
|
+
function withoutRetiredActions(manifest) {
|
|
33
|
+
if (manifest === null || typeof manifest !== "object" || !("actions" in manifest)) return manifest;
|
|
34
|
+
const { actions: _retired, ...loadable } = manifest;
|
|
35
|
+
return loadable;
|
|
36
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -455,9 +455,8 @@ export interface WidgetManifest {
|
|
|
455
455
|
*/
|
|
456
456
|
datastoreTemplate?: WidgetDatastoreTemplate;
|
|
457
457
|
/**
|
|
458
|
-
*
|
|
459
|
-
*
|
|
460
|
-
* isolated-vm action runner. See `WidgetManifestAction`.
|
|
458
|
+
* @deprecated Refused by `validateManifest` and at publish: ship the
|
|
459
|
+
* automation as a marketplace Action (`@colixsystems/action-sdk`).
|
|
461
460
|
*/
|
|
462
461
|
actions?: WidgetManifestAction[];
|
|
463
462
|
/**
|
|
@@ -5711,12 +5710,13 @@ export const RichText: (props: {
|
|
|
5711
5710
|
}) => any;
|
|
5712
5711
|
|
|
5713
5712
|
/**
|
|
5714
|
-
* sc-6970 — the authoring half of `<RichText
|
|
5715
|
-
*
|
|
5716
|
-
*
|
|
5717
|
-
*
|
|
5718
|
-
*
|
|
5719
|
-
*
|
|
5713
|
+
* sc-6970 — the authoring half of `<RichText>`. sc-15080: a rich-text field
|
|
5714
|
+
* where the author edits the formatted result directly — headings, emphasis,
|
|
5715
|
+
* code, links, lists and real tables — with a formatting toolbar, while the
|
|
5716
|
+
* value stays markdown in the `<RichText>` grammar. Loading a value never
|
|
5717
|
+
* rewrites it. On iOS and Android the field runs in a bundled WebView. Use it
|
|
5718
|
+
* instead of a bare `TextInput` plus hand-rolled formatting buttons, which can
|
|
5719
|
+
* only splice literal tags into the text.
|
|
5720
5720
|
*
|
|
5721
5721
|
* @example
|
|
5722
5722
|
* <MarkdownInput value={draft} onChange={setDraft} placeholder="Write…" />
|
|
@@ -5727,14 +5727,13 @@ export const MarkdownInput: (props: {
|
|
|
5727
5727
|
/** Receives the next markdown string on every edit. */
|
|
5728
5728
|
onChange?: (next: string) => void;
|
|
5729
5729
|
placeholder?: string;
|
|
5730
|
-
/**
|
|
5730
|
+
/** The app's pages, offered by name in the Link form. */
|
|
5731
|
+
pages?: ReadonlyArray<{ id: string; name: string }>;
|
|
5732
|
+
/** @deprecated Ignored: the field shows the formatted result itself. */
|
|
5731
5733
|
previewLabel?: string;
|
|
5732
|
-
/**
|
|
5733
|
-
* Also draw a rendered `<RichText>` copy under the field, for images and
|
|
5734
|
-
* tables the field shows only as markers. Defaults to false.
|
|
5735
|
-
*/
|
|
5734
|
+
/** @deprecated Ignored: the field shows the formatted result itself. */
|
|
5736
5735
|
showPreview?: boolean;
|
|
5737
|
-
/**
|
|
5736
|
+
/** @deprecated Ignored: the field shows the formatted result itself. */
|
|
5738
5737
|
renderImage?: (block: {
|
|
5739
5738
|
src: string;
|
|
5740
5739
|
alt: string;
|
|
@@ -5742,7 +5741,7 @@ export const MarkdownInput: (props: {
|
|
|
5742
5741
|
}) => ReactNode;
|
|
5743
5742
|
/** Field floor, so it opens at a usable height. Defaults to 150. */
|
|
5744
5743
|
minHeight?: number;
|
|
5745
|
-
/**
|
|
5744
|
+
/** The field grows with its content up to this, then scrolls. Defaults to 280. */
|
|
5746
5745
|
maxHeight?: number;
|
|
5747
5746
|
accessibilityLabel?: string;
|
|
5748
5747
|
style?: any;
|