From 7879e9c2bc0f4580d0e50df7cd87ccedd87b69d0 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Wed, 12 Aug 2026 22:24:53 +0800 Subject: [PATCH 1/3] fix: resolve [object Object] in ChangeHistory aria-label and dropdown scrollbar --- .../change-history-label-and-scrollbar.md | 12 ++++++++++ packages/react/src/html/ui/index.css | 6 +++++ .../react/src/jsx-ast/utils/buildContent.mjs | 23 ++++++++++++++++--- 3 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 .changeset/change-history-label-and-scrollbar.md diff --git a/.changeset/change-history-label-and-scrollbar.md b/.changeset/change-history-label-and-scrollbar.md new file mode 100644 index 00000000..42e84814 --- /dev/null +++ b/.changeset/change-history-label-and-scrollbar.md @@ -0,0 +1,12 @@ +--- +'@doc-kit/generator-react': patch +--- + +Fix `[object Object]` in ChangeHistory aria-label and dropdown horizontal scrollbar + +- Change history labels were passing a JSX AST object instead of a plain text + string to the `ChangeHistory` component, causing `aria-label` to render as + `[object Object]`. Labels are now extracted as plain text via `remark-parse`. +- The ChangeHistory dropdown could show a horizontal scrollbar when label text + overflowed the fixed-width container. Added `overflow-wrap` and `word-break` + rules to prevent this. diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css index 3af0f65c..04a422f5 100644 --- a/packages/react/src/html/ui/index.css +++ b/packages/react/src/html/ui/index.css @@ -121,6 +121,12 @@ main { div[role='menu'] { left: 0; } + + /* Prevent long labels from overflowing dropdown width */ + div[role='menu'] > a[role='menuitem'] > div { + overflow-wrap: anywhere; + word-break: break-word; + } } } diff --git a/packages/react/src/jsx-ast/utils/buildContent.mjs b/packages/react/src/jsx-ast/utils/buildContent.mjs index bc92b7be..1172b30b 100644 --- a/packages/react/src/jsx-ast/utils/buildContent.mjs +++ b/packages/react/src/jsx-ast/utils/buildContent.mjs @@ -11,6 +11,8 @@ import { UNIST } from '@doc-kit/core/utils/queries/index.mjs'; import { h as createElement } from 'hastscript'; import { slice } from 'mdast-util-slice-markdown'; import readingTime from 'reading-time'; +import remarkParse from 'remark-parse'; +import { unified } from 'unified'; import { u as createTree } from 'unist-builder'; import { SKIP, visit } from 'unist-util-visit'; @@ -35,6 +37,22 @@ import { getFullName, } from './signature.mjs'; +/** + * Converts a markdown string to plain text by parsing it and extracting + * text and inline code values. + * + * @param {string} markdown - The markdown string to convert. + * @returns {string} The plain text representation. + */ +const toPlainText = markdown => { + const tree = unified().use(remarkParse).parse(markdown); + let text = ''; + visit(tree, ['text', 'inlineCode'], node => { + text += node.value || ''; + }); + return text.trim(); +}; + /** * Processes lifecycle and change history data into a sorted array of change entries. * @param {import('@doc-kit/core/generators/metadata/types').MetadataEntry} entry - The metadata entry @@ -48,11 +66,10 @@ export const gatherChangeEntries = entry => { label: `${label}: ${enforceArray(entry[field]).join(', ')}`, })); - // Explicit changes with parsed JSX labels + // Explicit changes with plain-text labels extracted from markdown const explicitChanges = (entry.changes || []).map(change => ({ versions: enforceArray(change.version), - label: remark().runSync(remark().parse(change.description)).body[0] - .expression, + label: toPlainText(change.description), url: change['pr-url'], })); From 2668c24111f9cac87858ae8f3c999614c9732b70 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Thu, 13 Aug 2026 08:09:25 +0800 Subject: [PATCH 2/3] fix: update --- packages/react/src/html/ui/index.css | 10 +++++----- packages/react/src/jsx-ast/utils/buildContent.mjs | 13 +++++-------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css index 04a422f5..b969586e 100644 --- a/packages/react/src/html/ui/index.css +++ b/packages/react/src/html/ui/index.css @@ -120,12 +120,12 @@ main { div[role='menu'] { left: 0; - } - /* Prevent long labels from overflowing dropdown width */ - div[role='menu'] > a[role='menuitem'] > div { - overflow-wrap: anywhere; - word-break: break-word; + /* Prevent long labels from overflowing dropdown width */ + a[role='menuitem'] div{ + overflow-wrap: anywhere; + word-break: break-word; + } } } } diff --git a/packages/react/src/jsx-ast/utils/buildContent.mjs b/packages/react/src/jsx-ast/utils/buildContent.mjs index 1172b30b..7b9a7dda 100644 --- a/packages/react/src/jsx-ast/utils/buildContent.mjs +++ b/packages/react/src/jsx-ast/utils/buildContent.mjs @@ -8,6 +8,7 @@ import { } from '@doc-kit/core/utils/configuration/templates.mjs'; import { omitKeys } from '@doc-kit/core/utils/misc.mjs'; import { UNIST } from '@doc-kit/core/utils/queries/index.mjs'; +import { transformNodesToString } from '@doc-kit/core/utils/unist.mjs'; import { h as createElement } from 'hastscript'; import { slice } from 'mdast-util-slice-markdown'; import readingTime from 'reading-time'; @@ -44,14 +45,10 @@ import { * @param {string} markdown - The markdown string to convert. * @returns {string} The plain text representation. */ -const toPlainText = markdown => { - const tree = unified().use(remarkParse).parse(markdown); - let text = ''; - visit(tree, ['text', 'inlineCode'], node => { - text += node.value || ''; - }); - return text.trim(); -}; +const toPlainText = markdown => + transformNodesToString( + unified().use(remarkParse).parse(markdown).children + ).trim(); /** * Processes lifecycle and change history data into a sorted array of change entries. From 40b04786decb588f48b5b36233f2806b15d09e3b Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Thu, 13 Aug 2026 08:10:38 +0800 Subject: [PATCH 3/3] chore: format --- packages/react/src/html/ui/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css index b969586e..54f1445a 100644 --- a/packages/react/src/html/ui/index.css +++ b/packages/react/src/html/ui/index.css @@ -122,7 +122,7 @@ main { left: 0; /* Prevent long labels from overflowing dropdown width */ - a[role='menuitem'] div{ + a[role='menuitem'] div { overflow-wrap: anywhere; word-break: break-word; }