fix: hide title section for untitled drafts

This commit is contained in:
Test
2026-04-07 17:47:15 +02:00
parent 74850b5b69
commit 7d308a65e0
3 changed files with 39 additions and 7 deletions

View File

@@ -361,13 +361,13 @@
margin-top: 2px;
}
/* When TitleField is shown (no H1 in body), hide the first H1 heading in
BlockNote to avoid duplicate title display. When hasH1 is set, the
TitleField is hidden and the H1 in the editor serves as the title. */
.title-section:not([data-has-h1]) ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
/* When the legacy title UI is shown, hide the first H1 heading in BlockNote
to avoid duplicate title display. Otherwise the editor's H1 remains visible
and serves as the title surface. */
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
display: none;
}
.title-section:not([data-has-h1]) ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) {
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) {
display: none;
}

View File

@@ -182,6 +182,33 @@ describe('Editor', () => {
expect(screen.getByTestId('blocknote-view')).toBeInTheDocument()
})
it('hides the legacy title field for untitled draft notes', () => {
const draftEntry: VaultEntry = {
...mockEntry,
path: '/vault/untitled-note-1700000000.md',
filename: 'untitled-note-1700000000.md',
title: 'Untitled Note 1700000000',
hasH1: false,
}
const draftTab = {
entry: draftEntry,
content: '---\ntype: Note\nstatus: Active\n---\n',
}
render(
<Editor
{...defaultProps}
tabs={[draftTab]}
activeTabPath={draftEntry.path}
entries={[draftEntry]}
getNoteStatus={() => 'unsaved'}
/>
)
expect(screen.queryByTestId('title-field-input')).not.toBeInTheDocument()
expect(screen.getByTestId('blocknote-view')).toBeInTheDocument()
})
it('renders diff toggle button when file is modified', () => {
render(
<Editor

View File

@@ -157,6 +157,7 @@ export function EditorContent({
activeTab, isLoadingNewTab, entries, editor,
diffMode, diffContent, onToggleDiff,
rawMode, onToggleRaw, onRawContentChange, onSave,
activeStatus,
onNavigateWikilink, onEditorChange, vaultPath,
rawLatestContentRef, onTitleChange,
onSetNoteIcon, onRemoveNoteIcon,
@@ -173,6 +174,10 @@ export function EditorContent({
const showEditor = !diffMode && !effectiveRawMode
const entryIcon = activeTab?.entry.icon ?? null
const emojiIcon = entryIcon && isEmoji(entryIcon) ? entryIcon : null
const isUntitledDraft = !!activeTab
&& activeTab.entry.filename.startsWith('untitled-')
&& (activeStatus === 'new' || activeStatus === 'unsaved' || activeStatus === 'pendingSave')
const showTitleSection = !hasH1 && !isUntitledDraft
const titleSectionRef = useRef<HTMLDivElement | null>(null)
const breadcrumbBarRef = useRef<HTMLDivElement | null>(null)
@@ -233,8 +238,8 @@ export function EditorContent({
{showEditor && (
<div className="editor-scroll-area" style={cssVars as React.CSSProperties}>
<div className="editor-content-wrapper">
<div ref={titleSectionRef} className="title-section" data-has-h1={hasH1 || undefined}>
{!hasH1 && (
<div ref={titleSectionRef} className="title-section" data-title-ui-visible={showTitleSection || undefined}>
{showTitleSection && (
<>
{!emojiIcon && (
<div className="title-section__add-icon">