@cntrl-site/sdk-nextjs 1.9.116 → 1.9.118

package/lib/components/items/FileItem/ImageItem.js

@@ -31,7 +31,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
     (0, useItemGeometry_1.useItemGeometry)(item.id, wrapperRef);
-    const { url, hasGLEffect } = item.commonParams;
+    const { url, hasGLEffect, altText } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
     const layoutValues = [item.area, item.layoutParams];
@@ -74,8 +74,8 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: hasGLEffect && isFXAllowed
-                        ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
-                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight, role: "img", "aria-label": altText }))
+                        : ((0, jsx_runtime_1.jsx)("img", { alt: altText, className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -21,8 +21,9 @@ const useCurrentLayout_1 = require("../../../common/useCurrentLayout");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
 const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
+const getHeadingTag_1 = require("../../../utils/getHeadingTag");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-richtext-${item.id}`;
     const [ref, setRef] = (0, react_1.useState)(null);
@@ -56,13 +57,15 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     });
     const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const Wrapper = ((_e = (0, getHeadingTag_1.getHeadingTag)(item)) !== null && _e !== void 0 ? _e : 'div');
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RichTextConverter_1.RICH_TEXT_LAYOUT_PENDING_CLASS}`}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { ref: setRef, className: `rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RichTextConverter_1.RICH_TEXT_LAYOUT_PENDING_CLASS}`}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {
+              margin: 0;
               font-size: ${layoutParams.fontSize * 100}vw;
               line-height: ${layoutParams.lineHeight * 100}vw;
               letter-spacing: ${layoutParams.letterSpacing * 100}vw;

package/lib/utils/getHeadingTag.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeadingTag = void 0;
+const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+function getHeadingTag(item) {
+    const heading = item.commonParams.heading;
+    if (typeof heading !== 'string' || !HEADING_TAGS.has(heading))
+        return;
+    return heading;
+}
+exports.getHeadingTag = getHeadingTag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.116",
+  "version": "1.9.118",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.60",
+    "@cntrl-site/components": "^1.0.61",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.5",
+    "@cntrl-site/sdk": "^1.28.7",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/FileItem/ImageItem.tsx

@@ -31,7 +31,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(wrapperRef, onResize);
   useItemGeometry(item.id, wrapperRef);
-  const { url, hasGLEffect } = item.commonParams;
+  const { url, hasGLEffect, altText } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
@@ -106,11 +106,13 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
                   className={`img-canvas image-${item.id}`}
                   width={rectWidth}
                   height={rectHeight}
+                  role="img"
+                  aria-label={altText}
                 />
               )
             : (
                 <img
-                  alt=""
+                  alt={altText}
                   className={`image image-${item.id}`}
                   style={inlineStyles}
                   src={item.commonParams.url}

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -15,6 +15,7 @@ import { useCurrentLayout } from '../../../common/useCurrentLayout';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
 import { RICH_TEXT_LAYOUT_PENDING_CLASS } from '../../../utils/RichTextConverter/RichTextConverter';
+import { getHeadingTag } from '../../../utils/getHeadingTag';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const reactId = useId();
@@ -57,13 +58,14 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   });
   const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
   const [content, styles] = useRichTextItem(item);
+  const Wrapper = (getHeadingTag(item) ?? 'div') as 'div';
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
 
   return (
     <>
-      <div
+      <Wrapper
         ref={setRef}
         className={`rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RICH_TEXT_LAYOUT_PENDING_CLASS}`}`}
         style={{
@@ -79,13 +81,14 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         }}
       >
         {content}
-      </div>
+      </Wrapper>
       <JSXStyle id={id}>
         {styles}
         {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           const color = CntrlColor.parse(layoutParams.color);
           return (`
             .rich-text-wrapper-${item.id} {
+              margin: 0;
               font-size: ${layoutParams.fontSize * 100}vw;
               line-height: ${layoutParams.lineHeight * 100}vw;
               letter-spacing: ${layoutParams.letterSpacing * 100}vw;

package/src/utils/getHeadingTag.ts

@@ -0,0 +1,11 @@
+import { RichTextItem } from '@cntrl-site/sdk';
+
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+const HEADING_TAGS = new Set<string>(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+
+export function getHeadingTag(item: RichTextItem): HeadingTag | undefined {
+  const heading = (item.commonParams as { heading?: unknown }).heading;
+  if (typeof heading !== 'string' || !HEADING_TAGS.has(heading)) return;
+  return heading as HeadingTag;
+}