symfony-expression-editor/example.html at main · valtzu/symfony-expression-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
    <head>
        <style>
            textarea[is="expression-editor"] {
                animation: fadeTextIn 1.0s ease-in-out 0s forwards;
                font-family: monospace;
            }

            @keyframes fadeTextIn { from { color: rgba(var(--bs-body-color-rgb), 0); } }
        </style>
    </head>
    <body class="bg-body-secondary container">
        <script type="importmap">
            {
              "imports": {
                "codemirror": "https://esm.sh/*codemirror@6.0.1",
                "@codemirror/state": "https://esm.sh/*@codemirror/state@6.5.2",
                "@codemirror/search": "https://esm.sh/*@codemirror/search@6.5.11",
                "@codemirror/autocomplete": "https://esm.sh/*@codemirror/autocomplete@6.18.6",
                "@codemirror/view": "https://esm.sh/*@codemirror/view@6.36.3",
                "@codemirror/commands": "https://esm.sh/*@codemirror/commands@6.8.0",
                "@codemirror/language": "https://esm.sh/*@codemirror/language@6.10.8",
                "@codemirror/lint": "https://esm.sh/*@codemirror/lint@6.9.2",
                "@lezer/lr": "https://esm.sh/*@lezer/lr@1.4.2",
                "@lezer/highlight": "https://esm.sh/*@lezer/highlight@1.2.1",
                "@lezer/common": "https://esm.sh/*@lezer/common@1.2.3",
                "style-mod": "https://esm.sh/*style-mod@4.1.2",
                "w3c-keyname": "https://esm.sh/*w3c-keyname@2.2.8",
                "crelt": "https://esm.sh/*crelt@1.0.6",
                "@marijn/find-cluster-break": "https://esm.sh/*@marijn/find-cluster-break@1.0.2",
                "@valtzu/codemirror-lang-el": "https://esm.sh/*@valtzu/codemirror-lang-el@1.0.0"
              }
            }
        </script>
        <script type="module" src="dist/index.mjs"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <div class="p-5 gap-1 vstack bg-body-secondary">
            <div class="flex-grow-1 small" style="user-select: none; cursor: pointer !important;">
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input"> disabled</label>
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input"> readonly</label>
            </div>
            <div class="flex-grow-1">
                <textarea rows="1" class="form-control" is="expression-editor">'foobar' starts with 'foo' /* it's true */</textarea>
            </div>
        </div>
        <div class="p-5 gap-1 vstack bg-body-secondary">
            <div class="flex-grow-1 small" style="user-select: none; cursor: pointer !important;">
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input"> disabled</label>
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input" checked> readonly</label>
            </div>
            <div class="flex-grow-1">
                <textarea rows="1" class="form-control form-control-plaintext" is="expression-editor" readonly>'foobar' starts with 'foo' /* it's true */</textarea>
            </div>
        </div>
        <div class="p-5 gap-1 vstack bg-body-secondary">
            <div class="flex-grow-1 small" style="user-select: none; cursor: pointer !important;">
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input" checked> disabled</label>
                <label class="form-check-inline form-switch"><input type="checkbox" role="switch" class="form-check-input"> readonly</label>
            </div>
            <div class="flex-grow-1">
                <textarea rows="1" class="form-control" is="expression-editor" disabled>'foobar' starts with 'foo' /* it's true */</textarea>
            </div>
        </div>
        <form action="/foobar" class="p-5 gap-1 vstack flex-wrap bg-body-secondary section" data-bs-theme="dark">
            <div class="form-check form-switch text-body py-">
                <input class="form-check-input" type="checkbox" role="switch" id="light-switch" onchange="this.closest('.section').dataset.bsTheme=this.checked ? 'light' : 'dark'">
                <label class="form-check-label" for="light-switch">Lights</label>
            </div>
            <div id="template">
                <textarea name="multiline" maxlength="2" rows="3" class="form-control" is="expression-editor" data-line-numbers="true" data-config="{&quot;identifiers&quot;:[{&quot;name&quot;:&quot;x&quot;}]}">x == x + 1
&& 'foobar' starts with 'foo' s
&& x == x + 1</textarea>
            </div>
            <div class="mt-3">
                <button type="button" class="btn btn-sm btn-secondary" id="clone">Clone</button>
                <button class="btn btn-sm btn-primary">Submit</button>
            </div>
        </form>
        <script type="module">
            document.getElementById('clone').addEventListener('click', function () {
                const template = document.getElementById('template');
                const clone = template.cloneNode(true);
                clone.removeAttribute('id');
                template.parentNode.insertBefore(clone, this.parentElement);
            });
        </script>
    </body>
</html>