Selection Toolbar

"use client";

import type {
  ClipboardEvent,
  DragEvent,
  FormEvent,
  KeyboardEvent,
} from "react";
import { useRef } from "react";
import { SelectionToolbar, SelectionToolbarPresets } from "@/components/ui/r-selection-toolbar";

const previewText = "Select any phrase here to reveal the toolbar, then try bold, underline, link, or copy on the highlight.";

function isBlockedMutationInput(inputType: string) {
  return (
    inputType.startsWith("insert") ||
    inputType.startsWith("delete") ||
    inputType.startsWith("history")
  );
}

export function SelectionToolbarPreview() {
  const editorRef = useRef<HTMLDivElement | null>(null);

  const handleBeforeInput = (event: FormEvent<HTMLDivElement>) => {
    const inputType = (event.nativeEvent as InputEvent).inputType ?? "";

    if (isBlockedMutationInput(inputType)) {
      event.preventDefault();
    }
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (
      event.key === "Backspace" ||
      event.key === "Delete" ||
      event.key === "Enter" ||
      (event.key.length === 1 &&
        !event.altKey &&
        !event.ctrlKey &&
        !event.metaKey)
    ) {
      event.preventDefault();
    }
  };

  const handleClipboard = (event: ClipboardEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  return (
    <>
      <SelectionToolbar
        containerRef={editorRef}
        items={[
          { command: "bold", id: "bold", label: "Bold" },
          { command: "italic", id: "italic", label: "Italic" },
          { command: "underline", id: "underline", label: "Underline" },
          SelectionToolbarPresets.strikeThrough,
          SelectionToolbarPresets.link,
          SelectionToolbarPresets.copy,
        ]}
      />

      <div className="mx-auto w-full max-w-xl text-center">
        <div
          aria-label="Editable preview"
          className="text-balance text-[15px] text-foreground leading-7 outline-none sm:text-[16px]"
          contentEditable
          id="selection-toolbar-editor"
          onBeforeInput={handleBeforeInput}
          onCut={handleClipboard}
          onDrop={handleDrop}
          onKeyDown={handleKeyDown}
          onPaste={handleClipboard}
          ref={editorRef}
          spellCheck={false}
          suppressContentEditableWarning
        >
          {previewText}
        </div>
      </div>
    </>
  );
}