Add ability to resize imgs

- hold Ctrl (or Cmd), move mouse over the image, move mouse wheel up and down to resize the image
- double click on the image to restore its original size

public/notes.css

@@ -357,6 +357,10 @@ body.resizing-sidebar-locked-max { cursor: w-resize; }
 #content ul { margin: 0; }
 #content ol { margin: 0 0 0 1em; }
 
+#content img {
+  cursor: default;
+}
+
 #content pre {
   overflow: auto;
   padding: .5em;
@@ -390,6 +394,11 @@ body.with-control #content a > * {
   pointer-events: none;
 }
 
+body.with-control.with-hovered-img #content,
+body.with-control.resizing-img #content {
+  overflow: hidden;
+}
+
 /* My Notes classes */
 
 .my-notes-table-align-center {

src/notes/content/img.ts

@@ -0,0 +1,36 @@
+import { dispatchNoteEdited } from "notes/events";
+
+const MIN_ZOOM = 0.1;
+const ZOOM_STEP = 0.003;
+
+/* eslint-disable no-param-reassign */
+const makeImgZoomable = (img: HTMLImageElement) => {
+  img.onmouseleave = () => document.body.classList.remove("with-hovered-img");
+  img.onmouseenter = () => document.body.classList.add("with-hovered-img");
+  img.onwheel = (event) => { // Saved on keyup, see keyboard-shortcuts.ts
+    if (!document.body.classList.contains("with-control")) {
+      return;
+    }
+
+    document.body.classList.add("resizing-img");
+
+    const zoomChange = ZOOM_STEP * event.deltaY;
+    // @ts-ignore
+    const parsedZoom = parseFloat(img.style.zoom);
+    // @ts-ignore
+    img.style.zoom = Math.max(MIN_ZOOM, (Number.isNaN(parsedZoom) ? 1 : parsedZoom) + zoomChange);
+  };
+  img.ondblclick = () => { // Saved immediately
+    // @ts-ignore
+    img.style.zoom = "";
+    dispatchNoteEdited();
+  };
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const initImgs = () => {
+  document.body.classList.remove("with-hovered-img");
+
+  const imgs = document.querySelectorAll<HTMLImageElement>("body > #content-container > #content img");
+  imgs.forEach(makeImgZoomable);
+};

src/notes/content/init.ts

@@ -1,7 +1,9 @@
+import { initImgs } from "./img";
 import { initTables } from "./table";
 import renderTableContextMenu from "./render-table-context-menu";
 
 export default () => {
+  initImgs();
   initTables({
     contextMenuRenderFunction: renderTableContextMenu,
   });

src/notes/keyboard-shortcuts.ts

@@ -1,4 +1,5 @@
 import { Os } from "shared/storage/schema";
+import { dispatchNoteEdited } from "./events";
 
 const isMac = (os: Os) => os === "mac";
 
@@ -279,6 +280,10 @@ const keydown = (os: Os) => document.addEventListener("keydown", (event) => {
 
 const keyup = () => document.addEventListener("keyup", () => {
   document.body.classList.remove("with-control");
+  if (document.body.classList.contains("resizing-img")) {
+    document.body.classList.remove("resizing-img");
+    dispatchNoteEdited();
+  }
 });
 
 const register = (os: Os): void => {