Friday night updates
Just updated to beta version. From my brief testing, it does seem like auto-binding is working as expected! Iāll continue testing though and will report back
Friday night updates
Just updated to beta version. From my brief testing, it does seem like auto-binding is working as expected! Iāll continue testing though and will report back
Iām referring to this option:
Iāve just realized that your demo actually has two pagesā¦ (index and doc). I completely missed the doc page (default goes to index ).
I see that you check a value and then based on that, the tiptap element is editable or not. I havenāt tried this approach. Iām just using the option shown in the screenshot aboveā¦
In any case, itās not really a deal breaker for me at the moment, as I can just use an html element to display content vs enable/disabling input within tiptap.
Oh! I gotta fix that.
FYI: following @keithās initiative, Iāve synced with Github and made the repository public: GitHub - RicoTrevisan/Tiptap-for-Bubble: This is a repository based on the Bubble plugin 'TipTap rich text editor with HTML output' (https://bubble.io)..
@rico.trevisan auto-binding is working as expected for my use case and Iām super happy with it! Thank you again for looking into this so swiftly!
I have encountered one instance where auto-binding is problematic though:
What can happen on first try after page load:
I mentioned first try because: after the tiptap element appearing once, this no longer happens, until the page is reloaded.
My temporary solution:
But this actually got me thinking (feature requests incoming ):
As a bubble dev I want to be able to push data to the tiptap element as an action, so that I can change/update data source for the tiptap element via a workflow and its respective conditions"
As a bubble dev I want to have the āeditor is loadedā as a data source so that I can better configure my workflows around itās loaded state"
I have one additional request: I would like to have underline supported; (Underline ā Tiptap)
P.s: Iāve made the plunge and have opted to use your plugin on production. And Iām loving it
Woot! Coolio.
You can nowSet content
.
You can now feed it JSON either via:
Keep in mind that this needs to be Tiptap-compatible JSON.
It does have this event.
Is this what you need? Could the working be improved? Does it get lost in the sea of events?
Or would you prefer to have it in a state?
Is this what you need? Could the working be improved? Does it get lost in the sea of events?
Or would you prefer to have it in a state?
Have it in a state please
Appreciate the JSON input and set content action
Tiptap is ready
I think I got it working. Need to test a couple more things before deploying.
LEFT fit to height is checked.
RIGHT Fit to height is not checked.
Rico, thanks for this plugin, its what Iām looking for. Auto bidding in ver 1.2 is working well. I have one idea to improve ā when we use the list (ul,ol) ā now, it has big whitespaces because p-tag is in every li tag. Is it possible to remove p-tag from the li-tag?
Been trying different things, definitely going in the right direction!
One behavior that could see improvement :
Keep it up, itās already awesome as it is!
Edit : Wondering if tiptap accepts custom json (aka creating our own action or adding uuids to (for example) tasks/lists, headers, etc)
I havenāt tried this yet, but itās stuff like this that really adds to the ecosystem in a very beneficial way. Thanks!
nice man! if ever thereās an highlight (text background color) function, that would be appreciated and does tiptap offer tables?
I was looking at this last night. I havenāt found the easiest way to do it. Before that, what do you think of this set up. If the editor is:
Iāll try this again tonight but Tiptap doesnāt yet have any way to āreconfigureā the editor so I have to destroy()
and build it again. Which is harsh and it will cause some weird behavior.
Iām trying to figure out if thereās simple CSS that gets around this. On Tiptapās website there are a lot of examples that use Vue which has this nice :disable
thingy. But I donāt know how to do that with vanilla JS.
<button
@click="editor.chain().focus().toggleBold().run()"
:disabled="!editor.can().chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
Thatās normally how any of the menus work. The action will act where on the selection or where the cursor is. I probably didnāt understand your question, could you clarify?
The Bubble RTE outputs bbcode. You can copy paste from the RTeditor, but not its output.
I donāt think youāre able to paste images on the editor. Unless you figured out something that I didnāt yet. So the images are stored the way you store them. The image adding mechanics is built with Bubble; not the plugin.
@rico.trevisan based on what you proposed:
This could strain/limit the usage of this plugin, as your forcing a UX approach that defeats the purpose of the WYSIWYG editor (IMO).
For example in my app, your proposed change would mean:
(I rely heavily on the WYSIWYG functionality which is the reason I love Tiptap and this plugin so much).
Thinking of mobile users, this is the UX forced, due to a behavior they do not benefit from (as there is no hover on mobile).
Now, good UX would not be ājust leave it!ā We definitely need to improve this.
I have found a work-around that could be used until this is changed/fixed more elegantly. @treb.gatte youāre more than welcome to give it a try:
Add an html element to the page, and insert the following code:
<style>
a:hover {
cursor: pointer !important;
}
</style>
Result:
I hope this helps
I like it! Also, I think I can make that desktop only, but itās been a while since Iāve done that type of CSS.
@rico.trevisan, my use case is for a custom menu option to trigger a workflow. For example, I want to highlight a sentence, then click a button so that I can create a reminder from the highlighted text. This is a use case Iāve not been able to do in Bubble yet.
Thanks!
I can get it to work directly in Tiptap.
Tiptap allows you to add HTML attributes directly to the element.
It adds extra stuff in the HTML:
<p>
<a
target="_blank"
rel="noopener noreferrer nofollow"
style="cursor: pointer"
href="https://bubble.io">
https://bubble.io
</a>
</p>
Alternatively, I could add it to the root, via Tailwind Typography.
That leads to the next question: you probably want more control over the CSS, correct? I started using Tailwind because it was a simple way to get beautiful styling for āfreeā. I was thinking of providing more options of CSS ā like Pico.css ā and the option of NOT adding any so that you can bring your own.
So I have no experience with Tailwind or other CSS frameworks, but Iād really like to bring my own CSS.