feat: third-party embeds (#423)

* wip * Add more providers * icons * unify embed providers (Youtube) * fix case * YT music * remove redundant code
2025-11-10 04:22:00 +10:00 · 2024-10-29 18:13:20 +00:00
parent 978fadd6b9
commit ab70cee278
21 changed files with 667 additions and 41 deletions
--- a/apps/client/package.json
+++ b/apps/client/package.json
@ -9,9 +9,9 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@docmost/editor-ext": "workspace:*",
    "@casl/ability": "^6.7.1",
    "@casl/react": "^4.0.0",
+    "@docmost/editor-ext": "workspace:*",
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
    "@excalidraw/excalidraw": "^0.17.6",
--- a/apps/client/src/components/icons/airtable-icon.tsx
+++ b/apps/client/src/components/icons/airtable-icon.tsx
@ -0,0 +1,32 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function AirtableIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 215"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="#ffbf00"
+        d="M114.259 2.701 18.86 42.176c-5.305 2.195-5.25 9.73.089 11.847l95.797 37.989a35.544 35.544 0 0 0 26.208 0l95.799-37.99c5.337-2.115 5.393-9.65.086-11.846L141.442 2.7a35.549 35.549 0 0 0-27.183 0"
+      />
+      <path
+        fill="#26b5f8"
+        d="M136.35 112.757v94.902c0 4.514 4.55 7.605 8.746 5.942l106.748-41.435a6.39 6.39 0 0 0 4.035-5.941V71.322c0-4.514-4.551-7.604-8.747-5.941l-106.748 41.434a6.392 6.392 0 0 0-4.035 5.942"
+      />
+      <path
+        fill="#ed3049"
+        d="m111.423 117.654-31.68 15.296-3.217 1.555L9.65 166.548C5.411 168.593 0 165.504 0 160.795V71.72c0-1.704.874-3.175 2.046-4.283a7.266 7.266 0 0 1 1.618-1.213c1.598-.959 3.878-1.215 5.816-.448l101.41 40.18c5.155 2.045 5.56 9.268.533 11.697"
+      />
+      <path
+        fillOpacity={0.25}
+        d="m111.423 117.654-31.68 15.296L2.045 67.438a7.266 7.266 0 0 1 1.618-1.213c1.598-.959 3.878-1.215 5.816-.448l101.41 40.18c5.155 2.045 5.56 9.268.533 11.697"
+      />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/figma-icon.tsx
+++ b/apps/client/src/components/icons/figma-icon.tsx
@ -0,0 +1,23 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function FigmaIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <g fill="none" fillRule="evenodd" transform="translate(4)">
+        <circle cx={12} cy={12} r={4} fill="#19bcfe" />
+        <path fill="#09cf83" d="M4 24a4 4 0 0 0 4-4v-4H4a4 4 0 1 0 0 8z" />
+        <path fill="#a259ff" d="M4 16h4V8H4a4 4 0 1 0 0 8z" />
+        <path fill="#f24e1e" d="M4 8h4V0H4a4 4 0 1 0 0 8z" />
+        <path fill="#ff7262" d="M12 8H8V0h4a4 4 0 1 1 0 8z" />
+      </g>
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/framer-icon.tsx
+++ b/apps/client/src/components/icons/framer-icon.tsx
@ -0,0 +1,17 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function FramerIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path d="M4 0h16v8h-8zm0 8h8l8 8H4zm0 8h8v8z" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/google-drive-icon.tsx
+++ b/apps/client/src/components/icons/google-drive-icon.tsx
@ -0,0 +1,24 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GoogleDriveIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 87.3 78"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da" />
+      <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47" />
+      <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+            fill="#ea4335" />
+      <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d" />
+      <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc" />
+      <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+            fill="#ffba00" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/index.ts
+++ b/apps/client/src/components/icons/index.ts
@ -0,0 +1,10 @@
+export { AirtableIcon } from "./airtable-icon.tsx";
+export { FigmaIcon } from "./figma-icon.tsx";
+export { TypeformIcon } from "./typeform-icon.tsx";
+export { VimeoIcon } from "./vimeo-icon.tsx";
+export { MiroIcon } from "./miro-icon.tsx";
+export { GoogleDriveIcon } from "./google-drive-icon.tsx";
+export { FramerIcon } from "./framer-icon.tsx";
+export { LoomIcon } from "./loom-icon.tsx";
+export { YoutubeIcon } from "./youtube-icon.tsx";
+
--- a/apps/client/src/components/icons/loom-icon.tsx
+++ b/apps/client/src/components/icons/loom-icon.tsx
@ -0,0 +1,19 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function LoomIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#625DF5"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/miro-icon.tsx
+++ b/apps/client/src/components/icons/miro-icon.tsx
@ -0,0 +1,18 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function MiroIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M17.392 0H13.9L17 4.808 10.444 0H6.949l3.102 6.3L3.494 0H0l3.05 8.131L0 24h3.494L10.05 6.985 6.949 24h3.494L17 5.494 13.899 24h3.493L24 3.672 17.392 0z" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/typeform-icon.tsx
+++ b/apps/client/src/components/icons/typeform-icon.tsx
@ -0,0 +1,18 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function TypeformIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M15.502 13.035c-.5 0-.756-.411-.756-.917 0-.505.252-.894.756-.894.513 0 .756.407.756.894-.004.515-.261.917-.756.917Zm-4.888-1.81c.292 0 .414.17.414.317 0 .357-.365.514-1.126.536 0-.442.253-.854.712-.854Zm-3.241 1.81c-.473 0-.67-.384-.67-.917 0-.527.202-.894.67-.894.477 0 .702.38.702.894 0 .537-.234.917-.702.917Zm-3.997-2.334h-.738l1.224 2.808c-.234.519-.36.648-.522.648-.171 0-.333-.138-.45-.259l-.324.43c.22.232.522.366.832.366.387 0 .685-.224.856-.626l1.413-3.371h-.725l-.738 2.012-.828-2.008Zm19.553.523c.36 0 .432.246.432.823v1.516H24v-1.914c0-.689-.473-.988-.91-.988-.386 0-.742.241-.94.688a.901.901 0 0 0-.891-.688c-.365 0-.73.232-.927.666v-.626h-.64v2.857h.64v-1.22c0-.617.324-1.114.765-1.114.36 0 .427.246.427.823v1.516h.64l-.005-1.225c0-.617.329-1.114.77-1.114Zm-5.1-.523h-.324v2.857h.639v-1.095c0-.693.306-1.163.76-1.163.118 0 .217.005.325.05l.099-.676c-.081-.009-.153-.018-.225-.018-.45 0-.774.309-.964.707V10.7h-.31Zm-2.327-.045c-.846 0-1.418.644-1.418 1.458 0 .845.58 1.475 1.418 1.475.85 0 1.431-.648 1.431-1.475-.004-.818-.594-1.458-1.431-1.458Zm-4.852 2.38c-.333 0-.581-.17-.685-.515.847-.036 1.675-.242 1.675-.988 0-.43-.423-.872-1.03-.872-.82 0-1.374.666-1.374 1.457 0 .828.545 1.476 1.36 1.476.567 0 .927-.228 1.21-.559l-.31-.42c-.329.335-.531.42-.846.42Zm-3.151-2.38c-.324 0-.648.188-.774.483v-.438h-.64v3.98h.64v-1.422c.135.205.445.34.72.34.85 0 1.3-.631 1.3-1.48-.004-.841-.445-1.463-1.246-1.463Zm-4.483-1.1H0v.622h1.18v3.38h.67v-3.38h1.166v-.622Zm9.502 1.145h-.383v.572h.383v2.285h.639v-2.285h.621v-.572h-.621v-.447c0-.286.117-.385.382-.385.1 0 .19.027.311.068l.144-.537c-.117-.067-.351-.094-.504-.094-.612 0-.972.367-.972 1.002v.393Z" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/vimeo-icon.tsx
+++ b/apps/client/src/components/icons/vimeo-icon.tsx
@ -0,0 +1,19 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function VimeoIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#1AB7EA"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z" />
+    </svg>
+  );
+}
--- a/apps/client/src/components/icons/youtube-icon.tsx
+++ b/apps/client/src/components/icons/youtube-icon.tsx
@ -0,0 +1,19 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function YoutubeIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#FF0000"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+}
--- a/apps/client/src/features/editor/components/embed/embed-view.tsx
+++ b/apps/client/src/features/editor/components/embed/embed-view.tsx
@ -0,0 +1,111 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { ActionIcon, AspectRatio, Button, Card, FocusTrap, Group, Popover, Text, TextInput } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+import { z } from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import {
+  getEmbedProviderById,
+  getEmbedUrlAndProvider
+} from "@/features/editor/components/embed/providers.ts";
+import { notifications } from '@mantine/notifications';
+
+const schema = z.object({
+  url: z
+    .string().trim().url({ message: 'please enter a valid url' }),
+});
+
+export default function EmbedView(props: NodeViewProps) {
+  const { node, selected, updateAttributes } = props;
+  const { src, provider } = node.attrs;
+
+  const embedUrl = useMemo(() => {
+    if (src) {
+      return getEmbedUrlAndProvider(src).embedUrl;
+    }
+    return null;
+  }, [src]);
+
+  const embedForm = useForm<{ url: string }>({
+    initialValues: {
+      url: "",
+    },
+    validate: zodResolver(schema),
+  });
+
+  async function onSubmit(data: { url: string }) {
+    if (provider) {
+      const embedProvider = getEmbedProviderById(provider);
+      if (embedProvider.regex.test(data.url)) {
+        updateAttributes({ src: data.url });
+      } else {
+        notifications.show({
+          message: `Invalid ${provider} embed link`,
+          position: 'top-right',
+          color: 'red'
+        });
+      }
+    }
+  }
+
+  return (
+    <NodeViewWrapper>
+      {embedUrl ? (
+        <>
+          <AspectRatio ratio={16 / 9}>
+            <iframe
+              src={embedUrl}
+              allow="encrypted-media"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+              allowFullScreen
+              frameBorder="0"
+            ></iframe>
+          </AspectRatio>
+
+        </>
+      ) : (
+        <Popover width={300} position="bottom" withArrow shadow="md">
+          <Popover.Target>
+            <Card
+              radius="md"
+              p="xs"
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              withBorder
+              className={clsx(selected ? 'ProseMirror-selectednode' : '')}
+            >
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <ActionIcon variant="transparent" color="gray">
+                  <IconEdit size={18} />
+                </ActionIcon>
+
+                <Text component="span" size="lg" c="dimmed">
+                  Embed {getEmbedProviderById(provider).name}
+                </Text>
+              </div>
+            </Card>
+          </Popover.Target>
+          <Popover.Dropdown bg="var(--mantine-color-body)">
+            <form onSubmit={embedForm.onSubmit(onSubmit)}>
+              <FocusTrap active={true}>
+                <TextInput placeholder={`Enter ${getEmbedProviderById(provider).name} link to embed`}
+                           key={embedForm.key('url')}
+                           {... embedForm.getInputProps('url')}
+                           data-autofocus
+                />
+              </FocusTrap>
+
+              <Group justify="center" mt="xs">
+                <Button type="submit">Embed link</Button>
+              </Group>
+            </form>
+          </Popover.Dropdown>
+        </Popover>
+      )}
+    </NodeViewWrapper>
+  );
+}
--- a/apps/client/src/features/editor/components/embed/providers.ts
+++ b/apps/client/src/features/editor/components/embed/providers.ts
@ -0,0 +1,109 @@
+export interface IEmbedProvider {
+  id: string;
+  name: string;
+  regex: RegExp;
+  getEmbedUrl: (match: RegExpMatchArray, url?: string) => string;
+}
+
+export const embedProviders: IEmbedProvider[] = [
+  {
+    id: 'loom',
+    name: 'Loom',
+    regex: /^https?:\/\/(?:www\.)?loom\.com\/(?:share|embed)\/([\da-zA-Z]+)\/?/,
+    getEmbedUrl: (match) => {
+      return `https://loom.com/embed/${match[1]}`;
+    }
+  },
+  {
+    id: 'airtable',
+    name: 'Airtable',
+    regex: /^https:\/\/(www.)?airtable.com\/([a-zA-Z0-9]{2,})\/.*/,
+    getEmbedUrl: (match, url: string) => {
+      const path = url.split('airtable.com/');
+      return `https://airtable.com/embed/${path[1]}`;
+    }
+  },
+  {
+    id: 'figma',
+    name: 'Figma',
+    regex: /^https:\/\/[\w\.-]+\.?figma.com\/(file|proto|board|design|slides|deck)\/([0-9a-zA-Z]{22,128})/,
+    getEmbedUrl: (match, url: string) => {
+      return `https://www.figma.com/embed?url=${url}&embed_host=docmost`;
+    }
+  },
+  {
+    'id': 'typeform',
+    name: 'Typeform',
+    regex: /^(https?:)?(\/\/)?[\w\.]+\.typeform\.com\/to\/.+/,
+    getEmbedUrl: (match, url: string) => {
+      return url;
+    }
+  },
+  {
+    id: 'miro',
+    name: 'Miro',
+    regex: /^https:\/\/(www\.)?miro\.com\/app\/board\/([\w-]+=)/,
+    getEmbedUrl: (match) => {
+      return `https://miro.com/app/live-embed/${match[2]}?embedMode=view_only_without_ui&autoplay=true&embedSource=docmost`;
+    }
+  },
+  {
+    id: 'youtube',
+    name: 'YouTube',
+    regex: /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/,
+    getEmbedUrl: (match) => {
+      return `https://www.youtube-nocookie.com/embed/${match[5]}`;
+    }
+  },
+  {
+    id: 'vimeo',
+    name: 'Vimeo',
+    regex: /^(https:)?\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)/,
+    getEmbedUrl: (match) => {
+      return `https://player.vimeo.com/video/${match[4]}`;
+    }
+  },
+  {
+    id: 'framer',
+    name: 'Framer',
+    regex: /^https:\/\/(www\.)?framer\.com\/embed\/([\w-]+)/,
+    getEmbedUrl: (match, url: string) => {
+      return url;
+    }
+  },
+  {
+    id: 'gdrive',
+    name: 'Google Drive',
+    regex: /^((?:https?:)?\/\/)?((?:www|m)\.)?(drive\.google\.com)\/file\/d\/([a-zA-Z0-9_-]+)\/.*$/,
+    getEmbedUrl: (match) => {
+      return `https://drive.google.com/file/d/${match[4]}/preview`;
+    }
+  },
+];
+
+export function getEmbedProviderById(id: string) {
+  return embedProviders.find(provider => provider.id.toLowerCase() === id.toLowerCase());
+}
+
+export interface IEmbedResult {
+  embedUrl: string;
+  provider: string;
+}
+
+export function getEmbedUrlAndProvider(url: string): IEmbedResult {
+  for (const provider of embedProviders) {
+    const match = url.match(provider.regex);
+    if (match) {
+      return {
+        embedUrl: provider.getEmbedUrl(match, url),
+        provider: provider.name.toLowerCase()
+      };
+    }
+  }
+  return {
+    embedUrl: url,
+    provider: 'iframe',
+  };
+}
+
+
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@ -29,6 +29,16 @@ import { uploadAttachmentAction } from "@/features/editor/components/attachment/
 import IconExcalidraw from "@/components/icons/icon-excalidraw";
 import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
