@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,243 @@
+import React from 'react';
+
+import type { EditorState } from 'draft-js';
+import { Modal } from '@wix/design-system';
+
+import { richTextDataHook } from '../data-hooks';
+import { RichEditor } from './rich-editor';
+import { compositeDecorator } from './composite-decorator';
+import type {
+  CustomStyleMap,
+  InlineStyles,
+  RichTextEditingOptions,
+} from './utils';
+import { htmlToEditorState, editorStateToHTML } from './utils';
+import type { RichTextStyleVariables } from './text-style';
+import { combineClasses } from './utils/stylable-helper';
+import { style, classes } from './rich-text-editor.st.css.js';
+
+export type EditorName = 'main' | 'fullScreen';
+
+export interface RichTextEditorProps {
+  value?: string;
+  onChange: (value?: string) => void;
+  onInput?: () => void;
+  readOnly?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  autoFocus?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent, isFullScreen: boolean) => void;
+  border?: 'standard' | 'none';
+  status?: 'error' | 'warning';
+  maxHeight?: number;
+  textStyle?: RichTextStyleVariables;
+  headingsEnabled?: boolean;
+  dataHook?: string;
+}
+
+export interface RichTextEditorState {
+  value: string;
+  prevValue?: string;
+  isFullScreen: boolean;
+  editorState: EditorState;
+  customStyleMap: CustomStyleMap;
+  inlineStyles: InlineStyles;
+}
+
+export class RichTextEditor extends React.Component<
+  RichTextEditorProps,
+  RichTextEditorState
+> {
+  public static defaultProps: Partial<RichTextEditorProps> = {
+    value: '',
+    border: 'standard',
+    headingsEnabled: true,
+  };
+
+  public static getDerivedStateFromProps(
+    props: RichTextEditorProps,
+    state: RichTextEditorState,
+  ) {
+    if (props.value !== state.prevValue) {
+      if (props.value !== state.value) {
+        return {
+          ...htmlToEditorState(props.value, compositeDecorator, {
+            headingsEnabled: props.headingsEnabled,
+          }),
+          prevValue: props.value,
+          value: props.value || '',
+        };
+      }
+      return {
+        prevValue: props.value,
+      };
+    }
+    return null;
+  }
+
+  public state: RichTextEditorState = {
+    ...htmlToEditorState(
+      this.props.value,
+      compositeDecorator,
+      this.editingOptions,
+    ),
+    value: this.props.value || '',
+    prevValue: this.props.value,
+    isFullScreen: false,
+  };
+
+  public editors: Record<EditorName, RichEditor | null> = {
+    main: null,
+    fullScreen: null,
+  };
+
+  private get editingOptions(): RichTextEditingOptions {
+    const { headingsEnabled } = this.props;
+    return { headingsEnabled };
+  }
+
+  private isFocused = false;
+
+  private isBlurring = false;
+
+  private blurFrameId = 0;
+
+  public componentWillUnmount() {
+    cancelAnimationFrame(this.blurFrameId);
+    this.isBlurring && this.triggerOnBlur();
+  }
+
+  public render() {
+    const { value, isFullScreen } = this.state;
+    const { dataHook, readOnly, border, status } = this.props;
+
+    return (
+      <div
+        data-hook={dataHook}
+        className={combineClasses(style, classes.root, { border, status })}
+        tabIndex={0}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+      >
+        {this.renderEditor('main')}
+        <input
+          data-hook={`${richTextDataHook}.nativeInput`}
+          className={classes.nativeInput}
+          defaultValue={value}
+          readOnly={readOnly}
+          tabIndex={-1}
+        />
+        {isFullScreen && (
+          <Modal screen="desktop" isOpen={isFullScreen}>
+            {this.renderEditor('fullScreen')}
+          </Modal>
+        )}
+      </div>
+    );
+  }
+
+  private renderEditor = (name: EditorName) => {
+    const { autoFocus, readOnly, maxHeight, textStyle } = this.props;
+    const { isFullScreen, editorState, customStyleMap } = this.state;
+
+    if (name === 'main' && isFullScreen) {
+      return null;
+    }
+
+    return (
+      <div
+        className={combineClasses(style, classes.editor, { isFullScreen })}
+        style={
+          name === 'main'
+            ? { maxHeight, ...textStyle }
+            : (textStyle as React.CSSProperties)
+        }
+        onKeyDown={this.onKeyDown}
+      >
+        <RichEditor
+          ref={(editor) => (this.editors[name] = editor)}
+          editorState={editorState}
+          customStyleMap={customStyleMap}
+          onChange={this.onChange}
+          onToggleFullScreen={this.onToggleFullScreen}
+          readOnly={readOnly}
+          isFullScreen={isFullScreen}
+          headingsEnabled={this.editingOptions.headingsEnabled}
+          autoFocus={name === 'fullScreen' || autoFocus}
+        />
+      </div>
+    );
+  };
+
+  private onToggleFullScreen = () => {
+    const { isFullScreen } = this.state;
+    this.setState({ isFullScreen: !isFullScreen });
+
+    if (isFullScreen && this.editors.main) {
+      this.editors.main.focus();
+    }
+  };
+
+  private onChange = (editorState: EditorState) => {
+    const { inlineStyles } = this.state;
+
+    const value = editorStateToHTML(
+      editorState,
+      inlineStyles,
+      this.editingOptions,
+    );
+
+    this.setState({ editorState, value });
+    value && this.props.onInput?.();
+  };
+
+  private triggerOnChange = () => {
+    const { value } = this.state;
+    const { onChange } = this.props;
+
+    if (value !== this.props.value) {
+      onChange(value);
+    }
+  };
+
+  private onKeyDown = (e: React.KeyboardEvent) => {
+    const { isFullScreen } = this.state;
+
+    switch (e.key) {
+      case 'Escape':
+        isFullScreen && this.onToggleFullScreen();
+        break;
+    }
+
+    this.props.onKeyDown?.(e, isFullScreen);
+  };
+
+  private onFocus = () => {
+    this.isBlurring = false;
+    cancelAnimationFrame(this.blurFrameId);
+
+    if (this.isFocused) {
+      return;
+    }
+
+    this.editors.main?.focus();
+    this.triggerOnFocus();
+  };
+
+  private onBlur = () => {
+    this.isBlurring = true;
+    cancelAnimationFrame(this.blurFrameId);
+    this.blurFrameId = requestAnimationFrame(this.triggerOnBlur);
+  };
+
+  private triggerOnFocus = () => {
+    this.isFocused = true;
+    this.props.onFocus?.();
+  };
+
+  private triggerOnBlur = () => {
+    this.isFocused = false;
+    this.triggerOnChange();
+    !this.state.isFullScreen && this.props.onBlur?.();
+  };
+}

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

