CodeSurferSplit doesn't render

[nickshevr]

I've added an export for it:

export { default as CodeSurfer } from "./deck-code-surfer";
export { default as components } from "./deck-components";
export { default as SurferSplit } from "./deck-code-surfer-split";

And used it in my mdx:

import { CodeSurfer, SurferSplit } from "mdx-deck-code-surfer"

<SurferSplit
  codeTop={simpleComponent}
  codeBottom={cleanAst}
/>

But it doesn't build into presentation, and it also crash it with react-dom errors:

Any suggestions?

[nickshevr]

Ok, this module doen't required, so I copy pasted the component into my presentation folder, but get:
Error with withSlide HOC.

[nickshevr]

@pomber feel like it isn't right import path:

import { withSlide } from "mdx-deck/dist/Slide";

https://github.com/pomber/code-surfer/blob/master/packages/mdx-deck-code-surfer/src/deck-code-surfer-split.js#L5

Cause withSlide is here:
https://github.com/jxnblk/mdx-deck/blob/546a344f767388f8b5e526e366dc7cc49ced9f21/src/context.js#L18

And not here:
https://github.com/jxnblk/mdx-deck/blob/546a344f767388f8b5e526e366dc7cc49ced9f21/src/Slide.js

[nickshevr]

Ok, I understand, this component needs total refactor. imports statment is out of date.

[pomber]

Yes, sorry about that. CodeSurferSplit is not usable right now (that's why it isn't documented anywhere), it needs a rewrite.

[nickshevr]

@pomber I'll do a PR soon with implementation.
Also thanks a lot for this tool, it is extremely good!

[karlhorky]

@nickshevr did you happen to get a chance to start implementation or even analysis on this one? Do you have a list of things that need to be fixed? Currently have a use case for a split layout with Code Surfer.

[karlhorky]

I would also be happy in the meantime with just a workaround so that two CodeSurfers can be used side by side (or on top and bottom) with the split from mdx-deck.

At the moment, the following top / bottom approach, derived from the code in the component, doesn't work seemingly because of the 100vw and 100vh on the InnerCodeSurfer component.

<div
  style={{
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
  }}
>
  <div style={{ flex: 1, overflow: 'hidden' }} key="codeTop">
    <CodeSurfer
      code={require('!raw-loader!./example-1.html')}
      lang="markup"
    />
  </div>
  <div style={{ height: '2px', backgroundColor: '#333' }} />
  <div style={{ flex: 1, overflow: 'hidden' }} key="codeBottom">
    <CodeSurfer
      code={require('!raw-loader!./example-1.css')}
      lang="css"
    />
  </div>
</div>

More specifically, each CodeSurfer component renders container divs with styles that use the 100vw and 100vh values:

<div
  style="
    height: 100vh;
    width: 100vw;
    ...more styles...
  "
>
  <div
    style="
      height: 100vh;
      ...more styles...
    "
  >
    <!-- further elements -->
  </div>
</div>

Changing these 3 values to 100% instead of 100vw and 100vh makes the situation at least a bit better:

Before:

After:

---

Maybe an MVP to allow for this kind of styling would be one or more options to allow changing of the width and height (and maybe other styles) of the InnerCodeSurfer... I'll open a PR.

[pomber]

Fixed in v3 with <CodeSurferColumns>

[karlhorky]

Thanks @pomber! Will take a look when I rebuild all the presentations for v3.