Configure external sources (#149)

* Split actions component and fix scroll.

* Allow configuration of remote sources.

* Save remote sources to local storage.

* Make dollar katex delimiter more strict.

* Update lockfile.

* Display labels on notes.

* Change default zoom and delay closing highlights on hover.

* Review fixes.

* Avoid pre-wrap issues in labels.

* Format.

* Explicitly override white-space on labels.

Author: tomusdrw

package-lock.json

@@ -25,6 +25,7 @@
     "pdfjs-dist": "^4.5.136",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-modal": "^3.16.3",
     "react-tooltip": "^5.27.1"
   },
   "devDependencies": {
@@ -33,6 +34,7 @@
     "@types/katex": "^0.16.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-modal": "^3.16.3",
     "@vitejs/plugin-react": "^4.3.1",
     "typescript": "^5.2.2",
     "vite": "^5.3.4",

package.json

@@ -0,0 +1,3 @@
+.label {
+  white-space: nowrap;
+}

src/components/Label/Label.css

@@ -1,9 +1,10 @@
+import "./Label.css";
 import { useMemo } from "react";
 
 export function Label({ label, prefix = "" }: { label: string; prefix?: string }) {
   const backgroundColor = useMemo(() => labelToColor(label), [label]);
   return (
-    <span style={{ backgroundColor }}>
+    <span style={{ backgroundColor }} className="label">
       {prefix} {label}
     </span>
   );

src/components/Label/Label.tsx

@@ -1,3 +1,21 @@
+.notes-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.notes-wrapper .note-manager {
+  flex: 1;
+  overflow: auto;
+}
+
+.notes-wrapper .notes-actions {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8rem;
+}
+
 .note-manager .new-note button {
   width: 100%;
 }
@@ -35,7 +53,6 @@
 .note-manager .icon {
   margin-right: 3px;
   color: #e22;
-  background-color: lightyellow;
   padding: 2px;
 }
 
@@ -53,7 +70,8 @@
 
 .note-manager .note {
   padding: 8px;
-  border: 1px solid #eee;
+  border: 1px solid;
+  border-color: light-dark(#eee, #444);
   margin-top: 5px;
   border-radius: 6px;
 }
@@ -62,12 +80,6 @@
   font-weight: bold;
 }
 
-.note-manager .notes-actions {
-  margin-top: 2rem;
-  display: flex;
-  gap: 2rem;
-}
-
 .note-manager .note .actions {
   display: flex;
 }

src/components/NoteManager/NoteManager.css

@@ -1,39 +1,32 @@
-import { type ChangeEventHandler, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import "./NoteManager.css";
-import { Tooltip } from "react-tooltip";
 import { validateMath } from "../../utils/validateMath";
 import { LabelsFilter } from "../LabelsFilter/LabelsFilter";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
-import { LEGACY_READER_HOST } from "../MetadataProvider/MetadataProvider";
 import { type INotesContext, NotesContext } from "../NotesProvider/NotesProvider";
 import { LABEL_LOCAL } from "../NotesProvider/consts/labels";
 import type { IStorageNote } from "../NotesProvider/types/StorageNote";
 import { type ISelectionContext, SelectionContext } from "../SelectionProvider/SelectionProvider";
 import { Note } from "./components/Note";
+import { NotesActions } from "./components/NotesActions";
 
 const DEFAULT_AUTHOR = "";
 
 export function NoteManager() {
+  return (
+    <div className="notes-wrapper">
+      <Notes />
+      <NotesActions />
+    </div>
+  );
+}
+
+function Notes() {
   const [noteContent, setNoteContent] = useState("");
   const [noteContentError, setNoteContentError] = useState("");
   const { locationParams } = useContext(LocationContext) as ILocationContext;
-  const {
-    notesReady,
-    notes,
-    labels,
-    canUndo,
-    canRedo,
-    hasLegacyNotes,
-    handleAddNote,
-    handleDeleteNote,
-    handleUpdateNote,
-    handleUndo,
-    handleRedo,
-    handleImport,
-    handleExport,
-    handleLegacyExport,
-    handleToggleLabel,
-  } = useContext(NotesContext) as INotesContext;
+  const { notesReady, notes, labels, handleAddNote, handleDeleteNote, handleUpdateNote, handleToggleLabel } =
+    useContext(NotesContext) as INotesContext;
   const { selectedBlocks, pageNumber, handleClearSelection } = useContext(SelectionContext) as ISelectionContext;
 
   const handleAddNoteClick = useCallback(() => {
@@ -78,33 +71,6 @@ export function NoteManager() {
     }
   }, [selectedBlocks]);
 
-  const fileImport = useRef<HTMLInputElement>(null);
-  const onImport = useCallback(() => {
-    fileImport.current?.click();
-  }, []);
-
-  const handleFileSelected = useCallback<ChangeEventHandler<HTMLInputElement>>(
-    (ev) => {
-      if (!ev.target?.files?.length) {
-        return;
-      }
-      const fileToImport = ev.target.files[0];
-
-      const f = new FileReader();
-      f.onload = (e) => {
-        const fileContent = e.target?.result?.toString() || "";
-        try {
-          handleImport(fileContent, fileToImport.name.substring(0, 12));
-        } catch (e) {
-          console.error(e);
-          alert("Unable to load the notes file. Check console for details.");
-        }
-      };
-      f.readAsText(fileToImport);
-    },
-    [handleImport],
-  );
-
   return (
     <div className="note-manager" style={{ opacity: notesReady ? 1.0 : 0.3 }}>
       <div className="new-note">
@@ -116,37 +82,17 @@ export function NoteManager() {
           onChange={(ev) => setNoteContent(ev.currentTarget.value)}
           placeholder="Add a note to the selected fragment. Math typesetting is supported! Use standard delimiters such as $...$, \[...\] or \begin{equation}...\end{equation}."
         />
+
         {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
         <button disabled={noteContent.length < 1} onClick={handleAddNoteClick}>
           Add
         </button>
       </div>
+
       <LabelsFilter labels={labels} onToggleLabel={handleToggleLabel} />
       {notes.map((note) => (
         <Note key={note.key} note={note} onEditNote={handleUpdateNote} onDeleteNote={handleDeleteNote} />
       ))}
-      <div className="notes-actions">
-        <button onClick={handleUndo} disabled={!canUndo}>
-          undo
-        </button>
-        <button onClick={handleRedo} disabled={!canRedo}>
-          redo
-        </button>
-        <button onClick={onImport}>import notes</button>
-        <button onClick={handleExport}>export notes</button>
-        {hasLegacyNotes ? (
-          <button
-            data-tooltip-id="legacy-export-tooltip"
-            data-tooltip-content={`Notes from the old version of graypaper reader have been detected. You may export them for use with ${LEGACY_READER_HOST}.`}
-            data-tooltip-place="bottom"
-            onClick={handleLegacyExport}
-          >
-            export old notes
-          </button>
-        ) : null}
-      </div>
-      <input ref={fileImport} onChange={handleFileSelected} type="file" style={{ opacity: 0 }} />
-      <Tooltip id="legacy-export-tooltip" />
     </div>
   );
 }

src/components/NoteManager/NoteManager.tsx

@@ -0,0 +1,18 @@
+.settings-close {
+  float: right;
+}
+.settings-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ReactModal__Overlay {
+    background: rgba(32, 32, 32, 0.8) !important;
+  }
+
+  .ReactModal__Content {
+    background: rgb(32, 32, 32) !important;
+    border-color: rgb(132, 132, 132) !important;
+  }
+}