@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardField.tsx

@@ -1,320 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {AnyPrimitive, ErrorTypes, ICommonFieldsSettings} from '@leav/utils';
-import {useContext, useEffect, useMemo, useReducer} from 'react';
-import {useTranslation} from 'react-i18next';
-import styled from 'styled-components';
-import {ErrorDisplay} from '_ui/components';
-import CreationErrorContext from '_ui/components/RecordEdition/EditRecordModal/creationErrorContext';
-import {EditRecordReducerActionsTypes} from '_ui/components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '_ui/components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
-import {RecordFormElementsValueStandardValue} from '_ui/hooks/useGetRecordForm/useGetRecordForm';
-import {useRefreshFieldValues} from '_ui/hooks/useRefreshFieldValues';
-import {AttributeFormat, ValueDetailsValueFragment} from '_ui/_gqlTypes';
-import {useRecordEditionContext} from '../../hooks/useRecordEditionContext';
-import standardFieldReducer, {
-    computeInitialState,
-    IdValue,
-    newValueId,
-    StandardFieldReducerActionsTypes
-} from '../../reducers/standardFieldReducer/standardFieldReducer';
-import AddValueBtn from '../../shared/AddValueBtn';
-import DeleteAllValuesBtn from '../../shared/DeleteAllValuesBtn';
-import FieldFooter from '../../shared/FieldFooter';
-import ValuesVersionBtn from '../../shared/ValuesVersionBtn';
-import {APICallStatus, FieldScope, IFormElementProps} from '../../_types';
-import StandardFieldValue from './StandardFieldValue';
-
-const Wrapper = styled.div<{$metadataEdit: boolean}>`
-    margin-bottom: ${props => (props.$metadataEdit ? 0 : '1.5em')};
-`;
-
-function StandardField({
-    element,
-    onValueSubmit,
-    onValueDelete,
-    onDeleteMultipleValues,
-    metadataEdit = false
-}: IFormElementProps<ICommonFieldsSettings>): JSX.Element {
-    const {t} = useTranslation();
-
-    const {readOnly: isRecordReadOnly, record} = useRecordEditionContext();
-    const {state: editRecordState} = useEditRecordModalReducer();
-    const {state: editRecordModalState, dispatch: editRecordModalDispatch} = useEditRecordModalReducer();
-
-    const {fetchValues} = useRefreshFieldValues(
-        editRecordState.record?.library?.id,
-        element.attribute?.id,
-        editRecordState.record?.id
-    );
-
-    const isMultipleValues = element.attribute.multiple_values;
-    const {attribute} = element;
-    const creationErrors = useContext(CreationErrorContext);
-    const isInCreationMode = record === null;
-
-    const initialState = useMemo(
-        () =>
-            computeInitialState({
-                element,
-                record,
-                isRecordReadOnly,
-                formVersion: editRecordState.valuesVersion,
-                metadataEdit
-            }),
-        []
-    );
-
-    const [state, dispatch] = useReducer(standardFieldReducer, initialState);
-
-    useEffect(() => {
-        if (creationErrors[attribute.id]) {
-            // Affect error to each invalid value to display it on form
-            for (const fieldError of creationErrors[attribute.id]) {
-                const idValue = fieldError.id_value ?? null;
-
-                dispatch({
-                    type: StandardFieldReducerActionsTypes.SET_ERROR,
-                    idValue,
-                    error: fieldError.message
-                });
-            }
-        }
-    }, [creationErrors, attribute.id]);
-
-    const _handleSubmit = async (idValue: IdValue, valueToSave: AnyPrimitive) => {
-        const isSavingNewValue = idValue === newValueId;
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CLEAR_ERROR,
-            idValue
-        });
-
-        const valueVersion = state.values[state.activeScope].version;
-        const submitRes = await onValueSubmit(
-            [{value: valueToSave, idValue: isSavingNewValue ? null : idValue, attribute}],
-            valueVersion
-        );
-
-        if (submitRes.status === APICallStatus.SUCCESS) {
-            const submitResValue = submitRes.values[0] as ValueDetailsValueFragment;
-
-            let resultValue;
-            if (state.metadataEdit) {
-                const metadataValue =
-                    (submitResValue.metadata ?? []).find(({name}) => name === element.attribute.id)?.value ?? null;
-                resultValue = {
-                    id_value: null,
-                    created_at: null,
-                    modified_at: null,
-                    created_by: null,
-                    modified_by: null,
-                    version: null,
-                    raw_value: metadataValue.raw_value ?? metadataValue.value,
-                    value: metadataValue.value,
-                    metadata: null,
-                    attribute
-                };
-            } else {
-                resultValue = submitResValue;
-            }
-
-            dispatch({
-                type: StandardFieldReducerActionsTypes.UPDATE_AFTER_SUBMIT,
-                newValue: resultValue,
-                idValue
-            });
-
-            const newActiveValue = state.metadataEdit
-                ? {
-                      ...editRecordModalState.activeValue,
-                      value: {
-                          ...editRecordModalState.activeValue.value,
-                          metadata: [
-                              ...(editRecordModalState.activeValue?.value?.metadata ?? []),
-                              {
-                                  name: element.attribute.id,
-                                  value: {
-                                      ...resultValue,
-                                      version: null,
-                                      metadata: null
-                                  }
-                              }
-                          ]
-                      }
-                  }
-                : null;
-
-            editRecordModalDispatch({
-                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: newActiveValue
-            });
-
-            return;
-        }
-
-        let errorMessage = submitRes.error;
-        if (!errorMessage && submitRes.errors) {
-            const attributeError = (submitRes?.errors ?? []).filter(err => err.attribute === attribute.id)?.[0];
-
-            if (attributeError) {
-                errorMessage =
-                    attributeError.type === ErrorTypes.VALIDATION_ERROR
-                        ? attributeError.message
-                        : t(`errors.${attributeError.type}`);
-            }
-        }
-
-        dispatch({
-            type: StandardFieldReducerActionsTypes.SET_ERROR,
-            idValue,
-            error: errorMessage
-        });
-    };
-
-    const _handleDelete = async (idValue: IdValue) => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.UNEDIT_FIELD,
-            idValue
-        });
-
-        const deleteRes = await onValueDelete({id_value: idValue}, attribute.id);
-
-        if (deleteRes.status === APICallStatus.SUCCESS) {
-            dispatch({
-                type: StandardFieldReducerActionsTypes.UPDATE_AFTER_DELETE,
-                idValue
-            });
-
-            if (!isInCreationMode) {
-                const freshValues = await fetchValues(state.values[state.activeScope].version);
-
-                dispatch({
-                    type: StandardFieldReducerActionsTypes.REFRESH_VALUES,
-                    formVersion: editRecordState.valuesVersion,
-                    values: freshValues as RecordFormElementsValueStandardValue[]
-                });
-            }
-
-            return;
-        }
-
-        dispatch({
-            type: StandardFieldReducerActionsTypes.SET_ERROR,
-            idValue,
-            error: deleteRes.error
-        });
-    };
-
-    const _handleAddValue = () => {
-        editRecordModalDispatch({
-            type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-            value: {
-                attribute,
-                value: null
-            }
-        });
-
-        dispatch({
-            type: StandardFieldReducerActionsTypes.ADD_VALUE
-        });
-    };
-
-    const _handleScopeChange = (scope: FieldScope) => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CHANGE_VERSION_SCOPE,
-            scope
-        });
-    };
-
-    const _handleDeleteAllValues = async () => {
-        const deleteRes = await onDeleteMultipleValues(
-            attribute.id,
-            Object.values(state.values[state.activeScope].values).map(v => v.value),
-            null
-        );
-
-        if (deleteRes.status === APICallStatus.SUCCESS) {
-            dispatch({
-                type: StandardFieldReducerActionsTypes.UPDATE_AFTER_DELETE,
-                allDeleted: true
-            });
-
-            if (!isInCreationMode) {
-                const freshValues = await fetchValues(state.values[state.activeScope].version);
-
-                dispatch({
-                    type: StandardFieldReducerActionsTypes.REFRESH_VALUES,
-                    formVersion: editRecordState.valuesVersion,
-                    values: freshValues as RecordFormElementsValueStandardValue[]
-                });
-            }
-
-            return;
-        }
-
-        dispatch({
-            type: StandardFieldReducerActionsTypes.SET_ERROR,
-            idValue: state.values[state.activeScope].values[0]?.idValue,
-            error: deleteRes.error
-        });
-    };
-
-    if (!element.attribute) {
-        return <ErrorDisplay message={t('record_edition.missing_attribute')} />;
-    }
-
-    const valuesToDisplay = Object.values(state.values[state.activeScope].values).sort(
-        (valueA, valueB) => valueA.index - valueB.index
-    );
-    const hasValue = valuesToDisplay[0].idValue !== newValueId && valuesToDisplay[0].idValue !== null;
-    const canAddAnotherValue =
-        !state.isReadOnly && isMultipleValues && hasValue && attribute.format !== AttributeFormat.boolean;
-    const canDeleteAllValues = !state.isReadOnly && hasValue && valuesToDisplay.length > 1;
-    const isAttributeVersionable = attribute?.versions_conf?.versionable;
-
-    const versions = {
-        [FieldScope.CURRENT]: state.values[FieldScope.CURRENT]?.version ?? null,
-        [FieldScope.INHERITED]: state.values[FieldScope.INHERITED]?.version ?? null
-    };
-
-    return (
-        <Wrapper $metadataEdit={metadataEdit}>
-            {valuesToDisplay.map(value => (
-                <StandardFieldValue
-                    key={value.idValue}
-                    value={value}
-                    state={state}
-                    dispatch={dispatch}
-                    onSubmit={_handleSubmit}
-                    onDelete={_handleDelete}
-                    onScopeChange={_handleScopeChange}
-                />
-            ))}
-            {(canDeleteAllValues || canAddAnotherValue || attribute?.versions_conf?.versionable) && (
-                <FieldFooter
-                    bordered
-                    style={{
-                        flexDirection:
-                            canAddAnotherValue && !canDeleteAllValues && !isAttributeVersionable ? 'row' : 'row-reverse'
-                    }}
-                >
-                    <div>
-                        {isAttributeVersionable && (
-                            <ValuesVersionBtn
-                                basic
-                                versions={versions}
-                                activeScope={state.activeScope}
-                                onScopeChange={_handleScopeChange}
-                            />
-                        )}
-                        {canDeleteAllValues && <DeleteAllValuesBtn onDelete={_handleDeleteAllValues} />}
-                    </div>
-                    {canAddAnotherValue && <AddValueBtn activeScope={state.activeScope} onClick={_handleAddValue} />}
-                </FieldFooter>
-            )}
-        </Wrapper>
-    );
-}
-
-export default StandardField;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/CheckboxInput.tsx

