feat(v5.5.0): Embeds & Media riche - universal embeds, bookmark cards, lightbox, inline previews, cover & icon

- embeds.py: provider detection/rewrite (YouTube, Vimeo, Figma, Maps, Docs,
  Loom, CodePen, Miro, Spotify, SoundCloud, Twitch, X/Twitter, Pinterest,
  Office) + resolve_embed/inline_kind/provider; POST /board/api/embed/resolve
- editor resolves pasted URLs and caches embed_src (persisted); renderer,
  public pages and MD/HTML/PDF exports prefer embed_src
- og_fetcher.py: robust meta parsing (any attribute order), favicon,
  injectable transport, network-safe fallback
- image lightbox with keyboard nav (arrows/Esc) in editor and public pages
- inline PDF/video/audio previews
- cover (URL or upload) & page icon endpoints
- fix broken editor API paths (/api/pages -> /board/api/pages) for cover,
  icon, versions, backlinks, import, move and OG metadata
- 47 tests in tests/test_v55.py; full suite 444 green; ruff clean
- version 5.11.2

app/services/embeds.py

@@ -1,9 +1,10 @@
 """FlowDeck — Media embeds (v5.5.0): provider detection + iframe rewriting.
 
 Maps a raw http(s) URL to a provider-specific embed URL so that one generic
-``embed`` block can render YouTube, Vimeo, Figma, Google Maps, Loom,
-CodePen, Miro, Spotify, SoundCloud, Twitch, X/Twitter, Pinterest, Office
-docs… exactly like Notion's universal embed.
+``embed`` block can render YouTube, Vimeo, Figma, Google Maps, Google
+Docs/Sheets/Slides, Loom, CodePen, Miro, Spotify, SoundCloud, Twitch,
+X/Twitter, Pinterest, Microsoft Office docs… exactly like Notion's universal
+embed.
 
 Unknown/showable URLs (PDF, images, direct video/audio files, plain http)
 fall back to a plain iframe so the link is still visible inline.
@@ -11,11 +12,7 @@ fall back to a plain iframe so the link is still visible inline.
 from __future__ import annotations
 
 import re
-from urllib.parse import parse_qs, urlparse
-
-_PROVIDERS = (
-    # (host pattern, extra path check, to_embed(url, path, query) -> str | None)
-)
+from urllib.parse import parse_qs, quote, urlparse
 
 
 def _q(params, key):
@@ -23,9 +20,21 @@ def _q(params, key):
     return vals[0] if vals else ""
 
 
-def _embed_youtube(url: str, path: str, params) -> str | None:
-    m = re.search(r"((?:v|shorts|embed)/|be/)([A-Za-z0-9_-]{6,20})", path)
-    vid = m.group(2) if m else _q(params, "v")
+def _host_matches(netloc: str, host: str) -> bool:
+    """True when ``netloc`` is ``host`` or one of its subdomains."""
+    netloc = (netloc or "").lower().split(":")[0]
+    host = host.lower()
+    return netloc == host or netloc.endswith("." + host)
+
+
+def _embed_youtube(url: str, path: str, params, ctx: dict) -> str | None:
+    m = re.search(r"/(?:v|shorts|embed|live)/([A-Za-z0-9_-]{6,20})", path)
+    vid = m.group(1) if m else _q(params, "v")
+    if not vid:
+        # youtu.be/<id> (short link) — the id is the first path segment.
+        seg = path.strip("/").split("/")[0]
+        if re.fullmatch(r"[A-Za-z0-9_-]{6,20}", seg or ""):
+            vid = seg
     if not vid:
         return None
     start = _q(params, "t") or _q(params, "start")
@@ -33,98 +42,122 @@ def _embed_youtube(url: str, path: str, params) -> str | None:
     return f"https://www.youtube.com/embed/{vid}{frag}"
 
 
-def _embed_vimeo(url: str, path: str, params) -> str | None:
+def _embed_vimeo(url: str, path: str, params, ctx: dict) -> str | None:
     m = re.search(r"/(\d{6,12})", path)
     if not m:
         return None
     return f"https://player.vimeo.com/video/{m.group(1)}"
 
 
-def _embed_loom(url: str, path: str, params) -> str | None:
-    m = re.search(r"/(embed/)?([0-9a-f]{32})", path)
+def _embed_loom(url: str, path: str, params, ctx: dict) -> str | None:
+    m = re.search(r"/(?:embed/|share/)?([0-9a-f]{32})", path)
     if not m:
         return None
-    return f"https://www.loom.com/embed/{m.group(2)}"
+    return f"https://www.loom.com/embed/{m.group(1)}"
 
 
-def _embed_figma(url: str, path: str, params) -> str | None:
-    if "figma.com/file/" not in url and "figma.com/proto/" not in url:
+def _embed_figma(url: str, path: str, params, ctx: dict) -> str | None:
+    clean = url.split("?", 1)[0]
+    if "figma.com/file/" not in clean and "figma.com/proto/" not in clean and "figma.com/design/" not in clean:
         return None
-    m = re.search(r"(/[^/]+/[^?]+)", url.split("?", 1)[0])
-    if not m:
-        return None
-    return "https://www.figma.com/embed?embed_host=flowdeck&url=" + url.split("?", 1)[0]
+    return "https://www.figma.com/embed?embed_host=flowdeck&url=" + quote(clean, safe="")
 
 
-def _embed_map(url: str, path: str, params) -> str | None:
+def _embed_map(url: str, path: str, params, ctx: dict) -> str | None:
     if "google.com/maps" not in url and "maps.app.goo.gl" not in url:
         return None
-    return f"https://www.google.com/maps?output=embed&q={url}"
+    return "https://maps.google.com/maps?q=" + quote(url, safe="") + "&output=embed"
 
 
-def _embed_codepen(url: str, path: str, params) -> str | None:
+def _embed_gdocs(url: str, path: str, params, ctx: dict) -> str | None:
+    m = re.search(
+        r"docs\.google\.com/(document|spreadsheets|presentation|forms)/d/([A-Za-z0-9_-]+)", url
+    )
+    if not m:
+        return None
+    kind, doc_id = m.group(1), m.group(2)
+    if kind == "forms":
+        return f"https://docs.google.com/forms/d/{doc_id}/viewform?embedded=true"
+    return f"https://docs.google.com/{kind}/d/{doc_id}/preview"
+
+
+def _embed_codepen(url: str, path: str, params, ctx: dict) -> str | None:
     m = re.search(r"codepen\.io/([^/]+)/pen/([^/?#]+)", url)
     if not m:
         return None
     return f"https://codepen.io/{m.group(1)}/embed/{m.group(2)}?default-tab=result"
 
 
-def _embed_miro(url: str, path: str, params) -> str | None:
-    m = re.search(r"miro\.com/app/board/([^/?#]+)", url)
+def _embed_miro(url: str, path: str, params, ctx: dict) -> str | None:
+    m = re.search(r"miro\.com/app/(?:board|live-embed)/([^/?#]+)", url)
     if not m:
         return None
     return f"https://miro.com/app/live-embed/{m.group(1)}"
 
 
-def _embed_spotify(url: str, path: str, params) -> str | None:
+def _embed_spotify(url: str, path: str, params, ctx: dict) -> str | None:
     m = re.search(r"/(track|playlist|album|episode|show|artist)/([A-Za-z0-9]+)", url)
     if not m:
         return None
     return f"https://open.spotify.com/embed/{m.group(1)}/{m.group(2)}"
 
 
-def _embed_soundcloud(url: str, path: str, params) -> str | None:
-    m = re.search(r"(?:soundcloud\.com/[^/]+/[^/?#]+)", url)
-    if not m:
+def _embed_soundcloud(url: str, path: str, params, ctx: dict) -> str | None:
+    if "soundcloud.com" not in url:
         return None
-    return f"https://w.soundcloud.com/player/?url={url}&color=%2300aaff"
+    return "https://w.soundcloud.com/player/?url=" + quote(url, safe="") + "&color=%2300aaff"
 
 
-def _embed_twitch(url: str, path: str, params) -> str | None:
+def _embed_twitch(url: str, path: str, params, ctx: dict) -> str | None:
     if "twitch.tv" not in url:
         return None
+    parent = (ctx.get("parent") or "localhost").replace("https://", "").replace("http://", "").split("/")[0]
+    video = re.search(r"twitch\.tv/videos/(\d+)", url)
+    if video:
+        return f"https://player.twitch.tv/?video={video.group(1)}&parent={parent}"
     m = re.search(r"twitch\.tv/([^/?#]+)", url)
-    if not m:
+    if not m or m.group(1) in ("videos", "directory"):
         return None
-    return f"https://player.twitch.tv/?channel={m.group(1)}&parent="
+    return f"https://player.twitch.tv/?channel={m.group(1)}&parent={parent}"
 
 
-def _embed_twitter(url: str, path: str, params) -> str | None:
+def _embed_twitter(url: str, path: str, params, ctx: dict) -> str | None:
     if "twitter.com" not in url and "x.com" not in url:
         return None
-    m = re.search(r"/([^/?#]+)/status/(\d+)", url)
+    m = re.search(r"/status(?:es)?/(\d+)", url)
     if not m:
-        return f"https://platform.twitter.com/embed/Tweet.html?url={url}"
-    return f"https://platform.twitter.com/embed/Tweet.html?id={m.group(2)}"
+        return f"https://platform.twitter.com/embed/Tweet.html?url={quote(url, safe='')}"
+    return f"https://platform.twitter.com/embed/Tweet.html?id={m.group(1)}"
 
 
-def _embed_pinterest(url: str, path: str, params) -> str | None:
+def _embed_pinterest(url: str, path: str, params, ctx: dict) -> str | None:
     if "pinterest" not in url:
         return None
-    return f"https://pinterest.com/pin/embed?url={url}"
+    return f"https://pinterest.com/pin/embed?url={quote(url, safe='')}"
 
 
-def _embed_files(url: str, path: str, params) -> str | None:
+def _embed_office(url: str, path: str, params, ctx: dict) -> str | None:
+    low = url.lower().split("?", 1)[0]
+    if low.endswith((".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".odt", ".ods", ".odp")):
+        return "https://view.officeapps.live.com/op/embed.aspx?src=" + quote(url, safe="")
+    if "officeapps.live.com" in low or "sharepoint.com" in low or "1drv.ms" in low:
+        return "https://view.officeapps.live.com/op/embed.aspx?src=" + quote(url, safe="")
+    return None
+
+
+def _embed_files(url: str, path: str, params, ctx: dict) -> str | None:
     """Direct media: PDF/images/videos/audio can live in a plain iframe."""
     return url
 
 
+# (host, handler) — order matters: more specific hosts first.
 _HANDLERS = (
     ("youtube.com", _embed_youtube),
     ("youtu.be", _embed_youtube),
     ("vimeo.com", _embed_vimeo),
     ("loom.com", _embed_loom),
     ("figma.com", _embed_figma),
+    ("docs.google.com", _embed_gdocs),
     ("google.com/maps", _embed_map),
     ("maps.app.goo.gl", _embed_map),
     ("codepen.io", _embed_codepen),
@@ -135,27 +168,54 @@ _HANDLERS = (
     ("twitch.tv", _embed_twitch),
     ("twitter.com", _embed_twitter),
     ("x.com", _embed_twitter),
-    ("pinterest", _embed_pinterest),
+    ("pinterest.", _embed_pinterest),
+    ("office.com", _embed_office),
+    ("officeapps.live.com", _embed_office),
+    ("sharepoint.com", _embed_office),
+    ("1drv.ms", _embed_office),
 )
 
 
-def embed_src(url: str) -> str | None:
+_SCHEME_RE = re.compile(r"^([a-zA-Z][a-zA-Z0-9+.-]*):")
+
+
+def _parse(url: str):
+    raw = url.strip()
+    if not raw:
+        return None, None, None
+    m = _SCHEME_RE.match(raw)
+    if m:
+        if m.group(1).lower() not in ("http", "https"):
+            return None, None, None  # mailto:, tel:, javascript:, data:…
+    else:
+        raw = "https://" + raw
+    u = urlparse(raw)
+    if u.scheme not in ("http", "https") or not u.netloc:
+        return None, None, None
+    host = u.hostname or ""
+    if "." not in host and host != "localhost":
+        return None, None, None  # a bare word is not a URL
+    return raw, u, parse_qs(u.query)
+
+
+def embed_src(url: str, *, parent: str = "") -> str | None:
     """Return the embeddable iframe src for a URL, or None if it can't embed."""
