Implement EditorWidget for dynamic textarea resizing and content rendering

inventory/static/js/editor.js

@@ -0,0 +1,30 @@
+const EditorWidget = (() => {
+    let tempIdCounter = 1;
+
+    function autoResizeTextarea(textarea) {
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight + 2}px`;
+    }
+
+    function createEditorWidget(template, id, timestamp, content = '') {
+        let html = template.innerHTML
+            .replace(/__ID__/g, id)
+            .replace(/__TIMESTAMP__/g, timestamp)
+            .replace(/__CONTENT__/g, content);
+
+        const wrapper = document.createElement("div");
+        wrapper.innerHTML = html;
+
+        return wrapper.firstElementChild;
+    }
+
+    function createTempId(prefix = "temp") {
+        return `${prefix}-${tempIdCounter++}`;
+    }
+
+    return {
+        autoResizeTextarea,
+        createEditorWidget,
+        createTempId
+    };
+})();

inventory/static/js/widget.js

@@ -1,34 +1,3 @@
-const EditorWidget = (() => {
-    let tempIdCounter = 1;
-
-    function autoResizeTextarea(textarea) {
-        textarea.style.height = 'auto';
-        textarea.style.height = `${textarea.scrollHeight + 2}px`;
-    }
-
-    function createEditorWidget(template, id, timestamp, content = '') {
-        let html = template.innerHTML
-            .replace(/__ID__/g, id)
-            .replace(/__TIMESTAMP__/g, timestamp)
-            .replace(/__CONTENT__/g, content);
-
-        const wrapper = document.createElement("div");
-        wrapper.innerHTML = html;
-
-        return wrapper.firstElementChild;
-    }
-
-    function createTempId(prefix = "temp") {
-        return `${prefix}-${tempIdCounter++}`;
-    }
-
-    return {
-        autoResizeTextarea,
-        createEditorWidget,
-        createTempId
-    };
-})();
-
 const ComboBoxWidget = (() => {
     let tempIdCounter = 1;
 

inventory/templates/fragments/_dropdown_fragment.html

@@ -11,14 +11,14 @@
 <div class="dropdown">
     <div class="btn-group w-100">
         <button
-            class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button"
+            class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item and enabled %}-0 border-end-0{% endif %} dropdown-button"
             type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
             id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
             style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
             {{ current_item.identifier if current_item else '-' }}
         </button>
         <button
-            class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}"
+            class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item or not enabled %} d-none{% endif %}"
             type="button" id="{{ id }}ClearButton"
             style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
             onclick="DropdownWidget.clear('{{ id }}')">

inventory/templates/layout.html

@@ -77,6 +77,7 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="{{ url_for('static', filename='js/csv.js') }}"></script>
     <script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/editor.js') }}"></script>
     <script src="{{ url_for('static', filename='js/image.js') }}"></script>
     <script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
     <script src="{{ url_for('static', filename='js/widget.js') }}"></script>