@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+
+import {
+  pluginTextColorViewer as pluginTextColor,
+  pluginTextHighlightViewer as pluginTextHighlight,
+  pluginLinkViewer as pluginLink,
+  pluginLineSpacingViewer as pluginLineSpacing,
+  pluginImageViewer as pluginImage,
+  pluginVideoViewer as pluginVideo,
+  pluginDividerViewer as pluginDivider,
+  pluginFileUploadViewer as pluginFileUpload,
+  pluginHtmlViewer as pluginHtml,
+  pluginLinkPreviewViewer as pluginLinkPreview,
+  pluginVerticalEmbedViewer as pluginVerticalEmbed,
+  pluginEmojiViewer as pluginEmoji,
+  pluginSpoilerViewer as pluginSpoiler,
+  pluginGiphyViewer as pluginGiphy,
+  pluginCodeBlockViewer as pluginCodeBlock,
+  pluginGalleryViewer as pluginGallery,
+  pluginCollapsibleListViewer as pluginCollapsibleList,
+  pluginTableViewer as pluginTable,
+  pluginLinkButtonViewer as pluginLinkButton,
+} from '@wix/ricos';
+
+import '@wix/ricos/css/plugin-link-viewer.global.css';
+import '@wix/ricos/css/plugin-image-viewer.global.css';
+import '@wix/ricos/css/plugin-video-viewer.global.css';
+import '@wix/ricos/css/plugin-divider-viewer.global.css';
+import '@wix/ricos/css/plugin-file-upload-viewer.global.css';
+import '@wix/ricos/css/plugin-html-viewer.global.css';
+import '@wix/ricos/css/plugin-link-preview-viewer.global.css';
+import '@wix/ricos/css/plugin-vertical-embed-viewer.global.css';
+import '@wix/ricos/css/plugin-spoiler-viewer.global.css';
+import '@wix/ricos/css/plugin-giphy-viewer.global.css';
+import '@wix/ricos/css/plugin-gallery-viewer.global.css';
+import '@wix/ricos/css/plugin-collapsible-list-viewer.global.css';
+import '@wix/ricos/css/plugin-table-viewer.global.css';
+import '@wix/ricos/css/plugin-button-viewer.global.css';
+
+import { isTruthy } from '../../../../utils';
+
+export const usePlugins = () => {
+  return useMemo(
+    () =>
+      [
+        pluginTextColor(),
+        pluginTextHighlight(),
+        pluginLineSpacing(),
+        pluginLink(),
+        pluginImage(),
+        pluginVideo(),
+        pluginGallery(),
+        pluginDivider(),
+        pluginTable(),
+        pluginFileUpload(),
+        pluginHtml(),
+        pluginLinkPreview(),
+        pluginVerticalEmbed(),
+        pluginEmoji(),
+        pluginSpoiler(),
+        pluginGiphy(),
+        pluginCodeBlock(),
+        pluginCollapsibleList(),
+        pluginLinkButton(),
+      ].filter(isTruthy),
+    [],
+  );
+};

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

