RTEBubbleMenu

import { useEffect, useRef, useState } from "react";
import { RTEBubbleMenu, RTETool, RTEToolSelect, RTEToolbarDivider } from "@nexera-ui/react";
import {
  LuBold,
  LuCode,
  LuHighlighter,
  LuItalic,
  LuLink,
  LuStrikethrough,
  LuUnderline,
} from "react-icons/lu";

const BLOCKS = [
  { id: "paragraph", label: "Paragraph" },
  { id: "h2", label: "Heading 2" },
  { id: "h3", label: "Heading 3" },
];

function Tools() {
  return (
    <>
      <RTEToolSelect aria-label="Block type" options={BLOCKS} defaultValue="paragraph" />
      <RTEToolbarDivider />
      <RTETool
        aria-label="Bold"
        icon={<LuBold />}
        defaultSelected
        shortcut="Ctrl+B"
        aria-keyshortcuts="Control+B"
      />
      <RTETool
        aria-label="Italic"
        icon={<LuItalic />}
        shortcut="Ctrl+I"
        aria-keyshortcuts="Control+I"
      />
      <RTETool
        aria-label="Underline"
        icon={<LuUnderline />}
        shortcut="Ctrl+U"
        aria-keyshortcuts="Control+U"
      />
      <RTETool aria-label="Strikethrough" icon={<LuStrikethrough />} />
      <RTETool aria-label="Inline code" icon={<LuCode />} />
      <RTETool aria-label="Highlight" icon={<LuHighlighter />} />
      <RTEToolbarDivider />
      <RTETool
        kind="action"
        aria-label="Link"
        icon={<LuLink />}
        shortcut="Ctrl+K"
        aria-keyshortcuts="Control+K"
      />
    </>
  );
}

export function OnSelection() {
  const editor = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const [focusOnOpen, setFocusOnOpen] = useState(false);
  useEffect(() => {
    const onSelectionChange = () => {
      const selection = document.getSelection();
      const inside =
        selection !== null &&
        !selection.isCollapsed &&
        editor.current?.contains(selection.anchorNode) === true;
      if (inside) {
        setFocusOnOpen(false);
        setOpen(true);
      }
    };
    document.addEventListener("selectionchange", onSelectionChange);
    return () => {
      document.removeEventListener("selectionchange", onSelectionChange);
    };
  }, []);
  return (
    <div className="mt-20 flex max-w-prose flex-col gap-2">
      <span id="bubble-editor-label" className="text-component-label text-primary">
        Announcement
      </span>
      <div
        ref={editor}
        role="textbox"
        aria-multiline="true"
        aria-labelledby="bubble-editor-label"
        aria-keyshortcuts="Alt+F10"
        contentEditable
        suppressContentEditableWarning
        tabIndex={0}
        className="min-h-24 rounded-md border border-solid border-input-border bg-input p-4 text-body-large text-primary outline-hidden focus-visible:focus-ring"
        onKeyDown={(event) => {
          if (event.altKey && event.key === "F10") {
            event.preventDefault();
            setFocusOnOpen(true);
            setOpen(true);
          }
        }}
      >
        Open enrollment starts on 1 November. Select some of this text to format it.
      </div>
      <RTEBubbleMenu
        aria-label="Text formatting"
        triggerRef={editor}
        getTargetRect={() => {
          const selection = document.getSelection();
          return selection && selection.rangeCount > 0
            ? selection.getRangeAt(0).getBoundingClientRect()
            : null;
        }}
        isOpen={open}
        onOpenChange={setOpen}
        shouldFocusOnOpen={focusOnOpen}
      >
        <Tools />
      </RTEBubbleMenu>
    </div>
  );
}

export function InEditor() {
  return <RichTextEditorDemo />;
}