@aquera/nile-elements 1.8.5 → 1.8.7

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

@@ -0,0 +1,266 @@
+/**
+ * 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 { css } from 'lit';
+/**
+ * Markdown editor CSS
+ */
+export const styles = css `
+  :host {
+    position: relative;
+    display: block;
+    font-family: inherit;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var( --nile-moz-osx-font-smoothing,var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .editor {
+    width: 100%;
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor--disabled {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    flex-wrap: wrap;
+    padding: 8px;
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .editor--disabled .header {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  }
+
+  .tabs {
+    display: flex;
+  }
+
+  /* Slimmer segmented control inside the editor header. */
+  .tabs nile-button-toggle::part(base) {
+    height: 28px;
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xs))
+      var(--nile-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+  }
+
+  .tab__content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+ 
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .toolbar__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: inherit;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    transition: background 0.15s ease;
+  }
+
+  .toolbar__button:hover {
+    background: var(--nile-colors-dark-100, var(--ng-colors-bg-primary-hover));
+  }
+
+  .toolbar__menu {
+    display: inline-flex;
+  }
+
+  .toolbar__menu .toolbar__button {
+    width: auto;
+    gap: 2px;
+  }
+
+  .toolbar__button nile-icon {
+    pointer-events: none;
+  }
+
+  .toolbar__divider {
+    margin: 0 4px;
+    display: inline-block;
+    height: 24px;
+    width: 1px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+  }
+
+  .toolbar__glyph--heading {
+    font-weight: bold;
+  }
+
+  .toolbar__glyph--strikethrough {
+    text-decoration: line-through;
+  }
+
+  .toolbar__glyph--code {
+    font-family: var(--nile-font-family-mono, monospace);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+  }
+
+  .body {
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    min-height: 160px;
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .pane {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Draggable divider between the write and preview panes in split mode. */
+  .gutter {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1px;
+    align-self: stretch;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  /* Widen the hit area without shifting the 1px visual line. */
+  .gutter::before {
+    content: '';
+    position: absolute;
+    inset: 0 -4px;
+  }
+
+  .gutter:hover,
+  .body--dragging .gutter {
+    background: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+  }
+
+  /* Keep the drag smooth: no text selection or pointer capture by the panes. */
+  .body--dragging {
+    cursor: col-resize;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .body--dragging .pane {
+    pointer-events: none;
+  }
+
+  .pane--write {
+    display: flex;
+  }
+
+  textarea {
+    flex: 1;
+    /* The body owns the resize/height now; the textarea fills it and scrolls
+       its own overflow. min-height:0 lets it shrink when the body shrinks. */
+    min-height: 0;
+    width: 100%;
+    padding: 12px;
+    border: none;
+    outline: none;
+    resize: none;
+    box-sizing: border-box;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-break: break-word;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  textarea::placeholder {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    opacity: 0.7;
+  }
+
+  .editor--disabled textarea {
+    background: var(
+      --nile-colors-dark-200,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .pane--preview {
+    min-height: 0;
+    padding: 12px;
+    overflow: auto;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .editor--disabled .pane--preview {
+    background: var(
+      --nile-colors-dark-200,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  }
+
+  .editor--split .pane--preview {
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md)) 0;
+  }
+
+  .editor--split textarea {
+    border-radius: 0 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .preview-empty {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    opacity: 0.7;
+  }
+`;
+//# sourceMappingURL=nile-markdown-editor.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-markdown-editor.css.js","sourceRoot":"","sources":["../../../src/nile-markdown-editor/nile-markdown-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Markdown editor CSS\n */\nexport const styles = css`\n  :host {\n    position: relative;\n    display: block;\n    font-family: inherit;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var( --nile-moz-osx-font-smoothing,var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .editor {\n    width: 100%;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .editor--disabled {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n    flex-wrap: wrap;\n    padding: 8px;\n    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-radius: 8px 8px 0 0;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .editor--disabled .header {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .tabs {\n    display: flex;\n  }\n\n  /* Slimmer segmented control inside the editor header. */\n  .tabs nile-button-toggle::part(base) {\n    height: 28px;\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xs))\n      var(--nile-spacing-md, var(--ng-spacing-md));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n  }\n\n  .tab__content {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n \n\n  .toolbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 6px;\n    min-width: 0;\n  }\n\n  .toolbar__button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    transition: background 0.15s ease;\n  }\n\n  .toolbar__button:hover {\n    background: var(--nile-colors-dark-100, var(--ng-colors-bg-primary-hover));\n  }\n\n  .toolbar__menu {\n    display: inline-flex;\n  }\n\n  .toolbar__menu .toolbar__button {\n    width: auto;\n    gap: 2px;\n  }\n\n  .toolbar__button nile-icon {\n    pointer-events: none;\n  }\n\n  .toolbar__divider {\n    margin: 0 4px;\n    display: inline-block;\n    height: 24px;\n    width: 1px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n  }\n\n  .toolbar__glyph--heading {\n    font-weight: bold;\n  }\n\n  .toolbar__glyph--strikethrough {\n    text-decoration: line-through;\n  }\n\n  .toolbar__glyph--code {\n    font-family: var(--nile-font-family-mono, monospace);\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n  }\n\n  .body {\n    display: flex;\n    align-items: stretch;\n    overflow: hidden;\n    min-height: 160px;\n    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))\n      var(--nile-radius-radius-xl, var(--ng-radius-md));\n  }\n\n  .pane {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n\n  /* Draggable divider between the write and preview panes in split mode. */\n  .gutter {\n    flex: 0 0 auto;\n    position: relative;\n    width: 1px;\n    align-self: stretch;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    cursor: col-resize;\n    touch-action: none;\n  }\n\n  /* Widen the hit area without shifting the 1px visual line. */\n  .gutter::before {\n    content: '';\n    position: absolute;\n    inset: 0 -4px;\n  }\n\n  .gutter:hover,\n  .body--dragging .gutter {\n    background: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  }\n\n  /* Keep the drag smooth: no text selection or pointer capture by the panes. */\n  .body--dragging {\n    cursor: col-resize;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .body--dragging .pane {\n    pointer-events: none;\n  }\n\n  .pane--write {\n    display: flex;\n  }\n\n  textarea {\n    flex: 1;\n    /* The body owns the resize/height now; the textarea fills it and scrolls\n       its own overflow. min-height:0 lets it shrink when the body shrinks. */\n    min-height: 0;\n    width: 100%;\n    padding: 12px;\n    border: none;\n    outline: none;\n    resize: none;\n    box-sizing: border-box;\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))\n      var(--nile-radius-radius-xl, var(--ng-radius-md));\n  }\n\n  textarea::placeholder {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    opacity: 0.7;\n  }\n\n  .editor--disabled textarea {\n    background: var(\n      --nile-colors-dark-200,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .pane--preview {\n    min-height: 0;\n    padding: 12px;\n    overflow: auto;\n    box-sizing: border-box;\n    word-wrap: break-word;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))\n      var(--nile-radius-radius-xl, var(--ng-radius-md));\n  }\n\n  .editor--disabled .pane--preview {\n    background: var(\n      --nile-colors-dark-200,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  .editor--split .pane--preview {\n    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md)) 0;\n  }\n\n  .editor--split textarea {\n    border-radius: 0 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md));\n  }\n\n  .preview-empty {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    opacity: 0.7;\n  }\n`;\n"]}

package/dist/src/nile-markdown-editor/nile-markdown-editor.d.ts

@@ -0,0 +1,121 @@
+/**
+ * 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;
+    }
+}