@@ -1,26 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Checkbox} from 'antd';
-import {CheckboxChangeEvent} from 'antd/lib/checkbox';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-
-function CheckboxInput({state, fieldValue, onSubmit}: IStandardInputProps): JSX.Element {
-    const _handleCheckboxChange = (e: CheckboxChangeEvent) => {
-        onSubmit(String(e.target.checked));
-    };
-
-    const {value} = fieldValue;
-
-    return (
-        <Checkbox
-            className="nested-input"
-            disabled={state.isReadOnly}
-            checked={!!value?.value}
-            indeterminate={typeof value?.value !== 'boolean'}
-            onChange={_handleCheckboxChange}
-        />
-    );
-}
-
-export default CheckboxInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/ColorInput.tsx

@@ -1,38 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {ColorPicker} from 'antd';
-import {Color} from 'antd/es/color-picker';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-
-function ColorInput({state, fieldValue, onChange, onFocus}: IStandardInputProps): JSX.Element {
-    const {editingValue} = fieldValue;
-    const colorValue = '#' + editingValue.toString();
-
-    const _handleColorChange = (value: Color) => {
-        onChange(value.toHex().toUpperCase());
-    };
-    const colorPickerStyle: React.CSSProperties = {
-        height: fieldValue.index ? '44px' : '54px',
-        width: '100%',
-        justifyContent: 'left',
-        paddingTop: fieldValue.index ? '4px' : '14px',
-        paddingLeft: '15px'
-    };
-
-    return (
-        <ColorPicker
-            showText
-            disabledAlpha
-            disabled={state.isReadOnly}
-            value={colorValue}
-            style={colorPickerStyle}
-            open={fieldValue.isEditing}
-            size="small"
-            onChangeComplete={_handleColorChange}
-            onOpenChange={onFocus}
-        />
-    );
-}
-
-export default ColorInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/DateInput.tsx

