ngwr 14.7.0 → 14.9.0

package/editor/styles/_index.scss

@@ -0,0 +1,441 @@
+@use '../../theme/styles' as theme;
+
+.wr-editor {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+
+  // Defaults — modifiers only reassign these.
+  --wr-editor-color: var(--wr-color-on-surface);
+  --wr-editor-placeholder: var(--wr-color-placeholder);
+  --wr-editor-bg: var(--wr-color-surface);
+  --wr-editor-border: var(--wr-color-outline);
+  --wr-editor-radius: var(--wr-control-radius-md);
+  --wr-editor-ring: transparent;
+  --wr-editor-min-height: 8rem;
+  --wr-editor-max-height: none;
+  --wr-editor-padding-y: 0.5rem;
+  --wr-editor-padding-x: var(--wr-control-padding-x-md);
+  --wr-editor-font-size: var(--wr-text-sm);
+  --wr-editor-line-height: 1.6;
+  --wr-editor-toolbar-bg: var(--wr-color-fill-subtle);
+  --wr-editor-toolbar-border: var(--wr-color-outline);
+  --wr-editor-toolbar-gap: 0.125rem;
+  --wr-editor-tool-active-bg: var(--wr-color-primary-soft);
+  --wr-editor-tool-active-color: var(--wr-color-primary-ink);
+
+  background: var(--wr-editor-bg);
+  color: var(--wr-editor-color);
+  border: 1px solid var(--wr-editor-border);
+  @include theme.smooth-br(var(--wr-editor-radius));
+  box-shadow: 0 0 0 3px var(--wr-editor-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base),
+    background var(--wr-transition-base);
+
+  &--focused {
+    --wr-editor-border: var(--wr-color-primary);
+    --wr-editor-ring: rgba(var(--wr-color-primary-rgb), 0.15);
+  }
+
+  &--readonly &__surface {
+    cursor: default;
+  }
+
+  &--disabled {
+    --wr-editor-color: var(--wr-color-on-surface-muted);
+    --wr-editor-bg: var(--wr-color-fill);
+    cursor: not-allowed;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Toolbar
+  // ---------------------------------------------------------------------------
+
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-editor-toolbar-gap);
+    padding: 0.25rem;
+    border-block-end: 1px solid var(--wr-editor-toolbar-border);
+    background: var(--wr-editor-toolbar-bg);
+    // The frame's corners, which the toolbar would otherwise square off.
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  &__separator {
+    align-self: stretch;
+    inline-size: 1px;
+    margin-block: 0.25rem;
+    margin-inline: 0.25rem;
+    background: var(--wr-editor-toolbar-border);
+  }
+
+  // A `wr-btn` with its frame taken away until it is hovered or pressed, and
+  // squared around its glyph — the label span is the square, since the button's
+  // own icon-only rule keys on an empty label and this one holds the SVG.
+  //
+  // Doubled with `.wr-btn` on purpose: the button's defaults are declared on
+  // `.wr-btn` itself, and at equal specificity the winner would depend on which
+  // stylesheet an app happened to load last.
+  &__tool.wr-btn {
+    --wr-btn-bg: transparent;
+    --wr-btn-border: transparent;
+    padding-inline: calc(var(--wr-btn-padding-y) * var(--wr-density-y, 1));
+
+    &:hover {
+      --wr-btn-bg: var(--wr-color-hover);
+    }
+  }
+
+  &__tool {
+    .wr-btn__label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--wr-btn-line-height);
+      block-size: var(--wr-btn-line-height);
+    }
+
+    // The pressed bar — drawn in every state so the width below is the only
+    // thing a modifier changes, and a border so `forced-colors` keeps it.
+    &::after {
+      position: absolute;
+      inset-inline: 0.375rem;
+      inset-block-end: 0.1875rem;
+      border-block-end: var(--wr-editor-tool-mark, 0) solid currentColor;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  // Pressed is told apart by SHAPE as well as tint: the bar under the glyph is
+  // the channel a reader who cannot tell the colours apart still sees, and the
+  // one `forced-colors` keeps. `aria-pressed` carries it to assistive tech.
+  &__tool--active.wr-btn,
+  &__tool--active.wr-btn:hover {
+    --wr-btn-bg: var(--wr-editor-tool-active-bg);
+    --wr-btn-color: var(--wr-editor-tool-active-color);
+    --wr-editor-tool-mark: 2px;
+  }
+
+  &__icon {
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex: 0 0 auto;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Surface and preview
+  // ---------------------------------------------------------------------------
+
+  // The preview stands in for the surface until ProseMirror mounts, so the two
+  // share every metric — the swap must not move a line.
+  &__surface,
+  &__preview {
+    flex: 1 1 auto;
+    min-block-size: var(--wr-editor-min-height);
+    max-block-size: var(--wr-editor-max-height);
+    overflow-y: auto;
+    padding: calc(var(--wr-editor-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-editor-padding-x) * var(--wr-density-x, 1));
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-editor-font-size);
+    line-height: var(--wr-editor-line-height);
+    text-align: start;
+    outline: 0;
+    // ProseMirror's own base rules, restated rather than imported: an optional
+    // peer's stylesheet cannot be loaded from this entry point, and its copy
+    // hard-codes a colour and a physical offset.
+    position: relative;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    font-variant-ligatures: none;
+    font-feature-settings: 'liga' 0;
+  }
+
+  &__surface[hidden] {
+    display: none;
+  }
+
+  &--disabled &__surface {
+    cursor: not-allowed;
+  }
+
+  // The placeholder is a node decoration on the empty paragraph: ProseMirror
+  // renders an empty textblock with a trailing `<br>`, so `:empty` never matches.
+  // `/ ''` gives the generated text an empty ALTERNATIVE, so assistive tech does
+  // not read it as content — `aria-placeholder` on the surface already says it.
+  &__placeholder::before {
+    float: inline-start;
+    block-size: 0;
+    color: var(--wr-editor-placeholder);
+    // Twice on purpose: an engine that does not know the alternative-text syntax
+    // drops the second declaration and keeps the first.
+    content: attr(data-placeholder);
+    content: attr(data-placeholder) / '';
+    pointer-events: none;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Content — the same elements ProseMirror and the preview both render
+  // ---------------------------------------------------------------------------
+
+  &__content {
+    > :first-child {
+      margin-block-start: 0;
+    }
+
+    > :last-child {
+      margin-block-end: 0;
+    }
+
+    p {
+      margin-block: 0 0.75em;
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin-block: 1.25em 0.5em;
+      font-weight: var(--wr-font-weight-semibold);
+      line-height: 1.3;
+    }
+
+    h1 {
+      font-size: var(--wr-text-2xl);
+    }
+
+    h2 {
+      font-size: var(--wr-text-xl);
+    }
+
+    h3 {
+      font-size: var(--wr-text-lg);
+    }
+
+    strong {
+      font-weight: var(--wr-font-weight-semibold);
+    }
+
+    a {
+      color: var(--wr-color-primary-ink);
+      text-decoration: underline;
+      text-underline-offset: 0.15em;
+    }
+
+    code {
+      padding: 0.1em 0.3em;
+      border-radius: var(--wr-border-radius-sm);
+      background: var(--wr-color-fill);
+      // `-ink`: code on a tint is text, and the bare colour fails AA there.
+      color: var(--wr-color-dark-ink);
+      font-family: var(--wr-font-family-mono, ui-monospace, monospace);
+      font-size: 0.9em;
+    }
+
+    pre {
+      margin-block: 0 0.75em;
+      padding: 0.75rem;
+      overflow-x: auto;
+      border-radius: var(--wr-border-radius-base);
+      background: var(--wr-color-fill);
+      white-space: pre-wrap;
+      tab-size: 2;
+      // Code is not prose: under RTL `foo();` would be reordered to `;foo()`.
+      direction: ltr;
+      text-align: left; // rtl-ok: pinned LTR above, so the physical side is the logical one
+
+      code {
+        padding: 0;
+        background: none;
+        font-size: 0.875em;
+      }
+    }
+
+    blockquote {
+      margin-block: 0 0.75em;
+      margin-inline: 0;
+      padding-inline-start: 1em;
+      border-inline-start: 3px solid var(--wr-color-outline);
+      color: var(--wr-color-on-surface-muted);
+    }
+
+    ul,
+    ol {
+      margin-block: 0 0.75em;
+      padding-inline-start: 1.5em;
+
+      ul,
+      ol {
+        margin-block-end: 0;
+      }
+    }
+
+    li {
+      position: relative;
+      margin-block: 0.15em;
+
+      > p {
+        margin-block-end: 0;
+      }
+    }
+
+    hr {
+      margin-block: 1.25em;
+      border: 0;
+      border-block-start: 1px solid var(--wr-color-outline);
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-block: 0 0.75em;
+      font-size: var(--wr-text-sm);
+    }
+
+    th,
+    td {
+      padding: 0.375rem 0.625rem;
+      border: 1px solid var(--wr-color-outline);
+      vertical-align: top;
+
+      > p {
+        margin: 0;
+      }
+    }
+
+    th {
+      background: var(--wr-color-fill-subtle);
+      font-weight: var(--wr-font-weight-semibold);
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--wr-border-radius-sm);
+    }
+  }
+
+  // Task items — the box is presentational and the state is read from the words
+  // beside it, the way `<wr-markdown>` draws them.
+  &__item--task {
+    display: flex;
+    gap: 0.5em;
+    list-style: none;
+    margin-inline-start: -1.5em;
+  }
+
+  &__task {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-block-start: 0.3em;
+    border: 1px solid var(--wr-color-outline);
+    border-radius: var(--wr-border-radius-sm);
+    background: var(--wr-color-surface);
+    user-select: none;
+
+    // color-ok: the nested `&::after` draws a tick out of two borders, and the
+    // unchecked box has no pseudo-element at all — the glyph appears, the tint
+    // only backs it.
+    &--checked {
+      border-color: var(--wr-color-primary);
+      background: var(--wr-color-primary);
+
+      &::after {
+        position: absolute;
+        inset-block-start: 0.12em;
+        inset-inline-start: 0.3em;
+        width: 0.3em;
+        height: 0.55em;
+        border: solid var(--wr-color-primary-contrast);
+        border-width: 0 2px 2px 0; // rtl-ok: a tick is a glyph, not a layout — mirroring it would draw it backwards
+        content: '';
+        rotate: 45deg;
+      }
+    }
+  }
+
+  &__task-body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  // ProseMirror's own state classes, which it names and this stylesheet can only
+  // answer to — hence the BEM exemption.
+  /* stylelint-disable selector-class-pattern */
+  &__surface.ProseMirror-hideselection {
+    caret-color: transparent;
+
+    *::selection {
+      background: transparent;
+    }
+  }
+
+  &__surface .ProseMirror-selectednode {
+    @include theme.focus-ring;
+  }
+
+  &__surface img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+  }
+  /* stylelint-enable selector-class-pattern */
+
+  &__surface [draggable][contenteditable='false'] {
+    user-select: text;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Link panel — rendered in the overlay container, outside the editor's host,
+// so it is a block of its own.
+// ---------------------------------------------------------------------------
+
+.wr-editor-link {
+  inline-size: min(22rem, calc(100vw - 2rem));
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
+
+  &__label {
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-medium);
+    color: var(--wr-color-on-surface);
+  }
+
+  &__error {
+    margin: 0;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-danger-ink);
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+}