🚀[NEW PLUGIN] Advanced WYSIWYG text editor

[m3uuuf]

ok , here it is in arabic :

toolbar: {
    default: 'الافتراضي',
    save: 'حفظ',
    font: 'خط',
    formats: 'التنسيقات',
    fontSize: 'حجم الخط',
    bold: 'عريض',
    underline: 'تسطير',
    italic: 'مائل',
    strike: 'مشطوب',
    subscript: 'منخفض',
    superscript: 'مرتفع',
    removeFormat: 'إزالة التنسيق',
    fontColor: 'لون الخط',
    hiliteColor: 'لون التمييز',
    indent: 'زيادة المسافة البادئة',
    outdent: 'تقليل المسافة البادئة',
    align: 'محاذاة',
    alignLeft: 'محاذاة لليسار',
    alignRight: 'محاذاة لليمين',
    alignCenter: 'محاذاة للوسط',
    alignJustify: 'محاذاة النص',
    list: 'قائمة',
    orderList: 'قائمة مرقمة',
    unorderList: 'قائمة نقطية',
    horizontalRule: 'خط أفقي',
    hr_solid: 'صلب',
    hr_dotted: 'منقط',
    hr_dashed: 'متقطع',
    table: 'جدول',
    link: 'رابط',
    math: 'رياضيات',
    image: 'صورة',
    video: 'فيديو',
    audio: 'صوت',
    fullScreen: 'شاشة كاملة',
    showBlocks: 'عرض الكتل',
    codeView: 'عرض الكود',
    undo: 'تراجع',
    redo: 'إعادة',
    preview: 'معاينة',
    print: 'طباعة',
    tag_p: 'فقرة',
    tag_div: 'عادي (DIV)',
    tag_h: 'رأس',
    tag_blockquote: 'اقتباس',
    tag_pre: 'كود المصدر',
    template: 'قالب',
    lineHeight: 'ارتفاع السطر',
    paragraphStyle: 'أسلوب الفقرة',
    textStyle: 'أسلوب النص',
    imageGallery: 'معرض الصور',
    dir_ltr: 'من اليسار لليمين',
    dir_rtl: 'من اليمين لليسار',
    mention: 'إشارة'
},
dialogBox: {
    linkBox: {
        title: 'إدراج رابط',
        url: 'URL الرابط',
        text: 'نص الرابط',
        newWindowCheck: 'فتح في نافذة جديدة',
        downloadLinkCheck: 'رابط التحميل',
        bookmark: 'إشارة مرجعية'
    },
    mathBox: {
        title: 'رياضيات',
        inputLabel: 'تدوين رياضي',
        fontSizeLabel: 'حجم الخط',
        previewLabel: 'معاينة'
    },
    imageBox: {
        title: 'إدراج صورة',
        file: 'اختيار ملف',
        url: 'URL الصورة',
        altText: 'النص البديل'
    },
    videoBox: {
        title: 'إدراج فيديو',
        file: 'اختيار ملف',
        url: 'URL الفيديو, يوتيوب/فيميو'
    },
    audioBox: {
        title: 'إدراج صوت',
        file: 'اختيار ملف',
        url: 'URL الصوت'
    },
    browser: {
        tags: 'العلامات',
        search: 'بحث',
    },
    caption: 'إدخال وصف',
    close: 'إغلاق',
    submitButton: 'تطبيق',
    revertButton: 'تراجع',
    proportion: 'الحفاظ على نسبة الأبعاد',
    basic: 'أساسي',
    left: 'يسار',
    right: 'يمين',
    center: 'مركز',
    width: 'العرض',
    height: 'الارتفاع',
    size: 'الحجم',
    ratio: 'النسبة'
},
controller: {
    edit: 'تحرير',
    unlink: 'إزالة الرابط',
    remove: 'حذف',
    insertRowAbove: 'إدراج صف أعلى',
    insertRowBelow: 'إدراج صف أسفل',
    deleteRow: 'حذف صف',
    insertColumnBefore: 'إدراج عمود قبل',
    insertColumnAfter: 'إدراج عمود بعد',
    deleteColumn: 'حذف عمود',
    fixedColumnWidth: 'عرض العمود الثابت',
    resize100: 'تكبير 100%',
    resize75: 'تكبير 75%',
    resize50: 'تكبير 50%',
    resize25: 'تكبير 25%',
    autoSize: 'تعديل الحجم تلقائيًا',
    mirrorHorizontal: 'عكس أفقي',
    mirrorVertical: 'عكس رأسي',
    rotateLeft: 'تدوير لليسار',
    rotateRight: 'تدوير لليمين',
    maxSize: 'الحجم الأقصى',
    minSize: 'الحجم الأدنى',
    tableHeader: 'رأس الجدول',
    mergeCells: 'دمج الخلايا',
    splitCells: 'تقسيم الخلايا',
    HorizontalSplit: 'تقسيم أفقي',
    VerticalSplit: 'تقسيم رأسي'
},
menu: {
    spaced: 'تباعد الأحرف',
    bordered: 'محدد بحدود',
    neon: 'نيون',
    translucent: 'شفاف',
    shadow: 'ظل',
    code: 'كود المصدر'
}

