🚀[NEW PLUGIN] Advanced WYSIWYG text editor

Showcase
21

I’m about to acquire the plugin and the line break problem for me is very serious.

I hope you get a reply as soon as possible.

And congratulations on the plugin, it will solve our problems regarding reports.

22

.
The problem is resolved.

Now in the “editor Text Content” state the text is written with the normal display of line breaks.
It’s also possible now:

  • choose to leave the line break or replace the line break with a space.
  • replace a continuous series of several line breaks with one line break (to save space, for example)

Get “editor Text Content” via “Save” action
Image 17
.
.

Or get “editor Text Content” via “Get Text” action
Image 18

Version 1.0.2

23

Thanks for the quick fix/update :slight_smile:

The hover state is actually pretty neat for minimal styling with the bubble mode in places like comment sections of websites… Not mandatory but often “nice to have”.

24

Thanks very much

25

Version 1.0.3

Added edit area border settings.
You can now set the border-width, border-radius, border-color, and separately the border color on hover and when the edit area gains focus.

Image 20

.

You can see a small example on the demo page.,
.
border

1 Like
26

You rock!

27

Question : When loading “initial content” from an API (aka from “Parent group’s X api received data”, the editor doesn’t load the actual data (although it shows up in the debugger under “initial content”. If i use the same editor and just change the initial content to a “do a search for” in bubble’s db, it works fine. Any idea what could be wrong?

28

Hello!

“initial content” is used only once during initial loading (initialization) of the editor.
It is possible that at the time of initializing the editor, the data from the API does not have time to load yet. That is why the editor remains empty after loading.

I don’t know how you have everything connected and configured, but I think that in this case you just need to use the “Set Contents” action or set some static value in the “Initial Content” field and then use the “Append Contents” action.
Those. after loading the page or after receiving data from the API, launch the “Set Contents” or “Append Content” action and pass the necessary data to the editor.

1 Like
29

Ok, i may sound dumb but here’s my thing :
When the page loads, i get data from an API call. The editor element can be in multiple places on the same page (in repeating groups and others). I just don’t see the reason why we have to setup a workflow action to set the data in each editor instance? To be honest, I didn’t get it to work in a repeating group and in some cases (like mine) it defeats the purpose of the API call (an action will proxy the api call through bubble instead of sending the data directly to the user’s device).

Would it be possible to add a listener for data in parent group? “When parent group’s data is not empty” : “set content” (in the UI instead of an action?)

Thanks again :slight_smile:

30

Hello!
I just tested the editor in a repeating group using the API.

For example, I placed the editor in a repeating group and passed data from the API to the repeating group.
Here’s a demo:

You can go to the editor for connection details (OPEN EDITOR)

I didn’t do any tricky tricks. I set up a repeating group, connected the API, installed the editor in the repeating group cell, connected the data in the “Initial Content” of the editor using “Current Cell’s”
And everything works fine.

Please give a little more information. How did you connect the editor and the repeating group?

1 Like
31

I’ve been looking for a text editor that can support either LaTeX or KaTeX for so long!

32

If I want to print the 10 items of the editor, in this case, how would this look?

33

Yes, this feature was also very useful to us in one of our projects.

34

Sorry, I didn’t understand the question. Could you clarify what you mean.

35

I was wondering if you had update plans for this plugin? It’s close to perfect, there’s just a few things that make it a pain to use in an environment where data comes from/is saved to an external api.

  • Having to have workflows for “when parent’s data is not empty” → set content vs simply being able use initial content is “parent’s data…” like other editors.
  • Same goes for when user is typing. Having to have a workflow for every editor “When content changed” → Save and then another one “When content is saved” → “save action” (in our case API call) does create A LOT of workflows and A LOT of API calls (since it doesn’t wait a few seconds or until editor is blured).

We’re currently using backend workflows and time conditions to make sure to not make an api call on (almost) every keypress. We’re just wondering if we go on with this editor (cause it’s truly amazing) or find another solution :slight_smile:

Thanks!

36

Hello!

I don’t quite understand what you want. I’m completely confused.

If the editor is not in a repeating group, then we can easily trigger the “set content” action in the workflow. But if the editor is in a repeating group, we won’t have direct access to the editor’s elements from outside. Those. we don’t have direct access to repeating group cells and we can’t access each editor individually.
In this case, we used “initial content”:

we can add additional action after “content changed” and “content is saved”.
also we can additionally add “onFocus” and “onBlur” events
As I wrote above, if the editor is located outside the repeating group, then there is no problem. But how to bind all this to a specific editor (to a specific cell) in a repeating group?

Please describe in a little more detail what exactly you want and maybe you have some thoughts on how to solve this.
And you also write that this is implemented in other editors. Tell me which ones so I can look at it.

Thank you.

37

I’m not specifically talking about repeating groups… First example that comes to mind is the bdk editor : https://bdkdemos.bubbleapps.io/better_text_editor

Whenever you type something, it just updates the text output, HTML output and json output states without needing to call a workflow. The updated content is just “always up to date” without having to use workflows to check if it’s updated and then save to a state.

The other thing, is… (also present in bdk, but same in tiptap, editorjs, zeroqode advanced editor, modular text editor, etc) the ability to just have a “long text input” in the editor, often called “Content” (right after “Placeholder”) that “listens” to changes in the dynamic value you set it…

For example, if in “Content” you set something like “Element X’s Text state”… If the state updates via any workflow, api call, etc… The content changes in realtime for the user without any workflow.

This allows 1- dynamic updates without workflows and 2- for people like me using api calls to get the initial content (where the data comes a little slower then the page load), the editor still always checks for refreshed data even though the page is loaded. (with the your plugin, I cannot do this as the initial content comes a little too slow for the editor to show the content"… I have to do a manual workflow that updates to editor’s content “when x element data is not empty”)

You mentioned onFocus and Blur, these would be awesome for saving the editor’s content :slight_smile:

Thanks for your consideration, love your work.

38

Hello!

I don’t understand why I’m fixated on a repeating group. Probably because you mentioned the API.
Well, in any case, now the situation as I think has cleared up.

A number of changes have been made to the plugin code:

1.
Now the editor will dynamically respond to changes in the data in the “initial Content” field. And if, after loading the editor, the data in the “initial Content” field is changed, they will immediately be transferred to the editor.
But, just in case, I added the ability to disable this behavior. Added checkbox “Do not track initial Content” and if its value is false, then data from “initial Content” will be passed to the editor as described above. And if the value “Do not track initial Content” is true, then after loading the editor will not respond to changes in the data in the “initial Content” field

Image 5

2.
Now, when data changes in the editor, not only the “content_changed” event will fire, but the “editor_content” and “editor_content_text” states will also be updated (As you said).

3.
Added “onFocus” event

  • fires after the editor receives focus (for example, the user clicked inside the editor). The “editor_content” and “editor_content_text” states will also be updated as in “content_changed”

4.
Added “onBlur” event

  • fires after the editor loses focus (for example, the user clicks outside the editor). And the states “editor_content” and “editor_content_text” will be updated in the same way

Image 6

.

Udate the plugin to version 1.0.4

Please check if everything is added from what you wrote about? Looks like I haven’t missed anything.

Thank you.

39

Wow… That was fast! Thank you so much for this update. Will let you know how it goes :slight_smile:

Awesome dev right here hehe.

40

Hey team — we’re really loving the plugin and all the customizability.

We’re trying to figure a workaround to simulate autobind. Any ideas?

In a perfect world, autobind would be a feature we’d love.

That said, in our current workaround, we’re saving data every time the input is changed. However, the problem there is that every time the data is changed and it’s saved, the text input field is no longer focused.

What might you suggest?