Add code-mirror example

Author: laffra

examples/__init__.py

@@ -3,14 +3,13 @@
 from examples import app
 from examples import canvas
 from examples import custom
-from examples import documentation
+from examples import editor
 from examples import dom
 from examples import inputs
 from examples import pitch
 from examples import pizza
 from examples import splits
 from examples import pubsub
-from examples import pydata
 from examples import styling
 from examples import svg
 from examples import table
@@ -26,7 +25,7 @@
     ("examples/custom.py", custom.create()),
     ("examples/app.py", app.create()),
     ("examples/pubsub.py", pubsub.create()),
-    ("examples/documentation.py", documentation.create()),
+    ("examples/editor.py", editor.create()),
     ("examples/pitch.py", pitch.create()),
     ("examples/svg.py", svg.create()),
     ("examples/canvas.py", canvas.create()),

examples/editor.py

@@ -0,0 +1,79 @@
+# LTK - Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE 
+
+import ltk
+
+source = """
+ltk.VBox(
+    # edit this text and see what happens
+
+    ltk.HBox(
+        ltk.Span("Edit the text").css("margin", 12),
+        ltk.Span("In the editor below"),
+    )
+    .css("height", 40)
+    .css("background", "lightblue")
+    .css("border", "1px solid gray"),
+
+    ltk.HBox(
+        ltk.Span("This UI will update live").css("margin", 12),
+        ltk.Span("With every character you type!").css("margin-top", 24),
+    )
+    .css("height", 80)
+    .css("background", "lightyellow")
+    .css("border", "1px solid gray"),
+)
+""".strip()
+
+def create():
+    editor = Editor(source)
+
+    def show_output():
+        print(editor.text())
+        eval(editor.text()).appendTo(
+            ltk.find("#editor-output")
+                .empty()
+        )
+
+    ltk.schedule(ltk.proxy(lambda: show_output()), "show output", 0.1)
+
+    return(
+        ltk.VerticalSplitPane(
+            ltk.Div()
+                .css("border", "1px solid gray")
+                .attr("id", "editor-output"),
+            editor
+                .on("keyup", ltk.proxy(lambda event: show_output()))
+                .css("border", "1px solid gray")
+                .attr("id", "editor"),
+            "interactive editor"
+        )
+        .css("height", 805)
+        .css("width", 400)
+        .css("font-size", 14)
+        .attr("name", "Editor")
+    )
+
+class Editor(ltk.Div):
+    classes = [ "editor" ]
+
+    def __init__(self, value):
+        ltk.Div.__init__(self)
+        ltk.schedule(ltk.proxy(lambda: self.create(value)), "refresh editor", 0.1)
+
+    def create(self, value):
+        config = ltk.to_js({
+            "mode": {
+                "name": "python",
+                "version": 3,
+                "singleLineStringErrors": False
+            },
+            "lineNumbers": True,
+            "indentUnit": 4,
+            "matchBrackets": True,
+        })
+        self.editor = ltk.window.CodeMirror(self.element[0], config)
+        self.editor.setSize("100%", "100%")
+        self.text(value)
+
+    def text(self, text=None):
+        return self.editor.setValue(text) if text is not None else self.editor.getValue()

index.html

@@ -18,6 +18,10 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.min.js"></script>
         <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css"/>
 
+        <!-- Codemirror Interactive Editor -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" >
 
         <!-- Import Styles for the kitchensink demo -->
         <link rel="stylesheet" href="kitchensink.css">

kitchensink.toml

@@ -10,10 +10,9 @@ files = [
     "examples/__init__.py",
     "examples/app.py",
     "examples/canvas.py",
-    "examples/documentation.py",
+    "examples/editor.py",
     "examples/dom.py",
     "examples/inputs.py",
-    "examples/pydata.py",
     "examples/tictactoe.py",
     "examples/tictactoe.css",
     "examples/pitch.py",

ltk/widgets.py

@@ -732,6 +732,7 @@ def __init__(self, first, last, key):
         )
         self.addClass(f"ltk-split-pane")
         self.restore()
+        self.layout()
         self.on("layout", proxy(lambda *args: self.layout()))
         schedule(self.layout, f"layout-{self.key}")
         window.addEventListener("resize", proxy(lambda *args: self.layout()))