-    if not url:
+    raw, u, params = _parse(url)
+    if raw is None:
         return None
-    url = url.strip()
-    u = urlparse(url if url.startswith("http") else "https://" + url)
-    if u.scheme not in ("http", "https"):
-        return None
-    (u.hostname or "").lower().replace("www.", "")
+    ctx = {"parent": parent}
     netloc = (u.netloc or "").lower()
-    params = parse_qs(u.query)
-    # Google Maps share links encode the query in the path (…&q=/maps/…)
-    encoded = url
     for needle, handler in _HANDLERS:
-        if needle in netloc:
-            return handler(encoded, u.path, params)
-    return _embed_files(encoded, u.path, params)
+        if "/" in needle or needle.endswith("."):
+            if needle in raw.lower():
+                return handler(raw, u.path, params, ctx)
+        elif _host_matches(netloc, needle):
+            return handler(raw, u.path, params, ctx)
+    # Office documents hosted on arbitrary domains.
+    office = _embed_office(raw, u.path, params, ctx)
+    if office:
+        return office
+    return _embed_files(raw, u.path, params, ctx)
 
 
 _IMAGE_EXT = re.compile(r"\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$", re.I)
@@ -165,12 +225,12 @@ _AUDIO_EXT = re.compile(r"\.(mp3|wav|ogg|oga|m4a|flac|aac)$", re.I)
 
 
 def inline_kind(url: str) -> str | None:
