@aquera/nile-elements 1.9.5 → 1.9.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-wysiwyg-editor.css.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2wBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --nile-wysiwyg-font-family,\n      var(\n        --nile-font-family-sans-serif,\n        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n      )\n    );\n  }\n\n  .nile-wysiwyg {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-border-color,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd))\n      );\n    border-radius: var(\n      --nile-wysiwyg-radius,\n      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n    );\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))\n    );\n    box-sizing: border-box;\n  }\n\n  /* --- Fullscreen (distraction-free) mode --- */\n  :host([fullscreen]) {\n    position: fixed;\n    inset: 0;\n    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))\n    );\n  }\n\n  :host([fullscreen]) .nile-wysiwyg {\n    height: 100%;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([fullscreen]) .nile-wysiwyg__surface {\n    max-height: none;\n  }\n\n  :host([disabled]) .nile-wysiwyg {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled, #98a2b3));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))\n    );\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .ProseMirror {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));\n  }\n\n  .nile-wysiwyg__surface {\n    flex: 1;\n    overflow-y: auto;\n    max-height: var(--nile-wysiwyg-max-height, none);\n  }\n\n  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */\n  .ProseMirror {\n    position: relative;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    white-space: break-spaces;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    font-feature-settings: 'liga' 0;\n    outline: none;\n    padding: var(--nile-wysiwyg-content-padding, 12px);\n    min-height: var(--nile-wysiwyg-min-height, 160px);\n    font-size: var(--nile-wysiwyg-font-size, inherit);\n    line-height: var(--nile-wysiwyg-line-height, inherit);\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    color: var(\n      --nile-wysiwyg-color,\n      var(--nile-colors-dark-900, var(--ng-colors-text-primary, #101828))\n    );\n    box-sizing: border-box;\n    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n  }\n\n  .ProseMirror pre {\n    white-space: pre-wrap;\n  }\n\n  .ProseMirror li {\n    position: relative;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection {\n    caret-color: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: 2px solid\n      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb)));\n  }\n\n  /* Gap cursor (inlined from prosemirror-gapcursor/style) */\n  .ProseMirror-gapcursor {\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .ProseMirror-gapcursor:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: -2px;\n    width: 20px;\n    border-top: 1px solid currentColor;\n    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n  }\n\n  @keyframes nile-wysiwyg-cursor-blink {\n    to {\n      visibility: hidden;\n    }\n  }\n\n  .ProseMirror-focused .ProseMirror-gapcursor {\n    display: block;\n  }\n\n  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */\n  .nile-wysiwyg__empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.7;\n    color: var(\n      --nile-wysiwyg-placeholder-color,\n      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3))\n    );\n  }\n\n  /* --- Document content typography --- */\n  .ProseMirror > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Legacy nile-rich-text-editor typography */\n  .ProseMirror p {\n    margin: 1em 0;\n  }\n\n  .ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {\n    font-weight: bold;\n  }\n\n  .ProseMirror h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n  }\n  .ProseMirror h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n  }\n  .ProseMirror h3 {\n    font-size: 1.17em;\n    margin: 1em 0;\n  }\n  .ProseMirror h4 {\n    font-size: 1em;\n    margin: 1.33em 0;\n  }\n  .ProseMirror h5 {\n    font-size: 0.83em;\n    margin: 1.67em 0;\n  }\n  .ProseMirror h6 {\n    font-size: 0.67em;\n    margin: 2.33em 0;\n  }\n\n  .ProseMirror blockquote {\n    margin: 0.5em 0;\n    padding: 0.25em 0 0.25em 1em;\n    border-left: 3px solid\n      var(\n        --nile-wysiwyg-blockquote-border,\n        var(--nile-colors-neutral-300, #d0d5dd)\n      );\n    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));\n  }\n\n  .ProseMirror ul,\n  .ProseMirror ol {\n    list-style-position: outside;\n    padding-inline-start: 24px;\n  }\n\n  .ProseMirror hr {\n    border: none;\n    border-top: 1px solid var(--nile-wysiwyg-border-color, #d0d5dd);\n    margin: 1em 0;\n  }\n\n  /* Legacy: brand color, no underline */\n  .ProseMirror a {\n    color: var(\n      --nile-wysiwyg-link-color,\n      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600, #2563eb))\n    );\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .ProseMirror code.nile-wysiwyg__inline-code {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));\n    border-radius: 4px;\n    padding: 0.1em 0.35em;\n  }\n\n  /* --- Code blocks --- */\n  .ProseMirror pre.nile-wysiwyg__code-block {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));\n    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin: 0.5em 0;\n    overflow-x: auto;\n  }\n\n  /* --- Tables (rules required by prosemirror-tables) --- */\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 0.5em 0;\n  }\n\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td,\n  .ProseMirror th {\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n    border: 1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));\n    font-weight: 600;\n    text-align: left;\n  }\n\n  .ProseMirror td > :last-child,\n  .ProseMirror th > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: var(--nile-colors-primary-300, #b692f6);\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n     guides while editing so the structure stays visible. --- */\n  .ProseMirror table[data-layout] td,\n  .ProseMirror table[data-layout] th {\n    border: 1px dashed var(--nile-colors-neutral-300, #e4e7ec);\n    background: transparent;\n    font-weight: inherit;\n    text-align: inherit;\n  }\n\n  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */\n  .ProseMirror a[data-bookmark] {\n    display: inline-block;\n    vertical-align: baseline;\n    cursor: default;\n    text-decoration: none;\n  }\n\n  .ProseMirror a[data-bookmark]::after {\n    content: '⚑';\n    font-size: 12px;\n    line-height: 1;\n    padding: 0 1px;\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n  }\n\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n    pointer-events: none;\n  }\n\n  /* --- Images (ProseMirror's standard inline image node) --- */\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n  }\n\n  /* --- Image resize handles --- */\n  .ProseMirror .nile-wysiwyg__image-resizer {\n    position: relative;\n    display: inline-block;\n    line-height: 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle {\n    display: none;\n    position: absolute;\n    width: 9px;\n    height: 9px;\n    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n    border: 1.5px solid #ffffff;\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n  /* --- Captioned figures --- */\n  .ProseMirror figure.nile-wysiwyg__figure {\n    margin: 0.75em 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure img {\n    width: 100%;\n    display: block;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__figcaption {\n    font-size: 0.85em;\n    color: var(--nile-colors-neutral-500, #667085);\n    text-align: center;\n    padding: 4px 8px;\n    line-height: 1.4;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n    content: 'Add a caption…';\n    float: left;\n    width: 100%;\n    pointer-events: none;\n    color: var(--nile-colors-neutral-400, #98a2b3);\n    margin-bottom: -1.4em;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--selected {\n    border-radius: 4px;\n  }\n\n  /* --- Embeds --- */\n  .ProseMirror div.nile-wysiwyg__embed {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    /* Default size; an inline width from drag-resize overrides it, capped by\n       max-width. overflow stays visible so the resize handles aren't clipped\n       (rounding lives on the iframe). */\n    width: min(640px, 100%);\n    max-width: 100%;\n    margin: 0.75em 0;\n    border-radius: 8px;\n    background: var(--nile-colors-neutral-100, #f2f4f7);\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    border-radius: 8px;\n    /* Editing mode: the first click selects the node instead of hitting the\n       iframe; once selected (or in readonly) the video is interactive. */\n    pointer-events: none;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n    pointer-events: auto;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  /* A live resize drag must not lose mousemove to the embedded document. */\n  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n    pointer-events: none !important;\n  }\n\n  /* --- Code highlighting (compact light theme for hljs tokens) --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: #a0a1a7;\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-keyword,\n  .ProseMirror .hljs-selector-tag,\n  .ProseMirror .hljs-formula,\n  .ProseMirror .hljs-doctag {\n    color: #a626a4;\n  }\n\n  .ProseMirror .hljs-section,\n  .ProseMirror .hljs-name,\n  .ProseMirror .hljs-selector-id,\n  .ProseMirror .hljs-selector-class,\n  .ProseMirror .hljs-deletion,\n  .ProseMirror .hljs-subst,\n  .ProseMirror .hljs-tag {\n    color: #e45649;\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: #0184bb;\n  }\n\n  .ProseMirror .hljs-string,\n  .ProseMirror .hljs-regexp,\n  .ProseMirror .hljs-addition,\n  .ProseMirror .hljs-attribute,\n  .ProseMirror .hljs-meta .hljs-string {\n    color: #50a14f;\n  }\n\n  .ProseMirror .hljs-attr,\n  .ProseMirror .hljs-variable,\n  .ProseMirror .hljs-template-variable,\n  .ProseMirror .hljs-type,\n  .ProseMirror .hljs-selector-attr,\n  .ProseMirror .hljs-selector-pseudo,\n  .ProseMirror .hljs-number {\n    color: #986801;\n  }\n\n  .ProseMirror .hljs-symbol,\n  .ProseMirror .hljs-meta,\n  .ProseMirror .hljs-link,\n  .ProseMirror .hljs-operator,\n  .ProseMirror .hljs-title,\n  .ProseMirror .hljs-title.class_,\n  .ProseMirror .hljs-title.function_ {\n    color: #4078f2;\n  }\n\n  .ProseMirror .hljs-emphasis {\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-strong {\n    font-weight: bold;\n  }\n\n  /* --- Checklists --- */\n  .ProseMirror ul.nile-wysiwyg__task-list {\n    list-style: none;\n    padding-inline-start: 4px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n    /* Center on the first text line: (1 line box - checkbox height) / 2. */\n    margin: calc((1em * 1.45 - 14px) / 2) 0 0;\n    width: 14px;\n    height: 14px;\n    flex: none;\n    cursor: pointer;\n    accent-color: var(--nile-colors-primary-600, #2563eb);\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* The content's paragraph margins (legacy 1em) push text below the\n     checkbox — strip them at the edges of each item. */\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n    margin-top: 0.35em;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n    color: var(--nile-colors-neutral-500, #98a2b3);\n    text-decoration: line-through;\n  }\n\n  /* --- Counter footer --- */\n  .nile-wysiwyg__counter {\n    padding: 4px 12px 6px;\n    text-align: right;\n    font-size: 12px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3));\n    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, #d92d20);\n    font-weight: 600;\n  }\n\n  /* --- Sticky toolbar --- */\n  :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n    position: sticky;\n    top: var(--nile-wysiwyg-sticky-top, 0);\n    z-index: 12;\n  }\n\n  /* --- Mentions & suggestions --- */\n  .ProseMirror span.nile-wysiwyg__mention {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));\n    font-weight: 500;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n  }\n\n  /* --- Merge fields --- */\n  .ProseMirror span.nile-wysiwyg__merge-field {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));\n    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));\n    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.9em;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n  }\n\n  /* --- Math --- */\n  .ProseMirror span.nile-wysiwyg__math {\n    display: inline-block;\n    padding: 0 2px;\n    font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math--block {\n    display: block;\n    text-align: center;\n    margin: 8px 0;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n    border-radius: 3px;\n  }\n\n  /* Format painter armed: hint the next selection will be painted. */\n  .ProseMirror.nile-wysiwyg--painting {\n    cursor: cell;\n  }\n\n  .ProseMirror .nile-wysiwyg__suggestion {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n    border-radius: 3px;\n  }\n\n  /* --- Find & replace highlights --- */\n  .ProseMirror .nile-wysiwyg__find-match {\n    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n    border-radius: 2px;\n  }\n\n  .ProseMirror .nile-wysiwyg__find-active {\n    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n  }\n\n  /* --- Upload placeholder --- */\n  .nile-wysiwyg__upload-placeholder {\n    display: inline-block;\n    padding: 6px 12px;\n    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, #f9fafb);\n    color: var(--nile-colors-neutral-600, #475467);\n    font-size: 0.85em;\n  }\n\n  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n     Serialized output carries data-list-style=\"multilevel\"; consumers\n     rendering it outside the editor need these same counter rules. --- */\n  .ProseMirror ol[data-list-style='multilevel'],\n  .ProseMirror ol[data-list-style='multilevel'] ol {\n    list-style: none;\n    counter-reset: nile-multilevel;\n  }\n\n  .ProseMirror ol[data-list-style='multilevel'] > li,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li {\n    counter-increment: nile-multilevel;\n  }\n\n  /* The number sits inside the item's first paragraph so it shares a line. */\n  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n    content: counters(nile-multilevel, '.') '. ';\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* --- Show blocks: dashed outlines + tag labels while editing --- */\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre,\n  .nile-wysiwyg--show-blocks .ProseMirror figure,\n  .nile-wysiwyg--show-blocks .ProseMirror ul,\n  .nile-wysiwyg--show-blocks .ProseMirror ol,\n  .nile-wysiwyg--show-blocks .ProseMirror li,\n  .nile-wysiwyg--show-blocks .ProseMirror table {\n    outline: 1px dashed var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));\n    outline-offset: -1px;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre {\n    position: relative;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0 3px;\n    font-family: system-ui, sans-serif;\n    font-size: 9px;\n    font-weight: 600;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.5px;\n    color: var(--nile-colors-neutral-500, #667085);\n    background: var(--nile-colors-neutral-100, #f2f4f7);\n    border-radius: 0 0 4px 0;\n    pointer-events: none;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n`;\n"]}

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

@@ -0,0 +1,364 @@
+import { TemplateResult, CSSResultArray, PropertyValues } from 'lit';
+import { EditorView } from 'prosemirror-view';
+import NileElement from '../internal/nile-element';
+import type { CommandAttrs } from './engine/commands';
+import type { MathRenderer } from './engine/plugins/math-view';
+import type { MentionsConfig, SnippetConfig, MergeFieldConfig, TemplateConfig } from './types';
+import './nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';
+import './ui/link-editor';
+import './ui/bubble-menu';
+import './ui/image-panel';
+import './ui/table-menu';
+import './ui/suggest-list';
+import './ui/find-replace';
+import './ui/source-view';
+import './ui/embed-panel';
+import './ui/bookmark-panel';
+import './ui/code-block-menu';
+import './ui/shortcut-help';
+import './ui/image-menu';
+import './ui/embed-menu';
+import './ui/special-chars';
+import './ui/emoji-picker';
+import './ui/insert-menu';
+import './ui/math-panel';
+import './ui/markdown-panel';
+/**
+ * WYSIWYG rich text editor powered by ProseMirror.
+ *
+ * Requires evergreen browsers: selection inside shadow DOM relies on
+ * `Selection.getComposedRanges()` (Safari 17+, recent Firefox) or Chrome's
+ * `shadowRoot.getSelection()`.
+ *
+ * @tag nile-wysiwyg-editor
+ *
+ * @event nile-change - Debounced content change. detail: { value, json, content }
+ * @event nile-input - Every document change. detail: { value, json, content }
+ * @event nile-focus - Editor gained focus.
+ * @event nile-blur - Editor lost focus.
+ * @event nile-selection-change - detail: ToolbarState snapshot.
+ * @event nile-image-upload-request - Cancelable. detail: { file, insert(src, alt) }.
+ *   Call preventDefault() and use insert() to fully own the upload.
+ * @event nile-image-upload-error - detail: { file, error } when uploadHandler rejects.
+ * @event nile-mention-query - detail: { trigger, query, provide(items) } for async sources.
+ * @event nile-mention-select - detail: { trigger, key, label } when a mention is inserted.
+ * @event nile-word-count - detail: { words, characters } on every document change.
+ * @event nile-autosave - detail: { value, json, content } on the autosave interval.
+ *
+ * @csspart base - Outer container.
+ * @csspart toolbar - The toolbar element.
+ * @csspart surface - The scrollable editing surface.
+ */
+export declare class NileWysiwygEditor extends NileElement {
+    static formAssociated: boolean;
+    /** Document content as HTML. Not reflected to the attribute. */
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    /** Toolbar config string; `"none"` hides the toolbar. */
+    toolbar: string;
+    /** Shows a balloon toolbar over text selections. */
+    bubbleMenu: boolean;
+    /** Sanitizes incoming HTML (value, paste, insertHTML). Leave on. */
+    sanitize: boolean;
+    /** Constrains content to a single paragraph. */
+    singleLine: boolean;
+    /** Form field name. */
+    name: string;
+    required: boolean;
+    /**
+     * Async image upload handler. When set, pasted/dropped/picked image files
+     * are uploaded through it (an "Uploading…" placeholder shows meanwhile)
+     * and the returned src is inserted.
+     */
+    uploadHandler?: (file: File) => Promise<{
+        src: string;
+        alt?: string;
+    }>;
+    /**
+     * Fallback when no uploadHandler is set and no nile-image-upload-request
+     * listener takes over: embed image files as base64 data URLs.
+     */
+    allowBase64Images: boolean;
+    /**
+     * Shows an "Upload from computer" button in the Insert Image dialog. Off by
+     * default (URL-only, like the RTE's default); files can always be added via
+     * drag & drop or paste regardless.
+     */
+    uploadFromComputer: boolean;
+    /** Max upload size (bytes) shown/enforced by the image dialog. Default 2 MB. */
+    imageMaxFileSize: number;
+    /**
+     * Mention config: trigger character → items, same shape and JSON attribute
+     * format as nile-rich-text-editor. For async sources, configure the
+     * trigger with an empty array and listen to nile-mention-query.
+     */
+    mentions: MentionsConfig;
+    /** Disables the "/" command menu. */
+    noSlashCommands: boolean;
+    /** Disables the ":" emoji picker. */
+    noEmoji: boolean;
+    /** Maximum character count; further input is rejected. 0 = unlimited. */
+    maxLength: number;
+    /** Always show the word/character counter footer (implied by maxlength). */
+    showCounter: boolean;
+    /** Keeps the toolbar pinned to the viewport while scrolling long content. */
+    stickyToolbar: boolean;
+    /** Reusable snippets surfaced in the "/" menu (JSON attribute). */
+    snippets: SnippetConfig[];
+    /** Merge fields offered in the merge-field picker (JSON attribute). */
+    mergeFields: MergeFieldConfig[];
+    /** Content templates offered in the template picker (JSON attribute). */
+    templates: TemplateConfig[];
+    /**
+     * Renders a math node's LaTeX to HTML (KaTeX/MathJax/MathML). When unset,
+     * the raw LaTeX is shown. Same trust level as uploadHandler — output is
+     * inserted as HTML.
+     */
+    mathRenderer?: MathRenderer;
+    /** Emit nile-autosave every N ms while the document has changed. 0 = off. */
+    autosaveInterval: number;
+    /** When on, every paste drops formatting and inserts plain text. */
+    pasteAsPlainText: boolean;
+    /** Disables Markdown detection on plain-text pastes. */
+    noMarkdownPaste: boolean;
+    /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
+    noTextTransform: boolean;
+    /** Expands the editor to fill the viewport. Esc exits. */
+    fullscreen: boolean;
+    /** Outlines block boundaries (paragraphs, headings, lists…) while editing. */
+    showBlocks: boolean;
+    private toolbarState?;
+    private hasFocus;
+    private sourceMode;
+    private counter;
+    /** Which list the shared insert-menu is showing, if open. */
+    private insertMenuMode;
+    private baseEl;
+    private toolbarEl?;
+    private surfaceEl;
+    private linkEditorEl;
+    private bubbleMenuEl;
+    private imagePanelEl;
+    private tableMenuEl;
+    private suggestListEl;
+    private findBarEl;
+    private sourceViewEl?;
+    private embedPanelEl;
+    private bookmarkPanelEl;
+    private codeMenuEl;
+    private shortcutHelpEl;
+    private imageMenuEl;
+    private embedMenuEl;
+    private specialCharsEl;
+    private emojiPickerEl;
+    private insertMenuEl;
+    private mathPanelEl;
+    private markdownPanelEl;
+    private view?;
+    private mentionMatch;
+    private slashMatch;
+    private emojiMatch;
+    private activeSuggestSource;
+    private suggestDismissed;
+    private mentionQueryToken;
+    private autosaveTimer?;
+    private lastAutosaveValue;
+    private internals?;
+    private defaultValue;
+    private syncingValue;
+    private changeTimer?;
+    private pendingChange;
+    /** Body overflow value before fullscreen locked it; null = not locked. */
+    private previousBodyOverflow;
+    static get styles(): CSSResultArray;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private restartAutosave;
+    private buildState;
+    /**
+     * ToolbarState snapshot augmented with host-only flags the pure
+     * computeToolbarState can't know about (e.g. the paste-as-plain-text toggle).
+     */
+    private snapshotToolbar;
+    private mountView;
+    private handleTransaction;
+    private buildChangeDetail;
+    private scheduleChange;
+    private flushChange;
+    private syncFormValue;
+    private updateValidity;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    /** Positions an overlay element near a doc position (default: selection). */
+    private positionOverlay;
+    /** Positions a floating panel directly below a toolbar/anchor element. */
+    private positionOverlayBelowAnchor;
+    /** Finds a toolbar button by its aria-label, to anchor a panel below it. */
+    private toolbarButton;
+    private updateOverlays;
+    private openSpecialChars;
+    private closeSpecialChars;
+    private insertSpecialChar;
+    private openInsertMenu;
+    private closeInsertMenu;
+    private handleInsertSelect;
+    /** Inserts a merge-field placeholder at the selection. */
+    insertMergeField(id: string, label?: string): void;
+    /** Changes the case of the selected text. */
+    changeCase(mode: 'upper' | 'lower' | 'title' | 'sentence'): void;
+    private openMathPanel;
+    private closeMathPanel;
+    private openMarkdownPanel;
+    private closeMarkdownPanel;
+    private applyMath;
+    /** Inserts a math formula (LaTeX) at the selection. */
+    insertMath(latex: string, display?: 'inline' | 'block'): void;
+    private openEmojiPicker;
+    private closeEmojiPicker;
+    private openEmbedPanel;
+    private closeEmbedPanel;
+    private openBookmarkPanel;
+    private closeBookmarkPanel;
+    private openImagePanel;
+    private closeImagePanel;
+    private insertImageAt;
+    /**
+     * Routes an image file through the upload pipeline: a cancelable
+     * `nile-image-upload-request` first, then `uploadHandler` (with an
+     * uploading placeholder), then the base64 fallback.
+     */
+    insertImageFile(file: File, pos?: number | null, meta?: {
+        alt?: string | null;
+        caption?: string | null;
+    }): Promise<void>;
+    private dismissKeyFor;
+    private handleSuggestKey;
+    private closeSuggestList;
+    private updateSuggestList;
+    private handleSuggestSelect;
+    /** Opens the find & replace bar (also bound to Mod-f inside the editor). */
+    openFindBar(): void;
+    closeFindBar(): void;
+    find(query: string): number;
+    findNext(): void;
+    findPrev(): void;
+    replace(replacement: string): void;
+    replaceAll(replacement: string): void;
+    private scrollToActiveMatch;
+    /** Toggles raw-HTML source editing. Content re-sanitizes on the way back. */
+    toggleSourceView(): void;
+    private applySourceView;
+    /** Word and character counts for the current document. */
+    getWordCount(): {
+        words: number;
+        characters: number;
+    };
+    /**
+     * Arms the format painter (copies the formatting at the selection) or, if
+     * already armed, disarms it. Once armed, the next non-empty selection the
+     * user makes receives the copied formatting.
+     */
+    toggleFormatPainter(): void;
+    /** The live, styled content element used as the source for exports. */
+    private get contentRoot();
+    /** Sanitizes `this.name` (or a fallback) into a safe download basename. */
+    private exportFilename;
+    private downloadBlob;
+    /**
+     * The document as HTML with every style folded into inline `style`
+     * attributes — the form email clients (which strip `<style>` blocks and
+     * classes) can render. Returns the string; does not download.
+     */
+    getInlineStyledHTML(): string;
+    /** Downloads the document as an inline-styled, email-ready `.html` file. */
+    exportInlineHtml(filename?: string): void;
+    /** Downloads the document as a Word-openable `.doc` file. */
+    exportToWord(filename?: string): void;
+    /**
+     * Opens the browser print dialog with a self-contained, print-tuned copy of
+     * the document ("Save as PDF"). Honours page breaks, embedded images and the
+     * base font; optional running header/footer text.
+     */
+    exportToPdf(options?: {
+        header?: string;
+        footer?: string;
+        fontFamily?: string;
+    }): void;
+    /**
+     * Imports Word / Google-Docs HTML: normalizes the proprietary markup to
+     * clean semantic HTML, then replaces the document. Fidelity note: comments
+     * and track-changes are not preserved — the editor has no model for them,
+     * and binary `.docx`/`.doc` files are not parsed (export as "Web Page" /
+     * HTML first, or paste directly, which is handled automatically).
+     */
+    importFromWord(html: string, emitChange?: boolean): void;
+    /** Opens a file picker for an HTML export and imports it (toolbar action). */
+    private importFromWordFile;
+    /** Opens the keyboard shortcut reference (also bound to Mod-/). */
+    openShortcutHelp(): void;
+    closeShortcutHelp(): void;
+    /** Toggles distraction-free fullscreen mode. Esc exits. */
+    toggleFullscreen(): void;
+    private openLinkEditor;
+    private closeLinkEditor;
+    private applyLink;
+    /** The underlying ProseMirror EditorView. Advanced escape hatch. */
+    get pmView(): EditorView | undefined;
+    /** Document as ProseMirror JSON. */
+    get json(): Record<string, unknown> | null;
+    set json(value: Record<string, unknown> | null);
+    focus(): void;
+    blur(): void;
+    getHTML(): string;
+    getJSON(): Record<string, unknown> | null;
+    getText(): string;
+    /**
+     * Document as Markdown. Best-effort: structural nodes and Markdown-native
+     * marks are converted; color/font marks are dropped to plain text. Use
+     * getHTML() when a loss-free representation is required.
+     */
+    getMarkdown(): string;
+    /**
+     * Replaces the document with parsed Markdown. Covers the same subset as
+     * getMarkdown(): headings, lists, code fences, tables, quotes and the
+     * inline marks. The parsed HTML flows through the schema and sanitizer.
+     */
+    setMarkdown(markdown: string, emitChange?: boolean): void;
+    /** Parses and inserts Markdown at the current selection. */
+    insertMarkdown(markdown: string): void;
+    /** Replaces the document. Accepts an HTML string or ProseMirror JSON. */
+    setContent(content: string | Record<string, unknown>, emitChange?: boolean): void;
+    clear(): void;
+    /** Parses and inserts HTML at the current selection. */
+    insertHTML(htmlContent: string): void;
+    /** Runs a named editor command. Returns whether the command applied. */
+    execCommand(name: string, attrs?: CommandAttrs): boolean;
+    /** True when the given mark/block command is active at the selection. */
+    isCommandActive(name: string): boolean;
+    private handleCommand;
+    private handleBaseKeydown;
+    private handleChromeFocusOut;
+    /** The floating insert panels that should dismiss on outside interaction. */
+    private get floatingPanels();
+    /** Closes every open insert panel. `refocus` returns focus to the editor. */
+    private closeAllPanels;
+    /**
+     * Closes any open insert panel when the pointer goes down outside of it —
+     * whether elsewhere in the editor (e.g. the content area) or off the widget.
+     */
+    private onOutsidePointerDown;
+    render(): TemplateResult;
+}
+export default NileWysiwygEditor;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-editor': NileWysiwygEditor;
+    }
+}