yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance editor functionality with auto-resizing textareas and live markdown preview

Browse source
This commit is contained in:
Yaro Kasear 2025-07-25 10:30:41 -05:00
parent 16959b8e2f
commit 57c47d195c
2 changed files with 17 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

14
inventory/static/js/editor.js
View file

@ -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;

31
inventory/templates/fragments/_editor_fragment.html
View file

@ -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 %}