+import {
+  AirtableIcon,
+  FigmaIcon,
+  FramerIcon,
+  GoogleDriveIcon,
+  LoomIcon,
+  MiroIcon,
+  TypeformIcon,
+  VimeoIcon, YoutubeIcon
+} from "@/components/icons";

 const CommandGroups: SlashMenuGroupedItemsType = {
  basic: [
@ -343,7 +353,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          day: "numeric",
        });

-        return editor
+        editor
          .chain()
          .focus()
          .deleteRange(range)
@ -351,6 +361,87 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          .run();
      },
    },
+    {
+      title: "Airtable",
+      description: "Embed Airtable",
+      searchTerms: ["airtable"],
+      icon: AirtableIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'airtable' }).run();
+      },
+    },
+    {
+      title: "Loom",
+      description: "Embed Loom video",
+      searchTerms: ["loom"],
+      icon: LoomIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'loom' }).run();
+      },
+    },
+    {
+      title: "Figma",
+      description: "Embed Figma files",
+      searchTerms: ["figma"],
+      icon: FigmaIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'figma' }).run();
+      },
+    },
+    {
+      title: "Typeform",
+      description: "Embed Typeform",
+      searchTerms: ["typeform"],
+      icon: TypeformIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'typeform' }).run();
+      },
+    },
+    {
+      title: "Miro",
+      description: "Embed Miro board",
+      searchTerms: ["miro"],
+      icon: MiroIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'miro' }).run();
+      },
+    },
+    {
+      title: "YouTube",
+      description: "Embed YouTube video",
+      searchTerms: ["youtube", "yt"],
+      icon: YoutubeIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'youtube' }).run();
+      },
+    },
+    {
+      title: "Vimeo",
+      description: "Embed Vimeo video",
+      searchTerms: ["vimeo"],
+      icon: VimeoIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'vimeo' }).run();
+      },
+    },
+    {
+      title: "Framer",
+      description: "Embed Framer prototype",
+      searchTerms: ["framer"],
+      icon: FramerIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'framer' }).run();
+      },
+    },
+    {
+      title: "Google Drive",
+      description: "Embed Google Drive content",
+      searchTerms: ["google drive", "gdrive"],
+      icon: GoogleDriveIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gdrive' }).run();
+      },
+    },
  ],
 };