-    """Best inline renderer for a URL: 'iframe' | 'image' | 'pdf' | 'video' |
+    """Best inline renderer for a URL: 'iframe' | 'image' | 'pdf' | 'video'
     | 'audio'. Returns None when the URL should open in a new tab."""
-    if not url:
+    raw, u, _params = _parse(url)
+    if raw is None:
         return None
-    url = url.strip()
-    path = urlparse(url).path
+    path = u.path or ""
     if _IMAGE_EXT.search(path):
         return "image"
     if _PDF_EXT.search(path):
@@ -179,9 +239,33 @@ def inline_kind(url: str) -> str | None:
         return "video"
     if _AUDIO_EXT.search(path):
         return "audio"
-    if url.startswith(("http://", "https://")):
-        return "iframe"
-    return None
+    return "iframe"
+
+
+def provider(url: str) -> str:
+    """Human-readable provider name for a URL (used by the editor)."""
+    raw, u, _params = _parse(url)
+    if raw is None:
+        return ""
+    netloc = (u.netloc or "").lower()
+    for needle, _handler in _HANDLERS:
+        if "/" in needle or needle.endswith("."):
+            if needle in raw.lower():
+                return needle.split(".")[0].rstrip(".")
+        elif _host_matches(netloc, needle):
+            name = needle.split(".")[0]
+            return "youtube" if name == "youtu" else name
+    return ""
+
+
+def resolve_embed(url: str, *, parent: str = "") -> dict:
+    """Resolve a URL to ``{src, kind, provider}`` for the generic embed block."""
+    kind = inline_kind(url)
+    return {
+        "src": embed_src(url, parent=parent) or "",
+        "kind": kind or "",
+        "provider": provider(url),
+    }
 
 
 def embed_html(src: str, *, height: int = 520) -> str:

app/services/export.py

@@ -665,7 +665,7 @@ def blocks_to_html(blocks: list) -> str:
                 parts.append(f'<iframe src="{_text(url)}" style="width:100%;height:70vh;border:none;border-radius:8px;"></iframe>')
             elif url:
                 from app.services.embeds import embed_src
-                src = embed_src(url) or url
+                src = b.get("embed_src") or embed_src(url) or url
                 height = 520
                 if b.get("height"):
                     try:

app/services/og_fetcher.py

@@ -7,39 +7,44 @@ slow/unreachable hosts.
 """
 from __future__ import annotations
 