@@ -0,0 +1,42 @@
+@import "../rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css";
+
+.root {
+    -st-states: isFullScreen;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+}
+
+.root:isFullScreen {
+    padding: 12px 24px;
+}
+
+.root:not(:isFullScreen) {
+    padding: 6px 24px 6px 12px;
+}
+
+.root ToggleButton {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    position: absolute;
+    top: 2px !important;
+    right: 2px;
+    width: 30px;
+    height: 30px;
+}
+
+.viewer {
+    height: calc(100% - 36px);
+    width: 100%;
+}
+
+.modalViewer {
+    min-width: 592px;
+    overflow: auto;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richcontentviewer2210917348";
+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":"richcontentviewer2210917348__root","viewer":"richcontentviewer2210917348__viewer","modalViewer":"richcontentviewer2210917348__modalViewer"};
+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-viewer/rich-content-viewer.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import type { WixRicosViewerProps, RichContent } from '@wix/ricos';
+import { WixRicosViewer, ensureRicosContent, fromPlainText } from '@wix/ricos';
+import '@wix/ricos/css/ricos-viewer.global.css';
+
+import { useOpenState } from '../../../../hooks';
+import { preventEvent } from '../../../../utils';
+import { UserSiteFonts } from '../../../user-site-fonts';
+
+import {
+  FullscreenModal,
+  ToggleFullscreenButton,
+  useWixRicosProps,
+} from '../rich-content-common';
+import { usePlugins } from './plugins';
+import { st, classes } from './rich-content-viewer.st.css.js';
+
+type RicosProps = Pick<
+  WixRicosViewerProps,
+  'wixExperiments' | 'biSettings' | 'children' | 'theme'
+>;
+
+interface RCVProps extends RicosProps {
+  isFullScreen: boolean;
+  onToggleFullscreen: () => void;
+  content?: RichContent;
+  className?: string;
+  tabIndex?: number;
+  dataHook?: string;
+}
+
+const RCV: React.FC<RCVProps> = ({
+  isFullScreen,
+  onToggleFullscreen,
+  content,
+  className,
+  dataHook,
+  tabIndex,
+  ...ricosProps
+}) => {
+  const wixRicosProps = useWixRicosProps();
+  const plugins = usePlugins();
+
+  return (
+    <div
+      data-hook="rich-content.viewer"
+      className={st(classes.root, { isFullScreen }, className)}
+      onMouseDown={preventEvent}
+      tabIndex={tabIndex}
+    >
+      <ToggleFullscreenButton
+        isFullScreen={isFullScreen}
+        onToggleFullScreen={onToggleFullscreen}
+      />
+      <div data-hook={dataHook} className={classes.viewer}>
+        <WixRicosViewer
+          {...ricosProps}
+          {...wixRicosProps}
+          plugins={plugins}
+          content={ensureRicosContent(content ?? fromPlainText(''))}
+        />
+      </div>
+    </div>
+  );
+};
+
+RCV.displayName = 'RCV';
+
+export interface RichContentViewerProps
+  extends Omit<RCVProps, 'isFullScreen' | 'onToggleFullscreen'> {
+  fullScreenOnly?: boolean;
+  onEnterFullScreen?: () => void;
+  onExitFullScreen?: () => void;
+}
+
+export const RichContentViewer: React.FC<RichContentViewerProps> = ({
+  fullScreenOnly,
+  onEnterFullScreen,
+  onExitFullScreen,
+  className,
+  tabIndex,
+  ...props
+}) => {
+  const {
+    isOpen: isFullScreen,
+    onOpen,
+    onClose,
+  } = useOpenState(!!fullScreenOnly, {
+    onOpen: onEnterFullScreen,
+    onClose: onExitFullScreen,
+  });
+
+  return (
+    <>
+      <UserSiteFonts />
+      {!fullScreenOnly && (
+        <RCV
+          {...props}
+          isFullScreen={false}
+          onToggleFullscreen={onOpen}
+          className={className}
+          tabIndex={tabIndex}
+        />
+      )}
+      <FullscreenModal isOpen={isFullScreen}>
+        <RCV
+          {...props}
+          isFullScreen
+          onToggleFullscreen={onClose}
+          className={classes.modalViewer}
+        />
+      </FullscreenModal>
+    </>
+  );
+};
+
+RichContentViewer.displayName = 'RichContentViewer';

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

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './rich-content-document-http-service';
+export * from './use-rich-content-document-service';

package/src/components/rich-content/rich-content-input/services/rich-content-document-http-service.ts

@@ -0,0 +1,48 @@
+import type { WixPatternsContainer } from '@wix/patterns';
+import { ricosDocuments } from '@wix/rich-content';
+import type { RichContent } from '@wix/ricos';
+import { isRicosLikeObject } from '../../../../auto-field-types';
+
+import { type RichContentDocumentService } from './types';
+
+const { Plugin, validateDocument } = ricosDocuments;
+
+type ValidateDocumentFn = (
+  httpClient: WixPatternsContainer['httpClient'],
+) => (
+  document: Record<string, unknown> | null,
+  options?: { fixDocument?: boolean; plugins?: string[] },
+) => Promise<{ validDocument?: RichContent }>;
+
+export const createRichContentDocumentHttpService = (
+  httpClient: WixPatternsContainer['httpClient'],
+): RichContentDocumentService => {
+  return {
+    convertToRichContent: async (data: unknown) => {
+      let document = data;
+
+      if (typeof document === 'string') {
+        try {
+          document = JSON.parse(document);
+        } catch {
+          return undefined;
+        }
+      }
+
+      if (!isRicosLikeObject(document)) {
+        return undefined;
+      }
+
+      const response = await (
+        validateDocument as unknown as ValidateDocumentFn
+      )(httpClient)(document as Record<string, unknown>, {
+        fixDocument: true,
+        plugins: Object.values(Plugin).filter(
+          (plugin) => plugin !== Plugin.UNKNOWN_PLUGIN,
+        ),
+      });
+
+      return response.validDocument as RichContent | undefined;
+    },
+  };
+};

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

@@ -0,0 +1,5 @@
+import type { RichContent } from '@wix/ricos';
+
+export interface RichContentDocumentService {
+  convertToRichContent(document: unknown): Promise<RichContent | undefined>;
+}

package/src/components/rich-content/rich-content-input/services/use-rich-content-document-service.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+
+import { useWixPatternsContainer } from '@wix/patterns';
+
+import { createRichContentDocumentHttpService } from './rich-content-document-http-service';
+import type { RichContentDocumentService } from './types';
+
+export const useRichContentDocumentService = (): RichContentDocumentService => {
+  const { httpClient } = useWixPatternsContainer();
+
+  return useMemo(
+    () => createRichContentDocumentHttpService(httpClient),
+    [httpClient],
+  );
+};

package/src/components/rich-content/rich-content-input/variables.css

@@ -0,0 +1,4 @@
+:root {
+    --topToolbarHeight: 47px;
+    --bottomToolbarHeight: 40px;
+}

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

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

package/src/components/rich-content/rich-content-view/rich-content-view.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Loader } from '@wix/design-system';
+import { TextView } from '../../text';
+
+import { usePlainTextRichContent } from '../hooks';
+
+export const RichContentView: React.FC<any> = ({ data, ...props }) => {
+  const [plainTextContent, isContentConverting] = usePlainTextRichContent(data);
+  return (
+    <TextView
+      {...props}
+      data={isContentConverting ? <Loader size="tiny" /> : plainTextContent}
+    />
+  );
+};
+
+RichContentView.displayName = 'RichContentView';

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

