Implement UI for abstract and lineage tags

With tiptap editor 🪄

SAEON/odp-server#32

odp/ui/base/forms/__init__.py

@@ -4,7 +4,16 @@
 from odp.ui.base.forms._keywords import InstitutionKeywordForm
 from odp.ui.base.forms._packages import FileUploadForm, PackageForm, ZipUploadForm
 from odp.ui.base.forms._search import CatalogSearchForm, ResourceSearchForm
-from odp.ui.base.forms._tags import ContributorTagForm, DOITagForm, DateRangeTagForm, GeoLocationTagForm, KeywordTagForm, SDGTagForm
+from odp.ui.base.forms._tags import (
+    AbstractTagForm,
+    ContributorTagForm,
+    DOITagForm,
+    DateRangeTagForm,
+    GeoLocationTagForm,
+    KeywordTagForm,
+    LineageTagForm,
+    SDGTagForm,
+)
 
 
 def init_app(app: Flask):

odp/ui/base/forms/_tags.py

@@ -1,4 +1,4 @@
-from wtforms import BooleanField, FloatField, RadioField, SelectField, StringField, ValidationError
+from wtforms import BooleanField, FloatField, HiddenField, RadioField, SelectField, StringField, ValidationError
 from wtforms.validators import data_required, input_required, number_range, optional, regexp
 
 from odp.const import DOI_REGEX
@@ -138,3 +138,17 @@ class DateRangeTagForm(BaseForm):
     def validate_end(self, field):
         if field.data < self.start.data:
             raise ValidationError('The end date cannot be earlier than the start date.')
+
+
+class AbstractTagForm(BaseForm):
+    abstract_hidden = HiddenField(
+        label='Abstract',
+        validators=[data_required()],
+    )
+
+
+class LineageTagForm(BaseForm):
+    lineage_hidden = HiddenField(
+        label='Methods (Lineage)',
+        validators=[data_required()],
+    )

odp/ui/base/macros/content.j2

@@ -119,7 +119,7 @@
     {% set disabled = button.scope and button.scope not in g.user_permissions %}
     {% set btn_class = 'btn btn-' + ('outline-' if button.outline) + button.theme.value %}
     {% if edit_icon %}
-        {% set btn_class = btn_class + ' btn-row-delete p-0' %}
+        {% set btn_class = btn_class + ' btn-icon' %}
         {% set btn_label = '🖉' | safe %}
     {% else %}
         {% set btn_class = btn_class + ' btn-action' %}

odp/ui/base/macros/editor.j2

@@ -0,0 +1,45 @@
+{% macro render_editor(
+    element_id
+) %}
+    <div class="btn-toolbar mb-3">
+        <div class="btn-group">
+            {% for command in 'bold', 'italic', 'underline', 'subscript', 'superscript' %}
+                <button type="button" id="{{ element_id }}-{{ command }}" title="{{ command | title }}"
+                        class="btn btn-outline-info btn-icon ri-{{ command }}"></button>
+            {% endfor %}
+        </div>
+    </div>
+    <div id="{{ element_id }}"></div>
+{% endmacro %}
+
+{% macro init_editor(
+    element_id,
+    form_id=none,
+    field_id=none,
+    modal_id=none,
+    content=''
+) %}
+    <script type="module">
+        import {createEditor} from "{{ url_for('static', filename='scripts/editor.js') }}";
+
+        const {{ element_id }}Editor = createEditor('{{ element_id }}', '{{ content }}');
+
+        {% for command in 'bold', 'italic', 'underline', 'subscript', 'superscript' %}
+            $("#{{ element_id }}-{{ command }}").bind("click", (event) => {
+                {{ element_id }}Editor.chain().focus().toggle{{ command | title }}().run();
+            });
+        {% endfor %}
+
+        {% if form_id and field_id %}
+            $("#{{ form_id }}").bind("submit", (event) => {
+                $("#{{ field_id }}").val({{ element_id }}Editor.getHTML());
+            });
+        {% endif %}
+
+        {% if modal_id %}
+            $("#{{ modal_id }}").bind("shown.bs.modal", (event) => {
+                {{ element_id }}Editor.chain().focus().run();
+            });
+        {% endif %}
+    </script>
+{% endmacro %}

odp/ui/base/macros/forms.j2

@@ -108,7 +108,7 @@
     #}
     {% set msg = confirm_msg or 'Are you sure you want to delete this %s?' % item_desc %}
     <form action="{{ url_for(target, **kwargs) }}" method="post">
-        <button type="submit" class="btn btn-outline-danger btn-row-delete p-0" {{ 'disabled' if not enabled }}
+        <button type="submit" class="btn btn-outline-danger btn-icon" {{ 'disabled' if not enabled }}
                 onclick="return confirm('{{ msg }}')">
             {{ '&#10060;'|safe }}
         </button>
@@ -134,7 +134,7 @@
     {% set disabled = button.scope and button.scope not in g.user_permissions %}
     {% set btn_class = 'btn btn-' + ('outline-' if button.outline) + button.theme.value %}
     {% if edit_icon %}
-        {% set btn_class = btn_class + ' btn-row-delete p-0' %}
+        {% set btn_class = btn_class + ' btn-icon' %}
         {% set btn_label = '&#128393;' | safe %}
     {% else %}
         {% set btn_class = btn_class + ' btn-action' %}
@@ -143,12 +143,12 @@
 
     <button type="button" class="{{ btn_class }}" {{ 'disabled' if disabled }}
             onclick="showModal('{{ modal_id }}', {{ reload_on_cancel | lower }});"
-            {% if button.description %}title="{{ button.description }}{% endif %}">
+            {% if button.description %}title="{{ button.description }}"{% endif %}>
         {{ btn_label }}
     </button>
 
-    <div class="modal fade" id="{{ modal_id }}" tabindex="-1">
-        <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal fade" id="{{ modal_id }}" tabindex="-1" data-bs-backdrop="static">
+        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
             <div class="modal-content">
                 <div class="modal-header">
                     <h1 class="modal-title fs-5">{{ button.label }}</h1>

odp/ui/base/static/scripts/editor.js

@@ -0,0 +1,32 @@
+import {Editor} from 'https://esm.sh/@tiptap/core'
+import Document from 'https://esm.sh/@tiptap/extension-document'
+import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph'
+import Text from 'https://esm.sh/@tiptap/extension-text'
+import Bold from 'https://esm.sh/@tiptap/extension-bold'
+import Italic from 'https://esm.sh/@tiptap/extension-italic'
+import Underline from 'https://esm.sh/@tiptap/extension-underline'
+import Subscript from 'https://esm.sh/@tiptap/extension-subscript'
+import Superscript from 'https://esm.sh/@tiptap/extension-superscript'
+
+export function createEditor(elementId, content) {
+    return new Editor({
+        element: document.querySelector(`#${elementId}`),
+        content: content,
+        extensions: [
+            Document,
+            Paragraph,
+            Text,
+            Bold,
+            Italic,
+            Underline,
+            Subscript,
+            Superscript,
+        ],
+        editorProps: {
+            attributes: {
+                class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none ' +
+                    'border',
+            },
+        },
+    });
+}

odp/ui/base/static/styles/custom.css

@@ -6,9 +6,10 @@ html {
     min-width: 75px;
 }
 
-.btn-row-delete {
+.btn-icon {
     height: 24px;
     width: 24px;
+    padding: 0 !important;
 }
 
 .flex-grow-evenly {