@wix/patterns-fields 1.0.0

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "fullscreenmodal4000891092";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"fullscreenmodal4000891092__root","modalContent":"fullscreenmodal4000891092__modalContent"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-white":"--wds-color-white","wds-border-radius-300":"--wds-border-radius-300"}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { ModalProps } from '@wix/design-system';
+import { Modal } from '@wix/design-system';
+
+import { stopEvent } from '../../../../../utils';
+
+import { PublishLoader } from '../publish-loader';
+
+import { classes } from './fullscreen-modal.st.css.js';
+
+export interface FullscreenModalProps extends ModalProps {
+  isLoading?: boolean;
+}
+
+export const FullscreenModal: React.FC<FullscreenModalProps> = ({
+  isLoading,
+  children,
+  ...modalProps
+}) => {
+  return (
+    <div onContextMenu={stopEvent}>
+      <Modal {...modalProps}>
+        <section
+          data-hook="rich-content.modal"
+          className={classes.modalContent}
+        >
+          {children}
+          {isLoading && <PublishLoader />}
+        </section>
+      </Modal>
+    </div>
+  );
+};
+
+FullscreenModal.displayName = 'FullscreenModal';

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/index.ts

@@ -0,0 +1 @@
+export * from './fullscreen-modal';

package/src/components/rich-content/rich-content-input/rich-content-common/hooks.ts

@@ -0,0 +1,67 @@
+import isEqual from 'lodash/isEqual';
+import { useRef, useMemo, useState, useEffect } from 'react';
+
+import type { BISettings, RichContent } from '@wix/ricos';
+import { ensureRicosContent, fromPlainText } from '@wix/ricos';
+import { useWixPatternsContainer } from '@wix/patterns';
+
+import { CMS_RICOS_APP_ID } from '../consts';
+
+export const INITIAL_INJECTED_RICH_CONTENT = fromPlainText('');
+
+const ensureRichContent = (content?: RichContent) =>
+  content && ensureRicosContent(content);
+
+export const useRichContentState = (propsContent?: RichContent) => {
+  const [content, setContent] = useState(ensureRichContent(propsContent));
+  const [injectedContent, setInjectedContent] = useState(
+    INITIAL_INJECTED_RICH_CONTENT,
+  );
+
+  const prevContentRef = useRef(propsContent);
+  useEffect(() => {
+    if (isEqual(propsContent, prevContentRef.current)) {
+      return;
+    }
+
+    const richContent = ensureRichContent(propsContent);
+
+    setContent(richContent);
+    setInjectedContent((injectedRichContent) => {
+      if (!richContent) {
+        return INITIAL_INJECTED_RICH_CONTENT;
+      }
+
+      return !isEqual(richContent, injectedRichContent)
+        ? richContent
+        : injectedRichContent;
+    });
+
+    prevContentRef.current = propsContent;
+  }, [propsContent]);
+
+  return [content, setContent, injectedContent] as const;
+};
+
+export const useWixRicosProps = () => {
+  const patternsContainer = useWixPatternsContainer();
+  // console.log('[Rich Content] environment:', patternsContainer.environment);
+  const locale = patternsContainer.environment.language || 'en';
+
+  return { locale };
+};
+
+const CMS_RICOS_CONSUMER = 'wix-data-editor';
+const CMS_RICOS_PLATFORM = 'BM';
+
+export const useRicosBISettings = (usage?: string, itemId = '$new') =>
+  useMemo<BISettings>(
+    () => ({
+      containerId: CMS_RICOS_APP_ID,
+      consumer: CMS_RICOS_CONSUMER,
+      platform: CMS_RICOS_PLATFORM,
+      postId: itemId,
+      usage,
+    }),
+    [usage, itemId],
+  );

package/src/components/rich-content/rich-content-input/rich-content-common/index.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './hooks';
+export * from './colors-cache';
+export * from './publish-loader';
+export * from './fullscreen-modal';
+export * from './toggle-fullscreen-button';

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/index.ts

@@ -0,0 +1 @@
+export * from './publish-loader';

package/src/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/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "publishloader4217991925";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"publishloader4217991925__root","publishLoader":"publishloader4217991925__publishLoader"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-white":"--wds-color-white"}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.tsx

@@ -0,0 +1,23 @@
+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: React.FC = () => {
+  const { t } = useTranslations();
+  return (
+    <Box
+      align="center"
+      verticalAlign="middle"
+      direction="vertical"
+      className={classes.publishLoader}
+    >
+      <Loader size="medium" />
+      <Text>{t('CMS.richContentCommon.publishLoader')}</Text>
+    </Box>
+  );
+};
+
+PublishLoader.displayName = 'PublishLoader';

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/index.ts

