@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts

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