diff --git a/shared/editor/nodes/Image.tsx b/shared/editor/nodes/Image.tsx index 7c639d939..68dfe67f8 100644 --- a/shared/editor/nodes/Image.tsx +++ b/shared/editor/nodes/Image.tsx @@ -1,7 +1,7 @@ import Token from "markdown-it/lib/token"; import { InputRule } from "prosemirror-inputrules"; import { Node as ProsemirrorNode, NodeSpec, NodeType } from "prosemirror-model"; -import { NodeSelection, EditorState } from "prosemirror-state"; +import { NodeSelection, EditorState, Plugin } from "prosemirror-state"; import * as React from "react"; import { sanitizeUrl } from "../../utils/urls"; import { default as ImageComponent, Caption } from "../components/Image"; @@ -159,6 +159,35 @@ export default class Image extends SimpleImage { }; } + get plugins() { + return [ + new Plugin({ + props: { + handleKeyDown: (view, event) => { + // prevent prosemirror's default spacebar behavior + // & zoom in if the selected node is image + if (event.key === " ") { + const { state } = view; + const { selection } = state; + if (selection instanceof NodeSelection) { + const { node } = selection; + if (node.type.name === "image") { + const image = document.querySelector( + ".ProseMirror-selectednode img" + ) as HTMLImageElement; + image.click(); + return true; + } + } + } + + return false; + }, + }, + }), + ]; + } + handleChangeSize = ({ node, getPos,