diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 86c84296507..9b9d9f7ec90 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -12,7 +12,7 @@ import CopyIcon from '@site/src/icons/copy.svg';
import useDebouncedToggle from './hooks/useDebouncedToggle';
-import { createMarkdown } from './lib/markdown';
+import { createMarkdown, createMarkdownParams } from './lib/markdown';
import type { RuleDetails } from './types';
@@ -97,8 +97,8 @@ function OptionsSelector({
}
window
.open(
- `https://github.com/typescript-eslint/typescript-eslint/issues/new?body=${encodeURIComponent(
- createMarkdown(state),
+ `https://github.com/typescript-eslint/typescript-eslint/issues/new?${createMarkdownParams(
+ state,
)}`,
'_blank',
)
@@ -202,7 +202,7 @@ function OptionsSelector({
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 6f28f21d36e..577d69022f6 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -48,7 +48,7 @@ function Playground(): JSX.Element {
rules: {},
tsConfig: {},
});
- const { isDarkTheme } = useColorMode();
+ const { colorMode } = useColorMode();
const [esAst, setEsAst] = useState();
const [tsAst, setTsAST] = useState();
const [scope, setScope] = useState | string | null>();
@@ -83,7 +83,7 @@ function Playground(): JSX.Element {
jsx={state.jsx}
code={state.code}
tsConfig={state.tsConfig}
- darkTheme={isDarkTheme}
+ darkTheme={colorMode === 'dark'}
sourceType={state.sourceType}
rules={state.rules}
showAST={state.showAST}
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index 3fe7d7e1ddc..e2e47f2f3fa 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/packages/website/src/components/editor/useSandboxServices.ts
@@ -35,7 +35,7 @@ export const useSandboxServices = (
): Error | SandboxServices | undefined => {
const [services, setServices] = useState();
const [loadedTs, setLoadedTs] = useState(props.ts);
- const { isDarkTheme } = useColorMode();
+ const { colorMode } = useColorMode();
useEffect(() => {
if (props.ts !== loadedTs) {
@@ -77,7 +77,7 @@ export const useSandboxServices = (
ts,
);
sandboxInstance.monaco.editor.setTheme(
- isDarkTheme ? 'vs-dark' : 'vs-light',
+ colorMode === 'dark' ? 'vs-dark' : 'vs-light',
);
const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
diff --git a/packages/website/src/components/lib/markdown.ts b/packages/website/src/components/lib/markdown.ts
index 3b74b97fe79..adb14c8d44a 100644
--- a/packages/website/src/components/lib/markdown.ts
+++ b/packages/website/src/components/lib/markdown.ts
@@ -29,25 +29,50 @@ function createSummaryJson(
return '';
}
+export function genVersions(state: ConfigModel): string {
+ return [
+ '| package | version |',
+ '| -- | -- |',
+ `| \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
+ `| \`@typescript-eslint/parser\` | \`${process.env.TS_ESLINT_VERSION}\` |`,
+ `| \`TypeScript\` | \`${state.ts}\` |`,
+ `| \`ESLint\` | \`${process.env.ESLINT_VERSION}\` |`,
+ `| \`node\` | \`web\` |`,
+ ].join('\n');
+}
+
export function createMarkdown(state: ConfigModel): string {
return [
- '## Repro',
`[Playground](${document.location.toString()})`,
createSummary(state.code, 'Code', 'ts', 30),
createSummaryJson(state.rules, 'rules', 'Eslint config'),
createSummaryJson(state.tsConfig, 'compilerOptions', 'TypeScript config'),
- '## Expected Result\n',
- '## Actual Result\n',
- '## Additional Info\n',
- '## Versions',
- `| package | version |
-| ---------------------------------- | ------- |
-| \`@typescript-eslint/eslint-plugin\` | \`${process.env.TS_ESLINT_VERSION}\` |
-| \`@typescript-eslint/parser\` | \`${process.env.TS_ESLINT_VERSION}\` |
-| \`TypeScript\` | \`${state.ts}\` |
-| \`ESLint\` | \`${process.env.ESLINT_VERSION}\` |
-| \`Env\` | \`web\` |`,
+ genVersions(state),
]
.filter(Boolean)
.join('\n\n');
}
+
+export function createMarkdownParams(state: ConfigModel): string {
+ const params = {
+ template: '1-bug-report-plugin.yaml',
+ title: 'Bug: [rule name here] ',
+ 'playground-link': document.location.toString(),
+ 'repro-code': state.code,
+ 'eslint-config':
+ `module.exports = ` +
+ JSON.stringify(
+ { parser: '@typescript-eslint/parser', rules: state.rules },
+ null,
+ 2,
+ ),
+ 'typescript-config': JSON.stringify(
+ { compilerOptions: state.tsConfig },
+ null,
+ 2,
+ ),
+ versions: genVersions(state),
+ };
+
+ return new URLSearchParams(params).toString();
+}