@progress/kendo-themes-html 14.5.1-dev.7 → 14.6.0

package/src/imageeditor/templates/imageeditor-filters.tsx

@@ -0,0 +1,98 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail } from "..";
+import { Button } from "../../button";
+import { Form, FormField } from "../../form";
+
+const filtersSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" selected aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+export const filterPresets: { [key: string]: { label: string } } = {
+    "none": { label: "None" },
+    "black-white": { label: "Black and White" },
+    "greyscale": { label: "Greyscale" },
+    "sepia": { label: "Sepia" },
+    "warm": { label: "Warm" },
+    "cold": { label: "Cold" },
+    "chrome": { label: "Chrome" },
+    "invert": { label: "Invert" }
+};
+
+const FilterPreview = ({ presetKey, selected }: { presetKey: string; selected: boolean }) => {
+    const preset = filterPresets[presetKey];
+
+    return (
+        <ImageEditorOptionPreview key={presetKey} selected={selected} aria-label={preset.label}>
+            <ImageEditorPreviewThumbnail label={preset.label} />
+        </ImageEditorOptionPreview>
+    );
+};
+
+export const ImageEditorFilters = ({ preset = "greyscale", ...props }: any) => (
+    <ImageEditor
+        sidebarItems={filtersSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Filters" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        editor={
+                            <div className="k-imageeditor-option-grid">
+                                <FilterPreview presetKey="none" selected={preset === "none"} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Monochrome"
+                        editor={
+                            <div className="k-imageeditor-option-grid">
+                                <FilterPreview presetKey="black-white" selected={preset === "black-white"} />
+                                <FilterPreview presetKey="greyscale" selected={preset === "greyscale"} />
+                                <FilterPreview presetKey="sepia" selected={preset === "sepia"} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Color Temperature & Mood"
+                        editor={
+                            <div className="k-imageeditor-option-grid">
+                                <FilterPreview presetKey="warm" selected={preset === "warm"} />
+                                <FilterPreview presetKey="cold" selected={preset === "cold"} />
+                                <FilterPreview presetKey="chrome" selected={preset === "chrome"} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Color Reversal"
+                        editor={
+                            <div className="k-imageeditor-option-grid">
+                                <FilterPreview presetKey="invert" selected={preset === "invert"} />
+                            </div>
+                        }
+                    />
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            </>
+        }
+        {...props} />
+);

package/src/imageeditor/templates/imageeditor-frames.tsx

@@ -0,0 +1,180 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { DropdownList } from "../../dropdownlist";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { Slider } from "../../slider";
+
+const framesSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" selected aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+const FrameSlider = ({ id, label, value }: { id: string; label: string; value: number }) => (
+    <FormField
+        label={label}
+        editorId={id}
+        editor={
+            <div className="k-imageeditor-field-row">
+                <Slider
+                    style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": value } as React.CSSProperties}
+                    aria-label={label}
+                    showButtons={false}
+                    showTicks={false}
+                    value={value}
+                    min={0}
+                    max={100}
+                />
+                <NumericTextbox
+                    id={id}
+                    style={{ width: "80px", flex: "none" }}
+                    showClearButton={false}
+                    showSpinButton={false}
+                    value={String(value)}
+                />
+            </div>
+        }
+    />
+);
+
+const frameStylePreviews: { [key: string]: React.CSSProperties } = {
+    none: {},
+    single: { border: "3px dashed #b0e855", borderRadius: "4px" },
+    multiple: { border: "3px dashed #b0e855", borderRadius: "4px" }
+};
+
+const FrameStylePreview = ({ styleKey, label, selected }: { styleKey: string; label: string; selected: boolean }) => (
+    <ImageEditorOptionPreview selected={selected} aria-label={label}>
+        <ImageEditorPreviewThumbnail label={label} style={frameStylePreviews[styleKey]}>
+            {styleKey === "multiple" && (
+                <span style={{
+                    position: "absolute",
+                    inset: "6px",
+                    border: "3px dashed #b0e855",
+                    borderRadius: "1px",
+                    boxSizing: "border-box",
+                    pointerEvents: "none"
+                }}></span>
+            )}
+        </ImageEditorPreviewThumbnail>
+    </ImageEditorOptionPreview>
+);
+
+export const ImageEditorFrames = ({
+    style = "single",
+    imageRoundness = 24,
+    framesAmount = 3,
+    frameThickness = 12,
+    frameRoundness = style === "multiple" ? 40 : 16,
+    offset = 12,
+    strokeColor = "#b0e855",
+    ...props
+}: any) => {
+    const framePadding = 0;
+
+    return (
+        <ImageEditor
+            sidebarItems={framesSidebarItems}
+            actionPane={
+                <ImageEditorPane title="Frame" actions={
+                    <>
+                        <Button>Reset</Button>
+                        <Button themeColor="primary">Apply</Button>
+                    </>
+                }>
+                    <Form tag="div">
+                        <FormField
+                            label="Frame Style"
+                            editor={
+                                <div className="k-imageeditor-option-grid">
+                                    <FrameStylePreview styleKey="none" label="None" selected={style === "none"} />
+                                    <FrameStylePreview styleKey="single" label="Single" selected={style === "single"} />
+                                    <FrameStylePreview styleKey="multiple" label="Multiple" selected={style === "multiple"} />
+                                </div>
+                            }
+                        />
+                        <FrameSlider id="frame-image-roundness" label="Image Roundness" value={imageRoundness} />
+                        {style === "multiple" && (
+                            <FormField
+                                label="Frames Amount"
+                                editorId="frame-frames-amount"
+                                editor={
+                                    <NumericTextbox id="frame-frames-amount" showClearButton={false} value={String(framesAmount)} />
+                                }
+                            />
+                        )}
+                        {style !== "none" && (
+                            <>
+                                <FrameSlider id="frame-thickness" label="Frame Thickness" value={frameThickness} />
+                                <FrameSlider id="frame-roundness" label="Frame Roundness" value={frameRoundness} />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Stroke Type"
+                                        editor={ <DropdownList id="frame-stroke-type" value="Dashed" prefix={<Icon icon="border-style" />} aria-label="Stroke Type" /> }
+                                    />
+                                    <FormField
+                                        label="Offset"
+                                        editorId="frame-offset"
+                                        editor={ <NumericTextbox id="frame-offset" showSpinButton={false} value={String(offset)} prefix={<Icon icon="max-width" />} /> }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Stroke Color"
+                                    editor={ <ColorPicker id="frame-stroke-color" value={strokeColor} aria-label="Stroke Color" /> }
+                                />
+                            </>
+                        )}
+                    </Form>
+                </ImageEditorPane>
+            }
+
+            children={
+                style === "none" ? (
+                    <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", borderRadius: `${imageRoundness}px` }}></canvas>
+                ) : (
+                    <div style={{ position: "relative", width: `${494 + framePadding * 2}px`, height: `${307 + framePadding * 2}px` }}>
+                        <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{
+                            position: "absolute", top: `${framePadding}px`, left: `${framePadding}px`,
+                            backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover",
+                            borderRadius: `${imageRoundness}px`
+                        }}></canvas>
+                        {/* inner ring sits flush on the image edge, overlaying it */}
+                        <div style={{
+                            position: "absolute",
+                            top: `${framePadding}px`, left: `${framePadding}px`,
+                            width: "494px", height: "307px",
+                            border: `${frameThickness}px dashed ${strokeColor}`,
+                            borderRadius: `${frameRoundness}px`,
+                            boxSizing: "border-box",
+                            pointerEvents: "none"
+                        }}></div>
+                        {style === "multiple" && (
+                            <div style={{
+                                position: "absolute",
+                                top: `${framePadding + frameThickness + offset}px`, left: `${framePadding + frameThickness + offset}px`,
+                                width: `${494 - (frameThickness + offset) * 2}px`, height: `${307 - (frameThickness + offset) * 2}px`,
+                                border: `${frameThickness}px dashed ${strokeColor}`,
+                                borderRadius: `${Math.max(frameRoundness - frameThickness - offset, 0)}px`,
+                                boxSizing: "border-box",
+                                pointerEvents: "none"
+                            }}></div>
+                        )}
+                    </div>
+                )
+            }
+            {...props} />
+    );
+};