@@ -0,0 +1,39 @@
+export type BlockType =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p1'
+  | 'unstyled'
+  | 'p3';
+
+export type TextStyleProperty =
+  | 'fontSize'
+  | 'fontStyle'
+  | 'fontWeight'
+  | 'fontFamily'
+  | 'lineHeight';
+
+type TextStyleVariable<
+  T extends BlockType,
+  P extends TextStyleProperty,
+> = `--rt-${T}-${P}`;
+
+export const buildVariableName = <
+  T extends BlockType,
+  P extends TextStyleProperty,
+>(
+  blockType: T,
+  property: P,
+): TextStyleVariable<T, P> => `--rt-${blockType}-${property}`;
+
+export type RichTextStyleVariable = TextStyleVariable<
+  BlockType,
+  TextStyleProperty
+>;
+
+export type RichTextStyleVariables = Partial<
+  Record<RichTextStyleVariable, string | number>
+>;

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

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+
+import type { DropdownLayoutValueOption } from '@wix/design-system';
+import { DropdownBase, ToggleButton } from '@wix/design-system';
+import {
+  TextAlignLeft as TextAlignLeftIcon,
+  TextAlignCenter as TextAlignCenterIcon,
+  TextAlignRight as TextAlignRightIcon,
+  TextJustify as TextJustifyIcon,
+} from '@wix/wix-ui-icons-common';
+
+import { preventEvent } from '../../../../../utils';
+import { useTranslations } from '../../../../../hooks';
+
+import { richTextToolbarDataHook } from '../../data-hooks';
+import { classes } from './toolbar.st.css.js';
+
+export interface AlignDropdownProps {
+  value?: string;
+  onChange: (value: string) => void;
+  isRTL: boolean;
+}
+
+const getIconProps = (alignment: string) => ({
+  'data-hook': `${richTextToolbarDataHook}.dropdownOption.${alignment}`,
+  style: { display: 'flex' },
+});
+
+const dropdownOptions: DropdownLayoutValueOption[] = [
+  {
+    id: 'left',
+    value: <TextAlignLeftIcon {...getIconProps('left')} />,
+  },
+  {
+    id: 'center',
+    value: <TextAlignCenterIcon {...getIconProps('center')} />,
+  },
+  {
+    id: 'right',
+    value: <TextAlignRightIcon {...getIconProps('right')} />,
+  },
+  {
+    id: 'justify',
+    value: <TextJustifyIcon {...getIconProps('justify')} />,
+  },
+];
+
+export const AlignDropdown: React.FC<AlignDropdownProps> = ({
+  value,
+  onChange,
+  isRTL,
+}) => {
+  const { t } = useTranslations();
+
+  const onSelect = useCallback(
+    (option: DropdownLayoutValueOption) => onChange(String(option.id)),
+    [onChange],
+  );
+
+  return (
+    <div className={classes.item} onMouseDown={preventEvent}>
+      <DropdownBase
+        dataHook={`${richTextToolbarDataHook}.dropdown.align`}
+        options={dropdownOptions}
+        onSelect={onSelect}
+        selectedId={value || (!isRTL ? 'left' : 'right')}
+        appendTo="window"
+        zIndex={10000}
+        dynamicWidth
+      >
+        {({ isOpen, toggle, selectedOption }) => (
+          <ToggleButton
+            dataHook={`${richTextToolbarDataHook}.button.align`}
+            skin="inverted"
+            onClick={toggle}
+            selected={isOpen}
+            labelValue={t('CMS.richTextEditor.toolbar.button.tooltip.align')}
+          >
+            {selectedOption?.value}
+          </ToggleButton>
+        )}
+      </DropdownBase>
+    </div>
+  );
+};

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

