From 791dd0731ebf0f157d2c6eefe63c790a697e4484 Mon Sep 17 00:00:00 2001 From: Wendy Yuchen Sun Date: Tue, 19 May 2026 12:57:02 +0800 Subject: [PATCH 1/4] feat: allow table to scroll horizontally --- src/index.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.css b/src/index.css index e0696e7..4342615 100644 --- a/src/index.css +++ b/src/index.css @@ -62,6 +62,13 @@ math { padding-left: 1.5em; } +.right-side-preview-area table { + display: block; + width: max-content; + max-width: 100%; + overflow-x: auto; +} + .right-side-preview-area table td, .right-side-preview-area table th { padding: 8px; From becb40b44c64f47eee81e5bf30ae42f4a659aeed Mon Sep 17 00:00:00 2001 From: Wendy Yuchen Sun Date: Tue, 19 May 2026 13:22:29 +0800 Subject: [PATCH 2/4] fix: better link focus --- src/components/parser-components/external-link/external-link.js | 2 +- src/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/parser-components/external-link/external-link.js b/src/components/parser-components/external-link/external-link.js index 831aea5..30ef07f 100644 --- a/src/components/parser-components/external-link/external-link.js +++ b/src/components/parser-components/external-link/external-link.js @@ -5,7 +5,7 @@ import { IconExternalLink } from '@tabler/icons-react'; import Tooltip from '@/components/core/tooltip'; const linkClassName = - 'inline-flex items-center gap-1 px-2 py-1 rounded text-primary underline hover:text-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'; + 'inline-flex items-center text-primary underline rounded-sm hover:text-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary'; const ExternalLink = ({ display = '', target = '', title = '', newTab = false }) => { const anchor = ( diff --git a/src/index.css b/src/index.css index 4342615..e862366 100644 --- a/src/index.css +++ b/src/index.css @@ -106,5 +106,5 @@ math { } .right-side-preview-area a:not([class]) { - @apply inline-flex items-center gap-1 px-2 py-1 rounded text-primary underline hover:text-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary; + @apply inline-flex items-center text-primary underline rounded-sm hover:text-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary; } From 3af68700658e9c436067be23b9d5c9b10f108891 Mon Sep 17 00:00:00 2001 From: Wendy Yuchen Sun Date: Tue, 19 May 2026 19:20:29 +0800 Subject: [PATCH 3/4] feat: add "open in new tab" to external link components --- public/locales/en/common.json | 3 +- public/locales/zh-TW/common.json | 3 +- .../external-link/external-link.js | 19 ++++++++- .../parser-components/image/image.js | 40 +++++++++++++------ 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 16cc30d..795351f 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -3,5 +3,6 @@ "locale": { "en": "English", "zh-TW": "Taiwanese Mandarin" - } + }, + "openInNewTab": "Open in new tab" } diff --git a/public/locales/zh-TW/common.json b/public/locales/zh-TW/common.json index fa32fd0..efb8760 100644 --- a/public/locales/zh-TW/common.json +++ b/public/locales/zh-TW/common.json @@ -3,5 +3,6 @@ "locale": { "en": "英文", "zh-TW": "中文" - } + }, + "openInNewTab": "開啟新分頁" } diff --git a/src/components/parser-components/external-link/external-link.js b/src/components/parser-components/external-link/external-link.js index 30ef07f..04236ac 100644 --- a/src/components/parser-components/external-link/external-link.js +++ b/src/components/parser-components/external-link/external-link.js @@ -1,23 +1,38 @@ -import React from 'react'; +import React, { useId } from 'react'; import PropTypes from 'prop-types'; import { IconExternalLink } from '@tabler/icons-react'; import Tooltip from '@/components/core/tooltip'; +import { useTranslation } from '@/lib/i18n'; const linkClassName = 'inline-flex items-center text-primary underline rounded-sm hover:text-blue-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary'; const ExternalLink = ({ display = '', target = '', title = '', newTab = false }) => { + const t = useTranslation('common'); + const newTabDescriptionId = useId(); + const anchor = ( {display} {newTab && ); + return title ? {anchor} : anchor; }; diff --git a/src/components/parser-components/image/image.js b/src/components/parser-components/image/image.js index ef896c4..835cae9 100644 --- a/src/components/parser-components/image/image.js +++ b/src/components/parser-components/image/image.js @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; +import React, { useId, useState } from 'react'; import PropTypes from 'prop-types'; import { IconExternalLink } from '@tabler/icons-react'; import Tooltip from '@/components/core/tooltip'; +import { useTranslation } from '@/lib/i18n'; const useImageBroken = (source) => { const [erroredSource, setErroredSource] = useState(null); @@ -22,19 +23,32 @@ Img.propTypes = { onError: PropTypes.func, }; -const LinkedImg = ({ source = '', alt = '', target = '', broken = false, onError }) => ( - - {alt} - {!broken && ( - + {alt} + {!broken && ( + + )} + - )} - -); + + ); +}; LinkedImg.propTypes = { source: PropTypes.string, From 5bc5f6e8e522e9c96571877d9838d334e1c1a7be Mon Sep 17 00:00:00 2001 From: Wendy Yuchen Sun Date: Tue, 19 May 2026 22:47:16 +0800 Subject: [PATCH 4/4] chore: temp remove alt tooltip, will add back in the future --- .../external-link/external-link.js | 7 +--- .../parser-components/image/image.js | 42 +++---------------- 2 files changed, 8 insertions(+), 41 deletions(-) diff --git a/src/components/parser-components/external-link/external-link.js b/src/components/parser-components/external-link/external-link.js index 04236ac..2c4c645 100644 --- a/src/components/parser-components/external-link/external-link.js +++ b/src/components/parser-components/external-link/external-link.js @@ -2,7 +2,6 @@ import React, { useId } from 'react'; import PropTypes from 'prop-types'; import { IconExternalLink } from '@tabler/icons-react'; -import Tooltip from '@/components/core/tooltip'; import { useTranslation } from '@/lib/i18n'; const linkClassName = @@ -12,7 +11,7 @@ const ExternalLink = ({ display = '', target = '', title = '', newTab = false }) const t = useTranslation('common'); const newTabDescriptionId = useId(); - const anchor = ( + return ( {display} @@ -32,8 +31,6 @@ const ExternalLink = ({ display = '', target = '', title = '', newTab = false }) )} ); - - return title ? {anchor} : anchor; }; ExternalLink.propTypes = { diff --git a/src/components/parser-components/image/image.js b/src/components/parser-components/image/image.js index 835cae9..57d7d84 100644 --- a/src/components/parser-components/image/image.js +++ b/src/components/parser-components/image/image.js @@ -2,7 +2,6 @@ import React, { useId, useState } from 'react'; import PropTypes from 'prop-types'; import { IconExternalLink } from '@tabler/icons-react'; -import Tooltip from '@/components/core/tooltip'; import { useTranslation } from '@/lib/i18n'; const useImageBroken = (source) => { @@ -58,23 +57,6 @@ LinkedImg.propTypes = { onError: PropTypes.func, }; -const AltTooltip = ({ alt = '', disabled = false, children }) => { - if (!alt || disabled) return children; - return ( - - - {children} - - - ); -}; - -AltTooltip.propTypes = { - alt: PropTypes.string, - disabled: PropTypes.bool, - children: PropTypes.node.isRequired, -}; - const Caption = ({ display = '', children }) => (
{children} @@ -88,12 +70,8 @@ Caption.propTypes = { }; const Image = ({ alt = '', source = '' }) => { - const { broken, onError } = useImageBroken(source); - return ( - - {alt} - - ); + const { onError } = useImageBroken(source); + return {alt}; }; Image.propTypes = { @@ -103,11 +81,7 @@ Image.propTypes = { export const ImageLink = ({ alt = '', source = '', target = '' }) => { const { broken, onError } = useImageBroken(source); - return ( - - - - ); + return ; }; ImageLink.propTypes = { @@ -117,12 +91,10 @@ ImageLink.propTypes = { }; export const ImageDisplay = ({ alt = '', display = '', source = '' }) => { - const { broken, onError } = useImageBroken(source); + const { onError } = useImageBroken(source); return ( - - {alt} - + {alt} ); }; @@ -137,9 +109,7 @@ export const ImageDisplayLink = ({ alt = '', display = '', source = '', target = const { broken, onError } = useImageBroken(source); return ( - - - + ); };