Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add resizable editor/layout to playground #2296

Merged
merged 4 commits into from
May 17, 2023

Conversation

slorber
Copy link
Contributor

@slorber slorber commented May 4, 2023

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:

CleanShot 2023-05-04 at 18 42 19@2x


I tried to do some cleanup, fix some bugs, and to make the height resizeable

CleanShot 2023-05-04 at 18 44 26@2x

CleanShot 2023-05-04 at 18 45 27

CleanShot 2023-05-04 at 18 46 54

CleanShot 2023-05-04 at 18 47 28


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:

@vercel
Copy link

vercel bot commented May 4, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mdx ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 10, 2023 5:27pm

Comment on lines +765 to +766
min-height: 10rem;
height: 24rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these 2 can now be more easily adjusted to define the initial height of the panels

flex-grow: 1;
display: flex;
flex-direction: column;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This selector applies to the options, making them rather big

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes, this is because margin collapsing only applies to block and not flex

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, also made them slightly smaller, will probably be better for introducing new options

CleanShot 2023-05-10 at 19 14 44@2x

overflow: hidden;
}

.frame-body > div,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This selector applies to the default “Box” (padding: 1rem; background-color: violet;) in the example, making it fill the available width. Is that intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean the available height?

Not intentional, fixed with better CSS scoping: .frame-body > .playground-editor-code-mirror

@wooorm
Copy link
Member

wooorm commented May 9, 2023

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
@slorber
Copy link
Contributor Author

slorber commented May 10, 2023

This also seems to affect all other code examples, such as on mdx-7kndugcie-mdx.vercel.app/table-of-components. Perhaps use a new class specific to “resizable” code examples?

Should be fixed, added a class .frame-resizeable


I think I fixed everything you noticed, let me know if you see anything else.

@slorber
Copy link
Contributor Author

slorber commented May 10, 2023

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-commenter
Copy link

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (d8a62d2) 100.00% compared to head (f061096) 100.00%.

❗ 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           
Impacted Files Coverage Δ
packages/mdx/lib/run.js 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@wooorm wooorm changed the title Playground - Make editor/layout resizeable + fix some layout issues Add resizable editor/layout to playground May 17, 2023
@wooorm wooorm merged commit 57301df into mdx-js:main May 17, 2023
@wooorm wooorm added 📚 area/docs This affects documentation 💪 phase/solved Post is done labels May 17, 2023
@wooorm
Copy link
Member

wooorm commented May 17, 2023

Thanks!

kodiakhq bot referenced this pull request in X-oss-byte/Nextjs Oct 24, 2023
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mdx-js%2floader/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mdx-js%2floader/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mdx-js%2floader/2.3.0/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mdx-js%2floader/2.3.0/3.0.0?slim=true)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mdx-js%2freact/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mdx-js%2freact/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mdx-js%2freact/2.3.0/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mdx-js%2freact/2.3.0/3.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) |

---

### Release Notes

<details>
<summary>mdx-js/mdx (@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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 [@&#8203;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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📚 area/docs This affects documentation 💪 phase/solved Post is done
Development

Successfully merging this pull request may close these issues.

3 participants