@aquera/nile-elements 1.8.5 → 1.8.7

package/dist/src/nile-markdown-editor/nile-markdown-editor.js

@@ -0,0 +1,615 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-markdown-editor.css';
+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';
+/** Toolbar actions, grouped — groups are separated by vertical dividers. */
+const TOOLBAR_GROUPS = [
+    [
+        {
+            name: 'heading',
+            title: 'Heading',
+            kind: 'menu',
+            glyph: 'ng-heading',
+            items: [
+                { label: 'Heading 1', prefix: '# ', glyph: 'ng-heading-1' },
+                { label: 'Heading 2', prefix: '## ', glyph: 'ng-heading-2' },
+                { label: 'Heading 3', prefix: '### ', glyph: 'ng-heading-3' },
+                { label: 'Heading 4', prefix: '#### ', glyph: 'ng-heading-4' },
+                { label: 'Heading 5', prefix: '##### ', glyph: 'ng-heading-5' },
+                { label: 'Heading 6', prefix: '###### ', glyph: 'ng-heading-6' },
+            ],
+        },
+        {
+            name: 'bold',
+            title: 'Bold (Ctrl+B)',
+            kind: 'wrap',
+            prefix: '**',
+            suffix: '**',
+            placeholder: 'bold text',
+            icon: 'format_bold',
+        },
+        {
+            name: 'italic',
+            title: 'Italic (Ctrl+I)',
+            kind: 'wrap',
+            prefix: '_',
+            suffix: '_',
+            placeholder: 'italic text',
+            icon: 'format_italic',
+        },
+        {
+            name: 'strikethrough',
+            title: 'Strikethrough',
+            kind: 'wrap',
+            prefix: '~~',
+            suffix: '~~',
+            placeholder: 'text',
+            glyph: 'ng-strikethrough',
+        },
+    ],
+    [
+        { name: 'quote', title: 'Quote', kind: 'line', prefix: '> ', glyph: 'ng-quote' },
+        {
+            name: 'code',
+            title: 'Code',
+            kind: 'wrap',
+            prefix: '`',
+            suffix: '`',
+            placeholder: 'code',
+            glyph: 'ng-code',
+        },
+    ],
+    [
+        {
+            name: 'ul',
+            title: 'Bulleted list',
+            kind: 'line',
+            prefix: '- ',
+            icon: 'format_list_bulleted',
+        },
+        {
+            name: 'ol',
+            title: 'Numbered list',
+            kind: 'line',
+            prefix: '1. ',
+            numbered: true,
+            icon: 'format_list_numbered',
+        },
+    ],
+    [{ name: 'link', title: 'Link (Ctrl+K)', kind: 'link', icon: 'link_2' }],
+];
+const TOOLBAR_ACTIONS = TOOLBAR_GROUPS.flat();
+/** Glyph shown alongside each view-mode tab label. */
+const TAB_GLYPHS = {
+    write: 'ng-pencil',
+    preview: 'ng-eye',
+    split: 'ng-square-split-horizontal',
+};
+/**
+ * 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.
+ */
+let NileMarkdownEditor = class NileMarkdownEditor extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The markdown source. */
+        this.value = '';
+        /** Placeholder shown when the editor is empty. */
+        this.placeholder = 'Write markdown here…';
+        /** Disables the editor. */
+        this.disabled = false;
+        /** Makes the source read-only while still allowing mode switching. */
+        this.readonly = false;
+        /** Number of visible text rows in write mode. */
+        this.rows = 8;
+        /** Active view: `write`, `preview`, or `split`. */
+        this.mode = 'write';
+        /** Hides the formatting toolbar. */
+        this.hideToolbar = false;
+        /**
+         * 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`.
+         */
+        this.tools = [];
+        /**
+         * 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.
+         */
+        this.splitRatio = 0.5;
+        /** Whether the split divider is currently being dragged. */
+        this.splitDragging = false;
+        /** Begins a pointer-driven resize of the split divider. */
+        this.startSplitDrag = (e) => {
+            if (this.mode !== 'split')
+                return;
+            const body = this.bodyEl;
+            if (!body)
+                return;
+            e.preventDefault();
+            this.splitDragging = true;
+            const rect = body.getBoundingClientRect();
+            const MIN = 0.15;
+            const MAX = 0.85;
+            const onMove = (ev) => {
+                if (rect.width === 0)
+                    return;
+                const ratio = (ev.clientX - rect.left) / rect.width;
+                this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));
+            };
+            const onUp = () => {
+                this.splitDragging = false;
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+            };
+            window.addEventListener('pointermove', onMove);
+            window.addEventListener('pointerup', onUp);
+        };
+        /** Resets the splitter to a 50/50 layout (double-click affordance). */
+        this.resetSplit = () => {
+            this.splitRatio = 0.5;
+        };
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.emit('nile-input', { value: this.value }, true, true);
+        };
+        this.handleChange = () => {
+            this.emit('nile-change', { value: this.value }, true, true);
+        };
+        this.handleKeydown = (e) => {
+            if (!(e.metaKey || e.ctrlKey))
+                return;
+            const key = e.key.toLowerCase();
+            const action = { b: 'bold', i: 'italic', k: 'link' }[key];
+            if (!action)
+                return;
+            // Respect the allowlist: a hidden tool's shortcut is disabled too.
+            const allowed = this.allowedTools;
+            if (allowed && !allowed.has(action))
+                return;
+            e.preventDefault();
+            this.runAction(TOOLBAR_ACTIONS.find(a => a.name === action));
+        };
+    }
+    /** Parsed allowlist, or `null` when no allowlist is set (show everything). */
+    get allowedTools() {
+        const names = (this.tools ?? []).map(s => s.trim()).filter(Boolean);
+        return names.length ? new Set(names) : null;
+    }
+    /** Toolbar groups after applying the allowlist; empty groups are dropped. */
+    get visibleGroups() {
+        const allowed = this.allowedTools;
+        if (!allowed)
+            return TOOLBAR_GROUPS;
+        return TOOLBAR_GROUPS.map(group => group.filter(action => allowed.has(action.name))).filter(group => group.length > 0);
+    }
+    /** Moves focus to the textarea. */
+    focus(options) {
+        this.textarea?.focus(options);
+    }
+    blur() {
+        this.textarea?.blur();
+    }
+    setMode(mode) {
+        if (this.mode === mode)
+            return;
+        this.mode = mode;
+        this.emit('nile-mode-change', { mode }, true, true);
+    }
+    /** Replaces the current selection and restores focus/selection. */
+    replaceSelection(start, end, replacement, selectStart, selectEnd) {
+        const ta = this.textarea;
+        if (!ta)
+            return;
+        ta.focus();
+        // Select the range to overwrite, then insert via the browser's editing
+        // pipeline so the change is recorded on the native undo/redo stack.
+        // Assigning `ta.value` directly would wipe that stack and break Ctrl/Cmd+Z.
+        ta.setSelectionRange(start, end);
+        const inserted = document.execCommand('insertText', false, replacement);
+        if (inserted) {
+            // execCommand dispatched a native `input` event, so `handleInput`
+            // already synced `value` and emitted `nile-input`; just fix selection.
+            ta.setSelectionRange(selectStart, selectEnd);
+            return;
+        }
+        // Fallback for environments without execCommand support.
+        ta.value = ta.value.slice(0, start) + replacement + ta.value.slice(end);
+        ta.setSelectionRange(selectStart, selectEnd);
+        this.value = ta.value;
+        this.emit('nile-input', { value: this.value }, true, true);
+    }
+    /** Wraps (or unwraps) the selection with prefix/suffix delimiters. */
+    applyWrap(action) {
+        const ta = this.textarea;
+        if (!ta)
+            return;
+        const { selectionStart: start, selectionEnd: end, value } = ta;
+        const { prefix, suffix } = action;
+        const selected = value.slice(start, end);
+        // Toggle off when the selection is already wrapped
+        const before = value.slice(Math.max(0, start - prefix.length), start);
+        const after = value.slice(end, end + suffix.length);
+        if (before === prefix && after === suffix) {
+            this.replaceSelection(start - prefix.length, end + suffix.length, selected, start - prefix.length, end - prefix.length);
+            return;
+        }
+        const content = selected || action.placeholder;
+        this.replaceSelection(start, end, prefix + content + suffix, start + prefix.length, start + prefix.length + content.length);
+    }
+    /** Toggles a markdown prefix on every line in the selection. */
+    applyLinePrefix(action) {
+        const ta = this.textarea;
+        if (!ta)
+            return;
+        const { selectionStart: start, selectionEnd: end, value } = ta;
+        // Expand the selection to whole lines
+        const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+        const lineEndIndex = value.indexOf('\n', end);
+        const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+        const block = value.slice(lineStart, lineEnd);
+        const lines = block.split('\n');
+        const matcher = action.numbered ? /^\d+\.\s/ : undefined;
+        const hasPrefix = lines.every(line => matcher ? matcher.test(line) : line.startsWith(action.prefix));
+        const replaced = lines
+            .map((line, i) => {
+            if (hasPrefix) {
+                return matcher
+                    ? line.replace(matcher, '')
+                    : line.slice(action.prefix.length);
+            }
+            return action.numbered ? `${i + 1}. ${line}` : action.prefix + line;
+        })
+            .join('\n');
+        this.replaceSelection(lineStart, lineEnd, replaced, lineStart, lineStart + replaced.length);
+    }
+    /** Inserts a `[text](url)` link, selecting the URL for quick editing. */
+    insertLink() {
+        const ta = this.textarea;
+        if (!ta)
+            return;
+        const { selectionStart: start, selectionEnd: end, value } = ta;
+        const text = value.slice(start, end) || 'text';
+        const url = 'url';
+        const replacement = `[${text}](${url})`;
+        const urlStart = start + text.length + 3; // "[text](".length
+        this.replaceSelection(start, end, replacement, urlStart, urlStart + url.length);
+    }
+    runAction(action) {
+        if (this.readonly || this.disabled)
+            return;
+        if (this.mode === 'preview')
+            this.setMode('write');
+        switch (action.kind) {
+            case 'wrap':
+                this.applyWrap(action);
+                break;
+            case 'line':
+                this.applyLinePrefix(action);
+                break;
+            case 'link':
+                this.insertLink();
+                break;
+            case 'menu':
+                // The dropdown items drive the edits via `runMenuItem`; nothing to do
+                // when the trigger itself is activated.
+                break;
+        }
+    }
+    /** Applies a heading-style line prefix chosen from a dropdown menu. */
+    runMenuItem(action, item) {
+        if (this.readonly || this.disabled)
+            return;
+        if (this.mode === 'preview')
+            this.setMode('write');
+        this.applyLinePrefix({
+            name: action.name,
+            title: action.title,
+            kind: 'line',
+            prefix: item.prefix,
+        });
+    }
+    /** Renders the glyph/icon shown inside a toolbar control. */
+    renderActionContent(action) {
+        if (action.icon) {
+            return html `<nile-icon
+        name=${action.icon}
+        size="20"
+        color=${this.disabled
+                ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))'
+                : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}
+      ></nile-icon>`;
+        }
+        // `ng-*` glyph names map to nile-glyph icons; anything else is plain text.
+        if (action.glyph?.startsWith('ng-')) {
+            return html `<nile-glyph
+        name=${action.glyph}
+        method="stroke"
+        color=${this.disabled
+                ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))'
+                : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}
+        size="20"
+      ></nile-glyph>`;
+        }
+        return html `<span class="toolbar__glyph--${action.name}">
+      ${action.glyph}
+    </span>`;
+    }
+    /** A standard click-to-apply toolbar button. */
+    renderActionButton(action) {
+        return html `
+      <button
+        type="button"
+        class="toolbar__button"
+        title=${action.title}
+        aria-label=${action.title}
+        tabindex="-1"
+        @mousedown=${(e) => e.preventDefault()}
+        @click=${() => this.runAction(action)}
+      >
+        ${this.renderActionContent(action)}
+      </button>
+    `;
+    }
+    /** A toolbar control that opens a dropdown of line-prefix choices. */
+    renderMenuAction(action) {
+        return html `
+      <nile-dropdown
+        class="toolbar__menu"
+        placement="bottom-start"
+        ?disabled=${this.disabled || this.readonly}
+      >
+        <button
+          slot="trigger"
+          type="button"
+          class="toolbar__button"
+          title=${action.title}
+          aria-label=${action.title}
+          aria-haspopup="menu"
+          tabindex="-1"
+          @mousedown=${(e) => e.preventDefault()}
+        >
+          ${this.renderActionContent(action)}
+        </button>
+        <nile-menu>
+          ${action.items.map(item => html `
+              <nile-menu-item
+                @click=${() => this.runMenuItem(action, item)}
+              >
+                ${item.glyph
+            ? html `<nile-glyph
+                      slot="prefix"
+                      name=${item.glyph}
+                      method="stroke"
+                      color="currentColor"
+                      size="18"
+                    ></nile-glyph>`
+            : nothing}
+                ${item.label}
+              </nile-menu-item>
+            `)}
+        </nile-menu>
+      </nile-dropdown>
+    `;
+    }
+    renderToolbar() {
+        if (this.hideToolbar || this.mode === 'preview')
+            return nothing;
+        const groups = this.visibleGroups;
+        if (groups.length === 0)
+            return nothing;
+        return html `
+      <div
+        class="toolbar"
+        part="toolbar"
+        role="toolbar"
+        aria-label="Formatting"
+      >
+        ${groups.map((group, groupIndex) => html `
+            ${groupIndex > 0
+            ? html `<span class="toolbar__divider"></span>`
+            : nothing}
+            ${group.map(action => action.kind === 'menu'
+            ? this.renderMenuAction(action)
+            : this.renderActionButton(action))}
+          `)}
+      </div>
+    `;
+    }
+    render() {
+        const showWrite = this.mode !== 'preview';
+        const showPreview = this.mode !== 'write';
+        return html `
+      <div
+        class=${classMap({
+            editor: true,
+            'editor--disabled': this.disabled,
+            'editor--split': this.mode === 'split',
+        })}
+        part="base"
+      >
+        <div class="header" part="header">
+          ${this.renderToolbar()}
+          <nile-button-toggle-group
+            class="tabs"
+            aria-label="Editor view"
+            .value=${this.mode}
+            @nile-change=${(e) => this.setMode(e.detail.value)}
+          >
+            ${['write', 'preview', 'split'].map(mode => html `
+                <nile-button-toggle
+                  value=${mode}
+                  ?active=${this.mode === mode}
+                >
+                  <span class="tab__content">
+                    <nile-glyph
+                      name=${TAB_GLYPHS[mode]}
+                      method="stroke"
+                      color="currentColor"
+                      size="16"
+                    ></nile-glyph>
+                  </span>
+                </nile-button-toggle>
+              `)}
+          </nile-button-toggle-group>
+        </div>
+        <div
+          class=${classMap({ body: true, 'body--dragging': this.splitDragging })}
+        >
+          ${showWrite
+            ? html `
+                <div
+                  class="pane pane--write"
+                  style=${this.mode === 'split'
+                ? `flex: 0 0 ${this.splitRatio * 100}%`
+                : nothing}
+                >
+                  <textarea
+                    part="textarea"
+                    rows=${this.rows}
+                    placeholder=${this.placeholder}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    .value=${this.value}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @keydown=${this.handleKeydown}
+                  ></textarea>
+                </div>
+              `
+            : nothing}
+          ${this.mode === 'split'
+            ? html `
+                <div
+                  class="gutter"
+                  part="gutter"
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-label="Resize editor and preview"
+                  title="Drag to resize · double-click to reset"
+                  @pointerdown=${this.startSplitDrag}
+                  @dblclick=${this.resetSplit}
+                ></div>
+              `
+            : nothing}
+          ${showPreview
+            ? html `
+                <div class="pane pane--preview" part="preview">
+                  ${this.value.trim()
+                ? html `<nile-markdown .value=${this.value}></nile-markdown>`
+                : html `<span class="preview-empty"
+                        >Nothing to preview</span
+                      >`}
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+};
+NileMarkdownEditor.styles = styles;
+__decorate([
+    property()
+], NileMarkdownEditor.prototype, "value", void 0);
+__decorate([
+    property()
+], NileMarkdownEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMarkdownEditor.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMarkdownEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Number })
+], NileMarkdownEditor.prototype, "rows", void 0);
+__decorate([
+    property({ reflect: true })
+], NileMarkdownEditor.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-toolbar' })
+], NileMarkdownEditor.prototype, "hideToolbar", void 0);
+__decorate([
+    property({
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    const parsed = JSON.parse(value);
+                    if (Array.isArray(parsed)) {
+                        return parsed.map(s => String(s).trim()).filter(Boolean);
+                    }
+                }
+                catch {
+                    // Not JSON — fall back to a comma-separated string.
+                }
+                return value.split(',').map(s => s.trim()).filter(Boolean);
+            },
+            toAttribute: (value) => JSON.stringify(value ?? []),
+        },
+    })
+], NileMarkdownEditor.prototype, "tools", void 0);
+__decorate([
+    query('textarea')
+], NileMarkdownEditor.prototype, "textarea", void 0);
+__decorate([
+    query('.body')
+], NileMarkdownEditor.prototype, "bodyEl", void 0);
+__decorate([
+    state()
+], NileMarkdownEditor.prototype, "splitRatio", void 0);
+__decorate([
+    state()
+], NileMarkdownEditor.prototype, "splitDragging", void 0);
+NileMarkdownEditor = __decorate([
+    customElement('nile-markdown-editor')
+], NileMarkdownEditor);
+export { NileMarkdownEditor };
+export default NileMarkdownEditor;
+//# sourceMappingURL=nile-markdown-editor.js.map