Closed forhonourlx closed 11 months ago
Like issue #741 @masenf mentioned, the following code solved some extent of the nested component. @picklelo @Alek99
def _get_custom_code(self) -> str:
return '''
import CodeMirror6 from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
'''
code_mirror6(
# value=py_eg,
value=pc.Var.create('`'+py_eg+'`', is_local=False),
theme="dark",
height="200px",
extensions=pc.Var.create('[python(), javascript({ jsx:true })]', is_local=False),
),
from pcconfig import config
import pynecone as pc
docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"
class CodeMirror6(pc.Component):
library = "@uiw/react-codemirror"
tag = "CodeMirror6"
theme: pc.Var[str] = "dark"
height: pc.Var[str] = "200px"
value: pc.Var[str]
extensions: pc.Var[str]
def _get_imports(self):
return {}
def _get_custom_code(self) -> str:
return '''
import CodeMirror6 from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
'''
code_mirror6 = CodeMirror6.create
py_eg = """def fib(n):
if n <= 1:
return n
else:
return(fib(n-1) + fib(n-2))
"""
class State(pc.State):
"""The app state."""
pass
def index() -> pc.Component:
return pc.center(
pc.vstack(
pc.code_block(
py_eg,
theme="dark",
language="python",
show_line_numbers=True,
),
##################
pc.container(
pc.center(pc.text("container here"),),
code_mirror6(
# value=py_eg,
value=pc.Var.create('`'+py_eg+'`', is_local=False),
theme="dark",
height="200px",
extensions=pc.Var.create('[python(), javascript({ jsx:true })]', is_local=False),
),
###
width='100%',
),
##################
spacing="1.5em",
font_size="2em",
),
padding_top="10%",
)
# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()
This looks to be working okay at this point. Please reopen if there is further request for the team.
Describe Hi Pynecone Team, I am trying to warp a code editor, and found a CodeMirror6 component
'@uiw/react-codemirror'
could be integrated. https://github.com/uiwjs/react-codemirror The react usage example:To Reproduce The following code could successfully show a code editor without format. Q: How to implement a nested component of
import { javascript } from '@codemirror/lang-javascript';
andextensions={[javascript({ jsx: true })]}
? Thanks in advance.TestCodeEditor.py
:pcconfig.py
:Specifics (please complete the following information):