From cee3e6d28b1cdc444432a23b65943c27d68f8e64 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Mon, 8 Aug 2022 09:56:30 +0200
Subject: [PATCH] Add target styles for block toolbar

---
 client/src/components/Draftail/Draftail.scss | 73 ++++++++++++++++++++
 client/src/components/Draftail/index.js      | 16 ++++-
 2 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss
index c7b2afbc2e..8afee18b8c 100644
--- a/client/src/components/Draftail/Draftail.scss
+++ b/client/src/components/Draftail/Draftail.scss
@@ -73,6 +73,10 @@ $draftail-editor-font-family: $font-sans;
   }
 }
 
+.Draftail-Editor {
+  --draftail-offset-inline-start: 0;
+}
+
 .Draftail-Editor__wrapper {
   // Ensure elements within the editor are positioned according to this container.
   position: relative;
@@ -118,8 +122,77 @@ $draftail-editor-font-family: $font-sans;
   }
 }
 
+.Draftail-BlockToolbar {
+  margin-inline-start: calc(-1 * theme('spacing.5'));
+
+  @include media-breakpoint-up(sm) {
+    margin-inline-start: calc(-1 * theme('spacing.6'));
+  }
+}
+
+.Draftail-BlockToolbar__trigger {
+  color: theme('colors.secondary.DEFAULT');
+  width: theme('spacing.4');
+  height: theme('spacing.4');
+  margin-inline-end: theme('spacing.1');
+
+  @include media-breakpoint-up(sm) {
+    width: theme('spacing.5');
+    height: theme('spacing.5');
+  }
+
+  // Hide the trigger unless the editor is hovered, focused, or an element within it is focused.
+  .Draftail-Editor:not(:hover, .Draftail-Editor--focus, :focus-within) & {
+    // Hide even if the conditions to display it are met.
+    // stylelint-disable-next-line declaration-no-important
+    visibility: hidden !important;
+  }
+
+  .icon {
+    width: theme('spacing.3');
+    height: theme('spacing.3');
+  }
+}
+
+.Draftail-ComboBox [role='combobox'] {
+  padding: theme('spacing.4');
+}
+
+.Draftail-ComboBox [aria-autocomplete='list'] {
+  border-radius: theme('borderRadius.DEFAULT');
+  border: 1px solid $color-input-border;
+}
+
+.Draftail-ComboBox__menu {
+  padding: 0 theme('spacing.4');
+}
+
+.Draftail-ComboBox__optgroup-label {
+  @apply w-label-3;
+  background-color: theme('colors.grey.50');
+}
+
+.Draftail-ComboBox__option,
+.Draftail-ComboBox__status {
+  color: theme('colors.primary.DEFAULT');
+  padding: theme('spacing.3') 0;
+  border-width: 1px;
+}
+
+.Draftail-ComboBox__option[aria-selected='true'] {
+  color: theme('colors.secondary.DEFAULT');
+  border-radius: theme('borderRadius.sm');
+  background: transparent;
+}
+
+.Draftail-ComboBox__option-icon {
+  color: inherit;
+  margin: 0 theme('spacing.3');
+}
+
 .Draftail-ComboBox__option-text {
   @apply w-label-3;
+  color: inherit;
 }
 
 .Draftail-ToolbarGroup::before {
diff --git a/client/src/components/Draftail/index.js b/client/src/components/Draftail/index.js
index afb6024e58..d28078ea68 100644
--- a/client/src/components/Draftail/index.js
+++ b/client/src/components/Draftail/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {
   DraftailEditor,
+  BlockToolbar,
   InlineToolbar,
   MetaToolbar,
   CommandPalette,
@@ -35,6 +36,7 @@ export { default as EmbedBlock } from './blocks/EmbedBlock';
 // 1024x1024 SVG path rendering of the "↵" character, that renders badly in MS Edge.
 const BR_ICON =
   'M.436 633.471l296.897-296.898v241.823h616.586V94.117h109.517v593.796H297.333v242.456z';
+const ADD_ICON = <Icon name="plus" />;
 
 /**
  * Registry for client-side code of Draftail plugins.
@@ -141,7 +143,19 @@ const initEditor = (selector, originalOptions, currentScript) => {
         description: gettext('Line break'),
         icon: BR_ICON,
       },
-      topToolbar: InlineToolbar,
+      topToolbar: (props) => (
+        <>
+          <BlockToolbar
+            {...props}
+            triggerIcon={ADD_ICON}
+            triggerLabel={gettext('Insert a block')}
+            comboLabel={gettext('Search blocks')}
+            comboPlaceholder={gettext('Search blocks')}
+            noResultsText={gettext('No results')}
+          />
+          <InlineToolbar {...props} />
+        </>
+      ),
       bottomToolbar: MetaToolbar,
       commandPalette: (props) => (
         <CommandPalette {...props} noResultsText={gettext('No results')} />