@wix/ricos 11.20.5 → 11.21.0

package/dist/es/plugin-html/tiptap/preset-bar/preset-bar-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "74be8d09";
+var styleDataHash = "5304f1e9";
 const injectCss = (() => {
-  var css = `.F33zN{white-space:nowrap}.F33zN>:not(hr){flex-shrink:0}.F33zN hr{height:unset;margin-inline:6px}.KPdZa{align-items:center;appearance:none;background-color:var(--wds-color-fill-standard-tertiary,var(--wsr-color-D80,#fff));block-size:var(--wds-tag-size-small,auto);border-radius:var(--wds-tag-border-radius-small,12px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--wds-tag-label-font-size-small,14px);line-height:var(--wds-tag-label-font-line-height-small,18px);max-block-size:var(--wds-tag-size-small,24px);max-inline-size:stretch;min-block-size:var(--wds-tag-size-tiny,18px);outline:var(--wds-border-width-100,1px) solid var(--wds-color-border-standard-tertiary,var(--wsr-color-D60,#dfe5eb));outline-offset:-1px;padding:var(--wds-tag-padding-vertical-small,3px) var(--wds-tag-padding-horizontal-small,12px);transition:background-color .3s ease;white-space:nowrap}.KPdZa:where(:hover,:focus-visible){background-color:var(--wds-color-fill-standard-tertiary-hover,var(--wsr-color-B50,#e7f0ff));outline-color:var(--wds-color-border-standard-tertiary-hover,var(--wsr-color-B30,#a8caff))}.KPdZa:where(:focus-visible){box-shadow:var(--wds-shadow-focus-standard,0 0 0 3px var(--wsr-color-F00,#a6d0ff))}.KPdZa>svg{block-size:18px;inline-size:18px;margin-inline-end:var(--wds-space-100,3px);margin-inline-start:calc(var(--wds-space-100, 3px)*-.5)}`;
+  var css = `._9hZhX{white-space:nowrap}._9hZhX>:not(hr){flex-shrink:0}._9hZhX hr{height:unset;margin-inline:6px}.v64-l{align-items:center;appearance:none;background-color:var(--wds-color-fill-standard-tertiary,var(--wsr-color-D80,#fff));block-size:var(--wds-tag-size-small,auto);border-radius:var(--wds-tag-border-radius-small,12px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--wds-tag-label-font-size-small,14px);line-height:var(--wds-tag-label-font-line-height-small,18px);max-block-size:var(--wds-tag-size-small,24px);max-inline-size:stretch;min-block-size:var(--wds-tag-size-tiny,18px);outline:var(--wds-border-width-100,1px) solid var(--wds-color-border-standard-tertiary,var(--wsr-color-D60,#dfe5eb));outline-offset:-1px;padding:var(--wds-tag-padding-vertical-small,3px) var(--wds-tag-padding-horizontal-small,12px);transition:background-color .3s ease;white-space:nowrap}.v64-l:where(:hover,:focus-visible){background-color:var(--wds-color-fill-standard-tertiary-hover,var(--wsr-color-B50,#e7f0ff));outline-color:var(--wds-color-border-standard-tertiary-hover,var(--wsr-color-B30,#a8caff))}.v64-l:where(:focus-visible){box-shadow:var(--wds-shadow-focus-standard,0 0 0 3px var(--wsr-color-F00,#a6d0ff))}.v64-l>svg{block-size:18px;inline-size:18px;margin-inline-end:var(--wds-space-100,3px);margin-inline-start:calc(var(--wds-space-100, 3px)*-.5)}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,8 +21,8 @@ const injectCss = (() => {
 });
 injectCss();
 var preset_bar_default = {
-  "root": "F33zN",
-  "presetListItem": "KPdZa"
+  "root": "_9hZhX",
+  "presetListItem": "v64-l"
 };
 export {
   preset_bar_default as default,

package/dist/es/plugin-html/tiptap/preset-bar/preset-bar-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-html/tiptap/preset-bar/preset-bar.scss"],
-  "sourcesContent": ["var styleDataHash = '74be8d09';  \nexport const injectCss = (() => {\n  var css = `.F33zN{white-space:nowrap}.F33zN>:not(hr){flex-shrink:0}.F33zN hr{height:unset;margin-inline:6px}.KPdZa{align-items:center;appearance:none;background-color:var(--wds-color-fill-standard-tertiary,var(--wsr-color-D80,#fff));block-size:var(--wds-tag-size-small,auto);border-radius:var(--wds-tag-border-radius-small,12px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--wds-tag-label-font-size-small,14px);line-height:var(--wds-tag-label-font-line-height-small,18px);max-block-size:var(--wds-tag-size-small,24px);max-inline-size:stretch;min-block-size:var(--wds-tag-size-tiny,18px);outline:var(--wds-border-width-100,1px) solid var(--wds-color-border-standard-tertiary,var(--wsr-color-D60,#dfe5eb));outline-offset:-1px;padding:var(--wds-tag-padding-vertical-small,3px) var(--wds-tag-padding-horizontal-small,12px);transition:background-color .3s ease;white-space:nowrap}.KPdZa:where(:hover,:focus-visible){background-color:var(--wds-color-fill-standard-tertiary-hover,var(--wsr-color-B50,#e7f0ff));outline-color:var(--wds-color-border-standard-tertiary-hover,var(--wsr-color-B30,#a8caff))}.KPdZa:where(:focus-visible){box-shadow:var(--wds-shadow-focus-standard,0 0 0 3px var(--wsr-color-F00,#a6d0ff))}.KPdZa>svg{block-size:18px;inline-size:18px;margin-inline-end:var(--wds-space-100,3px);margin-inline-start:calc(var(--wds-space-100, 3px)*-.5)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"root\": \"F33zN\",\n  \"presetListItem\": \"KPdZa\"\n};"],
+  "sourcesContent": ["var styleDataHash = '5304f1e9';  \nexport const injectCss = (() => {\n  var css = `._9hZhX{white-space:nowrap}._9hZhX>:not(hr){flex-shrink:0}._9hZhX hr{height:unset;margin-inline:6px}.v64-l{align-items:center;appearance:none;background-color:var(--wds-color-fill-standard-tertiary,var(--wsr-color-D80,#fff));block-size:var(--wds-tag-size-small,auto);border-radius:var(--wds-tag-border-radius-small,12px);box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--wds-tag-label-font-size-small,14px);line-height:var(--wds-tag-label-font-line-height-small,18px);max-block-size:var(--wds-tag-size-small,24px);max-inline-size:stretch;min-block-size:var(--wds-tag-size-tiny,18px);outline:var(--wds-border-width-100,1px) solid var(--wds-color-border-standard-tertiary,var(--wsr-color-D60,#dfe5eb));outline-offset:-1px;padding:var(--wds-tag-padding-vertical-small,3px) var(--wds-tag-padding-horizontal-small,12px);transition:background-color .3s ease;white-space:nowrap}.v64-l:where(:hover,:focus-visible){background-color:var(--wds-color-fill-standard-tertiary-hover,var(--wsr-color-B50,#e7f0ff));outline-color:var(--wds-color-border-standard-tertiary-hover,var(--wsr-color-B30,#a8caff))}.v64-l:where(:focus-visible){box-shadow:var(--wds-shadow-focus-standard,0 0 0 3px var(--wsr-color-F00,#a6d0ff))}.v64-l>svg{block-size:18px;inline-size:18px;margin-inline-end:var(--wds-space-100,3px);margin-inline-start:calc(var(--wds-space-100, 3px)*-.5)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"root\": \"_9hZhX\",\n  \"presetListItem\": \"v64-l\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,qBAAQ;AAAA,EACb,QAAQ;AAAA,EACR,kBAAkB;AACpB;",
   "names": []
 }

package/dist/es/plugin-html/viewer/html-viewer.js

@@ -1,4 +1,11 @@
-import React, { useContext, useMemo } from "react";
+import React, {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { RicosContext } from "./../../ricos-context/index.js";
 import { containsUrl } from "./../../_shared/link/contains-url.js";
 import { normalizeUrl } from "./../../_shared/link/normalize-url.js";
@@ -15,6 +22,8 @@ import { IframeHtml } from "../iframe-html.js";
 import { IframeUrl } from "../iframe-url.js";
 import { IframeWidget } from "../iframe-widget.js";
 import htmlStyles from "../statics/styles/HtmlComponent-scss.js";
+const LAZY_ROOT_MARGIN = "100% 0px";
+const HEIGHT_SETTLE_MS = 2e3;
 const getPageURL = (siteDomain) => {
   if (!siteDomain) {
     return;
@@ -28,11 +37,30 @@ const getPageURL = (siteDomain) => {
 const HtmlViewer = React.forwardRef(
   ({ settings, htmlData, iframeSandboxDomain, onIframeHeightChange, isViewer = false }, ref) => {
     const { isMobile } = useContext(RicosContext);
-    const [iframeHeight, setIframeHeight] = React.useState();
+    const isLazy = isMobile && isViewer;
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current);
+    const [iframeHeight, setIframeHeight] = useState();
+    const heightLockRef = useRef();
     const setHeight = (height) => {
-      if (height > 0 && height !== iframeHeight) {
-        setIframeHeight(height);
+      if (!(height > 0)) {
+        return;
       }
+      const lock = heightLockRef.current;
+      if (lock && lock.width === rootRef.current?.offsetWidth && height !== lock.height) {
+        if (height !== lock.candidate) {
+          clearTimeout(lock.release);
+          lock.candidate = height;
+          lock.release = setTimeout(() => {
+            heightLockRef.current = void 0;
+            setIframeHeight(height);
+          }, HEIGHT_SETTLE_MS);
+        }
+        return;
+      }
+      clearTimeout(lock?.release);
+      heightLockRef.current = void 0;
+      setIframeHeight(height);
     };
     const getIframeHeight = useMemo(() => {
       const { containerData, autoHeight } = htmlData;
@@ -56,15 +84,56 @@ const HtmlViewer = React.forwardRef(
       const pageURL = getPageURL(settings.siteDomain);
       return htmlFixer(htmlData.html, pageURL);
     }, [htmlData.html]);
+    const reportsHeight = !!htmlData.widgetId || !!html;
+    const [isNearViewport, setIsNearViewport] = useState(!isLazy);
+    const [isHeightSettled, setIsHeightSettled] = useState(!reportsHeight);
+    const [isIframeRendered, setIsIframeRendered] = useState(!isLazy);
+    useEffect(() => {
+      const root = rootRef.current;
+      if (!isLazy || !root || typeof IntersectionObserver === "undefined") {
+        setIsNearViewport(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry]) => setIsNearViewport(entry.isIntersecting),
+        { rootMargin: LAZY_ROOT_MARGIN }
+      );
+      observer.observe(root);
+      return () => observer.disconnect();
+    }, [isLazy]);
+    useEffect(() => {
+      if (!isLazy || !iframeHeight) {
+        return;
+      }
+      setIsHeightSettled(false);
+      const timeout = setTimeout(() => setIsHeightSettled(true), HEIGHT_SETTLE_MS);
+      return () => clearTimeout(timeout);
+    }, [isLazy, iframeHeight]);
+    useEffect(() => {
+      if (isNearViewport) {
+        setIsIframeRendered(true);
+      } else if (isHeightSettled) {
+        clearTimeout(heightLockRef.current?.release);
+        heightLockRef.current = iframeHeight && rootRef.current ? { height: iframeHeight, width: rootRef.current.offsetWidth } : void 0;
+        setIsIframeRendered(false);
+      }
+    }, [isNearViewport, isHeightSettled]);
+    useEffect(
+      () => () => {
+        clearTimeout(heightLockRef.current?.release);
+        heightLockRef.current = void 0;
+      },
+      [html, htmlData.url, htmlData.widgetId]
+    );
     return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: htmlStyles.htmlComponent,
         style,
         "data-hook": HTML_VIEWER_ROOT,
-        ref
+        ref: rootRef
       },
-      htmlData.widgetId ? /* @__PURE__ */ React.createElement(
+      !isIframeRendered ? null : htmlData.widgetId ? /* @__PURE__ */ React.createElement(
         IframeWidget,
         {
           key: SRC_TYPE_WIDGET,

package/dist/es/plugin-html/viewer/html-viewer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-html/viewer/html-viewer.tsx"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\nimport type { HTMLData } from './../../ricos-schema/next-schema/index.js';\nimport type { LegacyEditorPluginConfig } from './../../ricos-types/index.js';\nimport { containsUrl } from './../../_shared/link/contains-url.js';\nimport { normalizeUrl } from './../../_shared/link/normalize-url.js';\n\nimport { HTML_VIEWER_ROOT } from '../data-hooks.js';\nimport {\n  INIT_HEIGHT,\n  INIT_WIDTH,\n  SRC_TYPE_HTML,\n  SRC_TYPE_URL,\n  SRC_TYPE_WIDGET,\n} from '../defaults.js';\nimport { htmlFixer } from '../html-fixer.js';\nimport { IframeHtml } from '../iframe-html.js';\nimport { IframeUrl } from '../iframe-url.js';\nimport { IframeWidget } from '../iframe-widget.js';\nimport htmlStyles from '../statics/styles/HtmlComponent-scss.js';\n\nconst getPageURL = (siteDomain: string) => {\n  if (!siteDomain) {\n    return;\n  }\n\n  const regex = /http.+com/gm;\n  const res = regex.exec(siteDomain);\n  if (res) {\n    return res[0];\n  }\n};\n\nexport type HtmlViewerProps = {\n  settings: LegacyEditorPluginConfig;\n  htmlData: HTMLData;\n  iframeSandboxDomain?: string;\n  isViewer?: boolean;\n  onIframeHeightChange?: (height: number) => void;\n};\n\nexport const HtmlViewer = React.forwardRef<HTMLDivElement, HtmlViewerProps>(\n  ({ settings, htmlData, iframeSandboxDomain, onIframeHeightChange, isViewer = false }, ref) => {\n    const { isMobile } = useContext(RicosContext);\n    const [iframeHeight, setIframeHeight] = React.useState<number | undefined>();\n\n    const setHeight = (height: number) => {\n      if (height > 0 && height !== iframeHeight) {\n        setIframeHeight(height);\n      }\n    };\n\n    const getIframeHeight = useMemo(() => {\n      const { containerData, autoHeight } = htmlData;\n\n      if (autoHeight !== false && iframeHeight) {\n        onIframeHeightChange?.(iframeHeight);\n\n        return iframeHeight;\n      }\n\n      const customHeight = containerData?.height?.custom;\n\n      const parsedCustomHeight = parseInt(customHeight || '');\n      if (\n        !customHeight ||\n        (typeof customHeight === 'string' && customHeight.endsWith('%')) ||\n        isNaN(parsedCustomHeight)\n      ) {\n        return iframeHeight || settings.height || INIT_HEIGHT;\n      }\n\n      return parsedCustomHeight;\n    }, [htmlData, settings.height, iframeHeight]);\n\n    const style = {\n      width: isMobile\n        ? 'auto'\n        : htmlData.containerData?.width?.custom || settings.width || INIT_WIDTH + 'px',\n      height: getIframeHeight + 'px',\n      maxHeight: getIframeHeight + 'px',\n    };\n\n    const html = useMemo(() => {\n      const pageURL = getPageURL(settings.siteDomain);\n      return htmlFixer(htmlData.html, pageURL);\n    }, [htmlData.html]);\n\n    return (\n      <div\n        className={htmlStyles.htmlComponent}\n        style={style}\n        data-hook={HTML_VIEWER_ROOT}\n        ref={ref}\n      >\n        {htmlData.widgetId ? (\n          <IframeWidget\n            key={SRC_TYPE_WIDGET}\n            widgetId={htmlData.widgetId}\n            isViewer={isViewer}\n            onHeightChange={setHeight}\n            colorPalette={settings.getColorPalette?.()}\n          />\n        ) : html ? (\n          <IframeHtml\n            iframeSandboxDomain={iframeSandboxDomain || 'https://www.filesusr.com'}\n            key={SRC_TYPE_HTML}\n            html={html}\n            onHeightChange={setHeight}\n            isViewer={isViewer}\n          />\n        ) : htmlData.url && containsUrl(htmlData.url) ? (\n          <IframeUrl\n            key={SRC_TYPE_URL}\n            // @ts-ignore\n            tabIndex={0}\n            src={normalizeUrl(htmlData.url)}\n            isViewer={isViewer}\n          />\n        ) : (\n          <div className={htmlStyles.htmlComponent_placeholder} />\n        )}\n      </div>\n    );\n  }\n);\n"],
-  "mappings": "AAAA,OAAO,SAAS,YAAY,eAAe;AAE3C,SAAS,oBAAoB;AAG7B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAEvB,MAAM,aAAa,CAAC,eAAuB;AACzC,MAAI,CAAC,YAAY;AACf;AAAA,EACF;AAEA,QAAM,QAAQ;AACd,QAAM,MAAM,MAAM,KAAK,UAAU;AACjC,MAAI,KAAK;AACP,WAAO,IAAI,CAAC;AAAA,EACd;AACF;AAUO,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,UAAU,qBAAqB,sBAAsB,WAAW,MAAM,GAAG,QAAQ;AAC5F,UAAM,EAAE,SAAS,IAAI,WAAW,YAAY;AAC5C,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAA6B;AAE3E,UAAM,YAAY,CAAC,WAAmB;AACpC,UAAI,SAAS,KAAK,WAAW,cAAc;AACzC,wBAAgB,MAAM;AAAA,MACxB;AAAA,IACF;AAEA,UAAM,kBAAkB,QAAQ,MAAM;AACpC,YAAM,EAAE,eAAe,WAAW,IAAI;AAEtC,UAAI,eAAe,SAAS,cAAc;AACxC,+BAAuB,YAAY;AAEnC,eAAO;AAAA,MACT;AAEA,YAAM,eAAe,eAAe,QAAQ;AAE5C,YAAM,qBAAqB,SAAS,gBAAgB,EAAE;AACtD,UACE,CAAC,gBACA,OAAO,iBAAiB,YAAY,aAAa,SAAS,GAAG,KAC9D,MAAM,kBAAkB,GACxB;AACA,eAAO,gBAAgB,SAAS,UAAU;AAAA,MAC5C;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,UAAU,SAAS,QAAQ,YAAY,CAAC;AAE5C,UAAM,QAAQ;AAAA,MACZ,OAAO,WACH,SACA,SAAS,eAAe,OAAO,UAAU,SAAS,SAAS,aAAa;AAAA,MAC5E,QAAQ,kBAAkB;AAAA,MAC1B,WAAW,kBAAkB;AAAA,IAC/B;AAEA,UAAM,OAAO,QAAQ,MAAM;AACzB,YAAM,UAAU,WAAW,SAAS,UAAU;AAC9C,aAAO,UAAU,SAAS,MAAM,OAAO;AAAA,IACzC,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,QACtB;AAAA,QACA,aAAW;AAAA,QACX;AAAA;AAAA,MAEC,SAAS,WACR;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,UAAU,SAAS;AAAA,UACnB;AAAA,UACA,gBAAgB;AAAA,UAChB,cAAc,SAAS,kBAAkB;AAAA;AAAA,MAC3C,IACE,OACF;AAAA,QAAC;AAAA;AAAA,UACC,qBAAqB,uBAAuB;AAAA,UAC5C,KAAK;AAAA,UACL;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA;AAAA,MACF,IACE,SAAS,OAAO,YAAY,SAAS,GAAG,IAC1C;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UAEL,UAAU;AAAA,UACV,KAAK,aAAa,SAAS,GAAG;AAAA,UAC9B;AAAA;AAAA,MACF,IAEA,oCAAC,SAAI,WAAW,WAAW,2BAA2B;AAAA,IAE1D;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, {\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\nimport type { HTMLData } from './../../ricos-schema/next-schema/index.js';\nimport type { LegacyEditorPluginConfig } from './../../ricos-types/index.js';\nimport { containsUrl } from './../../_shared/link/contains-url.js';\nimport { normalizeUrl } from './../../_shared/link/normalize-url.js';\n\nimport { HTML_VIEWER_ROOT } from '../data-hooks.js';\nimport {\n  INIT_HEIGHT,\n  INIT_WIDTH,\n  SRC_TYPE_HTML,\n  SRC_TYPE_URL,\n  SRC_TYPE_WIDGET,\n} from '../defaults.js';\nimport { htmlFixer } from '../html-fixer.js';\nimport { IframeHtml } from '../iframe-html.js';\nimport { IframeUrl } from '../iframe-url.js';\nimport { IframeWidget } from '../iframe-widget.js';\nimport htmlStyles from '../statics/styles/HtmlComponent-scss.js';\n\n// Mobile Safari kills a tab that keeps dozens of embed iframes alive (RICH-2296), so the mobile\n// viewer keeps an embed's iframe only while the embed is within a screen of the viewport\nconst LAZY_ROOT_MARGIN = '100% 0px';\n// How long a height must stay unchanged to count as final, both before an embed is unloaded\n// and before a reloaded embed's new height replaces the one it kept\nconst HEIGHT_SETTLE_MS = 2000;\n\nconst getPageURL = (siteDomain: string) => {\n  if (!siteDomain) {\n    return;\n  }\n\n  const regex = /http.+com/gm;\n  const res = regex.exec(siteDomain);\n  if (res) {\n    return res[0];\n  }\n};\n\nexport type HtmlViewerProps = {\n  settings: LegacyEditorPluginConfig;\n  htmlData: HTMLData;\n  iframeSandboxDomain?: string;\n  isViewer?: boolean;\n  onIframeHeightChange?: (height: number) => void;\n};\n\nexport const HtmlViewer = React.forwardRef<HTMLDivElement, HtmlViewerProps>(\n  ({ settings, htmlData, iframeSandboxDomain, onIframeHeightChange, isViewer = false }, ref) => {\n    const { isMobile } = useContext(RicosContext);\n    const isLazy = isMobile && isViewer;\n    const rootRef = useRef<HTMLDivElement>(null);\n    useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);\n    const [iframeHeight, setIframeHeight] = useState<number | undefined>();\n    const heightLockRef = useRef<{\n      height: number;\n      width: number;\n      candidate?: number;\n      release?: ReturnType<typeof setTimeout>;\n    }>();\n\n    const setHeight = (height: number) => {\n      // Also drops malformed messages, whose height can be NaN or missing\n      if (!(height > 0)) {\n        return;\n      }\n      const lock = heightLockRef.current;\n      if (lock && lock.width === rootRef.current?.offsetWidth && height !== lock.height) {\n        // A reloaded iframe reports heights before its content renders; keep the measured one\n        // until the reload reports it again or settles on a new one, so reloading never shifts\n        // the page. The sandbox repeats unchanged heights, so only a new one restarts the wait\n        if (height !== lock.candidate) {\n          clearTimeout(lock.release);\n          lock.candidate = height;\n          lock.release = setTimeout(() => {\n            heightLockRef.current = undefined;\n            setIframeHeight(height);\n          }, HEIGHT_SETTLE_MS);\n        }\n        return;\n      }\n      clearTimeout(lock?.release);\n      heightLockRef.current = undefined;\n      setIframeHeight(height);\n    };\n\n    const getIframeHeight = useMemo(() => {\n      const { containerData, autoHeight } = htmlData;\n\n      if (autoHeight !== false && iframeHeight) {\n        onIframeHeightChange?.(iframeHeight);\n\n        return iframeHeight;\n      }\n\n      const customHeight = containerData?.height?.custom;\n\n      const parsedCustomHeight = parseInt(customHeight || '');\n      if (\n        !customHeight ||\n        (typeof customHeight === 'string' && customHeight.endsWith('%')) ||\n        isNaN(parsedCustomHeight)\n      ) {\n        return iframeHeight || settings.height || INIT_HEIGHT;\n      }\n\n      return parsedCustomHeight;\n    }, [htmlData, settings.height, iframeHeight]);\n\n    const style = {\n      width: isMobile\n        ? 'auto'\n        : htmlData.containerData?.width?.custom || settings.width || INIT_WIDTH + 'px',\n      height: getIframeHeight + 'px',\n      maxHeight: getIframeHeight + 'px',\n    };\n\n    const html = useMemo(() => {\n      const pageURL = getPageURL(settings.siteDomain);\n      return htmlFixer(htmlData.html, pageURL);\n    }, [htmlData.html]);\n\n    const reportsHeight = !!htmlData.widgetId || !!html;\n    const [isNearViewport, setIsNearViewport] = useState(!isLazy);\n    const [isHeightSettled, setIsHeightSettled] = useState(!reportsHeight);\n    const [isIframeRendered, setIsIframeRendered] = useState(!isLazy);\n\n    useEffect(() => {\n      const root = rootRef.current;\n      if (!isLazy || !root || typeof IntersectionObserver === 'undefined') {\n        // Also renders embeds that were unloaded before the viewer left mobile mode\n        setIsNearViewport(true);\n        return;\n      }\n      const observer = new IntersectionObserver(\n        ([entry]) => setIsNearViewport(entry.isIntersecting),\n        { rootMargin: LAZY_ROOT_MARGIN }\n      );\n      observer.observe(root);\n      return () => observer.disconnect();\n    }, [isLazy]);\n\n    useEffect(() => {\n      if (!isLazy || !iframeHeight) {\n        return;\n      }\n      setIsHeightSettled(false);\n      const timeout = setTimeout(() => setIsHeightSettled(true), HEIGHT_SETTLE_MS);\n      return () => clearTimeout(timeout);\n    }, [isLazy, iframeHeight]);\n\n    useEffect(() => {\n      if (isNearViewport) {\n        setIsIframeRendered(true);\n      } else if (isHeightSettled) {\n        // The container keeps its explicit height, so removing the iframe doesn't move the page\n        clearTimeout(heightLockRef.current?.release);\n        heightLockRef.current =\n          iframeHeight && rootRef.current\n            ? { height: iframeHeight, width: rootRef.current.offsetWidth }\n            : undefined;\n        setIsIframeRendered(false);\n      }\n    }, [isNearViewport, isHeightSettled]);\n\n    // A kept height belongs to the content it was measured for\n    useEffect(\n      () => () => {\n        clearTimeout(heightLockRef.current?.release);\n        heightLockRef.current = undefined;\n      },\n      [html, htmlData.url, htmlData.widgetId]\n    );\n\n    return (\n      <div\n        className={htmlStyles.htmlComponent}\n        style={style}\n        data-hook={HTML_VIEWER_ROOT}\n        ref={rootRef}\n      >\n        {!isIframeRendered ? null : htmlData.widgetId ? (\n          <IframeWidget\n            key={SRC_TYPE_WIDGET}\n            widgetId={htmlData.widgetId}\n            isViewer={isViewer}\n            onHeightChange={setHeight}\n            colorPalette={settings.getColorPalette?.()}\n          />\n        ) : html ? (\n          <IframeHtml\n            iframeSandboxDomain={iframeSandboxDomain || 'https://www.filesusr.com'}\n            key={SRC_TYPE_HTML}\n            html={html}\n            onHeightChange={setHeight}\n            isViewer={isViewer}\n          />\n        ) : htmlData.url && containsUrl(htmlData.url) ? (\n          <IframeUrl\n            key={SRC_TYPE_URL}\n            // @ts-ignore\n            tabIndex={0}\n            src={normalizeUrl(htmlData.url)}\n            isViewer={isViewer}\n          />\n        ) : (\n          <div className={htmlStyles.htmlComponent_placeholder} />\n        )}\n      </div>\n    );\n  }\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-html/viewer-styles-inject.js

@@ -1,6 +1,6 @@
-var styleDataHash = '41223ddc';  
+var styleDataHash = '5206b569';  
 export const injectCss = (() => {
-  var css = `.iNzn9{border:0;height:100%;overflow:hidden;width:100%}.gWOgu{height:100%;max-width:100%;position:relative;width:100%}.ZNG2o{background:rgba(51,51,51,.05);bottom:0;left:0;position:absolute;right:0;top:0}`;
+  var css = `.jszOf{border:0;height:100%;overflow:hidden;width:100%}.M8KHa{height:100%;max-width:100%;position:relative;width:100%}.zMeVd{background:rgba(51,51,51,.05);bottom:0;left:0;position:absolute;right:0;top:0}`;
   var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';
 
   if (isTest || !css || typeof document === 'undefined') { return; }

package/dist/es/plugin-image/components/corner-radius-handles-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "4241331e";
+var styleDataHash = "7a77172b";
 const injectCss = (() => {
-  var css = `.Nvky6{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}.iL4Db{align-items:center;background:#fff;border-radius:50%;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:flex;height:10px;justify-content:center;outline:1px solid rgba(0,6,36,.302);outline:1px solid #116dff;pointer-events:auto;position:absolute;transition:color .15s ease,background-color .15s ease;width:10px;z-index:7}.iL4Db:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.iL4Db:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.iL4Db:active{cursor:grabbing}.E5aEb{background:#116dff;border-radius:50%;flex-shrink:0;height:4px;width:4px}.iL4Db:active .E5aEb,.iL4Db:hover .E5aEb{background:#fff}.h371N{background:#116dff;border-radius:4px;color:#fff;font-size:12px;font-weight:500;line-height:1.2;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:8}`;
+  var css = `._4sRR7{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}.fzVoW{align-items:center;background:#fff;border-radius:50%;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:flex;height:10px;justify-content:center;outline:1px solid rgba(0,6,36,.302);outline:1px solid #116dff;pointer-events:auto;position:absolute;transition:color .15s ease,background-color .15s ease;width:10px;z-index:7}.fzVoW:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.fzVoW:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.fzVoW:active{cursor:grabbing}.ANf8w{background:#116dff;border-radius:50%;flex-shrink:0;height:4px;width:4px}.fzVoW:active .ANf8w,.fzVoW:hover .ANf8w{background:#fff}.Rvi-K{background:#116dff;border-radius:4px;color:#fff;font-size:12px;font-weight:500;line-height:1.2;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:8}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,10 +21,10 @@ const injectCss = (() => {
 });
 injectCss();
 var corner_radius_handles_default = {
-  "overlay": "Nvky6",
-  "handle": "iL4Db",
-  "handleDot": "E5aEb",
-  "radiusLabel": "h371N"
+  "overlay": "_4sRR7",
+  "handle": "fzVoW",
+  "handleDot": "ANf8w",
+  "radiusLabel": "Rvi-K"
 };
 export {
   corner_radius_handles_default as default,

package/dist/es/plugin-image/components/corner-radius-handles-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/components/corner-radius-handles.scss"],
-  "sourcesContent": ["var styleDataHash = '4241331e';  \nexport const injectCss = (() => {\n  var css = `.Nvky6{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}.iL4Db{align-items:center;background:#fff;border-radius:50%;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:flex;height:10px;justify-content:center;outline:1px solid rgba(0,6,36,.302);outline:1px solid #116dff;pointer-events:auto;position:absolute;transition:color .15s ease,background-color .15s ease;width:10px;z-index:7}.iL4Db:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.iL4Db:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.iL4Db:active{cursor:grabbing}.E5aEb{background:#116dff;border-radius:50%;flex-shrink:0;height:4px;width:4px}.iL4Db:active .E5aEb,.iL4Db:hover .E5aEb{background:#fff}.h371N{background:#116dff;border-radius:4px;color:#fff;font-size:12px;font-weight:500;line-height:1.2;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:8}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"Nvky6\",\n  \"handle\": \"iL4Db\",\n  \"handleDot\": \"E5aEb\",\n  \"radiusLabel\": \"h371N\"\n};"],
+  "sourcesContent": ["var styleDataHash = '7a77172b';  \nexport const injectCss = (() => {\n  var css = `._4sRR7{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}.fzVoW{align-items:center;background:#fff;border-radius:50%;box-shadow:0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#000624;cursor:grab;display:flex;height:10px;justify-content:center;outline:1px solid rgba(0,6,36,.302);outline:1px solid #116dff;pointer-events:auto;position:absolute;transition:color .15s ease,background-color .15s ease;width:10px;z-index:7}.fzVoW:hover{background:#116dff;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.fzVoW:active{background:#0f62e6;box-shadow:0 0 0 2px rgba(0,6,36,.1),0 0 6px 0 rgba(0,6,36,.1),0 2px 4px 0 rgba(0,6,36,.05);color:#fff;outline-color:#fff;outline-width:1.5px}.fzVoW:active{cursor:grabbing}.ANf8w{background:#116dff;border-radius:50%;flex-shrink:0;height:4px;width:4px}.fzVoW:active .ANf8w,.fzVoW:hover .ANf8w{background:#fff}.Rvi-K{background:#116dff;border-radius:4px;color:#fff;font-size:12px;font-weight:500;line-height:1.2;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:8}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"_4sRR7\",\n  \"handle\": \"fzVoW\",\n  \"handleDot\": \"ANf8w\",\n  \"radiusLabel\": \"Rvi-K\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,gCAAQ;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AACjB;",
   "names": []
 }

package/dist/es/plugin-image/components/crop-edge-handles-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "09e21ed2";
+var styleDataHash = "a0e7b3dc";
 const injectCss = (() => {
-  var css = `.qQJdf{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}`;
+  var css = `._6F01T{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,7 +21,7 @@ const injectCss = (() => {
 });
 injectCss();
 var crop_edge_handles_default = {
-  "overlay": "qQJdf"
+  "overlay": "_6F01T"
 };
 export {
   crop_edge_handles_default as default,

package/dist/es/plugin-image/components/crop-edge-handles-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/components/crop-edge-handles.scss"],
-  "sourcesContent": ["var styleDataHash = '09e21ed2';  \nexport const injectCss = (() => {\n  var css = `.qQJdf{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"qQJdf\"\n};"],
+  "sourcesContent": ["var styleDataHash = 'a0e7b3dc';  \nexport const injectCss = (() => {\n  var css = `._6F01T{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:6}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"_6F01T\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,4BAAQ;AAAA,EACb,WAAW;AACb;",
   "names": []
 }

package/dist/es/plugin-image/context.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { useRequestService } from "./../_shared/request-service-provider/request-service-provider.js";
 import { useWixInstanceService } from "./../_shared/request-service-provider/wix-instance-context.js";
 import { useEditorProps } from "./../_shared/some-editor-props-context.js";
 import { fetchMediaToken } from "./fetch-media-token.js";
@@ -7,17 +6,16 @@ const ImagePluginContext = React.createContext(null);
 const ImagePluginContextProvider = ({ children }) => {
   const [cachedSettings, setCachedSettings] = React.useState(null);
   const wixInstance = useWixInstanceService();
-  const { makeRequest } = useRequestService();
   const editorProps = useEditorProps();
   const getImageEditorSettings = React.useCallback(async () => {
     if (cachedSettings) {
       return cachedSettings;
     }
-    const { metaSiteId } = wixInstance();
+    const { metaSiteId, getWixClientPromise } = wixInstance();
     if (!metaSiteId) {
       return null;
     }
-    const token = await fetchMediaToken(makeRequest);
+    const token = await fetchMediaToken(getWixClientPromise);
     const settings = token ? {
       initiator: editorProps.biSettings?.consumer || "ricos-default",
       siteToken: token,

package/dist/es/plugin-image/context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-image/context.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { useRequestService } from './../_shared/request-service-provider/request-service-provider.js';\nimport { useWixInstanceService } from './../_shared/request-service-provider/wix-instance-context.js';\nimport { useEditorProps } from './../_shared/some-editor-props-context.js';\n\nimport { fetchMediaToken } from './fetch-media-token.js';\nimport type { ImageEditorWixSettings } from './types.js';\n\ntype ImagePluginContextValue = {\n  getImageEditorSettings: () => Promise<ImageEditorWixSettings | null>;\n};\n\nexport const ImagePluginContext = React.createContext<ImagePluginContextValue | null>(null);\n\nexport const ImagePluginContextProvider = ({ children }: { children: React.ReactNode }) => {\n  const [cachedSettings, setCachedSettings] = React.useState<ImageEditorWixSettings | null>(null);\n  const wixInstance = useWixInstanceService();\n  const { makeRequest } = useRequestService();\n  const editorProps = useEditorProps();\n\n  const getImageEditorSettings = React.useCallback(async () => {\n    if (cachedSettings) {\n      return cachedSettings;\n    }\n\n    const { metaSiteId } = wixInstance();\n    if (!metaSiteId) {\n      return null;\n    }\n\n    const token = await fetchMediaToken(makeRequest);\n    const settings = token\n      ? {\n          initiator: editorProps.biSettings?.consumer || 'ricos-default',\n          siteToken: token,\n          metaSiteId,\n          mediaRoot: 'photos',\n        }\n      : null;\n\n    if (settings) {\n      setCachedSettings(settings);\n    }\n    return settings;\n  }, [cachedSettings, wixInstance]);\n\n  return (\n    <ImagePluginContext.Provider\n      value={React.useMemo(() => ({ getImageEditorSettings }), [getImageEditorSettings])}\n    >\n      {children}\n    </ImagePluginContext.Provider>\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAE/B,SAAS,uBAAuB;AAOzB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAEnF,MAAM,6BAA6B,CAAC,EAAE,SAAS,MAAqC;AACzF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAwC,IAAI;AAC9F,QAAM,cAAc,sBAAsB;AAC1C,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAC1C,QAAM,cAAc,eAAe;AAEnC,QAAM,yBAAyB,MAAM,YAAY,YAAY;AAC3D,QAAI,gBAAgB;AAClB,aAAO;AAAA,IACT;AAEA,UAAM,EAAE,WAAW,IAAI,YAAY;AACnC,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,MAAM,gBAAgB,WAAW;AAC/C,UAAM,WAAW,QACb;AAAA,MACE,WAAW,YAAY,YAAY,YAAY;AAAA,MAC/C,WAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,IACb,IACA;AAEJ,QAAI,UAAU;AACZ,wBAAkB,QAAQ;AAAA,IAC5B;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEhC,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,OAAO,MAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AAAA;AAAA,IAEhF;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React from 'react';\n\nimport { useWixInstanceService } from './../_shared/request-service-provider/wix-instance-context.js';\nimport { useEditorProps } from './../_shared/some-editor-props-context.js';\n\nimport { fetchMediaToken } from './fetch-media-token.js';\nimport type { ImageEditorWixSettings } from './types.js';\n\ntype ImagePluginContextValue = {\n  getImageEditorSettings: () => Promise<ImageEditorWixSettings | null>;\n};\n\nexport const ImagePluginContext = React.createContext<ImagePluginContextValue | null>(null);\n\nexport const ImagePluginContextProvider = ({ children }: { children: React.ReactNode }) => {\n  const [cachedSettings, setCachedSettings] = React.useState<ImageEditorWixSettings | null>(null);\n  const wixInstance = useWixInstanceService();\n  const editorProps = useEditorProps();\n\n  const getImageEditorSettings = React.useCallback(async () => {\n    if (cachedSettings) {\n      return cachedSettings;\n    }\n\n    const { metaSiteId, getWixClientPromise } = wixInstance();\n    if (!metaSiteId) {\n      return null;\n    }\n\n    const token = await fetchMediaToken(getWixClientPromise);\n    const settings = token\n      ? {\n          initiator: editorProps.biSettings?.consumer || 'ricos-default',\n          siteToken: token,\n          metaSiteId,\n          mediaRoot: 'photos',\n        }\n      : null;\n\n    if (settings) {\n      setCachedSettings(settings);\n    }\n    return settings;\n  }, [cachedSettings, wixInstance]);\n\n  return (\n    <ImagePluginContext.Provider\n      value={React.useMemo(() => ({ getImageEditorSettings }), [getImageEditorSettings])}\n    >\n      {children}\n    </ImagePluginContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAE/B,SAAS,uBAAuB;AAOzB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAEnF,MAAM,6BAA6B,CAAC,EAAE,SAAS,MAAqC;AACzF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAwC,IAAI;AAC9F,QAAM,cAAc,sBAAsB;AAC1C,QAAM,cAAc,eAAe;AAEnC,QAAM,yBAAyB,MAAM,YAAY,YAAY;AAC3D,QAAI,gBAAgB;AAClB,aAAO;AAAA,IACT;AAEA,UAAM,EAAE,YAAY,oBAAoB,IAAI,YAAY;AACxD,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,MAAM,gBAAgB,mBAAmB;AACvD,UAAM,WAAW,QACb;AAAA,MACE,WAAW,YAAY,YAAY,YAAY;AAAA,MAC/C,WAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,IACb,IACA;AAEJ,QAAI,UAAU;AACZ,wBAAkB,QAAQ;AAAA,IAC5B;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEhC,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,OAAO,MAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AAAA;AAAA,IAEhF;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/es/plugin-image/crop-overlay/crop-overlay-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "ac77ed8d";
+var styleDataHash = "19a24d86";
 const injectCss = (() => {
-  var css = `[data-hook^=figure-][data-cropping] [data-hook=add-caption-button],[data-hook^=figure-][data-cropping] [data-resize-handle]{display:none!important;pointer-events:none!important}[data-hook^=figure-][data-cropping] [data-hook^=image-viewer-]{visibility:hidden!important}.-jRIJ{left:0;overflow:visible;position:absolute;top:0;touch-action:none;user-select:none}.tqakr{overflow:hidden;position:absolute}.EfpQ1{display:block;height:100%;width:100%;-webkit-user-drag:none}._9yCo4{box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;position:absolute}.kpRfE{background:rgba(0,0,0,.35);display:block;pointer-events:none;position:absolute}.-AbbB{border:1.5px solid #116dff;box-sizing:border-box;cursor:move;position:absolute}.gbcM0{background-image:linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35));background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%;background-repeat:no-repeat;background-size:1px 100%,1px 100%,100% 1px,100% 1px;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease}.-AbbB:active .gbcM0,.-AbbB:hover .gbcM0{opacity:1}.TdanK{position:absolute;z-index:1;--bracket-fill:var(--wsr-color-D80,#fff);--bracket-border:var(--wsr-color-D50,#b6c1cd)}.TdanK:hover{--bracket-fill:var(--wsr-color-B10,#116dff);--bracket-border:var(--wsr-color-D80,#fff)}.TdanK[data-active]{--bracket-fill:var(--wsr-color-B00,#084ebd);--bracket-border:var(--wsr-color-D80,#fff)}.TdanK[data-direction=bottomLeft],.TdanK[data-direction=bottomRight],.TdanK[data-direction=topLeft],.TdanK[data-direction=topRight]{height:20px;width:20px}.TdanK[data-direction=topLeft]{cursor:nwse-resize;left:-5px;top:-5px}.TdanK[data-direction=topRight]{cursor:nesw-resize;right:-5px;top:-5px}.TdanK[data-direction=bottomLeft]{bottom:-5px;cursor:nesw-resize;left:-5px}.TdanK[data-direction=bottomRight]{bottom:-5px;cursor:nwse-resize;right:-5px}.TdanK[data-direction=bottom]:after,.TdanK[data-direction=left]:after,.TdanK[data-direction=right]:after,.TdanK[data-direction=top]:after{background:var(--bracket-fill);border-radius:100px;box-shadow:0 0 0 1px var(--bracket-border);content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.TdanK[data-direction=bottom],.TdanK[data-direction=top]{cursor:ns-resize;height:16px;left:50%;margin-left:-24px;width:48px}.TdanK[data-direction=bottom]:after,.TdanK[data-direction=top]:after{height:4px;width:32px}.TdanK[data-direction=top]{top:-8px}.TdanK[data-direction=bottom]{bottom:-8px}.TdanK[data-direction=left],.TdanK[data-direction=right]{cursor:ew-resize;height:48px;margin-top:-24px;top:50%;width:16px}.TdanK[data-direction=left]:after,.TdanK[data-direction=right]:after{height:32px;width:4px}.TdanK[data-direction=left]{left:-8px}.TdanK[data-direction=right]{right:-8px}._827Ze{display:block;height:100%;width:100%}._827Ze path{fill:none;stroke-linecap:round;stroke-linejoin:round}.TdanK[data-direction=topRight] ._827Ze{transform:rotate(90deg)}.TdanK[data-direction=bottomRight] ._827Ze{transform:rotate(180deg)}.TdanK[data-direction=bottomLeft] ._827Ze{transform:rotate(270deg)}.fR-05{stroke:var(--bracket-border);stroke-width:6}._68ncE{stroke:var(--bracket-fill);stroke-width:4}.NYT39{display:flex;gap:8px;margin-top:8px;position:absolute;transform:translateX(-100%);z-index:2}.IBSfw,.vaJSc{align-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;width:32px}.IBSfw svg,.vaJSc svg{height:20px;width:20px}.vaJSc{background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 1px 4px rgba(0,0,0,.25);color:#000}.vaJSc:hover{background:#f0f0f0}.IBSfw{background:#116dff;box-shadow:0 1px 4px rgba(0,0,0,.25);color:#fff}.IBSfw:hover{filter:brightness(1.1)}`;
+  var css = `[data-hook^=figure-][data-cropping] [data-hook=add-caption-button],[data-hook^=figure-][data-cropping] [data-resize-handle]{display:none!important;pointer-events:none!important}[data-hook^=figure-][data-cropping] [data-hook^=image-viewer-]{visibility:hidden!important}.KiVnw{left:0;overflow:visible;position:absolute;top:0;touch-action:none;user-select:none}.qj0as{overflow:hidden;position:absolute}.EuklW{display:block;height:100%;width:100%;-webkit-user-drag:none}.Ju8tv{box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;position:absolute}.joCJS{background:rgba(0,0,0,.35);display:block;pointer-events:none;position:absolute}.-cEAb{border:1.5px solid #116dff;box-sizing:border-box;cursor:move;position:absolute}.-TgyZ{background-image:linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35));background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%;background-repeat:no-repeat;background-size:1px 100%,1px 100%,100% 1px,100% 1px;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease}.-cEAb:active .-TgyZ,.-cEAb:hover .-TgyZ{opacity:1}.DxuQZ{position:absolute;z-index:1;--bracket-fill:var(--wsr-color-D80,#fff);--bracket-border:var(--wsr-color-D50,#b6c1cd)}.DxuQZ:hover{--bracket-fill:var(--wsr-color-B10,#116dff);--bracket-border:var(--wsr-color-D80,#fff)}.DxuQZ[data-active]{--bracket-fill:var(--wsr-color-B00,#084ebd);--bracket-border:var(--wsr-color-D80,#fff)}.DxuQZ[data-direction=bottomLeft],.DxuQZ[data-direction=bottomRight],.DxuQZ[data-direction=topLeft],.DxuQZ[data-direction=topRight]{height:20px;width:20px}.DxuQZ[data-direction=topLeft]{cursor:nwse-resize;left:-5px;top:-5px}.DxuQZ[data-direction=topRight]{cursor:nesw-resize;right:-5px;top:-5px}.DxuQZ[data-direction=bottomLeft]{bottom:-5px;cursor:nesw-resize;left:-5px}.DxuQZ[data-direction=bottomRight]{bottom:-5px;cursor:nwse-resize;right:-5px}.DxuQZ[data-direction=bottom]:after,.DxuQZ[data-direction=left]:after,.DxuQZ[data-direction=right]:after,.DxuQZ[data-direction=top]:after{background:var(--bracket-fill);border-radius:100px;box-shadow:0 0 0 1px var(--bracket-border);content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.DxuQZ[data-direction=bottom],.DxuQZ[data-direction=top]{cursor:ns-resize;height:16px;left:50%;margin-left:-24px;width:48px}.DxuQZ[data-direction=bottom]:after,.DxuQZ[data-direction=top]:after{height:4px;width:32px}.DxuQZ[data-direction=top]{top:-8px}.DxuQZ[data-direction=bottom]{bottom:-8px}.DxuQZ[data-direction=left],.DxuQZ[data-direction=right]{cursor:ew-resize;height:48px;margin-top:-24px;top:50%;width:16px}.DxuQZ[data-direction=left]:after,.DxuQZ[data-direction=right]:after{height:32px;width:4px}.DxuQZ[data-direction=left]{left:-8px}.DxuQZ[data-direction=right]{right:-8px}.iYHeK{display:block;height:100%;width:100%}.iYHeK path{fill:none;stroke-linecap:round;stroke-linejoin:round}.DxuQZ[data-direction=topRight] .iYHeK{transform:rotate(90deg)}.DxuQZ[data-direction=bottomRight] .iYHeK{transform:rotate(180deg)}.DxuQZ[data-direction=bottomLeft] .iYHeK{transform:rotate(270deg)}.gpIvm{stroke:var(--bracket-border);stroke-width:6}._5AkdU{stroke:var(--bracket-fill);stroke-width:4}.q-D7s{display:flex;gap:8px;margin-top:8px;position:absolute;transform:translateX(-100%);z-index:2}.T8C8B,.Z4Tci{align-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;width:32px}.T8C8B svg,.Z4Tci svg{height:20px;width:20px}.Z4Tci{background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 1px 4px rgba(0,0,0,.25);color:#000}.Z4Tci:hover{background:#f0f0f0}.T8C8B{background:#116dff;box-shadow:0 1px 4px rgba(0,0,0,.25);color:#fff}.T8C8B:hover{filter:brightness(1.1)}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,20 +21,20 @@ const injectCss = (() => {
 });
 injectCss();
 var crop_overlay_default = {
-  "overlay": "-jRIJ",
-  "fullLayer": "tqakr",
-  "fullImage": "EfpQ1",
-  "mask": "_9yCo4",
-  "shapePreview": "kpRfE",
-  "frame": "-AbbB",
-  "frameGrid": "gbcM0",
-  "handle": "TdanK",
-  "bracket": "_827Ze",
-  "bracketBorder": "fR-05",
-  "bracketBody": "_68ncE",
-  "actions": "NYT39",
-  "cancelButton": "vaJSc",
-  "applyButton": "IBSfw"
+  "overlay": "KiVnw",
+  "fullLayer": "qj0as",
+  "fullImage": "EuklW",
+  "mask": "Ju8tv",
+  "shapePreview": "joCJS",
+  "frame": "-cEAb",
+  "frameGrid": "-TgyZ",
+  "handle": "DxuQZ",
+  "bracket": "iYHeK",
+  "bracketBorder": "gpIvm",
+  "bracketBody": "_5AkdU",
+  "actions": "q-D7s",
+  "cancelButton": "Z4Tci",
+  "applyButton": "T8C8B"
 };
 export {
   crop_overlay_default as default,

package/dist/es/plugin-image/crop-overlay/crop-overlay-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/crop-overlay/crop-overlay.scss"],
-  "sourcesContent": ["var styleDataHash = 'ac77ed8d';  \nexport const injectCss = (() => {\n  var css = `[data-hook^=figure-][data-cropping] [data-hook=add-caption-button],[data-hook^=figure-][data-cropping] [data-resize-handle]{display:none!important;pointer-events:none!important}[data-hook^=figure-][data-cropping] [data-hook^=image-viewer-]{visibility:hidden!important}.-jRIJ{left:0;overflow:visible;position:absolute;top:0;touch-action:none;user-select:none}.tqakr{overflow:hidden;position:absolute}.EfpQ1{display:block;height:100%;width:100%;-webkit-user-drag:none}._9yCo4{box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;position:absolute}.kpRfE{background:rgba(0,0,0,.35);display:block;pointer-events:none;position:absolute}.-AbbB{border:1.5px solid #116dff;box-sizing:border-box;cursor:move;position:absolute}.gbcM0{background-image:linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35));background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%;background-repeat:no-repeat;background-size:1px 100%,1px 100%,100% 1px,100% 1px;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease}.-AbbB:active .gbcM0,.-AbbB:hover .gbcM0{opacity:1}.TdanK{position:absolute;z-index:1;--bracket-fill:var(--wsr-color-D80,#fff);--bracket-border:var(--wsr-color-D50,#b6c1cd)}.TdanK:hover{--bracket-fill:var(--wsr-color-B10,#116dff);--bracket-border:var(--wsr-color-D80,#fff)}.TdanK[data-active]{--bracket-fill:var(--wsr-color-B00,#084ebd);--bracket-border:var(--wsr-color-D80,#fff)}.TdanK[data-direction=bottomLeft],.TdanK[data-direction=bottomRight],.TdanK[data-direction=topLeft],.TdanK[data-direction=topRight]{height:20px;width:20px}.TdanK[data-direction=topLeft]{cursor:nwse-resize;left:-5px;top:-5px}.TdanK[data-direction=topRight]{cursor:nesw-resize;right:-5px;top:-5px}.TdanK[data-direction=bottomLeft]{bottom:-5px;cursor:nesw-resize;left:-5px}.TdanK[data-direction=bottomRight]{bottom:-5px;cursor:nwse-resize;right:-5px}.TdanK[data-direction=bottom]:after,.TdanK[data-direction=left]:after,.TdanK[data-direction=right]:after,.TdanK[data-direction=top]:after{background:var(--bracket-fill);border-radius:100px;box-shadow:0 0 0 1px var(--bracket-border);content:\"\";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.TdanK[data-direction=bottom],.TdanK[data-direction=top]{cursor:ns-resize;height:16px;left:50%;margin-left:-24px;width:48px}.TdanK[data-direction=bottom]:after,.TdanK[data-direction=top]:after{height:4px;width:32px}.TdanK[data-direction=top]{top:-8px}.TdanK[data-direction=bottom]{bottom:-8px}.TdanK[data-direction=left],.TdanK[data-direction=right]{cursor:ew-resize;height:48px;margin-top:-24px;top:50%;width:16px}.TdanK[data-direction=left]:after,.TdanK[data-direction=right]:after{height:32px;width:4px}.TdanK[data-direction=left]{left:-8px}.TdanK[data-direction=right]{right:-8px}._827Ze{display:block;height:100%;width:100%}._827Ze path{fill:none;stroke-linecap:round;stroke-linejoin:round}.TdanK[data-direction=topRight] ._827Ze{transform:rotate(90deg)}.TdanK[data-direction=bottomRight] ._827Ze{transform:rotate(180deg)}.TdanK[data-direction=bottomLeft] ._827Ze{transform:rotate(270deg)}.fR-05{stroke:var(--bracket-border);stroke-width:6}._68ncE{stroke:var(--bracket-fill);stroke-width:4}.NYT39{display:flex;gap:8px;margin-top:8px;position:absolute;transform:translateX(-100%);z-index:2}.IBSfw,.vaJSc{align-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;width:32px}.IBSfw svg,.vaJSc svg{height:20px;width:20px}.vaJSc{background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 1px 4px rgba(0,0,0,.25);color:#000}.vaJSc:hover{background:#f0f0f0}.IBSfw{background:#116dff;box-shadow:0 1px 4px rgba(0,0,0,.25);color:#fff}.IBSfw:hover{filter:brightness(1.1)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"-jRIJ\",\n  \"fullLayer\": \"tqakr\",\n  \"fullImage\": \"EfpQ1\",\n  \"mask\": \"_9yCo4\",\n  \"shapePreview\": \"kpRfE\",\n  \"frame\": \"-AbbB\",\n  \"frameGrid\": \"gbcM0\",\n  \"handle\": \"TdanK\",\n  \"bracket\": \"_827Ze\",\n  \"bracketBorder\": \"fR-05\",\n  \"bracketBody\": \"_68ncE\",\n  \"actions\": \"NYT39\",\n  \"cancelButton\": \"vaJSc\",\n  \"applyButton\": \"IBSfw\"\n};"],
+  "sourcesContent": ["var styleDataHash = '19a24d86';  \nexport const injectCss = (() => {\n  var css = `[data-hook^=figure-][data-cropping] [data-hook=add-caption-button],[data-hook^=figure-][data-cropping] [data-resize-handle]{display:none!important;pointer-events:none!important}[data-hook^=figure-][data-cropping] [data-hook^=image-viewer-]{visibility:hidden!important}.KiVnw{left:0;overflow:visible;position:absolute;top:0;touch-action:none;user-select:none}.qj0as{overflow:hidden;position:absolute}.EuklW{display:block;height:100%;width:100%;-webkit-user-drag:none}.Ju8tv{box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;position:absolute}.joCJS{background:rgba(0,0,0,.35);display:block;pointer-events:none;position:absolute}.-cEAb{border:1.5px solid #116dff;box-sizing:border-box;cursor:move;position:absolute}.-TgyZ{background-image:linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35)),linear-gradient(hsla(0,0%,100%,.35),hsla(0,0%,100%,.35));background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%;background-repeat:no-repeat;background-size:1px 100%,1px 100%,100% 1px,100% 1px;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease}.-cEAb:active .-TgyZ,.-cEAb:hover .-TgyZ{opacity:1}.DxuQZ{position:absolute;z-index:1;--bracket-fill:var(--wsr-color-D80,#fff);--bracket-border:var(--wsr-color-D50,#b6c1cd)}.DxuQZ:hover{--bracket-fill:var(--wsr-color-B10,#116dff);--bracket-border:var(--wsr-color-D80,#fff)}.DxuQZ[data-active]{--bracket-fill:var(--wsr-color-B00,#084ebd);--bracket-border:var(--wsr-color-D80,#fff)}.DxuQZ[data-direction=bottomLeft],.DxuQZ[data-direction=bottomRight],.DxuQZ[data-direction=topLeft],.DxuQZ[data-direction=topRight]{height:20px;width:20px}.DxuQZ[data-direction=topLeft]{cursor:nwse-resize;left:-5px;top:-5px}.DxuQZ[data-direction=topRight]{cursor:nesw-resize;right:-5px;top:-5px}.DxuQZ[data-direction=bottomLeft]{bottom:-5px;cursor:nesw-resize;left:-5px}.DxuQZ[data-direction=bottomRight]{bottom:-5px;cursor:nwse-resize;right:-5px}.DxuQZ[data-direction=bottom]:after,.DxuQZ[data-direction=left]:after,.DxuQZ[data-direction=right]:after,.DxuQZ[data-direction=top]:after{background:var(--bracket-fill);border-radius:100px;box-shadow:0 0 0 1px var(--bracket-border);content:\"\";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.DxuQZ[data-direction=bottom],.DxuQZ[data-direction=top]{cursor:ns-resize;height:16px;left:50%;margin-left:-24px;width:48px}.DxuQZ[data-direction=bottom]:after,.DxuQZ[data-direction=top]:after{height:4px;width:32px}.DxuQZ[data-direction=top]{top:-8px}.DxuQZ[data-direction=bottom]{bottom:-8px}.DxuQZ[data-direction=left],.DxuQZ[data-direction=right]{cursor:ew-resize;height:48px;margin-top:-24px;top:50%;width:16px}.DxuQZ[data-direction=left]:after,.DxuQZ[data-direction=right]:after{height:32px;width:4px}.DxuQZ[data-direction=left]{left:-8px}.DxuQZ[data-direction=right]{right:-8px}.iYHeK{display:block;height:100%;width:100%}.iYHeK path{fill:none;stroke-linecap:round;stroke-linejoin:round}.DxuQZ[data-direction=topRight] .iYHeK{transform:rotate(90deg)}.DxuQZ[data-direction=bottomRight] .iYHeK{transform:rotate(180deg)}.DxuQZ[data-direction=bottomLeft] .iYHeK{transform:rotate(270deg)}.gpIvm{stroke:var(--bracket-border);stroke-width:6}._5AkdU{stroke:var(--bracket-fill);stroke-width:4}.q-D7s{display:flex;gap:8px;margin-top:8px;position:absolute;transform:translateX(-100%);z-index:2}.T8C8B,.Z4Tci{align-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;width:32px}.T8C8B svg,.Z4Tci svg{height:20px;width:20px}.Z4Tci{background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 1px 4px rgba(0,0,0,.25);color:#000}.Z4Tci:hover{background:#f0f0f0}.T8C8B{background:#116dff;box-shadow:0 1px 4px rgba(0,0,0,.25);color:#fff}.T8C8B:hover{filter:brightness(1.1)}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"overlay\": \"KiVnw\",\n  \"fullLayer\": \"qj0as\",\n  \"fullImage\": \"EuklW\",\n  \"mask\": \"Ju8tv\",\n  \"shapePreview\": \"joCJS\",\n  \"frame\": \"-cEAb\",\n  \"frameGrid\": \"-TgyZ\",\n  \"handle\": \"DxuQZ\",\n  \"bracket\": \"iYHeK\",\n  \"bracketBorder\": \"gpIvm\",\n  \"bracketBody\": \"_5AkdU\",\n  \"actions\": \"q-D7s\",\n  \"cancelButton\": \"Z4Tci\",\n  \"applyButton\": \"T8C8B\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,uBAAQ;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AAAA,EACV,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AACjB;",
   "names": []
 }

package/dist/es/plugin-image/fetch-media-token.js

@@ -1,15 +1,18 @@
-const BASE_URL = "/_serverless/ricos-media-services/media-token";
-const fetchMediaToken = async (makeRequest) => {
-  const response = await makeRequest(BASE_URL);
-  if (!response.ok) {
+const fetchMediaToken = async (getWixClientPromise) => {
+  try {
+    const [{ ricosDocuments }, wixClient] = await Promise.all([
+      import(
+        /* webpackChunkName: "wix-ricos-rich-content" */
+        "@wix/rich-content"
+      ),
+      getWixClientPromise()
+    ]);
+    const { token } = await wixClient.use(ricosDocuments).generateSiteMediaToken();
+    return token || null;
+  } catch {
     console.error("Failed to get media token");
     return null;
   }
-  const token = (await response.text()).replace(/^"+|"+$/g, "");
-  if (token && token.startsWith("JWS.")) {
-    return token;
-  }
-  return null;
 };
 export {
   fetchMediaToken

package/dist/es/plugin-image/fetch-media-token.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-image/fetch-media-token.ts"],
-  "sourcesContent": ["import type { RequestService } from './../_shared/request-service-provider/request-service-provider.js';\n\nconst BASE_URL = '/_serverless/ricos-media-services/media-token';\n\nexport const fetchMediaToken = async (makeRequest: RequestService['makeRequest']) => {\n  const response = await makeRequest(BASE_URL);\n\n  if (!response.ok) {\n    console.error('Failed to get media token');\n    return null;\n  }\n\n  const token = (await response.text()).replace(/^\"+|\"+$/g, '');\n\n  if (token && token.startsWith('JWS.')) {\n    return token;\n  }\n\n  return null;\n};\n"],
-  "mappings": "AAEA,MAAM,WAAW;AAEV,MAAM,kBAAkB,OAAO,gBAA+C;AACnF,QAAM,WAAW,MAAM,YAAY,QAAQ;AAE3C,MAAI,CAAC,SAAS,IAAI;AAChB,YAAQ,MAAM,2BAA2B;AACzC,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,MAAM,SAAS,KAAK,GAAG,QAAQ,YAAY,EAAE;AAE5D,MAAI,SAAS,MAAM,WAAW,MAAM,GAAG;AACrC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import type { GetWixClientPromise } from './../_shared/request-service-provider/use-get-wix-client-promise.js';\n\nexport const fetchMediaToken = async (getWixClientPromise: GetWixClientPromise) => {\n  try {\n    const [{ ricosDocuments }, wixClient] = await Promise.all([\n      import(/* webpackChunkName: \"wix-ricos-rich-content\" */ '@wix/rich-content'),\n      getWixClientPromise(),\n    ]);\n    const { token } = await wixClient.use(ricosDocuments).generateSiteMediaToken();\n    return token || null;\n  } catch {\n    console.error('Failed to get media token');\n    return null;\n  }\n};\n"],
+  "mappings": "AAEO,MAAM,kBAAkB,OAAO,wBAA6C;AACjF,MAAI;AACF,UAAM,CAAC,EAAE,eAAe,GAAG,SAAS,IAAI,MAAM,QAAQ,IAAI;AAAA,MACxD;AAAA;AAAA,QAAwD;AAAA,MAAmB;AAAA,MAC3E,oBAAoB;AAAA,IACtB,CAAC;AACD,UAAM,EAAE,MAAM,IAAI,MAAM,UAAU,IAAI,cAAc,EAAE,uBAAuB;AAC7E,WAAO,SAAS;AAAA,EAClB,QAAQ;AACN,YAAQ,MAAM,2BAA2B;AACzC,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/es/plugin-image/get-toolbar-buttons.js

@@ -376,7 +376,10 @@ const getToolbarButtons = (config, services) => {
     deleteButton
   ];
 };
-const getIsEditImageVisibleResolver = (config, services, isMobile) => () => config.imageEditor && Boolean(services.wixInstance()?.uid) && !isMobile;
+const getIsEditImageVisibleResolver = (config, services, isMobile) => () => (
+  // Image Studio needs a site media token, which is issued only to Wix users
+  config.imageEditor && Boolean(services.wixInstance()?.loginAccountId) && !isMobile
+);
 const ImageSetAsHeaderButton = ({ toolbarItem }) => {
   const { t } = useContext(RicosContext) || {};
   const onClick = toolbarItem.commands.click;