obsidian-db-folder
obsidian-db-folder copied to clipboard
Larger input boxes for entering data
When I want to enter text into a field it would be nice if there could be a button next to the current input field that would pop out a much bigger field in which to write longer form text. Currently I have to scroll backwards and forwards through a small input field to edit long sentences and it's quite tricky.
Hi @dcoales . I like the idea! Could be a modal as column settings its right now.
The effort to achieve this I assume is big. So will be added to long term roadmap
A simple solution to this would be to use a textarea element instead of a input element in the table since text will wrap onto new lines.
This would also enable people to do lists like:
- point A
- point B
As an extra option to avoid people accidentally breaking the frontmatter you could add a toggle on whether to allow newlines and if not then simply run the following when saving the value.
value = value.replace(/[\n\r]/g, '');
you can enable wrap lines on every text column config since the last update
about the yaml breakers we already control them with quotes. In some cases (as wikilinks) we need to persist them too.
The idea of this issue could be open an editor modal
The wrap content config does not apply to when you are inputting a new value, the <input>
element does not allow any text to be wrapped onto a new line.
To my knowledge the only way you can get user input and have that input wrap onto a new line while it is being entered is to use either of the following:
<textarea>This text can be edited by the user.</textarea>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
or
<div contenteditable="true">This text can be edited by the user.</div>
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
the choice of input is because the frontmatter metadata does not allow multiple lines. The only way to achieve this is through HTML with the <\br> tag but I find that to be intrusive for the average user.
An UX option could be the use of a shortcut like shift +enter to add that tag
What I would suggest is the following: https://jsfiddle.net/L0tb3jmo/
Add a eventlistener to the textarea which removes any newlines. This way the frontmatter metadata is always correct and it is easier to edit the fields.
I would like to keep the listener to the enter button as saved action. It would be necessary to create the interaction of shift+enter and replace \n with <\br>
With the following: https://jsfiddle.net/zj9g32fe/
Whenever someone presses enter nothing happens so that you can call the save action function. And when someone presses the shift and enter keys it inserts a <br>
. It also replaces any newlines which may have been pasted in when the value of the field changes.
I will consider your example. Thanks!
Also I talked about modals to improve the support of mobile devices in terms of edition
https://user-images.githubusercontent.com/11924043/208250880-21dcdb9d-989c-4a94-98bf-712da9e054a9.mov
Commit ac96fb33