Adds template variables to RichTextEditor (#1105)

package.json

@@ -18,6 +18,7 @@
     "@tiptap/extension-text": "^2.0.3",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
+    "@tiptap/suggestion": "^2.1.13",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^2",
     "@typescript-eslint/parser": "^2",
@@ -29,6 +30,7 @@
     "react-toggle": "4.1.1",
     "react-transition-group": "^4.3.0",
     "sanitize-html": "^2.11.0",
+    "tippy.js": "^6.3.7",
     "uuid": "^7.0.2"
   },
   "scripts": {

src/RichTextEditor/RichTextEditor.jsx

@@ -24,6 +24,7 @@ import Text from '@tiptap/extension-text';
 import sanitizeHtml from 'sanitize-html';
 
 import { LoadingSkeleton } from 'src/LoadingSkeleton';
+import { TemplateVariable, buildSuggestions } from './TemplateVariable';
 
 import RichTextEditorMenuBar from './RichTextEditorMenuBar';
 
@@ -55,6 +56,7 @@ const RichTextEditor = ({
   isOneLine,
   onChange,
   placeholder,
+  templateVariables,
 }) => {
   const oneLineExtension = isOneLine ? [OneLineLimit] : [];
 
@@ -73,6 +75,14 @@ const RichTextEditor = ({
     }),
   ];
 
+  const templateVariablesExtension = templateVariables.length > 0 ?
+    [TemplateVariable.configure({
+      HTMLAttributes: {
+        class: 'RichTextEditor__TemplateVariable',
+      },
+      suggestion: buildSuggestions(templateVariables),
+    })] : [];
+
   const optionalExtensions = [
     {
       name: RichTextEditorActions.BOLD,
@@ -100,6 +110,7 @@ const RichTextEditor = ({
   const extensions = [
     ...oneLineExtension,
     ...requiredExtensions,
+    ...templateVariablesExtension,
     ...optionalExtensions,
   ];
 
@@ -135,15 +146,18 @@ const RichTextEditor = ({
         className="RichTextEditor"
         id={id}
       >
-        <RichTextEditorMenuBar
-          availableActions={availableActions}
-          editor={editor}
-        />
+        {availableActions.length > 0 && (
+          <RichTextEditorMenuBar
+            availableActions={availableActions}
+            editor={editor}
+          />
+        )}
         <EditorContent
           className={classNames(
             className,
             'RichTextEditor__field',
             { 'RichTextEditor__field--error': hasErrors },
+            { 'RichTextEditor__field--without-menu-bar': availableActions.length === 0 },
           )}
           editor={editor}
           role="textbox"
@@ -200,6 +214,7 @@ RichTextEditor.propTypes = {
   initialValue: propTypes.string,
   isOneLine: propTypes.bool,
   placeholder: propTypes.string,
+  templateVariables: propTypes.arrayOf(propTypes.string),
   /**
     Callback function to call with sanitized HTML when editor state changes
   */
@@ -217,6 +232,7 @@ RichTextEditor.defaultProps = {
   initialValue: undefined,
   isOneLine: false,
   placeholder: undefined,
+  templateVariables: [],
 };
 
 export default RichTextEditor;

src/RichTextEditor/RichTextEditor.scss

@@ -52,3 +52,7 @@
     pointer-events: none;
   }
 }
+
+.RichTextEditor__field--without-menu-bar .ProseMirror {
+  border-radius: $ux-border-radius;
+}

src/RichTextEditor/RichTextEditor.stories.jsx

@@ -53,6 +53,15 @@ export const OneLine = () => (
   />
 );
 
+export const TemplateVariables = () => (
+  <RichTextEditor
+    id="text-editor"
+    placeholder="Enter / to view available variables"
+    templateVariables={['howdy', 'ho']}
+    onChange={() => null}
+  />
+);
+
 export const Error = () => (
   <RichTextEditor
     hasErrors

src/RichTextEditor/TemplateVariable.scss

@@ -0,0 +1,29 @@
+@import '../../scss/theme';
+
+.RichTextEditor__TemplateVariables__Items {
+  border: 1px solid $synth-div-stroke-neutral;
+  background-color: $ux-white;
+  border-radius: $ux-border-radius;
+  padding: $ux-spacing-20 0;
+}
+
+.RichTextEditor__TemplateVariables__Item {
+  @include synth-font-type-30;
+  background: $ux-white;
+  text-align: left;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  color: $ux-gray-900;
+  padding: $ux-spacing-10 $ux-spacing-40;
+}
+
+.RichTextEditor__TemplateVariables__Item:active, 
+.RichTextEditor__TemplateVariables__Item:hover,
+.RichTextEditor__TemplateVariables__Item:focus,
+.RichTextEditor__TemplateVariables__Item--selected {
+  &:not(.RichTextEditor__TemplateVariables__Item--no-results) {
+    background-color: $synth-hover-state;
+    text-decoration: none;
+  }
+}