@commercetools-uikit/rich-text-utils 13.0.2 → 13.0.3

package/dist/declarations/src/editor.types.d.ts

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+declare type TSize = {
+    size: number;
+};
+declare type TData = {
+    get: (key: string) => TSize;
+};
+declare type TValue = {
+    blocks: TBlocks;
+    document: TDocument;
+    selection: {
+        isFocused: boolean;
+    };
+    activeMarks: {
+        some: (ascertMarkType: (mark: TMark) => boolean) => void;
+    } | TMark[];
+    data: TData;
+};
+declare type TWrapBlock = {
+    wrapBlock: (blockTag: string) => void;
+};
+declare type TBlocks = {
+    size?: number;
+    some: (block: unknown) => boolean | void;
+    first: () => {
+        key: string;
+        type: string;
+    };
+    map: (node: ReactNode) => {
+        toArray: () => string[];
+    };
+};
+declare type TNodes = {
+    map: (node: ReactNode) => {
+        toArray: () => string[];
+    };
+};
+declare type TDocument = {
+    getClosest: (block: {
+        key: unknown;
+    }, closest: (parent: {
+        type: string;
+    }) => boolean) => boolean;
+    getParent?: (parentParam: string) => {
+        type: string;
+    };
+    text?: string;
+    nodes?: TNodes;
+};
+declare type TNodeTextsResult = [{
+    key: string;
+    text: string;
+}, string];
+export declare type TMark = {
+    type: string;
+};
+export declare type TNode = {
+    texts: (nodeParam?: Record<string, string>) => TNodeTextsResult[];
+};
+export declare type THotKeyOptions = {
+    hotkey: string;
+};
+export declare type TEditor = {
+    focus: () => void;
+    value: TValue;
+    setBlocks: (blockTag: string) => {
+        unwrapBlock: (blockTag: string) => {
+            unwrapBlock: (blockTag: string) => void;
+        };
+        wrapBlock: (blockTag: string) => void;
+    };
+    unwrapBlock: (blockTag: string) => TWrapBlock;
+    hasPlaceholder?: boolean;
+    query?: (when: string | (() => void), node: TNode) => {
+        next: () => void;
+    };
+    props: {
+        options: {
+            placeholder: string;
+        };
+    };
+    undo?: () => void;
+    redo?: () => void;
+    toggleRedo?: () => void;
+    selection: {
+        isFocused: boolean;
+    };
+    hasUndos: () => boolean;
+    hasRedos: () => boolean;
+    toggleMark?: (value: unknown) => void;
+    hasBoldMark: () => boolean;
+    toggleBoldMark: () => void;
+    hasItalicMark: () => boolean;
+    toggleItalicMark: () => boolean;
+    hasUnderlinedMark: () => boolean;
+    toggleUnderlinedMark: () => void;
+    hasNumberedListBlock: () => boolean;
+    toggleNumberedListBlock: () => void;
+    hasBulletedListBlock: () => boolean;
+    toggleBulletedListBlock: () => void;
+    toggleUndo: () => void;
+};
+export {};

package/dist/declarations/src/has-block.d.ts

@@ -0,0 +1,3 @@
+import type { TEditor } from './editor.types';
+declare const hasBlock: (type: string, editor: TEditor) => boolean | void;
+export default hasBlock;

package/dist/declarations/src/html/html.d.ts

@@ -0,0 +1,3 @@
+import Html from 'slate-html-serializer';
+declare const html: Html;
+export default html;

package/dist/declarations/src/html/index.d.ts

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

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,6 @@
+export * as localized from './localized';
+export { default as html } from './html';
+export { default as isEmpty } from './is-empty';
+export { default as richTextPlugins } from './rich-text-plugins';
+export { HiddenInput, RichTextBody } from './rich-text-body';
+export { default as version } from './version';

package/dist/declarations/src/is-empty/index.d.ts

@@ -0,0 +1 @@
+export { default } from './is-empty';

package/dist/declarations/src/is-empty/is-empty.d.ts

@@ -0,0 +1,2 @@
+declare const isEmpty: (rawValue: string) => boolean;
+export default isEmpty;

package/dist/declarations/src/localized/index.d.ts

@@ -0,0 +1 @@
+export { createLocalizedString, isEmpty, omitEmptyTranslations, } from './localized';

package/dist/declarations/src/localized/localized.d.ts

@@ -0,0 +1,6 @@
+declare type TLocalizedString = Record<string, string>;
+declare type TTranslations = Record<string, string>;
+export declare const isEmpty: (localizedHtmlValue: Record<string, string | null | undefined> | undefined) => boolean;
+export declare const omitEmptyTranslations: (localizedString: TLocalizedString) => Record<string, unknown>;
+export declare const createLocalizedString: (languages: string[], existingTranslations?: TTranslations) => Record<string, unknown>;
+export {};

package/dist/declarations/src/plugins/index.d.ts

@@ -0,0 +1 @@
+export { RenderBlockPlugin, RenderMarkPlugin } from './plugins';

