From 7c4f6870369eb316b4ec98453390e353d1a5577d Mon Sep 17 00:00:00 2001 From: Ahtesham Quraish Date: Fri, 19 Dec 2025 13:37:13 +0500 Subject: [PATCH 1/2] fix: use semantic figure and caption tags --- .../TiptapEditor/extensions/node/Image/ImageWithCaption.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx b/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx index 4808324e29..690fb5156f 100644 --- a/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx +++ b/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx @@ -11,7 +11,7 @@ const ARTICLE_MAX_WIDTH = 890 const CONTAINER_PADDING = 24 const WIDE_LAYOUT_MIN_IMG_WIDTH = 900 -const Container = styled.div(({ theme }) => ({ +const Container = styled.figure(({ theme }) => ({ position: "relative", margin: "2rem auto", textAlign: "center", @@ -148,7 +148,7 @@ const Image = styled.img<{ layout: Layout }>(({ layout }) => ({ }, })) -const Caption = styled.p(({ theme }) => ({ +const Caption = styled.figcaption(({ theme }) => ({ "&&&&&": { ...theme.typography.body2, color: theme.custom.colors.silverGrayDark, From 483db605ae517eaa7159b7272e89542acb9f4132 Mon Sep 17 00:00:00 2001 From: Ahtesham Quraish Date: Fri, 19 Dec 2025 15:50:15 +0500 Subject: [PATCH 2/2] fix caption issue on media embed --- .../extensions/node/MediaEmbed/MediaEmbedNodeView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx index 32a0d2f22a..82f75e8511 100644 --- a/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx +++ b/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx @@ -33,10 +33,11 @@ const StyledNodeViewWrapper = styled(NodeViewWrapper)<{ input { width: 100%; border: none; - text-align: center; + text-align: left; outline: none; - padding: 4px; + padding: 16px 0; font-size: 14px; + border-bottom: 1px solid #dde1e6; } p {