Skip to content

Commit 0e8892f

Browse files
cyanzhongcyanzhong
committed
Fix style priority issues
1 parent 599dbf7 commit 0e8892f

File tree

9 files changed

+56
-69
lines changed

9 files changed

+56
-69
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Add `markedit-theming` to your (TypeScript) project's dependencies:
1111
```json
1212
{
1313
"dependencies": {
14-
"markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.8.0"
14+
"markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.9.0"
1515
}
1616
}
1717
```

‎colors.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ export interface Colors {
5656
selectionMatchBackground?: string;
5757
};
5858
/**
59-
* Colors for syntax Highlighting, see [highlight.Tag](https://lezer.codemirror.net/docs/ref/#highlight.Tag) for details.
59+
* Colors for syntax highlighting, based on lezer's [highlight.Tag](https://lezer.codemirror.net/docs/ref/#highlight.Tag).
60+
*
61+
* Tag names have been simplified for greater consistency.
6062
*/
6163
highlight?: {
6264
heading?: string;

‎dist/colors.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ export interface Colors {
5656
selectionMatchBackground?: string;
5757
};
5858
/**
59-
* Colors for syntax Highlighting, see [highlight.Tag](https://lezer.codemirror.net/docs/ref/#highlight.Tag) for details.
59+
* Colors for syntax highlighting, based on lezer's [highlight.Tag](https://lezer.codemirror.net/docs/ref/#highlight.Tag).
60+
*
61+
* Tag names have been simplified for greater consistency.
6062
*/
6163
highlight?: {
6264
heading?: string;

‎dist/index.cjs‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -105,13 +105,13 @@ function createTheme(colors, options) {
105105
tagStyles.push({ tag: highlight.tags.quote, color: highlightColors?.quote });
106106
}
107107
if (highlightColors?.link) {
108-
tagStyles.push({ tag: highlight.tags.link, color: highlightColors?.link });
108+
tagStyles.push({ tag: [highlight.tags.url, highlight.tags.link], color: highlightColors?.link });
109109
}
110110
if (highlightColors?.separator) {
111111
tagStyles.push({ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator, highlight.tags.contentSeparator], color: highlightColors?.separator });
112112
}
113113
if (highlightColors?.comment) {
114-
tagStyles.push({ tag: [highlight.tags.meta, highlight.tags.comment], color: highlightColors?.comment });
114+
tagStyles.push({ tag: highlight.tags.comment, color: highlightColors?.comment });
115115
}
116116
if (highlightColors?.meta) {
117117
tagStyles.push({ tag: highlight.tags.meta, color: highlightColors?.meta });
@@ -120,7 +120,7 @@ function createTheme(colors, options) {
120120
tagStyles.push({ tag: highlight.tags.keyword, color: highlightColors?.keyword });
121121
}
122122
if (highlightColors?.atom) {
123-
tagStyles.push({ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.url, highlight.tags.contentSeparator, highlight.tags.labelName], color: highlightColors?.atom });
123+
tagStyles.push({ tag: [highlight.tags.atom, highlight.tags.bool], color: highlightColors?.atom });
124124
}
125125
if (highlightColors?.literal) {
126126
tagStyles.push({ tag: [highlight.tags.literal, highlight.tags.inserted], color: highlightColors?.literal });
@@ -239,20 +239,14 @@ function lighterColor(textColor) {
239239
const [red, green, blue] = components.slice(1, 4).map(Number);
240240
return `rgba(${red}, ${green}, ${blue}, 0.6)`;
241241
}
242-
function flattenThemes(root) {
243-
const result = [];
244-
const stack = [root];
245-
while (stack.length > 0) {
246-
const node = stack.pop();
247-
if (Array.isArray(node)) {
248-
node.forEach((o) => stack.push(o));
249-
} else if ("extension" in node) {
250-
stack.push(node.extension);
251-
} else {
252-
result.push(node);
253-
}
242+
function flattenThemes(node) {
243+
if (Array.isArray(node)) {
244+
return node.flatMap(flattenThemes);
245+
} else if ("extension" in node) {
246+
return flattenThemes(node.extension);
247+
} else {
248+
return [node];
254249
}
255-
return result;
256250
}
257251
function parseCssRules(cssText2) {
258252
const result = {};
@@ -337,16 +331,16 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
337331
const matchingBracket = findBackground(cssStyles, selectors.matchingBracket);
338332
const primaryColor = getComputedStyle(editor.contentDOM).color;
339333
const secondaryColor = colors?.visibleSpace ?? lighterColor(primaryColor);
340-
const useCustomHeader = extractTaggedColor(tagStyles, highlight.tags.heading) !== void 0;
334+
const headingTagColor = extractTaggedColor(tagStyles, highlight.tags.heading);
341335
const instructionTagColor = extractTaggedColor(tagStyles, highlight.tags.processingInstruction);
342336
const propertyUpdates = [
343337
[selectors.activeIndicator, activeLine, "background"],
344338
[selectors.matchingBracket, matchingBracket, "background"],
345339
[selectors.lineGutter, primaryColor, "color"],
346340
[selectors.foldGutter, secondaryColor, "color"],
347341
[selectors.visibleSpace, secondaryColor, "color"],
348-
[selectors.accentColor, colors?.accentColor, "color"],
349-
[selectors.syntaxMarker, instructionTagColor ?? colors?.syntaxMarker, "color"]
342+
[selectors.accentColor, colors?.accentColor ?? headingTagColor, "color"],
343+
[selectors.syntaxMarker, colors?.syntaxMarker ?? instructionTagColor, "color"]
350344
];
351345
const styles = Array.from(document.querySelectorAll("style"));
352346
const originalRules = isDark ? $context().darkOriginalRules : $context().lightOriginalRules;
@@ -366,7 +360,7 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
366360
rule.style.setProperty("background", selectionBackground, "important");
367361
}
368362
}
369-
if (useCustomHeader && (selector === ".cm-md-header" || selector === ".cm-md-header:not(.cm-md-quote)")) {
363+
if (headingTagColor !== void 0 && (selector === ".cm-md-header" || selector === ".cm-md-header:not(.cm-md-quote)")) {
370364
originalRules.markdownHeader ??= rule.cssText;
371365
if (isDisabled) {
372366
rule.cssText = originalRules.markdownHeader;
@@ -381,7 +375,8 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
381375
if (color === void 0) {
382376
rule.style.removeProperty(property);
383377
} else {
384-
rule.style.setProperty(property, color, "important");
378+
const priority = [selectors.accentColor, selectors.syntaxMarker].includes(selector) ? void 0 : "important";
379+
rule.style.setProperty(property, color, priority);
385380
if (selector === selectors.matchingBracket || selector === selectors.activeIndicator) {
386381
rule.style.setProperty("box-shadow", "unset", "important");
387382
}

‎dist/index.js‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,13 @@ function createTheme(colors, options) {
103103
tagStyles.push({ tag: tags.quote, color: highlightColors?.quote });
104104
}
105105
if (highlightColors?.link) {
106-
tagStyles.push({ tag: tags.link, color: highlightColors?.link });
106+
tagStyles.push({ tag: [tags.url, tags.link], color: highlightColors?.link });
107107
}
108108
if (highlightColors?.separator) {
109109
tagStyles.push({ tag: [tags.definition(tags.name), tags.separator, tags.contentSeparator], color: highlightColors?.separator });
110110
}
111111
if (highlightColors?.comment) {
112-
tagStyles.push({ tag: [tags.meta, tags.comment], color: highlightColors?.comment });
112+
tagStyles.push({ tag: tags.comment, color: highlightColors?.comment });
113113
}
114114
if (highlightColors?.meta) {
115115
tagStyles.push({ tag: tags.meta, color: highlightColors?.meta });
@@ -118,7 +118,7 @@ function createTheme(colors, options) {
118118
tagStyles.push({ tag: tags.keyword, color: highlightColors?.keyword });
119119
}
120120
if (highlightColors?.atom) {
121-
tagStyles.push({ tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName], color: highlightColors?.atom });
121+
tagStyles.push({ tag: [tags.atom, tags.bool], color: highlightColors?.atom });
122122
}
123123
if (highlightColors?.literal) {
124124
tagStyles.push({ tag: [tags.literal, tags.inserted], color: highlightColors?.literal });
@@ -237,20 +237,14 @@ function lighterColor(textColor) {
237237
const [red, green, blue] = components.slice(1, 4).map(Number);
238238
return `rgba(${red}, ${green}, ${blue}, 0.6)`;
239239
}
240-
function flattenThemes(root) {
241-
const result = [];
242-
const stack = [root];
243-
while (stack.length > 0) {
244-
const node = stack.pop();
245-
if (Array.isArray(node)) {
246-
node.forEach((o) => stack.push(o));
247-
} else if ("extension" in node) {
248-
stack.push(node.extension);
249-
} else {
250-
result.push(node);
251-
}
240+
function flattenThemes(node) {
241+
if (Array.isArray(node)) {
242+
return node.flatMap(flattenThemes);
243+
} else if ("extension" in node) {
244+
return flattenThemes(node.extension);
245+
} else {
246+
return [node];
252247
}
253-
return result;
254248
}
255249
function parseCssRules(cssText2) {
256250
const result = {};
@@ -335,16 +329,16 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
335329
const matchingBracket = findBackground(cssStyles, selectors.matchingBracket);
336330
const primaryColor = getComputedStyle(editor.contentDOM).color;
337331
const secondaryColor = colors?.visibleSpace ?? lighterColor(primaryColor);
338-
const useCustomHeader = extractTaggedColor(tagStyles, tags.heading) !== void 0;
332+
const headingTagColor = extractTaggedColor(tagStyles, tags.heading);
339333
const instructionTagColor = extractTaggedColor(tagStyles, tags.processingInstruction);
340334
const propertyUpdates = [
341335
[selectors.activeIndicator, activeLine, "background"],
342336
[selectors.matchingBracket, matchingBracket, "background"],
343337
[selectors.lineGutter, primaryColor, "color"],
344338
[selectors.foldGutter, secondaryColor, "color"],
345339
[selectors.visibleSpace, secondaryColor, "color"],
346-
[selectors.accentColor, colors?.accentColor, "color"],
347-
[selectors.syntaxMarker, instructionTagColor ?? colors?.syntaxMarker, "color"]
340+
[selectors.accentColor, colors?.accentColor ?? headingTagColor, "color"],
341+
[selectors.syntaxMarker, colors?.syntaxMarker ?? instructionTagColor, "color"]
348342
];
349343
const styles = Array.from(document.querySelectorAll("style"));
350344
const originalRules = isDark ? $context().darkOriginalRules : $context().lightOriginalRules;
@@ -364,7 +358,7 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
364358
rule.style.setProperty("background", selectionBackground, "important");
365359
}
366360
}
367-
if (useCustomHeader && (selector === ".cm-md-header" || selector === ".cm-md-header:not(.cm-md-quote)")) {
361+
if (headingTagColor !== void 0 && (selector === ".cm-md-header" || selector === ".cm-md-header:not(.cm-md-quote)")) {
368362
originalRules.markdownHeader ??= rule.cssText;
369363
if (isDisabled) {
370364
rule.cssText = originalRules.markdownHeader;
@@ -379,7 +373,8 @@ function overrideStyles(editor, isDark, isDisabled, cssStyles, tagStyles, colors
379373
if (color === void 0) {
380374
rule.style.removeProperty(property);
381375
} else {
382-
rule.style.setProperty(property, color, "important");
376+
const priority = [selectors.accentColor, selectors.syntaxMarker].includes(selector) ? void 0 : "important";
377+
rule.style.setProperty(property, color, priority);
383378
if (selector === selectors.matchingBracket || selector === selectors.activeIndicator) {
384379
rule.style.setProperty("box-shadow", "unset", "important");
385380
}

‎index.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function overrideStyles(
155155
const matchingBracket = findBackground(cssStyles, selectors.matchingBracket);
156156
const primaryColor = getComputedStyle(editor.contentDOM).color;
157157
const secondaryColor = colors?.visibleSpace ?? lighterColor(primaryColor);
158-
const useCustomHeader = extractTaggedColor(tagStyles, tags.heading) !== undefined;
158+
const headingTagColor = extractTaggedColor(tagStyles, tags.heading);
159159
const instructionTagColor = extractTaggedColor(tagStyles, tags.processingInstruction);
160160

161161
const propertyUpdates: [string, string | undefined, 'background' | 'color'][] = [
@@ -164,8 +164,8 @@ function overrideStyles(
164164
[selectors.lineGutter, primaryColor, 'color'],
165165
[selectors.foldGutter, secondaryColor, 'color'],
166166
[selectors.visibleSpace, secondaryColor, 'color'],
167-
[selectors.accentColor, colors?.accentColor, 'color'],
168-
[selectors.syntaxMarker, instructionTagColor ?? colors?.syntaxMarker, 'color'],
167+
[selectors.accentColor, colors?.accentColor ?? headingTagColor, 'color'],
168+
[selectors.syntaxMarker, colors?.syntaxMarker ?? instructionTagColor, 'color'],
169169
];
170170

171171
const styles = Array.from(document.querySelectorAll('style'));
@@ -192,7 +192,7 @@ function overrideStyles(
192192
}
193193

194194
// Markdown headings
195-
if (useCustomHeader && (selector === '.cm-md-header' || selector === '.cm-md-header:not(.cm-md-quote)')) {
195+
if (headingTagColor !== undefined && (selector === '.cm-md-header' || selector === '.cm-md-header:not(.cm-md-quote)')) {
196196
originalRules.markdownHeader ??= rule.cssText;
197197
if (isDisabled) {
198198
rule.cssText = originalRules.markdownHeader;
@@ -210,7 +210,8 @@ function overrideStyles(
210210
if (color === undefined) {
211211
rule.style.removeProperty(property);
212212
} else {
213-
rule.style.setProperty(property, color, 'important');
213+
const priority = [selectors.accentColor, selectors.syntaxMarker].includes(selector) ? undefined : 'important';
214+
rule.style.setProperty(property, color, priority);
214215

215216
// Remove the special styling in MarkEdit when colors are provided
216217
if (selector === selectors.matchingBracket || selector === selectors.activeIndicator) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "markedit-theming",
3-
"version": "0.8.0",
3+
"version": "0.9.0",
44
"description": "Create custom MarkEdit themes easily.",
55
"scripts": {
66
"lint": "eslint . --config eslint.config.mjs",

‎src/builder.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,15 @@ function createTheme(colors: Colors, options?: { dark?: boolean }) {
131131
}
132132

133133
if (highlightColors?.link) {
134-
tagStyles.push({ tag: tags.link, color: highlightColors?.link });
134+
tagStyles.push({ tag: [tags.url, tags.link], color: highlightColors?.link });
135135
}
136136

137137
if (highlightColors?.separator) {
138138
tagStyles.push({ tag: [tags.definition(tags.name), tags.separator, tags.contentSeparator], color: highlightColors?.separator });
139139
}
140140

141141
if (highlightColors?.comment) {
142-
tagStyles.push({ tag: [tags.meta, tags.comment], color: highlightColors?.comment });
142+
tagStyles.push({ tag: tags.comment, color: highlightColors?.comment });
143143
}
144144

145145
// General Syntax
@@ -153,7 +153,7 @@ function createTheme(colors: Colors, options?: { dark?: boolean }) {
153153
}
154154

155155
if (highlightColors?.atom) {
156-
tagStyles.push({ tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName], color: highlightColors?.atom });
156+
tagStyles.push({ tag: [tags.atom, tags.bool], color: highlightColors?.atom });
157157
}
158158

159159
if (highlightColors?.literal) {

‎src/utils.ts‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -89,22 +89,14 @@ export function lighterColor(textColor: string): string | undefined {
8989
/**
9090
* Get flattened themes, since CodeMirror Extension is recursively declared.
9191
*/
92-
function flattenThemes(root: Extension): Theme[] {
93-
const result: Theme[] = [];
94-
const stack: Extension[] = [root];
95-
96-
while (stack.length > 0) {
97-
const node = stack.pop()!;
98-
if (Array.isArray(node)) {
99-
node.forEach(o => stack.push(o));
100-
} else if ('extension' in node) {
101-
stack.push(node.extension);
102-
} else {
103-
result.push(node);
104-
}
92+
function flattenThemes(node: Extension): Extension[] {
93+
if (Array.isArray(node)) {
94+
return node.flatMap(flattenThemes);
95+
} else if ('extension' in node) {
96+
return flattenThemes(node.extension);
97+
} else {
98+
return [node];
10599
}
106-
107-
return result;
108100
}
109101

110102
/**

0 commit comments

Comments
 (0)