@redocly/theme 0.46.4 → 0.47.0

package/lib/components/Image/Image.d.ts

@@ -1,7 +1,12 @@
+import React from 'react';
 export type ImageProps = {
     src?: string;
     srcSet?: string;
     alt?: string;
     className?: string;
+    width?: string | number;
+    height?: string | number;
+    border?: string;
+    style?: React.CSSProperties | string;
 };
 export declare function Image(props: ImageProps): JSX.Element;

package/lib/components/Image/Image.js

@@ -8,11 +8,12 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 function Image(props) {
-    const { src, srcSet, alt, className } = props;
+    const { src, srcSet, alt, className, width, height, border, style } = props;
     const parsedSourceSetMap = react_1.default.useMemo(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
     }, [srcSet]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className }))))));
+    const combinedStyle = Object.assign(Object.assign({}, (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
+    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyle })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, style: combinedStyle }))))));
 }
 const ColorModeAwareImage = styled_components_1.default.img `
   html:not(.${(props) => props.colorMode}) && {

package/lib/components/Product/ProductPicker.js

@@ -17,14 +17,16 @@ function ProductPicker() {
     const { currentProduct, products, setProduct } = (0, hooks_1.useProductPicker)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const productComponents = products.map((product) => ({
-        content: react_1.default.createElement(Product_1.Product, { product: product }),
-        suffix: currentProduct === product && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
-        onAction: () => {
-            setProduct(product);
-        },
-        active: product === currentProduct,
-    }));
+    const productComponents = products.map((product) => {
+        return {
+            content: react_1.default.createElement(Product_1.Product, { product: product }),
+            suffix: product.slug === (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.slug) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
+            onAction: () => {
+                setProduct(product);
+            },
+            active: product.slug === (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.slug),
+        };
+    });
     return products.length ? (react_1.default.createElement(ProductDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, { variant: "ghost" }, currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : (react_1.default.createElement("span", { "data-translation-key": "navbar.products" }, translate('navbar.products', 'Products')))), triggerEvent: "hover" },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: productComponents }))) : null;
 }

package/lib/components/Search/SearchAiResponse.js

@@ -30,7 +30,7 @@ function SearchAiResponse(props) {
                     resources.length,
                     " ",
                     translate('search.ai.resourcesFound', 'resources found')),
-                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url },
+                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
                     react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
 }
 const ResponseWrapper = styled_components_1.default.div `

package/lib/components/Search/SearchDialog.js

