@commercetools-uikit/localized-rich-text-input 13.0.2 → 14.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -45
- package/dist/commercetools-uikit-localized-rich-text-input.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-localized-rich-text-input.cjs.dev.js +179 -175
- package/dist/commercetools-uikit-localized-rich-text-input.cjs.prod.js +78 -53
- package/dist/commercetools-uikit-localized-rich-text-input.esm.js +178 -173
- package/dist/declarations/src/editor.d.ts +48 -0
- package/dist/declarations/src/editor.styles.d.ts +15 -0
- package/dist/declarations/src/editor.types.d.ts +103 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/localized-rich-text-input.d.ts +55 -0
- package/dist/declarations/src/required-value-error-message.d.ts +5 -0
- package/dist/declarations/src/rich-text-input.d.ts +65 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +20 -22
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { type ReactNode, type ReactElement } from 'react';
|
|
2
|
+
import type { TEditor } from './editor.types';
|
|
3
|
+
export declare type TEditorProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
id?: string;
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
isDisabled?: boolean;
|
|
8
|
+
isReadOnly?: boolean;
|
|
9
|
+
hasWarning?: boolean;
|
|
10
|
+
hasError?: boolean;
|
|
11
|
+
editor?: TEditor;
|
|
12
|
+
error?: ReactNode;
|
|
13
|
+
warning?: ReactNode;
|
|
14
|
+
defaultExpandMultilineText: boolean;
|
|
15
|
+
toggleLanguage: (language: string) => void;
|
|
16
|
+
language: string;
|
|
17
|
+
showExpandIcon: boolean;
|
|
18
|
+
onClickExpand?: () => boolean;
|
|
19
|
+
hasLanguagesControl?: boolean;
|
|
20
|
+
};
|
|
21
|
+
declare const Editor: {
|
|
22
|
+
(props: TEditorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
23
|
+
displayName: string;
|
|
24
|
+
};
|
|
25
|
+
declare type TOptions = {
|
|
26
|
+
language: string;
|
|
27
|
+
error?: ReactNode;
|
|
28
|
+
warning?: ReactNode;
|
|
29
|
+
hasWarning?: boolean;
|
|
30
|
+
hasError?: boolean;
|
|
31
|
+
defaultExpandMultilineText: boolean;
|
|
32
|
+
toggleLanguage: (language: string) => void;
|
|
33
|
+
isOpen: boolean;
|
|
34
|
+
showExpandIcon: boolean;
|
|
35
|
+
onClickExpand?: () => boolean;
|
|
36
|
+
hasLanguagesControl?: boolean;
|
|
37
|
+
};
|
|
38
|
+
export declare type TRenderEditorProps = {
|
|
39
|
+
id?: string;
|
|
40
|
+
name?: string;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
readOnly?: boolean;
|
|
43
|
+
editor?: TEditor;
|
|
44
|
+
options: TOptions;
|
|
45
|
+
};
|
|
46
|
+
export declare type TRenderEditor = (props: TRenderEditorProps, editor: TEditor, next: () => ReactElement) => ReturnType<typeof Editor>;
|
|
47
|
+
declare const renderEditor: TRenderEditor;
|
|
48
|
+
export default renderEditor;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { TEditorProps } from './editor';
|
|
3
|
+
declare const EditorLanguageLabel: import("@emotion/styled").StyledComponent<{
|
|
4
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
+
as?: import("react").ElementType<any> | undefined;
|
|
6
|
+
}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
|
|
7
|
+
declare const EditorWrapper: import("@emotion/styled").StyledComponent<{
|
|
8
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
+
as?: import("react").ElementType<any> | undefined;
|
|
10
|
+
} & Pick<TEditorProps, "isDisabled" | "isReadOnly">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
|
+
declare const ToggleButtonWrapper: import("@emotion/styled").StyledComponent<{
|
|
12
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
13
|
+
as?: import("react").ElementType<any> | undefined;
|
|
14
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
15
|
+
export { EditorLanguageLabel, EditorWrapper, ToggleButtonWrapper };
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
declare type TSize = {
|
|
3
|
+
size: number;
|
|
4
|
+
};
|
|
5
|
+
declare type TData = {
|
|
6
|
+
get: (key: string) => TSize;
|
|
7
|
+
};
|
|
8
|
+
declare type TValue = {
|
|
9
|
+
blocks: TBlocks;
|
|
10
|
+
document: TDocument;
|
|
11
|
+
selection: {
|
|
12
|
+
isFocused: boolean;
|
|
13
|
+
};
|
|
14
|
+
activeMarks: {
|
|
15
|
+
some: (ascertMarkType: (mark: TMark) => boolean) => void;
|
|
16
|
+
} | TMark[];
|
|
17
|
+
data: TData;
|
|
18
|
+
};
|
|
19
|
+
declare type TWrapBlock = {
|
|
20
|
+
wrapBlock: (blockTag: string) => void;
|
|
21
|
+
};
|
|
22
|
+
declare type TBlocks = {
|
|
23
|
+
size?: number;
|
|
24
|
+
some: (block: unknown) => boolean | void;
|
|
25
|
+
first: () => {
|
|
26
|
+
key: string;
|
|
27
|
+
type: string;
|
|
28
|
+
};
|
|
29
|
+
map: (node: ReactNode) => {
|
|
30
|
+
toArray: () => string[];
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
declare type TNodes = {
|
|
34
|
+
map: (node: ReactNode) => {
|
|
35
|
+
toArray: () => string[];
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
declare type TDocument = {
|
|
39
|
+
getClosest: (block: {
|
|
40
|
+
key: unknown;
|
|
41
|
+
}, closest: (parent: {
|
|
42
|
+
type: string;
|
|
43
|
+
}) => boolean) => boolean;
|
|
44
|
+
getParent?: (parentParam: string) => {
|
|
45
|
+
type: string;
|
|
46
|
+
};
|
|
47
|
+
text?: string;
|
|
48
|
+
nodes?: TNodes;
|
|
49
|
+
};
|
|
50
|
+
declare type TNodeTextsResult = [{
|
|
51
|
+
key: string;
|
|
52
|
+
text: string;
|
|
53
|
+
}, string];
|
|
54
|
+
export declare type TMark = {
|
|
55
|
+
type: string;
|
|
56
|
+
};
|
|
57
|
+
export declare type TNode = {
|
|
58
|
+
texts: (nodeParam?: Record<string, string>) => TNodeTextsResult[];
|
|
59
|
+
};
|
|
60
|
+
export declare type THotKeyOptions = {
|
|
61
|
+
hotkey: string;
|
|
62
|
+
};
|
|
63
|
+
export declare type TEditor = {
|
|
64
|
+
focus: () => void;
|
|
65
|
+
value: TValue;
|
|
66
|
+
setBlocks: (blockTag: string) => {
|
|
67
|
+
unwrapBlock: (blockTag: string) => {
|
|
68
|
+
unwrapBlock: (blockTag: string) => void;
|
|
69
|
+
};
|
|
70
|
+
wrapBlock: (blockTag: string) => void;
|
|
71
|
+
};
|
|
72
|
+
unwrapBlock: (blockTag: string) => TWrapBlock;
|
|
73
|
+
hasPlaceholder?: boolean;
|
|
74
|
+
query?: (when: string | (() => void), node: TNode) => {
|
|
75
|
+
next: () => void;
|
|
76
|
+
};
|
|
77
|
+
props: {
|
|
78
|
+
options: {
|
|
79
|
+
placeholder: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
undo?: () => void;
|
|
83
|
+
redo?: () => void;
|
|
84
|
+
toggleRedo?: () => void;
|
|
85
|
+
selection: {
|
|
86
|
+
isFocused: boolean;
|
|
87
|
+
};
|
|
88
|
+
hasUndos: () => boolean;
|
|
89
|
+
hasRedos: () => boolean;
|
|
90
|
+
toggleMark?: (value: unknown) => void;
|
|
91
|
+
hasBoldMark: () => boolean;
|
|
92
|
+
toggleBoldMark: () => void;
|
|
93
|
+
hasItalicMark: () => boolean;
|
|
94
|
+
toggleItalicMark: () => boolean;
|
|
95
|
+
hasUnderlinedMark: () => boolean;
|
|
96
|
+
toggleUnderlinedMark: () => void;
|
|
97
|
+
hasNumberedListBlock: () => boolean;
|
|
98
|
+
toggleNumberedListBlock: () => void;
|
|
99
|
+
hasBulletedListBlock: () => boolean;
|
|
100
|
+
toggleBulletedListBlock: () => void;
|
|
101
|
+
toggleUndo: () => void;
|
|
102
|
+
};
|
|
103
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
declare type TErrors = Record<string, string>;
|
|
3
|
+
declare type TWarnings = Record<string, ReactNode>;
|
|
4
|
+
declare type TEvent = {
|
|
5
|
+
target: {
|
|
6
|
+
id?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
language?: string;
|
|
9
|
+
value?: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
declare type TLocalizedRichTextInputProps = {
|
|
13
|
+
id?: string;
|
|
14
|
+
name?: string;
|
|
15
|
+
value: Record<string, string>;
|
|
16
|
+
onChange?: (event: TEvent) => void;
|
|
17
|
+
selectedLanguage: string;
|
|
18
|
+
onBlur?: (event: TEvent) => void;
|
|
19
|
+
onFocus?: (event: TEvent) => void;
|
|
20
|
+
defaultExpandMultilineText?: boolean;
|
|
21
|
+
hideLanguageExpansionControls?: boolean;
|
|
22
|
+
defaultExpandLanguages?: boolean;
|
|
23
|
+
isDisabled?: boolean;
|
|
24
|
+
isReadOnly?: boolean;
|
|
25
|
+
placeholder?: Record<string, string>;
|
|
26
|
+
horizontalConstraint?: 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
27
|
+
hasError?: boolean;
|
|
28
|
+
hasWarning?: boolean;
|
|
29
|
+
errors?: TErrors;
|
|
30
|
+
warnings?: TWarnings;
|
|
31
|
+
showExpandIcon: boolean;
|
|
32
|
+
onClickExpand?: () => boolean;
|
|
33
|
+
};
|
|
34
|
+
declare const LocalizedRichTextInput: {
|
|
35
|
+
(props: TLocalizedRichTextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
RequiredValueErrorMessage: {
|
|
38
|
+
(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
39
|
+
displayName: string;
|
|
40
|
+
};
|
|
41
|
+
getId: (idPrefix?: string | undefined, language?: string | undefined) => string | undefined;
|
|
42
|
+
getName: (namePrefix?: string | undefined, language?: string | undefined) => string | undefined;
|
|
43
|
+
defaultProps: Pick<TLocalizedRichTextInputProps, "horizontalConstraint" | "showExpandIcon">;
|
|
44
|
+
createLocalizedString: (languages: string[], existingTranslations?: {
|
|
45
|
+
[x: string]: string;
|
|
46
|
+
}) => Record<string, unknown>;
|
|
47
|
+
isEmpty: (localizedHtmlValue: Record<string, string | null | undefined> | undefined) => boolean;
|
|
48
|
+
omitEmptyTranslations: (localizedString: {
|
|
49
|
+
[x: string]: string;
|
|
50
|
+
}) => Record<string, unknown>;
|
|
51
|
+
isTouched: (touched?: {
|
|
52
|
+
[locale: string]: boolean;
|
|
53
|
+
} | undefined) => boolean;
|
|
54
|
+
};
|
|
55
|
+
export default LocalizedRichTextInput;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { PureComponent, type ReactNode } from 'react';
|
|
2
|
+
import { richTextPlugins, html } from '@commercetools-uikit/rich-text-utils';
|
|
3
|
+
import { TRenderEditorProps, TRenderEditor } from './editor';
|
|
4
|
+
declare type TSlateReactEditorProps = {
|
|
5
|
+
id?: TRichTextInputProps['id'];
|
|
6
|
+
name?: TRichTextInputProps['name'];
|
|
7
|
+
onFocus?: TEventHook<FocusEvent>;
|
|
8
|
+
onBlur?: TEventHook<FocusEvent>;
|
|
9
|
+
disabled?: TRichTextInputProps['isDisabled'];
|
|
10
|
+
readOnly?: TRichTextInputProps['isReadOnly'];
|
|
11
|
+
value: ReturnType<typeof html.deserialize>;
|
|
12
|
+
options: TRenderEditorProps['options'];
|
|
13
|
+
onChange?: TOnChangeFn;
|
|
14
|
+
plugins: typeof richTextPlugins;
|
|
15
|
+
renderEditor: TRenderEditor;
|
|
16
|
+
};
|
|
17
|
+
declare const Editor: (props: TSlateReactEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare type TEvent = {
|
|
19
|
+
target: {
|
|
20
|
+
id?: string;
|
|
21
|
+
name?: string;
|
|
22
|
+
language?: string;
|
|
23
|
+
value?: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
declare type TEventHook<T = Event> = (event: T, editor: typeof Editor, next: () => unknown) => unknown;
|
|
27
|
+
declare type TOnChangeParam = {
|
|
28
|
+
operations: unknown;
|
|
29
|
+
value: ReturnType<typeof html.deserialize>;
|
|
30
|
+
};
|
|
31
|
+
declare type TOnChangeFn = (change: TOnChangeParam) => unknown;
|
|
32
|
+
declare type TRichTextInputProps = {
|
|
33
|
+
defaultExpandMultilineText?: boolean;
|
|
34
|
+
hasError?: boolean;
|
|
35
|
+
hasWarning?: boolean;
|
|
36
|
+
id?: string;
|
|
37
|
+
name?: string;
|
|
38
|
+
placeholder: string;
|
|
39
|
+
isDisabled?: boolean;
|
|
40
|
+
isReadOnly?: boolean;
|
|
41
|
+
onChange?: (event: TEvent) => void;
|
|
42
|
+
onBlur?: (event: TEvent) => void;
|
|
43
|
+
onFocus?: (event: TEvent) => void;
|
|
44
|
+
value: string;
|
|
45
|
+
showExpandIcon: boolean;
|
|
46
|
+
onClickExpand?: () => boolean;
|
|
47
|
+
hasLanguagesControl?: boolean;
|
|
48
|
+
language: string;
|
|
49
|
+
isOpen: boolean;
|
|
50
|
+
toggleLanguage: (language: string) => void;
|
|
51
|
+
warning?: ReactNode;
|
|
52
|
+
error?: string;
|
|
53
|
+
};
|
|
54
|
+
declare class RichTextInput extends PureComponent<TRichTextInputProps> {
|
|
55
|
+
static defaultProps: Pick<TRichTextInputProps, 'defaultExpandMultilineText' | 'placeholder'>;
|
|
56
|
+
static displayName: string;
|
|
57
|
+
serializedValue: string;
|
|
58
|
+
internalSlateValue: import("slate").Value;
|
|
59
|
+
componentDidUpdate(): void;
|
|
60
|
+
onValueChange: TOnChangeFn;
|
|
61
|
+
onBlur: TEventHook<FocusEvent>;
|
|
62
|
+
onFocus: TEventHook<FocusEvent>;
|
|
63
|
+
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
64
|
+
}
|
|
65
|
+
export default RichTextInput;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/localized-rich-text-input",
|
|
3
3
|
"description": "A controlled text input component for localized rich text input with validation states.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "14.0.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"directory": "packages/components/inputs/localized-rich-text-input"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": ["javascript", "design
|
|
12
|
+
"keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
@@ -19,32 +19,30 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-localized-rich-text-input.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.17.2",
|
|
23
|
-
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/collapsible-motion": "
|
|
25
|
-
"@commercetools-uikit/constraints": "
|
|
26
|
-
"@commercetools-uikit/design-system": "
|
|
27
|
-
"@commercetools-uikit/flat-button": "
|
|
28
|
-
"@commercetools-uikit/hooks": "
|
|
29
|
-
"@commercetools-uikit/icons": "
|
|
30
|
-
"@commercetools-uikit/input-utils": "
|
|
31
|
-
"@commercetools-uikit/localized-utils": "
|
|
32
|
-
"@commercetools-uikit/messages": "
|
|
33
|
-
"@commercetools-uikit/rich-text-utils": "
|
|
34
|
-
"@commercetools-uikit/spacings-inline": "
|
|
35
|
-
"@commercetools-uikit/spacings-stack": "
|
|
36
|
-
"@commercetools-uikit/text": "
|
|
37
|
-
"@commercetools-uikit/tooltip": "
|
|
38
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "^7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
+
"@commercetools-uikit/collapsible-motion": "14.0.0",
|
|
25
|
+
"@commercetools-uikit/constraints": "14.0.0",
|
|
26
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
27
|
+
"@commercetools-uikit/flat-button": "14.0.0",
|
|
28
|
+
"@commercetools-uikit/hooks": "14.0.0",
|
|
29
|
+
"@commercetools-uikit/icons": "14.0.0",
|
|
30
|
+
"@commercetools-uikit/input-utils": "14.0.0",
|
|
31
|
+
"@commercetools-uikit/localized-utils": "14.0.0",
|
|
32
|
+
"@commercetools-uikit/messages": "14.0.0",
|
|
33
|
+
"@commercetools-uikit/rich-text-utils": "14.0.0",
|
|
34
|
+
"@commercetools-uikit/spacings-inline": "14.0.0",
|
|
35
|
+
"@commercetools-uikit/spacings-stack": "14.0.0",
|
|
36
|
+
"@commercetools-uikit/text": "14.0.0",
|
|
37
|
+
"@commercetools-uikit/tooltip": "14.0.0",
|
|
38
|
+
"@commercetools-uikit/utils": "14.0.0",
|
|
39
39
|
"@emotion/react": "^11.4.0",
|
|
40
40
|
"@emotion/styled": "^11.3.0",
|
|
41
|
-
"common-tags": "1.8.2",
|
|
42
41
|
"downshift": "6.1.7",
|
|
43
42
|
"immutable": "4.0.0",
|
|
44
43
|
"is-hotkey": "0.2.0",
|
|
45
44
|
"lodash": "4.17.21",
|
|
46
45
|
"prop-types": "15.8.1",
|
|
47
|
-
"react-required-if": "1.0.3",
|
|
48
46
|
"react-textarea-autosize": "8.3.3",
|
|
49
47
|
"slate": "0.47.9",
|
|
50
48
|
"slate-html-serializer": "0.8.13",
|
|
@@ -52,7 +50,7 @@
|
|
|
52
50
|
},
|
|
53
51
|
"devDependencies": {
|
|
54
52
|
"react": "17.0.2",
|
|
55
|
-
"react-intl": "5.24.6"
|
|
53
|
+
"react-intl": "^5.24.6"
|
|
56
54
|
},
|
|
57
55
|
"peerDependencies": {
|
|
58
56
|
"react": "17.x",
|