package/dist/declarations/src/plugins/list.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import type { TEditor } from '../editor.types';
+declare type TType = {
+    type: string;
+};
+declare type TListPlugin = {
+    attributes: unknown;
+    children: ReactNode;
+    node: TType;
+};
+declare const ListPlugin: () => {
+    renderBlock(props: TListPlugin, _editor: TEditor, next: () => JSX.Element): import("@emotion/react/jsx-runtime").JSX.Element;
+    commands: {
+        toggleBulletedListBlock: (editor: TEditor) => void;
+        toggleNumberedListBlock: (editor: TEditor) => void;
+    };
+    queries: {
+        hasBulletedListBlock: (editor: TEditor) => boolean | void;
+        hasNumberedListBlock: (editor: TEditor) => boolean | void;
+    };
+}[];
+export default ListPlugin;

package/dist/declarations/src/plugins/mark.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { TEditor, TMark } from '../editor.types';
+declare type TMarkPluginOptions = {
+    hotkey: string;
+    typeName: string;
+    RenderMark: ComponentType;
+    command: string;
+    query: string;
+    [option: string]: string | ReactNode;
+};
+declare type TRenderMarkProps = {
+    children: ReactNode;
+    mark: TMark;
+    attributes: unknown;
+};
+declare type TEvent = {
+    preventDefault: () => void;
+};
+declare const MarkPlugin: (options: TMarkPluginOptions) => {
+    onKeyDown(event: TEvent, editor: TEditor, next: () => void): void;
+    renderMark(props: TRenderMarkProps, _editor: TEditor, next: () => JSX.Element): import("@emotion/react/jsx-runtime").JSX.Element;
+    commands: {
+        [x: string]: (editor: TEditor) => void | undefined;
+    };
+    queries: {
+        [x: string]: (editor: TEditor) => boolean | void;
+    };
+}[];
+export default MarkPlugin;

