Linked Issue

• Closes wrap in web component #30

Motivation

Enable a first-class Web Component for simpler, framework-agnostic integration and style isolation via Shadow DOM, matching the proposed usage in the issue.

Summary of Changes

• Add custom element <overtype-editor> with Shadow DOM
• New build artifacts:
  • dist/overtype-webcomponent.js
  • dist/overtype-webcomponent.esm.js
  • dist/overtype-webcomponent.min.js
• Source, demo, and tests:
  • src/overtype-webcomponent.js
  • examples/webcomponent.html
  • test/webcomponent.test.js
• Minimal docs/examples updates to align with existing demo style

Usage

• CDN:

<script src="https://unpkg.com/overtype/dist/overtype-webcomponent.min.js"></script>

<overtype-editor theme="solar" value="# hello"></overtype-editor>

• ESM:

<script type="module">
  import 'overtype/dist/overtype-webcomponent.esm.js';
</script>

<overtype-editor theme="dracula" value="## Getting Started"></overtype-editor>

Attributes, Events, Methods

• Attributes:
  • value: initial Markdown
  • theme: theme name (reuses existing themes)
  • preview: enable preview mode (optional)
  • Other editor options mapped to attributes for compatibility
• Events:
  • change: emits { detail: { value } } on content updates
  • ready: emitted when initialized
• Methods (via element instance):
  • getValue(), setValue(value), focus(), etc., aligned with existing API

Compatibility

• Backward compatible: does not affect current direct Overtype usage
• Styles: Shadow DOM prevents host page leakage; themes still driven by themes.js
• Size: additional optional bundles; does not bloat existing bundles

Testing and Validation

• test/webcomponent.test.js covers render, attribute sync, and event emission
• Manual verification via examples/webcomponent.html (initial value, theme switching, change propagation)

Documentation

• Added a minimal runnable example; can extend README with a Web Component section in this PR if desired

Follow-ups

• Additional events (focus, blur, selectionChange)
• More reactive attribute updates via attributeChangedCallback
• Expose CSS custom properties for fine-grained theming

Checklist

• Introduce <overtype-editor> with Shadow DOM
• Ship CJS/ESM/UMD-like webcomponent builds
• Add example and baseline tests
• Maintain parity with existing API and theme system
• Link and close issue #30 (reference)

Summary by cubic

Adds a first-class Web Component with Shadow DOM for clean, framework-agnostic embedding while keeping the existing OverType API intact. Implements the behavior requested in issue #30, including attribute-based config and event hooks.

• New Features

  • Introduced custom element with Shadow DOM isolation.
  • Attribute API: value, theme, preview; plus mapped editor options.
  • Events: change (value payload), ready. Methods: getValue, setValue, focus.
  • New builds: dist/overtype-webcomponent.{js,min.js,esm.js} and package export at overtype/webcomponent.
  • Added example page and tests covering render, attribute sync, and events.
  • Docs and site updated; existing OverType usage remains unchanged.

• Bug Fixes

  • Link tooltip: guard CSS.supports to prevent errors in non-browser/test environments.
  • Toolbar: input event is now composed to work inside Shadow DOM.
  • Parser cleanup and version bump to 1.2.3.