[MindForApps]

@m3uuuf

here it is in arabic

Thank you for providing the Arabic translation so quickly.

New version 1.0.27
Arabic(ar) translation added.

[m3uuuf]

great i am waiting

[MindForApps]

The update is ready. v1.0.27

.

.

[dballiet]

Hi @MindForApps

Is there a way to set the editor so that its a max height of x pixels and that it wont accept additional text beyond that either by typing and/or pasting? I have played with height, max height, etc and I can get it to limit the height but I cant prevent a scroll bar and/or allowing additional text that grows beyond my established maxes.

[MindForApps]

@dballiet

Is there a way to set the editor so that its a max height of x pixels and that it wont accept additional text beyond that either by typing and/or pasting?

Hello @dballiet !

Unfortunately, at the moment it is not possible to do this. You can only limit the number of characters entered:

This is exactly what I wrote to you about earlier. Adding an image to the background is not difficult, but there are many other challenges. This is exactly why we didn’t add the ability to insert a background for the editing area.

[dballiet]

Hi @MindForApps - Would you ever consider adding padding to the plugin, both from a layout and a conditional perspective? I’m using WYSIWYG as Align to Parent (top-centered alignment) and the left and right margins arent being honored, both in layouts and conditionals. I cant tell if this is a bug or if it’s the way it works when Align to parent, and thinking padding is a better route to go anyway, if it’s available.

[aj11]

We’re running into issues due to the removeFormats not removing all formatting. It does not remove list formatting. Can this be addressed?

[MindForApps]

Hello!
Here, you work with lists not through the “removeFormats” parameter, but by pressing the list type selection again. That is, you select a type from the list, and pressing it again cancels the selection.

.

The “Rich Text Editor” also works with lists using the same algorithm.

[dballiet]

Me again. Thanks for the support throughout my experimentation. Would you be able to give me a hint or breadcrumb on how I might be able to alter the text size via css or javascript, after loading the default text size? For example, i load editor with text and pass in default font. Then, i want to change the font size lets say on resize. Is it possible?

[MindForApps]

Well, if I understood your question correctly, then you don’t need to use third party CSS or JavaScript for this. I think that you can use the standard tools of the Bubble editor using the “Conditional” tab

That is, in the “defaultStyle” field, set the required font size
(for example, font-size:20px;)

Further, according to the condition, you can change the value in the “defaultStyle” field, for example, when changing the page width to less than 800px, set “defaultStyle” = font-size:16px;

[dballiet]

Yes, thank you. I might be able to make this work and hadnt thought of your suggestion using conditions, but my question on targeting the font size was more for me being able to set em or rem or vw (viewport width) through CSS in my quest to scale text depending on screen width. My workflow is:

1. User has default font size, font type, font color
2. Send a message to gpt, receive message back from gpt
3. Show message in WYSIWYG according by using defaultStyle parameter and feeding it default size, color, etc
4. Allow user to edit letter using WYSIWYG - then save updates inline in the database

Everything works spectacularly outside of the user experience on mobile. But I cant figure out a way to play with text scaling the WYSIWYG plugin to make it mobile friendly. At this point it’s my last roadblock and I’m ready to pay someone to help me through it…

As an aside, I was able to get an HTML element in bubble to act the way I’m desiring, and that’s what I’ve been trying to target with the WYSIWYG editor. This is that code as an fyi

.free-letter-content p { margin-bottom: 10px; /* Adjust this value to increase/decrease space between paragraphs */ } /* Default styles for larger screens */ #htmltext { font-size: 1em; /* Smaller initial font size */ position: relative; /* Ensure positioning is relative for margin adjustment */ }

/* Styles for smaller screens */
@media (max-width: 600px) {
  #htmltext {
    font-size: 0.75em; /* Smaller font size for smaller screens */
  }
}

[dballiet]

Not sure why that code snippet came out wonky…

[dballiet]

You’ve given me an idea to play around with I think - using conditionals and setting defaultStyle to em. I’m going to play with this and see if I can get it to do what I need it to. Thanks for the new ideas.

[dballiet]

is there a way to hyperlink to anchors in the editor? For example,

Table of Contents

• Introduction
• Methods
• Conclusion

Introduction

Content of the introduction section...

Methods

Content of the methods section...

Conclusion

Content of the conclusion section...

When I present this in the editor and click, instead of taking to the anchor tag, it opens a new tab and simply goes to the top of the page.

I’ve tested the html code in the html element and the links work fine there, so it seems like there’s something in the plugin thats dictating how links are handled?

[MindForApps]

@dballiet

I’ve tested the html code in the html element and the links work fine there, so it seems like there’s something in the plugin thats dictating how links are handled?

Please see this example of using an anchor:

Bubble - Visual Programming

Notes:

1. Anchors only work in preview mode and do not work in editor mode. (this rule is not unique to this plugin)
2. The link refers to the anchor in the form of “id”. You must make sure that “id” is set for anchors
3. If you use the <a> tag, then instead of the “id” attribute, you can also use “name”. You can see this in the example of “Section 5”
4. Before manually adding the “id” or “name” attributes, do not forget to include them in the “attributesWhitelist” so that the editor does not remove these attributes.
   For example, “all: name|id” - allows these attributes for all tags.
   or “p: id” - allowed for tag “<p>” attribute “id”

1,2,4 - very important.

I think this will help you.

[andrew13]

Hi @MindForApps,

This is a really great plugin!

I’m just missing one thing to make it perfect for my use case - the ability to insert content at the cursor position (like this plugin achieves for native Bubble input elements) Insert at cursor position Plugin | Bubble

Any chance you could add an action to this plugin for inserting dynamic content at the cursor position?

And just wondering how I change the border color and border radius of the element itself (not just the editable area) as well as the tool bar background color.

[MindForApps]

Hello!
update version 1.0.30
minor bug fixes

@andrew13

Any chance you could add an action to this plugin for inserting dynamic content at the cursor position?

Please pay attention to the action incertHtml, it inserts html where the cursor is currently located.

Or did I misunderstand you?
.
.

@andrew13

And just wondering how I change the border color and border radius of the element itself (not just the editable area) as well as the tool bar background color.

Unfortunately, there are no standard settings here, but you can use custom CSS. Insert CSS in the page head (or in the settings on the SEO / metatags tab or use the HTML element)

The problem here is that the editor does not have one common border. A separate border for the toolbar and a separate border for the editing area. Therefore, you need to add the editor border via CSS and assign it the necessary properties.

Here is an example of CSS:

<style>
.sun-editor {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
}
/* toolbar */			
.sun-editor .se-toolbar {
    background-color: #9faeff;
	border-radius: 10px;
}			
</style>

Get this:

First part:

.sun-editor {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
}

add the editor border and assign the necessary properties to it.

second part:

.sun-editor .se-toolbar {
    background-color: #9faeff;
	border-radius: 10px;
}

is responsible for the toolbar. Here it specifies the background, specifies the border radius (the same as the main editor border).

Specify the dimensions and color of the toolbar background you need.
Please note that this is still a hack, not standard settings. And maybe some other settings will be needed.

I think this will help you.

[andrew13]

Amazing! Thank you so much! That was really helpful!

A couple of other things -

1. Is there a way that when a user hits enter it adds a linebreak tag and not a paragraph tag?
2. When autobinding is not enabled and Do not track initial Content is not ticked I am using the when content is changed action to save the Text Content. Now when you pause in typing in the input it actually put the cursor back to the start of the content in the input instead of just leaving it where you have the cursor. I’ve tested that it’s when you have a workflow on this action that it happens (when I disable this WF the behaviour doesn’t happen).
3. Alternatively is there anyway to autobind and choose whether you want it to be the HTML or the text content to autobind?

[MindForApps]

@andrew13

Is there a way that when a user hits enter it adds a linebreak tag and not a paragraph tag?

Unfortunately, this cannot be changed. This behavior is built into the logic of the library that we used when creating the plugin.
When you press the “Enter” key, a new empty paragraph is created, which will then be filled with content if you continue typing.
The author of the library is currently working on a new version and it is possible that a different algorithm for processing the “Enter” key will be implemented there, but nothing is known about the implementation time yet.

@andrew13

When autobinding is not enabled and Do not track initial Content is not ticked I am using the when content is changed action to save the Text Content. Now when you pause in typing in the input it actually put the cursor back to the start of the content in the input instead of just leaving it where you have the cursor. I’ve tested that it’s when you have a workflow on this action that it happens (when I disable this WF the behaviour doesn’t happen).

There is nothing we can do about this at this stage. The thing is that tracking changes in the database was added as an option at the request of one of the users. And in the configuration that you describe, we get a kind of loop:

• the user changes data in the editor - the ‘content_changed’ event is triggered and the content is written to the DB via the workflow
• as soon as the content has been written to the DB - the plugin detects this (Do not track initial Content is not ticked) and runs setContent. That is, the content in the editor is completely replaced by the content from the DB. And if you continue entering characters after a short pause, these characters (most likely) will not get into the new content.

Unfortunately, this is exactly the case.
What can be done here?

1. use auto-binding - this is the best option (but as I understand it does not quite suit you for some reason)
2. do not use the ‘content_changed’ event, but save the changes manually. A button in the toolbar or a user button (start the workflow - action ‘save’) and then use the event “content_saved” to write content to the DB.
3. Instead of the event ‘content_changed’ try using the event ‘onBlur’ which allows you to start the workflow after the editor loses focus. That is, the user types text, and as soon as he goes outside the editor (clicks on something outside the editor) the event ‘onBlur’ will trigger

@andrew13

Alternatively is there anyway to autobind and choose whether you want it to be the HTML or the text content to autobind?

And here too there is no good news. The thing is that it is still an HTML editor and it stores data (content) not as simple text, but as HTML. And auto-binding uses HTML.