@@ -1,62 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {IFormDateFieldSettings} from '@leav/utils';
-import {DatePicker, Input} from 'antd';
-import dayjs from 'dayjs';
-import {themeVars} from '_ui/antdTheme';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {RecordFormAttributeStandardAttributeFragment} from '_ui/_gqlTypes';
-
-function DateInput({state, fieldValue, onFocus, onSubmit, settings}: IStandardInputProps): JSX.Element {
-    const {editingValue} = fieldValue;
-    const {i18n} = useSharedTranslation();
-
-    const attribute = state.formElement.attribute as RecordFormAttributeStandardAttributeFragment;
-    const isValuesListEnabled = !!attribute?.values_list?.enable;
-    const isValuesListOpen = !!attribute?.values_list?.allowFreeEntry;
-
-    const _handleDateChange = (selectedDate: dayjs.Dayjs) => {
-        const dateToSave = selectedDate ? String(selectedDate.unix()) : null;
-        onSubmit(dateToSave);
-    };
-
-    const dateValue = editingValue ? dayjs(Number(editingValue) * 1000) : null;
-
-    // If we have a values list, picker must be on top to keep list readable
-    const pickerPosition = isValuesListEnabled ? {points: ['bl', 'tl'], offset: [0, -1]} : null;
-
-    return !isValuesListEnabled || isValuesListOpen ? (
-        <DatePicker
-            className="field-wrapper"
-            data-testid="datepicker"
-            disabled={state.isReadOnly}
-            picker="date"
-            onChange={_handleDateChange}
-            value={dateValue}
-            autoFocus
-            defaultOpen
-            showTime={!!(settings as IFormDateFieldSettings).withTime}
-            onOk={_handleDateChange}
-            popupStyle={{background: themeVars.defaultBg}}
-            style={{background: themeVars.defaultBg, width: '100%'}}
-            allowClear={false}
-            dropdownAlign={pickerPosition}
-        />
-    ) : (
-        <Input
-            key="editing"
-            className={`field-wrapper ${editingValue ? 'has-value' : ''}`}
-            value={
-                editingValue ? new Intl.DateTimeFormat(i18n.language).format(new Date(Number(editingValue) * 1000)) : ''
-            }
-            onFocus={onFocus}
-            disabled={true}
-            allowClear
-            autoFocus
-        />
-    );
-}
-
-export default DateInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/DateRangeInput.tsx

