Added syntax colorization

2026-02-07 10:52:40 +01:00
parent db1e94f930
commit 1c1ced2a9f
13 changed files with 1049 additions and 330 deletions
--- a/src/myfasthtml/examples/dsl_syntax.py
+++ b/src/myfasthtml/examples/dsl_syntax.py
@@ -0,0 +1,125 @@
+"""
+Test page for DSL syntax highlighting with DaisyUI theme.
+"""
+
+from fasthtml.common import *
+from myfasthtml.myfastapp import create_app
+from myfasthtml.controls.DslEditor import DslEditor, DslEditorConf
+from myfasthtml.core.formatting.dsl.definition import FormattingDSL
+from myfasthtml.core.instances import RootInstance
+
+# Create app
+app, rt = create_app(protect_routes=False)
+
+# Sample DSL content
+SAMPLE_DSL = """# DataGrid Formatting Example
+
+column amount:
+    format.number(precision=2, suffix=" €", thousands_sep=" ")
+    style("error") if value < 0
+    style("success", bold=True) if value > 10000
+
+column status:
+    format.enum(source={"draft": "Draft", "pending": "Pending", "approved": "Approved"})
+    style("neutral") if value == "draft"
+    style("warning") if value == "pending"
+    style("success") if value == "approved"
+
+column progress:
+    format("percentage")
+    style("error") if value < 0.5
+    style("warning") if value between 0.5 and 0.8
+    style("success") if value > 0.8
+
+row 0:
+    style("neutral", bold=True)
+
+cell (amount, 10):
+    style("accent", bold=True)
+"""
+
+
+@rt("/")
+def get():
+    root = RootInstance
+    formatting_dsl = FormattingDSL()
+
+    editor = DslEditor(
+        root,
+        formatting_dsl,
+        DslEditorConf(
+            name="test_editor",
+            line_numbers=True,
+            autocompletion=True,
+            linting=True,
+            placeholder="Type your DSL code here..."
+        ),
+        save_state=False
+    )
+
+    editor.set_content(SAMPLE_DSL)
+
+    return Titled(
+        "DSL Syntax Highlighting Test",
+        Div(
+            H1("Formatting DSL Editor", cls="text-3xl font-bold mb-4"),
+            P("This editor demonstrates:", cls="mb-2"),
+            Ul(
+                Li("✅ DaisyUI theme integration (adapts to dark mode)"),
+                Li("✅ Syntax highlighting with CodeMirror Simple Mode"),
+                Li("✅ Server-side validation (try adding syntax errors)"),
+                Li("✅ Server-side autocompletion (Ctrl+Space)"),
+                cls="list-disc list-inside mb-4 space-y-1"
+            ),
+            Div(
+                editor,
+                cls="border border-base-300 rounded-lg p-4"
+            ),
+            Div(
+                P("Theme:", cls="font-bold mb-2"),
+                Select(
+                    Option("light", value="light"),
+                    Option("dark", value="dark"),
+                    Option("cupcake", value="cupcake"),
+                    Option("bumblebee", value="bumblebee"),
+                    Option("emerald", value="emerald"),
+                    Option("corporate", value="corporate"),
+                    Option("synthwave", value="synthwave"),
+                    Option("retro", value="retro"),
+                    Option("cyberpunk", value="cyberpunk"),
+                    Option("valentine", value="valentine"),
+                    Option("halloween", value="halloween"),
+                    Option("garden", value="garden"),
+                    Option("forest", value="forest"),
+                    Option("aqua", value="aqua"),
+                    Option("lofi", value="lofi"),
+                    Option("pastel", value="pastel"),
+                    Option("fantasy", value="fantasy"),
+                    Option("wireframe", value="wireframe"),
+                    Option("black", value="black"),
+                    Option("luxury", value="luxury"),
+                    Option("dracula", value="dracula"),
+                    Option("cmyk", value="cmyk"),
+                    Option("autumn", value="autumn"),
+                    Option("business", value="business"),
+                    Option("acid", value="acid"),
+                    Option("lemonade", value="lemonade"),
+                    Option("night", value="night"),
+                    Option("coffee", value="coffee"),
+                    Option("winter", value="winter"),
+                    Option("dim", value="dim"),
+                    Option("nord", value="nord"),
+                    Option("sunset", value="sunset"),
+                    cls="select select-bordered",
+                    onchange="document.documentElement.setAttribute('data-theme', this.value)"
+                ),
+                cls="mt-4"
+            ),
+            cls="container mx-auto p-8"
+        )
+    )
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=5010)