From 79d9695186f558680dc9bd28d967b39c0b320f39 Mon Sep 17 00:00:00 2001
From: Fabien Quatravaux <fabien.quatravaux@riseup.net>
Date: Mon, 18 Jan 2021 22:17:52 +0100
Subject: [PATCH] feature: WYSIWYG editor for circle and project description

---
 src/styles/base/form.scss                     | 39 +++++++++++++++++++
 .../admin/page-admin-circles-create.pug       |  2 +-
 .../admin/page-admin-projects-create.pug      |  2 +-
 .../partials/circle/page-circle-edit.pug      |  2 +-
 .../partials/project/page-project-edit.pug    |  2 +-
 5 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 9b825a8..bea5db9 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -101,11 +101,50 @@ solid-form {
   }
 }
 
+.input-text-like .ql-editor {
+  min-height: 8em;
+}
+
+.input-text-like .ql-container {
+  background-color: var(--color-input-background);
+  color: var(--color-input-text);
+}
+
+.input-text-like .ql-toolbar {
+  margin-top: 0.8rem;
+}
+
+.input-text-like .ql-snow.ql-toolbar {
+
+  button, .ql-picker-label, .ql-picker-item {
+
+    &:hover, &:focus, &.ql-active, &.ql-selected {
+      color: var(--color-complementary);
+
+      .ql-stroke, .ql-stroke-miter {
+        stroke: var(--color-complementary);
+      }
+
+      .ql-fill {
+        fill: var(--color-complementary);
+      }
+    }
+  }
+}
+
 textarea {
   height: 100px;
   resize: vertical;
 }
 
+[contenteditable="true"] {
+  font-family: inherit;
+  font-size: 100%;
+  text-transform: initial;
+  font-weight: normal;
+  padding: 0;
+}
+
 /* WIDGETS SIB  (let in .content-box to override default styles) */
 
 solid-form-dropdown-autocompletion,
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index f57ad94..92a29bc 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -31,7 +31,7 @@ div.content-box__info.flex
     label-help=''
 
     widget-status='hubl-status'
-    widget-description='solid-form-textarea-label'
+    widget-description='solid-form-richtext-label'
     widget-help='solid-form-hidden-label'
 
     next='circle'
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index 63fbe58..43a48b0 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -31,7 +31,7 @@ div.content-box__info.flex
     class-name='form-label is-light is-half-width input-text-like'
 
     label-description=''
-    widget-description='solid-form-textarea-label'
+    widget-description='solid-form-richtext-label'
     class-description='form-label is-light input-text-like'
     label-help=''
     widget-help='solid-form-hidden-label'
diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug
index aabf51f..29ed27b 100644
--- a/src/views/partials/circle/page-circle-edit.pug
+++ b/src/views/partials/circle/page-circle-edit.pug
@@ -46,7 +46,7 @@ div.content-box__info
       class-help='is-small'
 
       widget-status='hubl-status'
-      widget-description='solid-form-textarea-label'
+      widget-description='solid-form-richtext-label'
       widget-help='solid-form-hidden-label'
       widget-owner='solid-form-dropdown-autocompletion-label'
 
diff --git a/src/views/partials/project/page-project-edit.pug b/src/views/partials/project/page-project-edit.pug
index 41833c5..17225ba 100644
--- a/src/views/partials/project/page-project-edit.pug
+++ b/src/views/partials/project/page-project-edit.pug
@@ -35,7 +35,7 @@ div.content-box__info
       class-customer.name='form-label is-light is-half-width input-text-like'
 
       label-description='',
-      widget-description='solid-form-textarea-label'
+      widget-description='solid-form-richtext-label'
       class-description='form-label is-light input-text-like'
       label-help=''
       widget-help='solid-form-hidden-label'