Dynamic Editor Width

Dynamically adjust your editor's text width via a status bar input or per-note YAML settings for a personalized writing space. This extension was inspired by the Editor Width Slider extension, but I have added additional features and changed how it renders the page so there is no more delay when switching between notes.

Demo

Features

• Adjust editor width through a status bar control (choose between slider or input box)
• Set default width for all notes
• Override width per note using YAML frontmatter
• Real-time width updates
• Values from 0-100 (corresponds to adding 0-1000px to the base width)

Installation

1. Open Obsidian Settings
2. Navigate to Community Plugins and disable Safe Mode
3. Click Browse and search for "Dynamic Editor Width"
4. Install the plugin
5. Enable the plugin in your Community Plugins list

Usage

Global Width Control

The plugin adds a control to your status bar (can be toggled in settings):

• Use the slider or input box to adjust width
• Values range from 0-100
• Changes apply immediately

Per-Note Width Settings

To set a specific width for individual notes, add this to your note's YAML frontmatter:

---
editor-width: 30
---

Settings

In the plugin settings, you can:

• Set the default editor width
• Toggle the status bar control visibility
• Choose between slider or input box control style

Examples

Default Note

Here is what a note would look like without any changes to the width

Custom Width Note

And this is what a note would look like, changing the value to 30

Support

If you encounter any issues or have suggestions:

• Create an issue on GitHub
• Support the development:
  • Buy Me a Coffee
  • GitHub Sponsor

Development

Want to contribute or modify the plugin? Here's how to get started with the source code:

1. Create a directory for your GitHub projects:

   cd path/to/somewhere
   mkdir Github
   cd Github

2. Clone the repository:

   git clone https://github.com/bwya77/dynamic-editor-width.git

3. Navigate to the plugin directory:

   cd dynamic-editor-width

4. Install dependencies:

   npm install

5. Start development build mode:

   npm run dev

   This command will keep running in the terminal and automatically rebuild the plugin whenever you make changes to the source code.

6. You'll see a main.js file appear in the plugin directory - this is the compiled version of your plugin.

Testing Your Changes

To test your modifications:

1. Create a symbolic link or copy your plugin folder to your vault's .obsidian/plugins/ directory
2. Enable the plugin in Obsidian's community plugins settings
3. Use the developer console (Ctrl+Shift+I) to check for errors and debug

Making Contributions

1. Fork the repository
2. Create a new branch for your feature
3. Make your changes
4. Submit a pull request with a clear description of your changes

License

MIT