Comments (7)
I was thinking about introducing an "editable" range for react-live, i.e. some code before and after the actual code snippet that is not editable and not evaluated. Does that sound like it'd solve the issue? There's still the question of how to visually style this
from styled-components-website.
@geoffdavis92 I think that solves how we'd express it in the markdown code. However, I still need to think about how to add it to react-live without breaking the experience.
It'll need to highlight those sections differently and then display them differently so that the user can't edit them. Then the result will need to incorporate that code as well. It could easily turn out a bit weird. Feel free to take a shot over at react-live if you know how you'd like to do this 😄
Btw, I think we shouldn't introduce the {%
syntax to react-live though.... However else we might want to solve this, I'm not sure
https://github.com/FormidableLabs/react-live
from styled-components-website.
@philpl awesome, I'll check out that repo
from styled-components-website.
@philpl I'm looking at this section now; from my understanding that sounds like it would solve the problem. Would you want help?
I was given the following code sitting inside an md
component:
{% import styled, { css } from 'styled-components' %}
const sizes = {
desktop: 992,
tablet: 768,
phone: 376
}
…You would evaluate that in the react-live component similar to the following
if (literal.indexOf('{%') >= 0) {
let trimStartDelimiter = literal.split('{% ')[1]
let [ noEvalCode, theRest ] = trimStartDelimiter.split(' %}')
console.log({ noEvalCode, theRest })
/*
{
noEvalCode: "import styled, { css } from 'styled-components'",
theRest: "↵↵const sizes = {↵ desktop: 992,↵ tablet: 768,↵ phone: 376↵}"
*/
}
…which you could then use to target certain rendered sections in the react-live component using the noEval
and theRest
variables. (or whatever you want to call them)
I'd be willing to help out if this sounds like something you want to do.
from styled-components-website.
@philpl circling back, is this what you are thinking?
from styled-components-website.
@geoffdavis92 Yes, but we'd have to put in a special case inside the editor so that the codeblock is part of the editor.
Basically on here we need a column that has a code block for the imports first and the StyledEditorScrollCaptured
second.
For the code block we'll need to make a variation of the codeblock that fits "snug" with the editor component: https://github.com/styled-components/styled-components-website/blob/master/components/CodeBlock.js
from styled-components-website.
@philpl Awesome, I'll check that out tonight 👍
from styled-components-website.
Related Issues (20)
- spe
- Add [project] by [company] to showcase
- Add FAQ on NextJS 13 usage HOT 2
- Add [project] by [company] to showcase HOT 1
- Need a FAQ page added for this HOT 3
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Wrong Link in the docs for v6 migration
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- On the homepage live edit example, the cursor is off by 1 character HOT 1
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase ok
- Inaccurate `shouldForwardProp` description
- Add dark theme to documentation HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-components-website.