{JSON.stringify(document, null, ' ')}
+ {string};
+}
diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/index.tsx b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/index.tsx
new file mode 100644
index 0000000..8eb9069
--- /dev/null
+++ b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/index.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { Box, Typography } from '@mui/material';
+
+import { TEditorBlock } from '../../../documents/editor/core';
+import { useEditorState } from '../../../documents/editor/EditorContext';
+
+import AvatarSidebarPanel from './input-panels/AvatarSidebarPanel';
+import ButtonSidebarPanel from './input-panels/ButtonSidebarPanel';
+import ColumnsContainerSidebarPanel from './input-panels/ColumnsContainerSidebarPanel';
+import ContainerSidebarPanel from './input-panels/ContainerSidebarPanel';
+import DividerSidebarPanel from './input-panels/DividerSidebarPanel';
+import EmailLayoutSidebarPanel from './input-panels/EmailLayoutSidebarPanel';
+import HeadingSidebarPanel from './input-panels/HeadingSidebarPanel';
+import HtmlSidebarPanel from './input-panels/HtmlSidebarPanel';
+import ImageSidebarPanel from './input-panels/ImageSidebarPanel';
+import SpacerSidebarPanel from './input-panels/SpacerSidebarPanel';
+import TextSidebarPanel from './input-panels/TextSidebarPanel';
+
+function renderMessage(val: string) {
+ return (
+ {JSON.stringify(block, null, ' ')};
+ }
+}
diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx
new file mode 100644
index 0000000..691ee40
--- /dev/null
+++ b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+
+import { AspectRatioOutlined } from '@mui/icons-material';
+import { ToggleButton } from '@mui/material';
+
+import { AvatarProps, AvatarPropsSchema } from '../../../../documents/blocks/Avatar';
+
+import BaseSidebarPanel from './helpers/BaseSidebarPanel';
+import { NullableColorInput } from './helpers/inputs/ColorInput';
+import RadioGroupInput from './helpers/inputs/RadioGroupInput';
+import SliderInput from './helpers/inputs/SliderInput';
+import TextInput from './helpers/inputs/TextInput';
+import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
+
+type AvatarSidebarPanelProps = {
+ data: AvatarProps;
+ setData: (v: AvatarProps) => void;
+};
+export default function AvatarSidebarPanel({ data, setData }: AvatarSidebarPanelProps) {
+ const [, setErrors] = useState