[DEV-13254] Implement settings menu for variables with optional fallback

packages/slate-editor/src/components/EditorBlock/getMenuPopperModifiers.ts

@@ -71,6 +71,7 @@ export function getMenuPopperModifiers(
             enabled: true,
             options: {
                 padding: 19,
+                ...modifiers?.arrow,
             },
         } satisfies Partial<ArrowModifier>,
         {

packages/slate-editor/src/components/EditorBlock/index.ts

@@ -1,3 +1,4 @@
 export { CloseButton } from './CloseButton';
 export { EditorBlock } from './EditorBlock';
+export { Menu } from './Menu';
 export { ResizableEditorBlock } from './ResizableEditorBlock';

packages/slate-editor/src/components/Menu/Dropdown.module.scss

@@ -11,6 +11,52 @@
         width: 180px;
     }
 
+    &.light {
+        .DropdownToggle {
+            border-radius: $border-radius-base;
+
+            &[data-headlessui-state="open"] {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            &.enabled,
+            &.enabled:hover {
+                color: $black;
+                background-color: $white;
+            }
+
+            &.enabled .Caret {
+                color: $black;
+            }
+        }
+
+        .DropdownMenu {
+            width: 100%;
+            margin: 0;
+            background-color: $white;
+            border: 1px solid $grey-200;
+            box-shadow: none;
+        }
+
+        .MenuItem {
+            color: $black;
+
+            &.selected,
+            &.active {
+                color: $black;
+
+                &::before {
+                    background-color: $grey-200;
+                }
+            }
+
+            &.active:not(.selected) {
+                color: $black;
+            }
+        }
+    }
+
     &:last-child {
         border-right: none;
     }
@@ -83,6 +129,7 @@
         background-color: $toolbar-dark-theme-bg;
         border-radius: 0 0 $toolbar-dark-theme-border-radius $toolbar-dark-theme-border-radius;
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.11), inset 0 1px 0 $toolbar-dark-theme-border-color;
+        z-index: 2;
     }
 
     .MenuItem {

packages/slate-editor/src/components/Menu/Dropdown.tsx

@@ -21,6 +21,7 @@ export namespace Dropdown {
         disabled?: boolean;
         renderOption?: ComponentType<{ option: Option<Value>; selected: boolean }>;
         value?: Value;
+        variant?: 'dark' | 'light';
         className?: string;
     }
 }
