[pull] main from MarkEdit-app:main

CoreEditor/index.ts

@@ -23,13 +23,14 @@ import { NativeModuleTokenizer } from './src/bridge/native/tokenizer';
 import { NativeModuleAPI } from './src/bridge/native/api';
 
 import { resetEditor } from './src/core';
-import { initMarkEditModules } from './src/api/modules';
+import { initThemeExtractors, initMarkEditModules } from './src/api/modules';
 import { setUp } from './src/styling/config';
 import { loadTheme } from './src/styling/themes';
 import { startObserving } from './src/modules/events';
 
 // Initialize and inject modules to the global MarkEdit object
 initMarkEditModules();
+initThemeExtractors();
 
 // In release mode, window.config = "{{EDITOR_CONFIG}}" will be replaced with a JSON literal
 const config = import.meta.env.PROD ? window.config : {

CoreEditor/src/@types/global.d.ts

@@ -1,4 +1,3 @@
-import { EditorView } from '@codemirror/view';
 import { Config, Dynamics } from '../config';
 import { WebModule } from '../bridge/webModule';
 import { NativeModuleCore } from '../bridge/native/core';
@@ -7,6 +6,9 @@ import { NativeModulePreview } from '../bridge/native/preview';
 import { NativeModuleTokenizer } from '../bridge/native/tokenizer';
 import { NativeModuleAPI } from '../bridge/native/api';
 
+import type { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import type { TagStyle } from '@codemirror/language';
 import type { MarkEdit } from 'markedit-api';
 
 declare global {
@@ -43,6 +45,8 @@ declare global {
       tokenizer: NativeModuleTokenizer;
       api: NativeModuleAPI;
     };
+    __extractStyleRules__: (theme: Extension) => string[] | undefined;
+    __extractHighlightSpecs__: (theme: Extension) => TagStyle[] | undefined;
   }
 
   interface ImportMetaEnv {

CoreEditor/src/api/modules.ts

@@ -97,3 +97,16 @@ export function initMarkEditModules() {
 
   window.require = require as NodeJS.Require;
 }
+
+export function initThemeExtractors() {
+  type Theme = cmState.Extension & {
+    value?: {
+      rules?: string[];
+      specs?: cmLanguage.TagStyle[];
+    };
+  };
+
+  // Private methods used in MarkEdit-theming to stably extract theme properties
+  window.__extractStyleRules__ = (theme: Theme) => theme.value?.rules;
+  window.__extractHighlightSpecs__ = (theme: Theme) => theme.value?.specs;
+}

CoreEditor/src/config.ts

@@ -47,7 +47,7 @@ export enum IndentBehavior {
  */
 export interface Config {
   text: string;
-  theme: string;
+  theme: string; // MarkEdit-theming relies on this, add a fallback if renaming becomes necessary
   fontFace: WebFontFace;
   fontSize: number;
   showLineNumbers: boolean;

CoreEditor/test/theming.test.ts

@@ -0,0 +1,50 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { describe, expect, test } from '@jest/globals';
+
+import { Config } from '../src/config';
+import { initThemeExtractors } from '../src/api/modules';
+
+describe('Test theming internals', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).MarkEdit = {};
+  initThemeExtractors();
+
+  test('test __extractStyleRules', () => {
+    const sample = flattenThemes(EditorView.theme({ '&': { color: 'cyan' } }));
+    expect(sample.some(o => typeof window.__extractStyleRules__(o) === 'object')).toBeTruthy();
+  });
+
+  test('test __extractHighlightSpecs', () => {
+    const sample = flattenThemes(syntaxHighlighting(HighlightStyle.define([{ tag: tags.heading, color: 'cyan' }])));
+    expect(sample.some(o => typeof window.__extractHighlightSpecs__(o) === 'object')).toBeTruthy();
+  });
+
+  test('test Config.theme property name', () => {
+    type HasKey<T, K extends PropertyKey> = K extends keyof T ? true : false;
+    const hasTheme: HasKey<Config, 'theme'> extends true ? true : false = true;
+    expect(hasTheme).toBeTruthy();
+  });
+});
+
+function flattenThemes(root: Extension) {
+  const result: Extension[] = [];
+  const stack: Extension[] = [root];
+
+  while (stack.length > 0) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const node = stack.pop()!;
+    if (Array.isArray(node)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      node.forEach(o => stack.push(o));
+    } else if ('extension' in node) {
+      stack.push(node.extension);
+    } else {
+      result.push(node);
+    }
+  }
+
+  return result;
+}