@furystack/shades-common-components 12.1.0 → 12.3.0

package/esm/components/markdown/markdown-display.spec.js

@@ -0,0 +1,191 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { MarkdownDisplay } from './markdown-display.js';
+describe('MarkdownDisplay', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "Hello" }),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-markdown-display');
+            expect(el).not.toBeNull();
+        });
+    });
+    it('should render a heading', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "# Hello World" }),
+            });
+            await sleepAsync(50);
+            const typography = document.querySelector('shade-markdown-display shade-typography');
+            expect(typography).not.toBeNull();
+            expect(typography?.getAttribute('data-variant')).toBe('h1');
+            expect(typography?.textContent).toContain('Hello World');
+        });
+    });
+    it('should render a paragraph', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "Just a paragraph." }),
+            });
+            await sleepAsync(50);
+            const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]');
+            expect(typography).not.toBeNull();
+            expect(typography?.textContent).toContain('Just a paragraph.');
+        });
+    });
+    it('should render a code block', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: '```js\nconsole.log("hi")\n```' }),
+            });
+            await sleepAsync(50);
+            const codeBlock = document.querySelector('shade-markdown-display .md-code-block');
+            expect(codeBlock).not.toBeNull();
+            expect(codeBlock?.textContent).toContain('console.log("hi")');
+        });
+    });
+    it('should render a list', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: '- Item A\n- Item B' }),
+            });
+            await sleepAsync(50);
+            const list = document.querySelector('shade-markdown-display ul');
+            expect(list).not.toBeNull();
+            const items = document.querySelectorAll('shade-markdown-display .md-list-item');
+            expect(items.length).toBe(2);
+        });
+    });
+    it('should render checkboxes as disabled when readOnly (default)', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "- [ ] Task" }),
+            });
+            await sleepAsync(50);
+            const checkbox = document.querySelector('shade-markdown-display shade-checkbox');
+            expect(checkbox).not.toBeNull();
+            expect(checkbox?.hasAttribute('data-disabled')).toBe(true);
+        });
+    });
+    it('should render checkboxes as enabled when readOnly is false', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const onChange = vi.fn();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "- [ ] Task", readOnly: false, onChange: onChange }),
+            });
+            await sleepAsync(50);
+            const checkbox = document.querySelector('shade-markdown-display shade-checkbox');
+            expect(checkbox).not.toBeNull();
+            expect(checkbox?.hasAttribute('data-disabled')).toBe(false);
+            const input = checkbox?.querySelector('input[type="checkbox"]');
+            expect(input).not.toBeNull();
+            input.click();
+            await sleepAsync(50);
+            expect(onChange).toHaveBeenCalledOnce();
+            expect(onChange).toHaveBeenCalledWith('- [x] Task');
+        });
+    });
+    it('should render a blockquote', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "> Quote text" }),
+            });
+            await sleepAsync(50);
+            const bq = document.querySelector('shade-markdown-display .md-blockquote');
+            expect(bq).not.toBeNull();
+            expect(bq?.textContent).toContain('Quote text');
+        });
+    });
+    it('should render a horizontal rule', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "---" }),
+            });
+            await sleepAsync(50);
+            const hr = document.querySelector('shade-markdown-display .md-hr');
+            expect(hr).not.toBeNull();
+        });
+    });
+    it('should render links', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "[Click here](https://example.com)" }),
+            });
+            await sleepAsync(50);
+            const link = document.querySelector('shade-markdown-display .md-link');
+            expect(link).not.toBeNull();
+            expect(link?.href).toContain('example.com');
+            expect(link?.textContent).toContain('Click here');
+        });
+    });
+    it('should render images', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "![alt text](image.png)" }),
+            });
+            await sleepAsync(50);
+            const img = document.querySelector('shade-markdown-display .md-image');
+            expect(img).not.toBeNull();
+            expect(img?.alt).toBe('alt text');
+        });
+    });
+    it('should render empty for empty content', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownDisplay, { content: "" }),
+            });
+            await sleepAsync(50);
+            const root = document.querySelector('shade-markdown-display .md-root');
+            expect(root).not.toBeNull();
+            expect(root?.children.length).toBe(0);
+        });
+    });
+});
+//# sourceMappingURL=markdown-display.spec.js.map

package/esm/components/markdown/markdown-display.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-display.spec.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-display.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/markdown/markdown-editor.d.ts

