-
- {getDelimiterSymbol(displayConfig.latexDelimiter)}
-
-
- →
-
-
- {getDelimiterSymbol(
- displayConfig.latexDelimiter === LatexDelimiter.BRACKET
- ? LatexDelimiter.DOLLAR
- : LatexDelimiter.BRACKET
- )}
-
+
+
+ {getDelimiterSymbol(displayConfig.latexDelimiter)}
+
+
+
+ {getDelimiterSymbol(
+ displayConfig.latexDelimiter === LatexDelimiter.BRACKET
+ ? LatexDelimiter.DOLLAR
+ : LatexDelimiter.BRACKET
+ )}
-
- {getContentText()}
-
+
+
{`${t('currentDelimiter')}: ${
+ displayConfig.latexDelimiter === LatexDelimiter.BRACKET ? t('bracket') : t('dollar')
+ }`}
+
{`${t('newDelimiter')}: ${
+ displayConfig.latexDelimiter === LatexDelimiter.BRACKET ? t('dollar') : t('bracket')
+ }`}
+
+
{getContentText()}
);
};
diff --git a/src/components/home/setting-modal/index.js b/src/components/home/setting-modal/index.js
index 84017dd..4e1e374 100644
--- a/src/components/home/setting-modal/index.js
+++ b/src/components/home/setting-modal/index.js
@@ -32,55 +32,53 @@ const SettingModal = ({ isOpen, onClose, onSubmit, displayConfig, exportType, se
cancelLabel={t('cancel')}
confirmLabel={t('submit')}
>
-
+
);
};
diff --git a/src/components/home/tip-modal.js b/src/components/home/tip-modal.js
index ce67906..663dc52 100644
--- a/src/components/home/tip-modal.js
+++ b/src/components/home/tip-modal.js
@@ -17,15 +17,14 @@ const TipModal = ({ isOpen, onClose }) => {
onClose={onClose}
onConfirm={onClose}
confirmLabel={t('cancelLabel')}
+ size="sm"
>
-
- {tips.map(({ title, content }, index) => (
-
- ))}
-
+ {tips.map(({ title, content }, index) => (
+
+ ))}
);
};
diff --git a/src/components/layout.js b/src/components/layout.js
index ae8a48e..07457e3 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -1,24 +1,15 @@
-import React, { Fragment } from 'react';
+import React from 'react';
import { Outlet } from 'react-router-dom';
import { LocaleContextProvider } from '@/lib/locale-switch';
-import Header from './header';
import Toaster from './core/toast/toaster';
const Layout = () => {
return (
-
-
-
-
-
-
-
-
-
-
+
+
);
};
diff --git a/src/components/svg/a8m-logo.svg b/src/components/svg/a8m-logo.svg
new file mode 100644
index 0000000..e650871
--- /dev/null
+++ b/src/components/svg/a8m-logo.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index abbb5d0..bd9bb67 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -21,18 +21,15 @@ import autoCompletions from '@/lib/editor-auto-completion';
import { latexDelimiterConvertor } from '@coseeing/see-mark';
+import Header from '@/components/header';
+import { IconChevronDown } from '@tabler/icons-react';
import Button from '@/components/core/button';
-import { ToggleButtonGroup } from '@/components/core/button/toggle-button';
+import DropdownMenu from '@/components/core/dropdown-menu';
+import SegmentedControl from '@/components/core/button/segmented-control';
import EditIconsTab from '@/components/edit-icons-tab';
import SettingModal from '@/components/home/setting-modal';
import ConvertHintModal from '@/components/home/convert-hint-modal';
-import {
- useDisplayConfig,
- ExportType,
- LatexDelimiter,
- DocumentFormat,
- DocumentColor,
-} from '@/lib/display-config';
+import { useDisplayConfig, ExportType, LatexDelimiter, DocumentColor } from '@/lib/display-config';
import { importSource } from '@/lib/import-source';
import useSeeMarkParse from './useSeeMarkParse';
@@ -87,7 +84,37 @@ export default function Home() {
minHeight: '300px',
height: '100%',
},
- '.cm-scroller': { overflow: 'auto' },
+ '.cm-scroller': {
+ overflow: 'auto',
+ lineHeight: '1.5',
+ },
+ '.cm-gutters': {
+ backgroundColor: '#fff',
+ border: 'none',
+ borderRight: '1px solid #d1d1d1',
+ },
+ '.cm-lineNumbers .cm-gutterElement': {
+ width: '42px',
+ minWidth: '42px',
+ padding: '8px',
+ color: '#6d6d6d',
+ fontSize: '16px',
+ lineHeight: '1.5',
+ textAlign: 'center',
+ },
+ '.cm-lineNumbers .cm-gutterElement:first-of-type': {
+ padding: 0,
+ },
+ '.cm-foldGutter .cm-gutterElement': {
+ lineHeight: '2.5',
+ },
+ '.cm-content': {
+ color: '#454545',
+ padding: 0,
+ },
+ '.cm-line': {
+ padding: '8px',
+ },
});
codemirrorView.current = new EditorView({
state: EditorState.create({
@@ -269,8 +296,8 @@ export default function Home() {
);
const latexDelimiterOptions = [
- { value: LatexDelimiter.DOLLAR, label: t('latexDelimiter.dollar') },
- { value: LatexDelimiter.BRACKET, label: t('latexDelimiter.bracket') },
+ { id: LatexDelimiter.DOLLAR, label: t('latexDelimiter.dollar') },
+ { id: LatexDelimiter.BRACKET, label: t('latexDelimiter.bracket') },
];
function adjustSelection(view) {
@@ -288,67 +315,37 @@ export default function Home() {
}
return (
-
- {/* Top file setting panel */}
-
-
-
{t('latexDelimiter.name')}
-
- setDisplayConfig({ latexDelimiter: option })}
- />
-
-
-
-
-
-
-
- {/* Left side input panel */}
-
-
-
{t('editContent')}
-
-
-
+
{/* Right side output panel */}
-
-
-
{t('preview')}
-
-
- setDisplayConfig({ documentFormat: option })}
- />
-
-
- setDisplayConfig({ documentColor: option })}
- />
-
+
+
+
{t('preview')}
+
+
+
+ {displayConfig.documentColor === DocumentColor.DARK
+ ? t('documentColor.dark')
+ : t('documentColor.light')}
+
+
+
+ }
+ items={[
+ {
+ label: t('documentColor.light'),
+ onClick: () => setDisplayConfig({ documentColor: DocumentColor.LIGHT }),
+ },
+ {
+ label: t('documentColor.dark'),
+ onClick: () => setDisplayConfig({ documentColor: DocumentColor.DARK }),
+ },
+ ]}
+ itemsClassName="min-w-[118px]"
+ />
{content}
+
setShowSettingModal(false)}
@@ -434,7 +436,7 @@ export default function Home() {
LatexDelimiter={LatexDelimiter}
data={data}
/>
-
-
+
+
);
}