@cntrl-site/sdk-nextjs 1.9.78 → 1.9.80

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

@@ -1,113 +1,113 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
-import JSXStyle from 'styled-jsx/style';
-import { ItemProps } from '../Item';
-import { useRichTextItem } from './useRichTextItem';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useRichTextItemValues } from '../useRichTextItemValues';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { getFontFamilyValue } from '../../../utils/getFontFamilyValue';
-import { useExemplary } from '../../../common/useExemplary';
-import { useItemAngle } from '../useItemAngle';
-import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { useCurrentLayout } from '../../../common/useCurrentLayout';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
-
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const reactId = useId();
-  const id = `${reactId}-richtext-${item.id}`;
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const { layouts } = useCntrlContext();
-  const itemAngle = useItemAngle(item, sectionId);
-  const {
-    blur: itemBlur,
-    wordSpacing: itemWordSpacing,
-    letterSpacing: itemLetterSpacing,
-    color: itemColor,
-    fontSize,
-    lineHeight,
-    xSizing
-  } = useRichTextItemValues(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const exemplary = useExemplary();
-  const { layoutId } = useCurrentLayout();
-  useRegisterResize(ref, onResize);
-  const geometry = useItemGeometry(item.id, ref, RichTextGeometryController, { xSizing });
-  geometry?.setAngle(itemAngle!);
-  const stateParams = interactionCtrl?.getState<number | string>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
-  const stateStyles = stateParams?.styles ?? {};
-  const transition = stateParams?.transition ?? 'none';
-  const textColor = useMemo(() => {
-    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color as string, itemColor);
-    return color ? CntrlColor.parse(color) : undefined;
-  }, [itemColor, stateStyles.color]);
-  const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
-  const blur = getStyleFromItemStateAndParams(stateStyles.blur, itemBlur);
-  const letterSpacing = getStyleFromItemStateAndParams(stateStyles.letterSpacing, itemLetterSpacing);
-  const wordSpacing = getStyleFromItemStateAndParams(stateStyles.wordSpacing, itemWordSpacing);
-  const colorAlpha = textColor?.getAlpha();
-  const rangeStyles = layoutId ? item.layoutParams[layoutId]?.rangeStyles ?? [] : [];
-  const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
-  const hasVisibleRangeColors = rangeColors.some((color) => {
-    const alpha = CntrlColor.parse(color.value!).getAlpha();
-    return alpha > 0;
-  });
-  const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
-  const [content, styles] = useRichTextItem(item);
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-
-  return (
-    <>
-      <div
-        ref={setRef}
-        className={`rich-text-wrapper-${item.id}`}
-        style={{
-          ...(blur !== undefined ? { filter: `blur(${blur as number * 100}vw)` } : {}),
-          ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing as number * exemplary}px` } : {}),
-          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing as number * exemplary}px` } : {}),
-          ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
-          ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
-          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
-          transition
-        }}
-      >
-        {content}
-      </div>
-      <JSXStyle id={id}>
-        {styles}
-        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          const color = CntrlColor.parse(layoutParams.color);
-          return (`
-            .rich-text-wrapper-${item.id} {
-              font-size: ${layoutParams.fontSize * 100}vw;
-              line-height: ${layoutParams.lineHeight * 100}vw;
-              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
-              word-spacing: ${layoutParams.wordSpacing * 100}vw;
-              font-family: ${getFontFamilyValue(layoutParams.typeFace)};
-              font-weight: ${layoutParams.fontWeight};
-              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-              vertical-align: ${layoutParams.verticalAlign};
-              font-variant: ${layoutParams.fontVariant};
-              color: ${color.fmt('rgba')};
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              text-transform: ${layoutParams.textTransform};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-            @supports not (color: oklch(42% 0.3 90 / 1)) {
-              .rich-text-wrapper-${item.id} {
-                color: ${color.fmt('rgba')};
-              }
-            }
-          `);
-        })}`}
-      </JSXStyle>
-    </>
-  );
-};
+import { FC, useEffect, useId, useMemo, useState } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+import { ItemProps } from '../Item';
+import { useRichTextItem } from './useRichTextItem';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRichTextItemValues } from '../useRichTextItemValues';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getFontFamilyValue } from '../../../utils/getFontFamilyValue';
+import { useExemplary } from '../../../common/useExemplary';
+import { useItemAngle } from '../useItemAngle';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useCurrentLayout } from '../../../common/useCurrentLayout';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
+
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const reactId = useId();
+  const id = `${reactId}-richtext-${item.id}`;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const { layouts } = useCntrlContext();
+  const itemAngle = useItemAngle(item, sectionId);
+  const {
+    blur: itemBlur,
+    wordSpacing: itemWordSpacing,
+    letterSpacing: itemLetterSpacing,
+    color: itemColor,
+    fontSize,
+    lineHeight,
+    xSizing
+  } = useRichTextItemValues(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const exemplary = useExemplary();
+  const { layoutId } = useCurrentLayout();
+  useRegisterResize(ref, onResize);
+  const geometry = useItemGeometry(item.id, ref, RichTextGeometryController, { xSizing });
+  geometry?.setAngle(itemAngle!);
+  const stateParams = interactionCtrl?.getState<number | string>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+  const stateStyles = stateParams?.styles ?? {};
+  const transition = stateParams?.transition ?? 'none';
+  const textColor = useMemo(() => {
+    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color as string, itemColor);
+    return color ? CntrlColor.parse(color) : undefined;
+  }, [itemColor, stateStyles.color]);
+  const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
+  const blur = getStyleFromItemStateAndParams(stateStyles.blur, itemBlur);
+  const letterSpacing = getStyleFromItemStateAndParams(stateStyles.letterSpacing, itemLetterSpacing);
+  const wordSpacing = getStyleFromItemStateAndParams(stateStyles.wordSpacing, itemWordSpacing);
+  const colorAlpha = textColor?.getAlpha();
+  const rangeStyles = layoutId ? item.layoutParams[layoutId]?.rangeStyles ?? [] : [];
+  const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
+  const hasVisibleRangeColors = rangeColors.some((color) => {
+    const alpha = CntrlColor.parse(color.value!).getAlpha();
+    return alpha > 0;
+  });
+  const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
+  const [content, styles] = useRichTextItem(item);
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+
+  return (
+    <>
+      <div
+        ref={setRef}
+        className={`rich-text-wrapper-${item.id}`}
+        style={{
+          ...(blur !== undefined ? { filter: `blur(${blur as number * 100}vw)` } : {}),
+          ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing as number * exemplary}px` } : {}),
+          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing as number * exemplary}px` } : {}),
+          ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
+          ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
+          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
+          transition
+        }}
+      >
+        {content}
+      </div>
+      <JSXStyle id={id}>
+        {styles}
+        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          const color = CntrlColor.parse(layoutParams.color);
+          return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              font-family: ${getFontFamilyValue(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
+          `);
+        })}`}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/items/RichTextItem/useRichTextItem.ts

@@ -1,12 +1,12 @@
-import { RichTextItem } from '@cntrl-site/sdk';
-import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { ReactNode } from 'react';
-
-const richTextConverter = new RichTextConverter();
-
-export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
-  const { layouts } = useCntrlContext();
-  const [content, styles] = richTextConverter.toHtml(item, layouts);
-  return [content, styles];
-};
+import { RichTextItem } from '@cntrl-site/sdk';
+import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { ReactNode } from 'react';
+
+const richTextConverter = new RichTextConverter();
+
+export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
+  const { layouts } = useCntrlContext();
+  const [content, styles] = richTextConverter.toHtml(item, layouts);
+  return [content, styles];
+};

package/src/components/items/RichTextWrapper.tsx

@@ -1,15 +1,15 @@
-import React, { FC, PropsWithChildren } from 'react';
-
-interface RTWrapperProps {
-  isRichText: boolean;
-  transformOrigin?: string;
-}
-
-export const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children, transformOrigin = 'top left' }) => {
-  if (!isRichText) return <>{children}</>;
-  return (
-    <div style={{ transformOrigin, transform: 'scale(var(--layout-deviation))' }}>
-      {children}
-    </div>
-  );
-};
+import React, { FC, PropsWithChildren } from 'react';
+
+interface RTWrapperProps {
+  isRichText: boolean;
+  transformOrigin?: string;
+}
+
+export const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children, transformOrigin = 'top left' }) => {
+  if (!isRichText) return <>{children}</>;
+  return (
+    <div style={{ transformOrigin, transform: 'scale(var(--layout-deviation))' }}>
+      {children}
+    </div>
+  );
+};

package/src/components/items/itemsMap.ts

@@ -1,28 +1,28 @@
-import { ArticleItemType } from '@cntrl-site/sdk';
-import { ComponentType } from 'react';
-import { RectangleItem } from './RectangleItem/RectangleItem';
-import { ImageItem } from './FileItem/ImageItem';
-import { VideoItem } from './FileItem/VideoItem';
-import { RichTextItem } from './RichTextItem/RichTextItem';
-import { YoutubeEmbedItem } from './EmbedVideoItem/YoutubeEmbed';
-import { VimeoEmbedItem } from './EmbedVideoItem/VimeoEmbed';
-import { CustomItem } from './CustomItem/CustomItem';
-import { GroupItem } from './GroupItem/GroupItem';
-import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
-import { ItemProps } from './Item';
-import { CompoundItem } from './CompoundItem/CompoundItem';
-import { ComponentItem } from './ComponentItem/ComponentItem';
-
-export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
-  [ArticleItemType.Rectangle]: RectangleItem,
-  [ArticleItemType.Image]: ImageItem,
-  [ArticleItemType.Video]: VideoItem,
-  [ArticleItemType.RichText]: RichTextItem,
-  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
-  [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
-  [ArticleItemType.Custom]: CustomItem,
-  [ArticleItemType.Group]: GroupItem,
-  [ArticleItemType.Compound]: CompoundItem,
-  [ArticleItemType.CodeEmbed]: CodeEmbedItem,
-  [ArticleItemType.Component]: ComponentItem
-};
+import { ArticleItemType } from '@cntrl-site/sdk';
+import { ComponentType } from 'react';
+import { RectangleItem } from './RectangleItem/RectangleItem';
+import { ImageItem } from './FileItem/ImageItem';
+import { VideoItem } from './FileItem/VideoItem';
+import { RichTextItem } from './RichTextItem/RichTextItem';
+import { YoutubeEmbedItem } from './EmbedVideoItem/YoutubeEmbed';
+import { VimeoEmbedItem } from './EmbedVideoItem/VimeoEmbed';
+import { CustomItem } from './CustomItem/CustomItem';
+import { GroupItem } from './GroupItem/GroupItem';
+import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
+import { ItemProps } from './Item';
+import { CompoundItem } from './CompoundItem/CompoundItem';
+import { ComponentItem } from './ComponentItem/ComponentItem';
+
+export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
+  [ArticleItemType.Rectangle]: RectangleItem,
+  [ArticleItemType.Image]: ImageItem,
+  [ArticleItemType.Video]: VideoItem,
+  [ArticleItemType.RichText]: RichTextItem,
+  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
+  [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
+  [ArticleItemType.Custom]: CustomItem,
+  [ArticleItemType.Group]: GroupItem,
+  [ArticleItemType.Compound]: CompoundItem,
+  [ArticleItemType.CodeEmbed]: CodeEmbedItem,
+  [ArticleItemType.Component]: ComponentItem
+};