Merge pull request #58 from Simple2B/svyat/feat/tags

Tags (create)

.vscode/settings.json

@@ -13,6 +13,7 @@
   "cSpell.words": [
     "bookname",
     "Btns",
+    "Divs",
     "flowbite",
     "jsonify",
     "pydantic",

app/__init__.py

@@ -70,10 +70,12 @@ def create_app(environment="development"):
     # Jinja globals
     from app.controllers.jinja_globals import (
         form_hidden_tag,
+        display_tags,
         build_qa_url_using_interpretation,
     )
 
     app.jinja_env.globals["form_hidden_tag"] = form_hidden_tag
+    app.jinja_env.globals["display_tags"] = display_tags
     app.jinja_env.globals["build_qa_url"] = build_qa_url_using_interpretation
 
     # Error handlers.

app/controllers/jinja_globals.py

@@ -1,8 +1,13 @@
+import re
+
+from flask import current_app
 from flask_wtf import FlaskForm
 from flask import url_for
 
 from app import models as m
 
+TAG_REGEX = re.compile(r"\[.*?\]")
+
 
 # Using: {{ form_hidden_tag() }}
 def form_hidden_tag():
@@ -10,6 +15,22 @@ def form_hidden_tag():
     return form.hidden_tag()
 
 
+# Using: {{ display_tags("Some text with [tags] here") }}
+def display_tags(text: str):
+    tags = current_app.config["TAG_REGEX"].findall(text)
+
+    classes = ["text-orange-500", "!no-underline"]
+    classes = " ".join(classes)
+
+    for tag in tags:
+        text = text.replace(
+            tag,
+            f"<a href='#' target='_blank' class='{classes}'>{tag}</a>",
+        )
+
+    return text
+
+
 # Using: {{ build_qa_url(interpretation) }}
 def build_qa_url_using_interpretation(interpretation: m.Interpretation):
     section: m.Section = interpretation.section

app/controllers/tags.py

@@ -0,0 +1,100 @@
+from app import models as m, db
+from app.logger import log
+
+
+def get_or_create_tag(tag_name: str):
+    if len(tag_name) > 32:
+        log(
+            log.ERROR,
+            "Cannot create Tag [%s]. Exceeded name length. Current length: [%s]",
+            tag_name,
+            len(tag_name),
+        )
+        raise ValueError("Exceeded name length")
+
+    tag = m.Tag.query.filter_by(name=tag_name).first()
+    if not tag:
+        log(log.INFO, "Create Tag: [%s]", tag_name)
+        tag = m.Tag(name=tag_name).save()
+
+    return tag
+
+
+def set_book_tags(book: m.Book, tags: str):
+    book_tags = m.BookTags.query.filter_by(book_id=book.id).all()
+    for book_tag in book_tags:
+        db.session.delete(book_tag)
+
+    tags_names = [tag.title() for tag in tags.split(",") if len(tag)]
+
+    for tag_name in tags_names:
+        try:
+            tag = get_or_create_tag(tag_name)
+        except ValueError as e:
+            if str(e) == "Exceeded name length":
+                continue
+            log(
+                log.CRITICAL,
+                "Unexpected error [%s]",
+                str(e),
+            )
+            raise e
+
+        book_tag = m.BookTags(tag_id=tag.id, book_id=book.id)
+        log(log.INFO, "Create BookTag: [%s]", book_tag)
+        book_tag.save(False)
+    db.session.commit()
+
+
+def set_comment_tags(comment: m.Comment, tags: list[str]):
+    comment_tags = m.CommentTags.query.filter_by(comment_id=comment.id).all()
+    for tag in comment_tags:
+        db.session.delete(tag)
+    tags_names = [tag.lower().replace("[", "").replace("]", "") for tag in tags]
+
+    for tag_name in tags_names:
+        try:
+            tag = get_or_create_tag(tag_name)
+        except ValueError as e:
+            if str(e) == "Exceeded name length":
+                continue
+            log(
+                log.CRITICAL,
+                "Unexpected error [%s]",
+                str(e),
+            )
+            raise e
+
+        comment_tag = m.CommentTags(tag_id=tag.id, comment_id=comment.id)
+        log(log.INFO, "Create CommentTags: [%s]", comment_tag)
+        comment_tag.save(False)
+    db.session.commit()
+
+
+def set_interpretation_tags(interpretation: m.InterpretationTag, tags: list[str]):
+    interpretation_tags = m.InterpretationTag.query.filter_by(
+        interpretation_id=interpretation.id
+    ).all()
+    for tag in interpretation_tags:
+        db.session.delete(tag)
+    tags_names = [tag.lower().replace("[", "").replace("]", "") for tag in tags]
+
+    for tag_name in tags_names:
+        try:
+            tag = get_or_create_tag(tag_name)
+        except ValueError as e:
+            if str(e) == "Exceeded name length":
+                continue
+            log(
+                log.CRITICAL,
+                "Unexpected error [%s]",
+                str(e),
+            )
+            raise e
+
+        interpretation_tag = m.InterpretationTag(
+            tag_id=tag.id, interpretation_id=interpretation.id
+        )
+        log(log.INFO, "Create InterpretationTag: [%s]", interpretation_tag)
+        interpretation_tag.save(False)
+    db.session.commit()

app/forms/book.py

@@ -9,6 +9,7 @@ from app.logger import log
 class BaseBookForm(FlaskForm):
     label = StringField("Label", [DataRequired(), Length(6, 256)])
     about = StringField("About")
+    tags = StringField("Tags")
 
 
 class CreateBookForm(BaseBookForm):

app/forms/comment.py

@@ -4,7 +4,7 @@ from wtforms.validators import DataRequired, Length
 
 
 class BaseCommentForm(FlaskForm):
-    text = StringField("Text", [DataRequired(), Length(3, 256)])
+    text = StringField("Text", [DataRequired(), Length(3)])
 
 
 class CreateCommentForm(BaseCommentForm):

app/forms/section.py

@@ -8,6 +8,7 @@ from app.logger import log
 
 class BaseSectionForm(FlaskForm):
     label = StringField("Label", [DataRequired(), Length(3, 256)])
+    about = StringField("About")
 
 
 class CreateSectionForm(BaseSectionForm):
@@ -53,7 +54,12 @@ class EditSectionForm(BaseSectionForm):
         label = field.data
         section_id = self.section_id.data
 
-        collection_id = db.session.get(m.Section, section_id).collection_id
+        session = db.session.get(m.Section, section_id)
+        if not session:
+            log(log.WARNING, "Session with id [%s] not found", section_id)
+            raise ValidationError("Invalid session id")
+
+        collection_id = session.collection_id
         section: m.Section = (
             m.Section.query.filter_by(
                 is_deleted=False, label=label, collection_id=collection_id

app/models/__init__.py

@@ -13,3 +13,5 @@ from .interpretation_vote import InterpretationVote
 from .tag import Tag
 from .interpretation_tag import InterpretationTag
 from .comment_tag import CommentTags
+from .book_tag import BookTags
+from .section_tag import SectionTag

app/models/book.py

@@ -18,7 +18,12 @@ class Book(BaseModel):
     owner = db.relationship("User", viewonly=True)
     stars = db.relationship("User", secondary="books_stars", back_populates="stars")
     contributors = db.relationship("BookContributor")
-    versions = db.relationship("BookVersion", order_by="asc(BookVersion.id)")
+    versions = db.relationship("BookVersion")
+    tags = db.relationship(
+        "Tag",
+        secondary="book_tags",
+        back_populates="books",
+    )
 
     def __repr__(self):
         return f"<{self.id}: {self.label}>"

app/models/book_tag.py

@@ -0,0 +1,13 @@
+from app import db
+from app.models.utils import BaseModel
+
+
+class BookTags(BaseModel):
+    __tablename__ = "book_tags"
+
+    # Foreign keys
+    tag_id = db.Column(db.Integer, db.ForeignKey("tags.id"))
+    book_id = db.Column(db.Integer, db.ForeignKey("books.id"))
+
+    def __repr__(self):
+        return f"<t:{self.tag_id} to b:{self.book_id}"

app/models/comment_tag.py

@@ -10,4 +10,4 @@ class CommentTags(BaseModel):
     comment_id = db.Column(db.Integer, db.ForeignKey("comments.id"))
 
     def __repr__(self):
-        return f"<t:{self.tag} to c:{self.comment}"
+        return f"<t:{self.tag_id} to c:{self.comment_id}"

app/models/section.py

@@ -26,6 +26,11 @@ class Section(BaseModel):
     interpretations = db.relationship(
         "Interpretation", viewonly=True, order_by="desc(Interpretation.id)"
     )
+    tags = db.relationship(
+        "Tag",
+        secondary="section_tags",
+        back_populates="sections",
+    )
 
     @property
     def path(self):

app/models/section_tag.py

@@ -0,0 +1,13 @@
+from app import db
+from app.models.utils import BaseModel
+
+
+class SectionTag(BaseModel):
+    __tablename__ = "section_tags"
+
+    # Foreign keys
+    tag_id = db.Column(db.Integer, db.ForeignKey("tags.id"))
+    section_id = db.Column(db.Integer, db.ForeignKey("sections.id"))
+
+    def __repr__(self):
+        return f"<t:{self.tag_id} to i:{self.section_id}"

app/models/tag.py

@@ -8,12 +8,16 @@ class Tag(BaseModel):
     name = db.Column(db.String(32), unique=True, nullable=False)
 
     # Relationships
+    sections = db.relationship(
+        "Section", secondary="section_tags", back_populates="tags"
+    )
     interpretations = db.relationship(
         "Interpretation", secondary="interpretation_tags", back_populates="tags"
     )
     comments = db.relationship(
         "Comment", secondary="comment_tags", back_populates="tags"
     )
+    books = db.relationship("Book", secondary="book_tags", back_populates="tags")
 
     def __repr__(self):
         return f"<{self.id}: {self.name}>"

app/templates/base.html

@@ -46,7 +46,7 @@
     {% for category, message in messages %}
     <!-- Flash message markup -->
     <!-- prettier-ignore -->
-    <div id="toast-{{category}}" class="absolute top-10 left-10 z-50 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"role="alert">
+    <div id="toast-{{category}}" class="absolute top-10 left-10 z-[150] flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"role="alert">
         <!-- prettier-ignore -->
         {% if category == 'success' %}
         <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
@@ -76,9 +76,11 @@
 
     {% block body %}
 
-    {% if current_user.is_authenticated %}    
-    {% block right_sidebar %} {% include 'right_sidebar.html' %} {% endblock %}
-    {% include 'book/add_book_modal.html' %}
+    {% if current_user.is_authenticated %}
+      {% block right_sidebar %}
+        {% include 'right_sidebar.html' %}
+      {% endblock %}
+      {% include 'book/add_book_modal.html' %}
     {% endif %}
 
     <!-- prettier-ignore -->
@@ -91,5 +93,9 @@
     {% endblock %}
     <!-- scripts -->
     {% block scripts %} {% endblock %}
+
+    <!-- DO NOT REMOVE THIS! -->
+    <!-- Adding tailwind classes that are not in html, but will be added by jinja -->
+    <span class="hidden text-orange-500 !no-underline"></span>
   </body>
 </html>

app/templates/book/add_book_modal.html

@@ -3,7 +3,7 @@
 <div id="add-book-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
-    <form action="{{ url_for('book.create') }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+    <form action="{{ url_for('book.create') }}" method="post" class="prevent-submit-on-enter relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="user_id" id="user-edit-id" value="0" />
       <input type="hidden" name="next_url" id="user-edit-next_url" value="" />

app/templates/book/add_section_modal.html

@@ -3,10 +3,7 @@
 <div id="add-section-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
-    <form
-    id="add_section_modal_form"
-      action="{{ url_for('book.section_create', book_id=book.id, collection_id=0, sub_collection_id=0) }}"
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+    <form id="add_section_modal_form" action="{{ url_for('book.section_create', book_id=book.id, collection_id=0, sub_collection_id=0) }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="collection_id" id="add_section_modal_collection_id" value="" />
       <input type="hidden" name="sub_collection_id" id="add_section_modal_sub_collection_id" value="" />
@@ -25,6 +22,13 @@
           </div>
         </div>
       </div>
+      <div class="p-6 pt-0 space-y-6">
+        <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
+          <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
+            <div id="new-section" class="quill-editor dark:text-white h-40"></div>
+          </div>
+        </div>
+      </div>
       <!-- Modal footer -->
       <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
         <button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Create</button>

app/templates/book/edit_comment_modal.html

@@ -19,9 +19,17 @@
         </div>
         <input type="hidden" name="comment_id" id="edit_comment_id" value="" />
         <div class="col-span-6 sm:col-span-3">
-            <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Text</label >
-            <input type="text" name="text" id="edit_comment_text" value="" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
+          <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Text</label >
+
+          <input type="hidden" name="text" id="edit-comment-text-input"/>
+
+          <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
+            <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
+              <div id="edit-comment-text" class="quill-editor dark:text-white h-40">
+              </div>
+            </div>
           </div>
+        </div>
       </div>
         <!-- Modal footer -->
       <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">

app/templates/book/edit_interpretation_modal.html

@@ -8,10 +8,12 @@
       {% else %}
         action="{{ url_for('book.interpretation_edit', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
       {% endif %}
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      method="post"
+      class="prevent-submit-on-enter relative bg-white rounded-lg shadow dark:bg-gray-700"
+    >
       {{ form_hidden_tag() }}
       <input type="hidden" name="interpretation_id" id="interpretation_id" value="{{interpretation.id}}" />
-      <input type="hidden" name="text" id="interpretation-text-input" value={{interpretation.text}} />
+      <input type="hidden" name="text" id="interpretation-text-input" value="{{interpretation.text}}" />
 
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
@@ -22,7 +24,7 @@
       <div class="p-5">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="interpretation-text" class="quill-editor dark:text-white h-80">
+            <div id="interpretation-text" class="quill-editor dark:text-white h-40">
               {{ interpretation.text|safe }}
             </div>
           </div>

app/templates/book/edit_section_modal.html

@@ -8,7 +8,9 @@
         {% else %}
         action="{{ url_for('book.section_edit', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
       {% endif %}
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      method="post"
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+    >
       {{ form_hidden_tag() }}
       <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
 
@@ -26,6 +28,15 @@
           </div>
         </div>
       </div>
+      <div class="p-6 pt-0 space-y-6">
+        <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
+          <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
+            <div id="new-section-about" class="quill-editor dark:text-white h-40">
+              {{ section.about|safe }}
+            </div>
+          </div>
+        </div>
+      </div>
       <!-- Modal footer -->
       <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
         <button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save</button>

app/templates/book/interpretation_view.html

@@ -2,9 +2,9 @@
 {% extends 'base.html' %}
 
 {% if current_user.is_authenticated %}
-  {% include 'book/delete_section_modal.html' %}
-  {% include 'book/edit_section_modal.html' %}
-  {% include 'book/approve_interpretation_modal.html' %}
+{% include 'book/delete_section_modal.html' %}
+{% include 'book/edit_section_modal.html' %}
+{% include 'book/approve_interpretation_modal.html' %}
 <!-- prettier-ignore -->
 {% set show_delete_section = True %}
 <!-- prettier-ignore -->
@@ -50,12 +50,13 @@
       {% if current_user.is_authenticated %}
       <!-- prettier-ignore -->
       <form
-      {% if sub_collection %}
-        action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id) }}"
-      {% else %}
-        action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
-      {% endif %}
-      method="post" class="bg-white rounded-lg shadow dark:bg-gray-700">
+        {% if sub_collection %}
+          action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id) }}"
+        {% else %}
+          action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
+        {% endif %}
+        method="post" class="prevent-submit-on-enter bg-white rounded-lg shadow dark:bg-gray-700"
+      >
       {{ form_hidden_tag() }}
       <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
       <input type="hidden" name="label" id="label" value="{{section.label}}" />
