Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(explorer): add darkmode theme to SyntaxHighlighter #4127

Merged
merged 11 commits into from
Nov 26, 2024
Merged

feat(explorer): add darkmode theme to SyntaxHighlighter #4127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4c8d268
feat(explorer): add theme switcher
VmMad Nov 13, 2024
1358dd3
Merge branch 'develop' into tooling-explorer/add-darkmode-support
VmMad Nov 13, 2024
4dd2d34
fix: add missing style to the icon
VmMad Nov 13, 2024
0ad0e6c
fix: lint
VmMad Nov 14, 2024
d12fe48
fix: add darkmode theme to SyntaxHighlighter
VmMad Nov 19, 2024
df5b5c9
fix: remove test class
VmMad Nov 19, 2024
a4b8279
Merge branch 'tooling-epic/add-darkmode-support-to-wallet' into tooli…
VmMad Nov 22, 2024
2d4369e
refactor: remove theme context from explorer
VmMad Nov 22, 2024
2cc1e09
Merge branch 'tooling-explorer/add-darkmode-support' into tooling-exp…
VmMad Nov 22, 2024
c3b9bf0
fix: update theme import
VmMad Nov 25, 2024
dc80bb3
Merge branch 'tooling-epic/explorer-darkmode-support' into tooling-ex…
VmMad Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions apps/explorer/src/components/module/PkgModulesWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function PkgModulesWrapper({
)}
/>
</div>
<div className="flex-1 overflow-auto pt-sm">
<div className="max-h-[560px] flex-1 overflow-auto pt-sm">
<VerticalList>
<div className="flex flex-col gap-sm">
{moduleNames.map((name) => (
Expand Down Expand Up @@ -189,13 +189,15 @@ function ExecutePanelContent({
))}
</SegmentedButton>

<ListTabContent id={EXECUTE_TAB.id}>
<ModuleFunctionsInteraction
key={`${packageId}-${moduleName}`}
packageId={packageId}
moduleName={moduleName}
/>
</ListTabContent>
<div className="pr-md--rs">
<ListTabContent id={EXECUTE_TAB.id}>
<ModuleFunctionsInteraction
key={`${packageId}-${moduleName}`}
packageId={packageId}
moduleName={moduleName}
/>
</ListTabContent>
</div>
</TabsProvider>
</TabbedContentWrapper>
);
Expand Down
12 changes: 9 additions & 3 deletions apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { useOnScreen } from '@iota/core';
import { Theme, useOnScreen, useTheme } from '@iota/core';
import { useRef, useEffect, useState } from 'react';
import { Highlight, themes } from 'prism-react-renderer';
import type { Language } from 'prism-react-renderer';
Expand Down Expand Up @@ -35,19 +35,25 @@ export function SyntaxHighlighter({
const observerElem = useRef<HTMLDivElement | null>(null);
const { isIntersecting } = useOnScreen(observerElem);
const [loadedLines, setLoadedLines] = useState(MAX_LINES);
const { theme } = useTheme();

useEffect(() => {
if (isIntersecting) {
setLoadedLines((prev) => prev + MAX_LINES);
}
}, [isIntersecting]);

const isDark = theme === Theme.Dark;
const codeTheme = isDark ? themes.oneDark : themes.github;

return (
<div className="overflow-auto whitespace-pre font-mono text-sm">
<Highlight code={code} language={language} theme={themes.github}>
<Highlight code={code} language={language} theme={codeTheme}>
{({ style, tokens, getLineProps, getTokenProps }) => (
<pre className="overflow-auto bg-transparent p-xs font-medium" style={style}>
{tokens.slice(0, loadedLines).map((line, i) => (
<div {...getLineProps({ line, key: i })} key={i} className="table-row">
<div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50">
<div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50 dark:text-primary-80">
{i + 1}
</div>

Expand Down
Loading