Fixes bug in setTitle where the title for another chapter would change.

The issue is in onBlur. I *think* the issue is similar to
lovasoa/react-contenteditable#161

where an outdated version is firing with the wrong chapterid. Bug can be
repro-d by something like:
1. go to chapter A.
2. click into the title and copy.
3. don't blur, just go to another chapter.
This should then cause a blur and cause a bug.

If you save using Enter or cmd+s, this seems to not happen.

src/Editor.tsx

@@ -288,10 +288,10 @@ export default function Editor({ settings }: { settings: t.UserSettings }) {
  <ContentEditable
  value={currentChapterTitle}
  className={`${titleFontSize} mb-md tracking-wide font-normal text-darkest dark:text-lightest mx-auto text-center w-full mt-lg ${fontClass}`}
- /* // This is needed so the first block gets focus when we hit enter
+ // This is needed so the first block gets focus when we hit enter
  onClick={() => {
  dispatch(librarySlice.actions.setActiveTextIndex(-1));
- }} */
+ }}
  onSubmit={(title) => {
  dispatch(
  librarySlice.actions.setTitle({

src/components/ContentEditable.tsx

@@ -12,7 +12,7 @@ export default function ContentEditable({
  onClick = () => {},
 }) {
  const [content, setContent] = React.useState(value);
-
+ const [edited, setEdited] = React.useState(false);
  const handleChange = (evt) => {
  const value = evt.target.innerHTML.replace(/<br>|&nbsp;/g, " ").trim();
  setContent(value);
@@ -42,32 +42,48 @@ export default function ContentEditable({
  }, [div.current]);
 
  const onKeyDown = (evt) => {
- if ((evt.metaKey && evt.code === "KeyS") || evt.key === "Enter") {
+ if (
+ (evt.metaKey && evt.code === "KeyS") ||
+ evt.key === "Enter" ||
+ evt.key === "Tab"
+ ) {
  if (document.activeElement === div.current) {
  evt.preventDefault();
+ setEdited(false);
  console.warn("submitting", content);
  onSubmit(content);
  if (nextFocus) {
  nextFocus();
  }
  }
+ } else {
+ setEdited(true);
  }
  };
 
  return (
- <div
- className={`${DEFAULT_CLASSES} ${className}`}
- contentEditable
- suppressContentEditableWarning
- onBlur={handleSubmit}
- onKeyDown={onKeyDown}
- style={style}
- onInput={handleChange}
- data-selector={selector}
- onClick={onClick}
- ref={div}
- >
- {value}
- </div>
+ <>
+ <div className={` relative ${className}`}>
+ <div
+ className={` ${DEFAULT_CLASSES} ${className}`}
+ contentEditable
+ suppressContentEditableWarning
+ /* onBlur={handleSubmit} */
+ onKeyDown={onKeyDown}
+ style={style}
+ onInput={handleChange}
+ data-selector={selector}
+ onClick={onClick}
+ ref={div}
+ >
+ {value}
+ </div>
+ {edited && (
+ <span className="mx-none text-xs text-gray-500 absolute top-0 right-0 uppercase">
+ Enter to save
+ </span>
+ )}
+ </div>
+ </>
  );
 }