← Corpus / lost-in-public / other
Refactor a really long Obsidian Modal file.
Creating modular maintainable code for Obsidian Plugin Modals
- Path
- refactors/Refactor-Obsidian-Modals.md
- Tags
- Obsidian-Plugin
Because the [[Tooling/Productivity/Advanced Documents/Obsidian|Obsidian]] API and developer docs have their own peculiarity, I thought I would document how to refactor a really long modal into importable sections:
src/modals/
├── CurrentFileModal.ts # Main modal orchestrator
├── sections/ # Individual section components
│ ├── UuidSection.ts # UUID operations
│ ├── PublishStateSection.ts # Publish state toggle
│ ├── HeaderInfoSection.ts # Header info table
│ ├── FileOperationsSection.ts # File operations
│ ├── TextProcessingSection.ts # Text processing
│ └── SelectionSection.ts # Selection operations
└── components/ # Reusable UI components
├── ButtonGroup.ts # Reusable button groups
└── PropertyTable.ts # Reusable table components
In CurrentFileModal.ts
async onOpen() {
const { contentEl } = this;
contentEl.empty();
contentEl.createEl('h2', { text: 'Current File Operations' });
// UUID Operations (at the top)
await this.createUuidSection(contentEl);
// Publish State Operations
this.createPublishStateSection(contentEl);
// Header Info Operations
const headerInfoSection = new HeaderInfoSection(this.app, this.editor);
await headerInfoSection.render(contentEl);
// Current File Service Operations
this.createFileOperationsSection(contentEl);
// Text Processing Operations
this.createTextProcessingSection(contentEl);
// Selection Operations
this.createSelectionOperationsSection(contentEl);
}