@@ -68,9 +68,11 @@ function SearchDialog({ onClose, className }) {
         }
     };
     const mapItem = (item, index) => {
+        var _a;
         let itemProduct;
         if (!product && item.document.product) {
-            const resolvedProduct = products.find((product) => { var _a; return product.slug.match(`/${(_a = item.document.product) === null || _a === void 0 ? void 0 : _a.folder}/`); });
+            const folder = (_a = item.document.product) === null || _a === void 0 ? void 0 : _a.folder;
+            const resolvedProduct = products.find((product) => product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`));
             itemProduct = resolvedProduct
                 ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
                 : undefined;
@@ -105,17 +107,19 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
                 react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: mode === 'search'
                         ? translate('search.label', 'Search docs...')
-                        : translate('search.ai.label', 'Ask a follow up question'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
+                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
                         ? () => {
                             setQuery('');
                             aiSearch.askQuestion(query);
                         }
                         : undefined, "data-translation-key": mode === 'search' ? 'search.label' : 'search.ai.label' }),
                 showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { disabled: !query.trim(), icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
+                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
                             setMode('ai-dialog');
-                            setQuery('');
-                            aiSearch.askQuestion(query);
+                            if (query.trim()) {
+                                setQuery('');
+                                aiSearch.askQuestion(query);
+                            }
                         } }, translate('search.aiButton', 'Search with AI'))) : null,
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/core/styles/global.js

@@ -214,6 +214,7 @@ const themeColors = (0, styled_components_1.css) `
 
   --color-black: #000000;
   --color-white: #ffffff;
+  --color-static-white: #ffffff;
 
   --color-primary-bg: var(--color-blueberry-1);
   --color-primary-bg-hover: var(--color-blueberry-2);
@@ -331,7 +332,7 @@ const typography = (0, styled_components_1.css) `
   --text-color-description: var(--color-warm-grey-7); // Caption, Description, Icon
   --text-color-helper: var(--color-warm-grey-6);
   --text-color-disabled: var(--color-warm-grey-5);
-  --text-color-on-color: var(--color-warm-grey-1);
+  --text-color-on-color: var(--color-static-white);
   --text-color-inverse: var(--color-white);
 
   /**
@@ -677,7 +678,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--text-color-on-color); // @presenter Color
+  --schema-recursive-text-color: var(--color-warm-grey-1); // @presenter Color
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
@@ -781,7 +782,7 @@ const badges = (0, styled_components_1.css) `
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--text-color-on-color); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -949,18 +950,30 @@ const pages = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+// //
+// --color-raspberry-1: #612241;
+//     --color-raspberry-2: #77214c;
+//     --color-raspberry-3: #901d56;
+//     --color-raspberry-4: #b3185e;
+//     --color-raspberry-5: #d6236a;
+//     --color-raspberry-6: #f9316d;
+//     --color-raspberry-7: #fb6382;
+//     --color-raspberry-8: #fd838f;
+//     --color-raspberry-9: #feacad;
+//     --color-raspberry-10: #fed9d5;
+//     --color-raspberry-11: #fef0ef;
 const error = (0, styled_components_1.css) `
   --error-bubble-padding: var(--spacing-sm);
   --error-bubble-gap: var(--spacing-xxs);
   --error-bubble-font-family: var(--font-family-base);
   --error-bubble-font-size: var(--font-size-base);
   --error-bubble-z-index: var(--z-index-popover);
-  --error-bubble-bg-color: var(--color-raspberry-1);
-  --error-bubble-bg-color-hover: var(--color-raspberry-2);
-  --error-bubble-bg-color-pressed: var(--color-raspberry-3);
-  --error-bubble-content-color: var(--color-raspberry-6);
-  --error-bubble-content-color-hover: var(--color-raspberry-6);
-  --error-bubble-content-color-pressed: var(--color-raspberry-6);
+  --error-bubble-bg-color: #612241;
+  --error-bubble-bg-color-hover: #77214c;
+  --error-bubble-bg-color-pressed: #901d56;
+  --error-bubble-content-color: #f9316d;
+  --error-bubble-content-color-hover: #f9316d;
+  --error-bubble-content-color-pressed: #f9316d;
 
 
   --detailed-error-overlay-bg-color: #4f4f4f;

package/lib/markdoc/components/Image/Image.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ImageProps } from '../../../components/Image/Image';
+type MarkdocImageProps = React.PropsWithChildren<ImageProps> & {
+    align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+};
+export declare function Image(props: MarkdocImageProps): React.JSX.Element;
+export {};

package/lib/markdoc/components/Image/Image.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = Image;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Image_1 = require("../../../components/Image/Image");
+function Image(props) {
+    const { align } = props, rest = __rest(props, ["align"]);
+    return align ? (react_1.default.createElement(ImageWrapper, { align: align },
+        react_1.default.createElement(Image_1.Image, Object.assign({}, rest)))) : (react_1.default.createElement(Image_1.Image, Object.assign({}, rest)));
+}
+const ImageWrapper = styled_components_1.default.div `
+  text-align: ${(props) => props.align || 'initial'};
+
+  img {
+    display: block;
+    ${(props) => {
+    switch (props.align) {
+        case 'left':
+            return 'margin-right: auto; margin-left: 0;';
+        case 'right':
+            return 'margin-left: auto; margin-right: 0;';
+        case 'center':
+            return 'margin-left: auto; margin-right: auto;';
+        default:
+            return '';
+    }
+}}
+  }
+`;
+//# sourceMappingURL=Image.js.map

package/lib/markdoc/components/default.d.ts

@@ -11,3 +11,4 @@ export * from '../../markdoc/components/Cards/Cards';
 export * from '../../markdoc/components/Cards/Card';
 export * from '../../markdoc/components/Cards/CardIcon';
 export * from '../../markdoc/components/Cards/CardImage';
+export * from '../../markdoc/components/Image/Image';

package/lib/markdoc/components/default.js

@@ -27,4 +27,5 @@ __exportStar(require("../../markdoc/components/Cards/Cards"), exports);
 __exportStar(require("../../markdoc/components/Cards/Card"), exports);
 __exportStar(require("../../markdoc/components/Cards/CardIcon"), exports);
 __exportStar(require("../../markdoc/components/Cards/CardImage"), exports);
+__exportStar(require("../../markdoc/components/Image/Image"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.js

@@ -47,6 +47,7 @@ const code_snippet_1 = require("../markdoc/tags/code-snippet");
 const inline_svg_1 = require("../markdoc/tags/inline-svg");
 const cards_1 = require("../markdoc/tags/cards");
 const card_1 = require("../markdoc/tags/card");
+const img_1 = require("../markdoc/tags/img");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -59,5 +60,6 @@ exports.tags = {
     [inline_svg_1.inlineSvg.tagName]: inline_svg_1.inlineSvg.schema,
     [cards_1.cards.tagName]: cards_1.cards.schema,
     [card_1.card.tagName]: card_1.card.schema,
+    [img_1.img.tagName]: img_1.img.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/img.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const img: MarkdocSchemaWrapper;

package/lib/markdoc/tags/img.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.img = void 0;
+exports.img = {
+    schema: {
+        render: 'Image',
+        attributes: {
+            src: {
+                type: String,
+                resolver: 'imageSrc',
+            },
+            srcSet: {
+                type: String,
+                resolver: 'imageSrcSet',
+            },
+            alt: {
+                type: String,
+            },
+            className: {
+                type: String,
+            },
+            width: {
+                type: [String, Number],
+            },
+            height: {
+                type: [String, Number],
+            },
+            align: {
+                type: String,
+                matches: ['left', 'right', 'center', 'justify', 'initial', 'inherit'],
+            },
+            border: {
+                type: String,
+            },
+            style: {
+                type: [Object, String],
+            },
+        },
+        validate: (node) => {
+            if (!node.attributes.src && !node.attributes.srcSet) {
+                return [{ id: '', message: 'src or srcSet is required', level: 'error' }];
+            }
+            return [];
+        },
+    },
+    tagName: 'img',
+};
+//# sourceMappingURL=img.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.46.4",
+  "version": "0.47.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -79,7 +79,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.2"
+    "@redocly/config": "0.19.4"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Image/Image.tsx

@@ -8,19 +8,35 @@ export type ImageProps = {
   srcSet?: string;
   alt?: string;
   className?: string;
+  width?: string | number;
+  height?: string | number;
+  border?: string;
+  style?: React.CSSProperties | string;
 };
 
 export function Image(props: ImageProps): JSX.Element {
-  const { src, srcSet, alt, className } = props;
+  const { src, srcSet, alt, className, width, height, border, style } = props;
 
   const parsedSourceSetMap = React.useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
   }, [srcSet]);
 
+  const combinedStyle: React.CSSProperties = {
+    ...(border && { border }),
+    ...(typeof style === 'string' ? { cssText: style } : style),
+  };
+
   return (
     <>
       {src ? (
-        <img src={src} alt={alt} className={className} />
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          width={width}
+          height={height}
+          style={combinedStyle}
+        />
       ) : (
         Array.from(parsedSourceSetMap).map(([key, value]) => (
           <ColorModeAwareImage
@@ -29,6 +45,9 @@ export function Image(props: ImageProps): JSX.Element {
             src={value}
             alt={alt}
             className={className}
+            width={width}
+            height={height}
+            style={combinedStyle}
           />
         ))
       )}

package/src/components/Product/ProductPicker.tsx

@@ -14,14 +14,16 @@ export function ProductPicker(): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const productComponents = products.map((product) => ({
-    content: <Product product={product} />,
-    suffix: currentProduct === product && <CheckmarkIcon />,
-    onAction: () => {
-      setProduct(product);
-    },
-    active: product === currentProduct,
-  }));
+  const productComponents = products.map((product) => {
+    return {
+      content: <Product product={product} />,
+      suffix: product.slug === currentProduct?.slug && <CheckmarkIcon />,
+      onAction: () => {
+        setProduct(product);
+      },
+      active: product.slug === currentProduct?.slug,
+    };
+  });
 
   return products.length ? (
     <ProductDropdown

package/src/components/Search/SearchAiResponse.tsx

@@ -52,7 +52,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
             </ResourcesTitle>
             <ResourceTags>
               {resources.map((resource, idx) => (
-                <Link key={idx} to={resource.url}>
+                <Link key={idx} to={resource.url} target="_blank">
                   <ResourceTag
                     borderless
                     icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}

package/src/components/Search/SearchDialog.tsx

@@ -71,8 +71,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   const mapItem = (item: SearchItemData, index: number) => {
     let itemProduct;
     if (!product && item.document.product) {
+      const folder = item.document.product?.folder;
       const resolvedProduct = products.find((product) =>
-        product.slug.match(`/${item.document.product?.folder}/`),
+        product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`),
       );
       itemProduct = resolvedProduct
         ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
