@sarabeth I have investigated and it seems like the text alignment tune is not visible in the HTML output. I am also unable to create a custom parser for it as it does not seem to get recognized. I have left a comment on Github, hopefully it will be picked up soon
Hey @Thimo I have encountered a bunch of problems with the editor ālosingā tags, and even worse, overwriting the info in the DB . It happens randomly, but is pretty troublesome as I have other systems look for that tag data. See video:
Debugging further, the tag information is missing in the json/html, even though it shows up in the debugger:
Not sure what is happening here. I will send you a DM so we can take a better look at the issue!
@Thimo just put this on my app and itās clearly a well built plugin. Loving it so far and the HTML rendering is giving me good vibes when the content is presented elsewhere.
One thing I canāt override / control is the added right padding. When the editor is <470px (or so) both right and left padding disappears, the add & config buttons (on the left) then float. Perfect! However when the editor is wider, right padding of about 100px is added. I understand why we need left padding but the right padding adds much unwanted whitespace. Is there a way to control this please?
I searched but this is a big thread, I looked for padding and didnāt find a response.
Image - to show what happens when my editor is wider:
@manipaje The padding is the same on both sides of the text editor for symmetry purposes. This is the default from the library actually. As you mentioned that you like the way the menu looks on mobile, you could enable this feature so the padding will be removed, and you will get a floating menu ā
Thanks @thimo - Iāve tried switching that option on, the padding / margin still persists. When switching on the display icon below option, it forces this CSS:
#id3555231 .codex-editor {
padding-left: 40px !important;
padding-right: 40px !important;
}
which results in the left margin being small but the right margin becomming 10px bigger! no symmetry.
And I tried with the āhide plus and settingsā icon (to see - I donāt want to do this) and it then adds:
@media (min-width: 651px)
.codex-editorānarrow .codex-editor__redactor {
margin-right: 50px;
}
Ideally, Iād have the plus/settings icon on the left, with no/10px margin on the right. Any amount of CSS forcing has failed:
.codex-editor,
.codex-editorānarrow,
.codex-editorāempty {
padding-right: 0 !important;
margin-right: 0 !important;
}
Is it obvious what I am missing? help appreciated
I canāt seem to override this additional 50px margin, which with the icon below is no longer symmetrical, itās just hogging space on the right.
@manipaje You canāt override the padding like that as it is a library default. However, if you enable the option to have the menu below the block, you can use the margin controls in Bubble to make the additional space smaller. You can also do this without enabling this option, but that will cause you to have more space on the left as there needs to be room for the floating menu.
Take a look at this demo I made you, it will show you how to decrease the room on the sides of the editor: Texteditordemo | Bubble Editor
Nailed it! Negative margins - doh. Thanks for pointing out my error. Thatās made it pretty robust for how Iāve added it into my app. Thanks you so much for making a page to show it, the rumours are true. you do provide very excellent support
Sharing my implementation plan - just in case itās useful for others. I added this editor to a RE which shows in a popup. Thereās one instance but users can navigate in this popup to other database entries. The database has three text fields for description (plain and two new JSON and HTML fields).
Because of my setup, I struggled with the fallback to plain text approach - it caused errors with autobinding and how Iāve added save on navigation. I decided to just make a quick admin tool to go through every item in my database and set the JSON and HTML versions of the original plain text version. Then I unhide the new editor and checked if any user had edited during that small window (no - safe )
I am sure I couldāve made it less clunky but I think itās worked and I feel mostly reassured Iāve now migrated from plain text to now rich text. Iāll stop sweating when 48 hours has passed and I get no customer emails
Hi, @Thimo! Any plans to add Tagify functionality to either this or the Tag Users plugin?
Hi @sydney22, How would you like that implemented exactly? The RTE already supports tagging and the Tag Users Plugin also supports tagging using similar custom made logic
Hey @Thimo something I noticed which is definitely an annoyance for users, you canāt copy paste multiple lines into the table - it always ends up outside the table. See below:
Thanks for your all your great work!
Hi @drfalken, thanks for flagging! I think this has to do that in the RTE every line is a separate block, as it is a block based RTE. I donāt think change the way the table block handles paste events. I have found a similar report in Github and will send a follow up to see if the creators of the table block can support pasting of multiple lines!
Ah, I think this plugin uses the tagify library: Tagging and Mentioning Input Plugin | Bubble
Thank you, ok, makes sense!
Yeah I researched that one, but it doesnāt meet the Thimo Gold Standardā¢.
Hi @Thimo Great work on the Editor. We seem to have an issue, after creating post and the admin user comes back to edit or make changes to the post , we noticed that the Modern rich text editor output does not retain the image, it shows an error that āImage can not be uploadedā . Can you help?
I noticed that when we checked the database, the image is there but the editor will not render it if a user edits a previous post
I have attached the error message
Hi @pamela, how are you displaying the data exactly, are you displaying the JSON data? The āinsert htmlā workflow action does not support images at this time, but the plugin is actually made to display its JSON output. The HTML output can be used in emails for example. Does this help?
Hey @Thimo ,
We have about 12k objects which currently have text stored in HTML which we are looking at how to best migrate to your editor.
Iāve looked at the insert HTML workflow, and understand it doesnāt support images, which is fine, we only have a handful with images, but <br>,<div> <strong>, <em>
, dont seem to convert across for me.
Wondering what the recommended migration approach is, should I be created a backend WF to somehow find and replace the html markup with the JSON markup? Given how different it is I would be a bit concerned about it working across all of the objects.
How should I go about this?
Many thanks!