@ -362,7 +453,7 @@ export const getSuggestionItems = ({
  const search = query.toLowerCase();
  const filteredGroups: SlashMenuGroupedItemsType = {};

-  const fuzzyMatch = (query, target) => {
+  const fuzzyMatch = (query: string, target: string) => {
    let queryIndex = 0;
    target = target.toLowerCase();
    for (let char of target) {
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@ -35,6 +35,7 @@ import {
  CustomCodeBlock,
  Drawio,
  Excalidraw,
+  Embed
 } from "@docmost/editor-ext";
 import {
  randomElement,
@ -53,6 +54,7 @@ import AttachmentView from "@/features/editor/components/attachment/attachment-v
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
+import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
 import elixir from "highlight.js/lib/languages/elixir";
@ -149,6 +151,7 @@ export const mainExtensions = [
  DetailsSummary,
  DetailsContent,
  Youtube.configure({
+    addPasteHandler: false,
    controls: true,
    nocookie: true,
  }),
@ -179,6 +182,9 @@ export const mainExtensions = [
  Excalidraw.configure({
    view: ExcalidrawView,
  }),
+  Embed.configure({
+    view: EmbedView,
+  })
 ] as any;

 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
--- a/apps/client/src/lib/utils.ts
+++ b/apps/client/src/lib/utils.ts
@ -71,3 +71,7 @@ export function decodeBase64ToSvgString(base64Data: string): string {

  return decodeBase64(base64Data);
 }
+
+export function capitalizeFirstChar(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
--- a/apps/server/src/collaboration/collaboration.util.ts
+++ b/apps/server/src/collaboration/collaboration.util.ts
@ -1,15 +1,15 @@
-import { StarterKit } from '@tiptap/starter-kit';
-import { TextAlign } from '@tiptap/extension-text-align';
-import { TaskList } from '@tiptap/extension-task-list';
-import { TaskItem } from '@tiptap/extension-task-item';
-import { Underline } from '@tiptap/extension-underline';
-import { Superscript } from '@tiptap/extension-superscript';
+import {StarterKit} from '@tiptap/starter-kit';
+import {TextAlign} from '@tiptap/extension-text-align';
+import {TaskList} from '@tiptap/extension-task-list';
+import {TaskItem} from '@tiptap/extension-task-item';
+import {Underline} from '@tiptap/extension-underline';
+import {Superscript} from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
-import { Highlight } from '@tiptap/extension-highlight';
-import { Typography } from '@tiptap/extension-typography';
-import { TextStyle } from '@tiptap/extension-text-style';
-import { Color } from '@tiptap/extension-color';
-import { Youtube } from '@tiptap/extension-youtube';
+import {Highlight} from '@tiptap/extension-highlight';
+import {Typography} from '@tiptap/extension-typography';
+import {TextStyle} from '@tiptap/extension-text-style';
+import {Color} from '@tiptap/extension-color';
+import {Youtube} from '@tiptap/extension-youtube';
 import Table from '@tiptap/extension-table';
 import TableHeader from '@tiptap/extension-table-header';
 import {
@ -30,13 +30,14 @@ import {
  Attachment,
  Drawio,
  Excalidraw,
+  Embed
 } from '@docmost/editor-ext';
-import { generateText, JSONContent } from '@tiptap/core';
-import { generateHTML } from '../common/helpers/prosemirror/html';
+import {generateText, JSONContent} from '@tiptap/core';
+import {generateHTML} from '../common/helpers/prosemirror/html';
 // @tiptap/html library works best for generating prosemirror json state but not HTML
 // see: https://github.com/ueberdosis/tiptap/issues/5352
 // see:https://github.com/ueberdosis/tiptap/issues/4089
-import { generateJSON } from '@tiptap/html';
+import {generateJSON} from '@tiptap/html';

 export const tiptapExtensions = [
  StarterKit.configure({
@ -72,6 +73,7 @@ export const tiptapExtensions = [
  CustomCodeBlock,
  Drawio,
  Excalidraw,
+  Embed
 ] as any;

 export function jsonToHtml(tiptapJson: any) {
--- a/packages/editor-ext/src/index.ts
+++ b/packages/editor-ext/src/index.ts
@ -14,4 +14,5 @@ export * from "./lib/attachment";
 export * from "./lib/custom-code-block"
 export * from "./lib/drawio";
 export * from "./lib/excalidraw";
+export * from "./lib/embed";

--- a/packages/editor-ext/src/lib/embed.ts
+++ b/packages/editor-ext/src/lib/embed.ts
@ -0,0 +1,122 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+export interface EmbedOptions {
+  HTMLAttributes: Record<string, any>;
+  view: any;
+}
+export interface EmbedAttributes {
+  src?: string;
+  provider: string;
+  align?: string;
+  width?: number;
+  height?: number;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    embeds: {
+      setEmbed: (attributes?: EmbedAttributes) => ReturnType;
+    };
+  }
+}
+
+export const Embed = Node.create<EmbedOptions>({
+  name: 'embed',
+  inline: false,
+  group: 'block',
+  isolating: true,
+  atom: true,
+  defining: true,
+  draggable: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: '',
+        parseHTML: (element) => element.getAttribute('data-src'),
+        renderHTML: (attributes: EmbedAttributes) => ({
+          'data-src': attributes.src,
+        }),
+      },
+      provider: {
+        default: '',
+        parseHTML: (element) => element.getAttribute('data-provider'),
+        renderHTML: (attributes: EmbedAttributes) => ({
+          'data-provider': attributes.provider,
+        }),
+      },
+      align: {
+        default: 'center',
+        parseHTML: (element) => element.getAttribute('data-align'),
+        renderHTML: (attributes: EmbedAttributes) => ({
+          'data-align': attributes.align,
+        }),
+      },
+      width: {
+        default: 640,
+        parseHTML: (element) => element.getAttribute('data-width'),
+        renderHTML: (attributes: EmbedAttributes) => ({
+          'data-width': attributes.width,
+        }),
+      },
+      height: {
+        default: 480,
+        parseHTML: (element) => element.getAttribute('data-height'),
+        renderHTML: (attributes: EmbedAttributes) => ({
+          'data-height': attributes.height,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(
+        { "data-type": this.name },
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+      ),
+      [
+        "a",
+        {
+          href: HTMLAttributes["data-src"],
+          target: "blank",
+        },
+        `${HTMLAttributes["data-src"]}`,
+      ],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setEmbed:
+        (attrs: EmbedAttributes) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: 'embed',
+            attrs: attrs,
+          });
+        },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(this.options.view);
+  },
+});
--- a/packages/editor-ext/src/lib/link.ts
+++ b/packages/editor-ext/src/lib/link.ts
@ -1,4 +1,3 @@
-import { mergeAttributes } from "@tiptap/core";
 import TiptapLink from "@tiptap/extension-link";
 import { Plugin } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
@ -6,24 +5,6 @@ import { EditorView } from "@tiptap/pm/view";
 export const LinkExtension = TiptapLink.extend({
  inclusive: false,

-  parseHTML() {
-    return [
-      {
-        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "a",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: "link",
-      }),
-      0,
-    ];
-  },
-
  addProseMirrorPlugins() {
    const { editor } = this;

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -3480,10 +3480,10 @@ packages:
    peerDependencies:
      '@tiptap/core': ^2.6.6

-  '@tiptap/extension-paragraph@2.6.6':
-    resolution: {integrity: sha512-fD/onCr16UQWx+/xEmuFC2MccZZ7J5u4YaENh8LMnAnBXf78iwU7CAcmuc9rfAEO3qiLoYGXgLKiHlh2ZfD4wA==}
+  '@tiptap/extension-paragraph@2.8.0':
+    resolution: {integrity: sha512-XgxxNNbuBF48rAGwv7/s6as92/xjm/lTZIGTq9aG13ClUKFtgdel7C33SpUCcxg3cO2WkEyllXVyKUiauFZw/A==}
    peerDependencies:
-      '@tiptap/core': ^2.6.6
+      '@tiptap/core': ^2.7.0

  '@tiptap/extension-placeholder@2.6.6':
    resolution: {integrity: sha512-J0ZMvF93NsRrt+R7IQ3GhxNq32vq+88g25oV/YFJiwvC48HMu1tQB6kG1I3LJpu5b8lN+LnfANNqDOEhiBfjaA==}
@ -11543,7 +11543,7 @@ snapshots:
    dependencies:
      '@tiptap/core': 2.6.6(@tiptap/pm@2.6.6)

-  '@tiptap/extension-paragraph@2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))':
+  '@tiptap/extension-paragraph@2.8.0(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))':
    dependencies:
      '@tiptap/core': 2.6.6(@tiptap/pm@2.6.6)

@ -11670,7 +11670,7 @@ snapshots:
      '@tiptap/extension-italic': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
      '@tiptap/extension-list-item': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
      '@tiptap/extension-ordered-list': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
-      '@tiptap/extension-paragraph': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
+      '@tiptap/extension-paragraph': 2.8.0(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
      '@tiptap/extension-strike': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
      '@tiptap/extension-text': 2.6.6(@tiptap/core@2.6.6(@tiptap/pm@2.6.6))
      '@tiptap/pm': 2.6.6