mProjectsCode / obsidian-meta-bind-plugin

A plugin for Obsidian to make your notes interactive with inline input fields, metadata displays, and buttons.
https://www.moritzjung.dev/obsidian-meta-bind-plugin-docs/
GNU General Public License v3.0
489 stars 40 forks source link

Auto Resizing of `textArea` and `editor` Input Fields. #266

Open GudBoiNero opened 6 months ago

GudBoiNero commented 6 months ago

Is your Feature Request Related to a Problem?

I am not exactly happy with the styling of the textArea or editor due to their scaling behaviors. They're less visually customizable than I would like, but the functionality is great.

Describe the Feature you'd Like

I wish that the textArea and editor input fields allowed for an option that would keep the height at the minimum height, so if there was no text it would look like an empty input box, then once you put a bunch of text in it would auto resize to fit the content.

I'm attempting to make a CSS snippet to do this right now, but it's really frustrating. Having this built-in would be amazing and I'm confident others would benefit from it.

Additional Context

No response

GudBoiNero commented 6 months ago

Using this little CSS snippet I made you can do auto resizing with ONLY the markdown rendered version. Unfortunately the actual editing mode is made with a textarea element and resizing those automatically requires JS.

INPUT[editor(class(mb-editor-scaling))]
body {
    --mb-editor-min-height: 5rem;
}

.mb-editor-scaling {
    > .editor-input {
        // Removes strange bottom and right padding.
        overflow: hidden !important;
        // Settings change this
        min-height: var(--mb-editor-min-height) !important;
    }

    // `textarea` is the editable element, only shown when being interacted with
    // `div` is the markdown rendered element, it automatically resizes with this snippet.
    > div:has(textarea + div) {
        div {
            position: relative !important;
        }
    }
}

/* @settings

name: Meta Bind Editor Scaling
id: mb-editor-scaling
settings:
- id: mb-editor-min-height
  title: Editor Min Height
  type: variable-text
  default: 5rem

*/
mProjectsCode commented 6 months ago

I might consider adding this as an argument in a future release.