Add resizable editor/layout to playground #2296
Merged
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
slorber
commented
May 4, 2023
Comment on lines
+765
to
+766
| min-height: 10rem; | ||
| height: 24rem; |
There was a problem hiding this comment.
these 2 can now be more easily adjusted to define the initial height of the panels
wooorm
reviewed
May 9, 2023
| flex-grow: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
This selector applies to the options, making them rather big
There was a problem hiding this comment.
Oh yes, this is because margin collapsing only applies to block and not flex
There was a problem hiding this comment.
Fixed, also made them slightly smaller, will probably be better for introducing new options
docs/_asset/index.css
Outdated
| overflow: hidden; | ||
| } | ||
|
|
||
| .frame-body > div, |
There was a problem hiding this comment.
This selector applies to the default “Box” (padding: 1rem; background-color: violet;) in the example, making it fill the available width. Is that intentional?
There was a problem hiding this comment.
You mean the available height?
Not intentional, fixed with better CSS scoping: .frame-body > .playground-editor-code-mirror
|
This also seems to affect all other code examples, such as on https://mdx-7kndugcie-mdx.vercel.app/table-of-components/. Perhaps use a new class specific to “resizable” code examples? |
change display of editor options
change display of editor options
Should be fixed, added a class I think I fixed everything you noticed, let me know if you see anything else. |
|
Note these reviews are a bit painful and it's easy to miss an unwanted side-effect. On Docusaurus I started using a visual diff tool called Argos: I screenshot all sitemap pages before/after and generate a diff report from that to see if anything changed visually. If you want to take a look the setup is not super complicated: facebook/docusaurus#8947 |
Codecov ReportPatch coverage:
❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more. Additional details and impacted files@@ Coverage Diff @@
## main #2296 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 2177 2177
=========================================
Hits 2177 2177
☔ View full report in Codecov by Sentry. |
wooorm
approved these changes
May 17, 2023
wooorm
changed the title
|
Thanks! |
kodiakhq bot
referenced
this pull request
in X-oss-byte/Nextjs
Oct 24, 2023
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@mdx-js/loader](https://mdxjs.com) ([source](https://togithub.com/mdx-js/mdx)) | [`2.3.0` -> `3.0.0`](https://renovatebot.com/diffs/npm/@mdx-js%2floader/2.3.0/3.0.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@mdx-js/react](https://mdxjs.com) ([source](https://togithub.com/mdx-js/mdx)) | [`2.3.0` -> `3.0.0`](https://renovatebot.com/diffs/npm/@mdx-js%2freact/2.3.0/3.0.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mdx-js/mdx (@​mdx-js/loader)</summary> ### [`v3.0.0`](https://togithub.com/mdx-js/mdx/releases/tag/3.0.0) [Compare Source](https://togithub.com/mdx-js/mdx/compare/2.3.0...3.0.0) (see <https://mdxjs.com/migrating/v3/> on how to migrate) ##### Change - [`e08b759`](https://togithub.com/mdx-js/mdx/commit/e08b7596) [`5afa48e`](https://togithub.com/mdx-js/mdx/commit/5afa48e6) Change to require Node 16 - [`5a13d73`](https://togithub.com/mdx-js/mdx/commit/5a13d73b) Change to use export maps - [`cbc2822`](https://togithub.com/mdx-js/mdx/commit/cbc2822f) Update `unified`, types, plugins, etc - [`96b51f9`](https://togithub.com/mdx-js/mdx/commit/96b51f93) Remove inferral of development from `NODE_ENV` ##### Change (unlikely to affect you) - [`c961af8`](https://togithub.com/mdx-js/mdx/commit/c961af80) Remove `useDynamicImport` option - [`9cb26fd`](https://togithub.com/mdx-js/mdx/commit/9cb26fd1) `@mdx-js/register`: remove package - [`0d1558a`](https://togithub.com/mdx-js/mdx/commit/0d1558a3) `@mdx-js/esbuild`: remove experimental `allowDangerousRemoteMdx` - [`0f62bce`](https://togithub.com/mdx-js/mdx/commit/0f62bce9) `@mdx-js/node-loader`: remove `fixRuntimeWithoutExportMap` - [`4f92422`](https://togithub.com/mdx-js/mdx/commit/4f924227) `@mdx-js/preact`: remove deprecated `MDXContext`, `withMDXComponents` - [`a362bb4`](https://togithub.com/mdx-js/mdx/commit/a362bb43) `@mdx-js/react`: remove deprecated `MDXContext`, `withMDXComponents` ##### Add - [`e12f307`](https://togithub.com/mdx-js/mdx/commit/e12f3079) Add support for passing `baseUrl` when running - [`2c511a4`](https://togithub.com/mdx-js/mdx/commit/2c511a40) Add support for `baseUrl` as a `URL` - [`1863914`](https://togithub.com/mdx-js/mdx/commit/1863914c) Add deprecation warning for classic runtime - [`a34177c`](https://togithub.com/mdx-js/mdx/commit/a34177c3) Add support for ES2024 in MDX, adjacent JSX and expression blocks - [`44fd9ca`](https://togithub.com/mdx-js/mdx/commit/44fd9cac) Add support for `await` in MDX - [`3a7f194`](https://togithub.com/mdx-js/mdx/commit/3a7f1947) Add `tableCellAlignToStyle` option, to use `align` - [`fdfe17b`](https://togithub.com/mdx-js/mdx/commit/fdfe17b8) `@mdx-js/rollup`: add support for Vite development mode by [@​remcohaszing](https://togithub.com/remcohaszing) in [https://github.com/mdx-js/mdx/pull/2376](https://togithub.com/mdx-js/mdx/pull/2376) ##### Misc - [`f48d038`](https://togithub.com/mdx-js/mdx/commit/f48d038b) Remove unneeded pragma comment after transform - [`8f3b292`](https://togithub.com/mdx-js/mdx/commit/8f3b2920) Add a `use strict` directive to function bodies - [`172e519`](https://togithub.com/mdx-js/mdx/commit/172e5190) `@mdx-js/react`: fix to classify `@types/react` as a peer dependency by [@​remcohaszing](https://togithub.com/remcohaszing) in [https://github.com/mdx-js/mdx/pull/2281](https://togithub.com/mdx-js/mdx/pull/2281) - [`a7bd79b`](https://togithub.com/mdx-js/mdx/commit/a7bd79bb) Refactor output to immediately export default - [`e525db9`](https://togithub.com/mdx-js/mdx/commit/e525db9b) [`dae82ae`](https://togithub.com/mdx-js/mdx/commit/dae82ae4) Refactor some errors - [`ce173f2`](https://togithub.com/mdx-js/mdx/commit/ce173f28) Refactor to add types for JSX runtimes - [`8a56312`](https://togithub.com/mdx-js/mdx/commit/8a563128) Refactor output to use spread, not `Object.assign` by [@​remcohaszing](https://togithub.com/remcohaszing) in [https://github.com/mdx-js/mdx/pull/2328](https://togithub.com/mdx-js/mdx/pull/2328) - [`825717f`](https://togithub.com/mdx-js/mdx/commit/825717fd) Refactor to sort default components by [@​remcohaszing](https://togithub.com/remcohaszing) in [https://github.com/mdx-js/mdx/pull/2318](https://togithub.com/mdx-js/mdx/pull/2318) - [`d8a62d2`](https://togithub.com/mdx-js/mdx/commit/d8a62d20) Add missing type dependencies by [@​arcanis](https://togithub.com/arcanis) in [https://github.com/mdx-js/mdx/pull/2256](https://togithub.com/mdx-js/mdx/pull/2256) ##### Docs - [`a9f0c04`](https://togithub.com/mdx-js/mdx/commit/a9f0c046) Add guide on injecting components - [`24e3d8d`](https://togithub.com/mdx-js/mdx/commit/24e3d8d1) Add compat sections to readmes - [`30e4a5d`](https://togithub.com/mdx-js/mdx/commit/30e4a5d5) Add sponsor - [`07503a5`](https://togithub.com/mdx-js/mdx/commit/07503a5f) Update link to KaTeX CSS in docs by [@​victor23k](https://togithub.com/victor23k) in [https://github.com/mdx-js/mdx/pull/2360](https://togithub.com/mdx-js/mdx/pull/2360) - [`74aee56`](https://togithub.com/mdx-js/mdx/commit/74aee569) [`bc1d9e5`](https://togithub.com/mdx-js/mdx/commit/bc1d9e56) [`765310c`](https://togithub.com/mdx-js/mdx/commit/765310ca) [`6d1e64d`](https://togithub.com/mdx-js/mdx/commit/6d1e64d9) Refactor docs - [`7fd1d9a`](https://togithub.com/mdx-js/mdx/commit/7fd1d9a4) Fix docs on how to use solid by [@​BeiyanYunyi](https://togithub.com/BeiyanYunyi) in [https://github.com/mdx-js/mdx/pull/2300](https://togithub.com/mdx-js/mdx/pull/2300) - [`4129f90`](https://togithub.com/mdx-js/mdx/commit/4129f90e) Fix a couple typos by [@​deining](https://togithub.com/deining) in [https://github.com/mdx-js/mdx/pull/2266](https://togithub.com/mdx-js/mdx/pull/2266) - [`bb902f8`](https://togithub.com/mdx-js/mdx/commit/bb902f83) Fix typo by [@​ChristianMurphy](https://togithub.com/ChristianMurphy) in [https://github.com/mdx-js/mdx/pull/2380](https://togithub.com/mdx-js/mdx/pull/2380) ##### Site - [`78a1eb5`](https://togithub.com/mdx-js/mdx/commit/78a1eb52) Add v3 blog post - [`2b1948c`](https://togithub.com/mdx-js/mdx/commit/2b1948c0) Add v3 migration guide - [`d6bb70c`](https://togithub.com/mdx-js/mdx/commit/d6bb70ca) Add improved error display in playground - [`89097e4`](https://togithub.com/mdx-js/mdx/commit/89097e4c) Remove unmaintained dev-dependency - [`3e23ba9`](https://togithub.com/mdx-js/mdx/commit/3e23ba90) Add more options to playground - [`d92128b`](https://togithub.com/mdx-js/mdx/commit/d92128ba) Fix links in docs - [`ab3aa96`](https://togithub.com/mdx-js/mdx/commit/ab3aa966) Add GitHub pages by [@​remcohaszing](https://togithub.com/remcohaszing) in [https://github.com/mdx-js/mdx/pull/2377](https://togithub.com/mdx-js/mdx/pull/2377) - [`a2c8693`](https://togithub.com/mdx-js/mdx/commit/a2c86936) Fix site by [@​wooorm](https://togithub.com/wooorm) in [https://github.com/mdx-js/mdx/pull/2358](https://togithub.com/mdx-js/mdx/pull/2358) - [`dbe9f44`](https://togithub.com/mdx-js/mdx/commit/dbe9f44b) Fix playground AST views w/ clone by [@​Jokcy](https://togithub.com/Jokcy) in [https://github.com/mdx-js/mdx/pull/2315](https://togithub.com/mdx-js/mdx/pull/2315) - [`7504cfb`](https://togithub.com/mdx-js/mdx/commit/7504cfb8) Add more options to playground, directives, format, etc by [@​slorber](https://togithub.com/slorber) in [https://github.com/mdx-js/mdx/pull/2295](https://togithub.com/mdx-js/mdx/pull/2295) - [`57301df`](https://togithub.com/mdx-js/mdx/commit/57301dfa) Add resizable editor/layout to playground by [@​slorber](https://togithub.com/slorber) in [https://github.com/mdx-js/mdx/pull/2296](https://togithub.com/mdx-js/mdx/pull/2296) - [`9eb747d`](https://togithub.com/mdx-js/mdx/commit/9eb747d6) Add info on how to build site locally by [@​slorber](https://togithub.com/slorber) in [https://github.com/mdx-js/mdx/pull/2297](https://togithub.com/mdx-js/mdx/pull/2297) **Full Changelog**: mdx-js/mdx@2.3.0...3.0.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/X-oss-byte/Nextjs).
](https://renovatebot.com){kind=link}
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.
When working with the playground and larger MDX content, I find it quite annoying to not being able to increase the size of the editors/AST explorer/preview
Also some CSS looked a bit messy/legacy and hardcoded, and there are some existing bugs like the horizontal scrollbar not appearing immediately:
I tried to do some cleanup, fix some bugs, and to make the height resizeable
Not sure some of the CSS changes do not have any other unwanted impact on other pages, are they only used in the playground?
Test links
Playground: