diff --git a/inventory/static/js/editor.js b/inventory/static/js/editor.js
index 346f978..22323e2 100644
--- a/inventory/static/js/editor.js
+++ b/inventory/static/js/editor.js
@@ -1,3 +1,17 @@
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll('.editor').forEach(el => {
+        EditorWidget.autoResizeTextarea(el);
+    });
+
+    document.querySelectorAll('.viewer').forEach(el => {
+        const id = el.id.replace('viewer', '');
+        const textEditor = document.getElementById(`textEditor${id}`);
+        if (textEditor) {
+            el.innerHTML = marked.parse(textEditor.value);
+        }
+    });
+});
+
 const EditorWidget = (() => {
     let tempIdCounter = 1;
 
diff --git a/inventory/templates/fragments/_editor_fragment.html b/inventory/templates/fragments/_editor_fragment.html
index 37cd350..d98d3d6 100644
--- a/inventory/templates/fragments/_editor_fragment.html
+++ b/inventory/templates/fragments/_editor_fragment.html
@@ -13,41 +13,16 @@
                     <a class="nav-link{% if mode == 'view' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#viewer{{ id }}">{{ icons.render_icon('file-earmark-richtext', 16) }}</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link{% if mode == 'edit' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#editor{{ id }}" id="editTab{{ id }}">{{ icons.render_icon('pencil', 16) }}</a>
+                    <a class="nav-link{% if mode == 'edit' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#editor{{ id }}" id="editTab{{ id }}" onclick="EditorWidget.autoResizeTextarea(textEditor{{ id }});">{{ icons.render_icon('pencil', 16) }}</a>
                 </li>
                 {% endif %}
             </ul>
             <div class="tab-content" id="tabContent{{ id }}">
-                <div class="tab-pane fade{% if mode == 'view' %} show active border border-top-0{% endif %} p-2 markdown-body" id="viewer{{ id }}"></div>
+                <div class="tab-pane fade{% if mode == 'view' %} show active border border-top-0{% endif %} p-2 markdown-body viewer" id="viewer{{ id }}"></div>
                 <div class="tab-pane fade{% if mode == 'edit' %} show active border border-top-0{% endif %}" id="editor{{ id }}">
-                    <textarea id="textEditor{{ id }}" name="editor{{ id }}" class="form-control border-top-0 rounded-top-0{% if not enabled %} disabled{% endif %}" data-note-id="{{ id }}">{{ content if content }}</textarea>
+                    <textarea id="textEditor{{ id }}" name="editor{{ id }}" class="form-control border-top-0 rounded-top-0{% if not enabled %} disabled{% endif %} editor" data-note-id="{{ id }}" oninput="EditorWidget.autoResizeTextarea(textEditor{{ id }}); viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);">{{ content if content }}</textarea>
                 </div>
             </div>
         </div>
     </div>
-
-    <script>
-        document.addEventListener("DOMContentLoaded", () => {
-            textEditor{{ id }} = document.getElementById("textEditor{{ id }}");
-            {% if enabled %}
-                editTab{{ id }} = document.getElementById("editTab{{ id }}");
-            {% endif %}
-            viewer{{ id }} = document.getElementById("viewer{{ id }}")
-
-            textEditor{{ id }}.addEventListener("input", () => EditorWidget.autoResizeTextarea(textEditor{{ id }}));
-            EditorWidget.autoResizeTextarea(textEditor{{ id }});
-
-            viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);
-
-            {% if enabled %}
-                editTab{{ id }}.addEventListener("click", () => {
-                    EditorWidget.autoResizeTextarea(textEditor{{ id }});
-                });
-            {% endif %}
-
-            textEditor{{ id }}.addEventListener("input", () => {
-                viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);
-            });
-        });
-    </script>
 {% endmacro %}
\ No newline at end of file