ColorTextLeaf.tsx

import React from "react";
import { Editor } from "slate";
import { useSlate } from "slate-react";
const name = "color_picker";

let color = "#000000";

const baseClass = "rich-text__button";

const isMarkActive = (editor, format) => {
  const leaves = Editor.marks(editor);
  return leaves ? /^#[0-9A-F]{6}$/i.test(leaves[format]) : false;
};

const toggleLeaf = (editor, format, color) => {
  const isActive = isMarkActive(editor, format);
  console.log(isActive);
  if (isActive) {
    Editor.removeMark(editor, format);
  } else {
    Editor.addMark(editor, format, color);
  }
};

const ColorInput = ({ color }) => {
  return <input onChange={onChange} type="color"></input>;
};

const onChange = (event) => {
  color = event.target.value;
  console.log(color);
};

const input = <ColorInput color={color}></ColorInput>;

const LeafButton = ({ format, children, color }) => {
  const editor = useSlate();
  const active = isMarkActive(editor, format);
  if (active) {
    const leafValue = Editor.marks(editor)[format];
  }

  return (
    <button
      type="button"
      className={[
        baseClass,
        isMarkActive(editor, format) && `${baseClass}__button--active`,
      ]
        .filter(Boolean)
        .join(" ")}
      onMouseDown={(event) => {
        event.preventDefault();
        toggleLeaf(editor, format, color);
      }}
    >
      {active ? "Remove Color" : "Apply Color"}
    </button>
  );
};

const Button = ({ format, children }) => {
  const editor = useSlate();
  const active = isMarkActive(editor, format);

  return (
    <div>
      {input}
      <LeafButton format={name} color={color}>
        {{ children }}
      </LeafButton>
    </div>
  );
};

const Leaf = ({ attributes, leaf, children }) => {
  if (leaf[name]) {
    return (
      <span
        style={{
          color: leaf[name],
        }}
        {...attributes}
      >
        {children}
      </span>
    );
  }
  return <span {...attributes}>{children}</span>;
};

export default {
  name,
  Button,
  Leaf,
};