🐛 Fixed "Paste URL as link" embed card fallback (#1155)

part of ENG-594

- the button's onClick behaviour was directly calling the `handlePasteAsLink` function which results in the passed-in argument being a DOM event when the function expects a URL, updated to call the function with the URL as the argument
- unskipped test for this feature to avoid future regressions

packages/koenig-lexical/src/components/ui/UrlInput.jsx

@@ -50,7 +50,7 @@ export function UrlInput({dataTestId, value, placeholder, handleUrlChange, handl
                 <div>
                     <span className="mr-3" data-testid={`${dataTestId}-error-message`}>There was an error when parsing the URL.</span>
                     <button className="mr-3 cursor-pointer" data-testid={`${dataTestId}-error-retry`} type="button"><span className="underline" onClick={handleRetry}><strong>Retry</strong></span></button>
-                    <button className="mr-3 cursor-pointer" data-testid={`${dataTestId}-error-pasteAsLink`} type="button"><span className="underline" onClick={handlePasteAsLink}><strong>Paste URL as link</strong></span></button>
+                    <button className="mr-3 cursor-pointer" data-testid={`${dataTestId}-error-pasteAsLink`} type="button"><span className="underline" onClick={() => handlePasteAsLink(value)}><strong>Paste URL as link</strong></span></button>
                 </div>
                 <button className="cursor-pointer p-1" data-testid={`${dataTestId}-error-close`} type="button" onClick={handleClose}>
                     <CloseIcon className="red size-3"/>

packages/koenig-lexical/src/nodes/EmbedNodeComponent.jsx

@@ -169,4 +169,4 @@ export function EmbedNodeComponent({nodeKey, url, html, createdWithUrl, embedTyp
             </ActionToolbar>
         </>
     );
-}
+}

packages/koenig-lexical/test/e2e/cards/embed-card.test.js

@@ -186,24 +186,25 @@ test.describe('Embed card', async () => {
             await expect(page.locator('a[href="https://ghost.org/should-convert-to-link"]')).toBeVisible();
         });
 
-        // todo: test is failing, need to figure if the error in test logic or on code
-        test.skip('paste as link button removes card and inserts text node link', async function () {
+        test('paste as link button removes card and inserts text node link', async function () {
             await focusEditor(page);
             await insertEmbedCard(page);
 
             const urlInput = await page.getByTestId('embed-url');
-            await expect(urlInput).toHaveAttribute('placeholder','Paste URL to add embedded content...');
+            await expect(urlInput).toHaveAttribute('placeholder', 'Paste URL to add embedded content...');
 
-            await urlInput.fill('badurl');
-            await expect(urlInput).toHaveValue('badurl');
+            await urlInput.fill('https://ghost.org/should-convert-to-link');
+            await expect(urlInput).toHaveValue('https://ghost.org/should-convert-to-link');
             await urlInput.press('Enter');
 
-            const retryButton = await page.getByTestId('embed-url-error-pasteAsLink');
-            await retryButton.click();
+            const pasteAsLinkButton = await page.getByTestId('embed-url-error-pasteAsLink');
+            await pasteAsLinkButton.click();
 
             await assertHTML(page, html`
                 <p>
-                    <a href="badurl" dir="ltr"><span data-lexical-text="true">badurl</span></a>
+                    <a href="https://ghost.org/should-convert-to-link" dir="ltr">
+                        <span data-lexical-text="true">https://ghost.org/should-convert-to-link</span>
+                    </a>
                 </p>
                 <p><br /></p>
             `);
@@ -220,8 +221,8 @@ test.describe('Embed card', async () => {
             await expect(urlInput).toHaveValue('badurl');
             await urlInput.press('Enter');
 
-            const retryButton = await page.getByTestId('embed-url-error-close');
-            await retryButton.click();
+            const closeButton = await page.getByTestId('embed-url-error-close');
+            await closeButton.click();
 
             await assertHTML(page, html`<p><br /></p>`);
         });