Merge branch 'master' into feat/db

e2e-tests/whiteboards.spec.ts

@@ -334,6 +334,25 @@ test('copy/paste url to create an iFrame shape', async ({ page }) => {
   await expect( page.locator('.logseq-tldraw .tl-iframe-container')).toHaveCount(1)
 })
 
+test('copy/paste X status url to create a Post shape', async ({ page }) => {
+  const canvas = await page.waitForSelector('.logseq-tldraw')
+  const bounds = (await canvas.boundingBox())!
+
+  await page.keyboard.type('wt')
+  await page.mouse.move(bounds.x + 105, bounds.y + 105)
+  await page.mouse.down()
+  await page.waitForTimeout(100)
+
+  await page.keyboard.type('https://x.com/logseq/status/1605224589046386689')
+  await page.keyboard.press(modKey + '+a')
+  await page.keyboard.press(modKey + '+c')
+  await page.keyboard.press('Escape')
+
+  await page.keyboard.press(modKey + '+v')
+
+  await expect( page.locator('.logseq-tldraw .tl-tweet-container')).toHaveCount(1)
+})
+
 test('copy/paste twitter status url to create a Tweet shape', async ({ page }) => {
   const canvas = await page.waitForSelector('.logseq-tldraw')
   const bounds = (await canvas.boundingBox())!
@@ -350,7 +369,7 @@ test('copy/paste twitter status url to create a Tweet shape', async ({ page }) =
 
   await page.keyboard.press(modKey + '+v')
 
-  await expect( page.locator('.logseq-tldraw .tl-tweet-container')).toHaveCount(1)
+  await expect( page.locator('.logseq-tldraw .tl-tweet-container')).toHaveCount(2)
 })
 
 test('copy/paste youtube video url to create a Youtube shape', async ({ page }) => {

packages/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -23,7 +23,7 @@ import {
   YouTubeShape,
   YOUTUBE_REGEX,
   TweetShape,
-  TWITTER_REGEX,
+  X_OR_TWITTER_REGEX,
   type Shape,
 } from '../lib'
 import { LogseqContext, LogseqContextValue } from '../lib/logseq-context'
@@ -320,7 +320,7 @@ const handleCreatingShapes = async (
         ]
       }
 
-      if (TWITTER_REGEX.test(rawText)) {
+      if (X_OR_TWITTER_REGEX.test(rawText)) {
         return [
           {
             ...TweetShape.defaultProps,

packages/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx

@@ -8,7 +8,8 @@ import { withClampedStyles } from './style-props'
 import { LogseqContext } from '../logseq-context'
 import * as React from 'react'
 
-export const TWITTER_REGEX = /https?:\/\/twitter.com\/[0-9a-zA-Z_]{1,20}\/status\/([0-9]*)/
+// https://regex101.com/r/cazpoJ/2
+export const X_OR_TWITTER_REGEX = /https?:\/\/(x|twitter).com\/[0-9a-zA-Z_]{1,20}\/status\/([0-9]*)/
 
 export interface TweetShapeProps extends TLBoxShapeProps {
   type: 'tweet'
@@ -34,7 +35,7 @@ export class TweetShape extends TLBoxShape<TweetShapeProps> {
 
   @computed get embedId() {
     const url = this.props.url
-    const match = url.match(TWITTER_REGEX)
+    const match = url.match(X_OR_TWITTER_REGEX)
     const embedId = match?.[1] ?? url ?? ''
     return embedId
   }