Display tags in live preview

articles/static/live-preview.js

@@ -69,6 +69,8 @@ function prepareBody() {
         const element = document.querySelector(input.selector);
         body.set(input.to, element[input.property]);
     }
+    const tagIds = Array.from(document.querySelector("#id_tags").selectedOptions).map(option => option.value).join();
+    body.set("tag_ids", tagIds);
     return body;
 }
 

articles/templates/articles/snippets/metadata.html

@@ -2,7 +2,7 @@
     Published on {% include "articles/snippets/datetime.html" %}
     · {{ article.get_read_time }} min read
     {% include "articles/snippets/admin_link.html" %}
-    {% if article.tags.all %}
-    <br><span>{% for tag in article.tags.all %}<a href="{% url "tag" slug=tag.slug %}" class="tag">{{ tag.name }}</a>{% endfor %}</span>
+    {% if tags %}
+    <br><span>{% for tag in tags %}<a href="{% url "tag" slug=tag.slug %}" class="tag">{{ tag.name }}</a>{% endfor %}</span>
     {% endif %}
 </p>

articles/views/api.py

@@ -3,7 +3,7 @@ from django.http import HttpResponse
 from django.shortcuts import render
 from django.views.decorators.http import require_POST
 
-from articles.models import Article
+from articles.models import Article, Tag
 
 
 @login_required
@@ -17,5 +17,6 @@ def render_article(request, article_pk):
     has_code = request.POST.get("has_code")
     if has_code is not None:
         article.has_code = has_code == "true"
-    html = render(request, template, context={"article": article})
+    tags = Tag.objects.filter(pk__in=map(int, request.POST.get("tag_ids").split(",")))
+    html = render(request, template, context={"article": article, "tags": tags})
     return HttpResponse(html)

articles/views/html.py

@@ -136,3 +136,7 @@ class ArticleDetailView(generic.DetailView):
             obj.save(update_fields=["views_count"])
 
         return obj
+
+    def get_context_data(self, **kwargs):
+        kwargs["tags"] = self.object.tags.all()
+        return super().get_context_data(**kwargs)