Add custom font selection to rich text

[MAILPOET-2965]

assets/css/src/components-form-editor/_block-editor.scss

@@ -74,3 +74,16 @@ h2 {
     line-height: 1.2;
   }
 }
+
+.mailpoet_toolbar_item {
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid #b5bcc2;
+  border-top: 1px solid #b5bcc2;
+  display: flex;
+  padding-left: $grid-gap / 2;
+
+  .mailpoet-font-family-select {
+    width: $grid-column-small;
+  }
+}

assets/css/src/mailpoet-form-editor.scss

@@ -4,6 +4,7 @@
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/form-editor';
+@import 'settings/grid';
 
 // Tools
 // Default mixins and functions. Still not producing any CSS.

assets/js/src/form_editor/components/font_family_settings.tsx

@@ -21,12 +21,14 @@ type Props = {
   onChange: (value: string|undefined) => any,
   value?: string,
   name: string,
+  hideLabelFromVision?: boolean
 }
 
 const FontFamilySettings = ({
   onChange,
   value,
   name,
+  hideLabelFromVision = false,
 }: Props) => {
   const customFonts = useSelect(
     (select) => select('mailpoet-form-editor').getAllCustomFonts(),
@@ -92,6 +94,7 @@ const FontFamilySettings = ({
       value={selectedValue}
       label={name}
       className="mailpoet-font-family-select"
+      hideLabelFromVision={hideLabelFromVision}
     />
   );
 };

assets/js/src/form_editor/rich_text/font_selection_format.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { applyFormat } from '@wordpress/rich-text';
+import MailPoet from 'mailpoet';
+import { Fill } from '@wordpress/components';
+
+import FontFamilySettings from '../components/font_family_settings';
+
+const name = 'mailpoet-form/font-selection';
+const title = 'Font Selection';
+
+const settings = {
+  name,
+  title,
+  tagName: 'span',
+  className: 'has-font',
+  attributes: {
+    style: 'style',
+    font: 'data-font',
+  },
+  edit({
+    value,
+    onChange,
+    activeAttributes,
+  }) {
+    return (
+      <>
+        <Fill name="BlockFormatControls">
+          <div className="mailpoet_toolbar_item">
+            <FontFamilySettings
+              value={activeAttributes.font}
+              onChange={(font) => {
+                onChange(
+                  applyFormat(value, {
+                    type: 'mailpoet-form/font-selection',
+                    attributes: {
+                      style: `font-family: ${font}`,
+                      font,
+                    },
+                  })
+                );
+              }}
+              name={MailPoet.I18n.t('formSettingsStylesFontFamily')}
+              hideLabelFromVision
+            />
+          </div>
+        </Fill>
+      </>
+    );
+  },
+};
+
+export { name, settings };

assets/js/src/form_editor/rich_text/init.ts

@@ -1,5 +1,7 @@
 import '@wordpress/format-library';
+import { registerFormatType } from '@wordpress/rich-text';
+import * as FontSelectionFormat from './font_selection_format';
 
 export default function () {
-
+  registerFormatType(FontSelectionFormat.name, FontSelectionFormat.settings);
 }