@@ -1,67 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {IDateRangeValue, IFormDateFieldSettings} from '@leav/utils';
-import {DatePicker, Input} from 'antd';
-import dayjs from 'dayjs';
-import {themeVars} from '_ui/antdTheme';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {RecordFormAttributeStandardAttributeFragment} from '_ui/_gqlTypes';
-import {stringifyDateRangeValue} from '_ui/_utils';
-
-function DateRangeInput({state, fieldValue, onFocus, onSubmit, settings}: IStandardInputProps): JSX.Element {
-    const {editingValue, displayValue} = fieldValue;
-    const {t} = useSharedTranslation();
-
-    const attribute = state.formElement.attribute as RecordFormAttributeStandardAttributeFragment;
-    const isValuesListEnabled = !!attribute?.values_list?.enable;
-    const isValuesListOpen = !!attribute?.values_list?.allowFreeEntry;
-
-    const _handleDateChange = (selectedDates: [dayjs.Dayjs, dayjs.Dayjs]) => {
-        const [dateFrom, dateTo] = selectedDates;
-        const dateToSave = selectedDates ? {from: String(dateFrom.unix()), to: String(dateTo.unix())} : null;
-        onSubmit(dateToSave);
-    };
-
-    const editingRangeValue = editingValue as IDateRangeValue;
-    const rangeValue: [dayjs.Dayjs, dayjs.Dayjs] = editingRangeValue
-        ? [dayjs(Number(editingRangeValue.from) * 1000), dayjs(Number(editingRangeValue.to) * 1000)]
-        : null;
-
-    // If we have a values list, picker must be on top to keep list readable
-    const pickerPosition = isValuesListEnabled ? {points: ['bl', 'tl'], offset: [0, -1]} : null;
-
-    const rangeDisplayValue = displayValue as IDateRangeValue;
-
-    return !isValuesListEnabled || isValuesListOpen ? (
-        <DatePicker.RangePicker
-            className="field-wrapper"
-            data-testid="datepicker"
-            disabled={state.isReadOnly}
-            picker="date"
-            onChange={_handleDateChange}
-            value={rangeValue}
-            autoFocus
-            defaultOpen
-            showTime={!!(settings as IFormDateFieldSettings).withTime}
-            onOk={_handleDateChange}
-            popupStyle={{background: themeVars.defaultBg}}
-            style={{background: themeVars.defaultBg, width: '100%'}}
-            allowClear={false}
-            dropdownAlign={pickerPosition}
-        />
-    ) : (
-        <Input
-            key="editing"
-            className={`field-wrapper ${editingValue ? 'has-value' : ''}`}
-            value={rangeDisplayValue.from && rangeDisplayValue.to ? stringifyDateRangeValue(rangeDisplayValue, t) : ''}
-            onFocus={onFocus}
-            disabled={true}
-            allowClear
-            autoFocus
-        />
-    );
-}
-
-export default DateRangeInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/EncryptedInput.tsx

