Bloblang playground enhancements #355
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Streamlined Ask AI button with contextual placement near errors - Fixed mapping errors to display below mapping label - Improved dark mode color accessibility for validation indicators - Fixed conflicting ACE editor validation messages - Made Format JSON button contextual (shows only for JSON input) - Replaced global Clear All/Format buttons with contextual buttons per section - DOC-1173 Added export and import configuration functionality - Added keyboard shortcuts overlay and auto-run toggle - Added execution time display with success/error states - Added input format selector with validation - Added share link functionality - Added getting started tip with dismiss option - Fixed Ask AI button layout to prevent squishing - Changed clear shortcut from Ctrl+K to Ctrl+Shift+X to avoid conflicts
- Include nav-collapse partial in nav template - Update nav-collapse styling with proper spacing and full width - Add border-top to visually separate collapse button - Fix back-to-top button to only show after scrolling 300px - Add comprehensive nav items to ui-model.yml for testing
Implements comprehensive autocomplete functionality for the Bloblang mapping editor with both static and dynamic completions: **Autocomplete Features:** - Static completions for core Bloblang keywords, functions, and methods - Dynamic completions fetched from Connect component JSON with automatic version detection - Context-aware suggestions: - Input field names after `this.` - Nested field navigation (e.g., `this.user.name.`) - Metadata keys after `meta(` - Methods-only after value chains (e.g., `string.`, `json().`) - Named parameter snippets with tab navigation (e.g., `replace(old, new)`) - Smart suppression inside string literals and after `root` assignments - Performance optimized with field extraction caching **UX Improvements:** - Styled autocomplete dropdown with brand colors and dark mode support - Subtle separators between Input/Output/Mapping panels (reduced opacity) - Auto-trigger on `.` and `(` characters - Proper filtering: methods-only in chaining context, all completions elsewhere **Technical:** - Downloaded ACE language_tools extension locally (consistency with other ACE libs) - Mock Connect data for localhost development (avoids CORS issues) - Fallback version detection for Connect JSON loading Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThis PR introduces significant enhancements to the Bloblang playground UI and documentation navigation. Key changes include: expanded navigation structure with new "Get Started" and "Concepts" sections; comprehensive styling overhaul for the playground featuring new UI components, editor refinements, and responsive layouts; autocomplete/IntelliSense for Bloblang with static keywords and dynamic completions from Connect data; validation and execution feedback mechanisms with timing displays; enhanced import/export/share features including file system access and URL-based sharing; navigation collapse/expand persistence via localStorage; and back-to-top button visibility control. Sequence Diagram(s)sequenceDiagram
participant User
participant Editor as Ace Editor
participant Validator as Validation Layer
participant Debounce as Debounce Manager
participant Storage as SessionStorage
participant Display as UI Display
User->>Editor: Types Bloblang code
Editor->>Debounce: Emit change event
Debounce->>Validator: Validate mapping (after delay)
Validator->>Validator: Parse & check syntax
alt Validation Success
Validator->>Display: Clear error indicators
Display->>Display: Show success state
Debounce->>Storage: Save mapping to sessionStorage
Debounce->>Editor: Execute mapping (debounced)
Editor->>Display: Show execution time & output
else Validation Error
Validator->>Display: Show error message
Display->>Display: Highlight validation indicator
end
sequenceDiagram
participant User
participant UI as Playground UI
participant Completer as Bloblang Completer
participant Input as Input Parser
participant Connect as Connect API
participant Ace as Ace Autocomplete
User->>Ace: Trigger autocomplete (. or ()
Ace->>Completer: Request completions at position
Completer->>Input: Extract fields from JSON input
Input->>Completer: Return field paths
Completer->>Connect: Fetch completions (if dynamic needed)
Connect->>Completer: Return Connect data
Completer->>Completer: Merge static + dynamic completions
Completer->>Ace: Provide context-aware completions
Ace->>User: Display autocomplete menu
sequenceDiagram
participant User
participant UI as Share/Import UI
participant URL as URL Generator
participant Clipboard as Clipboard API
participant Storage as URL Storage
participant Download as File System/Blob
User->>UI: Click Share
UI->>URL: Encode editor contents (Base64)
URL->>Clipboard: Copy shareable URL
alt Clipboard Success
Clipboard->>UI: Show "Copied!" feedback
else Clipboard Fails
UI->>UI: Show URL modal fallback
end
User->>UI: Click Import
UI->>Download: Select file
Download->>UI: Parse JSON config
UI->>Storage: Restore editors from config
UI->>UI: Update editor contents
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/css/bloblang-playground.css (1)
506-516: Scope responsive selectors to the playground container.In the 1024px media query,
.output-sectionand.button-barare unscoped, so any page using those class names will inherit these layout rules. Prefix them with.bloblang-playgroundto prevent cross-page style bleed.🛠️ Suggested fix
- .output-section { + .bloblang-playground .output-section { flex: 1 1 100%; } - .button-bar { + .bloblang-playground .button-bar { align-items: flex-start; } - .button-bar .choices { + .bloblang-playground .button-bar .choices { width: 100%; }
🤖 Fix all issues with AI agents
In `@src/js/01-nav.js`:
- Around line 28-31: The restore path calls hideNav(null, true) which leads to
trapEvent(e) being invoked with e === null and causes e.stopPropagation() to
throw; update the trapEvent function to guard against a null/undefined event
(e.g., if (!e) return) before calling e.stopPropagation() / e.preventDefault(),
so restoring navCollapsed via hideNav(null, true) won't raise a TypeError;
reference trapEvent and hideNav to locate the change.
In `@src/partials/bloblang-playground.hbs`:
- Around line 651-659: The suppression logic in getContextCompletions() returns
{ suppressAll: true } but bloblangCompleter only inspects context.type, so
completions still show inside string literals; update getContextCompletions() to
return { type: 'none' } (or set context.type = 'none') when detecting an odd
number of quotes, or alternatively modify bloblangCompleter to respect
suppressAll by checking context.suppressAll before offering suggestions; locate
the string-detection block (the beforeCursor/stringMatch/quotesBefore logic) and
make the return shape or the completer's check consistent with
bloblangCompleter's expected context.type.
- Around line 484-505: The current fetchConnectCompletions flow returns
immediately when the GitHub "latest" release request succeeds even if
tryFetchConnectJSON(version) returns an empty array, skipping fallbackVersions;
change the logic in fetchConnectCompletions so that after obtaining
release.tag_name and calling tryFetchConnectJSON(version) you capture its result
in a variable and only return it if result.length > 0, otherwise continue to the
fallback loop (and optionally log that the latest release had no JSON) so
fallbackVersions are attempted; refer to fetchConnectCompletions, the
releasesResp/release.tag_name usage, and tryFetchConnectJSON to find and update
the code path.
🧹 Nitpick comments (2)
src/css/nav.css (1)
48-50: Redundant opacity rule.The
.nav-collapse.collapsedrule setsopacity: 0.6, but this is already the base opacity for.nav-collapsedefined on line 34. This rule has no effect unless there's JavaScript or another CSS rule that modifies the opacity elsewhere.♻️ Consider removing redundant rule or clarifying intent
If this is intended as documentation for the collapsed state, consider adding a comment. Otherwise, remove:
-.nav-collapse.collapsed { - opacity: 0.6; -}src/css/bloblang-playground.css (1)
623-633: Consolidate duplicate.editor-help-iconstyles.There are two separate blocks defining
.editor-help-icon(Line 623-633 and Line 861-869). Keeping one source of truth avoids conflicting tweaks later.♻️ One possible cleanup
-/* Editor help icons */ -.editor-help-icon { - font-size: 12px; - opacity: 0.5; - cursor: help; - margin-left: 4px; - transition: opacity 0.2s ease; -} - -.editor-help-icon:hover { - opacity: 1; -}Also applies to: 861-869
- Add curly braces after if conditions in nav.js - Use window.localStorage instead of bare localStorage - Add space before function parentheses in on-this-page.js - Remove extra empty lines in bloblang-playground.css
- Guard trapEvent against null/undefined events to prevent TypeError when
restoring nav collapse state via hideNav(null, true)
- Fix string literal detection to return { type: 'none' } instead of
{ suppressAll: true } so autocomplete properly suppresses inside strings
- Check if GitHub latest release returns empty completions before returning,
allowing fallback versions to be attempted
- Add .bloblang-playground prefix to .output-section, .button-bar in 1024px media query - Add .bloblang-playground prefix to .shortcuts-content, .share-modal-content, .notification in 768px media query - Add .bloblang-playground prefix to playground-tip, try-example-button, dismiss-tip, editor-help-icon at root level - Remove duplicate editor-help-icon definition (lines 859-868) Prevents style bleeding to other pages that might use these common class names.
- Scope notification and validation indicator classes - Scope input-format-selector and editor state classes - Scope copy-output-button - Scope shortcuts-overlay, shortcuts-content, close-shortcuts, shortcuts-list - Scope share-modal, share-modal-content, share-url-container - Scope ALL ACE editor autocomplete selectors (48 selectors total) Prevents any style bleeding to other pages. All 1229 lines of CSS are now properly contained within the .bloblang-playground component scope.
|
wow, nice! Will people who signed up for notifications get an email about this update? |
|
approving since I can see nice fixes, but I don't understand the Choose an example dropdown. And I'm guessing the Ask AI just isn't rigged up, but it doesn't work in the preview. |
Contributor
Author
We will send one out for sure 👌 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes https://redpandadata.atlassian.net/browse/DOC-911
Fixes https://redpandadata.atlassian.net/browse/DOC-1173
Major UX improvements to the Bloblang playground including intelligent autocomplete, enhanced error handling, keyboard shortcuts, and navigation fixes.
https://deploy-preview-355--docs-ui.netlify.app/playground
2026-01-23_16-36-10.mp4
Intelligent Autocomplete (DOC-911)
The Bloblang mapping editor now features comprehensive autocomplete functionality:
Static completions: Core Bloblang keywords (
root,this,deleted()), functions, and methodsDynamic completions: Fetched from Connect component JSON hosted on the docs site with automatic version detection from GitHub releases
Context-aware suggestions:
this.meta(Named parameter snippets: Tab navigation between parameters
Smart suppression: No suggestions inside string literals or inappropriate contexts
Performance optimized: Field extraction caching prevents re-parsing on every keystroke
UX Polish:
.and(charactersTechnical Details:
ext-language_tools.jslocally (consistency with other ACE libs)Playground UX & Accessibility Improvements
Contextual Actions:
New Features:
Shift+?)Navigation
Nav Collapse/Expand:
Back-to-Top Button:
Testing:
ui-model.yml(~70 items across 8 sections)