@wix/patterns-fields 1.0.0

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-paragraph-one.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="black" xmlns="http://www.w3.org/2000/svg">
+ <text x="2" y="16" fill="black" style="font-size:14px;font-weight:bold;font-family:inherit">P1</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-paragraph-three.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="black" xmlns="http://www.w3.org/2000/svg">
+ <text x="2" y="16" fill="black" style="font-size:14px;font-weight:bold;font-family:inherit">P3</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-u.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" fill-rule="evenodd" d="M7 20h11v-2H7v2zm5.5-3.767c2.566 0 4.5-2.057 4.5-4.783V6a1 1 0 1 0-2 0v5.45c0 1.382-.859 2.783-2.5 2.783S10 12.832 10 11.45V6a1 1 0 1 0-2 0v5.45c0 2.726 1.935 4.783 4.5 4.783z"/></svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-unordered-list-rtl.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#3899EC" fill-rule="evenodd" d="M5,19 L15,19 L15,17 L5,17 L5,19 Z M17,19 L20,19 L20,16 L17,16 L17,19 Z M17,13 L20,13 L20,10 L17,10 L17,13 Z M17,7 L20,7 L20,4 L17,4 L17,7 Z M5,7 L15,7 L15,5 L5,5 L5,7 Z M5,13 L15,13 L15,11 L5,11 L5,13 Z"/>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-unordered-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" fill-rule="evenodd" d="M10 19h10v-2H10v2zm-5 0h3v-3H5v3zm0-6h3v-3H5v3zm0-6h3V4H5v3zm5 0h10V5H10v2zm0 6h10v-2H10v2z"/></svg>

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

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

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/link-button.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { EntityInstance } from 'draft-js';
+import { getValidURL } from '../../../../../auto-field-types';
+import { ToggleButton } from '@wix/design-system';
+import { Link as LinkIcon } from '@wix/wix-ui-icons-common';
+
+import { preventEvent, stopEvent } from '../../../../../utils';
+import { useOpenState, useTranslations } from '../../../../../hooks';
+import { PasteURLModal } from '../../../../media-control/paste-url-modal';
+
+import { richTextToolbarDataHook } from '../../data-hooks';
+import { classes } from './toolbar.st.css.js';
+
+export interface LinkButtonProps {
+  entity?: EntityInstance;
+  onChange: (value?: string) => void;
+}
+
+const getUrlFromEntity = (entity?: EntityInstance) =>
+  entity?.getData().url ?? '';
+
+export const LinkButton: React.FC<LinkButtonProps> = ({ entity, onChange }) => {
+  const { t } = useTranslations();
+
+  const { isOpen: show, onClose, onToggle } = useOpenState();
+  const [pendingSaveUrl, setPendingSaveUrl] = useState<string | null>(null);
+  const wasOpen = useRef(false);
+
+  // Apply the link after the modal closes and focus restoration completes.
+  // The Modal's componentDidUpdate restores focus to the trigger button on
+  // close, which interferes with Draft.js selection state. Deferring the
+  // save to a post-close effect lets the focus cycle settle first.
+  useEffect(() => {
+    if (wasOpen.current && !show && pendingSaveUrl !== null) {
+      onChange(pendingSaveUrl || undefined);
+      setPendingSaveUrl(null);
+    }
+    wasOpen.current = show;
+  }, [show, pendingSaveUrl, onChange]);
+
+  const onSave = useCallback(
+    (value?: string) => setPendingSaveUrl(value ? getValidURL(value) : null),
+    [],
+  );
+
+  return (
+    <div
+      className={classes.item}
+      onMouseDown={preventEvent}
+      onKeyDown={stopEvent}
+    >
+      <ToggleButton
+        dataHook={`${richTextToolbarDataHook}.button.link`}
+        skin="inverted"
+        onClick={onToggle}
+        selected={show || !!entity}
+        labelValue={t('CMS.richTextEditor.toolbar.button.link')}
+      >
+        <LinkIcon />
+      </ToggleButton>
+      <PasteURLModal
+        dataHook={`${richTextToolbarDataHook}.linkModal`}
+        show={show}
+        onClose={onClose}
+        value={getUrlFromEntity(entity)}
+        onSave={onSave}
+        title={t('CMS.richTextEditor.toolbar.button.link.paste.url.title')}
+        inputPlaceholder={t(
+          'CMS.richTextEditor.toolbar.button.link.paste.url.placeholder',
+        )}
+        primaryButtonText={t('CMS.richTextEditor.toolbar.button.link.save')}
+        secondaryButtonText={t('CMS.richTextEditor.toolbar.button.link.cancel')}
+        keepMounted={false}
+      />
+    </div>
+  );
+};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar-button.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { ToggleButton } from '@wix/design-system';
+
+import { preventEvent } from '../../../../../utils';
+import { combineClasses } from '../utils/stylable-helper';
+
+import { style, classes } from './toolbar.st.css.js';
+
+export interface ToolbarButtonProps {
+  isSelected?: boolean;
+  onClick?: () => void;
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+  dataHook?: string;
+}
+
+export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+  label,
+  onClick,
+  isSelected,
+  className,
+  children,
+  dataHook,
+}) => {
+  return (
+    <div
+      className={combineClasses(style, classes.item, className)}
+      onMouseDown={preventEvent}
+    >
+      <ToggleButton
+        dataHook={dataHook}
+        skin="inverted"
+        selected={isSelected}
+        labelValue={label}
+        onClick={onClick}
+      >
+        {children}
+      </ToggleButton>
+    </div>
+  );
+};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar-toggle.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+
+import type { OrderedSet } from 'immutable';
+
+import { ToolbarButton } from './toolbar-button';
+
+export interface ToolbarToggleProps {
+  name: string;
+  label?: string;
+  onChange: (value: string) => void;
+  inlineStyle?: OrderedSet<string>;
+  blockType?: string;
+  dataHook?: string;
+  children?: React.ReactNode;
+}
+
+export const ToolbarToggle: React.FC<ToolbarToggleProps> = ({
+  onChange,
+  inlineStyle,
+  name,
+  blockType,
+  ...rest
+}) => {
+  const onClick = useCallback(() => onChange(name), [name, onChange]);
+  const isSelected = inlineStyle ? inlineStyle.has(name) : name === blockType;
+  return <ToolbarButton isSelected={isSelected} onClick={onClick} {...rest} />;
+};

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

