Merge pull request #9 from phillip-kruger/main

Added value-change event

Author: phillip-kruger

example/index.html

@@ -770,7 +770,7 @@ <h3 id="editable">Editable code blocks</h3>
 
       <div class="card">
     Will create this output:
-    <qui-code-block mode="properties" theme="dark" class="toggle" editable>
+    <qui-code-block id="valuechangeid" mode="properties" theme="dark" class="toggle" editable>
       <slot>
 foo = bar
       </slot>
@@ -784,6 +784,12 @@ <h3 id="editable">Editable code blocks</h3>
 
     <script>
 
+    const valuechangeeditor = document.getElementById('valuechangeid');
+
+    valuechangeeditor.addEventListener('value-changed', (e) => {
+      console.log('New value:', e.detail.value);
+    });  
+
     document.addEventListener('shiftEnter', event => {
         const displayDiv = document.getElementById('content-display');
         displayDiv.innerText = event.detail.content;

qui-code-block.js

@@ -162,7 +162,13 @@ class QuiCodeBlock extends LitElement {
               ]),
             EditorView.updateListener.of((update) => {
                 if (update.docChanged) {
-                    this.value = update.state.doc.toString();
+                    const value = update.state.doc.toString();
+                    this.value = value;
+                        this.dispatchEvent(new CustomEvent('value-changed', {
+                        detail: { value },
+                        bubbles: true,
+                        composed: true
+                    }));
                 }
             }),
             this.editable ? [] : EditorState.readOnly.of(true)