chore: fix file node selection issues

packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx

@@ -49,7 +49,7 @@ const ImagePreview: FunctionComponent<Props> = ({
   const widthIfEmbedded = imageWidth * (imageZoomPercent / PercentageDivisor)
 
   return (
-    <div className="group flex h-full min-h-0 w-full items-center justify-center">
+    <div className="group relative flex h-full min-h-0 w-full items-center justify-center">
       <div
         className="relative flex h-full w-full items-center justify-center overflow-auto"
         style={{
@@ -103,7 +103,7 @@ const ImagePreview: FunctionComponent<Props> = ({
           <div className="mx-2">
             <input
               type="number"
-              className="w-10 text-center bg-default"
+              className="w-10 bg-default text-center"
               defaultValue={imageZoomPercent}
               onKeyDown={(event) => {
                 event.stopPropagation()

packages/web/src/javascripts/Components/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts

@@ -6,13 +6,12 @@ import { FileNode } from './Nodes/FileNode'
 import {
   $createParagraphNode,
   $insertNodes,
-  $isRootOrShadowRoot,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
   PASTE_COMMAND,
 } from 'lexical'
 import { $createFileNode } from './Nodes/FileUtils'
-import { $wrapNodeInElement, mergeRegister } from '@lexical/utils'
+import { mergeRegister } from '@lexical/utils'
 import { useFilesController } from '@/Controllers/FilesControllerProvider'
 import { FilesControllerEvent } from '@/Controllers/FilesController'
 import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
@@ -53,11 +52,8 @@ export default function FilePlugin({ currentNote }: { currentNote: SNNote }): JS
         (payload) => {
           const fileNode = $createFileNode(payload)
           $insertNodes([fileNode])
-          if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) {
-            $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd()
-          }
           const newLineNode = $createParagraphNode()
-          fileNode.getParentOrThrow().insertAfter(newLineNode)
+          fileNode.insertAfter(newLineNode)
 
           return true
         },
@@ -75,6 +71,21 @@ export default function FilePlugin({ currentNote }: { currentNote: SNNote }): JS
         },
         COMMAND_PRIORITY_NORMAL,
       ),
+      editor.registerNodeTransform(FileNode, (node) => {
+        /**
+         * Before this was added, we used to wrap the file node in a paragraph node,
+         * which caused issues with selection. We no longer do that, but for existing
+         * notes that have this, we use this transform to remove the wrapper node.
+         */
+        const parent = node.getParent()
+        if (!parent) {
+          return
+        }
+        if (parent.getChildrenSize() === 1) {
+          parent.insertBefore(node)
+          parent.remove()
+        }
+      }),
     )
   }, [application, currentNote.protected, editor, filesController, linkingController])