+

{
+ setDidImageLoad(true)
+ }}
+ />
+ {didImageLoad && canShowSaveButton && (
+
+ )}
+
+ )
+}
+
+export default RemoteImageComponent
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageNode.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageNode.tsx
new file mode 100644
index 000000000..7e32e9309
--- /dev/null
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/RemoteImagePlugin/RemoteImageNode.tsx
@@ -0,0 +1,89 @@
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode'
+import { DOMConversionMap, DOMExportOutput, LexicalNode, Spread } from 'lexical'
+import RemoteImageComponent from './RemoteImageComponent'
+
+type SerializedRemoteImageNode = Spread<
+ {
+ version: 1
+ type: 'unencrypted-image'
+ alt: string | undefined
+ src: string
+ },
+ SerializedDecoratorBlockNode
+>
+
+export class RemoteImageNode extends DecoratorBlockNode {
+ __alt: string | undefined
+ __src: string
+
+ static getType(): string {
+ return 'unencrypted-image'
+ }
+
+ constructor(src: string, alt?: string) {
+ super()
+ this.__src = src
+ this.__alt = alt
+ }
+
+ static clone(node: RemoteImageNode): RemoteImageNode {
+ return new RemoteImageNode(node.__src, node.__alt)
+ }
+
+ static importJSON(serializedNode: SerializedRemoteImageNode): RemoteImageNode {
+ const node = $createRemoteImageNode(serializedNode.src, serializedNode.alt)
+ return node
+ }
+
+ exportJSON(): SerializedRemoteImageNode {
+ return {
+ ...super.exportJSON(),
+ src: this.__src,
+ alt: this.__alt,
+ version: 1,
+ type: 'unencrypted-image',
+ }
+ }
+
+ static importDOM(): DOMConversionMap