Refactor editor fragment layout for improved readability and maintainability

This commit is contained in:
Yaro Kasear 2025-07-25 10:35:38 -05:00
parent 74410e1075
commit f9089066ec

View file

@ -10,17 +10,26 @@
</li>
{% if enabled %}
<li class="nav-item">
<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>
<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 }}" onclick="EditorWidget.autoResizeTextarea(textEditor{{ 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 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 %} editor" data-note-id="{{ id }}" oninput="EditorWidget.autoResizeTextarea(textEditor{{ id }}); viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);">{{ content if content }}</textarea>
<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 %} 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>