https://github.com/3c0d/obsidian-editor-full-screen
Full screen mode with configurable hidden elements via modal - including sidebars. Hidden elements appear on hover.
https://github.com/3c0d/obsidian-editor-full-screen
focus fullscreen obsidian obsidian-plugin productivity typescript zen-mode
Last synced: 4 months ago
JSON representation
Full screen mode with configurable hidden elements via modal - including sidebars. Hidden elements appear on hover.
- Host: GitHub
- URL: https://github.com/3c0d/obsidian-editor-full-screen
- Owner: 3C0D
- Created: 2024-10-11T14:39:35.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-24T18:06:03.000Z (4 months ago)
- Last Synced: 2026-03-25T18:53:38.755Z (4 months ago)
- Topics: focus, fullscreen, obsidian, obsidian-plugin, productivity, typescript, zen-mode
- Language: TypeScript
- Homepage:
- Size: 5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Editor Full Screen
Full screen mode with configurable hidden elements via modal - including sidebars. Hidden elements appear on hover.
### Features
- **Single full screen mode** with individually configurable hidden elements
- **Hover-to-reveal**: move cursor to viewport edges to temporarily show hidden elements
- **Left sidebar**: collapses on activation, reveals on ribbon hover, hides on editor return
- **Right sidebar**: reveals with **Shift + hover** near right editor edge, hides on editor return
- **Persistent state**: remembers whether full screen was active before a restart (optional)
### Hidden elements (configurable)
| Element | Hover zone |
| --- | --- |
| Title bar + tab strip | Top edge |
| View header (file title inside editor) | Top area |
| Ribbon | Left edge |
| Status bar | Bottom edge |
| Left sidebar | Revealed with ribbon on left hover |
| Right sidebar | Shift + right editor edge |
### Settings
Access via the plugin settings tab or the **quick modal** ("Configure hidden elements" in command palette or editor context menu):
- **Persistent full screen**: restore full screen mode on restart if it was active when Obsidian closed
- Per-element toggles (changes apply immediately if mode is active)
N.B: Enabling **hide left sidebar** also enables **hide ribbon**
### Usage
All actions are accessible via the command palette or right-click. Hotkeys can be assigned in Obsidian settings.
---
## Development
This plugin uses a template that automates the development and publication processes on GitHub, including releases. You can develop either inside or outside your Obsidian vault.
### Environment Setup
#### File Structure
```
src/
types.ts — enums, interfaces
constants.ts — element configs, default settings
elementManager.ts — DOM show/hide logic
hoverDetector.ts — mouse movement + edge detection
modal.ts — quick-settings modal
menuManager.ts — context menus (editor + reading mode)
settings.ts — PluginSettingTab
main.ts
styles.css
```
> **Note:** If `styles.css` is accidentally placed in the root folder instead of `src`, it will be automatically moved to the correct location when running any development command. After building, a copy of `styles.css` will appear in the root folder as part of the normal release process.
#### Shared Reading Mode Context Menu
This plugin shares its reading mode context menu with **Obsidian Smart Print** using a cooperative pattern:
1. Both plugins listen to the native `contextmenu` event on `document`
2. The first plugin to respond creates a shared menu stored at `window._sharedReadingMenu`
3. It then defers menu display using `setTimeout(0)` — this allows all other `contextmenu` listeners to run first and add their own items
4. Subsequent plugins detect the existing menu and append their items
5. After the event loop completes, the menu is displayed with all items combined
This approach avoids conflicts and ensures a unified context menu experience for users.
#### Development Options
1. **Inside the vault's plugins folder:**
- Delete the `.env` file
- Run npm commands as usual
2. **Outside the vault:**
- Set the paths in the `.env` file:
- `TestVault` for development
- `RealVault` for production simulation
- Necessary files will be automatically copied to the targeted vault
### Available Commands
- `npm run start`: Opens VS Code, runs `npm install`, then `npm run dev`
- `npm run dev`: For development
- `npm run build`: Builds the project
- `npm run real`: Simulates a traditional plugin installation in your REAL vault
- `npm run bacp`: Builds, adds, commits, and pushes (prompts for commit message)
- `npm run acp`: Adds, commits, and pushes (without building)
- `npm run version`: Updates version, modifies relevant files, then adds, commits, and pushes
- `npm run release`: Creates a GitHub release (prompts for release title, can be multiline using `\n`)
### Recommended Workflow
1. `npm run start`
2. `npm run bacp`
3. `npm run version`
4. `npm run release`
### Additional Features
- **obsidian-typings**: This template automatically includes obsidian-typings, providing access to additional types not present in the official API.