symfony-expression-editor 0.1.0 → 0.2.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/README.md

@@ -14,7 +14,7 @@ Configuring CodeMirror and making it blend into UI can be tricky
 
 ```html
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-<script type="module" src="https://cdn.jsdelivr.net/npm/symfony-expression-editor@1.0.0/+esm"></script>
+<script type="module" src="https://esm.sh/symfony-expression-editor"></script>
 <textarea class="form-control" is="expression-editor" rows="1">'foobar' starts with 'foo'</textarea>
 ```
 

package/dist/index.cjs

@@ -1162,10 +1162,9 @@ 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;
     for (let i = 0; ; ) {
@@ -1749,7 +1748,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 +1764,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 +1847,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

@@ -1160,10 +1160,9 @@ 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;
     for (let i = 0; ; ) {
@@ -1747,7 +1746,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 +1762,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 +1845,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">
             {
@@ -18,7 +28,7 @@
                 "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@0.10.0"
+                "@valtzu/codemirror-lang-el": "https://esm.sh/*@valtzu/codemirror-lang-el@1.0.0"
               }
             }
         </script>
@@ -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

@@ -1,6 +1,5 @@
 {
   "name": "symfony-expression-editor",
-  "version": "0.1.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
@@ -28,12 +27,11 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.3",
     "@lezer/highlight": "^1.2.1",
-    "@valtzu/codemirror-lang-el": "^0.10.0",
+    "@valtzu/codemirror-lang-el": "^1.0.0",
     "codemirror": "^6.0.1"
   },
   "devDependencies": {
     "pkgroll": "^2.11.2",
-    "tsx": "^4.19.3",
     "typescript": "^5.8.2"
   },
   "license": "MIT",
@@ -44,5 +42,6 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
+  },
+  "version": "0.2.0"
 }