@aleph-alpha/chat-kit 6.4.0 → 6.4.2

package/src/helpers/codemirror/theme.ts

@@ -31,11 +31,21 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.moduleKeyword,
       t.operatorKeyword,
       t.operator,
+      // CSS units (`px`, `rem`) are `keyword.other.unit` to a TextMate grammar.
+      t.unit,
     ],
     color: cssVar('keyword'),
   },
   {
-    tag: [t.string, t.special(t.string), t.regexp, t.escape, t.character],
+    tag: [
+      t.string,
+      t.special(t.string),
+      t.regexp,
+      t.escape,
+      t.character,
+      // `class="card"` — the quoted value is a string, not a constant.
+      t.attributeValue,
+    ],
     color: cssVar('string'),
   },
   {
@@ -51,7 +61,8 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.definition(t.typeName),
       t.className,
       t.namespace,
-      t.self,
+      // `entity.other.attribute-name`, which GitHub colours like any entity.
+      t.attributeName,
     ],
     color: cssVar('function'),
   },
@@ -68,19 +79,35 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.typeName,
       t.standard(t.typeName),
       t.propertyName,
-      t.attributeName,
-      t.attributeValue,
+      // `this` / `self` are `variable.language`, which GitHub paints blue.
+      t.self,
+      // CSS colour literals (`#ff0066`), `constant.other.color-*`.
+      t.color,
+      // Bare identifiers a grammar cannot classify further — SQL column and
+      // table names, for one. Every more specific name tag has its own rule
+      // above, so this only catches what would otherwise be unstyled.
+      t.name,
     ],
     color: cssVar('constant'),
   },
   // A declared property name, which UiCodeBlock renders in the text token.
   { tag: t.definition(t.propertyName), color: cssVar('property') },
-  { tag: [t.tagName, t.angleBracket], color: cssVar('tag') },
+  { tag: t.tagName, color: cssVar('tag') },
+  // Markdown blockquotes are `markup.quote`, the same green as a tag name.
+  { tag: t.quote, color: cssVar('tag') },
   {
-    tag: [t.variableName, t.punctuation, t.bracket, t.separator],
+    tag: [
+      t.variableName,
+      t.punctuation,
+      t.bracket,
+      t.separator,
+      // `<`, `>` and `</` are plain text in the GitHub themes; only the tag
+      // name inside them is green.
+      t.angleBracket,
+    ],
     color: cssVar('foreground'),
   },
-  { tag: t.heading, fontWeight: 'bold' },
+  { tag: t.heading, color: cssVar('constant'), fontWeight: 'bold' },
   { tag: t.strong, fontWeight: 'bold' },
   { tag: t.emphasis, fontStyle: 'italic' },
   { tag: t.link, textDecoration: 'underline' },
@@ -116,7 +143,16 @@ export const ckCodeMirrorTheme: Extension = [
     '.cm-gutters': {
       backgroundColor: 'transparent',
       borderRight: 'none',
-      color: cssVar('comment'),
+      color: cssVar('line-number'),
+    },
+    // `UiCodeBlock` draws its numbers as a 2rem right-aligned column inside the
+    // block's 1rem padding, with a 1rem gap before the code. CodeMirror puts
+    // the gutter outside `.cm-content`, so the same geometry is expressed as
+    // padding on the number cell.
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '4rem',
+      padding: '0 1rem',
+      textAlign: 'right',
     },
     '.cm-activeLineGutter': {
       backgroundColor: 'transparent',

package/src/helpers/unified/remarkBreaks.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from 'unified';
+import { findAndReplace } from 'mdast-util-find-and-replace';
+
+// A newline that a writer typed inside a paragraph. In CommonMark this is a
+// "soft break", which renders as nothing more than whitespace, so two lines
+// typed in an editor arrive as one flowing line. Block structure (paragraphs,
+// list items, code fences) is already separate nodes by the time this runs, so
+// the only newlines left inside `text` nodes are these soft breaks.
+const SOFT_BREAK_RE = /\r?\n/g;
+
+/**
+ * Turns every soft line break into a hard one, so a single press of Enter shows
+ * up as a line break rather than being collapsed into the previous line.
+ *
+ * This is what chat interfaces usually want: people type a message the way they
+ * would in any other text box and expect the lines they made to survive. Strict
+ * CommonMark instead requires two trailing spaces, a backslash, or a blank line
+ * to force a break.
+ *
+ * `findAndReplace` only visits `text` nodes, so newlines inside code spans and
+ * fenced code blocks are untouched and keep their literal meaning.
+ */
+// The tree type is left as unified's default (a unist `Node`) so the published
+// `.d.ts` does not depend on `mdast` types; the cast keeps the call typed.
+export const remarkBreaks: Plugin<[]> = () => {
+  return (tree) => {
+    findAndReplace(tree as Parameters<typeof findAndReplace>[0], [
+      SOFT_BREAK_RE,
+      () => ({ type: 'break' }),
+    ]);
+  };
+};

package/src/index.ts

@@ -148,6 +148,7 @@ export type {
   CkMilkdownEditorProps,
   CkCodeEditorEmits,
   CkCodeEditorExposed,
+  CkCodeEditorFadeSurface,
   CkCodeEditorProps,
 } from './components';