@wix/auto-patterns 1.44.0 → 1.46.0

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/index.js

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './hooks';
+export * from './colors-cache';
+export * from './publish-loader';
+export * from './fullscreen-modal';
+export * from './toggle-fullscreen-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/index.ts"],"sourcesContent":["export * from './types';\nexport * from './hooks';\nexport * from './colors-cache';\nexport * from './publish-loader';\nexport * from './fullscreen-modal';\nexport * from './toggle-fullscreen-button';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB;AAChC,cAAc,oBAAoB;AAClC,cAAc,4BAA4B","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/index.js

@@ -0,0 +1,2 @@
+export * from './publish-loader';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/index.ts"],"sourcesContent":["export * from './publish-loader';\n"],"mappings":"AAAA,cAAc,kBAAkB","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Loader, Text } from '@wix/design-system';
+import { useTranslations } from '../../../../../hooks';
+import { classes } from './publish-loader.st.css.js';
+export const PublishLoader = () => {
+  const {
+    t
+  } = useTranslations();
+  return /*#__PURE__*/React.createElement(Box, {
+    align: "center",
+    verticalAlign: "middle",
+    direction: "vertical",
+    className: classes.publishLoader
+  }, /*#__PURE__*/React.createElement(Loader, {
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, null, t('CMS.richContentCommon.publishLoader')));
+};
+PublishLoader.displayName = 'PublishLoader';
+//# sourceMappingURL=publish-loader.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Loader","Text","useTranslations","classes","PublishLoader","t","createElement","align","verticalAlign","direction","className","publishLoader","size","displayName"],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box, Loader, Text } from '@wix/design-system';\nimport { useTranslations } from '../../../../../hooks';\n\nimport { classes } from './publish-loader.st.css.js';\n\nexport const PublishLoader: React.FC = () => {\n  const { t } = useTranslations();\n  return (\n    <Box\n      align=\"center\"\n      verticalAlign=\"middle\"\n      direction=\"vertical\"\n      className={classes.publishLoader}\n    >\n      <Loader size=\"medium\" />\n      <Text>{t('CMS.richContentCommon.publishLoader')}</Text>\n    </Box>\n  );\n};\n\nPublishLoader.displayName = 'PublishLoader';\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG,EAAEC,MAAM,EAAEC,IAAI,QAAQ,oBAAoB;AACtD,SAASC,eAAe,QAAQ,sBAAsB;AAEtD,SAASC,OAAO,QAAQ,4BAA4B;AAEpD,OAAO,MAAMC,aAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAM;IAAEC;EAAE,CAAC,GAAGH,eAAe,CAAC,CAAC;EAC/B,oBACEJ,KAAA,CAAAQ,aAAA,CAACP,GAAG;IACFQ,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAC,QAAQ;IACtBC,SAAS,EAAC,UAAU;IACpBC,SAAS,EAAEP,OAAO,CAACQ;EAAc,gBAEjCb,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACY,IAAI,EAAC;EAAQ,CAAE,CAAC,eACxBd,KAAA,CAAAQ,aAAA,CAACL,IAAI,QAAEI,CAAC,CAAC,qCAAqC,CAAQ,CACnD,CAAC;AAEV,CAAC;AAEDD,aAAa,CAACS,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css

@@ -0,0 +1,12 @@
+@property st-global(--wds-color-white);
+
+.publishLoader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--wds-color-white);
+    z-index: 5000;
+    border-radius: inherit;
+}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js

@@ -0,0 +1,21 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../../../../stylable-esm-runtime.js";
+var _namespace_ = "publishloader1803553281";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "publishloader1803553281__root",
+  "publishLoader": "publishloader1803553281__publishLoader"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {
+  "wds-color-white": "--wds-color-white"
+};
+//# sourceMappingURL=publish-loader.st.css.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"publishloader1803553281\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"publishloader1803553281__root\",\"publishLoader\":\"publishloader1803553281__publishLoader\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-white\":\"--wds-color-white\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,2CAA2C;AAIzF,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,eAAe,EAAC;AAAwC,CAAC;AACtH,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,iBAAiB,EAAC;AAAmB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/index.js

