@cntrl-site/sdk-nextjs 1.9.139 → 1.10.1

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

@@ -22,6 +22,7 @@ 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 detectLang_1 = require("../../../utils/detectLang");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
     const reactId = (0, react_1.useId)();
@@ -59,10 +60,11 @@ 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');
+    const lang = (0, react_1.useMemo)(() => (0, detectLang_1.detectLang)(item.commonParams.text), [item.commonParams.text]);
     (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)(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(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` } : {})), (columnsEnabled ? { columnCount: columns, columnFill: 'balance' } : {})), (columnsEnabled && columnGutter !== undefined ? { columnGap: `${Math.round(columnGutter * exemplary)}px` } : {})), (hyphens !== undefined ? { hyphens, WebkitHyphens: hyphens } : {})), { 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, { lang: lang, 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(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` } : {})), (columnsEnabled ? { columnCount: columns, columnFill: 'balance' } : {})), (columnsEnabled && columnGutter !== undefined ? { columnGap: `${Math.round(columnGutter * exemplary)}px` } : {})), (hyphens !== undefined ? { hyphens, WebkitHyphens: hyphens } : {})), { 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]) => {
                         var _a, _b, _c;
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         const columns = (_a = layoutParams.columns) !== null && _a !== void 0 ? _a : 1;

package/lib/utils/detectLang.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectLang = void 0;
+// franc-min ships no types, and this package publishes raw .ts as its
+// "types" entry, so downstream projects type-check this file directly
+// out of node_modules rather than a compiled .d.ts. No local `declare
+// module` here on purpose — that would only cover this package's own
+// build and leave @ts-expect-error unused (and thus itself an error).
+// @ts-expect-error franc-min has no type declarations
+const franc_min_1 = __importDefault(require("franc-min"));
+// Maps the ISO 639-3 codes franc-min can detect to their ISO 639-1
+// equivalent, since `lang` in the browser is conventionally two letters.
+// Codes with no ISO 639-1 equivalent are passed through as-is — a bare
+// ISO 639-3 code is still a valid BCP 47 language tag.
+const ISO_639_3_TO_1 = {
+    arb: 'ar',
+    azj: 'az',
+    bel: 'be',
+    bos: 'bs',
+    bul: 'bg',
+    ces: 'cs',
+    deu: 'de',
+    eng: 'en',
+    fas: 'fa',
+    fra: 'fr',
+    hau: 'ha',
+    hin: 'hi',
+    hrv: 'hr',
+    hun: 'hu',
+    ibo: 'ig',
+    ind: 'id',
+    ita: 'it',
+    jav: 'jv',
+    kaz: 'kk',
+    kin: 'rw',
+    lin: 'ln',
+    mar: 'mr',
+    nep: 'ne',
+    nld: 'nl',
+    nya: 'ny',
+    pol: 'pl',
+    por: 'pt',
+    ron: 'ro',
+    run: 'rn',
+    rus: 'ru',
+    som: 'so',
+    spa: 'es',
+    srp: 'sr',
+    sun: 'su',
+    swe: 'sv',
+    swh: 'sw',
+    tgl: 'tl',
+    tur: 'tr',
+    ukr: 'uk',
+    urd: 'ur',
+    uzn: 'uz',
+    vie: 'vi',
+    yor: 'yo',
+    zlm: 'ms',
+    zul: 'zu'
+};
+// Below this many characters franc-min's own trigram model is unreliable
+// (headings, labels, short captions) — leave `lang` unset so it inherits
+// from the document instead of guessing wrong.
+const MIN_DETECTABLE_LENGTH = 20;
+function detectLang(text) {
+    var _a;
+    if (!text)
+        return undefined;
+    const trimmed = text.trim();
+    if (trimmed.length < MIN_DETECTABLE_LENGTH)
+        return undefined;
+    const code3 = (0, franc_min_1.default)(trimmed, { minLength: MIN_DETECTABLE_LENGTH });
+    if (code3 === 'und')
+        return undefined;
+    return (_a = ISO_639_3_TO_1[code3]) !== null && _a !== void 0 ? _a : code3;
+}
+exports.detectLang = detectLang;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.139",
+  "version": "1.10.1",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "@cntrl-site/sdk": "^1.28.10",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
+    "franc-min": "^5.0.0",
     "html-react-parser": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"

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

@@ -16,6 +16,7 @@ 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';
+import { detectLang } from '../../../utils/detectLang';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const reactId = useId();
@@ -63,6 +64,7 @@ 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';
+  const lang = useMemo(() => detectLang(item.commonParams.text), [item.commonParams.text]);
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
@@ -70,6 +72,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   return (
     <>
       <Wrapper
+        lang={lang}
         ref={setRef}
         className={`rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RICH_TEXT_LAYOUT_PENDING_CLASS}`}`}
         style={{

package/src/utils/detectLang.ts

@@ -0,0 +1,73 @@
+// franc-min ships no types, and this package publishes raw .ts as its
+// "types" entry, so downstream projects type-check this file directly
+// out of node_modules rather than a compiled .d.ts. No local `declare
+// module` here on purpose — that would only cover this package's own
+// build and leave @ts-expect-error unused (and thus itself an error).
+// @ts-expect-error franc-min has no type declarations
+import franc from 'franc-min';
+
+// Maps the ISO 639-3 codes franc-min can detect to their ISO 639-1
+// equivalent, since `lang` in the browser is conventionally two letters.
+// Codes with no ISO 639-1 equivalent are passed through as-is — a bare
+// ISO 639-3 code is still a valid BCP 47 language tag.
+const ISO_639_3_TO_1: Record<string, string> = {
+  arb: 'ar',
+  azj: 'az',
+  bel: 'be',
+  bos: 'bs',
+  bul: 'bg',
+  ces: 'cs',
+  deu: 'de',
+  eng: 'en',
+  fas: 'fa',
+  fra: 'fr',
+  hau: 'ha',
+  hin: 'hi',
+  hrv: 'hr',
+  hun: 'hu',
+  ibo: 'ig',
+  ind: 'id',
+  ita: 'it',
+  jav: 'jv',
+  kaz: 'kk',
+  kin: 'rw',
+  lin: 'ln',
+  mar: 'mr',
+  nep: 'ne',
+  nld: 'nl',
+  nya: 'ny',
+  pol: 'pl',
+  por: 'pt',
+  ron: 'ro',
+  run: 'rn',
+  rus: 'ru',
+  som: 'so',
+  spa: 'es',
+  srp: 'sr',
+  sun: 'su',
+  swe: 'sv',
+  swh: 'sw',
+  tgl: 'tl',
+  tur: 'tr',
+  ukr: 'uk',
+  urd: 'ur',
+  uzn: 'uz',
+  vie: 'vi',
+  yor: 'yo',
+  zlm: 'ms',
+  zul: 'zu'
+};
+
+// Below this many characters franc-min's own trigram model is unreliable
+// (headings, labels, short captions) — leave `lang` unset so it inherits
+// from the document instead of guessing wrong.
+const MIN_DETECTABLE_LENGTH = 20;
+
+export function detectLang(text: string | undefined): string | undefined {
+  if (!text) return undefined;
+  const trimmed = text.trim();
+  if (trimmed.length < MIN_DETECTABLE_LENGTH) return undefined;
+  const code3 = franc(trimmed, { minLength: MIN_DETECTABLE_LENGTH });
+  if (code3 === 'und') return undefined;
+  return ISO_639_3_TO_1[code3] ?? code3;
+}