+import html as htmlmod
 import logging
 import re
 from urllib.parse import urljoin, urlparse
 
 logger = logging.getLogger(__name__)
 
-_META_RE = re.compile(
-    r'<meta\b[^>]*?(?:content=[\'"]([^\'"]*)[\'"]|property=[\'"]([^\'"]*)[\'"]|name=[\'"]([^\'"]*)[\'"]|content=[\'"]([^\'"]*)[\'"])[^>]*?>',
-    re.I,
-)
+_META_TAG_RE = re.compile(r"<meta\b[^>]*?>", re.I)
+_ATTR_RE = re.compile(r"([A-Za-z_:][-A-Za-z0-9_:.]*)\s*=\s*[\"']([^\"']*)[\"']")
+_TITLE_RE = re.compile(r"<title[^>]*>(.*?)</title>", re.I | re.S)
+_FAVICON_RE = re.compile(r"<link\b[^>]*?>", re.I)
+_ICON_REL = re.compile(r"\b(?:shortcut\s+)?icon\b", re.I)
 
 # Property/name keys we look for, in priority order, mapped to our payload keys.
 _OG_TITLE = ("og:title", "twitter:title", "title", "og:site_name")
 _OG_DESC = ("og:description", "twitter:description", "description")
-_OG_IMG = ("og:image", "twitter:image", "twitter:image:src")
+_OG_IMG = ("og:image", "twitter:image", "twitter:image:src", "image")
 _OG_SITE = ("og:site_name", "twitter:site", "application-name")
 
 