@@ -69,14 +70,7 @@
           </div>
         </div>
       </div>
-      <div class="p-6 pt-0 space-y-6">
-        <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
-          <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="interpretation-text" class="quill-editor dark:text-white h-64">
-            </div>
-          </div>
-        </div>
-      </div>
+
       <!-- Modal footer -->
       <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
         <button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ml-auto">Submit</button>
@@ -141,11 +135,11 @@
               </div>
               <!-- prettier-ignore -->
               <dt class="flex justify-center w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
-                  <div class="ql-snow mb-2 truncate md:max-w-xl">
-                    <div class="dark:text-white h-30 ql-editor-readonly !px-0">
-                      <p>{{ interpretation.text|safe }}</p>
-                    </div>
+                <div class="ql-snow mb-2 truncate md:max-w-xl">
+                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+                    <p>{{ display_tags(interpretation.text)|safe }}</p>
                   </div>
+                </div>
 
                 <div class="flex border-t-2 pt-3 align-center justify-between md:w-full">
                   <div>

app/templates/book/my_library.html

@@ -3,6 +3,11 @@
 {% set selected_tab='my_library' %}
 {% block content %}
 
+{% if current_user.is_authenticated %}
+  {% include 'book/add_book_modal.html' %}
+{% endif %}
+
+
 <div
   class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1 h-box w-box flex">
   {% if not current_user.is_authenticated %}

