@synclineapi/mdx-editor 0.1.1 → 1.0.0

package/README.md

@@ -1,23 +1,30 @@
 # @synclineapi/mdx-editor
 
-[![CI](https://github.com/RadhaHariharan/syncline-mdx-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/RadhaHariharan/syncline-mdx-editor/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@synclineapi/mdx-editor.svg)](https://www.npmjs.com/package/@synclineapi/mdx-editor)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.4-blue.svg)](https://www.typescriptlang.org/)
 [![WCAG AA](https://img.shields.io/badge/Accessibility-WCAG%20AA-green.svg)](https://www.w3.org/TR/WCAG21/)
+[![Website](https://img.shields.io/badge/Website-markdown.synclineapi.com-blue)](https://markdown.synclineapi.com/)
 
-A **framework-agnostic**, plugin-based MDX/Markdown editor with toolbar customization, live preview, and 33+ built-in features. Works with React, Vue, Angular, Next.js, Svelte, or plain JavaScript.
+A **framework-agnostic**, plugin-based MDX/Markdown editor with a high-performance virtual-rendering code pane, live HTML preview, a configurable toolbar, and 33+ built-in content plugins. Works with React, Vue, Angular, Next.js, Svelte, or plain JavaScript.
 
-## Quick Start
+**[Live Demo →](https://markdown.synclineapi.com/)**
+
+---
+
+## Installation
 
 ```bash
 npm install @synclineapi/mdx-editor
 ```
 
+---
+
+## Quick Start
+
 ### Vanilla JavaScript
 
 ```html
-<div id="editor"></div>
+<div id="editor" style="height: 600px;"></div>
 
 <script type="module">
   import { createEditor } from '@synclineapi/mdx-editor';
@@ -25,15 +32,36 @@ npm install @synclineapi/mdx-editor
 
   const editor = createEditor({
     container: '#editor',
-    value: '# Hello World',
-    onChange: (markdown) => console.log('Content changed:', markdown),
+    value: '# Hello World\n\nStart writing *MDX* here.',
+    onChange: (markdown) => console.log(markdown),
   });
 </script>
 ```
 
+### React
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { createEditor, type SynclineMDXEditor } from '@synclineapi/mdx-editor';
+import '@synclineapi/mdx-editor/style.css';
+
+export function Editor({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const editor = useRef<SynclineMDXEditor | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    editor.current = createEditor({ container: ref.current, value, onChange });
+    return () => editor.current?.destroy();
+  }, []);
+
+  return <div ref={ref} style={{ height: 600 }} />;
+}
+```
+
 ### Custom Plugin Selection
 
-```js
+```ts
 import { SynclineMDXEditor, boldPlugin, italicPlugin, headingPlugin } from '@synclineapi/mdx-editor';
 import '@synclineapi/mdx-editor/style.css';
 
@@ -44,83 +72,266 @@ const editor = new SynclineMDXEditor({
 });
 ```
 
-## Features (33+ Built-in Plugins)
+---
+
+## Features
+
+### 33+ Built-in Plugins
 
 | Category | Plugins |
 |----------|---------|
-| **Formatting** | Heading (1–6), Bold, Italic, Strikethrough, Quote |
+| **Formatting** | Heading (H1–H6), Bold, Italic, Strikethrough, Quote |
 | **Links & Media** | Link, Image, Image Background, Image Frame |
-| **Code** | Inline Code, Code Block (with syntax highlighting placeholder) |
+| **Code** | Inline Code, Fenced Code Block |
 | **Lists** | Unordered List, Ordered List, Task List |
-| **Layout** | Table, Multi-Column (2–5), Tabs, Container |
+| **Layout** | Table, Multi-Column (2–5 cols), Tabs, Container |
 | **Components** | Accordion, Accordion Group, Card, Card Group, Steps |
-| **Callouts** | Admonition (Tip/Warning/Caution/Danger/Check/Info/Note), Tip (Good/Bad/Info) |
-| **Rich Content** | Highlight (8 colors), Emoji, Formula (inline/block via KaTeX), Tooltip, Copy Text |
+| **Callouts** | Admonition (Tip / Warning / Caution / Danger / Info / Note), Tip (Good / Bad / Info) |
+| **Rich Content** | Highlight (8 colours), Emoji, Formula (KaTeX inline & block), Tooltip, Copy Text |
 | **Embeds** | YouTube, Video file, GitHub Gist, Twitter/X, CodePen, CodeSandbox |
 | **Diagrams** | Mermaid (Flowchart, Sequence, Class, State, ER, Journey, Gantt) |
 | **Insert** | API Endpoint, Markdown Import, Code Snippet |
 
-## Architecture
+### Editor Engine
+
+- **Virtual rendering** — only visible rows are in the DOM; handles documents of 10 000+ lines at 60 fps
+- **Word wrap** — proper pixel-width wrap with full active-line highlight across all visual rows
+- **MDX autocomplete** — context-aware component-tag and attribute suggestions; Tab-trigger snippet expansion
+- **Single-colour prose mode** — all syntax tokens collapse to the text colour for distraction-free writing
+- **Live HTML preview** — side-by-side split / editor-only / preview-only modes with a draggable splitter
+- **Table of Contents** — auto-generated from headings, collapsible panel
+- **Theme system** — light / dark toggle; auto-syncs with `data-theme`, `.smdx-dark`, or `data-color-scheme`
+
+---
+
+## Configuration
+
+### `EditorConfig`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `container` | `HTMLElement \| string` | — | **Required.** DOM element or CSS selector to mount into. |
+| `value` | `string` | `''` | Initial markdown content. |
+| `onChange` | `(value: string) => void` | — | Called on every content change (typing, paste, undo, `setValue()`). |
+| `plugins` | `EditorPlugin[]` | all built-ins | Plugins to register. |
+| `toolbar` | `ToolbarConfig` | default toolbar | Toolbar layout (rows of item IDs, groups, dividers). |
+| `theme` | `Record<string, string>` | — | CSS custom property overrides for the MDX prose shell. |
+| `mode` | `'split' \| 'editor' \| 'preview'` | `'split'` | Initial layout mode. |
+| `placeholder` | `string` | — | Placeholder shown in an empty editor. |
+| `readOnly` | `boolean` | `false` | Prevent all content mutations. |
+| `renderers` | `Record<string, RendererFn>` | — | Custom preview renderer overrides. |
+| `locale` | `Partial<EditorLocale>` | — | i18n label overrides. |
+---
+
+## Theming
+
+### CSS custom properties
+
+```css
+.smdx-editor {
+  --smdx-primary:     #6366f1;   /* accent colour */
+  --smdx-bg:          #ffffff;   /* prose shell background */
+  --smdx-text:        #1e293b;   /* prose text */
+  --smdx-border:      #e2e8f0;   /* dividers */
+  --smdx-font-family: 'Inter', sans-serif;
+  --smdx-font-mono:   'JetBrains Mono', monospace;
+  --smdx-radius:      12px;
+}
+```
+
+### Via config
+
+```ts
+createEditor({
+  container: '#editor',
+  theme: {
+    '--smdx-primary': '#e11d48',
+    '--smdx-bg':      '#0f172a',
+  },
+});
+```
+
+### Dark mode
+
+Add `.smdx-dark` to the editor root, any ancestor element, `<body>`, or `<html>` — the editor observes all of them. Alternatively set `data-theme="dark"` on any ancestor (Next.js / Nuxt / Tailwind pattern):
 
+```ts
+// CSS class toggle
+editor.getRoot().classList.add('smdx-dark');
+
+// data-theme attribute (works on any ancestor)
+document.documentElement.dataset.theme = 'dark';
 ```
-@synclineapi/mdx-editor
-├── Core Engine (SynclineMDXEditor)
-│   ├── EventEmitter          – Pub/sub event system
-│   ├── PluginManager          – Plugin lifecycle
-│   ├── Toolbar                – Configurable toolbar renderer
-│   ├── Renderer               – Markdown/MDX → HTML engine
-│   └── History                – Undo/redo stack
-└── Plugins (33+)
-    └── Each exports: toolbarItems, shortcuts, renderers, parsers, styles
+
+---
+
+## Autocomplete
+
+### `registerAutoComplete()`
+
+Add custom autocomplete items on top of the built-in MDX completions. Items appear in the popup immediately and persist for the lifetime of the editor.
+
+```ts
+import type { CompletionItem } from '@synclineapi/mdx-editor';
+
+editor.registerAutoComplete([
+  // Plain word completion
+  { label: 'MyCard', kind: 'cls', detail: 'component' },
+
+  // Snippet — Tab or click inserts the full body; $1 is the cursor position
+  {
+    label: 'mycard',
+    kind: 'snip',
+    detail: '<MyCard> component',
+    description: 'Inserts a custom card block.',
+    body: '<MyCard title="$1">\n  $2\n</MyCard>',
+  },
+]);
+```
+
+Call it again at any time to add more items — they accumulate:
+
+```ts
+editor.registerAutoComplete({ label: 'MyBanner', kind: 'cls', detail: 'component' });
+```
+
+### Completion kinds
+
+| `kind` | Badge | Use for |
+|--------|-------|---------|
+| `'cls'` | **C** | Component names (`<MyCard>`, `<Tabs>`) |
+| `'fn'` | **f** | Functions / methods |
+| `'kw'` | **K** | Keywords |
+| `'var'` | **·** | Attributes, variables, props |
+| `'typ'` | **T** | Types / interfaces |
+| `'snip'` | **S** | Snippet template — set `body` to expand on accept |
+
+### Snippet bodies
+
+Use `$1`, `$2`, … as cursor tab stops. The cursor lands on `$1` after expansion:
+
+```ts
+{
+  label: 'endpoint',
+  kind: 'snip',
+  detail: 'API endpoint block',
+  body: '<Endpoint method="$1GET" path="$2/api/resource">\n  $3Description\n</Endpoint>',
+}
 ```
 
+---
+
 ## Plugin API
 
-Create custom plugins:
+Plugins are the recommended way to bundle a toolbar button, keyboard shortcut, preview renderer, and autocomplete items together as one reusable unit.
 
 ```ts
 import type { EditorPlugin } from '@synclineapi/mdx-editor';
 
 const myPlugin: EditorPlugin = {
   name: 'my-custom-block',
+
+  // Toolbar button
   toolbarItems: [{
     id: 'myBlock',
     label: 'My Block',
     icon: '<svg>...</svg>',
-    tooltip: 'Insert my block',
+    tooltip: 'Insert my block (Ctrl+Shift+M)',
     action: ({ editor }) => {
       editor.insertBlock('<MyBlock>\n  Content\n</MyBlock>');
     },
   }],
+
+  // Autocomplete — same content as the toolbar action, now also reachable
+  // by typing the trigger word in the editor
+  completions: [
+    {
+      label: 'myblock',
+      kind: 'snip',
+      detail: '<MyBlock> component',
+      body: '<MyBlock>\n  $1Content\n</MyBlock>',
+    },
+  ],
+
+  // Preview renderer
   renderers: [{
     name: 'myBlock',
     pattern: /<MyBlock>([\s\S]*?)<\/MyBlock>/g,
     render: (match) => {
       const m = match.match(/<MyBlock>([\s\S]*?)<\/MyBlock>/);
-      return `<div class="my-block">${m?.[1] || ''}</div>`;
+      return `<div class="my-block">${m?.[1] ?? ''}</div>`;
     },
   }],
+
   shortcuts: [
-    { key: 'Ctrl+Shift+m', action: ({ editor }) => editor.insertBlock('<MyBlock>\n  Content\n</MyBlock>') },
+    {
+      key: 'Ctrl+Shift+m',
+      action: ({ editor }) => editor.insertBlock('<MyBlock>\n  Content\n</MyBlock>'),
+      description: 'Insert custom block',
+    },
   ],
-  styles: `.my-block { border: 2px solid blue; padding: 16px; border-radius: 8px; }`,
+
+  styles: `.my-block { border: 2px solid #6366f1; padding: 16px; border-radius: 8px; }`,
 };
 ```
 
+You can also register completions dynamically inside `init()` using `ctx.registerCompletion()`:
+
+```ts
+const myPlugin: EditorPlugin = {
+  name: 'dynamic-completions',
+  async init(ctx) {
+    const components = await fetchMyComponents(); // dynamic list
+    for (const comp of components) {
+      ctx.registerCompletion({
+        label: comp.tag,
+        kind: 'cls',
+        detail: comp.description,
+      });
+    }
+  },
+};
+```
+
+### Completion merge order
+
+Every time a plugin is registered or unregistered the autocomplete list is rebuilt:
+
+```
+built-in MDX completions   (tags, JSX attributes)
+  + built-in MDX snippets  (toolbar-matched snippet bodies)
+  + plugin completions      (all registered plugins, in order)
+  + user completions        (registerAutoComplete() calls)
+```
+
+---
+
 ## Toolbar Customization
 
 ### Flat toolbar
 
-```js
+```ts
 createEditor({
   container: '#editor',
   toolbar: [['bold', 'italic', '|', 'heading', '|', 'link', 'image']],
 });
 ```
 
+### Multi-row toolbar
+
+```ts
+createEditor({
+  container: '#editor',
+  toolbar: [
+    ['heading', '|', 'bold', 'italic', 'strikethrough'],
+    ['link', 'image', '|', 'table', 'code'],
+  ],
+});
+```
+
 ### Nested dropdowns
 
-```js
+```ts
 createEditor({
   container: '#editor',
   toolbar: [[
@@ -135,91 +346,78 @@ createEditor({
 });
 ```
 
-## Theming
-
-Override CSS custom properties:
-
-```css
-.smdx-editor {
-  --smdx-primary: #e11d48;
-  --smdx-bg: #0f172a;
-  --smdx-text: #e2e8f0;
-  --smdx-border: #334155;
-  --smdx-font-family: 'Inter', sans-serif;
-  --smdx-font-mono: 'JetBrains Mono', monospace;
-  --smdx-radius: 12px;
-}
-```
-
-Or pass theme via config:
-
-```js
-createEditor({
-  container: '#editor',
-  theme: {
-    '--smdx-primary': '#e11d48',
-    '--smdx-bg': '#0f172a',
-  },
-});
-```
-
-Add `.smdx-dark` class for dark mode:
-
-```js
-editor.getRoot().classList.add('smdx-dark');
-```
-
-## Configuration
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `container` | `HTMLElement \| string` | — | **Required.** The DOM element (or CSS selector) to mount the editor into. |
-| `value` | `string` | `''` | Initial markdown content. |
-| `onChange` | `(value: string) => void` | — | Callback invoked every time the content changes (user input, `setValue()`, undo/redo). |
-| `plugins` | `EditorPlugin[]` | all built-in plugins | Plugins to register. |
-| `toolbar` | `ToolbarConfig` | default toolbar | Toolbar layout. |
-| `theme` | `Record<string, string>` | — | CSS custom property overrides. |
-| `mode` | `'split' \| 'editor' \| 'preview'` | `'split'` | Initial editor mode. |
-| `placeholder` | `string` | — | Textarea placeholder text. |
-| `readOnly` | `boolean` | `false` | Make the editor read-only. |
-| `scrollSync` | `boolean` | `true` | Sync scroll position between editor and preview. |
-| `renderers` | `Record<string, RendererFn>` | — | Custom renderer overrides. |
-| `locale` | `Partial<EditorLocale>` | — | i18n overrides. |
+---
 
 ## API Reference
 
 ```ts
-interface EditorAPI {
+interface SynclineMDXEditor {
+  // Content
   getValue(): string;
   setValue(value: string): void;
+
+  // Editing
   insertText(text: string): void;
+  insertBlock(template: string): void;
   wrapSelection(prefix: string, suffix: string): void;
   replaceSelection(text: string): void;
+  replaceCurrentLine(text: string): void;
+  insertAt(position: number, text: string): void;
+
+  // Selection & cursor
   getSelection(): SelectionState;
-  insertBlock(template: string): void;
+  setSelection(start: number, end: number): void;
+  getCurrentLine(): string;
+  getCurrentLineNumber(): number;
+  jumpToLine(lineNumber: number): void;
+
+  // Undo / Redo
+  undo(): void;
+  redo(): void;
+
+  // View
   focus(): void;
   renderPreview(): void;
-  getMode(): EditorMode;
+  getMode(): 'split' | 'editor' | 'preview';
   setMode(mode: 'split' | 'editor' | 'preview'): void;
-  registerPlugin(plugin: EditorPlugin): void;
-  unregisterPlugin(name: string): void;
-  on(event: string, handler: Function): void;
-  off(event: string, handler: Function): void;
-  undo(): void;
-  redo(): void;
+  setLineNumbers(enabled: boolean): void;
+
+  // Metrics
   getWordCount(): number;
   getLineCount(): number;
+
+  // DOM access
+  getRoot(): HTMLElement;
+  getTextarea(): HTMLTextAreaElement;
+  getPreview(): HTMLElement;
+
+  // Plugins
+  registerPlugin(plugin: EditorPlugin): void;
+  unregisterPlugin(name: string): void;
+
+  // Autocomplete
+  registerAutoComplete(items: CompletionItem | CompletionItem[]): void;
+
+  // Theme sync
+  syncCodeEditorTheme(): void;
+
+  // Events
+  on(event: string, handler: (data?: unknown) => void): void;
+  off(event: string, handler: (data?: unknown) => void): void;
+  emit(event: string, data?: unknown): void;
+
+  // Lifecycle
   destroy(): void;
 }
 ```
 
-## Events
+---
 
-### `onChange` config callback (recommended)
+## Events
 
-Pass `onChange` directly in the config for the simplest way to listen for content changes:
+### `onChange` callback (recommended)
 
-```js
+```ts
 const editor = createEditor({
   container: '#editor',
   onChange: (markdown) => {
@@ -230,81 +428,63 @@ const editor = createEditor({
 
 ### Event emitter
 
-For all events (including selection changes, mode changes, etc.) use the event emitter API:
-
-```js
-editor.on('change', (markdown) => console.log('Content changed:', markdown));
-editor.on('selection-change', (sel) => console.log('Selection:', sel));
-editor.on('mode-change', (mode) => console.log('Mode:', mode));
-editor.on('render', (html) => console.log('Preview rendered'));
-editor.on('toolbar-action', (id) => console.log('Toolbar clicked:', id));
+```ts
+editor.on('change',           (markdown) => console.log('Changed:', markdown));
+editor.on('selection-change', (sel)      => console.log('Selection:', sel));
+editor.on('mode-change',      (mode)     => console.log('Mode:', mode));
+editor.on('render',           (html)     => console.log('Preview HTML ready'));
+editor.on('focus',            ()         => console.log('Editor focused'));
+editor.on('blur',             ()         => console.log('Editor blurred'));
+editor.on('toolbar-action',   (id)       => console.log('Toolbar clicked:', id));
 ```
 
-## Development
-
-> **Note:** The GitHub repository for this package is **private** — the source code is not publicly visible. The package is freely installable from npm, but external contributions, forks, and pull requests are not accepted.
->
-> To report a bug or request a feature, open an issue at the [GitHub Issues page](https://github.com/RadhaHariharan/syncline-mdx-editor/issues).
->
-> ```bash
-> npm install @synclineapi/mdx-editor
-> ```
-
-Internal development commands (for maintainers only):
-
-```bash
-cd syncline-mdx-editor
-npm install
-npm run dev     # Start Vite dev server
-npm run build   # Build library for production
-```
+---
 
 ## Bundle Size
 
-Check the estimated npm publish size before publishing:
+The production build targets **< 150 kB** (ESM + UMD, gzipped) when `mermaid`, `katex`, and `highlight.js` are treated as external peer dependencies.
 
 ```bash
 npm run build
 npm run size
 ```
 
-The core bundle (with `mermaid`, `katex`, `highlight.js` externalised) targets **< 150 kB** for both ESM and UMD outputs.
+---
 
 ## Security
 
-All rendered Markdown/MDX HTML is sanitized via a built-in XSS sanitizer before DOM injection. Dangerous tags (`script`, `iframe`, `object`), event handler attributes (`onclick`, `onerror`, etc.), and `javascript:` protocol URLs are all stripped. See [SECURITY.md](./SECURITY.md) for the vulnerability disclosure policy.
+All rendered Markdown/MDX HTML is sanitized by a built-in XSS sanitizer before DOM injection. Dangerous tags (`script`, `iframe`, `object`), event-handler attributes (`onclick`, `onerror`, etc.), and `javascript:` protocol URLs are stripped automatically. See [SECURITY.md](./SECURITY.md) for the vulnerability disclosure policy.
+
+---
 
 ## Accessibility
 
 `@synclineapi/mdx-editor` targets **WCAG 2.1 AA** compliance:
-- All toolbar buttons have `aria-label` and `title` attributes
+
+- All toolbar buttons carry `aria-label` and `title` attributes
 - The editor textarea has `aria-label="Markdown editor"` and `aria-multiline="true"`
 - The preview pane has `role="region"`, `aria-label="Preview"`, and `aria-live="polite"`
 - Mode toggle buttons expose `aria-pressed` state
-- Toolbar dropdowns have `role="menu"` / `role="menuitem"`
-- A skip link is provided for keyboard users
-- All text meets WCAG AA color contrast ratios
+- Toolbar dropdowns use `role="menu"` / `role="menuitem"`
+- A skip link is provided for keyboard-only users
+- All foreground/background colour pairs meet WCAG AA contrast ratios
 
-## Testing
-
-```bash
-npm run test             # Run all tests
-npm run test:watch       # Watch mode
-npm run test:coverage    # Coverage report (target: 80%+)
-npm run test:ui          # Visual test UI
-```
+---
 
 ## Peer Dependencies
 
-`mermaid`, `katex`, and `highlight.js` are optional peer dependencies. Install them only if you use those features:
+`mermaid`, `katex`, and `highlight.js` are optional. Install only the ones you need:
 
 ```bash
-npm install mermaid       # For Mermaid diagrams
-npm install katex         # For math formulas
-npm install highlight.js  # Included by default for syntax highlighting
+npm install mermaid       # Mermaid diagrams
+npm install katex         # Math / formula rendering
+npm install highlight.js  # Syntax highlighting in code blocks
 ```
 
+---
+
 ## License
 
-MIT
+Copyright © Syncline API. All rights reserved.
 
+This software is proprietary and confidential. Unauthorized copying, distribution, modification, or use of this software, in whole or in part, is strictly prohibited without the express written permission of Syncline API.

package/dist/core/config/EditorConfig.d.ts

@@ -0,0 +1,5 @@
+import { EditorConfig } from '../types';
+export declare function resolveConfig(config: Partial<EditorConfig> & {
+    container: EditorConfig['container'];
+}): EditorConfig;
+export declare function validateConfig(config: EditorConfig): void;

package/dist/core/config/defaults.d.ts

@@ -0,0 +1,33 @@
+import { EditorConfig, EditorMode } from '../types';
+export declare const DEFAULT_MODE: EditorMode;
+export declare const DEFAULT_PLACEHOLDER = "Start writing markdown...";
+export declare const DEFAULT_PREVIEW_DELAY = 150;
+export declare const DEFAULT_FEATURES: {
+    readonly lineNumbers: false;
+    readonly wordCount: true;
+    readonly lineCount: true;
+    readonly modeSwitcher: true;
+    readonly statusBar: true;
+    readonly autoPreview: true;
+    readonly previewDelay: 150;
+    readonly spellcheck: false;
+    readonly autocomplete: false;
+    readonly dragAndDrop: true;
+    readonly pasteImages: false;
+    readonly keyboardShortcuts: true;
+    readonly autoSave: false;
+    readonly autoSaveKey: "smdx-autosave";
+    readonly autofocus: false;
+    readonly vimMode: false;
+    readonly history: {
+        readonly maxSize: 100;
+        readonly debounce: 300;
+    };
+};
+export declare const DEFAULT_LAYOUT: {
+    readonly splitterPosition: 50;
+    readonly minEditorWidth: 200;
+    readonly minPreviewWidth: 200;
+    readonly resizableSplitter: true;
+};
+export declare function resolveDefaults(config: Partial<EditorConfig>): EditorConfig;

package/dist/core/config/index.d.ts

@@ -0,0 +1,2 @@
+export { resolveConfig, validateConfig } from './EditorConfig';
+export { resolveDefaults, DEFAULT_MODE, DEFAULT_PLACEHOLDER, DEFAULT_FEATURES, DEFAULT_LAYOUT } from './defaults';

package/dist/core/dom/editor-pane.d.ts

@@ -0,0 +1,7 @@
+export interface EditorPaneElements {
+    pane: HTMLDivElement;
+    scrollWrapper: HTMLDivElement;
+    gutter: HTMLDivElement;
+    textarea: HTMLTextAreaElement;
+}
+export declare function createEditorPane(id: string): EditorPaneElements;

package/dist/core/dom/editor-root.d.ts

@@ -0,0 +1,8 @@
+export interface EditorRootElements {
+    root: HTMLDivElement;
+    skipLink: HTMLAnchorElement;
+    toolbarSlot: HTMLDivElement;
+    main: HTMLDivElement;
+    statusBarSlot: HTMLDivElement;
+}
+export declare function createEditorRoot(id: string): EditorRootElements;