@@ -0,0 +1,25 @@
+export type MarkdownEditorLayout = 'side-by-side' | 'tabs' | 'above-below';
+export type MarkdownEditorProps = {
+    /** The current Markdown string */
+    value: string;
+    /** Called when the value changes (from either the input or checkbox toggle) */
+    onValueChange?: (newValue: string) => void;
+    /** Layout mode for the editor. Defaults to 'side-by-side'. */
+    layout?: MarkdownEditorLayout;
+    /** Maximum image file size in bytes for base64 paste */
+    maxImageSizeBytes?: number;
+    /** When true, the editor is read-only */
+    readOnly?: boolean;
+    /** Inline styles applied to the host element */
+    style?: Partial<CSSStyleDeclaration>;
+};
+/**
+ * Combined Markdown editor with an input pane and a live preview pane.
+ * Supports three layouts: side-by-side, tabs (Edit/Preview), or above-below.
+ */
+export declare const MarkdownEditor: (props: MarkdownEditorProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=markdown-editor.d.ts.map

package/esm/components/markdown/markdown-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/markdown-editor.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG,MAAM,GAAG,aAAa,CAAA;AAE1E,MAAM,MAAM,mBAAmB,GAAG;IAChC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACrC,CAAA;AAID;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;sEAyIzB,CAAA"}

package/esm/components/markdown/markdown-editor.js

@@ -0,0 +1,113 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+import { Tabs } from '../tabs.js';
+import { MarkdownDisplay } from './markdown-display.js';
+import { MarkdownInput } from './markdown-input.js';
+/**
+ * Combined Markdown editor with an input pane and a live preview pane.
+ * Supports three layouts: side-by-side, tabs (Edit/Preview), or above-below.
+ */
+export const MarkdownEditor = Shade({
+    shadowDomName: 'shade-markdown-editor',
+    css: {
+        display: 'flex',
+        flexDirection: 'column',
+        border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        borderRadius: cssVariableTheme.shape.borderRadius.md,
+        overflow: 'hidden',
+        minHeight: '0',
+        '& .md-editor-split': {
+            display: 'flex',
+            flex: '1',
+            minHeight: '0',
+        },
+        '& .md-editor-split[data-layout="side-by-side"]': {
+            flexDirection: 'row',
+        },
+        '& .md-editor-split[data-layout="above-below"]': {
+            flexDirection: 'column',
+            minHeight: 'auto',
+        },
+        '& .md-editor-pane': {
+            flex: '1',
+            minWidth: '0',
+            minHeight: '0',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '& .md-editor-pane-input': {
+            borderRight: 'none',
+        },
+        '& .md-editor-split[data-layout="side-by-side"] .md-editor-pane-input': {
+            borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        },
+        '& .md-editor-split[data-layout="above-below"] .md-editor-pane-input': {
+            borderBottom: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        },
+        '& .md-editor-split[data-layout="above-below"] .md-editor-pane': {
+            flex: 'none',
+            overflow: 'visible',
+            minHeight: 'auto',
+        },
+        '& .md-editor-split[data-layout="above-below"] shade-markdown-input textarea': {
+            overflow: 'hidden',
+            fieldSizing: 'content',
+        },
+        '& .md-editor-pane-preview': {
+            padding: cssVariableTheme.spacing.md,
+        },
+        '& shade-markdown-input': {
+            marginBottom: '0',
+            flex: '1',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '& shade-markdown-input label': {
+            border: 'none',
+            borderRadius: '0',
+            flex: '1',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '& shade-markdown-input textarea': {
+            flex: '1',
+            resize: 'none',
+        },
+        '& shade-tabs': {
+            flex: '1',
+            minHeight: '0',
+        },
+        '& .md-editor-tab-content': {
+            padding: cssVariableTheme.spacing.md,
+            overflow: 'auto',
+        },
+    },
+    render: ({ props, useState, useHostProps }) => {
+        const layout = props.layout ?? 'side-by-side';
+        useHostProps({
+            ...(props.style ? { style: props.style } : {}),
+        });
+        const [activeTab, setActiveTab] = useState('activeTab', 'edit');
+        const inputPane = (createComponent(MarkdownInput, { value: props.value, onValueChange: props.onValueChange, maxImageSizeBytes: props.maxImageSizeBytes, readOnly: props.readOnly }));
+        const previewPane = createComponent(MarkdownDisplay, { content: props.value, readOnly: false, onChange: props.onValueChange });
+        if (layout === 'tabs') {
+            return (createComponent(Tabs, { activeKey: activeTab, onTabChange: (key) => setActiveTab(key), tabs: [
+                    {
+                        header: createComponent(createComponent, null, "Edit"),
+                        hash: 'edit',
+                        component: createComponent("div", { className: "md-editor-tab-content" }, inputPane),
+                    },
+                    {
+                        header: createComponent(createComponent, null, "Preview"),
+                        hash: 'preview',
+                        component: createComponent("div", { className: "md-editor-tab-content" }, previewPane),
+                    },
+                ] }));
+        }
+        return (createComponent("div", { className: "md-editor-split", "data-layout": layout },
+            createComponent("div", { className: "md-editor-pane md-editor-pane-input" }, inputPane),
+            createComponent("div", { className: "md-editor-pane md-editor-pane-preview" }, previewPane)));
+    },
+});
+//# sourceMappingURL=markdown-editor.js.map

package/esm/components/markdown/markdown-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-editor.tsx"],"names":[],"mappings":"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"}

package/esm/components/markdown/markdown-editor.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=markdown-editor.spec.d.ts.map

package/esm/components/markdown/markdown-editor.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.spec.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/markdown-editor.spec.tsx"],"names":[],"mappings":""}

package/esm/components/markdown/markdown-editor.spec.js

@@ -0,0 +1,111 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { MarkdownEditor } from './markdown-editor.js';
+describe('MarkdownEditor', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownEditor, { value: "# Hello" }),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-markdown-editor');
+            expect(el).not.toBeNull();
+        });
+    });
+    describe('side-by-side layout (default)', () => {
+        it('should render input and preview panes side by side', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(MarkdownEditor, { value: "# Hello" }),
+                });
+                await sleepAsync(50);
+                const split = document.querySelector('.md-editor-split');
+                expect(split).not.toBeNull();
+                expect(split.dataset.layout).toBe('side-by-side');
+                const input = document.querySelector('shade-markdown-editor shade-markdown-input');
+                expect(input).not.toBeNull();
+                const display = document.querySelector('shade-markdown-editor shade-markdown-display');
+                expect(display).not.toBeNull();
+            });
+        });
+    });
+    describe('above-below layout', () => {
+        it('should render with above-below layout', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(MarkdownEditor, { value: "# Hello", layout: "above-below" }),
+                });
+                await sleepAsync(50);
+                const split = document.querySelector('.md-editor-split');
+                expect(split).not.toBeNull();
+                expect(split.dataset.layout).toBe('above-below');
+            });
+        });
+    });
+    describe('tabs layout', () => {
+        it('should render with tabs layout', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(MarkdownEditor, { value: "# Hello", layout: "tabs" }),
+                });
+                await sleepAsync(50);
+                const tabs = document.querySelector('shade-markdown-editor shade-tabs');
+                expect(tabs).not.toBeNull();
+                const tabButtons = document.querySelectorAll('shade-markdown-editor .shade-tab-btn');
+                expect(tabButtons.length).toBe(2);
+            });
+        });
+        it('should show the edit tab by default', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(MarkdownEditor, { value: "# Hello", layout: "tabs" }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-markdown-editor shade-markdown-input');
+                expect(input).not.toBeNull();
+            });
+        });
+    });
+    it('should pass value to both input and display', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const mdContent = '# Test Content';
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(MarkdownEditor, { value: mdContent }),
+            });
+            await sleepAsync(50);
+            const textarea = document.querySelector('shade-markdown-editor textarea');
+            expect(textarea.value).toBe(mdContent);
+            const heading = document.querySelector('shade-markdown-editor shade-markdown-display shade-typography[data-variant="h1"]');
+            expect(heading).not.toBeNull();
+            expect(heading?.textContent).toContain('Test Content');
+        });
+    });
+});
+//# sourceMappingURL=markdown-editor.spec.js.map

