@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,565 @@
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import defaultsDeep from 'lodash/defaultsDeep';
+
+import type { FC, FocusEventHandler } from 'react';
+import React, {
+  forwardRef,
+  useRef,
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+} from 'react';
+
+import { Box, Loader } from '@wix/design-system';
+import type {
+  WixRicosEditorProps,
+  GetToolbarSettings,
+  TextGroupButtons,
+  RichContent,
+  RicosEditorType,
+  ToolbarSettings,
+  EditorEventsProps,
+  ToolbarSettingsFunctions,
+} from '@wix/ricos';
+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 type { ColorScheme } from '../../types';
+
+import type { ToggleFullscreenButtonProps } from '../rich-content-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';
+
+type RicosProps = Pick<
+  WixRicosEditorProps,
+  'wixExperiments' | 'biSettings' | 'modalSettings' | 'theme'
+>;
+
+interface RCEHandle {
+  isContentChanged: () => boolean;
+}
+
+interface RCEProps extends RicosProps {
+  content?: RichContent;
+  injectedContent?: RichContent;
+  onChange?: (content: RichContent) => void;
+  getToolbarSettings: GetToolbarSettings;
+  autoFocus?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  className?: string;
+  colorScheme?: ColorScheme;
+  hidden?: boolean;
+  dataHook?: string;
+}
+
+const linkPanelSettings = {
+  externalPopups: true,
+  showSponsoredCheckbox: true,
+};
+
+const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
+  (
+    {
+      content,
+      injectedContent,
+      onChange,
+      autoFocus,
+      onFocus,
+      onBlur,
+      className,
+      getToolbarSettings,
+      dataHook,
+      colorScheme,
+      isFullScreen,
+      onToggleFullScreen,
+      hidden,
+      children,
+      ...ricosProps
+    },
+    ref,
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const containerHeightRef = useRef<number | undefined>();
+
+    const onFullScreenChange = useCallback(() => {
+      onToggleFullScreen?.();
+
+      if (containerRef.current) {
+        containerHeightRef.current = containerRef.current.clientHeight;
+      }
+    }, [onToggleFullScreen]);
+
+    const editorRef = useRef<RicosEditorType>(null);
+    const [isToolbarReady, setIsToolbarReady] = useState(false);
+    const [toolbarButtons, setToolbarButtons] = useState({});
+
+    const updateButtons = useCallback(
+      (editorLoaded?: boolean, 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(() => {
+        editorRef.current?.focus();
+        updateButtons();
+      });
+
+      return () => cancelAnimationFrame(frameId);
+    }, [autoFocus, updateButtons]);
+
+    useImperativeHandle(ref, () => ({
+      isContentChanged: () =>
+        Boolean(editorRef.current?.getContentTraits().isContentChanged),
+    }));
+
+    const toolbarContainerRef = useRef<HTMLDivElement>(null);
+    const toolbarSettings = useToolbarSettings(
+      toolbarContainerRef.current!,
+      getToolbarSettings,
+    );
+
+    const isModalOpenRef = useRef(false);
+    const modalSettings = useMemo<WixRicosEditorProps['modalSettings']>(
+      () => ({
+        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?.();
+    }, [onFocus]);
+    const triggerBlur = useCallback(() => {
+      isBlurringRef.current = false;
+
+      if (!isFocusedRef.current) {
+        return;
+      }
+
+      isFocusedRef.current = false;
+      onBlur?.();
+    }, [onBlur]);
+
+    const requestBlurCallback = useRequestFrameCallback();
+    const requestEditorBlur = useCallback(() => {
+      isBlurringRef.current = true;
+      requestBlurCallback(() => isBlurringRef.current && triggerBlur());
+    }, [triggerBlur, requestBlurCallback]);
+
+    const handleFocus = useCallback<FocusEventHandler>(() => {
+      if (containerRef.current === getActiveElement()) {
+        editorRef.current?.focus();
+        updateButtons();
+      }
+
+      triggerFocus();
+    }, [triggerFocus, updateButtons]);
+    const handleBlur = useCallback<FocusEventHandler>(
+      ({ relatedTarget }) => {
+        if (!relatedTarget) {
+          requestEditorBlur();
+          return;
+        }
+
+        if (
+          isModalOpenRef.current ||
+          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?.();
+        }
+      }
+    }, [onBlur, injectedContent]);
+
+    const wixRicosProps = useWixRicosProps();
+    const plugins = usePlugins(colorScheme);
+
+    const renderInContainer = (children: React.ReactNode) => (
+      <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,
+        }}
+      >
+        <div className={classes.toolbarAndFullScreenButtonWrapper}>
+          <div className={classes.toolbarContainer} ref={toolbarContainerRef} />
+          {!hidden && isToolbarReady && (
+            <ToggleFullscreenButton
+              isFullScreen={isFullScreen}
+              onToggleFullScreen={onFullScreenChange}
+            />
+          )}
+        </div>
+        {!hidden ? children : null}
+        {!isToolbarReady && <RCELoader />}
+        {!hidden && isToolbarReady && (
+          <div
+            data-hook="rich-content.footerToolbar"
+            className={classes.footerToolbarContainer}
+          >
+            <ExternalToolbar buttons={toolbarButtons} />
+          </div>
+        )}
+      </div>
+    );
+
+    return renderInContainer(
+      <div data-hook={dataHook} className={classes.editor}>
+        <WixRicosEditor
+          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}
+        />
+      </div>,
+    );
+  },
+);
+RCE.displayName = 'RCE';
+
+const RCELoader: React.FC = () => (
+  <Box
+    align="center"
+    verticalAlign="middle"
+    position="absolute"
+    top="0"
+    bottom="0"
+    width="100%"
+  >
+    <Loader size="small" />
+  </Box>
+);
+RCELoader.displayName = 'RCELoader';
+
+const LOADER_DELAY = 100;
+
+export type RichContentEditorProps = Omit<
+  RCEProps,
+  'getToolbarSettings' | 'modalSettings' | 'onChange'
+> & {
+  onEnterFullScreen?: (
+    content?: RichContent,
+    isContentChanged?: boolean,
+  ) => void;
+  onExitFullScreen?: (
+    content?: RichContent,
+    isContentChanged?: boolean,
+  ) => void;
+  onChange?: (content: RichContent, isContentChanged?: boolean) => void;
+  onPublish?: (promise: Promise<any>) => void;
+  fullScreenOnly?: boolean;
+};
+
+export const RichContentEditor: FC<RichContentEditorProps> = withEditorContext(
+  ({
+    onFocus,
+    onBlur,
+    onEnterFullScreen,
+    onExitFullScreen,
+    fullScreenOnly,
+    editorEvents,
+    onPublish,
+    onChange,
+    theme,
+    ...props
+  }: RichContentEditorProps & EditorEventsProps) => {
+    const editorRef = useRef<RCEHandle>(null);
+    const modalEditorRef = useRef<RCEHandle>(null);
+
+    const isRichContentChanged = useCallback(
+      () =>
+        Boolean(
+          editorRef.current?.isContentChanged() ||
+            modalEditorRef.current?.isContentChanged(),
+        ),
+      [],
+    );
+    const handleChange = useCallback(
+      (richContent: RichContent) => {
+        onChange?.(richContent, isRichContentChanged());
+      },
+      [onChange, isRichContentChanged],
+    );
+
+    const [loader, setLoader] = useState(false);
+    const timer = useRef<number>(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: RichContent | undefined;
+      const isChanged = isRichContentChanged();
+      try {
+        finalContent = (await editorEvents.publish()) as unknown as RichContent;
+        onEnterFullScreen?.(finalContent, isChanged);
+      } catch (error) {
+        finalContent = content;
+        onEnterFullScreen?.(content, isChanged);
+      } finally {
+        setIsFullScreen(true);
+
+        if (isChanged && finalContent) {
+          handleChange(finalContent);
+        }
+      }
+    }, [
+      content,
+      editorEvents,
+      isRichContentChanged,
+      onEnterFullScreen,
+      handleChange,
+    ]);
+    const onClose = useCallback(async () => {
+      queueLoader();
+      let finalContent: RichContent | undefined;
+      const isChanged = isRichContentChanged();
+      try {
+        finalContent = (await editorEvents.publish()) as unknown as RichContent;
+        onExitFullScreen?.(finalContent, isChanged);
+      } catch (error) {
+        finalContent = content;
+        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?.(editorEvents.publish().catch(() => content));
+      }
+      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 (
+      <>
+        <UserSiteFonts />
+        {!fullScreenOnly && (
+          <RCE
+            {...props}
+            {...rceProps}
+            theme={theme}
+            onFocus={onFocus}
+            onBlur={handleBlur}
+            hidden={isFullScreen}
+            ref={editorRef}
+            isFullScreen={false}
+            onToggleFullScreen={onOpen}
+          />
+        )}
+        <FullscreenModal isOpen={isFullScreen} isLoading={loader}>
+          <RCE
+            {...props}
+            {...rceProps}
+            theme={fullScreenTheme}
+            autoFocus
+            className={classes.modalEditor}
+            ref={modalEditorRef}
+            isFullScreen
+            onToggleFullScreen={onClose}
+          />
+        </FullscreenModal>
+      </>
+    );
+  },
+);
+RichContentEditor.displayName = 'RichContentEditor';
+
+const filterStaticToolbarButtons = (button: string | TextGroupButtons) =>
+  button !== FORMATTING_BUTTONS.CODE_BLOCK;
+
+const useGetToolbarSettings = () =>
+  useCallback<GetToolbarSettings>(
+    ({ textButtons }) =>
+      [
+        {
+          name: TOOLBARS.INSERT_PLUGIN,
+          shouldCreate: () => ({ desktop: true }),
+        },
+        {
+          name: TOOLBARS.FOOTER,
+          shouldCreate: () => ({ desktop: false }),
+        },
+        {
+          name: TOOLBARS.STATIC,
+          getButtons: () => ({
+            desktop: [
+              ...(textButtons?.desktop?.filter?.(filterStaticToolbarButtons) ??
+                []),
+            ],
+          }),
+        },
+        {
+          name: TOOLBARS.QUICK_ACTIONS,
+          activateOnFloatingPlusButton: true,
+          shouldCreate: () => ({ desktop: true }),
+        },
+      ].filter(Boolean) as ToolbarSettingsFunctions[],
+    [],
+  );
+
+const useToolbarSettings = (
+  container: HTMLElement,
+  getToolbarSettings: GetToolbarSettings,
+) =>
+  useMemo<ToolbarSettings>(
+    () => ({
+      getToolbarSettings,
+      useStaticTextToolbar: true,
+      textToolbarContainer: container,
+    }),
+    [container, getToolbarSettings],
+  );

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

@@ -0,0 +1,31 @@
+.toolbar {
+    border-top: 1px solid rgba(51, 51, 51, 0.1);
+    z-index: 2;
+    margin-right: auto;
+    padding-left: 6px;
+    margin-left: auto;
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+}
+
+.toolbarButton {
+    line-height: 40px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 5px 0 0;
+}
+.toolbarButton:disabled {
+    color: graytext;
+}
+
+.toolbar label {
+  padding: 0 8px;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontenttoolbar1324961648";
+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":"richcontenttoolbar1324961648__root","toolbar":"richcontenttoolbar1324961648__toolbar","toolbarButton":"richcontenttoolbar1324961648__toolbarButton"};
+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-editor/rich-content-toolbar.tsx

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+
+import { INSERT_PLUGIN_BUTTONS, Tooltip } from '@wix/ricos';
+
+import { isTruthy } from '../../../../utils';
+
+import { classes } from './rich-content-toolbar.st.css.js';
+
+export interface ExternalToolbarButton {
+  dataHook?: string;
+  getIcon?: () => React.ComponentType;
+  getLabel?: () => string;
+  isActive?: () => boolean;
+  isDisabled?: () => boolean;
+  name?: string;
+  tooltip?: React.ReactNode;
+  onClick?: () => void;
+  onChange?: (e: unknown) => void;
+  type?: string;
+  accept?: string;
+  multiple?: boolean;
+}
+
+const BUTTONS_ORDER = [
+  INSERT_PLUGIN_BUTTONS.IMAGE,
+  INSERT_PLUGIN_BUTTONS.VIDEO,
+  INSERT_PLUGIN_BUTTONS.GALLERY,
+  INSERT_PLUGIN_BUTTONS.LAYOUT,
+  INSERT_PLUGIN_BUTTONS.DIVIDER,
+  INSERT_PLUGIN_BUTTONS.TABLE,
+  INSERT_PLUGIN_BUTTONS.FILE,
+  INSERT_PLUGIN_BUTTONS.HTML,
+  INSERT_PLUGIN_BUTTONS.INSTAGRAM,
+  INSERT_PLUGIN_BUTTONS.TWITTER,
+  INSERT_PLUGIN_BUTTONS.TIKTOK,
+  INSERT_PLUGIN_BUTTONS.STORES,
+  INSERT_PLUGIN_BUTTONS.BOOKINGS,
+  INSERT_PLUGIN_BUTTONS.EVENTS,
+  INSERT_PLUGIN_BUTTONS.EMOJI,
+  INSERT_PLUGIN_BUTTONS.GIF,
+  INSERT_PLUGIN_BUTTONS.CODE_BLOCK,
+  INSERT_PLUGIN_BUTTONS.COLLAPSIBLE_LIST,
+  INSERT_PLUGIN_BUTTONS.BUTTON,
+  INSERT_PLUGIN_BUTTONS.UNDO,
+  INSERT_PLUGIN_BUTTONS.REDO,
+];
+
+export interface ExternalToolbarProps {
+  buttons?: Record<string, ExternalToolbarButton>;
+}
+
+export class ExternalToolbar extends Component<ExternalToolbarProps> {
+  private onMouseDown = (event: React.MouseEvent) => event.preventDefault();
+
+  private renderButton = ({
+    onClick,
+    getIcon,
+    isDisabled,
+    dataHook,
+    tooltip,
+    name,
+  }: ExternalToolbarButton) => {
+    const Icon = getIcon?.() ?? (() => null);
+    return (
+      <Tooltip content={tooltip!} key={name}>
+        <button
+          className={classes.toolbarButton}
+          disabled={isDisabled?.()}
+          data-hook={dataHook}
+          onClick={onClick}
+          onMouseDown={this.onMouseDown}
+        >
+          <Icon />
+        </button>
+      </Tooltip>
+    );
+  };
+
+  public render() {
+    return (
+      <div className={classes.toolbar}>
+        {BUTTONS_ORDER.map((name) => this.props.buttons?.[name])
+          .filter(isTruthy)
+          .map((buttonProps, i) => {
+            const Button = this.renderButton;
+            return <Button {...buttonProps} key={i} />;
+          })}
+      </div>
+    );
+  }
+}

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

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