@@ -0,0 +1,2 @@
+export * from './toggle-fullscreen-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/index.ts"],"sourcesContent":["export * from './toggle-fullscreen-button';\n"],"mappings":"AAAA,cAAc,4BAA4B","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { IconButton, Tooltip } from '@wix/design-system';
+import { DismissSmall as DismissIcon, MaximizeSmall as MaximizeIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../../../../hooks';
+import { classes } from './toggle-fullscreen-button.st.css.js';
+export const ToggleFullscreenButton = _ref => {
+  let {
+    isFullScreen,
+    onToggleFullScreen
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  return /*#__PURE__*/React.createElement("div", {
+    "data-hook": "rich-content.fullscreenButton",
+    className: classes.root
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: !isFullScreen ? t('CMS.richTextEditor.toolbar.button.tooltip.full-screen') : t('CMS.richTextEditor.toolbar.button.tooltip.full-screen.exit'),
+    size: "small",
+    moveBy: {
+      y: 8
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onToggleFullScreen,
+    priority: "secondary",
+    size: "small"
+  }, isFullScreen ? /*#__PURE__*/React.createElement(DismissIcon, null) : /*#__PURE__*/React.createElement(MaximizeIcon, null))));
+};
+ToggleFullscreenButton.displayName = 'ToggleFullScreenButton';
+//# sourceMappingURL=toggle-fullscreen-button.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconButton","Tooltip","DismissSmall","DismissIcon","MaximizeSmall","MaximizeIcon","useTranslations","classes","ToggleFullscreenButton","_ref","isFullScreen","onToggleFullScreen","t","createElement","className","root","content","size","moveBy","y","onClick","priority","displayName"],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport { IconButton, Tooltip } from '@wix/design-system';\nimport {\n  DismissSmall as DismissIcon,\n  MaximizeSmall as MaximizeIcon,\n} from '@wix/wix-ui-icons-common';\n\nimport { useTranslations } from '../../../../../hooks';\nimport { classes } from './toggle-fullscreen-button.st.css.js';\n\nexport interface ToggleFullscreenButtonProps {\n  isFullScreen: boolean;\n  onToggleFullScreen?: () => void;\n  className?: string;\n}\n\nexport const ToggleFullscreenButton: FC<ToggleFullscreenButtonProps> = ({\n  isFullScreen,\n  onToggleFullScreen,\n}) => {\n  const { t } = useTranslations();\n  return (\n    <div data-hook=\"rich-content.fullscreenButton\" className={classes.root}>\n      <Tooltip\n        content={\n          !isFullScreen\n            ? t('CMS.richTextEditor.toolbar.button.tooltip.full-screen')\n            : t('CMS.richTextEditor.toolbar.button.tooltip.full-screen.exit')\n        }\n        size=\"small\"\n        moveBy={{ y: 8 }}\n      >\n        <IconButton\n          onClick={onToggleFullScreen}\n          priority=\"secondary\"\n          size=\"small\"\n        >\n          {isFullScreen ? <DismissIcon /> : <MaximizeIcon />}\n        </IconButton>\n      </Tooltip>\n    </div>\n  );\n};\n\nToggleFullscreenButton.displayName = 'ToggleFullScreenButton';\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SACEC,YAAY,IAAIC,WAAW,EAC3BC,aAAa,IAAIC,YAAY,QACxB,0BAA0B;AAEjC,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,OAAO,QAAQ,sCAAsC;AAQ9D,OAAO,MAAMC,sBAAuD,GAAGC,IAAA,IAGjE;EAAA,IAHkE;IACtEC,YAAY;IACZC;EACF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG;EAAE,CAAC,GAAGN,eAAe,CAAC,CAAC;EAC/B,oBACEP,KAAA,CAAAc,aAAA;IAAK,aAAU,+BAA+B;IAACC,SAAS,EAAEP,OAAO,CAACQ;EAAK,gBACrEhB,KAAA,CAAAc,aAAA,CAACZ,OAAO;IACNe,OAAO,EACL,CAACN,YAAY,GACTE,CAAC,CAAC,uDAAuD,CAAC,GAC1DA,CAAC,CAAC,4DAA4D,CACnE;IACDK,IAAI,EAAC,OAAO;IACZC,MAAM,EAAE;MAAEC,CAAC,EAAE;IAAE;EAAE,gBAEjBpB,KAAA,CAAAc,aAAA,CAACb,UAAU;IACToB,OAAO,EAAET,kBAAmB;IAC5BU,QAAQ,EAAC,WAAW;IACpBJ,IAAI,EAAC;EAAO,GAEXP,YAAY,gBAAGX,KAAA,CAAAc,aAAA,CAACV,WAAW,MAAE,CAAC,gBAAGJ,KAAA,CAAAc,aAAA,CAACR,YAAY,MAAE,CACvC,CACL,CACN,CAAC;AAEV,CAAC;AAEDG,sBAAsB,CAACc,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css

@@ -0,0 +1,12 @@
+.root {
+    z-index: 5;
+    box-sizing: border-box;
+    position: absolute;
+    right: 0;
+    top: calc(50% - 16px) !important;
+    padding-right: 3px;
+}
+
+.root button {
+    border-radius: 6px !important;
+}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js

@@ -0,0 +1,18 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../../../../stylable-esm-runtime.js";
+var _namespace_ = "togglefullscreenbutton1962288780";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "togglefullscreenbutton1962288780__root"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {};
+//# sourceMappingURL=toggle-fullscreen-button.st.css.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"togglefullscreenbutton1962288780\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"togglefullscreenbutton1962288780__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,2CAA2C;AAIzF,IAAIC,WAAW,GAAG,kCAAkC;AACpD,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC;AAAwC,CAAC;AACtE,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-common/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-common/types.ts"],"sourcesContent":["import type Experiments from '@wix/wix-experiments';\nimport type { RichContent, RicosTheme } from '@wix/ricos';\n\nimport type { ColorScheme } from '../../types';\n\nexport interface RichContentInputProps {\n  theme: RicosTheme;\n  colorScheme?: ColorScheme;\n  experiments: Experiments;\n  data?: RichContent;\n  onChange: (data?: RichContent) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-editor/index.js

@@ -0,0 +1,2 @@
+export * from './rich-content-editor';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-editor/index.ts"],"sourcesContent":["export * from './rich-content-editor';\n"],"mappings":"AAAA,cAAc,uBAAuB","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-editor/plugins.js

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { pluginTextColor, pluginTextHighlight, pluginHeadings, pluginLink, pluginLineSpacing, pluginImage, pluginVideo, pluginDivider, pluginFileUpload, pluginHtml, pluginLinkPreview, LinkPreviewProviders, pluginVerticalEmbed, verticalEmbedProviders, pluginEmoji, pluginSpoiler, pluginGiphy, pluginCodeBlock, pluginGallery, pluginCollapsibleList, pluginIndent, pluginTable, pluginLinkButton, pluginAi } from '@wix/ricos';
+import { isTruthy } from '../../../../utils';
+import { colorsCache } from '../rich-content-common';
+import { CMS_RICOS_APP_ID } from '../consts';
+const {
+  Instagram,
+  Twitter,
+  TikTok
+} = LinkPreviewProviders;
+const {
+  event,
+  booking,
+  product
+} = verticalEmbedProviders;
+const layoutPlugin = {
+  type: 'LAYOUT',
+  showInQuickActions: true,
+  showInToolbars: true
+};
+export const usePlugins = colorScheme => {
+  return useMemo(() => [pluginHeadings({
+    inlinePopups: true
+  }), pluginTextColor({
+    inlinePopups: true,
+    onColorAdded: colorsCache.add,
+    getUserColors: colorsCache.get,
+    colorScheme
+  }), pluginTextHighlight({
+    inlinePopups: true,
+    onColorAdded: colorsCache.add,
+    getUserColors: colorsCache.get,
+    colorScheme
+  }), pluginLineSpacing({
+    inlinePopups: true
+  }), pluginIndent(), pluginLink(), pluginImage(), pluginVideo(), pluginGallery(), pluginDivider(), pluginTable({
+    toolbar: {}
+  }), pluginAi({
+    appDefId: CMS_RICOS_APP_ID
+  }), pluginFileUpload(), pluginHtml(), pluginLinkPreview({
+    exposeEmbedButtons: [Instagram, Twitter, TikTok]
+  }), pluginVerticalEmbed({
+    exposeEmbedButtons: [event, booking, product]
+  }), pluginCodeBlock(), pluginEmoji(), pluginSpoiler(), pluginGiphy(), pluginCollapsibleList(), pluginLinkButton(), layoutPlugin].filter(isTruthy), [colorScheme]);
+};
+//# sourceMappingURL=plugins.js.map

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-editor/plugins.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","pluginTextColor","pluginTextHighlight","pluginHeadings","pluginLink","pluginLineSpacing","pluginImage","pluginVideo","pluginDivider","pluginFileUpload","pluginHtml","pluginLinkPreview","LinkPreviewProviders","pluginVerticalEmbed","verticalEmbedProviders","pluginEmoji","pluginSpoiler","pluginGiphy","pluginCodeBlock","pluginGallery","pluginCollapsibleList","pluginIndent","pluginTable","pluginLinkButton","pluginAi","isTruthy","colorsCache","CMS_RICOS_APP_ID","Instagram","Twitter","TikTok","event","booking","product","layoutPlugin","type","showInQuickActions","showInToolbars","usePlugins","colorScheme","inlinePopups","onColorAdded","add","getUserColors","get","toolbar","appDefId","exposeEmbedButtons","filter"],"sources":["../../../../../../../src/cms-fields/components/rich-content/rich-content-input/rich-content-editor/plugins.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { EditorPlugin, EditorPluginOptions } from '@wix/ricos';\nimport {\n  pluginTextColor,\n  pluginTextHighlight,\n  pluginHeadings,\n  pluginLink,\n  pluginLineSpacing,\n  pluginImage,\n  pluginVideo,\n  pluginDivider,\n  pluginFileUpload,\n  pluginHtml,\n  pluginLinkPreview,\n  LinkPreviewProviders,\n  pluginVerticalEmbed,\n  verticalEmbedProviders,\n  pluginEmoji,\n  pluginSpoiler,\n  pluginGiphy,\n  pluginCodeBlock,\n  pluginGallery,\n  pluginCollapsibleList,\n  pluginIndent,\n  pluginTable,\n  pluginLinkButton,\n  pluginAi,\n} from '@wix/ricos';\n\nimport { isTruthy } from '../../../../utils';\nimport type { ColorScheme } from '../../types';\n\nimport { colorsCache } from '../rich-content-common';\nimport { CMS_RICOS_APP_ID } from '../consts';\n\nconst { Instagram, Twitter, TikTok } = LinkPreviewProviders;\nconst { event, booking, product } = verticalEmbedProviders;\n\nconst layoutPlugin: EditorPluginOptions = {\n  type: 'LAYOUT',\n  showInQuickActions: true,\n  showInToolbars: true,\n};\n\nexport const usePlugins = (colorScheme?: ColorScheme) => {\n  return useMemo<(EditorPlugin | EditorPluginOptions)[]>(\n    () =>\n      [\n        pluginHeadings({ inlinePopups: true }),\n        pluginTextColor({\n          inlinePopups: true,\n          onColorAdded: colorsCache.add,\n          getUserColors: colorsCache.get,\n          colorScheme,\n        }),\n        pluginTextHighlight({\n          inlinePopups: true,\n          onColorAdded: colorsCache.add,\n          getUserColors: colorsCache.get,\n          colorScheme,\n        }),\n        pluginLineSpacing({ inlinePopups: true }),\n        pluginIndent(),\n        pluginLink(),\n        pluginImage(),\n        pluginVideo(),\n        pluginGallery(),\n        pluginDivider(),\n        pluginTable({ toolbar: {} }),\n        pluginAi({\n          appDefId: CMS_RICOS_APP_ID,\n        }) as unknown as EditorPlugin,\n        pluginFileUpload(),\n        pluginHtml(),\n        pluginLinkPreview({\n          exposeEmbedButtons: [Instagram, Twitter, TikTok],\n        }),\n        pluginVerticalEmbed({\n          exposeEmbedButtons: [event, booking, product],\n        }),\n        pluginCodeBlock(),\n        pluginEmoji(),\n        pluginSpoiler(),\n        pluginGiphy(),\n        pluginCollapsibleList(),\n        pluginLinkButton(),\n        layoutPlugin,\n      ].filter(isTruthy),\n    [colorScheme],\n  );\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAG/B,SACEC,eAAe,EACfC,mBAAmB,EACnBC,cAAc,EACdC,UAAU,EACVC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,gBAAgB,EAChBC,UAAU,EACVC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,eAAe,EACfC,aAAa,EACbC,qBAAqB,EACrBC,YAAY,EACZC,WAAW,EACXC,gBAAgB,EAChBC,QAAQ,QACH,YAAY;AAEnB,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,gBAAgB,QAAQ,WAAW;AAE5C,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAO,CAAC,GAAGlB,oBAAoB;AAC3D,MAAM;EAAEmB,KAAK;EAAEC,OAAO;EAAEC;AAAQ,CAAC,GAAGnB,sBAAsB;AAE1D,MAAMoB,YAAiC,GAAG;EACxCC,IAAI,EAAE,QAAQ;EACdC,kBAAkB,EAAE,IAAI;EACxBC,cAAc,EAAE;AAClB,CAAC;AAED,OAAO,MAAMC,UAAU,GAAIC,WAAyB,IAAK;EACvD,OAAOvC,OAAO,CACZ,MACE,CACEG,cAAc,CAAC;IAAEqC,YAAY,EAAE;EAAK,CAAC,CAAC,EACtCvC,eAAe,CAAC;IACduC,YAAY,EAAE,IAAI;IAClBC,YAAY,EAAEf,WAAW,CAACgB,GAAG;IAC7BC,aAAa,EAAEjB,WAAW,CAACkB,GAAG;IAC9BL;EACF,CAAC,CAAC,EACFrC,mBAAmB,CAAC;IAClBsC,YAAY,EAAE,IAAI;IAClBC,YAAY,EAAEf,WAAW,CAACgB,GAAG;IAC7BC,aAAa,EAAEjB,WAAW,CAACkB,GAAG;IAC9BL;EACF,CAAC,CAAC,EACFlC,iBAAiB,CAAC;IAAEmC,YAAY,EAAE;EAAK,CAAC,CAAC,EACzCnB,YAAY,CAAC,CAAC,EACdjB,UAAU,CAAC,CAAC,EACZE,WAAW,CAAC,CAAC,EACbC,WAAW,CAAC,CAAC,EACbY,aAAa,CAAC,CAAC,EACfX,aAAa,CAAC,CAAC,EACfc,WAAW,CAAC;IAAEuB,OAAO,EAAE,CAAC;EAAE,CAAC,CAAC,EAC5BrB,QAAQ,CAAC;IACPsB,QAAQ,EAAEnB;EACZ,CAAC,CAAC,EACFlB,gBAAgB,CAAC,CAAC,EAClBC,UAAU,CAAC,CAAC,EACZC,iBAAiB,CAAC;IAChBoC,kBAAkB,EAAE,CAACnB,SAAS,EAAEC,OAAO,EAAEC,MAAM;EACjD,CAAC,CAAC,EACFjB,mBAAmB,CAAC;IAClBkC,kBAAkB,EAAE,CAAChB,KAAK,EAAEC,OAAO,EAAEC,OAAO;EAC9C,CAAC,CAAC,EACFf,eAAe,CAAC,CAAC,EACjBH,WAAW,CAAC,CAAC,EACbC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACbG,qBAAqB,CAAC,CAAC,EACvBG,gBAAgB,CAAC,CAAC,EAClBW,YAAY,CACb,CAACc,MAAM,CAACvB,QAAQ,CAAC,EACpB,CAACc,WAAW,CACd,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.js

@@ -0,0 +1,381 @@
+import _extends from "@babel/runtime/helpers/extends";
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import defaultsDeep from 'lodash/defaultsDeep';
+import React, { forwardRef, useRef, useMemo, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { Box, Loader } from '@wix/design-system';
+import { WixRicosEditor, ToolbarType as TOOLBARS, FORMATTING_BUTTONS, withEditorContext } from '@wix/ricos';
+import { useRequestFrameCallback } from '../../../../hooks';
+import { getActiveElement, getAppRootElement } from '../../../../utils';
+import { UserSiteFonts } from '../../../user-site-fonts';
+import { Z_INDEX_MODAL_POPOVER } from '../../../common';
+import { useWixRicosProps, FullscreenModal, ToggleFullscreenButton, INITIAL_INJECTED_RICH_CONTENT } from '../rich-content-common';
+import { usePlugins } from './plugins';
+import { ExternalToolbar } from './rich-content-toolbar';
+import { st, classes } from './rich-content-editor.st.css.js';
+const linkPanelSettings = {
+  externalPopups: true,
+  showSponsoredCheckbox: true
+};
+const RCE = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    content,
+    injectedContent,
+    onChange,
+    autoFocus,
+    onFocus,
+    onBlur,
+    className,
+    getToolbarSettings,
+    dataHook,
+    colorScheme,
+    isFullScreen,
+    onToggleFullScreen,
+    hidden,
+    children,
+    ...ricosProps
+  } = _ref;
+  const containerRef = useRef(null);
+  const containerHeightRef = useRef();
+  const onFullScreenChange = useCallback(() => {
+    onToggleFullScreen == null || onToggleFullScreen();
+    if (containerRef.current) {
+      containerHeightRef.current = containerRef.current.clientHeight;
+    }
+  }, [onToggleFullScreen]);
+  const editorRef = useRef(null);
+  const [isToolbarReady, setIsToolbarReady] = useState(false);
+  const [toolbarButtons, setToolbarButtons] = useState({});
+  const updateButtons = useCallback(function (editorLoaded, effect) {
+    if (effect === void 0) {
+      effect = false;
+    }
+    if (!editorRef.current) {
+      return;
+    }
+    const toolbarButtons = editorRef.current.getToolbarProps(TOOLBARS.INSERT_PLUGIN).buttons;
+    if (Object.values(toolbarButtons).length > 0) {
+      !effect && setToolbarButtons(toolbarButtons);
+      editorLoaded && setIsToolbarReady(true);
+    }
+  }, []);
+  useEffect(() => updateButtons(false, true));
+  const onLoadEditor = useCallback(() => updateButtons(true), [updateButtons]);
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => {
+      var _editorRef$current;
+      (_editorRef$current = editorRef.current) == null || _editorRef$current.focus();
+      updateButtons();
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [autoFocus, updateButtons]);
+  useImperativeHandle(ref, () => ({
+    isContentChanged: () => {
+      var _editorRef$current2;
+      return Boolean((_editorRef$current2 = editorRef.current) == null ? void 0 : _editorRef$current2.getContentTraits().isContentChanged);
+    }
+  }));
+  const toolbarContainerRef = useRef(null);
+  const toolbarSettings = useToolbarSettings(toolbarContainerRef.current, getToolbarSettings);
+  const isModalOpenRef = useRef(false);
+  const modalSettings = useMemo(() => ({
+    onModalOpen() {
+      isModalOpenRef.current = true;
+    },
+    onModalClose() {
+      isModalOpenRef.current = false;
+    }
+  }), []);
+  const isFocusedRef = useRef(false);
+  const isBlurringRef = useRef(false);
+  const triggerFocus = useCallback(() => {
+    isBlurringRef.current = false;
+    if (isFocusedRef.current) {
+      return;
+    }
+    isFocusedRef.current = true;
+    onFocus == null || onFocus();
+  }, [onFocus]);
+  const triggerBlur = useCallback(() => {
+    isBlurringRef.current = false;
+    if (!isFocusedRef.current) {
+      return;
+    }
+    isFocusedRef.current = false;
+    onBlur == null || onBlur();
+  }, [onBlur]);
+  const requestBlurCallback = useRequestFrameCallback();
+  const requestEditorBlur = useCallback(() => {
+    isBlurringRef.current = true;
+    requestBlurCallback(() => isBlurringRef.current && triggerBlur());
+  }, [triggerBlur, requestBlurCallback]);
+  const handleFocus = useCallback(() => {
+    if (containerRef.current === getActiveElement()) {
+      var _editorRef$current3;
+      (_editorRef$current3 = editorRef.current) == null || _editorRef$current3.focus();
+      updateButtons();
+    }
+    triggerFocus();
+  }, [triggerFocus, updateButtons]);
+  const handleBlur = useCallback(_ref2 => {
+    var _containerRef$current;
+    let {
+      relatedTarget
+    } = _ref2;
+    if (!relatedTarget) {
+      requestEditorBlur();
+      return;
+    }
+    if (isModalOpenRef.current || (_containerRef$current = containerRef.current) != null && _containerRef$current.contains(relatedTarget)) {
+      /**
+       * @NOTE
+       * Ignore events which come from modal or
+       * from any target inside editor container
+       */
+      return;
+    }
+
+    /**
+     * @NOTE
+     * If editor container is blurred due to focus of element
+     * that is out of app root (e.g. tooltip rendered in portal),
+     * then editor blur should be requested to ensure
+     * that editor should not be focused after user action,
+     * otherwise editor should be blurred immediately
+     */
+    if (!getAppRootElement().contains(relatedTarget)) {
+      requestEditorBlur();
+    } else {
+      triggerBlur();
+    }
+  }, [triggerBlur, requestEditorBlur]);
+
+  /**
+   * NOTE:
+   * `handleOnChange` handles only change events when editor is not focused or focus was lost.
+   * In a normal flow `onChange` is not called on every input and all the changes submitted on blur.
+   */
+  const handleOnChange = useCallback(() => {
+    const hasLostFocusElement = document.activeElement === document.body;
+    if (!isFocusedRef.current || hasLostFocusElement) {
+      const isInitialInjectedContent = isEqual(INITIAL_INJECTED_RICH_CONTENT, injectedContent);
+      if (!isInitialInjectedContent) {
+        onBlur == null || onBlur();
+      }
+    }
+  }, [onBlur, injectedContent]);
+  const wixRicosProps = useWixRicosProps();
+  const plugins = usePlugins(colorScheme);
+  const renderInContainer = children => /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    "data-hook": "rich-content.editor",
+    className: st(classes.root, className),
+    tabIndex: onFocus || onBlur ? 0 : undefined,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    style: {
+      height: hidden ? containerHeightRef.current : undefined
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.toolbarAndFullScreenButtonWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.toolbarContainer,
+    ref: toolbarContainerRef
+  }), !hidden && isToolbarReady && /*#__PURE__*/React.createElement(ToggleFullscreenButton, {
+    isFullScreen: isFullScreen,
+    onToggleFullScreen: onFullScreenChange
+  })), !hidden ? children : null, !isToolbarReady && /*#__PURE__*/React.createElement(RCELoader, null), !hidden && isToolbarReady && /*#__PURE__*/React.createElement("div", {
+    "data-hook": "rich-content.footerToolbar",
+    className: classes.footerToolbarContainer
+  }, /*#__PURE__*/React.createElement(ExternalToolbar, {
+    buttons: toolbarButtons
+  })));
+  return renderInContainer(/*#__PURE__*/React.createElement("div", {
+    "data-hook": dataHook,
+    className: classes.editor
+  }, /*#__PURE__*/React.createElement(WixRicosEditor, _extends({
+    ref: editorRef,
+    plugins: plugins,
+    content: content,
+    injectedContent: injectedContent,
+    toolbarSettings: toolbarSettings,
+    linkPanelSettings: linkPanelSettings,
+    modalSettings: modalSettings,
+    textWrap: false,
+    onLoad: onLoadEditor,
+    onChange: handleOnChange,
+    container: containerRef.current
+  }, ricosProps, wixRicosProps))));
+});
+RCE.displayName = 'RCE';
+const RCELoader = () => /*#__PURE__*/React.createElement(Box, {
+  align: "center",
+  verticalAlign: "middle",
+  position: "absolute",
+  top: "0",
+  bottom: "0",
+  width: "100%"
+}, /*#__PURE__*/React.createElement(Loader, {
+  size: "small"
+}));
+RCELoader.displayName = 'RCELoader';
+const LOADER_DELAY = 100;
+export const RichContentEditor = withEditorContext(_ref3 => {
+  let {
+    onFocus,
+    onBlur,
+    onEnterFullScreen,
+    onExitFullScreen,
+    fullScreenOnly,
+    editorEvents,
+    onPublish,
+    onChange,
+    theme,
+    ...props
+  } = _ref3;
+  const editorRef = useRef(null);
+  const modalEditorRef = useRef(null);
+  const isRichContentChanged = useCallback(() => {
+    var _editorRef$current4, _modalEditorRef$curre;
+    return Boolean(((_editorRef$current4 = editorRef.current) == null ? void 0 : _editorRef$current4.isContentChanged()) || ((_modalEditorRef$curre = modalEditorRef.current) == null ? void 0 : _modalEditorRef$curre.isContentChanged()));
+  }, []);
+  const handleChange = useCallback(richContent => {
+    onChange == null || onChange(richContent, isRichContentChanged());
+  }, [onChange, isRichContentChanged]);
+  const [loader, setLoader] = useState(false);
+  const timer = useRef(0);
+  const resetLoader = useCallback(() => {
+    window.clearTimeout(timer.current);
+    setLoader(false);
+  }, []);
+  const queueLoader = useCallback(() => {
+    timer.current = window.setTimeout(() => {
+      setLoader(true);
+    }, LOADER_DELAY);
+  }, []);
+  const {
+    content
+  } = props;
+  const [isFullScreen, setIsFullScreen] = useState(!!fullScreenOnly);
+  const onOpen = useCallback(async () => {
+    let finalContent;
+    const isChanged = isRichContentChanged();
+    try {
+      finalContent = await editorEvents.publish();
+      onEnterFullScreen == null || onEnterFullScreen(finalContent, isChanged);
+    } catch (error) {
+      finalContent = content;
+      onEnterFullScreen == null || onEnterFullScreen(content, isChanged);
+    } finally {
+      setIsFullScreen(true);
+      if (isChanged && finalContent) {
+        handleChange(finalContent);
+      }
+    }
+  }, [content, editorEvents, isRichContentChanged, onEnterFullScreen, handleChange]);
+  const onClose = useCallback(async () => {
+    queueLoader();
+    let finalContent;
+    const isChanged = isRichContentChanged();
+    try {
+      finalContent = await editorEvents.publish();
+      onExitFullScreen == null || onExitFullScreen(finalContent, isChanged);
+    } catch (error) {
+      finalContent = content;
+      onExitFullScreen == null || onExitFullScreen(content, isChanged);
+    } finally {
+      resetLoader();
+      setIsFullScreen(false);
+      if (isChanged && finalContent) {
+        handleChange(finalContent);
+      }
+    }
+  }, [content, editorEvents, isRichContentChanged, onExitFullScreen, handleChange, queueLoader, resetLoader]);
+  const handleBlur = useCallback(() => {
+    if (isRichContentChanged()) {
+      onPublish == null || onPublish(editorEvents.publish().catch(() => content));
+    }
+    onBlur == null || onBlur();
+  }, [content, editorEvents, onBlur, onPublish, isRichContentChanged]);
+  const getToolbarSettings = useGetToolbarSettings();
+  const rceProps = {
+    getToolbarSettings,
+    onChange: handleChange
+  };
+
+  // @NOTE: Ricos now need custom maxHeight to show scroll
+  // since it's requirements fully related to 'visual part' of
+  // editor we just default it here
+  const fullScreenTheme = defaultsDeep(cloneDeep(theme), {
+    customStyles: {
+      editor: {
+        maxHeight: '100%'
+      }
+    },
+    settingsStyles: {
+      modals: {
+        dialogZIndex: Z_INDEX_MODAL_POPOVER
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UserSiteFonts, null), !fullScreenOnly && /*#__PURE__*/React.createElement(RCE, _extends({}, props, rceProps, {
+    theme: theme,
+    onFocus: onFocus,
+    onBlur: handleBlur,
+    hidden: isFullScreen,
+    ref: editorRef,
+    isFullScreen: false,
+    onToggleFullScreen: onOpen
+  })), /*#__PURE__*/React.createElement(FullscreenModal, {
+    isOpen: isFullScreen,
+    isLoading: loader
+  }, /*#__PURE__*/React.createElement(RCE, _extends({}, props, rceProps, {
+    theme: fullScreenTheme,
+    autoFocus: true,
+    className: classes.modalEditor,
+    ref: modalEditorRef,
+    isFullScreen: true,
+    onToggleFullScreen: onClose
+  }))));
+});
+RichContentEditor.displayName = 'RichContentEditor';
+const filterStaticToolbarButtons = button => button !== FORMATTING_BUTTONS.CODE_BLOCK;
+const useGetToolbarSettings = () => useCallback(_ref4 => {
+  let {
+    textButtons
+  } = _ref4;
+  return [{
+    name: TOOLBARS.INSERT_PLUGIN,
+    shouldCreate: () => ({
+      desktop: true
+    })
+  }, {
+    name: TOOLBARS.FOOTER,
+    shouldCreate: () => ({
+      desktop: false
+    })
+  }, {
+    name: TOOLBARS.STATIC,
+    getButtons: () => {
+      var _textButtons$desktop;
+      return {
+        desktop: [...((textButtons == null || (_textButtons$desktop = textButtons.desktop) == null || _textButtons$desktop.filter == null ? void 0 : _textButtons$desktop.filter(filterStaticToolbarButtons)) ?? [])]
+      };
+    }
+  }, {
+    name: TOOLBARS.QUICK_ACTIONS,
+    activateOnFloatingPlusButton: true,
+    shouldCreate: () => ({
+      desktop: true
+    })
+  }].filter(Boolean);
+}, []);
+const useToolbarSettings = (container, getToolbarSettings) => useMemo(() => ({
+  getToolbarSettings,
+  useStaticTextToolbar: true,
+  textToolbarContainer: container
+}), [container, getToolbarSettings]);
+//# sourceMappingURL=rich-content-editor.js.map