fix(editor): fix embed block editing url will lose url metadata (#408)

pleisto · Jul 19, 2022 · 1c4555a · 1c4555a
1 parent df8d693
commit 1c4555a
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 10 deletions.
diff --git a/packages/editor/src/components/blockViews/EmbedView/EmbedView.tsx b/packages/editor/src/components/blockViews/EmbedView/EmbedView.tsx
@@ -47,6 +47,7 @@ const renderImage = (
         icon={<FileIcon fileType="image" />}
         linkUrl={imageUrl}
         node={node}
+        extension={extension}
         deleteNode={deleteNode}
         getPos={getPos}
         updateEmbedBlockAttributes={updateEmbedBlockAttributes}
@@ -90,6 +91,7 @@ const renderAttachment = (
         deleteNode={deleteNode}
         getPos={getPos}
         node={node}
+        extension={extension}
         updateEmbedBlockAttributes={updateEmbedBlockAttributes}
       />
     )
@@ -104,6 +106,7 @@ const renderAttachment = (
         icon={<FileIcon fileType={fileType} />}
         linkUrl={fileUrl}
         node={node}
+        extension={extension}
         deleteNode={deleteNode}
         getPos={getPos}
         updateEmbedBlockAttributes={updateEmbedBlockAttributes}
@@ -187,6 +190,7 @@ export const EmbedView: FC<EmbedViewProps> = props => {
           blockType="link"
           updateEmbedBlockAttributes={updateEmbedBlockAttributes}
           node={node}
+          extension={extension}
           deleteNode={deleteNode}
           cover={cover}
           description={description}
@@ -203,6 +207,7 @@ export const EmbedView: FC<EmbedViewProps> = props => {
           blockType="link"
           updateEmbedBlockAttributes={updateEmbedBlockAttributes}
           node={node}
+          extension={extension}
           fileUrl={linkUrl}
           fileType="html"
           fileName={title ?? ''}

diff --git a/...components/blockViews/EmbedView/__tests__/embedViews/PreviewView/WebsiteDocument.test.tsx b/...components/blockViews/EmbedView/__tests__/embedViews/PreviewView/WebsiteDocument.test.tsx
@@ -18,6 +18,7 @@ describe('WebsiteDocument', () => {
         blockType="link"
         icon="icon"
         title="title"
+        extension={{} as any}
         displayName="displayName"
         updateEmbedBlockAttributes={updateEmbedBlockAttributes}
         url="url"

diff --git a/packages/editor/src/components/blockViews/EmbedView/embedTypes/Link/useLinkValue.ts b/packages/editor/src/components/blockViews/EmbedView/embedTypes/Link/useLinkValue.ts
@@ -24,24 +24,26 @@ export function useLinkValue(
       return
     }
 
+    const normalizedUrl = prependUrlScheme(url)
+
     if (!extension?.options.getUrlData) {
       updateEmbedBlockAttributes(
         {
           type: 'ATTACHMENT',
-          key: url,
+          key: normalizedUrl,
           source: 'EXTERNAL',
           contentType: 'unknown',
-          name: url
+          name: normalizedUrl
         },
 
         'attachment'
       )
-      onSubmit?.(url)
+      onSubmit?.(normalizedUrl)
       return
     }
 
     progressing()
-    const { success, data } = await extension.options.getUrlData(prependUrlScheme(url))
+    const { success, data } = await extension.options.getUrlData(normalizedUrl)
 
     if (!success) {
       resetProgress()
@@ -72,13 +74,13 @@ export function useLinkValue(
           key: data.url,
           source: 'EXTERNAL',
           contentType: data.type,
-          name: url
+          name: data.url
         },
         'attachment'
       )
     }
 
-    onSubmit?.(url)
+    onSubmit?.(data.url)
   }, [extension?.options, onSubmit, progressing, resetProgress, t, updateEmbedBlockAttributes, url])
 
   const handleLinkChange = useCallback<ChangeEventHandler<HTMLInputElement>>(event => {

diff --git a/packages/editor/src/components/blockViews/EmbedView/embedViews/CardView/CardView.tsx b/packages/editor/src/components/blockViews/EmbedView/embedViews/CardView/CardView.tsx
@@ -24,6 +24,7 @@ export interface CardViewProps {
   deleteNode: EmbedViewProps['deleteNode']
   getPos: EmbedViewProps['getPos']
   node: EmbedViewProps['node']
+  extension: EmbedViewProps['extension']
   cover?: string | null
   icon?: string | ReactElement
   displayName: string
@@ -61,6 +62,7 @@ export const CardView: FC<CardViewProps> = ({
   description,
   blockType,
   node,
+  extension,
   getPos,
   deleteNode,
   updateEmbedBlockAttributes
@@ -82,12 +84,14 @@ export const CardView: FC<CardViewProps> = ({
       deleteNode={deleteNode}
       getPos={getPos}
       editable="custom"
-      actionOptions={actionOptions}>
+      actionOptions={actionOptions}
+    >
       <CardContainer
         contentType={type}
         data-testid={TEST_ID_ENUM.editor.embedBlock.link.id}
         size="md"
-        onClick={onClick}>
+        onClick={onClick}
+      >
         <CardCover blockType={blockType} cover={cover} icon={icon} />
         <Content type={type}>
           {displayName && <Title type={type}>{displayName}</Title>}
@@ -102,6 +106,7 @@ export const CardView: FC<CardViewProps> = ({
             <EmbedToolbarContainer onClick={handleStopPropagation}>
               <EmbedToolbar
                 mode="card"
+                extension={extension}
                 blockType={blockType}
                 displayName={displayName}
                 url={linkUrl}

diff --git a/...ages/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/DocumentFooter.tsx b/...ages/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/DocumentFooter.tsx
@@ -57,6 +57,7 @@ export const DocumentFooter: FC<DocumentFooterProps> = ({
   name,
   icon,
   blockType,
+  extension,
   updateEmbedBlockAttributes,
   onFullScreen
 }) => {
@@ -71,6 +72,7 @@ export const DocumentFooter: FC<DocumentFooterProps> = ({
         <EmbedToolbarContainer>
           <EmbedToolbar
             url={url}
+            extension={extension}
             displayName={displayName}
             mode="preview"
             blockType={blockType}

diff --git a/...omponents/blockViews/EmbedView/embedViews/PreviewView/PdftronDocument/PdftronDocument.tsx b/...omponents/blockViews/EmbedView/embedViews/PreviewView/PdftronDocument/PdftronDocument.tsx
@@ -7,9 +7,11 @@ import { usePdftronDocument } from './usePdftronDocument'
 import { DocumentFooter } from '../DocumentFooter'
 import { EmbedBlockType, UpdateEmbedBlockAttributes } from '../../../EmbedView'
 import { DocumentUnavailable } from '../DocumentUnavailable'
+import { PreviewViewProps } from '../PreviewView'
 
 export interface PdftronDocumentProps {
   blockType: EmbedBlockType
+  extension: PreviewViewProps['extension']
   updateEmbedBlockAttributes: UpdateEmbedBlockAttributes
   displayName: string
   fileName: string
@@ -56,6 +58,7 @@ const DocumentFileIcon = styled(FileIcon, {
 
 export const PdftronDocument: FC<PdftronDocumentProps> = ({
   blockType,
+  extension,
   updateEmbedBlockAttributes,
   fileName,
   fileType,
@@ -79,6 +82,7 @@ export const PdftronDocument: FC<PdftronDocumentProps> = ({
         icon={<DocumentFileIcon fileType={fileType} />}
         name={fileName}
         blockType={blockType}
+        extension={extension}
         updateEmbedBlockAttributes={updateEmbedBlockAttributes}
         onFullScreen={toggleFullScreen}
       />

diff --git a/packages/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/PreviewView.tsx b/packages/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/PreviewView.tsx
@@ -15,6 +15,7 @@ export interface PreviewViewProps {
   deleteNode: EmbedViewProps['deleteNode']
   getPos: EmbedViewProps['getPos']
   node: EmbedViewProps['node']
+  extension: EmbedViewProps['extension']
   updateEmbedBlockAttributes: UpdateEmbedBlockAttributes
   displayName: string
   fileName: string
@@ -44,7 +45,8 @@ export const PreviewView: FC<PreviewViewProps> = ({
   fileType,
   fileUrl,
   icon,
-  node
+  node,
+  extension
 }) => {
   const isWebsite = fileType === 'html'
   const [actionOptions] = useActionOptions(isWebsite ? undefined : fileUrl)
@@ -56,10 +58,12 @@ export const PreviewView: FC<PreviewViewProps> = ({
       deleteNode={deleteNode}
       editable="custom"
       getPos={getPos}
-      actionOptions={actionOptions}>
+      actionOptions={actionOptions}
+    >
       <DocumentContainer>
         {isWebsite ? (
           <WebsiteDocument
+            extension={extension}
             blockType={blockType}
             updateEmbedBlockAttributes={updateEmbedBlockAttributes}
             url={fileUrl}
@@ -69,6 +73,7 @@ export const PreviewView: FC<PreviewViewProps> = ({
           />
         ) : (
           <PdftronDocument
+            extension={extension}
             blockType={blockType}
             updateEmbedBlockAttributes={updateEmbedBlockAttributes}
             displayName={displayName}

diff --git a/...ges/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/WebsiteDocument.tsx b/...ges/editor/src/components/blockViews/EmbedView/embedViews/PreviewView/WebsiteDocument.tsx
@@ -3,10 +3,12 @@ import { FC } from 'react'
 import { EmbedBlockType, UpdateEmbedBlockAttributes } from '../../EmbedView'
 import { DocumentFooter } from './DocumentFooter'
 import { DocumentUnavailable } from './DocumentUnavailable'
+import { PreviewViewProps } from './PreviewView'
 import { useWebsiteDocumentStatus } from './useWebsiteDocumentStatus'
 
 export interface WebsiteDocumentProps {
   blockType: EmbedBlockType
+  extension: PreviewViewProps['extension']
   updateEmbedBlockAttributes: UpdateEmbedBlockAttributes
   url: string
   title?: string
@@ -29,6 +31,7 @@ const WebsiteFrame = styled('iframe', {
 })
 
 export const WebsiteDocument: FC<WebsiteDocumentProps> = ({
+  extension,
   blockType,
   updateEmbedBlockAttributes,
   icon,
@@ -44,6 +47,7 @@ export const WebsiteDocument: FC<WebsiteDocumentProps> = ({
       <DocumentFooter
         displayName={displayName}
         url={url}
+        extension={extension}
         name={url}
         icon={icon}
         blockType={blockType}