symfony-expression-editor 0.1.1 → 1.0.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 CHANGELOG
 =========
 
+0.2.0
+---
+* Add some animations to reduce flickering
+* Make sure there is no layout shift
+* Make element cloning work as intended
+* Use shadow DOM
+
 0.1.0
 ---
 

package/dist/index.cjs

@@ -870,14 +870,14 @@ const replaceNext = /* @__PURE__ */ searchCommand((view$1, { query }) => {
     next = query.nextMatch(state$1, next.from, next.to);
     effects.push(view.EditorView.announce.of(state$1.phrase("replaced match on line $", state$1.doc.lineAt(from).number) + "."));
   }
+  let changeSet = view$1.state.changes(changes);
   if (next) {
-    let off = changes.length == 0 || changes[0].from >= match.to ? 0 : match.to - match.from - replacement.length;
-    selection = state.EditorSelection.single(next.from - off, next.to - off);
+    selection = state.EditorSelection.single(next.from, next.to).map(changeSet);
     effects.push(announceMatch(view$1, next));
     effects.push(state$1.facet(searchConfigFacet).scrollToMatch(selection.main, view$1));
   }
   view$1.dispatch({
-    changes,
+    changes: changeSet,
     selection,
     effects,
     userEvent: "input.replace"
@@ -1148,6 +1148,22 @@ const searchExtensions = [
   baseTheme$2
 ];
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class SelectedDiagnostic {
   constructor(from, to, diagnostic) {
     this.from = from;
@@ -1162,12 +1178,12 @@ class LintState {
     this.selected = selected;
   }
   static init(diagnostics, panel, state$1) {
-    let markedDiagnostics = diagnostics;
     let diagnosticFilter = state$1.facet(lintConfig).markerFilter;
     if (diagnosticFilter)
-      markedDiagnostics = diagnosticFilter(markedDiagnostics, state$1);
+      diagnostics = diagnosticFilter(diagnostics, state$1);
     let sorted = diagnostics.slice().sort((a, b) => a.from - b.from || a.to - b.to);
     let deco = new state.RangeSetBuilder(), active = [], pos = 0;
+    let scan = state$1.doc.iter(), scanPos = 0, docLen = state$1.doc.length;
     for (let i = 0; ; ) {
       let next = i == sorted.length ? null : sorted[i];
       if (!next && !active.length)
@@ -1178,6 +1194,8 @@ class LintState {
         to = active.reduce((p, d) => Math.min(p, d.to), next && next.from > from ? next.from : 1e8);
       } else {
         from = next.from;
+        if (from > docLen)
+          break;
         to = next.to;
         active.push(next);
         i++;
@@ -1193,8 +1211,31 @@ class LintState {
           break;
         }
       }
+      to = Math.min(to, docLen);
+      let widget = false;
+      if (active.some((d) => d.from == from && (d.to == to || to == docLen))) {
+        widget = from == to;
+        if (!widget && to - from < 10) {
+          let behind = from - (scanPos + scan.value.length);
+          if (behind > 0) {
+            scan.next(behind);
+            scanPos = from;
+          }
+          for (let check = from; ; ) {
+            if (check >= to) {
+              widget = true;
+              break;
+            }
+            if (!scan.lineBreak && scanPos + scan.value.length > check)
+              break;
+            check = scanPos + scan.value.length;
+            scanPos += scan.value.length;
+            scan.next();
+          }
+        }
+      }
       let sev = maxSeverity(active);
-      if (active.some((d) => d.from == d.to || d.from == d.to - 1 && state$1.doc.lineAt(d.from).to == d.from)) {
+      if (widget) {
         deco.add(from, from, view.Decoration.widget({
           widget: new DiagnosticWidget(sev),
           diagnostics: active.slice()
@@ -1208,6 +1249,8 @@ class LintState {
         }));
       }
       pos = to;
+      if (pos == docLen)
+        break;
       for (let i2 = 0; i2 < active.length; i2++)
         if (active[i2].to <= pos)
           active.splice(i2--, 1);
@@ -1340,17 +1383,27 @@ const lintKeymap = [
 ];
 const lintConfig = /* @__PURE__ */ state.Facet.define({
   combine(input) {
-    return Object.assign({ sources: input.map((i) => i.source).filter((x) => x != null) }, state.combineConfig(input.map((i) => i.config), {
+    return __spreadValues({
+      sources: input.map((i) => i.source).filter((x) => x != null)
+    }, state.combineConfig(input.map((i) => i.config), {
       delay: 750,
       markerFilter: null,
       tooltipFilter: null,
       needsRefresh: null,
       hideOn: () => null
     }, {
-      needsRefresh: (a, b) => !a ? b : !b ? a : (u) => a(u) || b(u)
+      delay: Math.max,
+      markerFilter: combineFilter,
+      tooltipFilter: combineFilter,
+      needsRefresh: (a, b) => !a ? b : !b ? a : (u) => a(u) || b(u),
+      hideOn: (a, b) => !a ? b : !b ? a : (t, x, y) => a(t, x, y) || b(t, x, y),
+      autoPanel: (a, b) => a || b
     }));
   }
 });
+function combineFilter(a, b) {
+  return !a ? b : !b ? a : (d, s) => b(a(d, s), s);
+}
 function assignKeys(actions) {
   let assigned = [];
   if (actions)
@@ -1385,9 +1438,10 @@ function renderDiagnostic(view, diagnostic, inPanel) {
       crelt("u", name.slice(keyIndex, keyIndex + 1)),
       name.slice(keyIndex + 1)
     ];
+    let markClass = action.markClass ? " " + action.markClass : "";
     return crelt("button", {
       type: "button",
-      class: "cm-diagnosticAction",
+      class: "cm-diagnosticAction" + markClass,
       onclick: click,
       onmousedown: click,
       "aria-label": ` Action: ${name}${keyIndex < 0 ? "" : ` (access key "${keys[i]})"`}.`
@@ -1749,7 +1803,8 @@ const bootstrap = view.EditorView.theme({
     padding: "0 0.75rem"
   },
   ".cm-content": {
-    padding: "0.375rem 0"
+    padding: "0.375rem 0",
+    animation: "fade-to-colors 0.5s ease-out 0s forwards"
   },
   "&:not(.cm-focused) .cm-selectionBackground, &:not(.cm-focused) .cm-activeLine, &:not(.cm-focused) .cm-activeLineGutter": {
     backgroundColor: "transparent"
@@ -1764,13 +1819,17 @@ const bootstrap = view.EditorView.theme({
     overflow: "auto",
     height: "100%",
     lineHeight: 1.85,
-    flexGrow: 1
+    flexGrow: 1,
+    animation: "fade 0.5s ease-out 0s forwards"
   },
   ".cm-gutters": {
     height: "100% !important",
     color: "var(--bs-tertiary-color)",
     backgroundColor: "var(--bs-tertiary-bg)"
-  }
+  },
+  "@keyframes slide-left": { from: { transform: "translateX(-100%)", opacity: 0 } },
+  "@keyframes fade-to-colors": { from: { filter: "grayscale(100%)" } },
+  "@keyframes fade": { from: { opacity: 0 } }
 });
 
 const darkTheme = view.EditorView.theme({
@@ -1843,41 +1902,57 @@ var light = [
 
 const getTheme = (el) => ({ light, dark })[el.dataset.bsTheme || "light"];
 const mutationObserver = new MutationObserver(
-  (changes) => changes.map((mutation) => mutation.target).filter((mutationTarget) => mutationTarget instanceof HTMLElement).map((themeContainer) => ({ transaction: { effects: themes.get(themeContainer).reconfigure(getTheme(themeContainer)) }, editors: editors.get(themeContainer) })).forEach(({ transaction, editors: editors2 }) => editors2.forEach((editor) => editor.dispatch(transaction)))
+  (changes) => changes.map((mutation) => mutation.target).filter((mutationTarget) => mutationTarget instanceof HTMLElement).map((themeContainer) => editors.get(themeContainer).forEach((editor) => setTheme(themeContainer, editor)))
 );
+const setTheme = (themeContainer, editor) => editor.dispatch({ effects: themes.get(editor).reconfigure(getTheme(themeContainer)) });
 const themes = /* @__PURE__ */ new WeakMap();
 const editors = /* @__PURE__ */ new WeakMap();
 class ExpressionEditor extends HTMLTextAreaElement {
   constructor() {
     super();
-    const themeContainer = this.closest("[data-bs-theme]") || document.documentElement;
-    if (!themes.has(themeContainer)) {
-      mutationObserver.observe(themeContainer, { attributes: true, attributeFilter: ["data-bs-theme"] });
-      themes.set(themeContainer, new state.Compartment());
-      editors.set(themeContainer, /* @__PURE__ */ new Set());
-    }
+    this.theme = new state.Compartment();
+    this.instanceStyles = new state.Compartment();
     this.dom = document.createElement("div");
+    const shadow = this.dom.attachShadow({ mode: "closed" });
     this.editorView = new view.EditorView({
       extensions: [
-        view.EditorView.editorAttributes.of({ style: `min-height: calc(0.75rem + ${this.rows} * 0.8125 * 1.85rem + 2px); height: calc(0.75rem + ${this.rows} * 0.8125 * 1.85rem + 2px)` }),
+        this.instanceStyles.of(view.EditorView.theme({})),
         basicSetup({
           useLineNumbers: JSON.parse(this.dataset.lineNumbers || "false")
         }),
-        themes.get(themeContainer).of(getTheme(themeContainer)),
+        this.theme.of(light),
         view.keymap.of([...commands.defaultKeymap, { key: "Tab", run: autocomplete.acceptCompletion }]),
-        codemirrorLangEl.expressionlanguage(JSON.parse(this.dataset.config || "{}"), [getTheme(themeContainer)]),
+        codemirrorLangEl.expressionlanguage(JSON.parse(this.dataset.config || "{}")),
         view.EditorView.updateListener.of((e) => {
           if (e.docChanged) {
             this.value = e.state.doc.toString();
           }
         })
       ],
-      parent: this.dom,
+      root: shadow,
+      parent: shadow,
       doc: this.value.trim()
     });
+    themes.set(this.editorView, this.theme);
+  }
+  connectedCallback() {
+    const themeContainer = this.closest("[data-bs-theme]") || document.documentElement;
+    if (!editors.has(themeContainer)) {
+      editors.set(themeContainer, /* @__PURE__ */ new Set());
+      mutationObserver.observe(themeContainer, { attributes: true, attributeFilter: ["data-bs-theme"] });
+    }
+    if (editors.get(themeContainer).has(this.editorView)) {
+      return;
+    }
+    setTheme(themeContainer, this.editorView);
     editors.get(themeContainer).add(this.editorView);
+    this.editorView.dispatch({
+      effects: this.instanceStyles.reconfigure(view.EditorView.theme({
+        "&": { minHeight: this.getBoundingClientRect().height + "px" },
+        "& .cm-gutter": { minHeight: `${this.getBoundingClientRect().height - 2}px` }
+      }))
+    });
     this.replaceWith(this.dom);
-    this.hidden = true;
     this.dom.appendChild(this);
   }
 }

package/dist/index.d.cts

@@ -1,7 +1,10 @@
 declare class ExpressionEditor extends HTMLTextAreaElement {
     private readonly dom;
     private readonly editorView;
+    private readonly theme;
+    private readonly instanceStyles;
     constructor();
+    connectedCallback(): void;
 }
 
 export { ExpressionEditor };

package/dist/index.d.mts

@@ -1,7 +1,10 @@
 declare class ExpressionEditor extends HTMLTextAreaElement {
     private readonly dom;
     private readonly editorView;
+    private readonly theme;
+    private readonly instanceStyles;
     constructor();
+    connectedCallback(): void;
 }
 
 export { ExpressionEditor };

package/dist/index.mjs

@@ -868,14 +868,14 @@ const replaceNext = /* @__PURE__ */ searchCommand((view, { query }) => {
     next = query.nextMatch(state, next.from, next.to);
     effects.push(EditorView.announce.of(state.phrase("replaced match on line $", state.doc.lineAt(from).number) + "."));
   }
+  let changeSet = view.state.changes(changes);
   if (next) {
-    let off = changes.length == 0 || changes[0].from >= match.to ? 0 : match.to - match.from - replacement.length;
-    selection = EditorSelection.single(next.from - off, next.to - off);
+    selection = EditorSelection.single(next.from, next.to).map(changeSet);
     effects.push(announceMatch(view, next));
     effects.push(state.facet(searchConfigFacet).scrollToMatch(selection.main, view));
   }
   view.dispatch({
-    changes,
+    changes: changeSet,
     selection,
     effects,
     userEvent: "input.replace"
@@ -1146,6 +1146,22 @@ const searchExtensions = [
   baseTheme$2
 ];
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class SelectedDiagnostic {
   constructor(from, to, diagnostic) {
     this.from = from;
@@ -1160,12 +1176,12 @@ class LintState {
     this.selected = selected;
   }
   static init(diagnostics, panel, state) {
-    let markedDiagnostics = diagnostics;
     let diagnosticFilter = state.facet(lintConfig).markerFilter;
     if (diagnosticFilter)
-      markedDiagnostics = diagnosticFilter(markedDiagnostics, state);
+      diagnostics = diagnosticFilter(diagnostics, state);
     let sorted = diagnostics.slice().sort((a, b) => a.from - b.from || a.to - b.to);
     let deco = new RangeSetBuilder(), active = [], pos = 0;
+    let scan = state.doc.iter(), scanPos = 0, docLen = state.doc.length;
     for (let i = 0; ; ) {
       let next = i == sorted.length ? null : sorted[i];
       if (!next && !active.length)
@@ -1176,6 +1192,8 @@ class LintState {
         to = active.reduce((p, d) => Math.min(p, d.to), next && next.from > from ? next.from : 1e8);
       } else {
         from = next.from;
+        if (from > docLen)
+          break;
         to = next.to;
         active.push(next);
         i++;
@@ -1191,8 +1209,31 @@ class LintState {
           break;
         }
       }
+      to = Math.min(to, docLen);
+      let widget = false;
+      if (active.some((d) => d.from == from && (d.to == to || to == docLen))) {
+        widget = from == to;
+        if (!widget && to - from < 10) {
+          let behind = from - (scanPos + scan.value.length);
+          if (behind > 0) {
+            scan.next(behind);
+            scanPos = from;
+          }
+          for (let check = from; ; ) {
+            if (check >= to) {
+              widget = true;
+              break;
+            }
+            if (!scan.lineBreak && scanPos + scan.value.length > check)
+              break;
+            check = scanPos + scan.value.length;
+            scanPos += scan.value.length;
+            scan.next();
+          }
+        }
+      }
       let sev = maxSeverity(active);
-      if (active.some((d) => d.from == d.to || d.from == d.to - 1 && state.doc.lineAt(d.from).to == d.from)) {
+      if (widget) {
         deco.add(from, from, Decoration.widget({
           widget: new DiagnosticWidget(sev),
           diagnostics: active.slice()
@@ -1206,6 +1247,8 @@ class LintState {
         }));
       }
       pos = to;
+      if (pos == docLen)
+        break;
       for (let i2 = 0; i2 < active.length; i2++)
         if (active[i2].to <= pos)
           active.splice(i2--, 1);
@@ -1338,17 +1381,27 @@ const lintKeymap = [
 ];
 const lintConfig = /* @__PURE__ */ Facet.define({
   combine(input) {
-    return Object.assign({ sources: input.map((i) => i.source).filter((x) => x != null) }, combineConfig(input.map((i) => i.config), {
+    return __spreadValues({
+      sources: input.map((i) => i.source).filter((x) => x != null)
+    }, combineConfig(input.map((i) => i.config), {
       delay: 750,
       markerFilter: null,
       tooltipFilter: null,
       needsRefresh: null,
       hideOn: () => null
     }, {
-      needsRefresh: (a, b) => !a ? b : !b ? a : (u) => a(u) || b(u)
+      delay: Math.max,
+      markerFilter: combineFilter,
+      tooltipFilter: combineFilter,
+      needsRefresh: (a, b) => !a ? b : !b ? a : (u) => a(u) || b(u),
+      hideOn: (a, b) => !a ? b : !b ? a : (t, x, y) => a(t, x, y) || b(t, x, y),
+      autoPanel: (a, b) => a || b
     }));
   }
 });
+function combineFilter(a, b) {
+  return !a ? b : !b ? a : (d, s) => b(a(d, s), s);
+}
 function assignKeys(actions) {
   let assigned = [];
   if (actions)
@@ -1383,9 +1436,10 @@ function renderDiagnostic(view, diagnostic, inPanel) {
       crelt("u", name.slice(keyIndex, keyIndex + 1)),
       name.slice(keyIndex + 1)
     ];
+    let markClass = action.markClass ? " " + action.markClass : "";
     return crelt("button", {
       type: "button",
-      class: "cm-diagnosticAction",
+      class: "cm-diagnosticAction" + markClass,
       onclick: click,
       onmousedown: click,
       "aria-label": ` Action: ${name}${keyIndex < 0 ? "" : ` (access key "${keys[i]})"`}.`
@@ -1747,7 +1801,8 @@ const bootstrap = EditorView.theme({
     padding: "0 0.75rem"
   },
   ".cm-content": {
-    padding: "0.375rem 0"
+    padding: "0.375rem 0",
+    animation: "fade-to-colors 0.5s ease-out 0s forwards"
   },
   "&:not(.cm-focused) .cm-selectionBackground, &:not(.cm-focused) .cm-activeLine, &:not(.cm-focused) .cm-activeLineGutter": {
     backgroundColor: "transparent"
@@ -1762,13 +1817,17 @@ const bootstrap = EditorView.theme({
     overflow: "auto",
     height: "100%",
     lineHeight: 1.85,
-    flexGrow: 1
+    flexGrow: 1,
+    animation: "fade 0.5s ease-out 0s forwards"
   },
   ".cm-gutters": {
     height: "100% !important",
     color: "var(--bs-tertiary-color)",
     backgroundColor: "var(--bs-tertiary-bg)"
-  }
+  },
+  "@keyframes slide-left": { from: { transform: "translateX(-100%)", opacity: 0 } },
+  "@keyframes fade-to-colors": { from: { filter: "grayscale(100%)" } },
+  "@keyframes fade": { from: { opacity: 0 } }
 });
 
 const darkTheme = EditorView.theme({
@@ -1841,41 +1900,57 @@ var light = [
 
 const getTheme = (el) => ({ light, dark })[el.dataset.bsTheme || "light"];
 const mutationObserver = new MutationObserver(
-  (changes) => changes.map((mutation) => mutation.target).filter((mutationTarget) => mutationTarget instanceof HTMLElement).map((themeContainer) => ({ transaction: { effects: themes.get(themeContainer).reconfigure(getTheme(themeContainer)) }, editors: editors.get(themeContainer) })).forEach(({ transaction, editors: editors2 }) => editors2.forEach((editor) => editor.dispatch(transaction)))
+  (changes) => changes.map((mutation) => mutation.target).filter((mutationTarget) => mutationTarget instanceof HTMLElement).map((themeContainer) => editors.get(themeContainer).forEach((editor) => setTheme(themeContainer, editor)))
 );
+const setTheme = (themeContainer, editor) => editor.dispatch({ effects: themes.get(editor).reconfigure(getTheme(themeContainer)) });
 const themes = /* @__PURE__ */ new WeakMap();
 const editors = /* @__PURE__ */ new WeakMap();
 class ExpressionEditor extends HTMLTextAreaElement {
   constructor() {
     super();
-    const themeContainer = this.closest("[data-bs-theme]") || document.documentElement;
-    if (!themes.has(themeContainer)) {
-      mutationObserver.observe(themeContainer, { attributes: true, attributeFilter: ["data-bs-theme"] });
-      themes.set(themeContainer, new Compartment());
-      editors.set(themeContainer, /* @__PURE__ */ new Set());
-    }
+    this.theme = new Compartment();
+    this.instanceStyles = new Compartment();
     this.dom = document.createElement("div");
+    const shadow = this.dom.attachShadow({ mode: "closed" });
     this.editorView = new EditorView({
       extensions: [
-        EditorView.editorAttributes.of({ style: `min-height: calc(0.75rem + ${this.rows} * 0.8125 * 1.85rem + 2px); height: calc(0.75rem + ${this.rows} * 0.8125 * 1.85rem + 2px)` }),
+        this.instanceStyles.of(EditorView.theme({})),
         basicSetup({
           useLineNumbers: JSON.parse(this.dataset.lineNumbers || "false")
         }),
-        themes.get(themeContainer).of(getTheme(themeContainer)),
+        this.theme.of(light),
         keymap.of([...defaultKeymap, { key: "Tab", run: acceptCompletion }]),
-        expressionlanguage(JSON.parse(this.dataset.config || "{}"), [getTheme(themeContainer)]),
+        expressionlanguage(JSON.parse(this.dataset.config || "{}")),
         EditorView.updateListener.of((e) => {
           if (e.docChanged) {
             this.value = e.state.doc.toString();
           }
         })
       ],
-      parent: this.dom,
+      root: shadow,
+      parent: shadow,
       doc: this.value.trim()
     });
+    themes.set(this.editorView, this.theme);
+  }
+  connectedCallback() {
+    const themeContainer = this.closest("[data-bs-theme]") || document.documentElement;
+    if (!editors.has(themeContainer)) {
+      editors.set(themeContainer, /* @__PURE__ */ new Set());
+      mutationObserver.observe(themeContainer, { attributes: true, attributeFilter: ["data-bs-theme"] });
+    }
+    if (editors.get(themeContainer).has(this.editorView)) {
+      return;
+    }
+    setTheme(themeContainer, this.editorView);
     editors.get(themeContainer).add(this.editorView);
+    this.editorView.dispatch({
+      effects: this.instanceStyles.reconfigure(EditorView.theme({
+        "&": { minHeight: this.getBoundingClientRect().height + "px" },
+        "& .cm-gutter": { minHeight: `${this.getBoundingClientRect().height - 2}px` }
+      }))
+    });
     this.replaceWith(this.dom);
-    this.hidden = true;
     this.dom.appendChild(this);
   }
 }

package/example.html

@@ -1,4 +1,14 @@
 <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">
             {
@@ -34,13 +44,22 @@
                 <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>
-                <textarea rows="5" class="form-control" is="expression-editor" data-line-numbers="true" data-config="{&quot;identifiers&quot;:[{&quot;name&quot;:&quot;x&quot;}]}">
-x == x + 1
+            <div id="template">
+                <textarea 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'
-&& x == x + 1
-                </textarea>
+&& x == x + 1</textarea>
+            </div>
+            <div>
+                <button type="button" class="btn btn-sm btn-secondary mt-3" id="clone">Clone</button>
             </div>
         </div>
+        <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>

package/package.json

@@ -17,7 +17,8 @@
     "build": "pkgroll",
     "dev": "pkgroll --watch",
     "pretest": "npm run-script build",
-    "test": "exit 0 # some day we have tests here"
+    "test": "playwright test",
+    "test:e2e": "playwright test"
   },
   "description": "Advanced editor for Symfony Expression Language",
   "dependencies": {
@@ -32,7 +33,10 @@
   },
   "devDependencies": {
     "pkgroll": "^2.11.2",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "@types/node": "^20.11.0",
+    "@playwright/test": "^1.40.0",
+    "playwright": "^1.40.0"
   },
   "license": "MIT",
   "repository": {
@@ -43,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "0.1.1"
+  "version": "1.0.0"
 }