@wix/patterns-fields 1.0.0

package/src/components/rich-content/hooks/use-plain-text-rich-content.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+import type { RichContent } from '@wix/ricos/content';
+import { ensureRicosContent, toPlainText } from '@wix/ricos/content';
+
+import { safeStringify } from '../../../utils';
+import { useMountedState } from './use-mounted-state';
+
+export const usePlainTextRichContent = (content?: RichContent) => {
+  const [plainTextContent, setPlainTextContent] = useMountedState('');
+  const [isConverting, setIsConverting] = useMountedState(false);
+
+  useEffect(() => {
+    if (content) {
+      setIsConverting(true);
+      toPlainText(ensureRicosContent(content), { delimiter: ' ' })
+        .catch(() => safeStringify(content))
+        .then(setPlainTextContent)
+        .finally(() => setIsConverting(false));
+    } else {
+      setIsConverting(false);
+      setPlainTextContent('');
+    }
+  }, [content, setIsConverting, setPlainTextContent]);
+
+  return [plainTextContent, isConverting] as const;
+};

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

@@ -0,0 +1,3 @@
+export * from './rich-content-view';
+// NOTE: Heavy exports (FormRichContentInput, RichContentEditor, hooks) have been moved to './editor' to prevent bundle bloat.
+// Import them explicitly: import { FormRichContentInput } from '../fields/components/rich-content/editor';

package/src/components/rich-content/rich-content-input/consts.ts

@@ -0,0 +1 @@
+export const CMS_RICOS_APP_ID = '9f87f125-e7d5-4ed9-a16c-999d862e96ab';

package/src/components/rich-content/rich-content-input/default-value-input/default-value-input.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { InputLoader } from '../../components';
+import { RichContentDefaultValueReadOnlyInput } from '../default-value-read-only-input';
+
+import { RichContentDefaultValueInput } from './rich-content-default-value-input';
+import type { RichContentDefaultValueInputProps } from './rich-content-default-value-input';
+
+export type FormRichContentInputProps = RichContentDefaultValueInputProps & {
+  isSiteMetadataLoading: boolean;
+};
+
+const DefaultValueRichContentInput: FC<FormRichContentInputProps> = ({
+  isSiteMetadataLoading,
+  ...props
+}) => {
+  if (isSiteMetadataLoading) {
+    return <InputLoader />;
+  }
+
+  if (props.readOnly) {
+    return <RichContentDefaultValueReadOnlyInput {...props} />;
+  }
+
+  return <RichContentDefaultValueInput {...props} />;
+};
+
+export default DefaultValueRichContentInput;

package/src/components/rich-content/rich-content-input/default-value-input/index.ts

@@ -0,0 +1 @@
+export {default} from './default-value-input';

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css

@@ -0,0 +1,6 @@
+@import "../variables.css";
+@import "../rich-content-editor/rich-content-editor.st.css";
+
+.richContentEditorContainer .editor {
+    max-height: calc(40vh - var(--topToolbarHeight) - var(--bottomToolbarHeight));
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontentdefaultvalueinput265201860";
+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":"richcontentdefaultvalueinput265201860__root","richContentEditorContainer":"richcontentdefaultvalueinput265201860__richContentEditorContainer","editor":"richcontentdefaultvalueinput265201860__editor"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput265201860-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput265201860-bottomToolbarHeight"}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.tsx