@@ -0,0 +1 @@
+export type ColorScheme = Record<string, { color: string; index: number }>;

package/src/components/rich-text/components/link/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TextButton } from '@wix/design-system';
+
+export interface LinkButtonProps {
+  href?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+  inText?: boolean;
+}
+
+// Placeholder component for LinkButton
+export const LinkButton: React.FC<LinkButtonProps> = ({
+  href,
+  children,
+  onClick,
+  inText,
+}) => {
+  if (inText) {
+    return (
+      <TextButton
+        as={href ? 'a' : 'button'}
+        href={href}
+        target={href ? '_blank' : undefined}
+        rel={href ? 'noopener noreferrer' : undefined}
+        onClick={onClick}
+        size="tiny"
+        underline="always"
+      >
+        {children}
+      </TextButton>
+    );
+  }
+
+  return (
+    <TextButton
+      as={href ? 'a' : 'button'}
+      href={href}
+      onClick={onClick}
+      size="tiny"
+      underline="always"
+    >
+      {children}
+    </TextButton>
+  );
+};

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

@@ -0,0 +1,5 @@
+export * from './rich-text-view';
+export * from './rich-text-input';
+
+export type { NoOptions, TextKeys } from './types';
+export * from './components/link';

package/src/components/rich-text/rich-text-input/data-hooks.ts