-def _extract_og(html: str) -> dict:
-    text = html[:400_000]  # only scan the beginning — that's where <head> lives
+def _attrs(tag: str) -> dict:
+    return {k.lower(): v for k, v in _ATTR_RE.findall(tag)}
+
+
+def _extract_og(body: str) -> dict:
+    """Parse all ``<meta>`` tags into a ``{key: content}`` dict.
+
+    Attributes may appear in any order (``content`` before or after
+    ``property``/``name``), which the previous implementation mishandled.
+    First value wins so the most specific tag (top of document) is kept.
+    """
     props: dict[str, str] = {}
-    for m in _META_RE.finditer(text):
-        m.groups()
-        content = ""
-        prop = ""
-        for s in re.findall(r"(?:content|property|name)=[\"']([^\"']*)[\"']", m.group(0)):
-            if prop == "":
-                prop = s
-            else:
-                content = s
-                break
-        if prop:
-            props[prop.lower()] = content
+    for tag in _META_TAG_RE.finditer(body[:400_000]):
+        attrs = _attrs(tag.group(0))
+        key = (attrs.get("property") or attrs.get("name") or attrs.get("itemprop") or "").lower()
+        content = attrs.get("content")
+        if key and content is not None and key not in props:
+            props[key] = content
     return props
 
 
@@ -51,12 +56,12 @@ def _pick(props: dict, keys: tuple) -> str:
     return ""
 
 
-def _title_of(props: dict, raw_title: str) -> str:
+def _title_of(props: dict, body: str) -> str:
     t = _pick(props, _OG_TITLE)
     if t:
         return t
-    m = re.search(r"<title[^>]*>(.*?)</title>", raw_title[:200_000], re.I | re.S)
-    return (m.group(1).strip() if m else "") or urlparse(props.get("_url", "")).netloc
+    m = _TITLE_RE.search(body[:200_000])
+    return m.group(1).strip() if m else ""
 
 
 def _site_name(url: str) -> str:
@@ -64,20 +69,62 @@ def _site_name(url: str) -> str:
     return host.split(".")[0].capitalize() if host else ""
 
 
