Embedding Codesandbox #5303

hhimanshu · 2021-08-05T18:05:31Z

hhimanshu
Aug 5, 2021

Hello

I wanted to see if embedding 3rd party solutions like Codesandbox and Figma are supported.
I made a change in the branch at https://github.com/hhimanshu/docusaurus-101/tree/embed
The change I made in md file is

## Embed Codesandbox
<figure>
<iframe src="https://codesandbox.io/embed/algolia-autocomplete-example-emi4r?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="algolia-autocomplete-example"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>
</figure>

The git reference is https://github.com/hhimanshu/docusaurus-101/blame/embed/blog/2021-08-03-my-thought-process.md#L227-L237

However, that fails on the console

index.js?1ef8:1 Warning: Invalid DOM property `frameborder`. Did you mean `frameBorder`?
    at iframe
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at figure
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at wrapper (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:149:25)
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at MDXContent (webpack-internal:///./blog/2021-08-03-my-thought-process.md:19:3078)
    at MDXProvider (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:139:46)
    at div
    at article
    at BlogPostItem (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogPostItem/index.js:21:683)
    at main
    at div
    at div
    at div
    at MobileSecondaryMenuProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/mobileSecondaryMenu.js:13:217)
    at DocsPreferredVersionContextProviderUnsafe (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:877)
    at DocsPreferredVersionContextProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:490)
    at UserPreferencesProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/UserPreferencesProvider/index.js:13:157)
    at AnnouncementBarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/announcementBarUtils.js:21:485)
    at ThemeProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/ThemeProvider/index.js:13:142)
    at LayoutProviders (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/LayoutProviders/index.js:14:30)
    at Layout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/Layout/index.js:21:33)
    at BlogLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogLayout/index.js:15:37)
    at BlogPostPage (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogPostPage/index.js:15:47)
    at LoadableComponent (webpack-internal:///./node_modules/@docusaurus/react-loadable/lib/index.js:1:2843)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:18:180)
    at C (webpack-internal:///./node_modules/react-router/esm/react-router.js:725:37)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:18:16)
    at App (webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:23:94)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:93:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:59:35)
console.<computed> @ index.js?1ef8:1
react-dom.development.js?61bb:683 Allow attribute will take precedence over 'allowfullscreen'.
setValueForProperty @ react-dom.development.js?61bb:683
index.js?1ef8:1 The above error occurred in the <iframe> component:

    at iframe
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at figure
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at wrapper (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:149:25)
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at MDXContent (webpack-internal:///./blog/2021-08-03-my-thought-process.md:19:3078)
    at MDXProvider (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:139:46)
    at div
    at article
    at BlogPostItem (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogPostItem/index.js:21:683)
    at main
    at div
    at div
    at div
    at MobileSecondaryMenuProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/mobileSecondaryMenu.js:13:217)
    at DocsPreferredVersionContextProviderUnsafe (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:877)
    at DocsPreferredVersionContextProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:490)
    at UserPreferencesProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/UserPreferencesProvider/index.js:13:157)
    at AnnouncementBarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/announcementBarUtils.js:21:485)
    at ThemeProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/ThemeProvider/index.js:13:142)
    at LayoutProviders (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/LayoutProviders/index.js:14:30)
    at Layout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/Layout/index.js:21:33)
    at BlogLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogLayout/index.js:15:37)
    at BlogPostPage (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/BlogPostPage/index.js:15:47)
    at LoadableComponent (webpack-internal:///./node_modules/@docusaurus/react-loadable/lib/index.js:1:2843)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:18:180)
    at C (webpack-internal:///./node_modules/react-router/esm/react-router.js:725:37)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:18:16)
    at App (webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:23:94)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:93:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:59:35)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js?1ef8:1
react-dom.development.js?61bb:2719 Uncaught (in promise) Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    at assertValidProps (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:2719)
    at setInitialProperties (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:9134)
    at finalizeInitialChildren (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:10201)
    at completeWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19470)
    at completeUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22807)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22782)
    at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702)
    at renderRootSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22665)
    at performSyncWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22288)
    at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21876)
    at updateContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25477)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26016)
    at unbatchedUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22426)
    at legacyRenderSubtreeIntoContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26015)
    at render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26098)
    at eval (webpack-internal:///./node_modules/@docusaurus/core/lib/client/clientEntry.js:19)

Are embeddings work by default?

Answered by slorber

Aug 6, 2021

In MDX, you should use JSX syntax, not html syntax. props are camelCase and you need to use props with {}

@hhimanshu this kind of question is best answered on our Discord server, many other Docusaurus users can answer that and I can focus my time on fixing real issues 😅 Please ask on Discord before posting here

View full answer

slorber · 2021-08-06T09:55:16Z

slorber
Aug 6, 2021
Collaborator

In MDX, you should use JSX syntax, not html syntax. props are camelCase and you need to use props with {}

@hhimanshu this kind of question is best answered on our Discord server, many other Docusaurus users can answer that and I can focus my time on fixing real issues 😅 Please ask on Discord before posting here

3 replies

hhimanshu Aug 6, 2021
Author

Oh, sure, I did not know about the discord server. Thank you for letting me know, I will see you there!

hhimanshu Aug 16, 2021
Author

I never got a response in Discord channel :(

slorber Aug 17, 2021
Collaborator

@hhimanshu I actually answered you above already:

In MDX, you should use JSX syntax, not html syntax. props are camelCase and you need to use props with {}

And I'm pretty sure a lot of people can answer such questions on Discord, so try again :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Embedding Codesandbox #5303

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Embedding Codesandbox #5303

Uh oh!

hhimanshu Aug 5, 2021

Replies: 1 comment · 3 replies

Uh oh!

slorber Aug 6, 2021 Collaborator

Uh oh!

hhimanshu Aug 6, 2021 Author

Uh oh!

hhimanshu Aug 16, 2021 Author

Uh oh!

slorber Aug 17, 2021 Collaborator

hhimanshu
Aug 5, 2021

Replies: 1 comment 3 replies

slorber
Aug 6, 2021
Collaborator

hhimanshu Aug 6, 2021
Author

hhimanshu Aug 16, 2021
Author

slorber Aug 17, 2021
Collaborator