app/templates/book/qa_view.html

@@ -23,34 +23,62 @@
     <h1 class="text-l font-extrabold dark:text-white ml-4 truncate">
       {{ section.label }}
     </h1>
-    <div class="ql-editor-readonly text-lg dark:text-white p-3">{{interpretation.text|safe}}</div>
+    <div class="ql-editor-readonly text-lg dark:text-white p-3">
+      {{display_tags(interpretation.text)|safe}}
+    </div>
   </div>
   <div class="p-1">
     <!-- prettier-ignore -->
     {% if not current_user.is_authenticated %}
-      <div class="bg-white dark:bg-gray-900 max-w-full p-6 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-        <div class="grid gap-6">
-          <div class="col-span-6 sm:col-span-3 truncate">
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white ">Connect you wallet to start contributing!</h3>
+    <div
+      class="bg-white dark:bg-gray-900 max-w-full p-6 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
+      <div class="grid gap-6">
+        <div class="col-span-6 sm:col-span-3 truncate">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            Connect you wallet to start contributing!
+          </h3>
+        </div>
+      </div>
+    </div>
+    <!-- prettier-ignore -->
+    {% endif %}
+    {% if current_user.is_authenticated %}
+    <form
+      {%
+      if
+      sub_collection
+      %}
+      action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
+      {%
+      else
+      %}
+      action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
+      {%
+      endif
+      %}
+      method="post"
+      class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
+      {{ form_hidden_tag() }}
+      <div class="relative z-0 w-full group">
+        <div class="mb-2">
+          <label
+            for="tags-input"
+            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+            Comment
+          </label>
+          <input type="hidden" name="text" id="comment-text-input" />
+          <div
+            class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
+            <div
+              class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
+              <div
+                id="comment-text"
+                class="quill-editor dark:text-white h-40"></div>
+            </div>
           </div>
         </div>
       </div>
-      <!-- prettier-ignore -->
-    {% endif %}
-    {% if current_user.is_authenticated %}
-    <form {% if sub_collection %}
-        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-      {% else %}
-        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-      {% endif %}
-      method="post" class="flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-      {{ form_hidden_tag() }}
-      <div class="relative z-0 w-full mb-6 group">
-        <!-- prettier-ignore -->
-        <input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-        <!-- prettier-ignore -->
-        <label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
-      </div>
+
       <!-- prettier-ignore -->
       <button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
     </form>
