fix: hide title section for untitled drafts
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user