feat: FIT-155: Replace the Playground in docs #7605
Merged
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
✅ Deploy Preview for heartex-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-docs-new-theme ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
yyassi-heartex
approved these changes
May 23, 2025
…al preview on small widths
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.
This pull request introduces significant updates to the Label Studio Playground, simplifying the user interface and improving the overall functionality by replacing the in-page editor with an iframe-based implementation. Key changes include removing the old editor logic, introducing a new iframe-based playground, and enhancing the codebase with better modularity and readability.
UI Simplifications and Enhancements:
Replaced the in-page editor and preview interface with a single iframe (
label-studio-playground) that dynamically loads the configuration and preview from an external URL. This simplifies the user experience and reduces the complexity of the page. (docs/source/playground/index.ejs, [1] [2] [3]Removed the old editor logic, including the CodeMirror editor, validation, and iframe generation logic, as they are no longer needed with the new iframe-based approach. (
docs/source/playground/index.ejs, docs/source/playground/index.ejsL722-L957)Codebase Improvements:
Refactored JavaScript code in
code-blocks-enhancements.jsto improve readability and modularity. Renamed functions for better clarity (e.g.,insert_render_editortoeditorIframe) and replaced inline styles with template literals for consistency. (docs/themes/v2/source/js/code-blocks-enhancements.js, [1] [2] [3]Updated the CSS for the iframe to ensure responsive design, setting the width and height to a percentage of the viewport. (
docs/themes/v2/source/css/styles.css, docs/themes/v2/source/css/styles.cssL2320-R2325)Playground App Updates:
previeworall) and updated thePlaygroundAppcomponent to reflect these changes. This enables better control over the app's behavior based on query parameters. (web/apps/playground/src/atoms/configAtoms.ts, [1];web/apps/playground/src/components/PlaygroundApp/PlaygroundApp.tsx, [2]These changes collectively modernize the Label Studio Playground, making it more user-friendly and maintainable.