feat: resize images in super editor (#2052)

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileComponent.tsx

@@ -1,9 +1,10 @@
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ElementFormatType, NodeKey } from 'lexical'
 import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileItem } from '@standardnotes/snjs'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 
 export type FileComponentProps = Readonly<{
   className: Readonly<{
@@ -13,10 +14,13 @@ export type FileComponentProps = Readonly<{
   format: ElementFormatType | null
   nodeKey: NodeKey
   fileUuid: string
+  zoomLevel: number
+  setZoomLevel: (zoomLevel: number) => void
 }>
 
-export function FileComponent({ className, format, nodeKey, fileUuid }: FileComponentProps) {
+export function FileComponent({ className, format, nodeKey, fileUuid, zoomLevel, setZoomLevel }: FileComponentProps) {
   const application = useApplication()
+  const [editor] = useLexicalComposerContext()
   const file = useMemo(() => application.items.findItem<FileItem>(fileUuid), [application, fileUuid])
 
   const [canLoad, setCanLoad] = useState(false)
@@ -53,13 +57,32 @@ export function FileComponent({ className, format, nodeKey, fileUuid }: FileComp
     }
   }, [blockObserver])
 
+  const setImageZoomLevel = useCallback(
+    (zoomLevel: number) => {
+      editor.update(() => {
+        setZoomLevel(zoomLevel)
+      })
+    },
+    [editor, setZoomLevel],
+  )
+
   if (!file) {
     return <div>Unable to find file {fileUuid}</div>
   }
 
   return (
     <BlockWithAlignableContents className={className} format={format} nodeKey={nodeKey}>
-      <div ref={blockWrapperRef}>{canLoad && <FilePreview file={file} application={application} />}</div>
+      <div ref={blockWrapperRef}>
+        {canLoad && (
+          <FilePreview
+            isEmbeddedInSuper={true}
+            file={file}
+            application={application}
+            imageZoomLevel={zoomLevel}
+            setImageZoomLevel={setImageZoomLevel}
+          />
+        )}
+      </div>
     </BlockWithAlignableContents>
   )
 }

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileNode.tsx

@@ -7,18 +7,20 @@ import { ItemNodeInterface } from '../../ItemNodeInterface'
 
 export class FileNode extends DecoratorBlockNode implements ItemNodeInterface {
   __id: string
+  __zoomLevel: number
 
   static getType(): string {
     return 'snfile'
   }
 
   static clone(node: FileNode): FileNode {
-    return new FileNode(node.__id, node.__format, node.__key)
+    return new FileNode(node.__id, node.__format, node.__key, node.__zoomLevel)
   }
 
   static importJSON(serializedNode: SerializedFileNode): FileNode {
     const node = $createFileNode(serializedNode.fileUuid)
     node.setFormat(serializedNode.format)
+    node.setZoomLevel(serializedNode.zoomLevel)
     return node
   }
 
@@ -28,6 +30,7 @@ export class FileNode extends DecoratorBlockNode implements ItemNodeInterface {
       fileUuid: this.getId(),
       version: 1,
       type: 'snfile',
+      zoomLevel: this.__zoomLevel,
     }
   }
 
@@ -53,9 +56,10 @@ export class FileNode extends DecoratorBlockNode implements ItemNodeInterface {
     return { element }
   }
 
-  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey, zoomLevel?: number) {
     super(format, key)
     this.__id = id
+    this.__zoomLevel = zoomLevel || 100
   }
 
   getId(): string {
@@ -66,6 +70,11 @@ export class FileNode extends DecoratorBlockNode implements ItemNodeInterface {
     return `[File: ${this.__id}]`
   }
 
+  setZoomLevel(zoomLevel: number): void {
+    const writable = this.getWritable()
+    writable.__zoomLevel = zoomLevel
+  }
+
   decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element {
     const embedBlockTheme = config.theme.embedBlock || {}
     const className = {
@@ -73,6 +82,15 @@ export class FileNode extends DecoratorBlockNode implements ItemNodeInterface {
       focus: embedBlockTheme.focus || '',
     }
 
-    return <FileComponent className={className} format={this.__format} nodeKey={this.getKey()} fileUuid={this.__id} />
+    return (
+      <FileComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        fileUuid={this.__id}
+        zoomLevel={this.__zoomLevel}
+        setZoomLevel={this.setZoomLevel.bind(this)}
+      />
+    )
   }
 }

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/SerializedFileNode.tsx

@@ -6,6 +6,7 @@ export type SerializedFileNode = Spread<
     fileUuid: string
     version: 1
     type: 'snfile'
+    zoomLevel: number
   },
   SerializedDecoratorBlockNode
 >