package/dist/declarations/src/plugins/placeholder.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TEditor, TNode } from '../editor.types';
+declare type TEditorQueryPredicate = string | (() => void);
+declare type TDecorationNode = {
+    key: string;
+    offset: number;
+    path: string;
+};
+declare type TDecoration = {
+    type: string;
+    data: {
+        key: number;
+        get?: (name: string) => number;
+    };
+    anchor: TDecorationNode;
+    focus: TDecorationNode;
+};
+declare type TRenderDecorationProps = {
+    children: ReactNode;
+    decoration: TDecoration;
+};
+declare type TSlateReactPlaceholderOptions = {
+    when: TEditorQueryPredicate;
+    style: CSSProperties;
+};
+declare function SlateReactPlaceholder(options: TSlateReactPlaceholderOptions): {
+    decorateNode: (node: TNode, editor: TEditor, next: () => JSX.Element[]) => (JSX.Element | TDecoration)[];
+    renderDecoration: (props: TRenderDecorationProps, editor: Pick<TEditor, 'props'>, next: () => JSX.Element) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default SlateReactPlaceholder;

package/dist/declarations/src/plugins/plugins.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+declare type TType = {
+    type: string;
+};
+declare type TRenderBlockPluginProps = {
+    children: ReactNode;
+    mark: TType;
+    attributes: unknown;
+    node: TType;
+};
+export declare const RenderBlockPlugin: () => {
+    renderBlock(props: TRenderBlockPluginProps, next: () => ReactNode): ReactNode;
+};
+export declare const RenderMarkPlugin: () => {
+    renderMark(props: TRenderBlockPluginProps, next: () => ReactNode): ReactNode;
+};
+export {};

package/dist/declarations/src/plugins/redo.d.ts

@@ -0,0 +1,12 @@
+import type { KeyboardEvent } from 'react';
+import type { TEditor, THotKeyOptions } from '../editor.types';
+declare const RedoPlugin: (options?: Partial<THotKeyOptions>) => {
+    onKeyDown(event: KeyboardEvent<HTMLInputElement | HTMLButtonElement>, editor: TEditor, next: () => void): void;
+    queries: {
+        hasRedos: (editor: TEditor) => boolean;
+    };
+    commands: {
+        toggleRedo: (editor: TEditor) => void;
+    };
+}[];
+export default RedoPlugin;

package/dist/declarations/src/plugins/undo.d.ts

@@ -0,0 +1,15 @@
+import type { KeyboardEvent } from 'react';
+import type { TEditor, THotKeyOptions } from '../editor.types';
+declare type TExtendedEditor = TEditor & {
+    undo: () => void;
+};
+declare const UndoPlugin: (options?: Partial<THotKeyOptions>) => {
+    onKeyDown(event: KeyboardEvent<HTMLInputElement | HTMLButtonElement>, editor: TExtendedEditor, next: () => void): void;
+    queries: {
+        hasUndos: (editor: TExtendedEditor) => boolean;
+    };
+    commands: {
+        toggleUndo: (editor: TExtendedEditor) => void;
+    };
+}[];
+export default UndoPlugin;

package/dist/declarations/src/rich-text-body/divider.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Divider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default Divider;

package/dist/declarations/src/rich-text-body/dropdown.d.ts

@@ -0,0 +1,43 @@
+import type { ElementType, FunctionComponent } from 'react';
+declare type TDropdownProps = {
+    label: string;
+    isMulti: boolean;
+    value: string[] | string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    onChange?: (event?: unknown) => void;
+    components: {
+        Item: FunctionComponent<unknown>;
+        Label: FunctionComponent<unknown>;
+    };
+    options: Array<TItem>;
+};
+declare type TItem = {
+    value: string;
+    label: string;
+};
+declare const Dropdown: {
+    (props: TDropdownProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: {
+        components: {
+            Item: import("@emotion/styled").StyledComponent<{
+                theme?: import("@emotion/react").Theme | undefined;
+                as?: ElementType<any> | undefined;
+            } & {
+                isSelected?: boolean | undefined;
+                isIndeterminate?: boolean | undefined;
+                isStyleButton?: boolean | undefined;
+                isOpen?: boolean | undefined;
+                isDisabled?: boolean | undefined;
+                isReadOnly?: boolean | undefined;
+            }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+            Label: import("@emotion/styled").CreateStyledComponent<{
+                theme?: import("@emotion/react").Theme | undefined;
+                as?: ElementType<any> | undefined;
+            }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+        };
+        isMulti: boolean;
+    };
+};
+export default Dropdown;

package/dist/declarations/src/rich-text-body/dropdown.styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+declare type TDropdownStylesProps = {
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    isStyleButton?: boolean;
+    isOpen?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+};
+declare const DropdownItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TDropdownStylesProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const getButtonStyles: (props: TDropdownStylesProps) => (false | import("@emotion/utils").SerializedStyles | undefined)[];
+declare const DropdownContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { DropdownContainer, DropdownItem, getButtonStyles };

package/dist/declarations/src/rich-text-body/hidden-input.d.ts

@@ -0,0 +1,12 @@
+declare type THiddenInputProps = {
+    handleFocus: () => void;
+    isFocused: boolean;
+    id?: string;
+    disabled?: boolean;
+    readOnly: boolean;
+};
+declare const HiddenInput: {
+    (props: THiddenInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HiddenInput;

package/dist/declarations/src/rich-text-body/icons/generated/BoldReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const BoldIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BoldIcon;

package/dist/declarations/src/rich-text-body/icons/generated/ExpandFullReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const ExpandFullIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandFullIcon;

package/dist/declarations/src/rich-text-body/icons/generated/ItalicReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const ItalicIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ItalicIcon;

package/dist/declarations/src/rich-text-body/icons/generated/MoreStylesReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const MoreStylesIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MoreStylesIcon;

package/dist/declarations/src/rich-text-body/icons/generated/OrderedListReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const OrderedListIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default OrderedListIcon;

package/dist/declarations/src/rich-text-body/icons/generated/RedoReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const RedoIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default RedoIcon;

package/dist/declarations/src/rich-text-body/icons/generated/StrikethroughReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const StrikethroughIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default StrikethroughIcon;

package/dist/declarations/src/rich-text-body/icons/generated/SubscriptReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const SubscriptIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SubscriptIcon;

package/dist/declarations/src/rich-text-body/icons/generated/SuperscriptReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const SuperscriptIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SuperscriptIcon;

package/dist/declarations/src/rich-text-body/icons/generated/UnderlineReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const UnderlineIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default UnderlineIcon;

package/dist/declarations/src/rich-text-body/icons/generated/UndoReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const UndoIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default UndoIcon;

package/dist/declarations/src/rich-text-body/icons/generated/UnorderedListReact.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '@emotion/react';
+export declare type Props = {
+    color?: 'solid' | 'neutral60' | 'surface' | 'info' | 'primary' | 'primary40' | 'warning' | 'error';
+    size?: 'small' | 'medium' | 'big' | 'scale';
+};
+export declare type SVGProps = Props & {
+    className: string;
+};
+export declare const getIconStyles: (props: Props, theme: Theme) => import("@emotion/utils").SerializedStyles;
+declare const UnorderedListIcon: {
+    (props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default UnorderedListIcon;

package/dist/declarations/src/rich-text-body/icons/generated/index.d.ts

@@ -0,0 +1,12 @@
+export { default as BoldIcon } from './BoldReact';
+export { default as ExpandFullIcon } from './ExpandFullReact';
+export { default as ItalicIcon } from './ItalicReact';
+export { default as MoreStylesIcon } from './MoreStylesReact';
+export { default as OrderedListIcon } from './OrderedListReact';
+export { default as RedoIcon } from './RedoReact';
+export { default as StrikethroughIcon } from './StrikethroughReact';
+export { default as SubscriptIcon } from './SubscriptReact';
+export { default as SuperscriptIcon } from './SuperscriptReact';
+export { default as UnderlineIcon } from './UnderlineReact';
+export { default as UndoIcon } from './UndoReact';
+export { default as UnorderedListIcon } from './UnorderedListReact';

package/dist/declarations/src/rich-text-body/icons/index.d.ts

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

package/dist/declarations/src/rich-text-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HiddenInput } from './hidden-input';
+export { default as RichTextBody } from './rich-text-body';