47 lines
No EOL
2.3 KiB
HTML
47 lines
No EOL
2.3 KiB
HTML
{% import "fragments/_icon_fragment.html" as icons %}
|
|
|
|
{% macro render_editor(id, title, mode='edit', content=None) %}
|
|
<!-- Editor Fragment -->
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-black">{{ title }}</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') }}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link{% if mode == 'view' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#viewer{{ id }}">View</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="tabContent{{ id }}">
|
|
<div class="tab-pane fade{% if mode == 'edit' %} show active border border-top-0{% endif %}" id="editor{{ id }}">
|
|
<textarea id="textEditor{{ id }}" name="update{{ id }}" class="form-control border-top-0 rounded-top-0" data-note-id="{{ id }}">{{ content if content }}</textarea>
|
|
</div>
|
|
<div class="tab-pane fade{% if mode == 'view' %} show active border border-top-0{% endif %} p-2 markdown-body" id="viewer{{ id }}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
textEditor{{ id }} = document.getElementById("textEditor{{ id }}");
|
|
editTab{{ id }} = document.getElementById("editTab{{ id }}");
|
|
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);
|
|
|
|
editTab{{ id }}.addEventListener("click", () => {
|
|
EditorWidget.autoResizeTextarea(textEditor{{ id }});
|
|
});
|
|
|
|
textEditor{{ id }}.addEventListener("input", () => {
|
|
viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);
|
|
});
|
|
});
|
|
</script>
|
|
{% endmacro %} |