obsidian-db-folder icon indicating copy to clipboard operation
obsidian-db-folder copied to clipboard

Larger input boxes for entering data

Open dcoales opened this issue 2 years ago • 10 comments

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.

dcoales avatar Jul 14 '22 12:07 dcoales

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

RafaelGB avatar Jul 14 '22 12:07 RafaelGB

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, '');

n-a-m-e avatar Sep 28 '22 04:09 n-a-m-e

you can enable wrap lines on every text column config since the last update

RafaelGB avatar Sep 28 '22 05:09 RafaelGB

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

RafaelGB avatar Sep 28 '22 05:09 RafaelGB

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

n-a-m-e avatar Sep 30 '22 01:09 n-a-m-e

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

RafaelGB avatar Sep 30 '22 05:09 RafaelGB

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.

n-a-m-e avatar Oct 04 '22 03:10 n-a-m-e

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>

RafaelGB avatar Oct 04 '22 05:10 RafaelGB

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.

n-a-m-e avatar Oct 04 '22 07:10 n-a-m-e

I will consider your example. Thanks!

Also I talked about modals to improve the support of mobile devices in terms of edition

RafaelGB avatar Oct 04 '22 08:10 RafaelGB

https://user-images.githubusercontent.com/11924043/208250880-21dcdb9d-989c-4a94-98bf-712da9e054a9.mov

RafaelGB avatar Dec 17 '22 16:12 RafaelGB

Commit ac96fb33

RafaelGB avatar Dec 17 '22 16:12 RafaelGB