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>
+    </>
   );
 }