@mantine/code-highlight 9.0.0-alpha.4 → 9.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/CodeHighlight/CodeHighlight.cjs +130 -169
- package/cjs/CodeHighlight/CodeHighlight.cjs.map +1 -1
- package/cjs/CodeHighlight/CodeHighlight.context.cjs +7 -10
- package/cjs/CodeHighlight/CodeHighlight.context.cjs.map +1 -1
- package/cjs/CodeHighlight/CodeHighlightControl/CodeHighlightControl.cjs +31 -40
- package/cjs/CodeHighlight/CodeHighlightControl/CodeHighlightControl.cjs.map +1 -1
- package/cjs/CodeHighlight/CopyCodeButton/CopyCodeButton.cjs +19 -26
- package/cjs/CodeHighlight/CopyCodeButton/CopyCodeButton.cjs.map +1 -1
- package/cjs/CodeHighlight/CopyCodeButton/CopyIcon.cjs +30 -28
- package/cjs/CodeHighlight/CopyCodeButton/CopyIcon.cjs.map +1 -1
- package/cjs/CodeHighlight/ExpandCodeButton/ExpandCodeButton.cjs +16 -24
- package/cjs/CodeHighlight/ExpandCodeButton/ExpandCodeButton.cjs.map +1 -1
- package/cjs/CodeHighlight/ExpandCodeButton/ExpandIcon.cjs +40 -35
- package/cjs/CodeHighlight/ExpandCodeButton/ExpandIcon.cjs.map +1 -1
- package/cjs/CodeHighlight/InlineCodeHighlight.cjs +38 -37
- package/cjs/CodeHighlight/InlineCodeHighlight.cjs.map +1 -1
- package/cjs/CodeHighlight.module.cjs +22 -0
- package/cjs/CodeHighlight.module.cjs.map +1 -0
- package/cjs/CodeHighlightProvider/CodeHighlightProvider.cjs +26 -27
- package/cjs/CodeHighlightProvider/CodeHighlightProvider.cjs.map +1 -1
- package/cjs/CodeHighlightProvider/adapters/highlight-js-adapter.cjs +12 -14
- package/cjs/CodeHighlightProvider/adapters/highlight-js-adapter.cjs.map +1 -1
- package/cjs/CodeHighlightProvider/adapters/plain-text-adapter.cjs +8 -7
- package/cjs/CodeHighlightProvider/adapters/plain-text-adapter.cjs.map +1 -1
- package/cjs/CodeHighlightProvider/adapters/shiki-adapter.cjs +34 -42
- package/cjs/CodeHighlightProvider/adapters/shiki-adapter.cjs.map +1 -1
- package/cjs/CodeHighlightProvider/adapters/shiki-themes.cjs +1131 -1234
- package/cjs/CodeHighlightProvider/adapters/shiki-themes.cjs.map +1 -1
- package/cjs/CodeHighlightTabs/CodeHighlightTabs.cjs +103 -134
- package/cjs/CodeHighlightTabs/CodeHighlightTabs.cjs.map +1 -1
- package/cjs/CodeHighlightTabs/FileIcon.cjs +18 -14
- package/cjs/CodeHighlightTabs/FileIcon.cjs.map +1 -1
- package/cjs/_virtual/_rolldown/runtime.cjs +24 -0
- package/cjs/index.cjs +21 -26
- package/esm/CodeHighlight/CodeHighlight.context.mjs +7 -8
- package/esm/CodeHighlight/CodeHighlight.context.mjs.map +1 -1
- package/esm/CodeHighlight/CodeHighlight.mjs +126 -161
- package/esm/CodeHighlight/CodeHighlight.mjs.map +1 -1
- package/esm/CodeHighlight/CodeHighlightControl/CodeHighlightControl.mjs +29 -37
- package/esm/CodeHighlight/CodeHighlightControl/CodeHighlightControl.mjs.map +1 -1
- package/esm/CodeHighlight/CopyCodeButton/CopyCodeButton.mjs +18 -24
- package/esm/CodeHighlight/CopyCodeButton/CopyCodeButton.mjs.map +1 -1
- package/esm/CodeHighlight/CopyCodeButton/CopyIcon.mjs +29 -26
- package/esm/CodeHighlight/CopyCodeButton/CopyIcon.mjs.map +1 -1
- package/esm/CodeHighlight/ExpandCodeButton/ExpandCodeButton.mjs +15 -22
- package/esm/CodeHighlight/ExpandCodeButton/ExpandCodeButton.mjs.map +1 -1
- package/esm/CodeHighlight/ExpandCodeButton/ExpandIcon.mjs +39 -33
- package/esm/CodeHighlight/ExpandCodeButton/ExpandIcon.mjs.map +1 -1
- package/esm/CodeHighlight/InlineCodeHighlight.mjs +36 -34
- package/esm/CodeHighlight/InlineCodeHighlight.mjs.map +1 -1
- package/esm/CodeHighlight.module.mjs +22 -0
- package/esm/CodeHighlight.module.mjs.map +1 -0
- package/esm/CodeHighlightProvider/CodeHighlightProvider.mjs +24 -23
- package/esm/CodeHighlightProvider/CodeHighlightProvider.mjs.map +1 -1
- package/esm/CodeHighlightProvider/adapters/highlight-js-adapter.mjs +12 -12
- package/esm/CodeHighlightProvider/adapters/highlight-js-adapter.mjs.map +1 -1
- package/esm/CodeHighlightProvider/adapters/plain-text-adapter.mjs +8 -5
- package/esm/CodeHighlightProvider/adapters/plain-text-adapter.mjs.map +1 -1
- package/esm/CodeHighlightProvider/adapters/shiki-adapter.mjs +34 -40
- package/esm/CodeHighlightProvider/adapters/shiki-adapter.mjs.map +1 -1
- package/esm/CodeHighlightProvider/adapters/shiki-themes.mjs +1131 -1232
- package/esm/CodeHighlightProvider/adapters/shiki-themes.mjs.map +1 -1
- package/esm/CodeHighlightTabs/CodeHighlightTabs.mjs +101 -131
- package/esm/CodeHighlightTabs/CodeHighlightTabs.mjs.map +1 -1
- package/esm/CodeHighlightTabs/FileIcon.mjs +17 -12
- package/esm/CodeHighlightTabs/FileIcon.mjs.map +1 -1
- package/esm/index.mjs +10 -10
- package/package.json +7 -7
- package/cjs/CodeHighlight.module.css.cjs +0 -7
- package/cjs/CodeHighlight.module.css.cjs.map +0 -1
- package/cjs/index.cjs.map +0 -1
- package/esm/CodeHighlight.module.css.mjs +0 -5
- package/esm/CodeHighlight.module.css.mjs.map +0 -1
- package/esm/index.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlightControl.mjs","sources":["../../../src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.tsx"],"sourcesContent":["import {\n ActionIcon,\n BoxProps,\n MantinePolymorphicComponent,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useCodeHighlightContext } from '../CodeHighlight.context';\n\nexport interface CodeHighlightControlProps\n extends BoxProps, StylesApiProps<CodeHighlightControlFactory> {\n /** Control icon */\n children?: React.ReactNode;\n\n /** Label displayed in the tooltip when the control is hovered */\n tooltipLabel?: string;\n}\n\nexport type CodeHighlightControlFactory = PolymorphicFactory<{\n props: CodeHighlightControlProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n}>;\n\nexport const CodeHighlightControl: MantinePolymorphicComponent<CodeHighlightControlFactory> =\n polymorphicFactory<CodeHighlightControlFactory>((_props) => {\n const props = useProps('CodeHighlightControl', null, _props);\n const { children, vars, tooltipLabel, ...others } = props;\n const ctx = useCodeHighlightContext();\n const tooltipStyles = ctx.getStyles('controlTooltip');\n\n const control = (\n <ActionIcon\n {...ctx.getStyles('control')}\n {...others}\n variant=\"none\"\n data-code-color-scheme={ctx.codeColorScheme}\n >\n {children}\n </ActionIcon>\n );\n\n if (tooltipLabel) {\n return (\n <Tooltip\n label={tooltipLabel}\n fz=\"sm\"\n position=\"bottom\"\n classNames={{ tooltip: tooltipStyles.className }}\n styles={{ tooltip: tooltipStyles.style }}\n data-code-color-scheme={ctx.codeColorScheme}\n transitionProps={{ duration: 0 }}\n >\n {control}\n </Tooltip>\n );\n }\n\n return control;\n });\n\nCodeHighlightControl.displayName = '@mantine/code-highlight/CodeHighlightControl';\n"],"
|
|
1
|
+
{"version":3,"file":"CodeHighlightControl.mjs","names":[],"sources":["../../../src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.tsx"],"sourcesContent":["import {\n ActionIcon,\n BoxProps,\n MantinePolymorphicComponent,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useCodeHighlightContext } from '../CodeHighlight.context';\n\nexport interface CodeHighlightControlProps\n extends BoxProps, StylesApiProps<CodeHighlightControlFactory> {\n /** Control icon */\n children?: React.ReactNode;\n\n /** Label displayed in the tooltip when the control is hovered */\n tooltipLabel?: string;\n}\n\nexport type CodeHighlightControlFactory = PolymorphicFactory<{\n props: CodeHighlightControlProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n}>;\n\nexport const CodeHighlightControl: MantinePolymorphicComponent<CodeHighlightControlFactory> =\n polymorphicFactory<CodeHighlightControlFactory>((_props) => {\n const props = useProps('CodeHighlightControl', null, _props);\n const { children, vars, tooltipLabel, ...others } = props;\n const ctx = useCodeHighlightContext();\n const tooltipStyles = ctx.getStyles('controlTooltip');\n\n const control = (\n <ActionIcon\n {...ctx.getStyles('control')}\n {...others}\n variant=\"none\"\n data-code-color-scheme={ctx.codeColorScheme}\n >\n {children}\n </ActionIcon>\n );\n\n if (tooltipLabel) {\n return (\n <Tooltip\n label={tooltipLabel}\n fz=\"sm\"\n position=\"bottom\"\n classNames={{ tooltip: tooltipStyles.className }}\n styles={{ tooltip: tooltipStyles.style }}\n data-code-color-scheme={ctx.codeColorScheme}\n transitionProps={{ duration: 0 }}\n >\n {control}\n </Tooltip>\n );\n }\n\n return control;\n });\n\nCodeHighlightControl.displayName = '@mantine/code-highlight/CodeHighlightControl';\n"],"mappings":";;;;;AA2BA,MAAa,uBACX,oBAAiD,WAAW;CAE1D,MAAM,EAAE,UAAU,MAAM,cAAc,GAAG,WAD3B,SAAS,wBAAwB,MAAM,OAAO;CAE5D,MAAM,MAAM,yBAAyB;CACrC,MAAM,gBAAgB,IAAI,UAAU,iBAAiB;CAErD,MAAM,UACJ,oBAAC,YAAD;EACE,GAAI,IAAI,UAAU,UAAU;EAC5B,GAAI;EACJ,SAAQ;EACR,0BAAwB,IAAI;EAE3B;EACU,CAAA;AAGf,KAAI,aACF,QACE,oBAAC,SAAD;EACE,OAAO;EACP,IAAG;EACH,UAAS;EACT,YAAY,EAAE,SAAS,cAAc,WAAW;EAChD,QAAQ,EAAE,SAAS,cAAc,OAAO;EACxC,0BAAwB,IAAI;EAC5B,iBAAiB,EAAE,UAAU,GAAG;YAE/B;EACO,CAAA;AAId,QAAO;EACP;AAEJ,qBAAqB,cAAc"}
|
|
@@ -1,27 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
function CopyCodeButton({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onClick: () => clipboard.copy(code.trim()),
|
|
17
|
-
variant: "none",
|
|
18
|
-
tooltipLabel: clipboard.copied ? copiedLabel : copyLabel,
|
|
19
|
-
"aria-label": clipboard.copied ? copiedLabel : `${copyLabel} code`,
|
|
20
|
-
children: /* @__PURE__ */ jsx(CopyIcon, { copied: clipboard.copied })
|
|
21
|
-
}
|
|
22
|
-
);
|
|
1
|
+
"use client";
|
|
2
|
+
import { CodeHighlightControl } from "../CodeHighlightControl/CodeHighlightControl.mjs";
|
|
3
|
+
import { CopyIcon } from "./CopyIcon.mjs";
|
|
4
|
+
import { useClipboard } from "@mantine/hooks";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight/CopyCodeButton/CopyCodeButton.tsx
|
|
7
|
+
function CopyCodeButton({ code, copyLabel = "Copy", copiedLabel = "Copied" }) {
|
|
8
|
+
const clipboard = useClipboard();
|
|
9
|
+
return /* @__PURE__ */ jsx(CodeHighlightControl, {
|
|
10
|
+
onClick: () => clipboard.copy(code.trim()),
|
|
11
|
+
variant: "none",
|
|
12
|
+
tooltipLabel: clipboard.copied ? copiedLabel : copyLabel,
|
|
13
|
+
"aria-label": clipboard.copied ? copiedLabel : `${copyLabel} code`,
|
|
14
|
+
children: /* @__PURE__ */ jsx(CopyIcon, { copied: clipboard.copied })
|
|
15
|
+
});
|
|
23
16
|
}
|
|
24
17
|
CopyCodeButton.displayName = "@mantine/code-highlight/CopyCodeButton";
|
|
25
|
-
|
|
18
|
+
//#endregion
|
|
26
19
|
export { CopyCodeButton };
|
|
27
|
-
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=CopyCodeButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyCodeButton.mjs","sources":["../../../src/CodeHighlight/CopyCodeButton/CopyCodeButton.tsx"],"sourcesContent":["import { useClipboard } from '@mantine/hooks';\nimport { CodeHighlightControl } from '../CodeHighlightControl/CodeHighlightControl';\nimport { CopyIcon } from './CopyIcon';\n\ninterface CopyCodeButtonProps {\n code: string;\n copiedLabel?: string;\n copyLabel?: string;\n}\n\nexport function CopyCodeButton({\n code,\n copyLabel = 'Copy',\n copiedLabel = 'Copied',\n}: CopyCodeButtonProps) {\n const clipboard = useClipboard();\n\n return (\n <CodeHighlightControl\n onClick={() => clipboard.copy(code.trim())}\n variant=\"none\"\n tooltipLabel={clipboard.copied ? copiedLabel : copyLabel}\n aria-label={clipboard.copied ? copiedLabel : `${copyLabel} code`}\n >\n <CopyIcon copied={clipboard.copied} />\n </CodeHighlightControl>\n );\n}\n\nCopyCodeButton.displayName = '@mantine/code-highlight/CopyCodeButton';\n"],"
|
|
1
|
+
{"version":3,"file":"CopyCodeButton.mjs","names":[],"sources":["../../../src/CodeHighlight/CopyCodeButton/CopyCodeButton.tsx"],"sourcesContent":["import { useClipboard } from '@mantine/hooks';\nimport { CodeHighlightControl } from '../CodeHighlightControl/CodeHighlightControl';\nimport { CopyIcon } from './CopyIcon';\n\ninterface CopyCodeButtonProps {\n code: string;\n copiedLabel?: string;\n copyLabel?: string;\n}\n\nexport function CopyCodeButton({\n code,\n copyLabel = 'Copy',\n copiedLabel = 'Copied',\n}: CopyCodeButtonProps) {\n const clipboard = useClipboard();\n\n return (\n <CodeHighlightControl\n onClick={() => clipboard.copy(code.trim())}\n variant=\"none\"\n tooltipLabel={clipboard.copied ? copiedLabel : copyLabel}\n aria-label={clipboard.copied ? copiedLabel : `${copyLabel} code`}\n >\n <CopyIcon copied={clipboard.copied} />\n </CodeHighlightControl>\n );\n}\n\nCopyCodeButton.displayName = '@mantine/code-highlight/CopyCodeButton';\n"],"mappings":";;;;;;AAUA,SAAgB,eAAe,EAC7B,MACA,YAAY,QACZ,cAAc,YACQ;CACtB,MAAM,YAAY,cAAc;AAEhC,QACE,oBAAC,sBAAD;EACE,eAAe,UAAU,KAAK,KAAK,MAAM,CAAC;EAC1C,SAAQ;EACR,cAAc,UAAU,SAAS,cAAc;EAC/C,cAAY,UAAU,SAAS,cAAc,GAAG,UAAU;YAE1D,oBAAC,UAAD,EAAU,QAAQ,UAAU,QAAU,CAAA;EACjB,CAAA;;AAI3B,eAAe,cAAc"}
|
|
@@ -1,30 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx, jsxs
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight/CopyCodeButton/CopyIcon.tsx
|
|
4
4
|
function CopyIcon({ copied, ...others }) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
5
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
strokeWidth: "2",
|
|
9
|
+
stroke: "currentColor",
|
|
10
|
+
fill: "none",
|
|
11
|
+
strokeLinecap: "round",
|
|
12
|
+
strokeLinejoin: "round",
|
|
13
|
+
...others,
|
|
14
|
+
children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
|
|
15
|
+
stroke: "none",
|
|
16
|
+
d: "M0 0h24v24H0z",
|
|
17
|
+
fill: "none"
|
|
18
|
+
}), /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
19
|
+
/* @__PURE__ */ jsx("path", {
|
|
20
|
+
stroke: "none",
|
|
21
|
+
d: "M0 0h24v24H0z",
|
|
22
|
+
fill: "none"
|
|
23
|
+
}),
|
|
24
|
+
/* @__PURE__ */ jsx("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }),
|
|
25
|
+
/* @__PURE__ */ jsx("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })
|
|
26
|
+
] })
|
|
27
|
+
});
|
|
26
28
|
}
|
|
27
29
|
CopyIcon.displayName = "@mantine/code-highlight/CopyIcon";
|
|
28
|
-
|
|
30
|
+
//#endregion
|
|
29
31
|
export { CopyIcon };
|
|
30
|
-
|
|
32
|
+
|
|
33
|
+
//# sourceMappingURL=CopyIcon.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyIcon.mjs","sources":["../../../src/CodeHighlight/CopyCodeButton/CopyIcon.tsx"],"sourcesContent":["interface CopyIconProps extends React.ComponentProps<'svg'> {\n copied: boolean;\n}\n\nexport function CopyIcon({ copied, ...others }: CopyIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...others}\n >\n {copied ? (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M5 12l5 5l10 -10\" />\n </>\n ) : (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z\" />\n <path d=\"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2\" />\n </>\n )}\n </svg>\n );\n}\n\nCopyIcon.displayName = '@mantine/code-highlight/CopyIcon';\n"],"
|
|
1
|
+
{"version":3,"file":"CopyIcon.mjs","names":[],"sources":["../../../src/CodeHighlight/CopyCodeButton/CopyIcon.tsx"],"sourcesContent":["interface CopyIconProps extends React.ComponentProps<'svg'> {\n copied: boolean;\n}\n\nexport function CopyIcon({ copied, ...others }: CopyIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...others}\n >\n {copied ? (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M5 12l5 5l10 -10\" />\n </>\n ) : (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z\" />\n <path d=\"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2\" />\n </>\n )}\n </svg>\n );\n}\n\nCopyIcon.displayName = '@mantine/code-highlight/CopyIcon';\n"],"mappings":";;;AAIA,SAAgB,SAAS,EAAE,QAAQ,GAAG,UAAyB;AAC7D,QACE,oBAAC,OAAD;EACE,OAAM;EACN,SAAQ;EACR,aAAY;EACZ,QAAO;EACP,MAAK;EACL,eAAc;EACd,gBAAe;EACf,GAAI;YAEH,SACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,QAAO;GAAO,GAAE;GAAgB,MAAK;GAAS,CAAA,EACpD,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,CAC5B,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;IAAS,CAAA;GACpD,oBAAC,QAAD,EAAM,GAAE,gFAAiF,CAAA;GACzF,oBAAC,QAAD,EAAM,GAAE,gEAAiE,CAAA;GACxE,EAAA,CAAA;EAED,CAAA;;AAIV,SAAS,cAAc"}
|
|
@@ -1,25 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
function ExpandCodeButton({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
CodeHighlightControl,
|
|
14
|
-
{
|
|
15
|
-
onClick: () => onExpand(!expanded),
|
|
16
|
-
tooltipLabel: expanded ? collapseCodeLabel : expandCodeLabel,
|
|
17
|
-
"aria-label": expanded ? collapseCodeLabel : expandCodeLabel,
|
|
18
|
-
children: /* @__PURE__ */ jsx(ExpandIcon, { expanded })
|
|
19
|
-
}
|
|
20
|
-
);
|
|
1
|
+
"use client";
|
|
2
|
+
import { CodeHighlightControl } from "../CodeHighlightControl/CodeHighlightControl.mjs";
|
|
3
|
+
import { ExpandIcon } from "./ExpandIcon.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.tsx
|
|
6
|
+
function ExpandCodeButton({ expanded, onExpand, expandCodeLabel = "Expand code", collapseCodeLabel = "Collapse code" }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(CodeHighlightControl, {
|
|
8
|
+
onClick: () => onExpand(!expanded),
|
|
9
|
+
tooltipLabel: expanded ? collapseCodeLabel : expandCodeLabel,
|
|
10
|
+
"aria-label": expanded ? collapseCodeLabel : expandCodeLabel,
|
|
11
|
+
children: /* @__PURE__ */ jsx(ExpandIcon, { expanded })
|
|
12
|
+
});
|
|
21
13
|
}
|
|
22
14
|
ExpandCodeButton.displayName = "@mantine/code-highlight/ExpandCodeButton";
|
|
23
|
-
|
|
15
|
+
//#endregion
|
|
24
16
|
export { ExpandCodeButton };
|
|
25
|
-
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=ExpandCodeButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandCodeButton.mjs","sources":["../../../src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.tsx"],"sourcesContent":["import { CodeHighlightControl } from '../CodeHighlightControl/CodeHighlightControl';\nimport { ExpandIcon } from './ExpandIcon';\n\ninterface ExpandCodeButtonProps {\n expanded: boolean;\n onExpand: (value: boolean) => void;\n collapseCodeLabel?: string;\n expandCodeLabel?: string;\n}\n\nexport function ExpandCodeButton({\n expanded,\n onExpand,\n expandCodeLabel = 'Expand code',\n collapseCodeLabel = 'Collapse code',\n}: ExpandCodeButtonProps) {\n return (\n <CodeHighlightControl\n onClick={() => onExpand(!expanded)}\n tooltipLabel={expanded ? collapseCodeLabel : expandCodeLabel}\n aria-label={expanded ? collapseCodeLabel : expandCodeLabel}\n >\n <ExpandIcon expanded={expanded} />\n </CodeHighlightControl>\n );\n}\n\nExpandCodeButton.displayName = '@mantine/code-highlight/ExpandCodeButton';\n"],"
|
|
1
|
+
{"version":3,"file":"ExpandCodeButton.mjs","names":[],"sources":["../../../src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.tsx"],"sourcesContent":["import { CodeHighlightControl } from '../CodeHighlightControl/CodeHighlightControl';\nimport { ExpandIcon } from './ExpandIcon';\n\ninterface ExpandCodeButtonProps {\n expanded: boolean;\n onExpand: (value: boolean) => void;\n collapseCodeLabel?: string;\n expandCodeLabel?: string;\n}\n\nexport function ExpandCodeButton({\n expanded,\n onExpand,\n expandCodeLabel = 'Expand code',\n collapseCodeLabel = 'Collapse code',\n}: ExpandCodeButtonProps) {\n return (\n <CodeHighlightControl\n onClick={() => onExpand(!expanded)}\n tooltipLabel={expanded ? collapseCodeLabel : expandCodeLabel}\n aria-label={expanded ? collapseCodeLabel : expandCodeLabel}\n >\n <ExpandIcon expanded={expanded} />\n </CodeHighlightControl>\n );\n}\n\nExpandCodeButton.displayName = '@mantine/code-highlight/ExpandCodeButton';\n"],"mappings":";;;;;AAUA,SAAgB,iBAAiB,EAC/B,UACA,UACA,kBAAkB,eAClB,oBAAoB,mBACI;AACxB,QACE,oBAAC,sBAAD;EACE,eAAe,SAAS,CAAC,SAAS;EAClC,cAAc,WAAW,oBAAoB;EAC7C,cAAY,WAAW,oBAAoB;YAE3C,oBAAC,YAAD,EAAsB,UAAY,CAAA;EACb,CAAA;;AAI3B,iBAAiB,cAAc"}
|
|
@@ -1,37 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx, jsxs
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight/ExpandCodeButton/ExpandIcon.tsx
|
|
4
4
|
function ExpandIcon({ expanded, style, ...others }) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
5
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
strokeWidth: "2",
|
|
9
|
+
stroke: "currentColor",
|
|
10
|
+
fill: "none",
|
|
11
|
+
strokeLinecap: "round",
|
|
12
|
+
strokeLinejoin: "round",
|
|
13
|
+
...others,
|
|
14
|
+
children: expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
|
+
/* @__PURE__ */ jsx("path", {
|
|
16
|
+
stroke: "none",
|
|
17
|
+
d: "M0 0h24v24H0z",
|
|
18
|
+
fill: "none"
|
|
19
|
+
}),
|
|
20
|
+
/* @__PURE__ */ jsx("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
|
|
21
|
+
/* @__PURE__ */ jsx("path", { d: "M9 17l1 0" }),
|
|
22
|
+
/* @__PURE__ */ jsx("path", { d: "M14 17l1 0" }),
|
|
23
|
+
/* @__PURE__ */ jsx("path", { d: "M19 17l1 0" }),
|
|
24
|
+
/* @__PURE__ */ jsx("path", { d: "M4 17l1 0" })
|
|
25
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26
|
+
/* @__PURE__ */ jsx("path", {
|
|
27
|
+
stroke: "none",
|
|
28
|
+
d: "M0 0h24v24H0z",
|
|
29
|
+
fill: "none"
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
|
|
32
|
+
/* @__PURE__ */ jsx("path", { d: "M9 7l1 0" }),
|
|
33
|
+
/* @__PURE__ */ jsx("path", { d: "M14 7l1 0" }),
|
|
34
|
+
/* @__PURE__ */ jsx("path", { d: "M19 7l1 0" }),
|
|
35
|
+
/* @__PURE__ */ jsx("path", { d: "M4 7l1 0" })
|
|
36
|
+
] })
|
|
37
|
+
});
|
|
33
38
|
}
|
|
34
39
|
ExpandIcon.displayName = "@mantine/code-highlight/ExpandIcon";
|
|
35
|
-
|
|
40
|
+
//#endregion
|
|
36
41
|
export { ExpandIcon };
|
|
37
|
-
|
|
42
|
+
|
|
43
|
+
//# sourceMappingURL=ExpandIcon.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandIcon.mjs","sources":["../../../src/CodeHighlight/ExpandCodeButton/ExpandIcon.tsx"],"sourcesContent":["interface ExpandIconProps extends React.ComponentProps<'svg'> {\n expanded: boolean;\n}\n\nexport function ExpandIcon({ expanded, style, ...others }: ExpandIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...others}\n >\n {expanded ? (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 13v-8l-3 3m6 0l-3 -3\" />\n <path d=\"M9 17l1 0\" />\n <path d=\"M14 17l1 0\" />\n <path d=\"M19 17l1 0\" />\n <path d=\"M4 17l1 0\" />\n </>\n ) : (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 11v8l3 -3m-6 0l3 3\" />\n <path d=\"M9 7l1 0\" />\n <path d=\"M14 7l1 0\" />\n <path d=\"M19 7l1 0\" />\n <path d=\"M4 7l1 0\" />\n </>\n )}\n </svg>\n );\n}\n\nExpandIcon.displayName = '@mantine/code-highlight/ExpandIcon';\n"],"
|
|
1
|
+
{"version":3,"file":"ExpandIcon.mjs","names":[],"sources":["../../../src/CodeHighlight/ExpandCodeButton/ExpandIcon.tsx"],"sourcesContent":["interface ExpandIconProps extends React.ComponentProps<'svg'> {\n expanded: boolean;\n}\n\nexport function ExpandIcon({ expanded, style, ...others }: ExpandIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"2\"\n stroke=\"currentColor\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...others}\n >\n {expanded ? (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 13v-8l-3 3m6 0l-3 -3\" />\n <path d=\"M9 17l1 0\" />\n <path d=\"M14 17l1 0\" />\n <path d=\"M19 17l1 0\" />\n <path d=\"M4 17l1 0\" />\n </>\n ) : (\n <>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 11v8l3 -3m-6 0l3 3\" />\n <path d=\"M9 7l1 0\" />\n <path d=\"M14 7l1 0\" />\n <path d=\"M19 7l1 0\" />\n <path d=\"M4 7l1 0\" />\n </>\n )}\n </svg>\n );\n}\n\nExpandIcon.displayName = '@mantine/code-highlight/ExpandIcon';\n"],"mappings":";;;AAIA,SAAgB,WAAW,EAAE,UAAU,OAAO,GAAG,UAA2B;AAC1E,QACE,oBAAC,OAAD;EACE,OAAM;EACN,SAAQ;EACR,aAAY;EACZ,QAAO;EACP,MAAK;EACL,eAAc;EACd,gBAAe;EACf,GAAI;YAEH,WACC,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;IAAS,CAAA;GACpD,oBAAC,QAAD,EAAM,GAAE,4BAA6B,CAAA;GACrC,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;GACtB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;GACrB,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;IAAS,CAAA;GACpD,oBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA;GACnC,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;GACtB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;GACtB,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACpB,EAAA,CAAA;EAED,CAAA;;AAIV,WAAW,cAAc"}
|
|
@@ -1,39 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
const varsResolver = createVarsResolver(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
|
|
12
|
-
}
|
|
13
|
-
})
|
|
14
|
-
);
|
|
1
|
+
"use client";
|
|
2
|
+
import CodeHighlight_module_default from "../CodeHighlight.module.mjs";
|
|
3
|
+
import { CodeHighlight } from "./CodeHighlight.mjs";
|
|
4
|
+
import { createVarsResolver, factory, getRadius, getThemeColor, useProps, useStyles } from "@mantine/core";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight/InlineCodeHighlight.tsx
|
|
7
|
+
const varsResolver = createVarsResolver((theme, { background, radius }) => ({ inlineCodeHighlight: {
|
|
8
|
+
"--ch-background": background ? getThemeColor(background, theme) : void 0,
|
|
9
|
+
"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
|
|
10
|
+
} }));
|
|
15
11
|
const InlineCodeHighlight = factory((_props) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
12
|
+
const props = useProps("InlineCodeHighlight", null, _props);
|
|
13
|
+
const { classNames, className, style, styles, unstyled, vars, attributes, ref, ...others } = props;
|
|
14
|
+
const getStyles = useStyles({
|
|
15
|
+
name: "InlineCodeHighlight",
|
|
16
|
+
classes: CodeHighlight_module_default,
|
|
17
|
+
props,
|
|
18
|
+
className,
|
|
19
|
+
style,
|
|
20
|
+
classNames,
|
|
21
|
+
styles,
|
|
22
|
+
unstyled,
|
|
23
|
+
attributes,
|
|
24
|
+
vars,
|
|
25
|
+
varsResolver,
|
|
26
|
+
rootSelector: "inlineCodeHighlight"
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx(CodeHighlight, {
|
|
29
|
+
...others,
|
|
30
|
+
ref,
|
|
31
|
+
...getStyles("inlineCodeHighlight"),
|
|
32
|
+
__inline: true
|
|
33
|
+
});
|
|
33
34
|
});
|
|
34
35
|
InlineCodeHighlight.displayName = "@mantine/code-highlight/InlineCodeHighlight";
|
|
35
|
-
InlineCodeHighlight.classes =
|
|
36
|
+
InlineCodeHighlight.classes = CodeHighlight_module_default;
|
|
36
37
|
InlineCodeHighlight.varsResolver = varsResolver;
|
|
37
|
-
|
|
38
|
+
//#endregion
|
|
38
39
|
export { InlineCodeHighlight };
|
|
39
|
-
|
|
40
|
+
|
|
41
|
+
//# sourceMappingURL=InlineCodeHighlight.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineCodeHighlight.mjs","sources":["../../src/CodeHighlight/InlineCodeHighlight.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport
|
|
1
|
+
{"version":3,"file":"InlineCodeHighlight.mjs","names":["classes"],"sources":["../../src/CodeHighlight/InlineCodeHighlight.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { CodeHighlight } from './CodeHighlight';\nimport classes from '../CodeHighlight.module.css';\n\nexport type InlineCodeHighlightStylesNames = 'inlineCodeHighlight';\nexport type InlineCodeHighlightCssVariables = {\n inlineCodeHighlight: '--ch-background' | '--ch-radius';\n};\n\nexport interface InlineCodeHighlightProps\n extends BoxProps, StylesApiProps<InlineCodeHighlightFactory>, ElementProps<'code'> {\n /** Code to highlight */\n code: string;\n\n /** Language of the code, used to determine syntax highlighting */\n language?: string;\n\n /** Controls background color of the code. By default, the value depends on color scheme. */\n background?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default 'sm' */\n radius?: MantineRadius;\n\n /** Adds border to the root element @default false */\n withBorder?: boolean;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n props: InlineCodeHighlightProps;\n ref: HTMLElement;\n stylesNames: InlineCodeHighlightStylesNames;\n vars: InlineCodeHighlightCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InlineCodeHighlightFactory>(\n (theme, { background, radius }) => ({\n inlineCodeHighlight: {\n '--ch-background': background ? getThemeColor(background, theme) : undefined,\n '--ch-radius': typeof radius !== 'undefined' ? getRadius(radius) : undefined,\n },\n })\n);\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props) => {\n const props = useProps('InlineCodeHighlight', null, _props);\n const { classNames, className, style, styles, unstyled, vars, attributes, ref, ...others } =\n props;\n\n const getStyles = useStyles<InlineCodeHighlightFactory>({\n name: 'InlineCodeHighlight',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'inlineCodeHighlight',\n });\n\n return (\n <CodeHighlight {...others} ref={ref as any} {...getStyles('inlineCodeHighlight')} __inline />\n );\n});\n\nInlineCodeHighlight.displayName = '@mantine/code-highlight/InlineCodeHighlight';\nInlineCodeHighlight.classes = classes;\nInlineCodeHighlight.varsResolver = varsResolver;\n"],"mappings":";;;;;;AA+CA,MAAM,eAAe,oBAClB,OAAO,EAAE,YAAY,cAAc,EAClC,qBAAqB;CACnB,mBAAmB,aAAa,cAAc,YAAY,MAAM,GAAG,KAAA;CACnE,eAAe,OAAO,WAAW,cAAc,UAAU,OAAO,GAAG,KAAA;CACpE,EACF,EACF;AAED,MAAa,sBAAsB,SAAqC,WAAW;CACjF,MAAM,QAAQ,SAAS,uBAAuB,MAAM,OAAO;CAC3D,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,YAAY,KAAK,GAAG,WAChF;CAEF,MAAM,YAAY,UAAsC;EACtD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,oBAAC,eAAD;EAAe,GAAI;EAAa;EAAY,GAAI,UAAU,sBAAsB;EAAE,UAAA;EAAW,CAAA;EAE/F;AAEF,oBAAoB,cAAc;AAClC,oBAAoB,UAAUA;AAC9B,oBAAoB,eAAe"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlight.module.css
|
|
3
|
+
var CodeHighlight_module_default = {
|
|
4
|
+
"root": "m_5cb1b9c8",
|
|
5
|
+
"codeHighlight": "m_e597c321",
|
|
6
|
+
"inlineCodeHighlight": "m_dfe9c588",
|
|
7
|
+
"pre": "m_2c47c4fd",
|
|
8
|
+
"code": "m_5caae6d3",
|
|
9
|
+
"controls": "m_be7e9c9c",
|
|
10
|
+
"control": "m_d498bab7",
|
|
11
|
+
"controlTooltip": "m_4c3d814c",
|
|
12
|
+
"scrollarea": "m_f744fd40",
|
|
13
|
+
"showCodeButton": "m_c9378bc2",
|
|
14
|
+
"file": "m_5cac2e62",
|
|
15
|
+
"fileIcon": "m_b46cddfb",
|
|
16
|
+
"filesScrollarea": "m_7b14120b",
|
|
17
|
+
"files": "m_38d99e51"
|
|
18
|
+
};
|
|
19
|
+
//#endregion
|
|
20
|
+
export { CodeHighlight_module_default as default };
|
|
21
|
+
|
|
22
|
+
//# sourceMappingURL=CodeHighlight.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodeHighlight.module.mjs","names":[],"sources":["../src/CodeHighlight.module.css"],"sourcesContent":[".root {\n position: relative;\n}\n\n.codeHighlight {\n position: relative;\n border-radius: var(--ch-radius, 0px);\n overflow: hidden;\n\n &:where([data-with-border]) {\n @mixin where-light {\n border: 1px solid var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border: 1px solid var(--mantine-color-dark-6);\n }\n\n &:where([data-code-color-scheme='dark']) {\n border: 1px solid var(--mantine-color-dark-6);\n }\n\n &:where([data-code-color-scheme='light']) {\n border: 1px solid var(--mantine-color-gray-2);\n }\n }\n\n @mixin where-light {\n --ch-background: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --ch-background: var(--mantine-color-dark-8);\n }\n}\n\n.inlineCodeHighlight {\n border-radius: var(--ch-radius, var(--mantine-radius-sm));\n overflow: hidden;\n background-color: var(--ch-background);\n font-size: 13px;\n padding: 3px 5px;\n\n &:where([data-with-border]) {\n @mixin where-light {\n border: 1px solid var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border: 1px solid var(--mantine-color-dark-6);\n }\n\n &:where([data-code-color-scheme='dark']) {\n border: 1px solid var(--mantine-color-dark-6);\n }\n\n &:where([data-code-color-scheme='light']) {\n border: 1px solid var(--mantine-color-gray-2);\n }\n }\n\n @mixin where-light {\n --ch-background: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --ch-background: var(--mantine-color-dark-8);\n }\n}\n\n.pre {\n --code-line-height: 1.7;\n\n display: block;\n margin: 0;\n\n &[data-with-offset] .code {\n padding-top: 50px;\n }\n}\n\n.code {\n display: block;\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n background-color: var(--ch-background);\n font-size: 13px;\n line-height: var(--code-line-height, var(--mantine-line-height));\n font-family: var(--mantine-font-family-monospace);\n width: fit-content;\n min-width: 100%;\n\n &:where([data-inline]) {\n display: inline-block;\n padding: 3px 5px;\n background-color: var(--ch-background);\n }\n}\n\n.controls {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 1;\n background-color: var(--ch-background);\n border-bottom-left-radius: var(--mantine-radius-md);\n\n &:where([data-with-offset]) {\n top: 12px;\n }\n}\n\n.control {\n color: var(--mantine-color-text);\n opacity: 0.5;\n\n @mixin hover {\n color: var(--mantine-color-bright);\n opacity: 1;\n }\n\n &:where([data-code-color-scheme='dark']) {\n color: var(--mantine-color-dark-0);\n\n @mixin hover {\n color: var(--mantine-color-white);\n }\n }\n\n &:where([data-code-color-scheme='light']) {\n color: var(--mantine-color-black);\n\n @mixin hover {\n color: var(--mantine-color-black);\n }\n }\n\n & :where(svg) {\n width: 18px;\n height: 18px;\n display: block;\n }\n}\n\n.controlTooltip {\n &:where([data-code-color-scheme='light']) {\n background-color: var(--mantine-color-gray-9);\n color: var(--mantine-color-white);\n }\n\n &:where([data-code-color-scheme='dark']) {\n background-color: var(--mantine-color-gray-2);\n color: var(--mantine-color-black);\n }\n}\n\n.scrollarea {\n &[data-collapsed] {\n max-height: var(--ch-max-height, 180px);\n overflow: hidden;\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 80px;\n pointer-events: none;\n background: linear-gradient(\n 0deg,\n var(--ch-background) 0%,\n var(--ch-background) 25%,\n transparent 100%\n );\n z-index: 1;\n }\n }\n}\n\n.showCodeButton {\n position: absolute;\n z-index: 2;\n bottom: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n font-size: var(--mantine-font-size-sm);\n color: var(--mantine-color-anchor);\n width: 100%;\n text-align: center;\n padding-top: var(--mantine-spacing-xs);\n padding-bottom: var(--mantine-spacing-xs);\n white-space: nowrap;\n\n &[data-hidden] {\n display: none;\n }\n\n &:where([data-code-color-scheme='dark']) {\n color: var(--mantine-primary-color-5);\n }\n\n &:where([data-code-color-scheme='light']) {\n color: var(--mantine-primary-color-6);\n }\n}\n\n.file {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-xs);\n gap: 7px;\n padding: 5px 9px;\n font-family: var(--mantine-font-family-monospace);\n font-weight: var(--mantine-font-weight-bold);\n line-height: 1;\n user-select: none;\n cursor: pointer;\n opacity: 0.8;\n border: 1px solid transparent;\n white-space: nowrap;\n margin: 0;\n border-radius: var(--mantine-radius-default);\n\n &:where([data-active]) {\n opacity: 1;\n }\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-8);\n\n &:where([data-active]) {\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n }\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-0);\n\n &:where([data-active]) {\n background-color: var(--mantine-color-dark-5);\n color: var(--mantine-color-white);\n }\n }\n\n &:where([data-color-scheme='light']) {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-8);\n\n &:where([data-active]) {\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n }\n }\n\n &:where([data-color-scheme='dark']) {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-0);\n\n &:where([data-active]) {\n background-color: var(--mantine-color-dark-5);\n color: var(--mantine-color-white);\n }\n }\n\n @mixin hover {\n opacity: 1;\n }\n\n &:where(:only-child) {\n cursor: default;\n }\n}\n\n.fileIcon {\n & :where(svg) {\n display: block;\n }\n}\n\n.filesScrollarea {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n right: 70px;\n}\n\n.files {\n display: flex;\n padding: 12px 10px;\n padding-bottom: 0;\n gap: var(--mantine-spacing-xs);\n}\n"],"mappings":""}
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { createContext, use,
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { plainTextAdapter } from "./adapters/plain-text-adapter.mjs";
|
|
3
|
+
import { createContext, use, useEffect, useMemo, useState } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlightProvider/CodeHighlightProvider.tsx
|
|
6
6
|
const CodeHighlightContext = createContext({
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
adapter: plainTextAdapter,
|
|
8
|
+
highlight: plainTextAdapter.getHighlighter(null)
|
|
9
9
|
});
|
|
10
|
-
function CodeHighlightAdapterProvider({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
function CodeHighlightAdapterProvider({ adapter, children }) {
|
|
11
|
+
const [ctx, setCtx] = useState(null);
|
|
12
|
+
const highlight = useMemo(() => adapter.getHighlighter(ctx), [adapter, ctx]);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (adapter.loadContext) adapter.loadContext().then(setCtx);
|
|
15
|
+
}, [adapter]);
|
|
16
|
+
return /* @__PURE__ */ jsx(CodeHighlightContext, {
|
|
17
|
+
value: {
|
|
18
|
+
adapter,
|
|
19
|
+
highlight
|
|
20
|
+
},
|
|
21
|
+
children
|
|
22
|
+
});
|
|
22
23
|
}
|
|
23
24
|
function useHighlight() {
|
|
24
|
-
|
|
25
|
-
return ctx?.highlight || plainTextAdapter.getHighlighter(null);
|
|
25
|
+
return use(CodeHighlightContext)?.highlight || plainTextAdapter.getHighlighter(null);
|
|
26
26
|
}
|
|
27
|
+
//#endregion
|
|
28
|
+
export { CodeHighlightAdapterProvider, useHighlight };
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
//# sourceMappingURL=CodeHighlightProvider.mjs.map
|
|
30
|
+
//# sourceMappingURL=CodeHighlightProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlightProvider.mjs","sources":["../../src/CodeHighlightProvider/CodeHighlightProvider.tsx"],"sourcesContent":["import { createContext, use, useEffect, useMemo, useState } from 'react';\nimport { plainTextAdapter } from './adapters/plain-text-adapter';\n\ninterface HighlighterInput {\n colorScheme: 'light' | 'dark' | (string & {});\n code: string;\n language?: string;\n}\n\ntype Highlighter = (input: HighlighterInput) => {\n /** Highlighted code (html markup) */\n highlightedCode: string;\n\n /** `true` if the code is represented with html string, `false` for plain text string */\n isHighlighted: boolean;\n\n /** Props to pass down to `<code>` tag */\n codeElementProps?: Record<string, any>;\n};\n\nexport interface CodeHighlightAdapter {\n loadContext?: () => Promise<any>;\n getHighlighter: (ctx: any) => Highlighter;\n}\n\ninterface CodeHighlightProviderContext {\n adapter: CodeHighlightAdapter;\n highlight: Highlighter;\n}\n\nexport const CodeHighlightContext = createContext<CodeHighlightProviderContext>({\n adapter: plainTextAdapter,\n highlight: plainTextAdapter.getHighlighter(null),\n});\n\nexport interface CodeHighlightAdapterProviderProps {\n adapter: CodeHighlightAdapter;\n children: React.ReactNode;\n}\n\nexport function CodeHighlightAdapterProvider({\n adapter,\n children,\n}: CodeHighlightAdapterProviderProps) {\n const [ctx, setCtx] = useState<any>(null);\n const highlight = useMemo(() => adapter.getHighlighter(ctx), [adapter, ctx]);\n\n useEffect(() => {\n if (adapter.loadContext) {\n adapter.loadContext().then(setCtx);\n }\n }, [adapter]);\n\n return <CodeHighlightContext value={{ adapter, highlight }}>{children}</CodeHighlightContext>;\n}\n\nexport function useHighlight() {\n const ctx = use(CodeHighlightContext);\n return ctx?.highlight || plainTextAdapter.getHighlighter(null);\n}\n"],"
|
|
1
|
+
{"version":3,"file":"CodeHighlightProvider.mjs","names":[],"sources":["../../src/CodeHighlightProvider/CodeHighlightProvider.tsx"],"sourcesContent":["import { createContext, use, useEffect, useMemo, useState } from 'react';\nimport { plainTextAdapter } from './adapters/plain-text-adapter';\n\ninterface HighlighterInput {\n colorScheme: 'light' | 'dark' | (string & {});\n code: string;\n language?: string;\n}\n\ntype Highlighter = (input: HighlighterInput) => {\n /** Highlighted code (html markup) */\n highlightedCode: string;\n\n /** `true` if the code is represented with html string, `false` for plain text string */\n isHighlighted: boolean;\n\n /** Props to pass down to `<code>` tag */\n codeElementProps?: Record<string, any>;\n};\n\nexport interface CodeHighlightAdapter {\n loadContext?: () => Promise<any>;\n getHighlighter: (ctx: any) => Highlighter;\n}\n\ninterface CodeHighlightProviderContext {\n adapter: CodeHighlightAdapter;\n highlight: Highlighter;\n}\n\nexport const CodeHighlightContext = createContext<CodeHighlightProviderContext>({\n adapter: plainTextAdapter,\n highlight: plainTextAdapter.getHighlighter(null),\n});\n\nexport interface CodeHighlightAdapterProviderProps {\n adapter: CodeHighlightAdapter;\n children: React.ReactNode;\n}\n\nexport function CodeHighlightAdapterProvider({\n adapter,\n children,\n}: CodeHighlightAdapterProviderProps) {\n const [ctx, setCtx] = useState<any>(null);\n const highlight = useMemo(() => adapter.getHighlighter(ctx), [adapter, ctx]);\n\n useEffect(() => {\n if (adapter.loadContext) {\n adapter.loadContext().then(setCtx);\n }\n }, [adapter]);\n\n return <CodeHighlightContext value={{ adapter, highlight }}>{children}</CodeHighlightContext>;\n}\n\nexport function useHighlight() {\n const ctx = use(CodeHighlightContext);\n return ctx?.highlight || plainTextAdapter.getHighlighter(null);\n}\n"],"mappings":";;;;;AA8BA,MAAa,uBAAuB,cAA4C;CAC9E,SAAS;CACT,WAAW,iBAAiB,eAAe,KAAK;CACjD,CAAC;AAOF,SAAgB,6BAA6B,EAC3C,SACA,YACoC;CACpC,MAAM,CAAC,KAAK,UAAU,SAAc,KAAK;CACzC,MAAM,YAAY,cAAc,QAAQ,eAAe,IAAI,EAAE,CAAC,SAAS,IAAI,CAAC;AAE5E,iBAAgB;AACd,MAAI,QAAQ,YACV,SAAQ,aAAa,CAAC,KAAK,OAAO;IAEnC,CAAC,QAAQ,CAAC;AAEb,QAAO,oBAAC,sBAAD;EAAsB,OAAO;GAAE;GAAS;GAAW;EAAG;EAAgC,CAAA;;AAG/F,SAAgB,eAAe;AAE7B,QADY,IAAI,qBAAqB,EACzB,aAAa,iBAAiB,eAAe,KAAK"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
+
//#region packages/@mantine/code-highlight/src/CodeHighlightProvider/adapters/highlight-js-adapter.ts
|
|
1
2
|
function createHighlightJsAdapter(hljs) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
};
|
|
3
|
+
return { getHighlighter: () => ({ code, language }) => {
|
|
4
|
+
const lang = hljs.getLanguage(language) ? language : "plaintext";
|
|
5
|
+
return {
|
|
6
|
+
highlightedCode: hljs.highlight(code.trim(), { language: lang }).value,
|
|
7
|
+
isHighlighted: true,
|
|
8
|
+
codeElementProps: { className: `hljs ${lang}` }
|
|
9
|
+
};
|
|
10
|
+
} };
|
|
12
11
|
}
|
|
13
|
-
|
|
12
|
+
//#endregion
|
|
14
13
|
export { createHighlightJsAdapter };
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=highlight-js-adapter.mjs.map
|