Configuring the Hovering Toolbar

The hovering toolbar's appearance and position can be customized through configuration. Its behavior depends on the follow property setting.

Basic Configuration

The hovering toolbar can be configured through the hoveringToolbar property with several options:

interface HoveringToolbarConfig {
  // Add content before the toolbar buttons
  prefix?: React.ReactNode;

  // Configure toolbar buttons based on selection state
  list?: (params: {
    isCollapsed?: boolean;
    isFocus?: boolean;
    selection: BaseSelection;
  }) => Array<TextFormat | React.FC>;

  // Add content after the toolbar buttons
  subfix?: React.ReactNode;

  // Whether the toolbar should be fixed in position
  fixed?: boolean;

  // Controls toolbar positioning behavior:
  // - "selection": Appears when text is selected
  // - "container": Appears above the selected block
  // - "page": Appears at the top of the editor when a block is selected
  follow?: "selection" | "container" | "page";

  // Size of toolbar icons
  iconSize?: number;
}

const hoveringToolbar: ThemeConfigProps["hoveringToolbar"] = {
  list({ isCollapsed, selection }) {
    if (isCollapsed) {
      return [];
    }
    return [
      TextFormat.FONT_FAMILY, // Font family selector
      TextFormat.FONT_SIZE, // Font size selector
      TextFormat.BOLD, // Bold text
      TextFormat.ITALIC, // Italic text
      TextFormat.UNDERLINE, // Underline text
      TextFormat.STRIKETHROUGH, // Strikethrough text
      TextFormat.TEXT_COLOR, // Text color picker
      TextFormat.BACKGROUND_COLOR, // Background color picker
      TextFormat.LINK, // Add/edit link
      () => <EmojiPlugin />, // Custom emoji picker
      TextFormat.MERGETAG, // Merge tag insertion
      TextFormat.REMOVE_FORMAT, // Remove all formatting
    ];
  },
  follow: "selection", // Toolbar follows text selection
};

// Apply the configuration
const config = Retro.useCreateConfig({
  // ... other config options
  hoveringToolbar: hoveringToolbar,
});

Toolbar Positioning

The follow property determines how the toolbar is positioned:

• "selection": The toolbar appears near the selected text when users make a text selection
• "container": The toolbar appears above the selected block when a block is selected
• "page": The toolbar appears at the top of the editor when a block is selected

Adding Custom Tools

You can add custom tools to the hovering toolbar. Here's an example of implementing an emoji picker:

import data from "@emoji-mart/data";
import Picker from "@emoji-mart/react";
import { Popover, Tooltip } from "@arco-design/web-react";
import React, { useRef } from "react";
import { Transforms } from "slate";
import { useSlate } from "slate-react";
import { classnames, t } from "easy-email-pro-core";

export function EmojiPlugin(props: any) {
  const editor = useSlate();
  const ref = useRef<HTMLElement | null>(null);

  const onEmojiSelect = (val: {
    id: string;
    name: string;
    native: string;
    unified: string;
    keywords: string[];
    shortcodes: string;
  }) => {
    Transforms.insertText(editor, val.native);
  };

  return (
    <Popover
      trigger="click"
      triggerProps={{
        style: {
          maxWidth: 500,
        },
        popupStyle: { padding: "0px" },
      }}
      getPopupContainer={(node) => {
        return Array.from(document.querySelectorAll(".RichTextBar")).find(
          (item) => item.contains(node)
        ) as HTMLElement;
      }}
      content={
        <div style={{ height: 300 }}>
          <Picker
            previewPosition={"none"}
            data={data}
            {...props}
            onEmojiSelect={onEmojiSelect}
          />
        </div>
      }
    >
      <Tooltip content={t("Emoji")}>
        <span ref={ref} className={classnames("formatButton")}>
          <span
            className={classnames("iconfont")}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: "16px",
              textAlign: "center",
              fontSize: "16px",
              borderRadius: "2px",
              width: "16px",
              boxSizing: "border-box",
              fontWeight: "500",
              borderWidth: "1px",
              borderStyle: "solid",
              overflow: "hidden",
            }}
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path>
              <path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"></path>
            </svg>
          </span>
        </span>
      </Tooltip>
    </Popover>
  );
}

Available Text Formatting Options

The TextFormat enum provides several built-in formatting options:

• FONT_FAMILY: Change text font family
• FONT_SIZE: Adjust text size
• BOLD: Toggle bold text
• ITALIC: Toggle italic text
• UNDERLINE: Toggle underline
• STRIKETHROUGH: Toggle strikethrough
• TEXT_COLOR: Change text color
• BACKGROUND_COLOR: Change text background color
• LINK: Add/edit hyperlinks
• MERGETAG: Insert merge tags
• REMOVE_FORMAT: Remove all formatting

Notes

• Custom tools can be added using functions that return React components
• The toolbar position is automatically calculated based on the text selection

For more examples and advanced usage, check out our demo application.