@@ -32,6 +33,7 @@ export function Dropdown<Value extends string = string>({
     disabled = false,
     renderOption = PlainLabel,
     value,
+    variant = 'dark',
     ...props
 }: Dropdown.Props<Value>): ReturnType<FunctionComponent<Dropdown.Props<Value>>> {
     const RenderOption = renderOption;
@@ -50,6 +52,7 @@ export function Dropdown<Value extends string = string>({
         <Listbox
             className={classNames(styles.Dropdown, className, {
                 [styles.enabled]: !disabled,
+                [styles.light]: variant === 'light',
             })}
             as="div"
             {...props}

packages/slate-editor/src/components/Toolbox/Caption.tsx

@@ -5,13 +5,14 @@ import styles from './Toolbox.module.scss';
 
 type Props = {
     children: React.ReactNode;
+    className?: string;
     withFullOpacity?: boolean;
 };
 
-export function Caption({ children, withFullOpacity = false }: Props) {
+export function Caption({ children, className, withFullOpacity = false }: Props) {
     return (
         <span
-            className={classNames(styles.caption, {
+            className={classNames(styles.caption, className, {
                 [styles['caption--full-opacity']]: withFullOpacity,
             })}
         >

packages/slate-editor/src/extensions/mentions/lib/insertMention.ts

@@ -3,7 +3,14 @@ import { Transforms } from 'slate';
 
 import type { MentionElementType } from '../types';
 
-export function insertMention(editor: Editor, element: MentionElementType) {
+export function insertMention(
+    editor: Editor,
+    element: MentionElementType,
+    moveCursorAfterInsert = true,
+) {
     Transforms.insertNodes(editor, element);
-    Transforms.move(editor, { distance: 1, unit: 'offset' });
+
+    if (moveCursorAfterInsert) {
+        Transforms.move(editor, { distance: 1, unit: 'offset' });
+    }
 }

packages/slate-editor/src/extensions/mentions/useMentions.ts

@@ -11,6 +11,7 @@ import type { MentionElementType, Option } from './types';
 interface Parameters<V> {
     createMentionElement: (option: Option<V>) => MentionElementType;
     isEnabled?: (target: Range | null) => boolean;
+    moveCursorAfterInsert?: boolean;
     options: Option<V>[];
     trigger: string;
 }
@@ -28,6 +29,7 @@ export interface Mentions<V> {
 export function useMentions<V>({
     createMentionElement,
     isEnabled = stubTrue,
+    moveCursorAfterInsert = true,
     options,
     trigger,
 }: Parameters<V>): Mentions<V> {
@@ -44,7 +46,7 @@ export function useMentions<V>({
             if (target) {
                 Transforms.select(editor, target);
                 const mentionElement = createMentionElement(option);
-                insertMention(editor, mentionElement);
+                insertMention(editor, mentionElement, moveCursorAfterInsert);
                 setTarget(null);
             }
         },

packages/slate-editor/src/extensions/variables/VariableElement.module.scss

@@ -0,0 +1,29 @@
+@import "styles/helpers";
+@import "styles/variables";
+
+.VariableElement {
+    /*
+     * Selection in Slate 0.50+ does not work as expected if a void block is selectable.
+     * It could lead to an error when Slate is resolving the node which crashes the editor.
+     *
+     * Also, it's not possible to drag a node when it's selectable.
+     *
+     * see: https://github.com/prezly/clubhouse-archive/blob/master/archive/stories/19824.md
+     * see: https://github.com/prezly/clubhouse-archive/blob/master/archive/stories/20456.md
+     */
+    user-select: none;
+
+    padding: 0 2px;
+    background-color: $legacy-alert-info-bg;
+    border: 1px solid $legacy-alert-info-border;
+    border-radius: 3px;
+    color: darken($legacy-alert-info-text, 5%);
+
+    &:hover {
+        color: #004492;
+    }
+
+    &.selected {
+        border-color: #004492;
+    }
+}

packages/slate-editor/src/extensions/variables/VariableElement.tsx

@@ -0,0 +1,61 @@
+import { isVariableNode, type VariableNode } from '@prezly/slate-types';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import type { RenderElementProps } from 'slate-react';
+import { useSelected, useSlateStatic } from 'slate-react';
+
+import type { Variable } from './types';
+import styles from './VariableElement.module.scss';
+import { VariableMenu } from './VariableMenu';
+
+interface Props extends RenderElementProps {
+    element: VariableNode;
+    variables: Variable[];
+}
+
+export function VariableElement({ attributes, children, element, variables }: Props) {
+    const selected = useSelected();
+    const editor = useSlateStatic();
+
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const [container, setContainer] = useState<HTMLSpanElement | null>(null);
+
+    const variable = variables.find(({ key }) => key === element.key);
+    const selectedNodes = Array.from(editor.nodes({ mode: 'lowest' }));
+    const isOnlyVariableSelected =
+        selectedNodes.length === 1 && selectedNodes.every(([node]) => isVariableNode(node));
+
+    useEffect(() => {
+        if (selected) {
+            setMenuOpen(true);
+        }
+    }, [selected]);
+
+    return (
+        <>
+            {selected && isOnlyVariableSelected && container && isMenuOpen && (
+                <VariableMenu
+                    container={container}
+                    element={element}
+                    onClose={() => setMenuOpen(false)}
+                    variables={variables}
+                />
+            )}
+            <span
+                {...attributes}
+                className={classNames(styles.VariableElement, {
+                    [styles.selected]: selected,
+                })}
+                onClick={() => setMenuOpen(true)}
+                ref={(ref) => {
+                    setContainer(ref);
+                    attributes.ref(ref);
+                }}
+            >
+                {variable?.text}
+                {element.fallback && ` or "${element.fallback}"`}
+                {children}
+            </span>
+        </>
+    );
+}

packages/slate-editor/src/extensions/variables/VariableMenu.module.scss

@@ -0,0 +1,22 @@
+@import "styles/helpers";
+@import "styles/variables";
+
+.Dropdown {
+    width: 100% !important;
+}
+
+.Caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .Icon {
+        display: flex;
+        align-items: center;
+
+        > svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}