How to add custom api key in Draft.js react

Question

This is what i want to achieve but i don't have any idea about draft.js and i have spent lot of time but not getting anything valueable

• Typing # as the first string in a line & pressing space should make anything you type afterwards on the same line be in a “Heading” format. On pressing space the aforementioned # should disappear.

• Similarly, typing * as the first string in a line and pressing space should correspond to “bold” format
• ** and space = red line
• *** and space = underline

what i have done so far is i'm able to make a text into heading using space bar but the functionality i need is different and i don't know how can i achieve this.

here is my code

export default function App() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const keyBindingFn = useCallback((event) => {
    if (event.keyCode === 32) {
      // 32 is the key code for space
      return "apply-heading";
    }
    return getDefaultKeyBinding(event);
  }, []);

  const handleKeyCommand = useCallback(
    (command) => {
      let newState;
      if (command === "apply-heading") {
        const newState = RichUtils.toggleBlockType(editorState, "header-one");
        if (newState) {
          setEditorState(newState);
          return "handled";
        }
      }
      if (newState) {
        setEditorState(newState);
        return "handled";
      }
      return "not-handled";
    },
    [editorState]
  );

  return (
    <div style={{border: "2px solid black"}}>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        handleKeyCommand={handleKeyCommand}
        keyBindingFn={keyBindingFn}
      />
    </div>
  );
}