/** * Copyright Aquera Inc 2023 * * This source code is licensed under the BSD-3-Clause license found in the * LICENSE file in the root directory of this source tree. */ import NileElement from '../internal/nile-element'; import '../nile-markdown/nile-markdown'; import '../nile-icon'; import '../nile-button-toggle-group/nile-button-toggle-group'; import '../nile-button-toggle/nile-button-toggle'; import '../nile-dropdown/nile-dropdown'; import '../nile-menu/nile-menu'; import '../nile-menu-item/nile-menu-item'; import type { CSSResultGroup, TemplateResult } from 'lit'; export type MarkdownEditorMode = 'write' | 'preview' | 'split'; /** * Nile markdown editor component. * * @tag nile-markdown-editor */ /** * @summary A GitHub-style markdown editor with a formatting toolbar and a * live preview rendered by `nile-markdown`. * @status experimental * * @dependency nile-markdown * @dependency nile-icon * @dependency nile-glyph * @dependency nile-button-toggle-group * @dependency nile-button-toggle * * @attr {string} tools - JSON-array allowlist of toolbar tools to show, e.g. * `tools='["bold","italic","link"]'`. Valid names: heading, bold, italic, * strikethrough, quote, code, ul, ol, link. Empty shows all. * * @event nile-input - Emitted with `{ value }` on every keystroke or toolbar action. * @event nile-change - Emitted with `{ value }` when the editor loses focus after an edit. * @event nile-mode-change - Emitted with `{ mode }` when the write/preview/split mode changes. * * @csspart base - The component's base wrapper. * @csspart header - The header containing the tabs and toolbar. * @csspart toolbar - The formatting toolbar. * @csspart textarea - The markdown source textarea. * @csspart preview - The rendered preview pane. */ export declare class NileMarkdownEditor extends NileElement { static styles: CSSResultGroup; /** The markdown source. */ value: string; /** Placeholder shown when the editor is empty. */ placeholder: string; /** Disables the editor. */ disabled: boolean; /** Makes the source read-only while still allowing mode switching. */ readonly: boolean; /** Number of visible text rows in write mode. */ rows: number; /** Active view: `write`, `preview`, or `split`. */ mode: MarkdownEditorMode; /** Hides the formatting toolbar. */ hideToolbar: boolean; /** * Allowlist of toolbar tool names to show. Accepts a JSON array via the * `tools` attribute (e.g. `tools='["bold","italic","link"]'`), a * comma-separated string, or an array when set as a property. When empty * (default) every tool is shown. Valid names: `heading`, `bold`, `italic`, * `strikethrough`, `quote`, `code`, `ul`, `ol`, `link`. */ tools: string[]; /** Parsed allowlist, or `null` when no allowlist is set (show everything). */ private get allowedTools(); /** Toolbar groups after applying the allowlist; empty groups are dropped. */ private get visibleGroups(); private textarea?; private bodyEl?; /** * Fraction of the body width given to the write pane in split mode * (the rest goes to the preview). Clamped to a sensible range while * dragging the splitter. */ private splitRatio; /** Whether the split divider is currently being dragged. */ private splitDragging; /** Begins a pointer-driven resize of the split divider. */ private startSplitDrag; /** Resets the splitter to a 50/50 layout (double-click affordance). */ private resetSplit; /** Moves focus to the textarea. */ focus(options?: FocusOptions): void; blur(): void; private setMode; private handleInput; private handleChange; private handleKeydown; /** Replaces the current selection and restores focus/selection. */ private replaceSelection; /** Wraps (or unwraps) the selection with prefix/suffix delimiters. */ private applyWrap; /** Toggles a markdown prefix on every line in the selection. */ private applyLinePrefix; /** Inserts a `[text](url)` link, selecting the URL for quick editing. */ private insertLink; private runAction; /** Applies a heading-style line prefix chosen from a dropdown menu. */ private runMenuItem; /** Renders the glyph/icon shown inside a toolbar control. */ private renderActionContent; /** A standard click-to-apply toolbar button. */ private renderActionButton; /** A toolbar control that opens a dropdown of line-prefix choices. */ private renderMenuAction; private renderToolbar; render(): TemplateResult; } export default NileMarkdownEditor; declare global { interface HTMLElementTagNameMap { 'nile-markdown-editor': NileMarkdownEditor; } }