@@ -0,0 +1,266 @@
+import React, { useCallback } from 'react';
+
+import type { DropdownLayoutValueOption } from '@wix/design-system';
+import {
+  Box,
+  Text,
+  Heading,
+  DropdownBase,
+  ToggleButton,
+} from '@wix/design-system';
+
+import { useTranslations } from '../../../../../hooks';
+import { LinkButton } from '../../../components/link';
+import { combineClasses } from '../utils/stylable-helper';
+
+import HeaderOneIcon from './icons/rt-header-one.svg';
+import HeaderTwoIcon from './icons/rt-header-two.svg';
+import HeaderThreeIcon from './icons/rt-header-three.svg';
+import HeaderFourIcon from './icons/rt-header-four.svg';
+import HeaderFiveIcon from './icons/rt-header-five.svg';
+import HeaderSixIcon from './icons/rt-header-six.svg';
+import ParagraphOneIcon from './icons/rt-paragraph-one.svg';
+import NormalTextIcon from './icons/rt-normal-text.svg';
+import ParagraphThreeIcon from './icons/rt-paragraph-three.svg';
+import { richTextToolbarDataHook } from '../../data-hooks';
+import { style, classes } from './toolbar.st.css.js';
+
+import { preventEvent } from '../../../../../utils';
+import type { TextKeys } from '../../../types';
+
+export interface HeaderDropdownItemContentProps {
+  titleKey: TextKeys;
+  subtitleKey: TextKeys;
+  selected?: boolean;
+  className?: string;
+  dataHook?: string;
+}
+
+const HeaderDropdownItemContent: React.FC<HeaderDropdownItemContentProps> = ({
+  titleKey,
+  subtitleKey,
+  selected,
+  className,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  return (
+    <div
+      data-hook={dataHook}
+      className={combineClasses(style, classes.dropdownItemContent, {
+        selected,
+      })}
+    >
+      <Text
+        className={combineClasses(style, classes.dropdownItemTitle, className)}
+        ellipsis
+        children={t(titleKey as any)}
+      />
+      <Heading
+        className={classes.dropdownItemSubtitle}
+        size="extraTiny"
+        children={t(subtitleKey as any)}
+      />
+    </div>
+  );
+};
+
+const HeaderDropdownHelpSection: React.FC = () => {
+  const { t } = useTranslations();
+  return (
+    <Box
+      paddingTop="SP2"
+      paddingBottom="SP2"
+      paddingLeft="SP4"
+      padding="SP4"
+      backgroundColor="Y40"
+    >
+      <Text size="small">
+        {t('CMS.richTextEditor.toolbar.headerDropdown.help.text')}
+        <br />
+        <LinkButton
+          inText
+          href={t('CMS.richTextEditor.toolbar.headerDropdown.button.info.link')}
+        >
+          {t('CMS.richTextEditor.toolbar.headerDropdown.button.info')}
+        </LinkButton>
+      </Text>
+    </Box>
+  );
+};
+
+const createDropdownOptions = (): DropdownLayoutValueOption[] => [
+  {
+    id: 'header-one',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-one`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h1.subtitle"
+        className={classes.dropdownHeaderOne}
+      />
+    ),
+  },
+  {
+    id: 'header-two',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-two`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h2.subtitle"
+        className={classes.dropdownHeaderTwo}
+      />
+    ),
+  },
+  {
+    id: 'header-three',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-three`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h3.subtitle"
+        className={classes.dropdownHeaderThree}
+      />
+    ),
+  },
+  {
+    id: 'header-four',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-four`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h4.subtitle"
+        className={classes.dropdownHeaderFour}
+      />
+    ),
+  },
+  {
+    id: 'header-five',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-five`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h5.subtitle"
+        className={classes.dropdownHeaderFive}
+      />
+    ),
+  },
+  {
+    id: 'header-six',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.header-six`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.h6.subtitle"
+        className={classes.dropdownHeaderSix}
+      />
+    ),
+  },
+  {
+    id: 'paragraph-one',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-one`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p1.subtitle"
+        className={classes.dropdownParagraphOne}
+      />
+    ),
+  },
+  {
+    id: 'unstyled',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.unstyled`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle"
+        className={classes.dropdownNormalText}
+      />
+    ),
+  },
+  {
+    id: 'paragraph-three',
+    value: (props) => (
+      <HeaderDropdownItemContent
+        {...props}
+        dataHook={`${richTextToolbarDataHook}.dropdownOption.paragraph-three`}
+        titleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.title"
+        subtitleKey="CMS.richTextEditor.toolbar.headerDropdown.option.p3.subtitle"
+        className={classes.dropdownParagraphThree}
+      />
+    ),
+  },
+  {
+    id: 'help-text',
+    disabled: true,
+    overrideOptionStyle: true,
+    value: <HeaderDropdownHelpSection />,
+  },
+];
+
+const headerTypeIconMap: Record<string, React.ReactElement> = {
+  'header-one': <HeaderOneIcon />,
+  'header-two': <HeaderTwoIcon />,
+  'header-three': <HeaderThreeIcon />,
+  'header-four': <HeaderFourIcon />,
+  'header-five': <HeaderFiveIcon />,
+  'header-six': <HeaderSixIcon />,
+  'paragraph-one': <ParagraphOneIcon />,
+  unstyled: <NormalTextIcon />,
+  'paragraph-three': <ParagraphThreeIcon />,
+};
+
+export interface HeaderDropdownProps {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+export const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslations();
+
+  const dropdownOptions = React.useMemo(() => createDropdownOptions(), []);
+
+  const onSelect = useCallback(
+    (option: DropdownLayoutValueOption) => onChange(String(option.id)),
+    [onChange],
+  );
+
+  return (
+    <div className={classes.item} onMouseDown={preventEvent}>
+      <DropdownBase
+        dataHook={`${richTextToolbarDataHook}.dropdown.header`}
+        selectedId={value || 'unstyled'}
+        onSelect={onSelect}
+        options={dropdownOptions}
+        placement="bottom-start"
+        appendTo="window"
+        zIndex={10000}
+        maxHeight={720}
+        dynamicWidth
+      >
+        {({ isOpen, toggle, selectedOption }) => (
+          <ToggleButton
+            dataHook={`${richTextToolbarDataHook}.button.header`}
+            skin="inverted"
+            onClick={toggle}
+            selected={isOpen}
+            labelValue={t('CMS.richTextEditor.toolbar.header')}
+          >
+            {headerTypeIconMap[selectedOption?.id ?? 'unstyled']}
+          </ToggleButton>
+        )}
+      </DropdownBase>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" fill-rule="evenodd" d="M9.002 11h4.007c.626 0 2.013 0 2.013-2 0-1.938-1.224-2-2.013-2H9.002v4zm0 2v4h5.013c1.055 0 2.014-.469 2.014-2 0-1.531-.906-2-2.014-2H9.002zm0 6H7V5h5.916c1.482 0 2.646.639 3.406 1.792a4.024 4.024 0 0 1 .168 4.146c-.148.27-.317.512-.512.736 1.079.576 1.88 1.693 2 2.899.116 1.151-.236 2.239-.99 3.066-.788.865-1.954 1.361-3.2 1.361H9.003z"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" d="M4.27 6.23L3 7.5 9.5 14 7 19h2.5l1.57-3.66 5.16 4.93L17.5 19 4.27 6.23zM6 5v.18L8 7h4.5L11 10l1.6 1.78L15 7h5V5H6z" fill-rule="evenodd"/></svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-five.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">H5</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-four.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">H4</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-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">H1</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-six.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">H6</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-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">H3</text>
+</svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-header-two.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">H2</text>
+</svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" fill-rule="evenodd" d="M16 7V5H9v2h2.712l-1.591 10H8v2h7v-2h-2.853l1.591-10z"/></svg>

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/icons/rt-normal-text.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">P2</text>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#308DDD"  d="M17,17 L19,17 L18,18 L19,19 L17,19 L17,20 L20,20 L20,18.992 L19,17.992 L20,16.992 L20,16 L17,16 L17,17 Z M17,11 L19.078,11 L17,13 C17,13 17.003,13 17,14 L20,14 L20,13 L18.078,13 L20,10.992 L20,10 L17,10 L17,11 Z M18,8 L19,8 L19,4 L17,4 L17,5 L18,5 L18,8 Z M5,7 L15,7 L15,5 L5,5 L5,7 Z M5,13 L15,13 L15,11 L5,11 L5,13 Z M5,19 L15,19 L15,17 L5,17 L5,19 Z"/>
+  </g>
+</svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#3899EC" fill-rule="evenodd" d="M5 17h2l-1 1 1 1H5v1h3v-1.008l-1-1 1-1V16H5v1zm0-6h2.078L5 13s.003 0 0 1h3v-1H6.078L8 10.992V10H5v1zm1-3h1V4H5v1h1v3zm4-1h10V5H10v2zm0 6h10v-2H10v2zm0 6h10v-2H10v2z"/></svg>