package/src/imageeditor/templates/imageeditor-insert-line.tsx

@@ -0,0 +1,141 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { DropdownList } from "../../dropdownlist";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { FloatingToolbar } from "../../floating-toolbar/floating-toolbar.spec";
+
+const insertLineSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+export const ImageEditorInsertLine = (props: any) => (
+    <ImageEditor
+        sidebarItems={insertLineSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Shapes and Lines" actions={
+                <>
+                    <Button>Remove</Button>
+                    <Button themeColor="primary">Insert</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="shapes">Shape</SegmentedControlButton>
+                    <SegmentedControlButton icon="shape-line" selected>Line</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Stroke Color"
+                            editor={ <ColorPicker id="line-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                        />
+                        <FormField
+                            label="Stroke Width"
+                            editorId="line-stroke-width"
+                            editor={ <NumericTextbox id="line-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Stroke Type"
+                        editor={ <DropdownList id="line-stroke-type" value="Dotted" prefix={<Icon icon="square-dotted" />} aria-label="Stroke Type" /> }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Start Point"
+                            editor={ <DropdownList id="line-start-point" value="Circle" prefix={<Icon icon="line-point-circle" />} aria-label="Start Point" /> }
+                        />
+                        <FormField
+                            label="End Point"
+                            editor={ <DropdownList id="line-end-point" value="Diamond" prefix={<Icon icon="line-point-rhombus" />} aria-label="End Point" /> }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Opacity"
+                        editor={ <NumericTextbox id="line-opacity" showSpinButton={false} value="100%" prefix={<Icon icon="transparency" />} aria-label="Opacity" /> }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Align"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                    <Button icon="align-items-center" selected aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                        <FormField
+                            label="Align Vertical"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                    <Button icon="align-items-center-alt" selected aria-label="Align Middle"></Button>
+                                    <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div style={{ position: "absolute", top: "150px", left: "90px", width: "220px", height: "0" }}>
+                    <div style={{
+                        position: "absolute", left: "0", right: "0", top: "-1px", height: "2px",
+                        background: "#5558e8"
+                    }}></div>
+                    <div style={{
+                        position: "absolute", left: "0", right: "0", top: "-4px", height: "8px",
+                        backgroundImage: "radial-gradient(circle, #b0e855 45%, transparent 46%)",
+                        backgroundSize: "16px 8px", backgroundRepeat: "repeat-x", backgroundPosition: "left center"
+                    }}></div>
+                    <span style={{
+                        position: "absolute", left: "-7px", top: "-7px",
+                        width: "14px", height: "14px", borderRadius: "50%",
+                        background: "#fff", border: "2px solid #5558e8", boxSizing: "border-box"
+                    }}></span>
+                    <span style={{
+                        position: "absolute", right: "-9px", top: "-9px",
+                        width: "18px", height: "18px", transform: "rotate(45deg)",
+                        background: "#b0e855", border: "2px solid #5558e8", boxSizing: "border-box"
+                    }}>
+                        <span style={{
+                            position: "absolute", left: "50%", top: "50%",
+                            width: "5px", height: "5px", borderRadius: "50%",
+                            background: "#fff", transform: "translate(-50%, -50%)"
+                        }}></span>
+                    </span>
+                    <FloatingToolbar fillMode="flat" resizable offset={{ top: "36px", left: "-10px" }}>
+                        <Button fillMode="flat" icon="copy" aria-label="Duplicate"></Button>
+                        <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                        <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                        <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                        <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+                    </FloatingToolbar>
+                </div>
+            </>
+        }
+        {...props} />
+);
+
+export default ImageEditorInsertLine;

package/src/imageeditor/templates/imageeditor-insert-shape.tsx

@@ -0,0 +1,195 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Combobox } from "../../combobox";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { FloatingToolbar } from "../../floating-toolbar/floating-toolbar.spec";
+
+const insertShapeSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+const shapeTypes = [
+    { label: "Square", icon: "checkbox" },
+    { label: "Rectangle", icon: "rectangle-shape" },
+    { label: "Circle", icon: "circle-shape" },
+    { label: "Oval", icon: "oval-shape" },
+    { label: "Triangle", icon: "kpi-status-hold" },
+    { label: "Star", icon: "star" },
+    { label: "Heart", icon: "heart" },
+    { label: "Diamond", icon: "kpi-status-deny" },
+    { label: "Hexagon", icon: "hexagon-shape" },
+    { label: "Pentagon", icon: "pentagon-shape" },
+    { label: "Arrow", icon: "arrow-right" }
+];
+
+export const ImageEditorInsertShape = (props: any) => (
+    <ImageEditor
+        sidebarItems={insertShapeSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Shapes and Lines" actions={
+                <>
+                    <Button>Remove</Button>
+                    <Button themeColor="primary">Insert</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                    <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <FormField
+                        label="Type"
+                        editor={
+                            <ImageEditorOptionList scrollable scrollableEnd>
+                                {shapeTypes.map((shape) => (
+                                    <ImageEditorOptionPreview key={shape.label} selected={shape.label === "Circle"}>
+                                        <div className="k-imageeditor-option-content">
+                                            <Icon icon={shape.icon} />
+                                            <span className="k-imageeditor-option-label">{shape.label}</span>
+                                        </div>
+                                    </ImageEditorOptionPreview>
+                                ))}
+                            </ImageEditorOptionList>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Stroke Color"
+                            editor={ <ColorPicker id="shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                        />
+                        <FormField
+                            label="Stroke Width"
+                            editorId="shape-stroke-width"
+                            editor={ <NumericTextbox id="shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Fill Color"
+                            editor={ <ColorPicker id="shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                        />
+                        <FormField
+                            label="Text Color"
+                            editor={ <ColorPicker id="shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Font Family"
+                        editorId="shape-font-family"
+                        editor={ <Combobox id="shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Font Size"
+                            editorId="shape-font-size"
+                            editor={ <NumericTextbox id="shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
+                        />
+                        <FormField
+                            label="Alignment"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                    <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Format"
+                        editor={
+                            <div className="k-imageeditor-controls">
+                                <Button icon="bold" aria-label="Bold"></Button>
+                                <Button icon="italic" aria-label="Italic"></Button>
+                                <Button icon="underline" aria-label="Underline"></Button>
+                                <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Align Horizontal"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                    <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                        <FormField
+                            label="Align Vertical"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                    <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                    <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "140px", left: "165px" }}>
+                    <div style={{
+                        width: "100%",
+                        height: "100%",
+                        borderRadius: "50%",
+                        background: "#eae382",
+                        border: "2px solid #b0e855",
+                        boxSizing: "border-box"
+                    }}>
+                        <p style={{
+                            margin: 0,
+                            width: "100%",
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontFamily: "'Trebuchet MS', sans-serif",
+                            fontSize: "16px",
+                            lineHeight: 1,
+                            color: "#4a4500",
+                            whiteSpace: "nowrap"
+                        }}>Shape text</p>
+                    </div>
+                    <ImageEditorResizeHandles variant="mixed" />
+                    <FloatingToolbar fillMode="flat" resizable offset={{ top: "62px", left: "0" }}>
+                        <Button fillMode="flat" icon="copy" aria-label="Duplicate"></Button>
+                        <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                        <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                        <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                        <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+                    </FloatingToolbar>
+                </div>
+            </>
+        }
+        {...props} />
+);
+
+export default ImageEditorInsertShape;