@@ -0,0 +1 @@
+export * from './toggle-fullscreen-button';

package/src/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/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "togglefullscreenbutton2161142756";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"togglefullscreenbutton2161142756__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.tsx

@@ -0,0 +1,47 @@
+import type { FC } from 'react';
+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 interface ToggleFullscreenButtonProps {
+  isFullScreen: boolean;
+  onToggleFullScreen?: () => void;
+  className?: string;
+}
+
+export const ToggleFullscreenButton: FC<ToggleFullscreenButtonProps> = ({
+  isFullScreen,
+  onToggleFullScreen,
+}) => {
+  const { t } = useTranslations();
+  return (
+    <div data-hook="rich-content.fullscreenButton" className={classes.root}>
+      <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 }}
+      >
+        <IconButton
+          onClick={onToggleFullScreen}
+          priority="secondary"
+          size="small"
+        >
+          {isFullScreen ? <DismissIcon /> : <MaximizeIcon />}
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+};
+
+ToggleFullscreenButton.displayName = 'ToggleFullScreenButton';

package/src/components/rich-content/rich-content-input/rich-content-common/types.ts

@@ -0,0 +1,12 @@
+import type Experiments from '@wix/wix-experiments';
+import type { RichContent, RicosTheme } from '@wix/ricos';
+
+import type { ColorScheme } from '../../types';
+
+export interface RichContentInputProps {
+  theme: RicosTheme;
+  colorScheme?: ColorScheme;
+  experiments: Experiments;
+  data?: RichContent;
+  onChange: (data?: RichContent) => void;
+}

package/src/components/rich-content/rich-content-input/rich-content-editor/index.ts

@@ -0,0 +1 @@
+export * from './rich-content-editor';

package/src/components/rich-content/rich-content-input/rich-content-editor/plugins.ts

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+
+import type { EditorPlugin, EditorPluginOptions } from '@wix/ricos';
+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 type { ColorScheme } from '../../types';
+
+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: EditorPluginOptions = {
+  type: 'LAYOUT',
+  showInQuickActions: true,
+  showInToolbars: true,
+};
+
+export const usePlugins = (colorScheme?: ColorScheme) => {
+  return useMemo<(EditorPlugin | EditorPluginOptions)[]>(
+    () =>
+      [
+        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,
+        }) as unknown as EditorPlugin,
+        pluginFileUpload(),
+        pluginHtml(),
+        pluginLinkPreview({
+          exposeEmbedButtons: [Instagram, Twitter, TikTok],
+        }),
+        pluginVerticalEmbed({
+          exposeEmbedButtons: [event, booking, product],
+        }),
+        pluginCodeBlock(),
+        pluginEmoji(),
+        pluginSpoiler(),
+        pluginGiphy(),
+        pluginCollapsibleList(),
+        pluginLinkButton(),
+        layoutPlugin,
+      ].filter(isTruthy),
+    [colorScheme],
+  );
+};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css

@@ -0,0 +1,46 @@
+@import "../variables.css";
+
+.root {
+    position: relative;
+}
+
+.root,
+.toolbarContainer,
+.footerToolbarContainer {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.toolbarContainer div {
+    box-sizing: border-box;
+}
+
+.toolbarAndFullScreenButtonWrapper {
+    display: flex;
+    position: relative;
+}
+
+.editor {
+    box-sizing: border-box;
+    padding: 36px 24px 36px 55px;
+}
+
+.modalEditor .editor {
+    overflow-y: auto;
+    min-height: calc(100% - var(--topToolbarHeight) - var(--bottomToolbarHeight));
+    max-height: calc(100% - var(--topToolbarHeight) - var(--bottomToolbarHeight));
+    min-width: 592px;
+    box-sizing: border-box;
+}
+
+.modalEditor .footerToolbarContainer {
+    margin-top: 9px;
+}
+
+.toolbarContainer button[data-hook~="text-button-headings"] > span {
+    display: inline-flex;
+    padding-inline-end: 3px !important;
+}
+.toolbarContainer button[data-hook~="text-button-ai"] > span {
+    padding-inline-end: 9px !important;
+}

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontenteditor3583492159";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"richcontenteditor3583492159__root","toolbarContainer":"richcontenteditor3583492159__toolbarContainer","footerToolbarContainer":"richcontenteditor3583492159__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3583492159__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3583492159__editor","modalEditor":"richcontenteditor3583492159__modalEditor"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"topToolbarHeight":"--richcontenteditor3583492159-topToolbarHeight","bottomToolbarHeight":"--richcontenteditor3583492159-bottomToolbarHeight"}; 
+
+
+
+