fix: Image caption in HTML exports, closes #8515

shared/editor/components/Caption.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import { s } from "../../styles";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 
 type Props = {
   /** Callback triggered when the caption is blurred */
@@ -40,7 +40,7 @@ function Caption({ placeholder, children, isSelected, width, ...rest }: Props) {
       $isSelected={isSelected}
       onMouseDown={handleMouseDown}
       onPaste={handlePaste}
-      className="caption"
+      className={EditorStyleHelper.imageCaption}
       tabIndex={-1}
       role="textbox"
       contentEditable
@@ -54,29 +54,11 @@ function Caption({ placeholder, children, isSelected, width, ...rest }: Props) {
 }
 
 const Content = styled.p<{ $width: number; $isSelected: boolean }>`
-  border: 0;
-  display: block;
-  font-style: italic;
-  font-weight: normal;
-  color: ${s("textSecondary")};
-  padding: 8px 0 4px;
-  line-height: 16px;
-  text-align: center;
-  min-height: 1em;
-  outline: none;
-  background: none;
-  resize: none;
-  user-select: text;
-  margin: 0 auto !important;
   cursor: text;
   width: ${(props) => props.$width}px;
   min-width: 200px;
   max-width: 100%;
 
-  ${breakpoint("tablet")`
-    font-size: 13px;
-  `};
-
   &:empty:not(:focus) {
     display: ${(props) => (props.$isSelected ? "block" : "none")}};
   }

shared/editor/components/Styles.ts

@@ -692,11 +692,29 @@ img.ProseMirror-separator {
   display: none;
 }
 
+.${EditorStyleHelper.imageCaption} {
+  border: 0;
+  display: block;
+  font-style: italic;
+  font-weight: normal;
+  font-size: 13px;
+  color: ${props.theme.textSecondary};
+  padding: 8px 0 4px;
+  line-height: 16px;
+  text-align: center;
+  min-height: 1em;
+  outline: none;
+  background: none;
+  resize: none;
+  user-select: text;
+  margin: 0 auto !important;
+}
+
 .ProseMirror[contenteditable="false"] {
-  .caption {
+  .${EditorStyleHelper.imageCaption} {
     pointer-events: none;
   }
-  .caption:empty {
+  .${EditorStyleHelper.imageCaption}:empty {
     visibility: hidden;
   }
 }

shared/editor/nodes/Image.tsx

@@ -12,6 +12,7 @@ import { sanitizeUrl } from "../../utils/urls";
 import Caption from "../components/Caption";
 import ImageComponent from "../components/Image";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 import { ComponentProps } from "../types";
 import SimpleImage from "./SimpleImage";
 
@@ -167,7 +168,7 @@ export default class Image extends SimpleImage {
               contentEditable: "false",
             },
           ],
-          ["p", { class: "caption" }, 0],
+          ["p", { class: EditorStyleHelper.imageCaption }, node.attrs.alt],
         ];
       },
       toPlainText: (node) =>

shared/editor/styles/EditorStyleHelper.ts

@@ -6,6 +6,8 @@ export class EditorStyleHelper {
 
   static readonly imageHandle = "image-handle";
 
+  static readonly imageCaption = "caption";
+
   // Comments
 
   static readonly comment = "comment-marker";