@furystack/shades-common-components 12.2.0 → 12.4.0

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

@@ -0,0 +1,202 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { Checkbox } from '../inputs/checkbox.js'
+import { Typography } from '../typography.js'
+import type { InlineNode, MarkdownNode } from './markdown-parser.js'
+import { parseMarkdown, toggleCheckbox } from './markdown-parser.js'
+
+export type MarkdownDisplayProps = {
+  /** The raw Markdown string to render */
+  content: string
+  /** When false, checkboxes can be toggled. Defaults to true. */
+  readOnly?: boolean
+  /** Called with the updated Markdown string when a checkbox is toggled */
+  onChange?: (newContent: string) => void
+}
+
+const renderInline = (nodes: InlineNode[]): JSX.Element => {
+  return (
+    <>
+      {nodes.map((node) => {
+        switch (node.type) {
+          case 'text':
+            return <>{node.content}</>
+          case 'bold':
+            return <strong>{renderInline(node.children)}</strong>
+          case 'italic':
+            return <em>{renderInline(node.children)}</em>
+          case 'code':
+            return <code className="md-inline-code">{node.content}</code>
+          case 'link':
+            return (
+              <a className="md-link" href={node.href} target="_blank" rel="noopener noreferrer">
+                {renderInline(node.children)}
+              </a>
+            )
+          case 'image':
+            return <img className="md-image" src={node.src} alt={node.alt} />
+          default:
+            return <></>
+        }
+      })}
+    </>
+  )
+}
+
+const variantForLevel = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+  const map = { 1: 'h1', 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' } as const
+  return map[level]
+}
+
+const renderBlock = (
+  node: MarkdownNode,
+  _index: number,
+  options: { content: string; readOnly: boolean; onChange?: (newContent: string) => void },
+): JSX.Element => {
+  switch (node.type) {
+    case 'heading':
+      return <Typography variant={variantForLevel(node.level)}>{renderInline(node.children)}</Typography>
+    case 'paragraph':
+      return <Typography variant="body1">{renderInline(node.children)}</Typography>
+    case 'codeBlock':
+      return (
+        <pre className="md-code-block" data-language={node.language || undefined}>
+          <code>{node.content}</code>
+        </pre>
+      )
+    case 'blockquote':
+      return (
+        <blockquote className="md-blockquote">
+          {node.children.map((child, i) => renderBlock(child, i, options))}
+        </blockquote>
+      )
+    case 'horizontalRule':
+      return <hr className="md-hr" />
+    case 'list': {
+      const listItems = node.items.map((item) => {
+        if (item.checkbox !== undefined) {
+          const handleChange = () => {
+            if (!options.readOnly && options.onChange) {
+              options.onChange(toggleCheckbox(options.content, item.sourceLineIndex))
+            }
+          }
+          return (
+            <li className="md-list-item md-checkbox-item" data-source-line={String(item.sourceLineIndex)}>
+              <Checkbox checked={item.checkbox === 'checked'} disabled={options.readOnly} onchange={handleChange} />
+              <span className="md-checkbox-label">{renderInline(item.children)}</span>
+            </li>
+          )
+        }
+        return <li className="md-list-item">{renderInline(item.children)}</li>
+      })
+      if (node.ordered) {
+        return <ol className="md-list">{listItems}</ol>
+      }
+      return <ul className="md-list">{listItems}</ul>
+    }
+    default:
+      return <></>
+  }
+}
+
+/**
+ * Renders a Markdown string using FuryStack Shades components.
+ * Supports headings, paragraphs, lists, checkboxes, code blocks,
+ * blockquotes, images, links, and horizontal rules.
+ */
+export const MarkdownDisplay = Shade<MarkdownDisplayProps>({
+  shadowDomName: 'shade-markdown-display',
+  css: {
+    display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    color: cssVariableTheme.text.primary,
+    lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+
+    '& .md-inline-code': {
+      fontFamily: 'monospace',
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+      padding: '2px 6px',
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      fontSize: '0.9em',
+    },
+
+    '& .md-code-block': {
+      fontFamily: 'monospace',
+      backgroundColor: cssVariableTheme.background.default,
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      padding: cssVariableTheme.spacing.md,
+      overflow: 'auto',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+    },
+
+    '& .md-code-block code': {
+      font: 'inherit',
+      whiteSpace: 'pre',
+    },
+
+    '& .md-blockquote': {
+      borderLeft: `4px solid ${cssVariableTheme.palette.primary.main}`,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      color: cssVariableTheme.text.secondary,
+    },
+
+    '& .md-link': {
+      color: cssVariableTheme.palette.primary.main,
+      textDecoration: 'none',
+    },
+    '& .md-link:hover': {
+      textDecoration: 'underline',
+    },
+
+    '& .md-image': {
+      maxWidth: '100%',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+    },
+
+    '& .md-hr': {
+      border: 'none',
+      borderTop: `1px solid ${cssVariableTheme.divider}`,
+      margin: `${cssVariableTheme.spacing.md} 0`,
+    },
+
+    '& .md-list': {
+      paddingLeft: cssVariableTheme.spacing.xl,
+      margin: `${cssVariableTheme.spacing.sm} 0`,
+    },
+
+    '& .md-list-item': {
+      marginBottom: cssVariableTheme.spacing.xs,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+
+    '& .md-checkbox-item': {
+      listStyle: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+    },
+
+    '& .md-checkbox-label': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+  },
+  render: ({ props }) => {
+    const readOnly = props.readOnly !== false
+    const ast = parseMarkdown(props.content)
+
+    return (
+      <div className="md-root">
+        {ast.map((node, i) =>
+          renderBlock(node, i, {
+            content: props.content,
+            readOnly,
+            onChange: props.onChange,
+          }),
+        )}
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,142 @@
+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') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <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') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" />,
+        })
+
+        await sleepAsync(50)
+
+        const split = document.querySelector('.md-editor-split') as HTMLElement
+        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') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="# Hello" layout="above-below" />,
+        })
+
+        await sleepAsync(50)
+
+        const split = document.querySelector('.md-editor-split') as HTMLElement
+        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') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <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') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <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') as HTMLDivElement
+      const mdContent = '# Test Content'
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownEditor value={mdContent} />,
+      })
+
+      await sleepAsync(50)
+
+      const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+      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')
+    })
+  })
+})

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