@cntrl-site/sdk-nextjs 0.19.2 → 0.19.4

package/lib/components/Item.js

@@ -94,7 +94,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     if (!layout)
         return null;
     const styles = {
-        top: stickyTop,
+        top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {

package/lib/components/LinkWrapper.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children }) => {
+const LinkWrapper = ({ url, children, target }) => {
     const validUrl = url && buildValidUrl(url);
-    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, target: url.startsWith('/') || url.startsWith('#') ? '_self' : '_blank', rel: "noreferrer" }, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, target: target, rel: "noreferrer" }, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/components/items/ImageItem.js

@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a;
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -24,7 +24,7 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`

package/lib/components/items/RectangleItem.js

@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const RectangleItem = ({ item, sectionId, onResize }) => {
-    var _a;
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
@@ -26,7 +26,7 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
                         backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,

package/lib/components/items/VideoItem.js

@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const VideoItem = ({ item, sectionId, onResize }) => {
-    var _a;
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -24,7 +24,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`

package/lib/components/items/VimeoEmbed.js

@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a;
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
@@ -40,7 +40,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         return validURL.href;
     };
     const validUrl = getValidVimeoUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {

package/lib/components/items/YoutubeEmbed.js

@@ -17,7 +17,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a;
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
@@ -56,7 +56,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
         };
     }, [YT, div]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -91,7 +91,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: entity.link }, { children: entityKids }), entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: entity.link, target: entity.target }, { children: entityKids }), entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -184,7 +184,7 @@ class RichTextConverter {
                 const end = dividers[i + 1];
                 const entity = entities.find(e => e.start === start);
                 entitiesGroups.push(Object.assign({ stylesGroup: [], start,
-                    end }, (entity && { link: entity.data.url })));
+                    end }, (entity && { link: entity.data.url, target: entity.data.target })));
             }
             return entitiesGroups;
         }
@@ -209,7 +209,7 @@ class RichTextConverter {
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
             entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && { link: entity.data.url })));
+                end }, (entity && { link: entity.data.url, target: entity.data.target })));
         }
         return entitiesGroups;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -117,7 +117,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
 
   if (!layout) return null;
   const styles = {
-    top: stickyTop,
+    top: `${stickyTop * 100}vw`,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 

package/src/components/LinkWrapper.tsx

@@ -3,14 +3,15 @@ import React, { ReactElement, ReactNode } from 'react';
 interface Props {
   url?: string;
   children: ReactElement | ReactNode[];
+  target?: string;
 }
 
-export const LinkWrapper: React.FC<Props> = ({ url, children }) => {
+export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
   const validUrl = url && buildValidUrl(url);
   return url ? (
     <a
       href={validUrl}
-      target={url.startsWith('/') || url.startsWith('#') ? '_self' : '_blank'}
+      target={target}
       rel="noreferrer"
     >
       {children}

package/src/components/items/ImageItem.tsx

@@ -19,7 +19,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   return (
-    <LinkWrapper url={item.link?.url}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
           className={`image-wrapper-${item.id}`}

package/src/components/items/RectangleItem.tsx

@@ -22,7 +22,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset';
 
   return (
-    <LinkWrapper url={item.link?.url}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
           className={`rectangle-${item.id}`}

package/src/components/items/VideoItem.tsx

@@ -19,7 +19,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   return (
-    <LinkWrapper url={item.link?.url}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`video-wrapper-${item.id}`}
         ref={setRef}

package/src/components/items/VimeoEmbed.tsx

@@ -37,7 +37,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const validUrl = getValidVimeoUrl(url);
 
   return (
-    <LinkWrapper url={item.link?.url}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-video-wrapper-${item.id}`}
         ref={setRef}

package/src/components/items/YoutubeEmbed.tsx

@@ -52,7 +52,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   }, [YT, div]);
 
   return (
-    <LinkWrapper url={item.link?.url}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-youtube-video-wrapper-${item.id}`}
         onMouseEnter={() => {

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -21,6 +21,7 @@ interface StyleGroup {
 
 interface EntitiesGroup {
   link?: string;
+  target?: string;
   stylesGroup: StyleGroup[];
   start: number;
   end: number;
@@ -122,7 +123,7 @@ export class RichTextConverter {
             offset = entity.end;
           }
           if (entity.link) {
-            kids.push(<LinkWrapper key={entity.start} url={entity.link} >{entityKids}</LinkWrapper>);
+            kids.push(<LinkWrapper key={entity.start} url={entity.link} target={entity.target}>{entityKids}</LinkWrapper>);
             continue;
           }
           kids.push(...entityKids);
@@ -218,7 +219,7 @@ export class RichTextConverter {
           stylesGroup: [],
           start,
           end,
-          ...(entity && { link: entity.data.url })
+          ...(entity && { link: entity.data.url, target: entity.data.target })
         });
       }
       return entitiesGroups;
@@ -248,7 +249,7 @@ export class RichTextConverter {
         stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
         start,
         end,
-        ...(entity && { link: entity.data.url })
+        ...(entity && { link: entity.data.url, target: entity.data.target })
       });
     }
 

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>