@@ -1,34 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Input, InputRef} from 'antd';
-import {MutableRefObject} from 'react';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-
-function EncryptedInput({state, fieldValue, onChange, onPressEnter, inputRef}: IStandardInputProps): JSX.Element {
-    const {editingValue} = fieldValue;
-    const _handleChange = e => {
-        onChange(e.target.value);
-    };
-
-    const _handleKeyPress = e => {
-        if (e.key === 'Enter') {
-            onPressEnter();
-        }
-    };
-
-    return (
-        <Input.Password
-            className="nested-input"
-            ref={inputRef as MutableRefObject<InputRef>}
-            value={String(editingValue)}
-            onChange={_handleChange}
-            onKeyPress={_handleKeyPress}
-            disabled={state.isReadOnly}
-            autoFocus
-            data-testid="encrypted-input"
-        />
-    );
-}
-
-export default EncryptedInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/NumberInput.tsx

@@ -1,53 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Input, InputRef} from 'antd';
-import {ChangeEvent, MutableRefObject} from 'react';
-import styled from 'styled-components';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-
-const StyledInput = styled(Input)`
-    // Remove arrows on number input
-    && {
-        input {
-            -moz-appearance: textfield;
-            ::-webkit-inner-spin-button {
-                -webkit-appearance: none;
-                margin: 0;
-            }
-        }
-    }
-`;
-
-function NumberInput({state, fieldValue, onFocus, onPressEnter, onChange, inputRef}: IStandardInputProps): JSX.Element {
-    const {editingValue} = fieldValue;
-
-    const _handleNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
-        onChange(String(e.target.value));
-    };
-
-    const _handlePressEnter = () => {
-        onPressEnter();
-    };
-
-    const editingValueNumber = Number(editingValue);
-
-    const inputValue = editingValue !== '' ? (editingValueNumber as number) : '';
-
-    return (
-        <StyledInput
-            type="number"
-            ref={inputRef as MutableRefObject<InputRef>}
-            className="nested-input"
-            value={inputValue}
-            onFocus={onFocus}
-            onChange={_handleNumberChange}
-            onPressEnter={_handlePressEnter}
-            disabled={state.isReadOnly}
-            allowClear
-            autoFocus
-        />
-    );
-}
-
-export default NumberInput;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/Inputs/RichTextEditorInput.tsx

@@ -1,67 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import InlineEditor from '@ckeditor/ckeditor5-build-inline';
-import {CKEditor} from '@ckeditor/ckeditor5-react';
-import styled from 'styled-components';
-import {IStandardInputProps} from '_ui/components/RecordEdition/EditRecord/_types';
-
-const CkeditorComponent = styled.div<{$isEditing: boolean}>`
-    border-width: 1px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    background: ${props => (props.$isEditing ? 'white' : '')};
-    border-radius: 5px;
-    height: 100%;
-    position: relative;
-    z-index: 1;
-`;
-
-function RichTextEditorInput({state, fieldValue, onFocus, onChange}: IStandardInputProps): JSX.Element {
-    const {isEditing, editingValue} = fieldValue;
-
-    const _handleOnChange = (event, editor) => {
-        onChange(editor.getData());
-    };
-
-    const _handleOnFocus = (event, editor) => {
-        onFocus();
-    };
-
-    const configToolBar = {
-        toolbar: {
-            items: [
-                'undo',
-                'redo',
-                '|',
-                'heading',
-                '|',
-                'bold',
-                'italic',
-                '|',
-                'link',
-                'blockQuote',
-                'insertTable',
-                '|',
-                'bulletedList',
-                'numberedList',
-                'outdent',
-                'indent'
-            ]
-        }
-    };
-
-    return (
-        <CkeditorComponent data-testid="ckeditor" $isEditing={isEditing}>
-            <CKEditor
-                editor={InlineEditor}
-                config={configToolBar}
-                data={editingValue.toString()}
-                onChange={_handleOnChange}
-                onFocus={_handleOnFocus}
-            />
-        </CkeditorComponent>
-    );
-}
-
-export default RichTextEditorInput;