rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: fix remote image component

Browse Source
This commit is contained in:
Aman Harwara
2023-03-31 15:49:06 +05:30
parent c3d3633e6b
commit c832371e3a
2 changed files with 66 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,13 +2,27 @@ import { useApplication } from '@/Components/ApplicationProvider'
import Icon from '@/Components/Icon/Icon' import Icon from '@/Components/Icon/Icon'
import Spinner from '@/Components/Spinner/Spinner' import Spinner from '@/Components/Spinner/Spinner'
import { isDesktopApplication } from '@/Utils' import { isDesktopApplication } from '@/Utils'
import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { classNames } from '@standardnotes/snjs' import { classNames } from '@standardnotes/snjs'
import { ElementFormatType, NodeKey } from 'lexical'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { $createFileNode } from '../EncryptedFilePlugin/Nodes/FileUtils' import { $createFileNode } from '../EncryptedFilePlugin/Nodes/FileUtils'
import { RemoteImageNode } from './RemoteImageNode' 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 application = useApplication()
const [editor] = useLexicalComposerContext() const [editor] = useLexicalComposerContext()
@@ -51,37 +65,39 @@ const RemoteImageComponent = ({ src, alt, node }: { src: string; alt?: string; n
const canShowSaveButton = application.isNativeMobileWeb() || isDesktopApplication() const canShowSaveButton = application.isNativeMobileWeb() || isDesktopApplication()
return ( return (
<div className="relative flex min-h-[2rem] flex-col items-center gap-2.5"> <BlockWithAlignableContents className={className} format={format} nodeKey={nodeKey}>
<img <div className="relative flex min-h-[2rem] flex-col items-center gap-2.5">
alt={alt} <img
src={src} alt={alt}
onLoad={() => { src={src}
setDidImageLoad(true) onLoad={() => {
}} setDidImageLoad(true)
/> }}
{didImageLoad && canShowSaveButton && ( />
<button {didImageLoad && canShowSaveButton && (
className={classNames( <button
'flex items-center gap-2.5 rounded border border-border bg-default px-2.5 py-1.5', className={classNames(
!isSaving && 'hover:bg-info hover:text-info-contrast', 'flex items-center gap-2.5 rounded border border-border bg-default px-2.5 py-1.5',
)} !isSaving && 'hover:bg-info hover:text-info-contrast',
onClick={fetchAndUploadImage} )}
disabled={isSaving} onClick={fetchAndUploadImage}
> disabled={isSaving}
{isSaving ? ( >
<> {isSaving ? (
<Spinner className="h-4 w-4" /> <>
Saving... <Spinner className="h-4 w-4" />
</> Saving...
) : ( </>
<> ) : (
<Icon type="download" /> <>
Save image to Files <Icon type="download" />
</> Save image to Files
)} </>
</button> )}
)} </button>
</div> )}
</div>
</BlockWithAlignableContents>
) )
} }

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

@@ -1,5 +1,5 @@
import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode' 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' import RemoteImageComponent from './RemoteImageComponent'
type SerializedRemoteImageNode = Spread< type SerializedRemoteImageNode = Spread<
@@ -75,8 +75,23 @@ export class RemoteImageNode extends DecoratorBlockNode {
return { element } 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}
/>
)
} }
} }