-async def fetch_og_metadata(url: str, timeout: float = 6.0) -> dict:
+def _favicon(body: str, base_url: str) -> str:
+    for tag in _FAVICON_RE.finditer(body):
+        attrs = _attrs(tag.group(0))
+        rel = attrs.get("rel", "")
+        href = attrs.get("href", "")
+        if href and _ICON_REL.search(rel):
+            return urljoin(base_url, htmlmod.unescape(href))
+    return ""
+
+
+def parse_og(body: str, url: str) -> dict:
+    """Pure HTML → bookmark payload (no network). ``url`` is the base URL."""
+    src = url.strip()
+    if not src.startswith(("http://", "https://")):
+        src = "https://" + src
+    props = _extract_og(body)
+    title = htmlmod.unescape(_title_of(props, body))
+    desc = htmlmod.unescape(_pick(props, _OG_DESC))
+    img = _pick(props, _OG_IMG)
+    site = htmlmod.unescape(_pick(props, _OG_SITE)) or _site_name(src)
+
+    def abs_url(u: str) -> str:
+        return urljoin(src, htmlmod.unescape(u)) if u else ""
+
+    return {
+        "url": src,
+        "title": title.strip()[:200] or urlparse(src).netloc or src,
+        "description": desc.strip()[:400],
+        "image": abs_url(img),
+        "site_name": site.strip()[:100],
+        "favicon": _favicon(body, src),
+    }
+
+
+async def fetch_og_metadata(url: str, timeout: float = 6.0, transport=None) -> dict:
     """Fetch ``url`` and return {url, title, description, image, site_name,
-    favicon}. Empty strings are omitted. Never raises for network errors."""
+    favicon}. Empty strings are omitted. Never raises for network errors.
+
+    ``transport`` is an optional ``httpx`` transport (used by tests to mock
+    HTTP without hitting the network).
+    """
     src = url.strip()
     if not src.startswith(("http://", "https://")):
         src = "https://" + src
     base = {"url": src, "title": "", "description": "", "image": "", "site_name": "", "favicon": ""}
     try:
         import httpx
+
         headers = {
-            "User-Agent": "FlowDeck/5.10 bookmark-fetcher (+https://flowdeck.dracodev.net)",
+            "User-Agent": "FlowDeck/5.5 bookmark-fetcher (+https://flowdeck.dracodev.net)",
             "Accept": "text/html,application/xhtml+xml",
         }
-        async with httpx.AsyncClient(follow_redirects=True, timeout=timeout) as client:
+        kwargs = {"follow_redirects": True, "timeout": timeout}
+        if transport is not None:
+            kwargs["transport"] = transport
+        async with httpx.AsyncClient(**kwargs) as client:
             resp = await client.get(src, headers=headers)
             resp.raise_for_status()
     except Exception as exc:  # noqa: BLE001 - network/parse failures are non-fatal
@@ -92,33 +139,4 @@ async def fetch_og_metadata(url: str, timeout: float = 6.0) -> dict:
         base["site_name"] = _site_name(src)
         return base
 
-    import html as htmlmod
-
-    body = resp.text
-    props = _extract_og(body)
-    props["_url"] = src
-    title = htmlmod.unescape(_title_of(props, body))
-    desc = htmlmod.unescape(_pick(props, _OG_DESC))
-    img = _pick(props, _OG_IMG)
-    site = htmlmod.unescape(_pick(props, _OG_SITE)) or _site_name(src)
-
-    def abs_url(u: str) -> str:
-        if not u:
-            return ""
-        return urljoin(src, htmlmod.unescape(u))
-
-    favicon = ""
-    fm = re.search(r"<link[^>]+rel=[\"'](?:shortcut )?icon[\"'][^>]+href=[\"']([^\"']+)[\"']", body, re.I)
-    if not fm:
-        fm = re.search(r"<link[^>]+href=[\"']([^\"']+)[\"'][^>]+rel=[\"'](?:shortcut )?icon[\"']", body, re.I)
-    if fm:
-        favicon = abs_url(fm.group(1))
-
-    return {
-        "url": src,
-        "title": title.strip()[:200] or urlparse(src).netloc or src,
-        "description": desc.strip()[:400],
-        "image": abs_url(img),
-        "site_name": site.strip()[:100],
-        "favicon": favicon,
-    }
+    return parse_og(resp.text, src)