Skip to content

Commit 51e43b6

Browse files
shezhangzhangshezhangzhang
committed
feat: add color value after token
1 parent 7472e0f commit 51e43b6

File tree

5 files changed

+167
-65
lines changed

5 files changed

+167
-65
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"webpack-cli": "^4.9.2"
5656
},
5757
"dependencies": {
58-
"antd-token-previewer": "^1.0.0-alpha.19",
58+
"antd-token-previewer": "^1.0.0-alpha.20",
5959
"rgb-hex": "^4.0.0"
6060
},
6161
"repository": {

‎src/decorator.ts‎

Lines changed: 96 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,105 @@
11
import * as vscode from "vscode";
2+
import { genMarkdownString, getColorTokenValue } from "./utils";
23

3-
export default function setupChangeEvent() {
4+
export default function setupChangeEvent(
5+
context: vscode.ExtensionContext,
6+
fullToken: any
7+
) {
8+
let timeout: NodeJS.Timer | undefined = undefined;
49
let activeEditor = vscode.window.activeTextEditor;
10+
const fullTokenKeys = Object.keys(fullToken);
11+
const decorationSet = new Set<vscode.TextEditorDecorationType>();
12+
13+
if (activeEditor) {
14+
triggerUpdateDecorations();
15+
}
516

617
vscode.workspace.onDidChangeTextDocument(
718
(event) => {
8-
console.log(event);
9-
// if (activeEditor && event.document === activeEditor.document) {
10-
// triggerUpdateDecorations(true);
11-
// }
19+
if (activeEditor && event.document === activeEditor.document) {
20+
triggerUpdateDecorations(true);
21+
}
22+
},
23+
null,
24+
context.subscriptions
25+
);
26+
27+
vscode.window.onDidChangeActiveTextEditor(
28+
(editor) => {
29+
activeEditor = editor;
30+
if (editor) {
31+
triggerUpdateDecorations();
32+
}
1233
},
13-
null
14-
// context.subscriptions
34+
null,
35+
context.subscriptions
1536
);
37+
38+
function triggerUpdateDecorations(throttle = false) {
39+
if (timeout) {
40+
clearTimeout(timeout);
41+
timeout = undefined;
42+
}
43+
if (throttle) {
44+
timeout = setTimeout(updateDecorations, 500);
45+
} else {
46+
updateDecorations();
47+
}
48+
}
49+
50+
function updateDecorations() {
51+
if (activeEditor) {
52+
const text = activeEditor.document.getText();
53+
decorationSet.forEach((value) => {
54+
value.dispose();
55+
});
56+
57+
fullTokenKeys.forEach((key: string) => {
58+
if (!activeEditor) {
59+
return;
60+
}
61+
const regEx = new RegExp(`\\b(${key})\\b(?!-)`, "g");
62+
63+
let match;
64+
while ((match = regEx.exec(text))) {
65+
const valueDecorations: vscode.DecorationOptions[] = [];
66+
let decorationType: vscode.TextEditorDecorationType;
67+
68+
const startPos = activeEditor.document.positionAt(match.index);
69+
const endPos = activeEditor.document.positionAt(
70+
match.index + match[0].length
71+
);
72+
73+
const value = String(fullToken[key]);
74+
const colorSpan = genMarkdownString(value);
75+
const markDownString = new vscode.MarkdownString(
76+
`<h3>antd design token: ${match[0]}</h3>${colorSpan}<code>${value}</code><br></br>`
77+
);
78+
markDownString.supportHtml = true;
79+
markDownString.isTrusted = true;
80+
const decoration = {
81+
range: new vscode.Range(startPos, endPos),
82+
hoverMessage: markDownString,
83+
};
84+
85+
const colorValue = getColorTokenValue(fullToken[key]);
86+
valueDecorations.push(decoration);
87+
88+
decorationType = vscode.window.createTextEditorDecorationType({
89+
after: {
90+
contentText: colorValue ? `**` : `(${String(fullToken[key])})`,
91+
backgroundColor: colorValue || "",
92+
margin: "0 0 0 4px;",
93+
color: colorValue || "#1890ff",
94+
fontWeight: "bolder",
95+
},
96+
});
97+
98+
decorationSet.add(decorationType);
99+
100+
activeEditor.setDecorations(decorationType, valueDecorations);
101+
}
102+
});
103+
}
104+
}
16105
}

‎src/extension.ts‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,44 @@
1-
// The module 'vscode' contains the VS Code extensibility API
1+
import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
22
import * as vscode from "vscode";
33
import setupChangeEvent from "./decorator";
44
import setupAntdToken from "./hover";
55

6-
// this method is called when your extension is activated
7-
// your extension is activated the very first time the command is executed
8-
let isActive = true;
9-
106
export function activate(context: vscode.ExtensionContext) {
11-
// This line of code will only be executed once when your extension is activated
12-
let disposeHover: vscode.Disposable;
7+
let isActive = true;
8+
// let disposeHover: vscode.Disposable;
139
let disposeTyping: vscode.Disposable;
14-
[disposeHover, disposeTyping] = setupAntdToken();
15-
setupChangeEvent();
16-
17-
vscode.commands.registerCommand("antd-design-token.toggle", () => {
18-
isActive = !isActive;
19-
20-
if (isActive) {
21-
[disposeHover, disposeTyping] = setupAntdToken();
22-
vscode.window.showInformationMessage("antd design token is active now.");
23-
} else {
24-
disposeHover.dispose();
25-
disposeTyping.dispose();
26-
vscode.window.showInformationMessage(
27-
"antd design token is inactive now."
28-
);
10+
11+
const fullToken = getDesignToken();
12+
13+
if (!fullToken) {
14+
vscode.window.showErrorMessage("Failed to get antd fullToken.");
15+
return;
16+
}
17+
18+
disposeTyping = setupAntdToken(fullToken);
19+
setupChangeEvent(context, fullToken);
20+
21+
const disposable = vscode.commands.registerCommand(
22+
"antd-design-token.toggle",
23+
() => {
24+
isActive = !isActive;
25+
26+
if (isActive) {
27+
disposeTyping = setupAntdToken(fullToken);
28+
vscode.window.showInformationMessage(
29+
"antd design token is active now."
30+
);
31+
} else {
32+
// disposeHover.dispose();
33+
disposeTyping.dispose();
34+
vscode.window.showInformationMessage(
35+
"antd design token is inactive now."
36+
);
37+
}
2938
}
30-
});
39+
);
40+
41+
context.subscriptions.push(disposable);
3142
}
3243

3344
// this method is called when your extension is deactivated

‎src/hover.ts‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,34 @@
11
import * as vscode from "vscode";
2-
import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
32
import { genMarkdownString } from "./utils";
43
import { LANGUAGE_SELECTORS } from "./config";
54

65
/**
76
* register provider for hover and typing antd design token
87
*/
9-
export default function setupAntdToken(): vscode.Disposable[] {
10-
const fullToken = getDesignToken();
11-
12-
if (!fullToken) {
13-
throw new Error("Get fullToken failed.");
14-
}
15-
8+
export default function setupAntdToken(fullToken: any): vscode.Disposable {
169
let disposeHover: vscode.Disposable;
1710
let disposeTyping: vscode.Disposable;
1811

1912
// HOVER
20-
disposeHover = vscode.languages.registerHoverProvider(LANGUAGE_SELECTORS, {
21-
provideHover(document, position) {
22-
const range = document.getWordRangeAtPosition(position);
23-
const word = document.getText(range);
24-
25-
if (fullToken.hasOwnProperty(word as string)) {
26-
const value = String(fullToken[word as keyof typeof fullToken]);
27-
const colorSpan = genMarkdownString(value);
28-
29-
const markDownString = new vscode.MarkdownString(
30-
`<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
31-
);
32-
markDownString.supportHtml = true;
33-
markDownString.isTrusted = true;
34-
35-
return new vscode.Hover(markDownString);
36-
}
37-
},
38-
});
13+
// disposeHover = vscode.languages.registerHoverProvider(LANGUAGE_SELECTORS, {
14+
// provideHover(document, position) {
15+
// const range = document.getWordRangeAtPosition(position);
16+
// const word = document.getText(range);
17+
18+
// if (fullToken.hasOwnProperty(word as string)) {
19+
// const value = String(fullToken[word as keyof typeof fullToken]);
20+
// const colorSpan = genMarkdownString(value);
21+
22+
// const markDownString = new vscode.MarkdownString(
23+
// `<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
24+
// );
25+
// markDownString.supportHtml = true;
26+
// markDownString.isTrusted = true;
27+
28+
// return new vscode.Hover(markDownString);
29+
// }
30+
// },
31+
// });
3932

4033
// TYPING
4134
// Add antd token value tips on typing
@@ -73,5 +66,5 @@ export default function setupAntdToken(): vscode.Disposable[] {
7366
}
7467
);
7568

76-
return [disposeHover, disposeTyping];
69+
return disposeTyping;
7770
}

‎src/utils/index.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,22 @@ import rgbHex from "rgb-hex";
1010
* @returns MarkdownString | string
1111
*/
1212
export function genMarkdownString(value: string): string {
13-
let hexColor = "";
14-
if (/#[0-9a-fA-F]+/.test(value)) {
15-
hexColor = value;
16-
} else if (value.startsWith("rgb")) {
17-
hexColor = `#${rgbHex(value)}`;
18-
}
13+
const hexColor = getColorTokenValue(value);
14+
1915
return hexColor
2016
? `<span style='background-color:${hexColor};'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;`
2117
: "";
2218
}
19+
20+
export function getColorTokenValue(value: string): string {
21+
const stringValue = String(value);
22+
23+
let result: string = "";
24+
if (/#[0-9a-fA-F]+/.test(stringValue)) {
25+
result = stringValue;
26+
} else if (stringValue.startsWith("rgb")) {
27+
result = `#${rgbHex(stringValue)}`;
28+
}
29+
30+
return result;
31+
}

0 commit comments

Comments
 (0)