Overview
The MarkdownView class represents the main view for working with Markdown files in Obsidian. It extends TextFileView and implements MarkdownFileInfo, providing access to both the editor interface and preview mode.
Properties
editor
The editor instance for this view.
The Editor interface for manipulating the document
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const editor = view.editor;
console.log(editor.getValue());
}
previewMode
The preview mode renderer for this view.
The preview mode instance
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const previewMode = view.previewMode;
// Access preview-specific functionality
}
currentMode
The currently active mode (either editor or preview).
The current active sub-view
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const content = view.currentMode.get();
}
hoverPopover
The hover popover associated with this view, if any.
The hover popover or null
Methods
constructor()
Creates a new MarkdownView instance.
The workspace leaf this view belongs to
// Typically created by Obsidian, not manually
const view = new MarkdownView(leaf);
getViewType()
Gets the type identifier for this view.
The view type identifier (typically ‘markdown’)
const viewType = view.getViewType();
console.log(viewType); // 'markdown'
getMode()
Gets the current mode of the view.
Either ‘source’ or ‘preview’
const mode = view.getMode();
if (mode === 'source') {
console.log('Currently in editing mode');
} else {
console.log('Currently in preview mode');
}
getViewData()
Gets the content of the view.
The current content of the document
const content = view.getViewData();
console.log('Current content:', content);
clear()
Clears the content of the view.
setViewData()
Sets the content of the view.
Whether to clear the undo history
view.setViewData('# New Content\n\nThis is new text.', false);
showSearch()
Shows the search interface.
Whether to show the replace functionality (optional)
// Show search only
view.showSearch();
// Show search and replace
view.showSearch(true);
MarkdownViewModeType
Represents the mode of a MarkdownView.
type MarkdownViewModeType = 'source' | 'preview';
MarkdownSubView
Interface implemented by both editor and preview modes.
interface MarkdownSubView {
getScroll(): number;
applyScroll(scroll: number): void;
get(): string;
set(data: string, clear: boolean): void;
}
Examples
Getting the Active Markdown View
const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
if (activeView) {
console.log('Active file:', activeView.file.path);
console.log('Current mode:', activeView.getMode());
}
Checking if in Edit Mode
this.addCommand({
id: 'example-edit-mode-command',
name: 'Example: Edit mode only',
checkCallback: (checking: boolean) => {
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view && view.getMode() === 'source') {
if (!checking) {
// Perform action in edit mode
const editor = view.editor;
editor.replaceSelection('Text inserted in edit mode');
}
return true;
}
return false;
}
});
Switching Between Modes
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const currentMode = view.getMode();
// Note: Mode switching is typically done through the workspace API
// Direct mode switching methods are internal
console.log('Current mode:', currentMode);
}
Working with the Editor in a MarkdownView
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
const editor = view.editor;
const cursor = editor.getCursor();
// Insert text at cursor
editor.replaceRange(
'[[Link to another note]]',
cursor
);
}
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view && view.file) {
console.log('File path:', view.file.path);
console.log('File name:', view.file.name);
console.log('File basename:', view.file.basename);
console.log('File extension:', view.file.extension);
}
Using with Editor Callbacks
this.addCommand({
id: 'insert-template',
name: 'Insert Template',
editorCallback: (editor: Editor, view: MarkdownView) => {
// Both editor and view are available
const cursor = editor.getCursor();
const file = view.file;
const template = `
## Section Created on ${new Date().toLocaleDateString()}
In file: ${file?.basename}
`.trim();
editor.replaceRange(template, cursor);
}
});
Opening Search/Replace
this.addCommand({
id: 'open-search-replace',
name: 'Open Search and Replace',
callback: () => {
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
view.showSearch(true);
}
}
});
Reading and Modifying View Content
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view) {
// Get current content
const content = view.getViewData();
// Modify content
const modifiedContent = content.replace(/TODO/g, 'DONE');
// Set new content (false = keep undo history)
view.setViewData(modifiedContent, false);
}
Working with Preview Mode
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
if (view && view.getMode() === 'preview') {
const previewMode = view.previewMode;
// Get the rendered container
const containerEl = previewMode.containerEl;
// Work with the preview DOM
const headings = containerEl.querySelectorAll('h1, h2, h3');
console.log(`Found ${headings.length} headings`);
}
