From 2f6b66112c33c5e25c80564aecf5e38210195110 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 6 Apr 2020 13:31:40 +0200
Subject: [PATCH] Add additional editor plugins for instrument WYSIWYG editor

---
 client/src/pages/instrument.vue | 31 +++++++++----
 server/books/blocks.py          |  4 +-
 server/core/wagtail_hooks.py    | 80 +++++++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 11 deletions(-)
 create mode 100644 server/core/wagtail_hooks.py

diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index be5f7133..0f15022c 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -2,15 +2,15 @@
   <div class="instrument">
     <h1 class="instrument__title">{{instrument.title}}</h1>
 
-      <content-component v-for="component in instrument.contents"
-                         :key="component.id"
-                         :component="component"
-                         :root="instrument.slug"
-                         :parent="instrument"
-                         :bookmarks="instrument.bookmarks"
-                         :notes="instrument.notes"
-      >
-      </content-component>
+    <content-component v-for="component in instrument.contents"
+                       :key="component.id"
+                       :component="component"
+                       :root="instrument.slug"
+                       :parent="instrument"
+                       :bookmarks="instrument.bookmarks"
+                       :notes="instrument.notes"
+    >
+    </content-component>
 
   </div>
 </template>
@@ -59,19 +59,32 @@
       & p {
         margin-bottom: 40px;
       }
+
       & ul {
         padding-left: 25px;
       }
+
       & p + ul {
         margin-top: -30px;
       }
+
       & li {
         list-style: disc;
         line-height: 1.5;
       }
+
       & b {
         font-weight: 600;
+      }
+
+      .brand {
         color: $color-brand;
+        font-weight: 600;
+      }
+
+      .secondary {
+        color: $color-accent-2;
+        font-weight: 600;
       }
     }
   }
diff --git a/server/books/blocks.py b/server/books/blocks.py
index 58f793a2..dd9a118e 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -4,8 +4,8 @@ from wagtail.snippets.blocks import SnippetChooserBlock
 from assignments.models import Assignment
 from surveys.models import Survey
 
-DEFAULT_RICH_TEXT_FEATURES = ['ul']
-INSTRUMENTS_RICH_TEXT_FEATURES = ['bold', 'ul']
+DEFAULT_RICH_TEXT_FEATURES = ['ul', ]
+INSTRUMENTS_RICH_TEXT_FEATURES = ['bold', 'ul', 'brand', 'secondary']
 
 
 # link_block
diff --git a/server/core/wagtail_hooks.py b/server/core/wagtail_hooks.py
new file mode 100644
index 00000000..3acfaab7
--- /dev/null
+++ b/server/core/wagtail_hooks.py
@@ -0,0 +1,80 @@
+import wagtail.admin.rich_text.editors.draftail.features as draftail_features
+from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
+from wagtail.core import hooks
+
+# 1. Use the register_rich_text_features hook.
+@hooks.register('register_rich_text_features')
+def register_brand_feature(features):
+    """
+    Registering the feature, which uses the `BRAND` Draft.js inline style type,
+    and is stored as HTML with a `<span class="brand">` tag.
+    """
+    feature_name = 'brand'
+    type_ = 'BRAND'
+
+    # 2. Configure how Draftail handles the feature in its toolbar.
+    control = {
+        'type': type_,
+        'label': 'Grün',
+        'description': 'Grün',
+        'style': {
+            'color': '#17A887',
+            'font-weight': '600'
+        },
+    }
+
+    # 3. Call register_editor_plugin to register the configuration for Draftail.
+    features.register_editor_plugin(
+        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
+    )
+
+    # 4.configure the content transform from the DB to the editor and back.
+    db_conversion = {
+        'from_database_format': {'span[class="brand"]': InlineStyleElementHandler(type_)},
+        'to_database_format': {'style_map': {type_: 'span class="brand""'}},
+    }
+
+    # 5. Call register_converter_rule to register the content transformation conversion.
+    features.register_converter_rule('contentstate', feature_name, db_conversion)
+
+    # 6. (optional) Add the feature to the default features list to make it available
+    # on rich text fields that do not specify an explicit 'features' list
+    features.default_features.append(feature_name)
+
+@hooks.register('register_rich_text_features')
+def register_secondary_feature(features):
+    """
+    Registering the feature, which uses the `SECONDARY` Draft.js inline style type,
+    and is stored as HTML with a `<span class="secondary">` tag.
+    """
+    feature_name = 'secondary'
+    type_ = 'SECONDARY'
+
+    # 2. Configure how Draftail handles the feature in its toolbar.
+    control = {
+        'type': type_,
+        'label': 'Blau',
+        'description': 'Blau',
+        'style': {
+            'color': '#078CC6',
+            'font-weight': '600'
+        },
+    }
+
+    # 3. Call register_editor_plugin to register the configuration for Draftail.
+    features.register_editor_plugin(
+        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
+    )
+
+    # 4.configure the content transform from the DB to the editor and back.
+    db_conversion = {
+        'from_database_format': {'span[class="secondary"]': InlineStyleElementHandler(type_)},
+        'to_database_format': {'style_map': {type_: 'span class="secondary"'}},
+    }
+
+    # 5. Call register_converter_rule to register the content transformation conversion.
+    features.register_converter_rule('contentstate', feature_name, db_conversion)
+
+    # 6. (optional) Add the feature to the default features list to make it available
+    # on rich text fields that do not specify an explicit 'features' list
+    features.default_features.append(feature_name)