@@ -119,88 +147,128 @@
           <dt class="flex justify-center w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
             <div>
               <div class="dark:text-white h-30">
-                <p>{{ comment.text }}</p>
-              </div>
-            </div>
-            <div id="accordion-collapse" data-accordion="collapse" class="flex border-t-2 pt-3 mt-6 align-center justify-between space-x-3">
-              <div>Commented by <span class="text-blue-500">{{comment.user.username}}</span> on {{comment.created_at.strftime('%B %d, %Y')}}{% if comment.edited %}<i class="text-green-200"> edited</i>{% endif %}</div>
-              {% if comment.user_id == current_user.id %}
-                <div class="flex ml-auto justify-between w-24">
-                  <div class="relative">
-                    <button id="edit_comment_btn" data-popover-target="popover-edit" data-edit-comment-id="{{comment.id}}" data-edit-comment-text="{{comment.text}}" type="button" data-modal-target="edit_comment_modal" data-modal-toggle="edit_comment_modal" class="space-x-0.5 flex items-center">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
-                    </button>
-                    <div data-popover id="popover-edit" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
-                      <div class="px-3 py-2">
-                          <p>Edit this comment</p>
-                      </div>
-                      <div data-popper-arrow></div>
-                    </div>
+                <div class="ql-snow mb-2 truncate md:max-w-xl">
+                  <div class="dark:text-white h-30 ql-editor-readonly !px-0">
+                    <p>{{ display_tags(comment.text)|safe }}</p>
                   </div>