@@ -0,0 +1,69 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { RichContent } from '@wix/ricos';
+
+import type { FormInputProps } from '../../../../types';
+import { RichContentEditor } from '../rich-content-editor';
+import type { RichContentInputProps } from '../rich-content-common';
+import { useRicosBISettings } from '../rich-content-common';
+import { useRichContentFormInput } from '../form-input/use-rich-content-form-input';
+import { classes as formInputClasses } from '../form-input/rich-content-form-input.st.css.js';
+
+import { classes } from './rich-content-default-value-input.st.css.js';
+
+export type RichContentDefaultValueInputProps = FormInputProps<RichContent> &
+  RichContentInputProps;
+
+export const RichContentDefaultValueInput: FC<
+  RichContentDefaultValueInputProps
+> = ({
+  data,
+  onChange,
+  onCustomEvent,
+  experiments,
+  theme,
+  colorScheme,
+  dataHook,
+}) => {
+  const {
+    localValue,
+    injectedValue,
+    autoFocus,
+    handlePublish,
+    handleOnChange,
+    onExitFullScreen,
+    onEnterFullScreen,
+    triggerOnChange,
+  } = useRichContentFormInput({
+    data,
+    onChange,
+    onCustomEvent,
+  });
+
+  const biSettings = useRicosBISettings('defaultValueModal');
+
+  return (
+    <div
+      data-hook="rich-content.input"
+      className={classes.richContentEditorContainer}
+    >
+      <RichContentEditor
+        dataHook={dataHook}
+        className={formInputClasses.root}
+        autoFocus={autoFocus}
+        onEnterFullScreen={onEnterFullScreen}
+        onExitFullScreen={onExitFullScreen}
+        onBlur={triggerOnChange}
+        content={localValue}
+        injectedContent={injectedValue}
+        onChange={handleOnChange}
+        biSettings={biSettings}
+        wixExperiments={experiments}
+        theme={theme}
+        colorScheme={colorScheme}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+};

package/src/components/rich-content/rich-content-input/default-value-read-only-input/index.ts

@@ -0,0 +1 @@
+export * from './rich-content-form-read-only-input';

package/src/components/rich-content/rich-content-input/default-value-read-only-input/rich-content-form-read-only-input.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { RichContent } from '@wix/ricos';
+
+import type { FormInputProps } from '../../../../types';
+import { RichContentViewer } from '../rich-content-viewer';
+import type { RichContentInputProps } from '../rich-content-common';
+import { useRicosBISettings } from '../rich-content-common';
+import { classes } from '../form-read-only-input/rich-content-form-read-only-input.st.css.js';
+
+export type RichContentDefaultValueInputProps = FormInputProps<RichContent> &
+  RichContentInputProps;
+
+export const RichContentDefaultValueReadOnlyInput: React.FC<
+  RichContentDefaultValueInputProps
+> = ({ data, theme, experiments, dataHook }) => {
+  const biSettings = useRicosBISettings('defaultValueModal');
+
+  return (
+    <div data-hook="rich-content.input.readOnly">
+      <RichContentViewer
+        dataHook={dataHook}
+        className={classes.root}
+        content={data}
+        wixExperiments={experiments}
+        biSettings={biSettings}
+        theme={theme}
+        tabIndex={0}
+      />
+    </div>
+  );
+};
+
+RichContentDefaultValueReadOnlyInput.displayName =
+  'RichContentDefaultValueReadOnlyInput';

package/src/components/rich-content/rich-content-input/form-input/form-input.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { InputLoader } from '../../components';
+import { RichContentFormReadOnlyInput } from '../form-read-only-input';
+
+import type { RichContentFormInputProps } from './rich-content-form-input';
+import { RichContentFormInput } from './rich-content-form-input';
+
+export type FormRichContentInputProps = RichContentFormInputProps & {
+  isSiteMetadataLoading: boolean;
+};
+
+const FormRichContentInput: FC<FormRichContentInputProps> = ({
+  isSiteMetadataLoading,
+  ...props
+}) => {
+  if (isSiteMetadataLoading) {
+    return <InputLoader />;
+  }
+
+  if (props.readOnly) {
+    return <RichContentFormReadOnlyInput {...props} />;
+  }
+
+  return <RichContentFormInput {...props} />;
+};
+
+export default FormRichContentInput;

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

@@ -0,0 +1 @@
+export {default} from './form-input';

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

@@ -0,0 +1,24 @@
+@import "../variables.css";
+@import "../rich-content-editor/rich-content-editor.st.css";
+
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-input-shadow-focus-standard);
+
+.root {
+    outline: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--wds-color-blue-300);
+    border-radius: var(--wds-border-radius-300);
+}
+
+.root:focus-within {
+    border: 1px solid var(--wds-color-blue-100);
+    box-shadow: var(--wds-input-shadow-focus-standard);
+}
+
+.root .editor {
+    overflow-y: auto;
+    max-height: calc(80vh - var(--topToolbarHeight) - var(--bottomToolbarHeight));
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontentforminput2510854035";
+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":"richcontentforminput2510854035__root","editor":"richcontentforminput2510854035__editor"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput2510854035-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput2510854035-bottomToolbarHeight"}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.tsx

