"Inline" Editing a Text & BBcode formatting in Input Field

Need help
1

Hello there!

I have a task that is shown in a text element. I want the user being able to edit the task by clicking on the text (inline editing).

So how ist this possible? I had the idea of using an input field without background and border as the text element, but this doesn’t seem to be the best solution.

Thanks.
dev2

2

Actually, the solution you mention is probably what I would have done in this case. What’s keeping you from doing it that way?

You could also use a text element that is replaced by an input element when the user clicks on it, but to me it sounds unnecessarily complicated.

3

@petter

My problem is that BBcode is not working in the placeholder field:
image

Doesn’t matter if I choose initial content or placeholder.

Any idea?

Thanks!

4

Hmm, ok, I see. Inline editing of BBcode formatted is a little more tricky. Bubble’s rich text editor will do the trick, but youre stuck with the toolbar. Text Editor (bdk) by @gaurav might be a solution, as you can hide the toolbar, but it doesn’t support BBCode yet. Gaurav is looking into it, but I don’t know the current status of it.

5

@petter

The text doesn’t have to be editable when it is checked and strike through. The user can’t format the text by himself (hardcoded BBcode). I just want to do a conditional formatting of the input field content with BBcode.

A solution may be replacing the input field with a strike through text field if the task is checked. Is this even possible?

I also have an super simple solution using an input field and a text field:

  • Input field is visible and editable, if the task is checked it will be hidden and the text that is strike through will be shown

But I am not quite sure how great this performs performance wise.

Any hints?
Thanks!

6

I doubt that solution will hurt your performance much, sounds like a pretty standard Condition. I wouldn’t hesitate going for that solution.

7

Thanks for your reply!

This works like charm! Some fonts do have a different letter height when they are strike through, so this didn’t look great with my font (Roboto Regular). I changed the font family and now it is pixel perfect! :slightly_smiling_face:

8

Glad to hear it :wink:

I’m surprised the letter height changed - Roboto is a professional font, and shouldn’t behave like that.

9

This topic was automatically closed after 70 days. New replies are no longer allowed.