doczjs / docz

✍ It has never been so easy to document your things!
https://docz.site
MIT License
23.63k stars 1.46k forks source link

Docz show <Playground> code by default and make it more "editable" #513

Closed Kivylius closed 5 years ago

Kivylius commented 5 years ago

Question

Currently the code hidden by a button default and which is hard for my newcomers to understand where the code is and its hard to know that the code can be editable (no one knew it was, i had to point it out).

Can this be configured? I want to change it so that code is always viable and to add a simple paragraph at the top of each code editor saying; "Go ahead, you can edit me" or something along the lines.

Thanks

pedronauck commented 5 years ago

Yeah, for sure, you can edit your doczrc.js and put this:

export default {
  themeConfig: {
    showPlaygroundEditor: true
  }
}
kevalbhatt commented 5 years ago

@pedronauck this setting is a global setting.

I want to set it for specific Component.

example:

---
name: Props
route: /Props
---

import { Playground } from 'docz';
import ReactStructuredQuerySearch from 'react-structured-query-search';

# Props

## categoryHeader

<Playground showPlaygroundEditor={true}>
    <ReactStructuredQuerySearch
        categoryHeader="Custom Category"
        options={[{
                category: "Country",
                type: "textoptions",
                options: ["India","London"]
            }]}
        onTokenAdd={val => console.log(val)}
    />
</Playground>

## operatorHeader

<Playground>
    <ReactStructuredQuerySearch
        operatorHeader="Custom Operator"
        options={[{
                category: "Country",
                type: "textoptions",
                options: ["India","London"]
            }]}
        onTokenAdd={val => console.log(val)}
    />
</Playground>
jossmac commented 5 years ago

@pedronauck any reason not have a prop on the component? e.g.

<Playground defaultShowEditor>...</Playground>

The defaultShowEditor property would just inform its initial state. If you're okay with this API, i'm happy to implement it.

aknishi commented 4 years ago

I want to hide the editor in couple of the playgrounds by default, is this possible with a prop? For example:

<Playground showPlaygroundEditor={false}>

Or how can I achieve this

gmonte commented 4 years ago

I want to hide the editor in couple of the playgrounds by default, is this possible with a prop? For example:

<Playground showPlaygroundEditor={false}>

Or how can I achieve this

Unfortunately, I think docz 2. * doesn't yet support it. I would really like to render my own reaction components as a page structure and not as a complete playground.