@@ -0,0 +1,75 @@
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import type { RichContent } from '@wix/ricos';
+
+import type { FormInputProps } from '../../../../types';
+
+import { RichContentEditor } from '../rich-content-editor';
+import type { RichContentInputProps } from '../rich-content-common';
+import { useRicosBISettings } from '../rich-content-common';
+
+import { classes } from './rich-content-form-input.st.css.js';
+import { useRichContentFormInput } from './use-rich-content-form-input';
+
+export type RichContentFormInputProps = FormInputProps<RichContent> &
+  RichContentInputProps & {
+    itemId?: string;
+  };
+
+export const RichContentFormInput: FC<RichContentFormInputProps> = ({
+  data,
+  onChange,
+  onCustomEvent,
+  experiments,
+  theme,
+  colorScheme,
+  dataHook,
+  autoFocus: autoFocusDefault,
+  itemId: itemIdProp,
+}) => {
+  const {
+    localValue,
+    injectedValue,
+    autoFocus,
+    handlePublish,
+    handleOnChange,
+    onExitFullScreen,
+    onEnterFullScreen,
+    triggerOnChange,
+  } = useRichContentFormInput({
+    data,
+    onChange,
+    onCustomEvent,
+    autoFocusDefault,
+  });
+
+  const [itemId, setItemId] = useState(itemIdProp ?? '$new');
+  useEffect(() => {
+    if (itemIdProp !== undefined) {
+      setItemId(itemIdProp);
+    }
+  }, [itemIdProp]);
+  const biSettings = useRicosBISettings('form', itemId);
+
+  return (
+    <div data-hook="rich-content.input">
+      <RichContentEditor
+        dataHook={dataHook}
+        className={classes.root}
+        autoFocus={autoFocus}
+        onEnterFullScreen={onEnterFullScreen}
+        onExitFullScreen={onExitFullScreen}
+        onBlur={triggerOnChange}
+        content={localValue}
+        injectedContent={injectedValue}
+        onChange={handleOnChange}
+        biSettings={biSettings}
+        wixExperiments={experiments}
+        theme={theme}
+        colorScheme={colorScheme}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+};

package/src/components/rich-content/rich-content-input/form-input/use-rich-content-form-input.ts

@@ -0,0 +1,77 @@
+import { useCallback, useRef, useState } from 'react';
+
+import type { RichContent } from '@wix/ricos';
+
+import { useRichContentState } from '../rich-content-common';
+
+type UseRichContentFormInputArgs = {
+  onChange: (value?: RichContent) => void;
+  onCustomEvent?: (event: string, data: any) => void;
+  data?: RichContent;
+  autoFocusDefault?: boolean;
+};
+
+export const useRichContentFormInput = ({
+  onChange,
+  data,
+  onCustomEvent,
+  autoFocusDefault,
+}: UseRichContentFormInputArgs) => {
+  const [localValue, setLocalValue, injectedValue] = useRichContentState(data);
+  const isRichContentChangedOnceRef = useRef(false);
+
+  const triggerOnChange = useCallback(
+    (value?: RichContent) => {
+      if (!isRichContentChangedOnceRef.current) {
+        return;
+      }
+
+      onChange?.(value || localValue);
+      isRichContentChangedOnceRef.current = false;
+    },
+    [localValue, onChange],
+  );
+
+  const handleOnChange = useCallback(
+    (content: RichContent, isChanged?: boolean) => {
+      isRichContentChangedOnceRef.current ||= isChanged!;
+      setLocalValue(content);
+    },
+    [setLocalValue],
+  );
+
+  const [autoFocus, setAutoFocus] = useState(autoFocusDefault ?? false);
+  const onEnterFullScreen = useCallback(
+    (_?: RichContent, isChanged?: boolean) => {
+      isRichContentChangedOnceRef.current ||= isChanged!;
+      setAutoFocus(false);
+    },
+    [],
+  );
+  const onExitFullScreen = useCallback(
+    (_?: RichContent, isChanged?: boolean) => {
+      isRichContentChangedOnceRef.current ||= isChanged!;
+      setAutoFocus(true);
+    },
+    [],
+  );
+
+  const handlePublish = useCallback(
+    (richContentPromise: Promise<RichContent>) => {
+      richContentPromise.then(onChange);
+      onCustomEvent?.('rcePublish', richContentPromise);
+    },
+    [onChange, onCustomEvent],
+  );
+
+  return {
+    localValue,
+    injectedValue,
+    autoFocus,
+    handlePublish,
+    handleOnChange,
+    onExitFullScreen,
+    onEnterFullScreen,
+    triggerOnChange,
+  };
+};

package/src/components/rich-content/rich-content-input/form-read-only-input/index.ts

@@ -0,0 +1 @@
+export * from './rich-content-form-read-only-input';

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css

@@ -0,0 +1,18 @@
+@property st-global(--wds-color-black-600);
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wds-color-blue-300);
+
+/*  */
+.root {
+    outline: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--wds-color-black-600);
+    border-radius: var(--wds-border-radius-300);
+}
+
+.root:focus-within {
+    border: 1px solid var(--wds-color-blue-100);
+    box-shadow: var(--wds-input-shadow-focus-standard);
+}

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontentformreadonlyinput246065000";
+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":"richcontentformreadonlyinput246065000__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-black-600":"--wds-color-black-600","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-color-blue-300":"--wds-color-blue-300"}; 
+
+
+
+

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+
+import type { RichContent } from '@wix/ricos';
+
+import type { FormInputProps } from '../../../../types';
+
+import { RichContentViewer } from '../rich-content-viewer';
+import type { RichContentInputProps } from '../rich-content-common';
+import { useRicosBISettings } from '../rich-content-common';
+
+import { classes } from './rich-content-form-read-only-input.st.css.js';
+
+export type RichContentFormInputProps = FormInputProps<RichContent> &
+  RichContentInputProps & {
+    itemId?: string;
+  };
+
+export const RichContentFormReadOnlyInput: React.FC<
+  RichContentFormInputProps
+> = ({ data, theme, experiments, dataHook, itemId: itemIdProp }) => {
+  const [itemId, setItemId] = useState(itemIdProp ?? '$new');
+  useEffect(() => {
+    if (itemIdProp !== undefined) {
+      setItemId(itemIdProp);
+    }
+  }, [itemIdProp]);
+  const biSettings = useRicosBISettings('form', itemId);
+
+  return (
+    <div data-hook="rich-content.input.readOnly">
+      <RichContentViewer
+        dataHook={dataHook}
+        className={classes.root}
+        content={data}
+        wixExperiments={experiments}
+        biSettings={biSettings}
+        theme={theme}
+        tabIndex={0}
+      />
+    </div>
+  );
+};
+
+RichContentFormReadOnlyInput.displayName = 'RichContentFormReadOnlyInput';

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

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { toPlainText, type RichContent } from '@wix/ricos/content';
+import { isDataValid } from '../../../auto-field-types';
+import { FieldType } from '@wix/patterns-fields-utils/@wix/wix-data-schema-types';
+
+import { noop } from '../../../utils';
+
+import { useRichContentDocumentService } from './services';
+import type { RichContentInputProps } from './rich-content-common';
+
+type RCEPublishPromise = Promise<RichContent>;
+
+export const useRCEPublishPromises = () => {
+  const rcePublishPromises = useRef<RCEPublishPromise[]>([]);
+
+  return useMemo(() => {
+    const push = (promise: RCEPublishPromise) => {
+      rcePublishPromises.current.push(promise);
+    };
+
+    const clean = () => {
+      rcePublishPromises.current = [];
+    };
+
+    const getAll = () => rcePublishPromises.current;
+
+    const allSettled = () => Promise.allSettled(getAll());
+
+    return {
+      push,
+      clean,
+      getAll,
+      allSettled,
+    };
+  }, []);
+};
+
+export const useRichContentAutofix = ({
+  data,
+  onChange,
+}: Pick<RichContentInputProps, 'data' | 'onChange'>) => {
+  const richContentDocumentService = useRichContentDocumentService();
+
+  useEffect(() => {
+    const autofixRichContent = async () => {
+      if (!data) {
+        return;
+      }
+
+      const isStrictValid = isDataValid(data, FieldType.richContent, {
+        strict: true,
+      });
+
+      if (isStrictValid) {
+        return;
+      }
+
+      const fixedData = await richContentDocumentService.convertToRichContent(
+        data,
+      );
+
+      if (!fixedData) {
+        return;
+      }
+
+      const [plainText, fixedPlainText] = await Promise.all([
+        toPlainText(data),
+        toPlainText(fixedData),
+      ]);
+
+      if (plainText !== fixedPlainText) {
+        return;
+      }
+
+      onChange(fixedData);
+    };
+
+    autofixRichContent().catch(noop);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/components/rich-content/rich-content-input/rich-content-common/colors-cache.ts

@@ -0,0 +1,22 @@
+import uniq from 'lodash/uniq';
+
+const createColorsCache = (size: number) => {
+  let colors: string[] = [];
+  return {
+    add: (color: string) => {
+      colors = uniq(colors.concat(color));
+
+      if (colors.length > size) {
+        const lastColor = colors.pop()!;
+        colors[colors.length - 1] = lastColor;
+      }
+
+      return colors;
+    },
+    get: () => {
+      return colors;
+    },
+  };
+};
+
+export const colorsCache = createColorsCache(13);

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

@@ -0,0 +1,12 @@
+@property st-global(--wds-color-white);
+@property st-global(--wds-border-radius-300);
+
+.modalContent {
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 782px;
+    background-color: var(--wds-color-white);
+    border-radius: var(--wds-border-radius-300);
+    margin-top: 24px;
+}