xiaoxue_admin
/
orca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(editor): render front-matter banner inside rich editor shell (#943) 

Pass FrontMatterBanner as headerSlot into RichMarkdownEditor so it renders
between the toolbar and the editor surface, keeping formatting controls at
the top of the pane.
This commit is contained in:
Jinjing 2026-04-22 11:05:48 -07:00 committed by GitHub
parent 0bbf2d7a8f
commit 245b29d604
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/components/editor/EditorContent.tsx
View File

@ -169,7 +169,6 @@ export function EditorContent({
return (
<div className="flex h-full min-h-0 flex-col">
{fm && <FrontMatterBanner raw={fm.raw} />}
<div className="min-h-0 flex-1">
{/* Why: same remount reasoning as MonacoEditor — see renderMonacoEditor.
The boundary contains a TipTap/ProseMirror render crash (e.g.
@ -186,6 +185,11 @@ export function EditorContent({
onContentChange={onContentChangeWithFm}
onDirtyStateHint={handleDirtyStateHint}
onSave={onSaveWithFm}
// Why: render the front-matter banner below the editor toolbar
// (inside the editor shell) so formatting controls remain at
// the top of the pane — the banner is read-only context, not
// a header above the toolbar.
headerSlot={fm ? <FrontMatterBanner raw={fm.raw} /> : null}
/>
</RichMarkdownErrorBoundary>
</div>

8
src/renderer/src/components/editor/RichMarkdownEditor.tsx
View File

@ -41,6 +41,10 @@ type RichMarkdownEditorProps = {
onContentChange: (content: string) => void
onDirtyStateHint: (dirty: boolean) => void
onSave: (content: string) => void
// Why: front-matter is stripped from the rich editor's content but we still
// want it visible to the user. It renders between the toolbar and the editor
// surface so the formatting toolbar stays at the top of the pane.
headerSlot?: React.ReactNode
}
const richMarkdownExtensions = createRichMarkdownExtensions({
@ -55,7 +59,8 @@ export default function RichMarkdownEditor({
scrollCacheKey,
onContentChange,
onDirtyStateHint,
onSave
onSave,
headerSlot
}: RichMarkdownEditorProps): React.JSX.Element {
const rootRef = useRef<HTMLDivElement | null>(null)
const editorFontZoomLevel = useAppStore((s) => s.editorFontZoomLevel)
@ -495,6 +500,7 @@ export default function RichMarkdownEditor({
onToggleLink={toggleLinkFromToolbar}
onImagePick={handleLocalImagePick}
/>
{headerSlot}
<RichMarkdownSearchBar
activeMatchIndex={activeMatchIndex}
isOpen={isSearchOpen}