@furystack/shades-common-components 12.2.0 → 12.3.0

package/src/components/markdown/markdown-editor.tsx

@@ -0,0 +1,167 @@
+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'
+
+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>
+}
+
+type TabType = 'edit' | 'preview'
+
+/**
+ * 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<MarkdownEditorProps>({
+  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 as Record<string, string> } : {}),
+    })
+
+    const [activeTab, setActiveTab] = useState<TabType>('activeTab', 'edit')
+
+    const inputPane = (
+      <MarkdownInput
+        value={props.value}
+        onValueChange={props.onValueChange}
+        maxImageSizeBytes={props.maxImageSizeBytes}
+        readOnly={props.readOnly}
+      />
+    )
+
+    const previewPane = <MarkdownDisplay content={props.value} readOnly={false} onChange={props.onValueChange} />
+
+    if (layout === 'tabs') {
+      return (
+        <Tabs
+          activeKey={activeTab}
+          onTabChange={(key) => setActiveTab(key as TabType)}
+          tabs={[
+            {
+              header: <>Edit</>,
+              hash: 'edit',
+              component: <div className="md-editor-tab-content">{inputPane}</div>,
+            },
+            {
+              header: <>Preview</>,
+              hash: 'preview',
+              component: <div className="md-editor-tab-content">{previewPane}</div>,
+            },
+          ]}
+        />
+      )
+    }
+
+    return (
+      <div className="md-editor-split" data-layout={layout}>
+        <div className="md-editor-pane md-editor-pane-input">{inputPane}</div>
+        <div className="md-editor-pane md-editor-pane-preview">{previewPane}</div>
+      </div>
+    )
+  },
+})

package/src/components/markdown/markdown-input.spec.tsx

@@ -0,0 +1,274 @@
+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 { MarkdownInput } from './markdown-input.js'
+
+describe('MarkdownInput', () => {
+  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') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-markdown-input')
+      expect(el).not.toBeNull()
+    })
+  })
+
+  it('should render a textarea with the given value', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="# Hello" />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea).not.toBeNull()
+      expect(textarea.value).toBe('# Hello')
+    })
+  })
+
+  it('should render the label title', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" labelTitle="Markdown Content" />,
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-markdown-input label')
+      expect(label?.textContent).toContain('Markdown Content')
+    })
+  })
+
+  it('should set placeholder on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" placeholder="Type markdown..." />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.placeholder).toBe('Type markdown...')
+    })
+  })
+
+  it('should set data-disabled when disabled', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" disabled />,
+      })
+
+      await sleepAsync(50)
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-disabled')).toBe(true)
+
+      const textarea = wrapper.querySelector('textarea') as HTMLTextAreaElement
+      expect(textarea.disabled).toBe(true)
+    })
+  })
+
+  it('should set readOnly on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" readOnly />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.readOnly).toBe(true)
+    })
+  })
+
+  it('should call onValueChange on input event', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onValueChange = vi.fn()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      textarea.value = '# New content'
+      textarea.dispatchEvent(new Event('input', { bubbles: true }))
+
+      await sleepAsync(50)
+
+      expect(onValueChange).toHaveBeenCalledWith('# New content')
+    })
+  })
+
+  it('should use custom rows prop', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" rows={20} />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.rows).toBe(20)
+    })
+  })
+
+  describe('image paste', () => {
+    const createPasteEvent = (items: Array<{ type: string; file: File | null }>) => {
+      const pasteEvent = new Event('paste', { bubbles: true, cancelable: true })
+      Object.defineProperty(pasteEvent, 'clipboardData', {
+        value: {
+          items: Object.assign(
+            items.map((item) => ({
+              type: item.type,
+              getAsFile: () => item.file,
+            })),
+            { length: items.length },
+          ),
+        },
+      })
+      return pasteEvent
+    }
+
+    it('should inline a pasted image as base64 Markdown', async () => {
+      const originalFileReader = globalThis.FileReader
+      try {
+        const fakeBase64 = 'data:image/png;base64,dGVzdA=='
+        globalThis.FileReader = class {
+          result: string | null = fakeBase64
+          onload: (() => void) | null = null
+          onerror: (() => void) | null = null
+          public readAsDataURL() {
+            queueMicrotask(() => this.onload?.())
+          }
+        } as unknown as typeof FileReader
+
+        await usingAsync(new Injector(), async (injector) => {
+          const rootElement = document.getElementById('root') as HTMLDivElement
+          const onValueChange = vi.fn()
+
+          initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: <MarkdownInput value="Hello " onValueChange={onValueChange} />,
+          })
+
+          await sleepAsync(50)
+
+          const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+          textarea.selectionStart = 6
+          textarea.selectionEnd = 6
+
+          const file = new File(['png-data'], 'test.png', { type: 'image/png' })
+          const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
+          textarea.dispatchEvent(pasteEvent)
+
+          await sleepAsync(100)
+
+          expect(onValueChange).toHaveBeenCalledOnce()
+          const result = onValueChange.mock.calls[0][0] as string
+          expect(result).toContain('![pasted image](data:')
+          expect(result.startsWith('Hello ')).toBe(true)
+        })
+      } finally {
+        globalThis.FileReader = originalFileReader
+      }
+    })
+
+    it('should ignore pasted images exceeding maxImageSizeBytes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onValueChange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" onValueChange={onValueChange} maxImageSizeBytes={5} />,
+        })
+
+        await sleepAsync(50)
+
+        const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+        const file = new File(['this-is-larger-than-5-bytes'], 'big.png', { type: 'image/png' })
+        const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
+        textarea.dispatchEvent(pasteEvent)
+
+        await sleepAsync(100)
+
+        expect(onValueChange).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should not interfere with non-image paste', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onValueChange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
+        })
+
+        await sleepAsync(50)
+
+        const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+        const file = new File(['text content'], 'note.txt', { type: 'text/plain' })
+        const pasteEvent = createPasteEvent([{ type: 'text/plain', file }])
+        const wasDefaultPrevented = !textarea.dispatchEvent(pasteEvent)
+
+        await sleepAsync(100)
+
+        expect(wasDefaultPrevented).toBe(false)
+        expect(onValueChange).not.toHaveBeenCalled()
+      })
+    })
+  })
+})

package/src/components/markdown/markdown-input.tsx

@@ -0,0 +1,143 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+
+const DEFAULT_MAX_IMAGE_SIZE = 256 * 1024
+
+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 const MarkdownInput = Shade<MarkdownInputProps>({
+  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<HTMLTextAreaElement>('textarea')
+
+    useHostProps({
+      'data-disabled': props.disabled ? '' : undefined,
+    })
+
+    const handleInput = (ev: Event) => {
+      const target = ev.target as HTMLTextAreaElement
+      props.onValueChange?.(target.value)
+    }
+
+    const handlePaste = (ev: ClipboardEvent) => {
+      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 as string
+            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 (
+      <label>
+        {props.labelTitle ? <span>{props.labelTitle}</span> : null}
+        <textarea
+          ref={textareaRef}
+          value={props.value}
+          oninput={handleInput}
+          onpaste={handlePaste}
+          readOnly={props.readOnly}
+          disabled={props.disabled}
+          placeholder={props.placeholder}
+          rows={props.rows ?? 10}
+        />
+      </label>
+    )
+  },
+})