Delete inline element

[kirtanchandak]

How can I delete a inline element in one backspace?

In the current behavior I have to remove the entire element by each character I give options based on the detection / and select from a dropdown.

import { isKeyHotkey } from "is-hotkey";
import { getColumnDisplayName } from "src/components/utils";
import { Column } from "src/hooks/useChatTable";
import { twMerge } from "tailwind-merge";
import {
  Slate,
  Editable,
  withReact,
  useSelected,
  ReactEditor,
} from "slate-react";
import { createEditor, Transforms, BaseEditor, Range } from "slate";

type SlateNode = {
  text?: string;
  type?: string;
  children?: SlateNode[];
};

const withInlines = (editor: BaseEditor) => {
  const { isInline } = editor;
  editor.isInline = (element: any) =>
    element.type === "status" ? true : isInline(element);
  return editor;
};

interface TextAreaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  columns: Column[];
  val: string;
  setVal: (v: string) => void;
  overrideClasses?: string;
}

export const ColumnsTextArea = ({
  columns,
  val,
  overrideClasses,
  setVal,
  ...props
}: TextAreaProps) => {
  const editor = useMemo(() => withReact(withInlines(createEditor())), []);
  const initialValue = [{ type: "paragraph", children: [{ text: "" }] }];
  const [showCommandMenu, setShowCommandMenu] = useState(false);
  const [colsPopup, setColsPopup] = useState({
    hidden: true,
    filter: "",
    line: 0,
  });
  const selected = useSelected();
  const textAreaRef = useRef<HTMLDivElement>(null);

  const renderElement = (props: any) => {
    if (props.element.type === "status") {
      return (
        <span
          data-playwright-selected={selected}
          {...props.attributes}
          className="mx-1 rounded border border-purple bg-lightpurple px-2 py-1 text-purpleHover"
        >
          <InlineChromiumBugfix />
          {props.children}
          <InlineChromiumBugfix />
        </span>
      );
    }
    return <p {...props.attributes}>{props.children}</p>;
  };

  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    const { selection } = editor;

    if (event.key === "/") {
      if (selection) {
        const path = selection.anchor.path;
        const line = path[0]; // Track line number
        setColsPopup({ hidden: false, filter: "", line });
        setShowCommandMenu(true);
        event.preventDefault();
      }
    } else if (showCommandMenu) {
      // Handle backspace
      if (event.key === "Backspace") {
        const newFilter = colsPopup.filter.slice(0, -1);
        setColsPopup({ ...colsPopup, filter: newFilter });
      } else if (event.key.length === 1) {
        // Append the new character to the filter
        setColsPopup({ ...colsPopup, filter: colsPopup.filter + event.key });
      }
    }

    if (selection && Range.isCollapsed(selection)) {
      const { nativeEvent } = event;

      if (isKeyHotkey("left", nativeEvent)) {
        event.preventDefault();
        Transforms.move(editor, { unit: "offset", reverse: true });
        return;
      }

      if (isKeyHotkey("right", nativeEvent)) {
        event.preventDefault();
        Transforms.move(editor, { unit: "offset" });
        return;
      }
    }

    if (event.key === "Escape") {
      setColsPopup({ hidden: true, filter: "", line: 0 });
      setShowCommandMenu(false);
    }
  };

  const onChangeHandler = (newValue: SlateNode[]) => {
    const text = joinText(newValue);
    setVal(text);

    // Detect if the user is typing after "/"
    if (showCommandMenu) {
      const lastWord = text.split(/\s+/).pop();
      if (lastWord?.startsWith("/")) {
        setColsPopup({ ...colsPopup, filter: lastWord.slice(1) }); // Remove `/` and use the rest as filter
      }
    }
  };

  const filteredColumns = columns?.filter((c) =>
    getColumnDisplayName(c)
      .toLowerCase()
      .startsWith(colsPopup.filter.toLowerCase()),
  );

  const joinText = (nodes: SlateNode[]): string => {
    let text = "";

    nodes.forEach((node) => {
      if (node.text) {
        text += node.text;
      } else if (node.type === "status" && node.children) {
        const childText = joinText(node.children).trim();

        const matchingColumn = columns.find(
          (col) => getColumnDisplayName(col) === childText,
        );

        if (matchingColumn) {
          text += " /" + matchingColumn.id + " ";
        } else {
          text += " /" + childText + " ";
        }
      } else if (node.children) {
        text += joinText(node.children);
      }
    });

    return text.trim();
  };

  const insertInlineElement = (text: string) => {
    const { selection } = editor;

    if (selection && Range.isCollapsed(selection)) {
      const path = selection.anchor.path;
      const pointBefore = {
        path,
        offset: selection.anchor.offset - colsPopup.filter.length - 1,
      };
      const rangeToDelete = { anchor: pointBefore, focus: selection.anchor };
      Transforms.delete(editor, { at: rangeToDelete });
    }

    const inlineElement = {
      type: "status",
      children: [{ text }],
    };

    Transforms.insertNodes(editor, inlineElement);

    // Position cursor after the inline element
    const nextPoint = editor.after(editor.selection as Range);
    if (nextPoint) {
      Transforms.select(editor, nextPoint);
    }

    // Focus the editor
    setTimeout(() => {
      ReactEditor.focus(editor);
    }, 0);

    setColsPopup({ hidden: true, filter: "", line: 0 });
    setShowCommandMenu(false);
  };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        textAreaRef.current &&
        !textAreaRef.current.contains(event.target as Node)
      ) {
        setColsPopup({ hidden: true, filter: "", line: 0 });
        setShowCommandMenu(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div className="group relative" ref={textAreaRef}>
      <div className="relative">
        <div
          className={`pointer-events-none absolute left-0 top-0 px-4 pt-3.5 text-neutral-400 ${
            val?.length > 0 ? "hidden" : ""
          }`}
        >
          {props.placeholder}
        </div>

        <Slate
          editor={editor}
          initialValue={initialValue}
          onChange={onChangeHandler}
        >
          <Editable
            renderElement={renderElement}
            onKeyDown={onKeyDown}
            className={twMerge(
              "inline-flex w-full resize-none rounded-md border border-neutral-300 px-4 pb-11 pt-3.5 text-neutral-900 outline-none focus-within:border-purple hover:border-purple",
              overrideClasses,
            )}
          />
        </Slate>
      </div>

      {showCommandMenu && filteredColumns.length > 0 && (
        <div
          style={{ top: colsPopup.line * 20 + 40 }}
          className="absolute left-1 z-10 hidden max-h-44 w-full overflow-auto rounded-md border border-neutral-400 bg-white p-4 shadow-lg group-focus-within:block"
        >
          {filteredColumns.map((c) => (
            <span
              key={c.id}
              tabIndex={0}
              onClick={() => {
                const colName = getColumnDisplayName(c);
                insertInlineElement(colName);
                setColsPopup({ hidden: true, filter: "", line: 0 });
                setShowCommandMenu(false);
              }}
              className="flex w-full min-w-max cursor-pointer items-center gap-2 rounded px-2.5 py-2 transition-all duration-300 hover:bg-grey-600"
            >
              {getColumnDisplayName(c)}
            </span>
          ))}
        </div>
      )}
    </div>
  );
};

export default ColumnsTextArea;

const InlineChromiumBugfix = () => (
  <span contentEditable={false} className="text-[0px]">
    {String.fromCodePoint(160) /* Non-breaking space */}
  </span>
);