Merge remote-tracking branch 'origin/main' into docs

packages/react/src/components/CodeMirror6.jsx

@@ -51,11 +51,12 @@ const highlightField = StateField.define({
     try {
       for (let e of tr.effects) {
         if (e.is(setHighlights)) {
+          const { haps } = e.value;
           const marks =
-            e.value
+            haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || '#FFCA28';
+                  const color = hap.context.color || e.value.color || '#FFCA28';
                   let from = tr.newDoc.line(start.line).from + start.column;
                   let to = tr.newDoc.line(end.line).from + end.column;
                   const l = tr.newDoc.length;
@@ -83,14 +84,21 @@ const highlightField = StateField.define({
 
 const extensions = [
   javascript(),
-  strudelTheme,
   highlightField,
   flashField,
   // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
   autocompletion({ override: [strudelAutocomplete] }),
 ];
 
-export default function CodeMirror({ value, onChange, onViewChanged, onSelectionChange, options, editorDidMount }) {
+export default function CodeMirror({
+  value,
+  onChange,
+  onViewChanged,
+  onSelectionChange,
+  theme,
+  options,
+  editorDidMount,
+}) {
   const handleOnChange = useCallback(
     (value) => {
       onChange?.(value);
@@ -115,6 +123,7 @@ export default function CodeMirror({ value, onChange, onViewChanged, onSelection
     <>
       <_CodeMirror
         value={value}
+        theme={theme || strudelTheme}
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}