@@ -0,0 +1,117 @@
+@property st-global(--wds-color-blue-400);
+@property st-global(--wds-color-black-400);
+@property st-global(--wds-color-white);
+@property st-global(--wds-font-family-default);
+@property st-global(--wds-font-weight-medium);
+@property st-global(--wds-font-weight-bold);
+@property st-global(--wds-font-size-500);
+@property st-global(--wds-font-line-height-300);
+
+.root {
+    padding: 12px 18px;
+    display: flex;
+    border-bottom: 1px solid var(--wds-color-blue-400);
+    background: var(--wds-color-white);
+    align-items: center;
+}
+
+.item {
+    display: flex;
+    margin-right: 12px;
+}
+.item svg,
+.item svg path,
+.item svg text {
+    color: inherit;
+    fill: currentColor;
+}
+
+.separator {
+    display: inline-flex;
+    margin-right: 12px;
+    border-left: 1px solid #ddd;
+    height: 100%;
+}
+
+.clearFormatting {
+    margin-left: auto;
+}
+
+.fullScreen {
+    margin-right: 0;
+}
+
+.dropdownItemContent {
+    -st-states: selected;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    align-items: center;
+}
+.dropdownItemContent:selected .dropdownItemTitle,
+.dropdownItemContent:selected .dropdownItemSubtitle {
+    color: var(--wds-color-white) !important;
+}
+
+.dropdownItemSubtitle {
+    color: var(--wds-color-black-400) !important;
+    padding-right: 12px;
+    flex-shrink: 0;
+}
+
+.dropdownHeaderOne {
+    font-weight: var(--wds-font-weight-bold) !important;
+    font-size: 36px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownHeaderTwo {
+    font-weight: var(--wds-font-weight-bold) !important;
+    font-size: 32px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownHeaderThree {
+    font-weight: var(--wds-font-weight-medium) !important;
+    font-size: 28px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownHeaderFour {
+    font-weight: var(--wds-font-weight-bold) !important;
+    font-size: 24px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownHeaderFive {
+    font-weight: var(--wds-font-weight-bold) !important;
+    font-size: 22px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownHeaderSix {
+    font-weight: var(--wds-font-weight-medium) !important;
+    font-size: 20px !important;
+    line-height: 1.2 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownParagraphOne {
+    font-weight: var(--wds-font-weight-medium) !important;
+    font-size: 18px !important;
+    line-height: 1.33 !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownNormalText {
+    font-weight: var(--wds-font-weight-medium) !important;
+    font-size: var(--wds-font-size-500) !important;
+    line-height: var(--wds-font-line-height-300) !important;
+    font-family: var(--wds-font-family-default) !important;
+}
+.dropdownParagraphThree {
+    font-weight: var(--wds-font-weight-medium) !important;
+    font-size: 14px !important;
+    line-height: 1.29 !important;
+    font-family: var(--wds-font-family-default) !important;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "toolbar3709507281";
+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":"toolbar3709507281__root","item":"toolbar3709507281__item","separator":"toolbar3709507281__separator","clearFormatting":"toolbar3709507281__clearFormatting","fullScreen":"toolbar3709507281__fullScreen","dropdownItemContent":"toolbar3709507281__dropdownItemContent","dropdownItemTitle":"toolbar3709507281__dropdownItemTitle","dropdownItemSubtitle":"toolbar3709507281__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3709507281__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3709507281__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3709507281__dropdownHeaderThree","dropdownHeaderFour":"toolbar3709507281__dropdownHeaderFour","dropdownHeaderFive":"toolbar3709507281__dropdownHeaderFive","dropdownHeaderSix":"toolbar3709507281__dropdownHeaderSix","dropdownParagraphOne":"toolbar3709507281__dropdownParagraphOne","dropdownNormalText":"toolbar3709507281__dropdownNormalText","dropdownParagraphThree":"toolbar3709507281__dropdownParagraphThree"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300"}; 
+
+
+
+

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import type { EditorState, EntityInstance, CharacterMetadata } from 'draft-js';
+
+import {
+  Maximize as MaximizeIcon,
+  Minimise as MinimiseIcon,
+} from '@wix/wix-ui-icons-common';
+
+import { isTruthy } from '../../../../../utils';
+import { useTranslations } from '../../../../../hooks';
+
+import { ToolbarToggle } from './toolbar-toggle';
+import { ToolbarButton } from './toolbar-button';
+import { LinkButton } from './link-button';
+import { HeaderDropdown } from './header-dropdown';
+import { AlignDropdown } from './align-dropdown';
+import BoldIcon from './icons/rt-b.svg';
+import ItalicIcon from './icons/rt-i.svg';
+import UnderlineIcon from './icons/rt-u.svg';
+import ClearIcon from './icons/rt-clear.svg';
+import OrderedListIcon from './icons/rt-ordered-list.svg';
+import OrderedListRTLIcon from './icons/rt-ordered-list-rtl.svg';
+import UnorderedListIcon from './icons/rt-unordered-list.svg';
+import UnorderedListRTLIcon from './icons/rt-unordered-list-rtl.svg';
+import { richTextToolbarDataHook } from '../../data-hooks';
+import { classes } from './toolbar.st.css.js';
+
+export interface ToolbarProps {
+  isFullScreen?: boolean;
+  editorState: EditorState;
+  onChangeBlock: (blockType: string) => void;
+  onChangeStyle: (inlineStyle: string) => void;
+  onChangeLink: (link?: string) => void;
+  onChangeAlign: (textAlign: string) => void;
+  onClear: () => void;
+  onToggleFullScreen?: () => void;
+  headingsEnabled?: boolean;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  onChangeBlock,
+  onChangeStyle,
+  onChangeLink,
+  onChangeAlign,
+  onClear,
+  onToggleFullScreen,
+  editorState,
+  isFullScreen,
+  headingsEnabled,
+}) => {
+  const { t } = useTranslations();
+  // TODO getCurrentBlock
+  const currentContent = editorState.getCurrentContent();
+  const directionMap = editorState.getDirectionMap();
+  const selectionState = editorState.getSelection();
+  const inlineStyle = editorState.getCurrentInlineStyle();
+  const anchorKey = selectionState.getAnchorKey();
+  const block = currentContent.getBlockForKey(anchorKey);
+  const inlineBlockType = block.getData().get('inlineBlockType', 'unstyled');
+  const blockType = block.getType();
+  const selectionStart = selectionState.getStartOffset();
+  const selectionEnd = selectionState.getEndOffset();
+  const blockStyle = block.getData().get('style', {});
+  const characters = Array.from<CharacterMetadata>(
+    block.getCharacterList().values() as any,
+  );
+  const isRTL = directionMap.get(anchorKey) === 'RTL';
+  const entities: EntityInstance[] = characters
+    .slice(selectionStart, selectionEnd + 1)
+    .map((character) => {
+      const key = character.getEntity();
+      return key && currentContent.getEntity(key);
+    })
+    .filter(isTruthy);
+
+  const blockTheme =
+    inlineBlockType === 'unstyled' ? block.getType() : inlineBlockType;
+
+  return (
+    <div
+      data-hook={`${richTextToolbarDataHook}.toolbar`}
+      className={classes.root}
+    >
+      <ToolbarToggle
+        dataHook={`${richTextToolbarDataHook}.button.bold`}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.bold')}
+        onChange={onChangeStyle}
+        inlineStyle={inlineStyle}
+        name="BOLD"
+      >
+        <BoldIcon />
+      </ToolbarToggle>
+      <ToolbarToggle
+        dataHook={`${richTextToolbarDataHook}.button.italic`}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.italic')}
+        onChange={onChangeStyle}
+        inlineStyle={inlineStyle}
+        name="ITALIC"
+      >
+        <ItalicIcon />
+      </ToolbarToggle>
+      <ToolbarToggle
+        dataHook={`${richTextToolbarDataHook}.button.underline`}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.underline')}
+        onChange={onChangeStyle}
+        inlineStyle={inlineStyle}
+        name="UNDERLINE"
+      >
+        <UnderlineIcon />
+      </ToolbarToggle>
+
+      <i className={classes.separator} />
+
+      {headingsEnabled && (
+        <>
+          <HeaderDropdown value={blockTheme} onChange={onChangeBlock} />
+
+          <i className={classes.separator} />
+        </>
+      )}
+
+      <AlignDropdown
+        onChange={onChangeAlign}
+        value={blockStyle.textAlign}
+        isRTL={isRTL}
+      />
+      <ToolbarToggle
+        dataHook={`${richTextToolbarDataHook}.button.ul`}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.ul')}
+        onChange={onChangeBlock}
+        blockType={blockType}
+        name="unordered-list-item"
+      >
+        {isRTL ? <UnorderedListRTLIcon /> : <UnorderedListIcon />}
+      </ToolbarToggle>
+      <ToolbarToggle
+        dataHook={`${richTextToolbarDataHook}.button.ol`}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.ol')}
+        onChange={onChangeBlock}
+        blockType={blockType}
+        name="ordered-list-item"
+      >
+        {isRTL ? <OrderedListRTLIcon /> : <OrderedListIcon />}
+      </ToolbarToggle>
+
+      <i className={classes.separator} />
+
+      <LinkButton
+        entity={entities.find((entity) => entity.getType() === 'LINK')}
+        onChange={onChangeLink}
+      />
+      <ToolbarButton
+        dataHook={`${richTextToolbarDataHook}.button.clear-formatting`}
+        onClick={onClear}
+        className={classes.clearFormatting}
+        label={t('CMS.richTextEditor.toolbar.button.tooltip.clear-formation')}
+      >
+        <ClearIcon />
+      </ToolbarButton>
+
+      <i className={classes.separator} />
+
+      <ToolbarButton
+        dataHook={`${richTextToolbarDataHook}.button.fullscreen`}
+        onClick={onToggleFullScreen}
+        className={classes.fullScreen}
+        label={
+          isFullScreen
+            ? t('CMS.richTextEditor.toolbar.button.tooltip.full-screen.exit')
+            : t('CMS.richTextEditor.toolbar.button.tooltip.full-screen')
+        }
+      >
+        {isFullScreen ? <MinimiseIcon /> : <MaximizeIcon />}
+      </ToolbarButton>
+    </div>
+  );
+};

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/block.ts

@@ -0,0 +1,20 @@
+import type { EditorState, DraftBlockType } from 'draft-js';
+
+export function isListItemBlockType(blockType: DraftBlockType): boolean {
+  return ['unordered-list-item', 'ordered-list-item'].includes(blockType);
+}
+
+export function getPreviousListItemBlock(
+  editorState: EditorState,
+  blockKey: string,
+) {
+  const contentState = editorState.getCurrentContent();
+  const block = contentState.getBlockForKey(blockKey);
+  const blockBefore = contentState.getBlockBefore(blockKey);
+
+  if (!block || !blockBefore) {
+    return null;
+  }
+
+  return block.getType() === blockBefore.getType() ? blockBefore : null;
+}