Add readonly RTE to sandbox. Add caption image for initial content.

app/src/sandbox/RTE-readonly/RichTextEditorDemo.module.scss

@@ -0,0 +1,5 @@
+.container {
+    width: 60vw;
+    max-width: 1024px;
+    margin: 24px auto;
+}

app/src/sandbox/RTE-readonly/RichTextEditorDemo.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+    SlateEditor,
+    defaultPlugins,
+    imagePlugin,
+    videoPlugin,
+    attachmentPlugin,
+    toDoListPlugin,
+    baseMarksPlugin,
+    linkPlugin,
+    iframePlugin,
+    notePlugin,
+    separatorPlugin,
+    uploadFilePlugin,
+    tablePlugin,
+    quotePlugin,
+    colorPlugin,
+    superscriptPlugin,
+    headerPlugin,
+    listPlugin,
+    placeholderPlugin,
+    codeBlockPlugin,
+    EditorValue,
+} from '@epam/uui-editor';
+import { svc } from '../../services';
+import { demoData } from '@epam/uui-docs';
+import css from './RichTextEditorDemo.module.scss';
+import { ErrorNotification, Text } from '@epam/uui';
+import { FileUploadResponse } from '@epam/uui-core';
+
+interface SlateEditorBasicExampleState {
+    value: EditorValue;
+}
+
+export class RichTextEditorDemoReadonly extends React.Component<any, SlateEditorBasicExampleState> {
+    state: SlateEditorBasicExampleState = {
+        value: demoData.slateInitialValue,
+    };
+
+    onChange = (value: EditorValue) => {
+        this.setState({ value: value });
+    };
+
+    uploadFile = (file: File): Promise<FileUploadResponse> => {
+        return svc.uuiApi.uploadFile('/upload/uploadFileMock', file, {})
+            .catch((res) => {
+                svc.uuiNotifications.show((props) =>
+                    <ErrorNotification { ...props }><Text>{ res.error.message }</Text></ErrorNotification>).catch(() => {});
+                return Promise.reject(res);
+            });
+    };
+
+    plugins = [
+        ...defaultPlugins,
+        ...baseMarksPlugin(),
+        headerPlugin(),
+        colorPlugin(),
+        superscriptPlugin(),
+        listPlugin(),
+        toDoListPlugin(),
+        quotePlugin(),
+        linkPlugin(),
+        notePlugin(),
+        uploadFilePlugin({ uploadFile: this.uploadFile }),
+        attachmentPlugin(),
+        imagePlugin(),
+        videoPlugin(),
+        iframePlugin(),
+        separatorPlugin(),
+        tablePlugin(),
+        placeholderPlugin({
+            items: [
+                {
+                    name: 'Name',
+                    field: 'name',
+                },
+                {
+                    name: 'Email',
+                    field: 'email',
+                },
+            ],
+        }),
+        codeBlockPlugin(),
+    ];
+
+    render() {
+        return (
+            <div className={ css.container }>
+                <SlateEditor
+                    value={ this.state.value }
+                    onValueChange={ this.onChange }
+                    autoFocus={ true }
+                    plugins={ this.plugins }
+                    placeholder="Add description"
+                    minHeight="none"
+                    isReadonly={ true }
+                />
+            </div>
+        );
+    }
+}

app/src/sandbox/SandboxPage.tsx

@@ -23,6 +23,7 @@ import { ReactQueryLocationsTable } from './reactQueryLocationsTable';
 import { ProjectTableDemo } from './editableTable';
 import { RtlExample } from './rtl/Rtl-example';
 import { DemoForm } from './rtl/form/DemoForm';
+import { RichTextEditorDemoReadonly } from './RTE-readonly/RichTextEditorDemo';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -41,7 +42,8 @@ export function SandboxPage() {
             { id: 'SkillsBatteryPopover', name: 'Skills', component: Skills },
             { id: 'TableCellsStylesSandbox', name: 'Table Cells/Rows styles', component: TableCellsStylesSandbox },
             { id: 'AdaptivePanel', name: 'Adaptive panel', component: AdaptivePanelDemo },
-            { id: 'RTEDemo', name: 'RTE Demo', component: RichTextEditorDemo },
+            { id: 'RTEDemo', name: 'RTE Contents', component: RichTextEditorDemo },
+            { id: 'RTE-readonly', name: 'RTE Readonly', component: RichTextEditorDemoReadonly },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
             { id: 'rtl-example', name: 'Rtl-example', component: RtlExample },