@furystack/shades-common-components 12.2.0 → 12.4.0

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>
+    )
+  },
+})

package/src/components/markdown/markdown-parser.spec.ts

@@ -0,0 +1,258 @@
+import { describe, expect, it } from 'vitest'
+import { parseInline, parseMarkdown, toggleCheckbox } from './markdown-parser.js'
+
+describe('parseInline', () => {
+  it('should parse plain text', () => {
+    const result = parseInline('hello world')
+    expect(result).toEqual([{ type: 'text', content: 'hello world' }])
+  })
+
+  it('should parse inline code', () => {
+    const result = parseInline('use `const x = 1` here')
+    expect(result).toEqual([
+      { type: 'text', content: 'use ' },
+      { type: 'code', content: 'const x = 1' },
+      { type: 'text', content: ' here' },
+    ])
+  })
+
+  it('should parse bold with **', () => {
+    const result = parseInline('this is **bold** text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'bold', children: [{ type: 'text', content: 'bold' }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse italic with *', () => {
+    const result = parseInline('this is *italic* text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'italic', children: [{ type: 'text', content: 'italic' }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse bold+italic with ***', () => {
+    const result = parseInline('this is ***bold italic*** text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'bold', children: [{ type: 'italic', children: [{ type: 'text', content: 'bold italic' }] }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse links', () => {
+    const result = parseInline('click [here](https://example.com) now')
+    expect(result).toEqual([
+      { type: 'text', content: 'click ' },
+      { type: 'link', href: 'https://example.com', children: [{ type: 'text', content: 'here' }] },
+      { type: 'text', content: ' now' },
+    ])
+  })
+
+  it('should parse images', () => {
+    const result = parseInline('see ![alt text](image.png) here')
+    expect(result).toEqual([
+      { type: 'text', content: 'see ' },
+      { type: 'image', src: 'image.png', alt: 'alt text' },
+      { type: 'text', content: ' here' },
+    ])
+  })
+
+  it('should parse nested bold in link', () => {
+    const result = parseInline('[**bold link**](url)')
+    expect(result).toEqual([
+      {
+        type: 'link',
+        href: 'url',
+        children: [{ type: 'bold', children: [{ type: 'text', content: 'bold link' }] }],
+      },
+    ])
+  })
+
+  it('should handle empty string', () => {
+    expect(parseInline('')).toEqual([])
+  })
+})
+
+describe('parseMarkdown', () => {
+  it('should return empty array for empty input', () => {
+    expect(parseMarkdown('')).toEqual([])
+  })
+
+  it('should parse headings level 1–6', () => {
+    const md = '# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(6)
+    for (let i = 0; i < 6; i++) {
+      expect(result[i]).toMatchObject({ type: 'heading', level: i + 1 })
+    }
+  })
+
+  it('should parse a paragraph', () => {
+    const result = parseMarkdown('Hello world\nthis is a paragraph.')
+    expect(result).toEqual([
+      {
+        type: 'paragraph',
+        children: [{ type: 'text', content: 'Hello world this is a paragraph.' }],
+      },
+    ])
+  })
+
+  it('should split paragraphs on blank lines', () => {
+    const result = parseMarkdown('First paragraph.\n\nSecond paragraph.')
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ type: 'paragraph' })
+    expect(result[1]).toMatchObject({ type: 'paragraph' })
+  })
+
+  it('should parse fenced code blocks', () => {
+    const md = '```typescript\nconst x = 1\nconsole.log(x)\n```'
+    const result = parseMarkdown(md)
+    expect(result).toEqual([
+      {
+        type: 'codeBlock',
+        language: 'typescript',
+        content: 'const x = 1\nconsole.log(x)',
+      },
+    ])
+  })
+
+  it('should parse fenced code blocks without language', () => {
+    const md = '```\nhello\n```'
+    const result = parseMarkdown(md)
+    expect(result).toEqual([
+      {
+        type: 'codeBlock',
+        language: undefined,
+        content: 'hello',
+      },
+    ])
+  })
+
+  it('should parse horizontal rules', () => {
+    for (const rule of ['---', '***', '___', '----', '****']) {
+      const result = parseMarkdown(rule)
+      expect(result).toEqual([{ type: 'horizontalRule' }])
+    }
+  })
+
+  it('should parse unordered lists', () => {
+    const md = '- Item 1\n- Item 2\n- Item 3'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'list', ordered: false })
+    const list = result[0] as { type: 'list'; items: unknown[] }
+    expect(list.items).toHaveLength(3)
+  })
+
+  it('should parse ordered lists', () => {
+    const md = '1. First\n2. Second\n3. Third'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'list', ordered: true })
+    const list = result[0] as { type: 'list'; items: unknown[] }
+    expect(list.items).toHaveLength(3)
+  })
+
+  it('should parse checkboxes in unordered lists', () => {
+    const md = '- [x] Done task\n- [ ] Todo task\n- Regular item'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    const list = result[0] as { type: 'list'; items: Array<{ checkbox?: string }> }
+    expect(list.items[0].checkbox).toBe('checked')
+    expect(list.items[1].checkbox).toBe('unchecked')
+    expect(list.items[2].checkbox).toBeUndefined()
+  })
+
+  it('should track sourceLineIndex on list items', () => {
+    const md = '- [x] Done\n- [ ] Todo'
+    const result = parseMarkdown(md)
+    const list = result[0] as { type: 'list'; items: Array<{ sourceLineIndex: number }> }
+    expect(list.items[0].sourceLineIndex).toBe(0)
+    expect(list.items[1].sourceLineIndex).toBe(1)
+  })
+
+  it('should parse blockquotes', () => {
+    const md = '> This is a quote\n> Second line'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'blockquote' })
+    const bq = result[0] as { type: 'blockquote'; children: unknown[] }
+    expect(bq.children).toHaveLength(1)
+    expect(bq.children[0]).toMatchObject({ type: 'paragraph' })
+  })
+
+  it('should parse a complex document', () => {
+    const md = [
+      '# Title',
+      '',
+      'A paragraph with **bold** and *italic*.',
+      '',
+      '## List Section',
+      '',
+      '- [x] Task done',
+      '- [ ] Task pending',
+      '',
+      '> A blockquote',
+      '',
+      '---',
+      '',
+      '```js',
+      'console.log("hi")',
+      '```',
+    ].join('\n')
+
+    const result = parseMarkdown(md)
+    expect(result[0]).toMatchObject({ type: 'heading', level: 1 })
+    expect(result[1]).toMatchObject({ type: 'paragraph' })
+    expect(result[2]).toMatchObject({ type: 'heading', level: 2 })
+    expect(result[3]).toMatchObject({ type: 'list', ordered: false })
+    expect(result[4]).toMatchObject({ type: 'blockquote' })
+    expect(result[5]).toMatchObject({ type: 'horizontalRule' })
+    expect(result[6]).toMatchObject({ type: 'codeBlock', language: 'js' })
+  })
+})
+
+describe('toggleCheckbox', () => {
+  it('should toggle an unchecked checkbox to checked', () => {
+    const source = '- [ ] Todo item'
+    const result = toggleCheckbox(source, 0)
+    expect(result).toBe('- [x] Todo item')
+  })
+
+  it('should toggle a checked checkbox to unchecked', () => {
+    const source = '- [x] Done item'
+    const result = toggleCheckbox(source, 0)
+    expect(result).toBe('- [ ] Done item')
+  })
+
+  it('should toggle the correct line in a multi-line document', () => {
+    const source = '- [x] Done\n- [ ] Todo\n- [ ] Another'
+    const result = toggleCheckbox(source, 1)
+    expect(result).toBe('- [x] Done\n- [x] Todo\n- [ ] Another')
+  })
+
+  it('should return original string for out-of-bounds index', () => {
+    const source = '- [ ] Todo'
+    expect(toggleCheckbox(source, 5)).toBe(source)
+    expect(toggleCheckbox(source, -1)).toBe(source)
+  })
+
+  it('should return original string for non-checkbox line', () => {
+    const source = 'Regular text'
+    expect(toggleCheckbox(source, 0)).toBe(source)
+  })
+
+  it('should not toggle [ ] that appears outside a list item', () => {
+    const source = 'This line has [ ] in it but is not a list item'
+    expect(toggleCheckbox(source, 0)).toBe(source)
+  })
+
+  it('should toggle checkboxes with * list marker', () => {
+    const source = '* [ ] Star item'
+    expect(toggleCheckbox(source, 0)).toBe('* [x] Star item')
+  })
+})