chore: fix remote image component

packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageComponent.tsx

@@ -2,13 +2,27 @@ import { useApplication } from '@/Components/ApplicationProvider'
 import Icon from '@/Components/Icon/Icon'
 import Spinner from '@/Components/Spinner/Spinner'
 import { isDesktopApplication } from '@/Utils'
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { classNames } from '@standardnotes/snjs'
+import { ElementFormatType, NodeKey } from 'lexical'
 import { useCallback, useState } from 'react'
 import { $createFileNode } from '../EncryptedFilePlugin/Nodes/FileUtils'
 import { RemoteImageNode } from './RemoteImageNode'
 
-const RemoteImageComponent = ({ src, alt, node }: { src: string; alt?: string; node: RemoteImageNode }) => {
+type Props = {
+  src: string
+  alt?: string
+  node: RemoteImageNode
+  className: Readonly<{
+    base: string
+    focus: string
+  }>
+  format: ElementFormatType | null
+  nodeKey: NodeKey
+}
+
+const RemoteImageComponent = ({ className, src, alt, node, format, nodeKey }: Props) => {
   const application = useApplication()
   const [editor] = useLexicalComposerContext()
 
@@ -51,6 +65,7 @@ const RemoteImageComponent = ({ src, alt, node }: { src: string; alt?: string; n
   const canShowSaveButton = application.isNativeMobileWeb() || isDesktopApplication()
 
   return (
+    <BlockWithAlignableContents className={className} format={format} nodeKey={nodeKey}>
       <div className="relative flex min-h-[2rem] flex-col items-center gap-2.5">
         <img
           alt={alt}
@@ -82,6 +97,7 @@ const RemoteImageComponent = ({ src, alt, node }: { src: string; alt?: string; n
           </button>
         )}
       </div>
+    </BlockWithAlignableContents>
   )
 }
 

packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageNode.tsx

@@ -1,5 +1,5 @@
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode'
-import { DOMConversionMap, DOMExportOutput, LexicalNode, Spread } from 'lexical'
+import { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, Spread } from 'lexical'
 import RemoteImageComponent from './RemoteImageComponent'
 
 type SerializedRemoteImageNode = Spread<
@@ -75,8 +75,23 @@ export class RemoteImageNode extends DecoratorBlockNode {
     return { element }
   }
 
-  decorate(): JSX.Element {
+  decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element {
-    return <RemoteImageComponent node={this} src={this.__src} alt={this.__alt} />
+    const embedBlockTheme = config.theme.embedBlock || {}
+    const className = {
+      base: embedBlockTheme.base || '',
+      focus: embedBlockTheme.focus || '',
+    }
+
+    return (
+      <RemoteImageComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        node={this}
+        src={this.__src}
+        alt={this.__alt}
+      />
+    )
   }
 }