package/esm/components/markdown/markdown-editor.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.spec.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-editor.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/markdown/markdown-input.d.ts

@@ -0,0 +1,29 @@
+export type MarkdownInputProps = {
+    /** The current Markdown string */
+    value: string;
+    /** Called when the value changes */
+    onValueChange?: (newValue: string) => void;
+    /** Maximum image file size in bytes for base64 paste. Defaults to 256KB. */
+    maxImageSizeBytes?: number;
+    /** Whether the textarea is read-only */
+    readOnly?: boolean;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label shown above the textarea */
+    labelTitle?: string;
+    /** Number of visible text rows */
+    rows?: number;
+};
+/**
+ * Markdown text input with base64 image paste support.
+ * When the user pastes an image below the configured size limit,
+ * it is inlined as a `![pasted image](data:...)` Markdown image.
+ */
+export declare const MarkdownInput: (props: MarkdownInputProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=markdown-input.d.ts.map

package/esm/components/markdown/markdown-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-input.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/markdown-input.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;sEAiHxB,CAAA"}

package/esm/components/markdown/markdown-input.js

@@ -0,0 +1,100 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+const DEFAULT_MAX_IMAGE_SIZE = 256 * 1024;
+/**
+ * Markdown text input with base64 image paste support.
+ * When the user pastes an image below the configured size limit,
+ * it is inlined as a `![pasted image](data:...)` Markdown image.
+ */
+export const MarkdownInput = Shade({
+    shadowDomName: 'shade-markdown-input',
+    css: {
+        display: 'block',
+        marginBottom: '1em',
+        '& label': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            color: cssVariableTheme.text.secondary,
+            padding: '1em',
+            borderRadius: cssVariableTheme.shape.borderRadius.md,
+            border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+            transition: `color ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+        },
+        '&[data-disabled] label': {
+            color: cssVariableTheme.text.disabled,
+        },
+        '&:focus-within label': {
+            color: cssVariableTheme.palette.primary.main,
+        },
+        '& textarea': {
+            border: 'none',
+            backgroundColor: 'transparent',
+            outline: 'none',
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            fontFamily: 'monospace',
+            width: '100%',
+            resize: 'vertical',
+            color: cssVariableTheme.text.primary,
+            boxShadow: '0px 0px 0px rgba(128,128,128,0.1)',
+            transition: `box-shadow ${cssVariableTheme.transitions.duration.normal} ease`,
+            lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+            padding: `${cssVariableTheme.spacing.sm} 0`,
+        },
+        '&:focus-within textarea': {
+            boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
+        },
+    },
+    render: ({ props, useHostProps, useRef }) => {
+        const maxSize = props.maxImageSizeBytes ?? DEFAULT_MAX_IMAGE_SIZE;
+        const textareaRef = useRef('textarea');
+        useHostProps({
+            'data-disabled': props.disabled ? '' : undefined,
+        });
+        const handleInput = (ev) => {
+            const target = ev.target;
+            props.onValueChange?.(target.value);
+        };
+        const handlePaste = (ev) => {
+            const items = ev.clipboardData?.items;
+            if (!items)
+                return;
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                if (item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
+                    if (!file || file.size > maxSize)
+                        continue;
+                    ev.preventDefault();
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const base64 = reader.result;
+                        const textarea = textareaRef.current;
+                        if (!textarea)
+                            return;
+                        const start = textarea.selectionStart;
+                        const end = textarea.selectionEnd;
+                        const before = textarea.value.slice(0, start);
+                        const after = textarea.value.slice(end);
+                        const imageMarkdown = `![pasted image](${base64})`;
+                        const newValue = before + imageMarkdown + after;
+                        textarea.value = newValue;
+                        const cursorPos = start + imageMarkdown.length;
+                        textarea.setSelectionRange(cursorPos, cursorPos);
+                        props.onValueChange?.(newValue);
+                    };
+                    reader.onerror = () => {
+                        console.warn('Failed to read pasted image file');
+                    };
+                    reader.readAsDataURL(file);
+                    return;
+                }
+            }
+        };
+        return (createComponent("label", null,
+            props.labelTitle ? createComponent("span", null, props.labelTitle) : null,
+            createComponent("textarea", { ref: textareaRef, value: props.value, oninput: handleInput, onpaste: handlePaste, readOnly: props.readOnly, disabled: props.disabled, placeholder: props.placeholder, rows: props.rows ?? 10 })));
+    },
+});
+//# sourceMappingURL=markdown-input.js.map

package/esm/components/markdown/markdown-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-input.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-input.tsx"],"names":[],"mappings":"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"}

package/esm/components/markdown/markdown-input.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=markdown-input.spec.d.ts.map

package/esm/components/markdown/markdown-input.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-input.spec.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/markdown-input.spec.tsx"],"names":[],"mappings":""}