@mantine/code-highlight 9.0.0-alpha.5 → 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 +3 -3
- 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 { 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"],"
|
|
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
|