Commit c7eda5b
authored
feat(rich-editor): rich markdown field + @ mentions for skill & deploy modals (#5215)
* feat(rich-editor): rich markdown field + @ mentions for skill & deploy modals
- Add controlled, file-less RichMarkdownField (sibling of the file editor) used for
skill Content and deploy version descriptions; placeholder/typography match chip fields
- Add @-mention menu (TipTap suggestion) inserting portable [label](sim:kind/id) links;
wired into the field and the file viewer via a shared useEditorMentions hook
- Extract a shared suggestion-popup renderer + menu chrome (slash + mention)
- Fix false dirty-on-open: normalize the editor's dirty baseline to canonical markdown
- Always show the deployment version number (v3 · name) so named versions keep a short ref
- Skill import: drop the paste box (Create-tab editor auto-destructures a pasted SKILL.md),
reorder GitHub → Upload
* fix(rich-editor): address review feedback on modal field
- RichMarkdownField reports the original value when the doc matches its canonical
form, so a non-canonical input never reads as a false unsaved change (skill +
version description modals)
- Add sim: mention link navigation (Cmd/Ctrl-click) to the modal field
- versions: keep the v{n} fallback as the rename guard/seed so re-submitting the
displayed token is a no-op (no redundant "v3 · v3"); document the clear-name no-op
- Clarify the lazy query-gating comment in useMarkdownMentions
* fix(skills): re-seed Content editor when initialValues changes
Bump the field's remount key in the reset guard so the seed-once rich editor
re-seeds when content is reset from a changed initialValues (same skill id keeps
the React key otherwise stable), keeping the editor and saved value in sync.
* feat(rich-editor): render mentions as icon chips + menu/limit polish
- Render @ mentions as an inline chip node (entity icon + label) instead of a
blue link; still serializes to the portable [label](sim:kind/id) markdown so
it round-trips and stays agent-readable (shared mentionIcon resolver)
- Cap the mention/slash menu height + width and scroll it, matching the chat menu
- Give the version description editor more height; lift the 2000-char limit to a
high anti-abuse cap (client + contract) and drop the visible counter
* fix(rich-editor): make suggestion menus scrollable inside modals
- Mount the slash/@ menu popup inside the host dialog (when present) instead of
document.body: Radix's scroll-lock blocks wheel events outside the dialog
subtree, so a body-level popup couldn't scroll in a modal. position:fixed keeps
it viewport-positioned (the modal centers via flex, no transform) so it isn't clipped
- Fix the invalid max-w arbitrary value (calc needs spaces) that left the menu uncapped
- Match the version-description editor's dynamic-import loading height to the field
so the modal doesn't grow when the chunk loads
* fix(rich-editor): escape bracketed mention labels + disable images in field editors
- Escape/unescape `[`/`]` in mention labels so an entity named e.g. `data[1].csv`
round-trips into a chip instead of degrading to a plain link
- Hide the `/Image` command where image upload isn't wired (the skill + version
description field editors), so images can't be inserted there; the file viewer
keeps image support
* fix(rich-editor): keep suggestion keyboard nav working after async items load
The suggestion plugin captures the list's onKeyDown handle via ReactRenderer.ref
once at mount. The mention list's items arrive asynchronously from the workspace
store, so the captured handle closed over an empty `flat` and returned false for
arrow/enter — letting the editor move the caret instead of navigating the menu.
Read live values through a ref so the mount-time handle always sees current
items/activeIndex. Hardened the slash list the same way.
* test(rich-editor): cover suggestion keyboard nav through ReactRenderer; drop inline comments
Adds a test that drives the real ReactRenderer path the suggestion plugin uses:
the captured onKeyDown handle returns false while the store is empty and true
once async workspace items land, and arrow+enter select the right item. Removes
the explanatory inline comments from the two imperative handles.
* fix(rich-editor): suggestion menus keep arrow keys when a divider is adjacent
The leaf-selection keymap (ArrowUp/Down selects an adjacent divider/image) runs at
priority 1000, above the suggestion plugins, so it stole ArrowDown to select the
next horizontal rule instead of moving the open @/ menu selection. It now yields
while a mention or slash menu is active, detected via the plugins' exported keys.
* feat(rich-editor): Tab accepts a suggestion; unify list keyboard nav; match chip styling
- Extract useSuggestionKeyboard: one hook owns the @/ menus' active-row state,
scroll-into-view, and arrow/enter/tab handling (removes the duplication between
the two list components)
- Tab now accepts the active item like Enter, matching the chat composer
- Render the mention chip like the chat input's mention token: borderless inline
icon + label (no pill), 12px icon with brand color via getBareIconStyle, so the
styling is consistent across surfaces
* fix(rich-editor): harden editor edge cases found in full audit
- Skill paste: only auto-destructure on a real YAML name key, so a stray `---`
break or heading snippet no longer overwrites all three fields (parseSkillMarkdown
reports nameFromFrontmatter)
- Skill modal: reset by skill id, not object identity, so a background refetch of
the open skill can't clobber in-progress edits
- Field editor: claim Mod+K (inline link editor wins over global search) and
swallow file drops so the browser doesn't navigate away from the modal
- File editor: swallow non-image file drops (same navigation guard)
- Frontmatter: a leading `---` thematic break (e.g. a changelog) is no longer
mistaken for frontmatter and hidden from the editor
- Mention chip: renderText emits the portable link so copying a chip into a
plain-text target (e.g. chat) pastes back as a mention
- Suggestion nav: clamp a one-frame stale active index on Enter/Tab
* style(rich-editor): selected link reads as normal text, not standout blue
Follows the standard MD-editor convention (Linear, Slack): a highlighted link
takes the primary text color so the selection stays legible, instead of keeping
its blue on the selection highlight. Scoped to selected links only — no effect on
unselected links, regular text, the selection background, or any other surface.
* fix(rich-editor): guard async suggestion + generate lifecycles against teardown
- Suggestion onStart can fire after the editor is destroyed (the update awaits
items()), throwing on its now-gone view/storage — e.g. a modal closing while the
menu opens. Bail when the editor is destroyed; optional-chain mention storage.
This also removes the unhandled rejections the headless keymap test surfaced.
- Generate version description: thread an AbortSignal so closing the modal
mid-stream aborts the diff fetches + SSE read instead of streaming into a gone
component.
* refactor(rich-editor): fold inline comments into TSDoc; display-only chip; polish
- Convert the editor's inline `//` comments to TSDoc on the nearest declaration and
drop the self-explanatory ones (no logic change)
- Mention chip is now display-only (icon + label), matching the chat input exactly:
removes select-none (so a range selection highlights the label), the cursor-pointer
over-promise, and the cmd-click nav that could route away from a modal mid-edit
- Don't log a deliberate generate-abort as an error
- Selected strike-through text reads in the primary color so the selection is uniform
* fix(rich-editor): clean selection for the mention chip
The chip is an inline atom, so a range selection now highlights it as a whole unit
(the prior select-none left it an un-highlighted gap). A direct click selects it
with a subtle fill instead of the block-leaf outline ring meant for dividers/images.
* feat(rich-editor): Cmd/Ctrl-click a mention to its resource in the file viewer
Threads a `navigable` flag through the mention storage: the file viewer opts in so
a chip routes to its file/table/workflow/etc., while modal fields stay inert so a
click can't navigate away from an unsaved edit. Styling is identical either way.
* fix(rich-editor): icon fallback for removed integrations; smoother divider nav
- A mention to a since-removed integration falls back to a generic icon so the chip
is never icon-less (indistinguishable from prose)
- Arrowing from a selected divider/image to an adjacent one selects it directly
instead of stopping on the gap cursor between them, so stepping through a run of
dividers is one press each
* fix(rich-editor): integration mentions are display-only; robust chip selection
- An integration mention's id is a block type (gmail_v2), not a routable resource —
/integrations/[block] expects a slug and a type maps to zero-or-many credentials —
so it no longer links to a 404. The chip only shows a pointer/navigates on kinds
that resolve to a real page.
- Scope the block-leaf selection ring off the mention chip robustly (covers a
node-view wrapper via :has), so a selected chip shows a subtle fill, not the outline.
* feat(icypeas): update brand icon and bgColor; regenerate integration docs
* fix(rich-editor): remove the misfiring chip selection fill (full-width gray band)
The :has fill could paint a full-width band; drop it. A selected chip just skips the
block-leaf outline ring and uses the same native text-selection highlight as the prose.
* feat(rich-editor): show an "Uploading…" toast while an image uploads
A persistent progress toast appears per image during upload and is dismissed once
it settles, when the upload hook's "Uploaded"/"Failed" toast takes over — previously
nothing showed until the upload finished.
* refactor(rich-editor): drop inline comments (TSDoc on the declarations instead)
Fold the image-upload toast note into the insert function's TSDoc and remove the
remaining inline // comments.
* refactor(rich-editor): cleanup + simplify pass over the markdown editor
- Delete dead parseSimHref (+ barrel/test); mentions parse via the node tokenizer
- Extract serializeMarkdownDocument — one canonical serialize pipeline shared by the
dirty-check baseline and the round-trip-safety probe (was inlined in both)
- Extract selectLeafAcross — shared tail of the two arrow leaf-selection handlers
- Reset the suggestion active-row during render (prevX idiom) instead of an effect
- Inline the skill modal's trivial hasChanges (drop the useMemo)
- image.tsx: cn() over a template-literal className
* refactor(rich-editor): share the suggestion-list shell and link-URL editor
- Extract SuggestionList: the grouped-list surface, empty state, listbox/option a11y
structure, and active-row/hover/select wiring shared by the @ and / menus. Each menu
keeps only its own grouping + itemKey/renderItem.
- Extract link-editing (LinkUrlInput + applyLink): the inline link field and the
normalize→extendMarkRange→set/unset commit logic, shared by the bubble menu and the
link hover card.
* improvement(settings): align access-control detail UI + nav-driven docs link
- Move permission-group Save/Discard into the detail header (matching
secrets/whitelabeling) and delete the one-off sticky 'Unsaved changes' bar
- Convert the Platform and Blocks config tabs to SettingsSection (drop the
custom multi-column masonry + hand-rolled section labels); add an optional
far-right action slot to SettingsSection for the per-section Select All
- Replace the file-share auth-mode checkboxes with a multi-select ChipDropdown
- Normalize per-tab spacing to gap-7, align the expand-chevron token to
--text-icon, and match the list-row arrow size to the integrations precedent
- Add a nav docsLink surfaced as a header 'Docs' ChipLink by SettingsPanel,
wired for the six enterprise settings pages
* feat(rich-editor): copy-link button shows a checkmark on copy
Use the shared useCopyToClipboard hook so the link hover card's Copy button swaps to a
Check for ~2s after copying, matching the rest of the platform.
* fix(rich-editor): RichMarkdownField falls back to raw text for lossy markdown
Mirror the file editor's safety gate: decide once from the initial value via
isRoundTripSafe — round-trip-safe content opens in the WYSIWYG editor, while lossy
markdown (raw HTML, footnotes, comments) edits as raw text, so an edit can't silently
drop those constructs.
* feat(rich-editor): divider/leaf editing — backspace, select-all, gap cursor
- Backspace at the start of an empty block whose previous sibling is a divider/image removes the
blank line (instead of deleting the leaf) and selects the divider above; a non-empty block selects
the leaf so a second Backspace deletes it (highlight-before-delete).
- Select-all (and any range selection) now visibly highlights dividers/images, which the native text
highlight skips because leaves carry no text — via a decoration that paints a selection band.
- The gap cursor between two adjacent leaves no longer draws its stray caret (matching Linear); the
position stays functional. Leading/trailing gap cursors keep their caret.
- Unit tests for the backspace + select-all behavior.
* refactor(rich-editor): decouple headless bundle, fix linked-image round-trip, a11y
- Split mention-node into the schema-only `MarkdownMention` (mention-node.ts, no React/registry)
and the live `MentionChip` node view (mention-chip.tsx); move the live factory to
editor-extensions.ts and inject node views via DI. The headless round-trip path
(markdown-parse/normalize-content/round-trip-safety) no longer pulls the 269-block registry —
it now bundles for the browser with zero node-builtin deps.
- A sized + linked image serializes as `[](href)` (dropping the unrepresentable size)
instead of `[<img>](href)`, which the tokenizer can't reparse — the link is preserved, no silent
data loss. Also escape the href title symmetrically.
- Wire the suggestion menus as an ARIA combobox: while open, the editor gets
aria-haspopup/expanded/controls and an aria-activedescendant tracking the active option, so screen
readers announce it; cleared on close. Empty state is a role=status live region.
* fix(rich-editor): exempt an active @-mention query from the per-group cap
The per-group MAX_PER_GROUP limit is meant to keep the unfiltered menu from flooding; applying it
while a query is active hid matches past the eighth in a category, so search couldn't reach them.
Cap only when there's no query. Adds a regression test (12 matches shown when searching).
* fix(rich-editor): mention icon fallback + typed sim-link input rule
- mentionIcon never returns undefined: an empty/unrecognized kind (schema default '', or a future
kind on a sim: link) falls back to a generic icon instead of crashing the chip's render. Adds tests.
- Add a mention input rule so typing `[label](sim:kind/id)` becomes a chip on the closing paren —
matching the paste/load path (the tokenizer), which previously left typed syntax as literal text.
A plain InputRule (full-range replace) is used; nodeInputRule would keep the surrounding brackets.
* fix(rich-editor): raw-fallback paste hook + bound the filtered mention list
- RawMarkdownField now honors onPasteText (e.g. skill SKILL.md destructuring), so a full-document
paste is intercepted in the raw fallback too, not only the WYSIWYG path.
- Bound the @-mention list while filtering (MAX_WHEN_FILTERED) so lifting the per-group cap for search
can't render thousands of rows in the non-virtualized menu on a broad query; search still reaches
deep matches well before the bound. Adds a test.
- Tighten an extensions.ts doc comment (the headless path omits the registry + node-view construction,
not React itself).1 parent 954de05 commit c7eda5b
66 files changed
Lines changed: 3385 additions & 814 deletions
File tree
- apps
- docs
- components
- content/docs/en/integrations
- sim
- app/workspace/[workspaceId]
- files/components/file-viewer
- rich-markdown-editor
- mention
- slash-command
- settings
- components
- settings-panel
- settings-section
- skills/components
- skill-import
- skill-modal
- w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general
- components
- blocks/blocks
- components
- ee/access-control/components
- hooks/queries
- lib
- api/contracts
- integrations
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
3425 | 3425 | | |
3426 | 3426 | | |
3427 | 3427 | | |
3428 | | - | |
3429 | | - | |
3430 | | - | |
3431 | | - | |
3432 | | - | |
3433 | | - | |
3434 | | - | |
3435 | | - | |
3436 | | - | |
3437 | | - | |
3438 | | - | |
3439 | | - | |
3440 | | - | |
3441 | | - | |
3442 | | - | |
3443 | | - | |
3444 | | - | |
3445 | | - | |
3446 | | - | |
3447 | | - | |
3448 | | - | |
3449 | | - | |
3450 | | - | |
3451 | | - | |
3452 | | - | |
3453 | | - | |
3454 | | - | |
3455 | | - | |
3456 | | - | |
3457 | | - | |
3458 | 3428 | | |
3459 | 3429 | | |
3460 | 3430 | | |
| |||
3480 | 3450 | | |
3481 | 3451 | | |
3482 | 3452 | | |
| 3453 | + | |
| 3454 | + | |
| 3455 | + | |
| 3456 | + | |
| 3457 | + | |
| 3458 | + | |
| 3459 | + | |
| 3460 | + | |
| 3461 | + | |
| 3462 | + | |
3483 | 3463 | | |
3484 | 3464 | | |
3485 | 3465 | | |
| |||
7989 | 7969 | | |
7990 | 7970 | | |
7991 | 7971 | | |
7992 | | - | |
| 7972 | + | |
7993 | 7973 | | |
7994 | 7974 | | |
7995 | | - | |
7996 | | - | |
7997 | | - | |
7998 | | - | |
7999 | | - | |
8000 | | - | |
8001 | | - | |
8002 | | - | |
8003 | | - | |
8004 | | - | |
8005 | | - | |
| 7975 | + | |
| 7976 | + | |
| 7977 | + | |
| 7978 | + | |
| 7979 | + | |
| 7980 | + | |
| 7981 | + | |
| 7982 | + | |
| 7983 | + | |
| 7984 | + | |
| 7985 | + | |
| 7986 | + | |
| 7987 | + | |
| 7988 | + | |
| 7989 | + | |
| 7990 | + | |
| 7991 | + | |
| 7992 | + | |
| 7993 | + | |
8006 | 7994 | | |
8007 | 7995 | | |
8008 | 7996 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
| 3 | + | |
4 | 4 | | |
5 | 5 | | |
6 | 6 | | |
| |||
12 | 12 | | |
13 | 13 | | |
14 | 14 | | |
15 | | - | |
| 15 | + | |
16 | 16 | | |
17 | 17 | | |
18 | 18 | | |
| |||
147 | 147 | | |
148 | 148 | | |
149 | 149 | | |
| 150 | + | |
| 151 | + | |
| 152 | + | |
| 153 | + | |
| 154 | + | |
| 155 | + | |
| 156 | + | |
| 157 | + | |
| 158 | + | |
| 159 | + | |
| 160 | + | |
| 161 | + | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
| 169 | + | |
| 170 | + | |
| 171 | + | |
| 172 | + | |
| 173 | + | |
| 174 | + | |
150 | 175 | | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
7 | 7 | | |
8 | 8 | | |
9 | 9 | | |
10 | | - | |
| 10 | + | |
11 | 11 | | |
12 | 12 | | |
13 | 13 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
215 | 215 | | |
216 | 216 | | |
217 | 217 | | |
| 218 | + | |
| 219 | + | |
| 220 | + | |
| 221 | + | |
| 222 | + | |
| 223 | + | |
| 224 | + | |
| 225 | + | |
| 226 | + | |
| 227 | + | |
| 228 | + | |
| 229 | + | |
| 230 | + | |
| 231 | + | |
| 232 | + | |
| 233 | + | |
| 234 | + | |
| 235 | + | |
| 236 | + | |
| 237 | + | |
| 238 | + | |
| 239 | + | |
| 240 | + | |
| 241 | + | |
| 242 | + | |
| 243 | + | |
| 244 | + | |
| 245 | + | |
| 246 | + | |
| 247 | + | |
| 248 | + | |
| 249 | + | |
| 250 | + | |
| 251 | + | |
| 252 | + | |
| 253 | + | |
| 254 | + | |
| 255 | + | |
| 256 | + | |
| 257 | + | |
| 258 | + | |
| 259 | + | |
| 260 | + | |
| 261 | + | |
| 262 | + | |
| 263 | + | |
| 264 | + | |
| 265 | + | |
| 266 | + | |
| 267 | + | |
| 268 | + | |
| 269 | + | |
| 270 | + | |
| 271 | + | |
| 272 | + | |
| 273 | + | |
| 274 | + | |
| 275 | + | |
| 276 | + | |
| 277 | + | |
| 278 | + | |
| 279 | + | |
| 280 | + | |
| 281 | + | |
| 282 | + | |
| 283 | + | |
| 284 | + | |
| 285 | + | |
| 286 | + | |
| 287 | + | |
| 288 | + | |
| 289 | + | |
| 290 | + | |
| 291 | + | |
| 292 | + | |
| 293 | + | |
| 294 | + | |
| 295 | + | |
| 296 | + | |
| 297 | + | |
| 298 | + | |
| 299 | + | |
| 300 | + | |
| 301 | + | |
| 302 | + | |
| 303 | + | |
| 304 | + | |
| 305 | + | |
| 306 | + | |
| 307 | + | |
| 308 | + | |
| 309 | + | |
| 310 | + | |
| 311 | + | |
| 312 | + | |
| 313 | + | |
| 314 | + | |
| 315 | + | |
| 316 | + | |
| 317 | + | |
| 318 | + | |
| 319 | + | |
| 320 | + | |
| 321 | + | |
| 322 | + | |
| 323 | + | |
| 324 | + | |
| 325 | + | |
| 326 | + | |
| 327 | + | |
| 328 | + | |
| 329 | + | |
| 330 | + | |
| 331 | + | |
| 332 | + | |
| 333 | + | |
| 334 | + | |
| 335 | + | |
| 336 | + | |
| 337 | + | |
| 338 | + | |
| 339 | + | |
| 340 | + | |
| 341 | + | |
| 342 | + | |
| 343 | + | |
| 344 | + | |
| 345 | + | |
| 346 | + | |
| 347 | + | |
| 348 | + | |
| 349 | + | |
| 350 | + | |
| 351 | + | |
| 352 | + | |
| 353 | + | |
| 354 | + | |
| 355 | + | |
| 356 | + | |
| 357 | + | |
| 358 | + | |
| 359 | + | |
| 360 | + | |
| 361 | + | |
| 362 | + | |
| 363 | + | |
| 364 | + | |
| 365 | + | |
| 366 | + | |
| 367 | + | |
| 368 | + | |
| 369 | + | |
| 370 | + | |
| 371 | + | |
| 372 | + | |
| 373 | + | |
| 374 | + | |
| 375 | + | |
| 376 | + | |
| 377 | + | |
| 378 | + | |
| 379 | + | |
| 380 | + | |
| 381 | + | |
| 382 | + | |
| 383 | + | |
| 384 | + | |
| 385 | + | |
| 386 | + | |
| 387 | + | |
| 388 | + | |
| 389 | + | |
| 390 | + | |
| 391 | + | |
| 392 | + | |
| 393 | + | |
| 394 | + | |
| 395 | + | |
| 396 | + | |
| 397 | + | |
| 398 | + | |
| 399 | + | |
| 400 | + | |
| 401 | + | |
| 402 | + | |
| 403 | + | |
| 404 | + | |
| 405 | + | |
| 406 | + | |
| 407 | + | |
| 408 | + | |
| 409 | + | |
| 410 | + | |
| 411 | + | |
| 412 | + | |
| 413 | + | |
| 414 | + | |
| 415 | + | |
| 416 | + | |
| 417 | + | |
| 418 | + | |
| 419 | + | |
| 420 | + | |
| 421 | + | |
| 422 | + | |
| 423 | + | |
| 424 | + | |
| 425 | + | |
| 426 | + | |
| 427 | + | |
| 428 | + | |
| 429 | + | |
| 430 | + | |
| 431 | + | |
| 432 | + | |
| 433 | + | |
| 434 | + | |
| 435 | + | |
| 436 | + | |
| 437 | + | |
| 438 | + | |
| 439 | + | |
| 440 | + | |
| 441 | + | |
| 442 | + | |
| 443 | + | |
| 444 | + | |
| 445 | + | |
| 446 | + | |
| 447 | + | |
| 448 | + | |
| 449 | + | |
| 450 | + | |
| 451 | + | |
| 452 | + | |
| 453 | + | |
| 454 | + | |
| 455 | + | |
| 456 | + | |
| 457 | + | |
| 458 | + | |
| 459 | + | |
0 commit comments