@@ -0,0 +1,2 @@
+export const richTextToolbarDataHook = 'rich-text-toolbar';
+export const richTextDataHook = 'rich-text';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type { FormInputProps } from '../../../../types';
+import { UserSiteFonts } from '../../../user-site-fonts';
+import type { RichTextEditorProps } from '../rich-text-editor';
+import { RichTextEditor } from '../rich-text-editor';
+
+export type FormRichTextInputProps = FormInputProps<string> &
+  Pick<RichTextEditorProps, 'textStyle' | 'headingsEnabled'>;
+
+export const FormRichTextInput: React.FC<FormRichTextInputProps> = ({
+  data,
+  invalid,
+  ...props
+}) => {
+  return (
+    <>
+      {props.headingsEnabled && <UserSiteFonts />}
+      <RichTextEditor
+        {...props}
+        value={data}
+        status={invalid ? 'error' : undefined}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { FormRichTextInput, FormRichTextInput as default } from './form-rich-text-input';
+export type { FormRichTextInputProps } from './form-rich-text-input';

package/src/components/rich-text/rich-text-input/index.ts

@@ -0,0 +1,2 @@
+export * from './form-input';
+export * from './rich-text-editor';

package/src/components/rich-text/rich-text-input/rich-text-editor/composite-decorator.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type { ContentBlock, ContentState } from 'draft-js';
+import { CompositeDecorator } from 'draft-js';
+
+export interface DecoratorComponentProps {
+  entityKey: string;
+  contentState: ContentState;
+}
+
+export type StrategyFn = (
+  contentBlock: ContentBlock,
+  callback: (start: number, end: number) => void,
+  contentState: ContentState,
+) => void;
+
+const findLinkEntities: StrategyFn = (contentBlock, cb, contentState) => {
+  contentBlock.findEntityRanges((character: any) => {
+    const entityKey = character.getEntity();
+    return (
+      entityKey !== null &&
+      contentState.getEntity(entityKey).getType() === 'LINK'
+    );
+  }, cb);
+};
+
+const Link: React.FC<DecoratorComponentProps> = (props) => {
+  const { url } = props.contentState.getEntity(props.entityKey).getData();
+  return <a href={url} children={props.children} />;
+};
+
+export const compositeDecorator = new CompositeDecorator([
+  {
+    strategy: findLinkEntities,
+    component: Link,
+  },
+]);

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

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

package/src/components/rich-text/rich-text-input/rich-text-editor/list-items-indentations.js

@@ -0,0 +1,43 @@
+module.exports = {
+  unorderedListMixin([maxDepth]) {
+    const result = {};
+
+    for (let i = 0; i <= Number(maxDepth); i++) {
+      result[`& :global(.public-DraftStyleDefault-depth${i})`] = {
+        'margin-inline-start': `${(i + 1) * 2}ch`,
+      };
+    }
+
+    return result;
+  },
+
+  orderedListMixin([maxDepth, maxChars]) {
+    const result = {};
+
+    // for each depth
+    for (let depth = 0; depth <= Number(maxDepth); depth++) {
+      const depthIndentation = (depth + 1) * 2;
+
+      // selector for first item in list
+      result[`li:global(.public-DraftStyleDefault-depth${depth}):first-child`] =
+        {
+          'margin-inline-start': `${depthIndentation}ch`,
+        };
+
+      // for number of chars in list item number (1. ... 10. ... 100. ... 1000.)
+      for (let numChars = 1; numChars <= Number(maxChars); numChars++) {
+        const suffix =
+          numChars > 1 ? `:nth-child(n+${Math.pow(10, numChars - 1)})` : '';
+
+        // each li after first one which have the `depth` and `numChars`
+        result[
+          `li:first-child ~ li:global(.public-DraftStyleDefault-depth${depth})${suffix}`
+        ] = {
+          'margin-inline-start': `${depthIndentation + numChars - 1}ch`,
+        };
+      }
+    }
+
+    return result;
+  },
+};