@aleph-alpha/chat-kit 6.4.0 → 6.4.1

package/dist/{index-DKwEe_Tu.js → index-g_Bs6dNr.js}

@@ -1,7 +1,7 @@
-import { L as LRLanguage, a as LanguageSupport, p as parseMixed, s as styleTags, t as tags } from "./code-palette-DH_G7mZ5.js";
-import { html } from "./index-BqWO6mvz.js";
-import { javascriptLanguage } from "./index-BlIc9r0r.js";
-import { L as LRParser, E as ExternalTokenizer } from "./index-Mh3WUU-6.js";
+import { L as LRLanguage, a as LanguageSupport, p as parseMixed, s as styleTags, t as tags } from "./code-palette-BWrZDi47.js";
+import { html } from "./index-ptbBQ53d.js";
+import { javascriptLanguage } from "./index-Cx5ThXzs.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
 const Text = 1, attributeContentSingle = 33, attributeContentDouble = 34, scriptAttributeContentSingle = 35, scriptAttributeContentDouble = 36;
 const text = /* @__PURE__ */ new ExternalTokenizer((input) => {
   let start = input.pos;

package/dist/{index-S4ylc8JK.js → index-oO_X5wU0.js}

@@ -1,6 +1,6 @@
-import { E as EditorView, d as EditorSelection, a as LanguageSupport, p as parseMixed, b as syntaxTree, L as LRLanguage, s as styleTags, t as tags, i as indentNodeProp, e as delimitedIndent, f as foldNodeProp } from "./code-palette-DH_G7mZ5.js";
-import { html } from "./index-BqWO6mvz.js";
-import { L as LRParser, E as ExternalTokenizer } from "./index-Mh3WUU-6.js";
+import { E as EditorView, d as EditorSelection, a as LanguageSupport, p as parseMixed, b as syntaxTree, L as LRLanguage, s as styleTags, t as tags, i as indentNodeProp, e as delimitedIndent, f as foldNodeProp } from "./code-palette-BWrZDi47.js";
+import { html } from "./index-ptbBQ53d.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
 const interpolationStart = 1, tagStart = 2, endTagStart = 3, text = 180, endrawTagStart = 4, rawText = 181, endcommentTagStart = 5, commentText = 182, InlineComment = 6;
 function wordChar(code) {
   return code >= 65 && code <= 90 || code >= 97 && code <= 122;

package/dist/{index-BqWO6mvz.js → index-ptbBQ53d.js}

@@ -1,7 +1,7 @@
-import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-Mh3WUU-6.js";
-import { p as parseMixed, s as styleTags, t as tags, E as EditorView, b as syntaxTree, d as EditorSelection, a as LanguageSupport, L as LRLanguage, i as indentNodeProp, f as foldNodeProp, ag as bracketMatchingHandle } from "./code-palette-DH_G7mZ5.js";
-import { cssLanguage, css } from "./index-DfLCrnVq.js";
-import { typescriptLanguage, jsxLanguage, tsxLanguage, javascriptLanguage, javascript } from "./index-BlIc9r0r.js";
+import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-2YPxXIaf.js";
+import { p as parseMixed, s as styleTags, t as tags, E as EditorView, b as syntaxTree, d as EditorSelection, a as LanguageSupport, L as LRLanguage, i as indentNodeProp, f as foldNodeProp, ag as bracketMatchingHandle } from "./code-palette-BWrZDi47.js";
+import { cssLanguage, css } from "./index-CefLTKmi.js";
+import { typescriptLanguage, jsxLanguage, tsxLanguage, javascriptLanguage, javascript } from "./index-Cx5ThXzs.js";
 const scriptText = 55, StartCloseScriptTag = 1, styleText = 56, StartCloseStyleTag = 2, textareaText = 57, StartCloseTextareaTag = 3, EndTag = 4, SelfClosingEndTag = 5, StartTag = 6, StartScriptTag = 7, StartStyleTag = 8, StartTextareaTag = 9, StartSelfClosingTag = 10, StartCloseTag = 11, NoMatchStartCloseTag = 12, MismatchedStartCloseTag = 13, missingCloseTag = 58, IncompleteTag = 14, IncompleteCloseTag = 15, commentContent$1 = 59, Element = 21, TagName = 23, Attribute = 24, AttributeName = 25, AttributeValue = 27, UnquotedAttributeValue = 28, ScriptText = 29, StyleText = 32, TextareaText = 35, OpenTag = 37, CloseTag = 38, Dialect_noMatch = 0, Dialect_selfClosing = 1;
 const selfClosers$1 = {
   area: true,

package/dist/index.js

@@ -1,8 +1,8 @@
-import { u } from "./useMessageHandler-nnsort0-.js";
-import { C, d, p, u as u2, b } from "./useChatKitLabels-CatQSpfL.js";
-import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-CZFx44C7.js";
-import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B, D, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-B0WUzTHa.js";
-import { m as m2 } from "./markdownToPlainText-BOtlQ_BY.js";
+import { u } from "./useMessageHandler-Bkzrdgfj.js";
+import { C, d, p, u as u2, b } from "./useChatKitLabels-DxW0N5U-.js";
+import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-D0DQjdsq.js";
+import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B, D, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-BvRIp3m6.js";
+import { m as m2 } from "./markdownToPlainText-DN_G-I6g.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/dist/{markdownToPlainText-BOtlQ_BY.js → markdownToPlainText-DN_G-I6g.js}

@@ -1,4 +1,4 @@
-import { u as unified, r as remarkParse, a as remarkGfm } from "./index-CLdXUpL8.js";
+import { u as unified, r as remarkParse, a as remarkGfm } from "./index-CfVHzirA.js";
 function generateId() {
   return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : String(Date.now());
 }

package/dist/{useChatKitLabels-CatQSpfL.js → useChatKitLabels-DxW0N5U-.js}

@@ -1,6 +1,6 @@
 import { computed, toValue, inject, provide } from "vue";
 import { p as purify } from "./katex.min-md74IFlY.js";
-import { b as asciiAlphanumeric, o as ok, l as longestStreak, f as factorySpace, m as markdownLineEnding, v as visit, c as convert, d as visitParents, S as SKIP, e as ccount, u as unified, r as remarkParse, a as remarkGfm, g as findAndReplace } from "./index-CLdXUpL8.js";
+import { b as asciiAlphanumeric, o as ok, l as longestStreak, c as factorySpace, m as markdownLineEnding, v as visit, d as convert, e as visitParents, S as SKIP, g as ccount, u as unified, r as remarkParse, a as remarkGfm, f as findAndReplace } from "./index-CfVHzirA.js";
 function normalizeUri(value) {
   const result = [];
   let index = -1;

package/dist/{useMessageHandler-nnsort0-.js → useMessageHandler-Bkzrdgfj.js}

@@ -1,4 +1,4 @@
-import { g as generateId } from "./markdownToPlainText-BOtlQ_BY.js";
+import { g as generateId } from "./markdownToPlainText-DN_G-I6g.js";
 import { reactive, ref, computed, readonly } from "vue";
 function createEmptyTree() {
   return { nodes: {}, rootId: null };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/base/CkCodeEditor/CkCodeEditor.spec.ts

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import CkCodeEditor from './CkCodeEditor.vue';
-import { resolveLanguage } from './createCodeMirror';
+import { detectLineSeparator, resolveLanguage } from './createCodeMirror';
 import { matchBadgeRanges } from './badgeDecoration';
 
 // CodeMirror measures its own layout on construction; jsdom has none of the
@@ -233,6 +233,91 @@ describe('CkCodeEditor', () => {
     expect(pills).toEqual(['alpha']);
   });
 
+  it('keeps Windows line endings instead of rewriting them', async () => {
+    const crlf = 'alpha\r\nbeta\r\ngamma';
+    const { emitted } = await renderEditor({ modelValue: crlf });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.type(content, '!');
+
+    await waitFor(() => expect(emitted()['update:modelValue']).toBeTruthy());
+    const updates = emitted()['update:modelValue'] as string[][];
+    const value = updates.at(-1)?.[0] ?? '';
+    // Every original separator survives, rather than being flattened to \n.
+    expect(value).toContain('alpha\r\nbeta\r\ngamma');
+    expect(value).not.toContain('alpha\nbeta');
+  });
+
+  it('leaves a Unix document on Unix endings', async () => {
+    const { emitted } = await renderEditor({ modelValue: 'alpha\nbeta' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.type(content, '!');
+
+    await waitFor(() => expect(emitted()['update:modelValue']).toBeTruthy());
+    const updates = emitted()['update:modelValue'] as string[][];
+    expect(updates.at(-1)?.[0]).not.toContain('\r');
+  });
+
+  it('wraps the code in the design system fade mask', async () => {
+    const { container } = await renderEditor({ modelValue: 'a\nb' });
+
+    const mask = container.querySelector('.ui-fade-mask');
+    expect(mask).toBeInTheDocument();
+    expect(mask?.querySelector('.ck-code-editor__host')).toBeInTheDocument();
+    // jsdom reports no layout, so nothing scrolls and the bands collapse.
+    expect(
+      (mask as HTMLElement).style.getPropertyValue('--ui-fade-mask-height'),
+    ).toBe('0px');
+  });
+
+  it('omits the fade mask when `scrollFade` is off', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'a\nb',
+      scrollFade: false,
+    });
+
+    expect(container.querySelector('.ui-fade-mask')).toBeNull();
+    expect(
+      container.querySelector('.ck-code-editor__host'),
+    ).toBeInTheDocument();
+  });
+
+  // CodeMirror reports focus changes from a 10ms timeout, so a test asserting
+  // that no event followed has to outlast it.
+  const settleFocus = () => new Promise((resolve) => setTimeout(resolve, 30));
+
+  it('keeps focus while it moves between the code and the header', async () => {
+    const { emitted } = await renderEditor({ modelValue: 'x' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await waitFor(() => expect(emitted().focus).toBeTruthy());
+
+    // The copy button is inside the component, so the editor has not been left.
+    await userEvent.click(screen.getByRole('button', { name: 'Copy code' }));
+    await settleFocus();
+    expect(emitted().blur).toBeUndefined();
+  });
+
+  it('emits `blur` once focus leaves the component entirely', async () => {
+    const outside = document.createElement('button');
+    document.body.append(outside);
+    const { emitted } = await renderEditor({ modelValue: 'x' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.click(outside);
+
+    await waitFor(() => expect(emitted().blur).toHaveLength(1));
+    // And exactly once, not again from CodeMirror's own focus tracking.
+    await settleFocus();
+    expect(emitted().blur).toHaveLength(1);
+    outside.remove();
+  });
+
   it('does not throw when unmounted before or after the editor is created', async () => {
     const early = render(CkCodeEditor, { props: { modelValue: 'x' } });
     expect(() => early.unmount()).not.toThrow();
@@ -282,3 +367,17 @@ describe('matchBadgeRanges', () => {
     ).toHaveLength(0);
   });
 });
+
+describe('detectLineSeparator', () => {
+  it('reports the separator a document already uses', () => {
+    expect(detectLineSeparator('a\nb')).toBe('\n');
+    expect(detectLineSeparator('a\r\nb')).toBe('\r\n');
+    expect(detectLineSeparator('no newlines at all')).toBe('\n');
+    expect(detectLineSeparator('')).toBe('\n');
+  });
+
+  it('follows the majority in a mixed document', () => {
+    expect(detectLineSeparator('a\r\nb\r\nc\nd')).toBe('\r\n');
+    expect(detectLineSeparator('a\nb\nc\r\nd')).toBe('\n');
+  });
+});

package/src/components/base/CkCodeEditor/CkCodeEditor.stories.ts

@@ -57,6 +57,7 @@ const meta: Meta<typeof CkCodeEditor> = {
     showLineNumbers: { control: 'boolean' },
     lineWrapping: { control: 'boolean' },
     autofocus: { control: 'boolean' },
+    scrollFade: { control: 'boolean' },
     // A regex plus a callback cannot be typed into a control, so the rule is
     // offered as named presets instead. Without this, badges could only be seen
     // on the one story that hard-codes a rule.
@@ -324,7 +325,8 @@ export const WithoutHeader: Story = {
 
 /**
  * `maxHeight` caps the scrollable area and `lineWrapping` folds long lines
- * instead of scrolling sideways.
+ * instead of scrolling sideways. Scroll it: the code fades at whichever edge
+ * has more of the document beyond it, and neither edge fades once you reach it.
  */
 export const ScrollingAndWrapping: Story = {
   render: (args) => ({

package/src/components/base/CkCodeEditor/CkCodeEditor.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import {
   computed,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
   useTemplateRef,
   watch,
 } from 'vue';
-import { UiButton, UiIcon } from '@aleph-alpha/ui-library';
+import { UiButton, UiFadeMask, UiIcon } from '@aleph-alpha/ui-library';
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { CodeMirrorHandle } from './createCodeMirror';
 import type { CkCodeEditorEmits, CkCodeEditorProps } from './types';
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<CkCodeEditorProps>(), {
   lineWrapping: false,
   maxHeight: undefined,
   autofocus: false,
+  scrollFade: true,
   badge: undefined,
   writeToClipboard: undefined,
 });
@@ -54,6 +56,63 @@ const copyLabel = computed(() =>
     : (labels.value.codeEditorCopy ?? 'Copy code'),
 );
 
+// Whether there is code hidden above / below the visible area. Each fade is
+// shown only for the direction that can actually scroll, so a document that
+// fits its box shows none.
+const canScrollUp = ref(false);
+const canScrollDown = ref(false);
+let scrollTarget: HTMLElement | undefined;
+let scrollObserver: ResizeObserver | undefined;
+
+// 53px is the band height the design file uses for this mask, rather than
+// `UiFadeMask`'s own 4rem/6rem default, which is sized for page-level surfaces.
+const FADE_HEIGHT = '53px';
+
+function edgeToFade(up: boolean, down: boolean): 'top' | 'bottom' | 'both' {
+  if (up && down) return 'both';
+  return up ? 'top' : 'bottom';
+}
+
+// `UiFadeMask` takes the edges to draw rather than two independent flags, and
+// has no "neither" position, so a document that fits collapses the band to zero
+// height instead. Swapping the wrapper out for a plain `div` on every change
+// would remount the host element and take CodeMirror's DOM with it, so the mask
+// stays mounted for as long as `scrollFade` is on.
+const fadeProps = computed(() => {
+  if (!props.scrollFade) return {};
+  const up = canScrollUp.value;
+  const down = canScrollDown.value;
+  return {
+    position: edgeToFade(up, down),
+    background: 'secondary',
+    style: { '--ui-fade-mask-height': up || down ? FADE_HEIGHT : '0px' },
+  };
+});
+
+function syncScrollFades(): void {
+  if (!scrollTarget) return;
+  const { scrollTop, scrollHeight, clientHeight } = scrollTarget;
+  canScrollUp.value = scrollTop > 1;
+  // A pixel of slack: fractional layout sizes otherwise leave the bottom fade
+  // showing when the document is scrolled fully down.
+  canScrollDown.value = scrollTop + clientHeight < scrollHeight - 1;
+}
+
+function watchScrolling(scroller: HTMLElement, content: HTMLElement): void {
+  scrollTarget = scroller;
+  scroller.addEventListener('scroll', syncScrollFades, { passive: true });
+  if (typeof ResizeObserver !== 'undefined') {
+    // Neither of these fires a scroll event. The scroller covers the box being
+    // resized; the content is watched separately because once `maxHeight` caps
+    // the scroller, typing a new line grows only the content, and the bottom
+    // fade would otherwise never appear.
+    scrollObserver = new ResizeObserver(syncScrollFades);
+    scrollObserver.observe(scroller);
+    scrollObserver.observe(content);
+  }
+  syncScrollFades();
+}
+
 let editor: CodeMirrorHandle | undefined;
 let destroyed = false;
 // Last value emitted or applied, so an echo from the parent is not re-applied.
@@ -88,7 +147,6 @@ onMounted(async () => {
     badge: props.badge,
     onChange: handleChange,
     onFocus: () => emit('focus'),
-    onBlur: () => emit('blur'),
   });
 
   // Unmounted while the grammar was loading.
@@ -100,6 +158,7 @@ onMounted(async () => {
   editor = handle;
   // Props may have moved on while the grammar loaded; catch up.
   if (props.modelValue !== initialCode) handle.setCode(props.modelValue);
+  watchScrolling(handle.view.scrollDOM, handle.view.contentDOM);
   isReady.value = true;
   if (props.autofocus) handle.focus();
 });
@@ -110,6 +169,7 @@ watch(
     if (next === lastKnownCode) return;
     lastKnownCode = next;
     editor?.setCode(next);
+    void nextTick(syncScrollFades);
   },
 );
 
@@ -138,6 +198,9 @@ watch(
 onBeforeUnmount(() => {
   destroyed = true;
   clearTimeout(copyTimer);
+  scrollTarget?.removeEventListener('scroll', syncScrollFades);
+  scrollObserver?.disconnect();
+  scrollTarget = undefined;
   editor?.destroy();
   editor = undefined;
 });
@@ -163,8 +226,9 @@ function isInsideRoot(target: EventTarget | null): boolean {
   return target instanceof Node && (rootRef.value?.contains(target) ?? false);
 }
 
-// CodeMirror reports focus on its own content; the header's copy button is
-// outside that, so only a move out of the whole component counts as a blur.
+// The single source of `blur`. CodeMirror reports focus loss on its own
+// content, which would fire for a move to the header's copy button; only a move
+// out of the whole component counts, and only the root can see that.
 function onFocusOut(event: FocusEvent): void {
   if (!isInsideRoot(event.relatedTarget)) emit('blur');
 }
@@ -184,7 +248,7 @@ defineExpose({ focus, getCode });
   <div
     ref="rootRef"
     :class="[
-      'ck-code-editor ck-code-surface border-border-surface-default min-w-0 overflow-hidden rounded-lg border',
+      'ck-code-editor ck-code-surface border-border-surface-default bg-background-input-default min-w-0 overflow-hidden rounded-xl border',
       isReady && 'ck-code-editor--ready',
       isLocked && 'ck-code-editor--readonly',
       disabled && 'ck-code-editor--disabled',
@@ -210,15 +274,33 @@ defineExpose({ focus, getCode });
       </UiButton>
     </div>
 
-    <div
-      ref="hostRef"
-      class="ck-code-editor__host"
-      :style="maxHeight ? { '--ck-code-max-height': maxHeight } : undefined"
-    />
+    <component
+      :is="scrollFade ? UiFadeMask : 'div'"
+      v-bind="fadeProps"
+      class="ck-code-editor__body min-w-0"
+    >
+      <div
+        ref="hostRef"
+        class="ck-code-editor__host"
+        :style="maxHeight ? { '--ck-code-max-height': maxHeight } : undefined"
+      />
+    </component>
   </div>
 </template>
 
 <style scoped>
+/* The body follows the design-system field rather than `UiCodeBlock`: body
+ * text in the primary content colour on the input surface, with muted mono
+ * line numbers. Only the syntax colours stay shared with `UiCodeBlock` (see
+ * `helpers/codemirror/code-palette.css`). The overrides live here, not in
+ * `theme.ts`, because `CkMilkdownEditor`'s code blocks use that theme too and
+ * must keep matching the rendered block. */
+.ck-code-editor {
+  --ck-cm-bg: transparent;
+  --ck-cm-foreground: oklch(var(--content-on-surface-primary));
+  --ck-cm-line-number: oklch(var(--content-on-surface-muted));
+}
+
 /* The editor fills the panel; `:deep` is needed because CodeMirror builds its
  * own DOM, which scoped styles do not reach. */
 .ck-code-editor__host :deep(.cm-editor) {
@@ -226,8 +308,43 @@ defineExpose({ focus, getCode });
   color: var(--ck-cm-foreground);
 }
 
+/* Same declarations as the `body-14-regular` typography utility. */
 .ck-code-editor__host :deep(.cm-scroller) {
   max-height: var(--ck-code-max-height, none);
+  font-family: Saans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+/* 12px below the header, 16px above the bottom edge, and a 20px right inset,
+ * as in the design. */
+.ck-code-editor__host :deep(.cm-content) {
+  padding: 0.75rem 1.25rem 1rem 1rem;
+}
+
+/* The number column already carries the 1rem left inset, so the code must not
+ * pay for it a second time. The sibling selector only matches while the gutter
+ * is mounted, which is exactly when `showLineNumbers` is on. */
+.ck-code-editor__host :deep(.cm-gutters ~ .cm-content) {
+  padding-left: 0;
+}
+
+/* Numbers stay monospaced so the column does not jitter as digits change; the
+ * 12px right padding is the gap before the code. */
+.ck-code-editor__host :deep(.cm-lineNumbers .cm-gutterElement) {
+  min-width: 0;
+  padding: 0 0.75rem 0 1rem;
+  /* `CODE_FONT_FAMILY` from `theme.ts`, repeated because importing it here
+   * would pull CodeMirror out of its lazy chunk. */
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+  font-weight: 500;
+}
+
+.ck-code-editor__host :deep(.cm-placeholder) {
+  color: oklch(var(--content-on-surface-muted));
 }
 
 /* Nothing is being edited, so the active-line band would only be noise. */

package/src/components/base/CkCodeEditor/badgeDecoration.ts

@@ -23,8 +23,8 @@ export interface CkCodeEditorBadgeContent {
   /** Native tooltip, useful for showing the underlying reference. */
   title?: string;
   /**
-   * Classes replacing the default pill styling, which mirrors `UiBadge`'s
-   * `outline` variant at `small` size.
+   * Classes replacing the default pill styling, which is the secondary badge
+   * the ChatKit design file specifies.
    */
   class?: string;
 }

package/src/components/base/CkCodeEditor/createCodeMirror.ts

@@ -39,8 +39,12 @@ export interface CreateCodeMirrorOptions {
   badge?: CkCodeEditorBadgeRule;
   /** Called synchronously whenever the document changes. */
   onChange: (value: string) => void;
+  /**
+   * Called when the editing area takes focus. There is deliberately no `onBlur`
+   * counterpart: losing focus to the header's copy button is not leaving the
+   * editor, and only the component around this view can tell the difference.
+   */
   onFocus: () => void;
-  onBlur: () => void;
 }
 
 /** Imperative surface `CkCodeEditor` drives; keeps CodeMirror out of the SFC. */
@@ -89,6 +93,22 @@ export async function resolveLanguage(
   }
 }
 
+/**
+ * Pick the line ending a document already uses.
+ *
+ * CodeMirror splits on `\n`, `\r\n` and `\r` alike, but `doc.toString()` always
+ * joins with `\n`. Left alone, opening a file with Windows line endings and
+ * typing one character would silently rewrite every line ending in it. Telling
+ * the editor which separator this document uses keeps it intact, both when
+ * reading the value back and when the user presses Enter.
+ */
+export function detectLineSeparator(doc: string): string {
+  const crlf = (doc.match(/\r\n/g) ?? []).length;
+  if (crlf === 0) return '\n';
+  const bareLf = (doc.match(/(?<!\r)\n/g) ?? []).length;
+  return crlf >= bareLf ? '\r\n' : '\n';
+}
+
 // `readOnly` rejects edits while keeping the text selectable; `editable`
 // additionally drops `contenteditable`, which hides the caret and keeps the
 // editor out of the tab order.
@@ -96,6 +116,11 @@ function readonlyState(readonly: boolean): Extension {
   return [EditorState.readOnly.of(readonly), EditorView.editable.of(!readonly)];
 }
 
+/** The document as text, with the line endings it came in with. */
+function readDoc(state: EditorState): string {
+  return state.doc.sliceString(0, state.doc.length, state.lineBreak);
+}
+
 function baseExtensions(options: CreateCodeMirrorOptions): Extension[] {
   return [
     // Deliberately not CodeMirror's `basicSetup`: it also brings autocomplete,
@@ -116,11 +141,8 @@ function baseExtensions(options: CreateCodeMirrorOptions): Extension[] {
       ...(options.ariaLabel ? { 'aria-label': options.ariaLabel } : {}),
     }),
     EditorView.updateListener.of((update) => {
-      if (update.docChanged) options.onChange(update.state.doc.toString());
-      if (update.focusChanged) {
-        if (update.view.hasFocus) options.onFocus();
-        else options.onBlur();
-      }
+      if (update.docChanged) options.onChange(readDoc(update.state));
+      if (update.focusChanged && update.view.hasFocus) options.onFocus();
     }),
     ...(options.placeholder ? [placeholderExt(options.placeholder)] : []),
   ];
@@ -140,8 +162,11 @@ export async function createCodeMirror(
   const lineNumbersSlot = new Compartment();
   const wrappingSlot = new Compartment();
   const badgeSlot = new Compartment();
+  const lineSeparatorSlot = new Compartment();
 
   const support = await resolveLanguage(options.language);
+  // Guards against out-of-order grammar loads; see `setLanguage` below.
+  let languageRequestId = 0;
 
   const view = new EditorView({
     parent: options.parent,
@@ -154,6 +179,9 @@ export async function createCodeMirror(
         lineNumbersSlot.of(options.showLineNumbers ? lineNumbers() : []),
         wrappingSlot.of(options.lineWrapping ? EditorView.lineWrapping : []),
         badgeSlot.of(options.badge ? badgeExtension(options.badge) : []),
+        lineSeparatorSlot.of(
+          EditorState.lineSeparator.of(detectLineSeparator(options.doc)),
+        ),
       ],
     }),
   });
@@ -164,9 +192,14 @@ export async function createCodeMirror(
 
   return {
     view,
-    getCode: () => view.state.doc.toString(),
+    getCode: () => readDoc(view.state),
     setCode: (value) => {
-      if (value === view.state.doc.toString()) return;
+      if (value === readDoc(view.state)) return;
+      // New content may use different line endings from what is loaded.
+      const separator = detectLineSeparator(value);
+      if (separator !== view.state.lineBreak) {
+        reconfigure(lineSeparatorSlot, EditorState.lineSeparator.of(separator));
+      }
       // Replacing the whole document would otherwise send the cursor home
       // whenever a parent echoes the value back; clamp it to the new length.
       const cursor = Math.min(view.state.selection.main.head, value.length);
@@ -176,7 +209,11 @@ export async function createCodeMirror(
       });
     },
     setLanguage: async (language) => {
+      // Grammars load over the network and out of order, so a slow one must not
+      // land on top of a language chosen after it.
+      const request = ++languageRequestId;
       const next = await resolveLanguage(language);
+      if (request !== languageRequestId) return;
       reconfigure(languageSlot, next ? [next] : []);
     },
     setReadonly: (readonly) => {

package/src/components/base/CkCodeEditor/types.ts

@@ -102,6 +102,18 @@ export interface CkCodeEditorProps {
    * `'24rem'`. Unset, the editor grows with its content.
    */
   maxHeight?: string;
+  /**
+   * Fade the code out at the top and bottom edges when there is more of it
+   * scrolled out of view, so a clipped document reads as continuing rather than
+   * stopping mid-line.
+   *
+   * Each edge appears only when that direction can actually scroll, so a
+   * document that fits shows no fade at all. Relevant mainly alongside
+   * `maxHeight`, which is what makes the editor scroll in the first place.
+   *
+   * @default true
+   */
+  scrollFade?: boolean;
   /**
    * Move focus into the editor once it has been created.
    *

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.spec.ts

@@ -470,3 +470,43 @@ describe('CkMarkdownRenderer', () => {
     });
   });
 });
+
+describe('breaks', () => {
+  it('collapses a single newline into one line by default', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: 'line one\nline two' },
+    });
+
+    expect(container.querySelectorAll('p')).toHaveLength(1);
+    expect(container.querySelector('br')).toBeNull();
+  });
+
+  it('keeps a single newline as a line break when `breaks` is set', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: 'line one\nline two', breaks: true },
+    });
+
+    expect(container.querySelectorAll('p')).toHaveLength(1);
+    expect(container.querySelectorAll('br')).toHaveLength(1);
+    expect(container.querySelector('p')?.textContent).toContain('line one');
+    expect(container.querySelector('p')?.textContent).toContain('line two');
+  });
+
+  it('still starts a new paragraph on a blank line', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: 'one\n\ntwo', breaks: true },
+    });
+
+    expect(container.querySelectorAll('p')).toHaveLength(2);
+  });
+
+  it('leaves newlines inside fenced code alone', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '```\nfirst\nsecond\n```', breaks: true },
+    });
+
+    const code = container.querySelector('pre code');
+    expect(code?.textContent).toBe('first\nsecond\n');
+    expect(code?.querySelector('br')).toBeNull();
+  });
+});