open-index/open-npm huggingface dataset:
npm package: @markdown-ui/vanilla
Description: Vanilla JS renderer for markdown-ui
Latest version: 0.2.0

# @markdown-ui/vanilla

Lightweight Vanilla JS renderer for markdown-ui widgets. No framework dependencies.

## Installation

```bash
npm install @markdown-ui/vanilla @markdown-ui/marked-ext
```

## Usage

### ESM (with bundler)

```typescript
import { MarkdownUI } from '@markdown-ui/vanilla';
import '@markdown-ui/vanilla/widgets.css';
import { Marked } from 'marked';
import { markedUiExtension } from '@markdown-ui/marked-ext';

// Parse markdown with widgets
const marked = new Marked().use(markedUiExtension);
const html = marked.parse(`
# My Form

\`\`\`markdown-ui-widget
button-group env [dev staging prod] dev
\`\`\`
`);

// Render and initialize
document.getElementById('content').innerHTML = html;

const mdui = MarkdownUI.init('#content', {
  onWidgetEvent: (e) => {
    console.log('Widget changed:', e.detail.id, e.detail.value);
  }
});
```

### CDN (no build step)

```html
<link rel="stylesheet" href="https://unpkg.com/@markdown-ui/vanilla/dist/widgets.css">
<script src="https://unpkg.com/@markdown-ui/vanilla/dist/index.umd.js"></script>

<div id="content">
  <markdown-ui-widget
    id="env"
    content="%7B%22type%22%3A%22button-group%22%2C%22choices%22%3A%5B%22dev%22%2C%22prod%22%5D%7D">
  </markdown-ui-widget>
</div>

<script>
  const mdui = MarkdownUIVanilla.MarkdownUI.init('#content', {
    onWidgetEvent: (e) => console.log(e.detail)
  });
</script>
```

## Supported Widgets

- **text-input** - Text field with label and placeholder
- **button-group** - Multiple choice buttons
- **select** - Dropdown selection
- **select-multi** - Multi-select with checkboxes
- **slider** - Range input with min/max/step
- **form** - Container for multiple widgets with submit button

## API

### `MarkdownUI.init(container, options)`

Static factory method to initialize markdown-ui on a container.

```typescript
const mdui = MarkdownUI.init('#content', {
  onWidgetEvent: (e: CustomEvent<WidgetEventDetail>) => {
    console.log(e.detail.id, e.detail.value);
  }
});
```

### `mdui.render(html)`

Render HTML content containing widget elements.

### `mdui.destroy()`

Cleanup event listeners and remove widget-container class.

## Event System

Widget interactions emit `widget-event` custom events with the following detail:

```typescript
interface WidgetEventDetail {
  id: string;    // Widget ID
  value: unknown; // Current value (type depends on widget)
}
```

## Styling

Import the optional CSS for consistent styling:

```javascript
import '@markdown-ui/vanilla/widgets.css';
```

Or via CDN:

```html
<link rel="stylesheet" href="https://unpkg.com/@markdown-ui/vanilla/dist/widgets.css">
```

The CSS uses the same class names as `@markdown-ui/react` for consistency.

## License

MIT
npm package: @markdown-viewer/text-measure
Description: Text measurement utilities for browser and fibjs environments
Latest version: 1.1.0

# @markdown-viewer/text-measure

Text measurement utilities for browser and [fibjs](https://fibjs.org/) environments.

Provides a pluggable `TextMeasureProvider` interface for measuring text dimensions (width, height, line count) across different runtimes — DOM in the browser, headless WebView in fibjs.

## Installation

```bash
npm install @markdown-viewer/text-measure
```

## Usage

### Basic measurement

In fibjs, the WebView-based text measurement provider is **automatically configured** on import — no manual setup needed.

```ts
import { measureText } from '@markdown-viewer/text-measure';

const { width, height } = measureText('Hello World', 14, 'Arial');
```

### Layout measurement

Measure text with wrapping and line information:

```ts
import { measureTextLayout } from '@markdown-viewer/text-measure';

const layout = measureTextLayout('Long text...', 14, 'Arial', 'normal', 'normal', 200);
// => { width, height, lineCount, lineHeight }
```

## API

### Measurement functions

| Function | Description |
|----------|-------------|
| `measureText(text, fontSize, fontFamily, ...)` | Measure text dimensions |
| `measureMultilineText(text, fontSize, fontFamily, ...)` | Measure multi-line text |
| `measureTextLayout(text, fontSize, fontFamily, ..., containerWidth)` | Measure with wrapping/layout info |
| `isBrowserMeasurementAvailable()` | Check if DOM measurement is available |

### Constants

| Export | Description |
|--------|-------------|
| `DEFAULT_FONT_FAMILY` | Default font family (`'Arial, Helvetica, sans-serif'`) |
| `setDefaultFontFamily(family)` | Override the default font family |

### Types

- `TextLayoutResult` — `{ width, height, lineCount, lineHeight }`

## License

MIT