-                  <div class="relative">
-                    <button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{comment.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
-                    </button>
-                    <div data-popover id="popover-delete" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
-                      <div class="px-3 py-2">
-                          <p>Delete this comment</p>
-                      </div>
-                      <div data-popper-arrow></div>
-                    </div>
-                  </div>
-                  <div class="relative">
-                    <button type="button" data-popover-target="popover-comment" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1" class="relative space-x-0.5 flex items-center">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6  shrink-0"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
-                    </button>
-                    <div data-popover id="popover-comment" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
-                      <div class="px-3 py-2">
-                          <p>Comment to this comment</p>
-                      </div>
-                    </div></div>
-                    {% endif %}
-              </dt>
-
-            </div>
-            <div class="p-5 m-3">
-              {% for child in comment.children %}<div class="p-5 mb-2 flex justify-between items-end bg-slate-600 rounded-lg"><div>
-              <div class="inline-block mb-4">- {{child.text}}</div><span><div>by <span class="text-blue-500">{{child.user.username}}</span> {{child.created_at.strftime('%B %d, %Y')}}</div></span></div>
-              {% if child.user_id == current_user.id %}
-              <div class="relative ml-2">
-                <button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{child.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
-                </button>
-                <div data-popover id="popover-delete" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
-                  <div class="px-3 py-2">
-                      <p>Delete this comment</p>
-                  </div>
-                  <div data-popper-arrow></div>
                 </div>
               </div>
-              {% endif %}
+            </div>
+
+            <div id="accordion-collapse" data-accordion="collapse" class="flex border-t-2 pt-3 mt-6 align-center justify-between space-x-3">
+              <div>
+                Commented by
+                <span class="text-blue-500">{{comment.user.username}}</span>
+                on {{comment.created_at.strftime('%B %d, %Y')}}
+                {% if comment.edited %}
+                <i class="text-green-200"> edited</i>
+                {% endif %}
               </div>
-              {% endfor %}
-              </div>
-            <div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
-              <div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-                    <form {% if sub_collection %}
-                        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-                      {% else %}
-                        action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
-                      {% endif %}
-                      method="post" class="flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-                      {{ form_hidden_tag() }}
-                      <input type="hidden" name="parent_id" id="parent_id" value="{{comment.id}}" />
-                      <div class="relative z-0 w-full mb-6 group">
-                        <!-- prettier-ignore -->
-                        <input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                        <!-- prettier-ignore -->
-                        <label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
-                      </div>
-                      <!-- prettier-ignore -->
-                      <button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
-                    </form>
+
+              <div class="flex ml-auto justify-end space-x-2 w-24">
+                {% if comment.user_id == current_user.id %}
+                <div class="relative">
+                  <button id="edit_comment_btn" data-popover-target="popover-edit" data-edit-comment-id="{{comment.id}}" data-edit-comment-text="{{comment.text}}" type="button" data-modal-target="edit_comment_modal" data-modal-toggle="edit_comment_modal" class="space-x-0.5 flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
+                  </button>
+                  <div data-popover id="popover-edit" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="px-3 py-2">
+                      <p>Edit this comment</p>
+                    </div>
+                    <div data-popper-arrow></div>
+                  </div>
+                </div>
+                <div class="relative">
+                  <button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{comment.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
+                  </button>
+                  <div data-popover id="popover-delete" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="px-3 py-2">
+                      <p>Delete this comment</p>
+                    </div>
+                    <div data-popper-arrow></div>
+                  </div>
+                </div>
+                {% endif %}
+
+                <div class="relative">
+                  <button type="button" data-popover-target="popover-comment" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1" class="relative space-x-0.5 flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6  shrink-0"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
+                  </button>
+                  <div data-popover id="popover-comment" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="px-3 py-2">
+                      <p>Comment to this comment</p>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
+          </dt>
+        </div>
+        <div class="p-5 m-3">
+          {% for child in comment.children %}
+            <div class="p-5 mb-2 flex justify-between items-end bg-slate-600 rounded-lg">
+              <div class="ql-snow">
+                <div class="inline-block mb-4 ql-editor-readonly !p-0">
+                  {{display_tags(child.text)|safe}}
+                </div>
+                <span>
+                  <div>
+                    by
+                    <span class="text-blue-500">
+                      {{child.user.username}}
+                    </span>
+                    {{child.created_at.strftime('%B %d, %Y')}}
+                  </div>
+                </span>
+              </div>
+              {% if child.user_id == current_user.id %}
+                <div class="relative ml-2">
+                  <button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{child.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
+                  </button>
+                  <div data-popover id="popover-delete" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="px-3 py-2">
+                      <p>Delete this comment</p>
+                    </div>
+                    <div data-popper-arrow></div>
+                  </div>
+                </div>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+        <div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
+          <div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+              <form
+                {% if sub_collection %}
+                  action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
+                {% else %}
+                  action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
+                {% endif %}
+                method="post"
+                class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700"
+              >
+                {{ form_hidden_tag() }}
+                <input type="hidden" name="parent_id" id="parent_id" value="{{comment.id}}" />
+                <div class="relative z-0 w-full group">
+                  <div class="mb-2">
+                    <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                      Comment
+                    </label>
+                    <input type="hidden" name="text" id="sub-comment-{{loop.index}}-text-input"/>
+                    <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
+                      <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
+                        <div id="sub-comment-{{loop.index}}-text" class="quill-editor dark:text-white h-40"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- prettier-ignore -->
+                <button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
+              </form>
+          </div>
+        </div>
       </dl>
     {% endfor %}
   </dl>

app/templates/book/settings.html

@@ -36,23 +36,45 @@
 <div id="myTabContent">
   <!-- prettier-ignore -->
   <div class="hidden pl-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="settings" role="tabpanel" aria-labelledby="settings-tab">
-    <form action="{{ url_for('book.edit', book_id=book.id) }}" method="post" class="mb-0 flex flex-col space-y-2 w-1/2">
-        {{ form_hidden_tag() }}
-        <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
-          <div>
-            <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
-            <input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
-          </div>
-           <div>
-            <label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Book about</label>
-            <textarea type="text" name="about" id="about" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About my Book">{{book.about if not book.about==None}}</textarea>
-          </div>
-
-        <div>
-          <button type="submit" class="text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
+    <form action="{{ url_for('book.edit', book_id=book.id) }}" method="post" class="prevent-submit-on-enter settings-form mb-0 flex flex-col space-y-2 w-1/2">
+      {{ form_hidden_tag() }}
+      <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
+      <div>
+        <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
+        <input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
+      </div>
+      <div>
+        <label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+          Book about
+        </label>
+        <textarea type="text" name="about" id="about" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About my Book">
+          {{book.about if not book.about==None}}
+        </textarea>
+      </div>
+      <div class="multiple-input-block mb-6">
+        <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+          Tags
+        </label>
+        <input type="text" name="tags" class="hidden tags-to-submit">
+        <input
+          type="text"
+          id="tags-input"
+          class="multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="e.g. Law   (press 'Enter' or Comma to add tag. Click on tag to edit it)"
+          data-save-results-to="tags-to-submit"
+        >
+        <div class="multiple-input-items gap-1 flex flex-wrap">
+          {% for tag in book.tags %}
+            <div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
+          {% endfor %}
         </div>
-      </form>
-      <button type="button" data-modal-target="delete_book_modal" data-modal-toggle="delete_book_modal" class="mt-3 text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">Delete Book</button>
+      </div>
+
+      <div class="flex justify-between">
+        <button type="submit" class="mr-2 mb-2 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
+        <button type="button" data-modal-target="delete_book_modal" data-modal-toggle="delete_book_modal" class="text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">Delete Book</button>
+      </div>
+    </form>
   </div>
   <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="permissions" role="tabpanel" aria-labelledby="permissions-tab">
     <div class="p-5">

app/templates/header.html

@@ -1,6 +1,6 @@
 <nav
   class="fixed top-0 z-[55] w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-  <div>  
+  <div>
   <div class="px-3 py-3 lg:px-5 lg:pl-3">
     <div class="flex items-center justify-between">
       <div class="flex w-full items-center justify-between">
@@ -91,7 +91,7 @@
       <div class="divide-y divide-gray-100 dark:divide-gray-700">
         <a href="#" class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
           <div class="flex-shrink-0">
-            <img class="rounded-full w-11 h-11" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image" />
+            <img class="rounded-full w-11 h-11" src="" alt="Jese image" />
             <div class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-blue-600 border border-white rounded-full dark:border-gray-800">
               <svg class="w-3 h-3 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path> <path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path> </svg>
             </div>

app/templates/home/index.html

@@ -73,7 +73,7 @@
                     <p>{{ interpretation.section.label }}</p>
                   </a>
                   <div class="dark:text-white h-30 ql-editor-readonly">
-                    <p>{{ interpretation.text|safe }}</p>
+                    <p>{{ display_tags(interpretation.text)|safe }}</p>
                   </div>
                 </div>
                 <div class="flex mt-auto align-center justify-between md:w-full">

app/templates/user/profile.html

@@ -117,7 +117,7 @@
                     <p>{{ interpretation.section.label }}</p>
                   </a>
                   <div class="dark:text-white h-30 ql-editor-readonly">
-                    <p>{{ interpretation.text|safe }}</p>
+                    <p>{{ display_tags(interpretation.text)|safe }}</p>
                   </div>
                 </div>
                 <div class="flex mt-auto align-center justify-between md:w-full">

app/views/book/book.py

@@ -12,6 +12,9 @@ from app.controllers import (
     create_pagination,
     register_book_verify_route,
 )
+from app.controllers.tags import (
+    set_book_tags,
+)
 from app.controllers.delete_nested_book_entities import (
     delete_nested_book_entities,
 )
@@ -70,6 +73,9 @@ def create():
         m.Collection(
             label="Root Collection", version_id=version.id, is_root=True
         ).save()
+        tags = form.tags.data
+        if tags:
+            set_book_tags(book, tags)
 
         flash("Book added!", "success")
         return redirect(url_for("book.my_library"))
@@ -91,6 +97,9 @@ def edit(book_id: int):
         book: m.Book = db.session.get(m.Book, book_id)
         label = form.label.data
         about = form.about.data
+        tags = form.tags.data
+        if tags:
+            set_book_tags(book, tags)
 
         book.label = label
         book.about = about

app/views/book/comment.py

@@ -1,30 +1,26 @@
-from flask import (
-    flash,
-    redirect,
-    url_for,
-)
+from flask import flash, redirect, url_for, current_app
 from flask_login import login_required, current_user
 
 from app.controllers import (
-    create_breadcrumbs,
     register_book_verify_route,
 )
 from app.controllers.delete_nested_book_entities import (
     delete_nested_comment_entities,
 )
 from app import models as m, db, forms as f
+from app.controllers.tags import set_comment_tags
 from app.logger import log
 from .bp import bp
 
 
 @bp.route(
-    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/preview/create_comment",
+    "/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/create_comment",
     methods=["POST"],
 )
 @bp.route(
     (
         "/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
-        "<int:section_id>/<int:interpretation_id>/preview/create_comment"
+        "<int:section_id>/<int:interpretation_id>/create_comment"
     ),
     methods=["POST"],
 )
@@ -62,16 +58,6 @@ def create_comment(
                 )
             )
 
-    breadcrumbs = create_breadcrumbs(
-        book_id=book_id,
-        collection_path=(
-            collection_id,
-            sub_collection_id,
-        ),
-        section_id=section_id,
-        interpretation_id=interpretation_id,
-    )
-
     redirect_url = url_for(
         "book.qa_view",
         book_id=book_id,
@@ -79,7 +65,6 @@ def create_comment(
         sub_collection_id=sub_collection_id,
         section_id=section_id,
         interpretation_id=interpretation_id,
-        breadcrumbs=breadcrumbs,
     )
     section: m.Section = db.session.get(m.Section, section_id)
     if not section or section.is_deleted:
@@ -98,8 +83,9 @@ def create_comment(
     form = f.CreateCommentForm()
 
     if form.validate_on_submit():
+        text = form.text.data
         comment: m.Comment = m.Comment(
-            text=form.text.data,
+            text=text,
             user_id=current_user.id,
             interpretation_id=interpretation_id,
         )
@@ -115,6 +101,10 @@ def create_comment(
         )
         comment.save()
 
+        tags = current_app.config["TAG_REGEX"].findall(text)
+        if tags:
+            set_comment_tags(comment, tags)
+
         flash("Success!", "success")
         return redirect(redirect_url)
     else:
@@ -198,13 +188,19 @@ def comment_edit(
     sub_collection_id: int | None = None,
 ):
     form = f.EditCommentForm()
-    comment_id = form.comment_id.data
-    comment: m.Comment = db.session.get(m.Comment, comment_id)
 
     if form.validate_on_submit():
-        comment.text = form.text.data
+        text = form.text.data
+        comment_id = form.comment_id.data
+        comment: m.Comment = db.session.get(m.Comment, comment_id)
+        comment.text = text
         comment.edited = True
-        log(log.INFO, "Delete comment [%s]", comment)
+        log(log.INFO, "Edit comment [%s]", comment)
+
+        tags = current_app.config["TAG_REGEX"].findall(text)
+        if tags:
+            set_comment_tags(comment, tags)
+
         comment.save()
 
         flash("Success!", "success")

app/views/book/interpretation.py

@@ -3,6 +3,7 @@ from flask import (
     flash,
     redirect,
     url_for,
+    current_app,
 )
 from flask_login import login_required, current_user
 
@@ -14,6 +15,7 @@ from app.controllers.delete_nested_book_entities import (
     delete_nested_interpretation_entities,
 )
 from app import models as m, db, forms as f
+from app.controllers.tags import set_interpretation_tags
 from app.logger import log
 from .bp import bp
 
@@ -120,8 +122,10 @@ def interpretation_create(
     )
 
     if form.validate_on_submit():
+        text = form.text.data
+
         interpretation: m.Interpretation = m.Interpretation(
-            text=form.text.data,
+            text=text,
             section_id=section_id,
             user_id=current_user.id,
         )
@@ -133,6 +137,10 @@ def interpretation_create(
         )
         interpretation.save()
 
+        tags = current_app.config["TAG_REGEX"].findall(text)
+        if tags:
+            set_interpretation_tags(interpretation, tags)
+
         flash("Success!", "success")
         return redirect(redirect_url)
     else:
@@ -178,7 +186,12 @@ def interpretation_edit(
     )
 
     if form.validate_on_submit():
-        interpretation.text = form.text.data
+        text = form.text.data
+        interpretation.text = text
+
+        tags = current_app.config["TAG_REGEX"].findall(text)
+        if tags:
+            set_interpretation_tags(interpretation, tags)
 
         log(log.INFO, "Edit interpretation [%s]", interpretation.id)
         interpretation.save()

app/views/home.py

@@ -12,7 +12,7 @@ bp = Blueprint("home", __name__, url_prefix="/home")
 def get_all():
     books: m.Book = (
         m.Book.query.filter_by(is_deleted=False).order_by(m.Book.id).limit(5)
-    )
+    ).all()
     interpretations = (
         db.session.query(
             m.Interpretation,
@@ -23,11 +23,11 @@ def get_all():
                 m.Collection.id == m.Section.collection_id,
                 m.BookVersion.id == m.Section.version_id,
                 m.Book.id == m.BookVersion.book_id,
-                m.Book.is_deleted.is_(False),
-                m.BookVersion.is_deleted.is_(False),
-                m.Interpretation.is_deleted.is_(False),
-                m.Section.is_deleted.is_(False),
-                m.Collection.is_deleted.is_(False),
+                m.Book.is_deleted == False,  # noqa: E712
+                m.BookVersion.is_deleted == False,  # noqa: E712
+                m.Interpretation.is_deleted == False,  # noqa: E712
+                m.Section.is_deleted == False,  # noqa: E712
+                m.Collection.is_deleted == False,  # noqa: E712
             )
         )
         .order_by(m.Interpretation.created_at.desc())

config.py

@@ -1,4 +1,5 @@
 import os
+import re
 from functools import lru_cache
 from pydantic import BaseSettings
 from flask import Flask
@@ -28,6 +29,9 @@ class BaseConfig(BaseSettings):
     # HTTPProvider for SIWE
     HTTP_PROVIDER_URL: str
 
+    # regex
+    TAG_REGEX = re.compile(r"\[.*?\]")
+
     @staticmethod
     def configure(app: Flask):
         # Implement this method to do further configuration on your app.

migrations/versions/0961578f302a_book_tags.py

@@ -0,0 +1,44 @@
+"""book-tags
+
+Revision ID: 0961578f302a
+Revises: 5df1fabbee7d
+Create Date: 2023-05-16 10:58:44.518470
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = "0961578f302a"
+down_revision = "883298018384"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "book_tags",
+        sa.Column("tag_id", sa.Integer(), nullable=True),
+        sa.Column("book_id", sa.Integer(), nullable=True),
+        sa.Column("id", sa.Integer(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=True),
+        sa.Column("is_deleted", sa.Boolean(), nullable=True),
+        sa.ForeignKeyConstraint(
+            ["book_id"],
+            ["books.id"],
+        ),
+        sa.ForeignKeyConstraint(
+            ["tag_id"],
+            ["tags.id"],
+        ),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table("book_tags")
+    # ### end Alembic commands ###

migrations/versions/7baa732e01c6_section_tags.py

@@ -0,0 +1,37 @@
+"""section-tags
+
+Revision ID: 7baa732e01c6
+Revises: 0961578f302a
+Create Date: 2023-05-17 18:34:29.178354
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '7baa732e01c6'
+down_revision = '0961578f302a'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('section_tags',
+    sa.Column('tag_id', sa.Integer(), nullable=True),
+    sa.Column('section_id', sa.Integer(), nullable=True),
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), nullable=True),
+    sa.Column('is_deleted', sa.Boolean(), nullable=True),
+    sa.ForeignKeyConstraint(['section_id'], ['sections.id'], ),
+    sa.ForeignKeyConstraint(['tag_id'], ['tags.id'], ),
+    sa.PrimaryKeyConstraint('id')
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('section_tags')
+    # ### end Alembic commands ###

src/comment.ts

@@ -17,8 +17,12 @@ export function initComments() {
     document.querySelectorAll('#edit_comment_btn');
   const editCommentInputOnModal: HTMLInputElement =
     document.querySelector('#edit_comment_id');
-  const editCommentTextInputOnModal: HTMLInputElement =
-    document.querySelector('#edit_comment_text');
+  const editCommentTextInputOnModal: HTMLInputElement = document.querySelector(
+    '#edit-comment-text-input',
+  );
+  const editCommentTextQuillOnModal: HTMLInputElement =
+    document.querySelector('#edit-comment-text');
+
   if (
     editCommentBtns &&
     editCommentInputOnModal &&
@@ -30,6 +34,7 @@ export function initComments() {
         const text = btn.getAttribute('data-edit-comment-text');
         editCommentInputOnModal.value = id;
         editCommentTextInputOnModal.value = text;
+        editCommentTextQuillOnModal.innerHTML = text;
       }),
     );
   }

src/main.ts

@@ -8,6 +8,7 @@ import {initVote} from './vote';
 import {initTheme} from './theme';
 import {initApprove} from './approve';
 import {initStar} from './star';
+import {initMultipleInput} from './multipleInput';
 import {rightClick} from './rightClick';
 import {addSubCollection} from './addSubCollection';
 import {addSection} from './addSection';
@@ -33,6 +34,7 @@ initVote();
 initTheme();
 initApprove();
 initStar();
+initMultipleInput();
 rightClick();
 addSubCollection();
 addSection();

src/multipleInput.ts

@@ -0,0 +1,140 @@
+const handleClickOnTag = (
+  element: Element,
+  addedWords: string[],
+  tagsToSubmitInput: HTMLInputElement,
+) => {
+  const tag = element.innerHTML;
+
+  addedWords = addedWords.filter(el => el != tag);
+
+  element.remove();
+  const multipleInput: any = document.querySelector('.multiple-input');
+  multipleInput.value = tag;
+
+  // prettier-ignore
+  tagsToSubmitInput.value = addedWords.join();
+
+  return addedWords;
+};
+
+const multipleInputJs = () => {
+  const forms = document.querySelectorAll('.prevent-submit-on-enter');
+  if (!forms.length) {
+    return;
+  }
+  forms.forEach(form => {
+    form.addEventListener('keypress', (e: any) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+      }
+    });
+  });
+
+  const multipleInputBlock = document.querySelectorAll('.multiple-input-block');
+
+  multipleInputBlock.forEach((multipleInputBlock: any) => {
+    // prettier-ignore
+    const multipleInput: any = multipleInputBlock.querySelector('.multiple-input');
+    const tagsToSubmitInputClassName = multipleInput.getAttribute(
+      'data-save-results-to',
+    );
+    if (!tagsToSubmitInputClassName) {
+      console.error(
+        'Please set data-save-results-to attribute to .multiple-input element',
+      );
+      return;
+    }
+
+    const tagsToSubmitInput: HTMLInputElement =
+      multipleInputBlock.querySelector('.' + tagsToSubmitInputClassName);
+
+    const wordsBlock: HTMLDivElement = multipleInputBlock.querySelector(
+      '.multiple-input-items',
+    );
+    const wordDivs = wordsBlock.querySelectorAll('.multiple-input-word');
+    let addedWords: string[] = [];
+    wordDivs.forEach(el => {
+      addedWords.push(el.innerHTML);
+      el.addEventListener('click', () => {
+        addedWords = handleClickOnTag(el, addedWords, tagsToSubmitInput);
+      });
+    });
+
+    tagsToSubmitInput.value = addedWords.join();
+
+    multipleInput.addEventListener('input', () => {
+      let inputValue = multipleInput.value.trim();
+      if (inputValue.length > 32) {
+        multipleInput.value = inputValue.slice(0, 32);
+        return;
+      }
+    });
+
+    multipleInput.addEventListener('keyup', (event: any) => {
+      if (event.keyCode === 13 || event.keyCode === 188) {
+        if (!multipleInput.value) {
+          return;
+        }
+        let inputValue = multipleInput.value.trim();
+        if (!inputValue) {
+          return;
+        } else if (inputValue.length > 32) {
+          multipleInput.value = inputValue.slice(0, 32);
+          return;
+        }
+
+        // prettier-ignore
+        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase();
+        if (
+          inputValue.substring(inputValue.length - 1, inputValue.length) == ','
+        ) {
+          inputValue = inputValue.substring(0, inputValue.length - 1);
+          event.target.value = inputValue;
+        }
+        inputValue = inputValue.replaceAll(',', '');
+
+        if (addedWords.includes(inputValue)) {
+          return;
+        }
+
+        const wordDiv = document.createElement('div');
+        // prettier-ignore
+        wordDiv.className = 'cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2';
+        wordDiv.innerHTML = inputValue;
+        addedWords.push(inputValue);
+        wordDiv.addEventListener('click', () => {
+          addedWords = handleClickOnTag(wordDiv, addedWords, tagsToSubmitInput);
+        });
+
+        wordsBlock.appendChild(wordDiv);
+        multipleInput.value = '';
+        tagsToSubmitInput.value = addedWords.join();
+      }
+
+      // Edit last tag on click "backspace"
+      // Will be removed after demo
+      // TODO Remove after demo
+      // else if (event.keyCode === 8 && multipleInput.value.length === 0) {
+      //   const addedWordsDivs = document.querySelectorAll('.multiple-input-word');
+      //   const lastAdded = addedWordsDivs[addedWordsDivs.length - 1];
+      //   if (!lastAdded) {
+      //     return;
+      //   }
+      //   const word = lastAdded.innerHTML;
+      //   if (word || word != '') {
+      //     multipleInput.value = word;
+      //     lastAdded.remove();
+
+      //     addedWords.slice(0, addedWords.length - 1);
+      //     tagsToSubmitInput.value = addedWords.join();
+      //   }
+      // }
+    });
+  });
+};
+
+export function initMultipleInput() {
+  document.addEventListener('DOMContentLoaded', () => {
+    multipleInputJs();
+  });
+}

