@aleph-alpha/chat-kit 6.2.0 → 6.3.0

package/src/{components/base/CkMilkdownEditor/codeMirrorTheme.ts → helpers/codemirror/theme.ts}

@@ -21,6 +21,7 @@ const cssVar = (name: string): string => `var(--ck-cm-${name})`;
  * editor and in `CkMarkdownRenderer`.
  */
 export const ckHighlightStyle = HighlightStyle.define([
+  // Keywords, and the operators GitHub colours like keywords (`=`, `:`).
   {
     tag: [
       t.keyword,
@@ -29,6 +30,7 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.definitionKeyword,
       t.moduleKeyword,
       t.operatorKeyword,
+      t.operator,
     ],
     color: cssVar('keyword'),
   },
@@ -40,14 +42,20 @@ export const ckHighlightStyle = HighlightStyle.define([
     tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
     color: cssVar('comment'),
   },
+  // Things being declared: functions, classes, interfaces.
   {
     tag: [
       t.function(t.variableName),
       t.function(t.propertyName),
       t.definition(t.function(t.variableName)),
+      t.definition(t.typeName),
+      t.className,
+      t.namespace,
+      t.self,
     ],
     color: cssVar('function'),
   },
+  // Built-in types, literals and ordinary variables.
   {
     tag: [
       t.number,
@@ -56,25 +64,20 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.atom,
       t.constant(t.name),
       t.constant(t.variableName),
+      t.definition(t.variableName),
+      t.typeName,
+      t.standard(t.typeName),
       t.propertyName,
       t.attributeName,
       t.attributeValue,
     ],
     color: cssVar('constant'),
   },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.namespace,
-      t.definition(t.variableName),
-      t.self,
-    ],
-    color: cssVar('entity'),
-  },
+  // 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.variableName, t.operator, t.punctuation, t.bracket, t.separator],
+    tag: [t.variableName, t.punctuation, t.bracket, t.separator],
     color: cssVar('foreground'),
   },
   { tag: t.heading, fontWeight: 'bold' },
@@ -107,8 +110,16 @@ export const ckCodeMirrorTheme: Extension = [
     '.cm-line': {
       padding: '0',
     },
+    // Gutter visibility is driven by the `showLineNumbers` prop through a root
+    // class in `milkdown-theme.css`, not from here, so it can toggle without
+    // reconfiguring CodeMirror. Only the chrome is set here.
     '.cm-gutters': {
-      display: 'none',
+      backgroundColor: 'transparent',
+      borderRight: 'none',
+      color: cssVar('comment'),
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
     },
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: cssVar('foreground'),

package/src/index.ts

@@ -100,6 +100,7 @@ export {
   CkUserMessage,
   CkEditableUserMessage,
   CkMilkdownEditor,
+  CkCodeEditor,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -145,6 +146,9 @@ export type {
   CkMilkdownEditorEmits,
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
 } from './components';
 
 // Helpers

package/dist/components/base/CkMilkdownEditor/codeMirrorTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorTheme.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMilkdownEditor/codeMirrorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,2FAC6D,CAAC;AAO3F;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,gBA8D3B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAwC/B,CAAC"}