@@ -123,7 +124,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             placeholder={
               mode === 'search'
                 ? translate('search.label', 'Search docs...')
-                : translate('search.ai.label', 'Ask a follow up question')
+                : translate('search.ai.label', 'Ask AI assistant')
             }
             isLoading={isSearchLoading}
             showReturnButton={mode === 'ai-dialog'}
@@ -142,12 +143,13 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             <SearchHeaderButtons>
               {showAiSearchButton ? (
                 <SearchAiButton
-                  disabled={!query.trim()}
                   icon={<AiStarsIcon />}
                   onClick={() => {
                     setMode('ai-dialog');
-                    setQuery('');
-                    aiSearch.askQuestion(query);
+                    if (query.trim()) {
+                      setQuery('');
+                      aiSearch.askQuestion(query);
+                    }
                   }}
                 >
                   {translate('search.aiButton', 'Search with AI')}

package/src/core/styles/global.ts

@@ -213,6 +213,7 @@ const themeColors = css`
 
   --color-black: #000000;
   --color-white: #ffffff;
+  --color-static-white: #ffffff;
 
   --color-primary-bg: var(--color-blueberry-1);
   --color-primary-bg-hover: var(--color-blueberry-2);
@@ -331,7 +332,7 @@ const typography = css`
   --text-color-description: var(--color-warm-grey-7); // Caption, Description, Icon
   --text-color-helper: var(--color-warm-grey-6);
   --text-color-disabled: var(--color-warm-grey-5);
-  --text-color-on-color: var(--color-warm-grey-1);
+  --text-color-on-color: var(--color-static-white);
   --text-color-inverse: var(--color-white);
 
   /**
@@ -683,7 +684,7 @@ const apiReferenceDocs = css`
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--text-color-on-color); // @presenter Color
+  --schema-recursive-text-color: var(--color-warm-grey-1); // @presenter Color
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
@@ -788,7 +789,7 @@ const badges = css`
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--text-color-on-color); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -961,19 +962,30 @@ const pages = css`
 
   // @tokens End
 `;
-
+// //
+// --color-raspberry-1: #612241;
+//     --color-raspberry-2: #77214c;
+//     --color-raspberry-3: #901d56;
+//     --color-raspberry-4: #b3185e;
+//     --color-raspberry-5: #d6236a;
+//     --color-raspberry-6: #f9316d;
+//     --color-raspberry-7: #fb6382;
+//     --color-raspberry-8: #fd838f;
+//     --color-raspberry-9: #feacad;
+//     --color-raspberry-10: #fed9d5;
+//     --color-raspberry-11: #fef0ef;
 const error = css`
   --error-bubble-padding: var(--spacing-sm);
   --error-bubble-gap: var(--spacing-xxs);
   --error-bubble-font-family: var(--font-family-base);
   --error-bubble-font-size: var(--font-size-base);
   --error-bubble-z-index: var(--z-index-popover);
-  --error-bubble-bg-color: var(--color-raspberry-1);
-  --error-bubble-bg-color-hover: var(--color-raspberry-2);
-  --error-bubble-bg-color-pressed: var(--color-raspberry-3);
-  --error-bubble-content-color: var(--color-raspberry-6);
-  --error-bubble-content-color-hover: var(--color-raspberry-6);
-  --error-bubble-content-color-pressed: var(--color-raspberry-6);
+  --error-bubble-bg-color: #612241;
+  --error-bubble-bg-color-hover: #77214c;
+  --error-bubble-bg-color-pressed: #901d56;
+  --error-bubble-content-color: #f9316d;
+  --error-bubble-content-color-hover: #f9316d;
+  --error-bubble-content-color-pressed: #f9316d;
 
 
   --detailed-error-overlay-bg-color: #4f4f4f;

package/src/markdoc/components/Image/Image.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Image as ImageComponent, type ImageProps } from '@redocly/theme/components/Image/Image';
+
+type MarkdocImageProps = React.PropsWithChildren<ImageProps> & {
+  align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+};
+export function Image(props: MarkdocImageProps) {
+  const { align, ...rest } = props;
+  return align ? (
+    <ImageWrapper align={align}>
+      <ImageComponent {...rest} />
+    </ImageWrapper>
+  ) : (
+    <ImageComponent {...rest} />
+  );
+}
+
+const ImageWrapper = styled.div<{ align?: MarkdocImageProps['align'] }>`
+  text-align: ${(props) => props.align || 'initial'};
+
+  img {
+    display: block;
+    ${(props) => {
+      switch (props.align) {
+        case 'left':
+          return 'margin-right: auto; margin-left: 0;';
+        case 'right':
+          return 'margin-left: auto; margin-right: 0;';
+        case 'center':
+          return 'margin-left: auto; margin-right: auto;';
+        default:
+          return '';
+      }
+    }}
+  }
+`;

package/src/markdoc/components/default.ts

@@ -11,3 +11,4 @@ export * from '@redocly/theme/markdoc/components/Cards/Cards';
 export * from '@redocly/theme/markdoc/components/Cards/Card';
 export * from '@redocly/theme/markdoc/components/Cards/CardIcon';
 export * from '@redocly/theme/markdoc/components/Cards/CardImage';
+export * from '@redocly/theme/markdoc/components/Image/Image';

package/src/markdoc/default.ts

@@ -18,6 +18,7 @@ import { codeSnippet } from '@redocly/theme/markdoc/tags/code-snippet';
 import { inlineSvg } from '@redocly/theme/markdoc/tags/inline-svg';
 import { cards } from '@redocly/theme/markdoc/tags/cards';
 import { card } from '@redocly/theme/markdoc/tags/card';
+import { img } from '@redocly/theme/markdoc/tags/img';
 
 export const tags = {
   [admonition.tagName]: admonition.schema,
@@ -31,4 +32,5 @@ export const tags = {
   [inlineSvg.tagName]: inlineSvg.schema,
   [cards.tagName]: cards.schema,
   [card.tagName]: card.schema,
+  [img.tagName]: img.schema,
 };

package/src/markdoc/tags/img.ts

@@ -0,0 +1,46 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const img: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Image',
+    attributes: {
+      src: {
+        type: String,
+        resolver: 'imageSrc',
+      },
+      srcSet: {
+        type: String,
+        resolver: 'imageSrcSet',
+      },
+      alt: {
+        type: String,
+      },
+      className: {
+        type: String,
+      },
+      width: {
+        type: [String, Number],
+      },
+      height: {
+        type: [String, Number],
+      },
+      align: {
+        type: String,
+        matches: ['left', 'right', 'center', 'justify', 'initial', 'inherit'],
+      },
+      border: {
+        type: String,
+      },
+      style: {
+        type: [Object, String],
+      },
+    },
+    validate: (node) => {
+      if (!node.attributes.src && !node.attributes.srcSet) {
+        return [{ id: '', message: 'src or srcSet is required', level: 'error' }];
+      }
+      return [];
+    },
+  },
+  tagName: 'img',
+};