src/quill.js

@@ -14683,7 +14683,7 @@
 
         SnowTooltip.TEMPLATE = [
           '<a class="ql-preview" target="_blank" href="about:blank"></a>',
-          '<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">',
+          '<input type="text" data-formula="" data-link="" data-video="">',
           '<a class="ql-action"></a>',
           '<a class="ql-remove"></a>',
         ].join('');

src/quillValueToInput.ts

@@ -2,6 +2,7 @@ const quillValueToInput = (quillElementId: string): undefined => {
   const inputElement: HTMLInputElement = document.querySelector(
     `#${quillElementId}-input`,
   );
+
   if (!inputElement) {
     return;
   }

tests/test_book.py

@@ -1,5 +1,5 @@
 # flake8: noqa F501
-from flask import current_app as Response
+from flask import current_app as Response, url_for
 from flask.testing import FlaskClient, FlaskCliRunner
 
 from app import models as m, db
@@ -1017,7 +1017,7 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
     comment_text = "Some comment text"
 
     response: Response = client.post(
-        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/preview/create_comment",
+        f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/create_comment",
         data=dict(
             section_id=section_in_subcollection.id,
             text=comment_text,

tests/test_tag.py

@@ -0,0 +1,198 @@
+from flask import current_app as Response
+from flask.testing import FlaskClient
+
+from app import models as m, db
+from tests.utils import login, create_test_book
+
+
+def test_create_tags_on_book_create_and_edit(client: FlaskClient):
+    login(client)
+
+    BOOK_NAME = "Test Book"
+    tags = "tag1,tag2,tag3"
+
+    response: Response = client.post(
+        "/book/create",
+        data=dict(label=BOOK_NAME, tags=tags),
+        follow_redirects=True,
+    )
+
+    assert response.status_code == 200
+    assert b"Book added!" in response.data
+
+    book = m.Book.query.filter_by(label=BOOK_NAME).first()
+    assert book.tags
+
+    splitted_tags = [tag.title() for tag in tags.split(",")]
+    assert len(book.tags) == 3
+    for tag in book.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 3
+
+    tags = "tag1,tag2,tag3"
+
+    client.post(
+        f"/book/{book.id}/edit",
+        data=dict(book_id=book.id, label=book.label, tags=tags),
+        follow_redirects=True,
+    )
+
+    book: m.Book = m.Book.query.first()
+
+    splitted_tags = [tag.title() for tag in tags.split(",")]
+    assert len(book.tags) == 3
+    for tag in book.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 3
+
+    tags = "tag1,tag2,tag4"
+
+    client.post(
+        f"/book/{book.id}/edit",
+        data=dict(book_id=book.id, label=book.label, tags=tags),
+        follow_redirects=True,
+    )
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 4
+    book: m.Book = m.Book.query.first()
+    assert len(book.tags) == 3
+
+    tags = "1" * 33
+
+    client.post(
+        f"/book/{book.id}/edit",
+        data=dict(book_id=book.id, label=book.label, tags=tags),
+        follow_redirects=True,
+    )
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 4
+    book: m.Book = m.Book.query.first()
+    assert len(book.tags) == 0
+
+
+def test_create_tags_on_comment_create_and_edit(client: FlaskClient):
+    _, user = login(client)
+    create_test_book(user.id, 1)
+
+    book = db.session.get(m.Book, 1)
+    collection = db.session.get(m.Collection, 1)
+    section = db.session.get(m.Section, 1)
+    interpretation = db.session.get(m.Interpretation, 1)
+
+    tags = "[tag1] [tag2] [tag3]"
+    response: Response = client.post(
+        f"/book/{book.id}/{collection.id}/{section.id}/{interpretation.id}/create_comment",
+        data=dict(
+            section_id=section.id,
+            text="some text" + tags,
+            interpretation_id=interpretation.id,
+        ),
+        follow_redirects=True,
+    )
+    assert response.status_code == 200
+
+    comment: m.Comment = m.Comment.query.filter_by(text="some text" + tags).first()
+    assert comment
+    assert comment.tags
+
+    splitted_tags = [
+        tag.lower().replace("[", "").replace("]", "") for tag in tags.split()
+    ]
+    assert len(comment.tags) == 3
+    for tag in comment.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 3
+
+    tags = "[tag1] [tag5] [tag7]"
+    response: Response = client.post(
+        f"/book/{book.id}/{collection.id}/{section.id}/{interpretation.id}/comment_edit",
+        data=dict(text="some text" + tags, comment_id=comment.id),
+        follow_redirects=True,
+    )
+    assert response.status_code == 200
+
+    comment: m.Comment = m.Comment.query.filter_by(text="some text" + tags).first()
+    assert comment
+    assert comment.tags
+
+    splitted_tags = [
+        tag.lower().replace("[", "").replace("]", "") for tag in tags.split()
+    ]
+    assert len(comment.tags) == 3
+    for tag in comment.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 5
+
+
+def test_create_tags_on_interpretation_create_and_edit(client: FlaskClient):
+    _, user = login(client)
+    create_test_book(user.id, 1)
+
+    book = db.session.get(m.Book, 1)
+    collection = db.session.get(m.Collection, 1)
+    section = db.session.get(m.Section, 1)
+
+    tags = "[tag1] [tag2] [tag3]"
+    text_1 = "Test Interpretation #1 Text"
+
+    response: Response = client.post(
+        f"/book/{book.id}/{collection.id}/{section.id}/create_interpretation",
+        data=dict(section_id=section.id, text=text_1 + tags),
+        follow_redirects=True,
+    )
+
+    assert response.status_code == 200
+    interpretation: m.Interpretation = m.Interpretation.query.filter_by(
+        text=text_1 + tags, section_id=section.id
+    ).first()
+    assert interpretation
+    assert interpretation.tags
+
+    splitted_tags = [
+        tag.lower().replace("[", "").replace("]", "") for tag in tags.split()
+    ]
+    assert len(interpretation.tags) == 3
+    for tag in interpretation.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 3
+
+    tags = "[tag-4] [tag5] [tag3]"
+    response: Response = client.post(
+        f"/book/{book.id}/{collection.id}/{section.id}/{interpretation.id}/edit_interpretation",
+        data=dict(interpretation_id=interpretation.id, text=text_1 + tags),
+        follow_redirects=True,
+    )
+
+    assert response.status_code == 200
+    interpretation: m.Interpretation = m.Interpretation.query.filter_by(
+        text=text_1 + tags, section_id=section.id
+    ).first()
+    assert interpretation
+
+    splitted_tags = [
+        tag.lower().replace("[", "").replace("]", "") for tag in tags.split()
+    ]
+    assert len(interpretation.tags) == 3
+    for tag in interpretation.tags:
+        tag: m.Tag
+        assert tag.name in splitted_tags
+
+    tags_from_db: m.Tag = m.Tag.query.all()
+    assert len(tags_from_db) == 5