rich text svc desc

hub/hub/settings.py

@@ -31,6 +31,9 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    # 3rd party
+    "django_prose_editor",
+    # local
     "services",
 ]
 if DEBUG:

hub/services/models.py

@@ -2,6 +2,8 @@ from django.db import models
 from django.core.exceptions import ValidationError
 from django.utils.text import slugify
 
+from django_prose_editor.fields import ProseEditorField
+
 
 def validate_image_size(value):
     filesize = value.size
@@ -44,7 +46,7 @@ class Category(models.Model):
 
 class CloudProvider(models.Model):
     name = models.CharField(max_length=100)
-    description = models.TextField(blank=True)
+    description = ProseEditorField(blank=True)
     logo = models.ImageField(
         upload_to="cloud_provider_logos/",
         validators=[validate_image_size],
@@ -78,13 +80,13 @@ class ServiceLevel(models.Model):
 
 class Service(models.Model):
     name = models.CharField(max_length=200)
-    description = models.TextField()
+    description = ProseEditorField()
     cloud_provider = models.ForeignKey(CloudProvider, on_delete=models.CASCADE)
     service_level = models.ForeignKey(ServiceLevel, on_delete=models.CASCADE)
     categories = models.ManyToManyField(Category, related_name="services")
     countries = models.ManyToManyField(Country)
     price = models.DecimalField(max_digits=10, decimal_places=2)
-    features = models.TextField()
+    features = ProseEditorField()
     logo = models.ImageField(
         upload_to="service_logos/",
         validators=[validate_image_size],

hub/services/templates/services/base.html

@@ -21,6 +21,23 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+    {% block extra_css %}
+    <style>
+        .rich-text-content {
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+        .rich-text-content img {
+            max-width: 100%;
+            height: auto;
+        }
+        .description-preview img {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+    {% endblock %}
 </body>
 
 </html>

hub/services/templates/services/service_detail.html

@@ -27,10 +27,10 @@
         <div class="row mb-4">
             <div class="col-md-8">
                 <h5>Description</h5>
-                <p>{{ service.description }}</p>
+                <p>{{ service.description|safe }}</p>
                 
                 <h5>Features</h5>
-                <p>{{ service.features|linebreaks }}</p>
+                <p>{{ service.features|safe }}</p>
             </div>
             
             <div class="col-md-4">
@@ -55,4 +55,4 @@
         <a href="{% url 'services:service_list' %}" class="btn btn-secondary">Back to Services</a>
     </div>
 </div>
-{% endblock %}
+{% endblock %}

hub/services/templates/services/service_list.html

@@ -92,7 +92,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <p class="card-text">{{ service.description|truncatewords:30 }}</p>
+                            <p class="card-text">{{ service.description|safe|truncatewords:30 }}</p>
                             <div class="mb-2">
                                 {% for category in service.categories.all %}
                                     <span class="badge bg-secondary me-1">{{ category.full_path }}</span>