Feature request: new text editor

[lexoyo]

The current text editor is bad: it has bugs (select text, change color, sometimes it changes the whole line) and lacks (insertion of images, css styles which can be customized in Silex CSS editor...) and it creates bad HTML markup

Here are some better text editors, we should choose one which has a GPL license a replace the current text editor

• https://draftjs.org/
• http://getcontenttools.com/demo
• https://www.froala.com/wysiwyg-editor/inline
• https://wymeditor.github.io/wymeditor/dist/examples/22-custom-styles.html (avec styles custom possibles)
• https://imperavi.com/redactor/
• http://summernote.org/examples/

Help wanted on this, I will not be able to do it and then maintain it, so this is a good way to become a contributor. I can help you do it and guide you...

[ribrdb]

Actually the closure editor is pretty sweet once you learn how to customize it. You can easily support images, custom css, or cleaned up html by writing plugins. The documentation isn't great, but the Closure book is helpful. Are you aware of ContentEditableField? I think it's a better fit for this type of interface - it's supported in modern browsers and lets you edit right in place. goog.editor.Field is more for something like gmail where you explicitly want to isolate yourself from the css of the current document.

[lexoyo]

This is really interesting, thx

I have several questions in mind:

1. Are you saying that we could use contentEditable with closure editor? We would keep the same ui?
2. Would it make the markup better? Would it solve the selections issues?
3. Are you willing to help with guidance or code?

Thank you so much for the links. I have integrated this editor 5 years ago and I had little time to do it and no knowledge of closure components

[ribrdb]

1. Yes closure editor supports contentEditable. For example, when you click the edit button you can make the currently selected div editable in place. Something like:

   if (!element.id) {
   element.id = goog.string.createUniqueString();
   }
   const editor = new goog.editor.ContentEditableField(element.id);
   // register plugins, maybe show toolbar over element, etc.
   editor.makeEditable();
   goog.events.listen(element, "blur", ()=>{editor.makeUneditable(); editor.dispose() });

   Actually you probably need to be smarter about when to make it uneditable, since clicking a toolbar button will at least temporarily loose focus, or opening a link dialog, etc. You could even make the whole page editable, but that's much harder to manage.

2. This doesn't change the markup, but that's not hard to do. You can extend or replace the BasicTextFormatter to change how it styles text, and/or write plugins to cleanup the markup after it's edited. All you need to do is implement the cleanContentsDom and/or cleanContentsHtml methods of goog.editor.Plugin. I don't know about the selection issues. Do you have a reproducible test case for that? Does it happen in all browsers?
3. I don't know how much time I've got but I can try to help.

[lexoyo]

2. This doesn't change the markup, but that's not hard to do. You can extend or replace the BasicTextFormatter to change how it styles text, and/or write plugins to cleanup the markup after it's edited. All you need to do is implement the cleanContentsDom and/or cleanContentsHtml methods of goog.editor.Plugin.

This is what we really need to address I guess

I don't know about the selection issues. Do you have a reproducible test case for that? Does it happen in all browsers?

I changed the behavior a bit and I believe it is acceptable now

[lexoyo]

I don't know about the selection issues. Do you have a reproducible test case for that? Does it happen in all browsers?

I changed the behavior a bit and I believe it is acceptable now

I correct myself: more tests reveal that there are still selection issues. Sometimes I select a few words and change the color, but the color is applied to the whole line

This is something we really need to fix, as much as the "not standard" markup...

[lexoyo]

I have found this editor which supports inline mode and looks good https://www.froala.com/wysiwyg-editor

Inline editing is what was suggested in #52

[JbIPS]

Worth a try. I love the way JS lib still requires JQuery...

[lexoyo]

Froala is not open source :(

I found this to build the text editor from scratch https://github.com/timdown/rangy/wiki

And this open source text editor from the list is cool http://getcontenttools.com/demo

Also, if we decide to go "in place" and put the bold/italic/... in the style editor, this would be a good choice http://jakiestfu.github.io/Medium.js/docs/#invoke

[budislav]

Yes! Inline editor is urgently needed. Froala is really good inspiration. Maybe some open source text editor like Brackets can be useful? @lexoyo I found this https://xing.github.io/wysihtml5/ You can edit text on canvas nicely. https://github.com/xing/wysihtml5/wiki/Getting-Started

[lexoyo]

@budislav I'm looking into this right now wysihtml5 is not supported anymore and they recommend http://wysihtml.com/

[budislav]

@lexoyo even better :)

[lexoyo]

So, I did some tests and it should be "quick" to do, here is what I plan

• [ ] check the UX with you guys
• [ ] basic UX and inline editing, more UX tests
• [ ] basic toolbar
• [ ] links, with target options
• [ ] links with Silex pages as options - this one is tricky since there is already the option in the properties (cc @budislav)
• [ ] add image handling
• [ ] nice to have if I am patient enough: HTML/code view, tables

[lexoyo]

First step, the UX. I need your input @all

Here is my first thoughts:

1. user ads a text box

2. user double click on the text box => it opens the style panel on the right

   • is it noticeable?
   • is it ok to open the panel when the user double clicks on the text box on the stage?
   • will the user understand that the tabs will let him switch bacl to the properties panel?
   • is it clear that the text selection is linked to the upper block in the panel? (named "format" in the screenshot)
   • is "format" a good label for that block?
   • is "style" a good label for the style editor bellow?

3. the text box takes the focus and becomes editable (cursor inside it). change the selection will highlight buttons in the "format" section, and clicking on buttons in the "format" section will change the format of the selection in the text box

   • should we blur or darken everything outside the text box?

[lexoyo]

cc @JbIPS @budislav @clemos @ondrejec @SouroucheB @TheCause @jennparker @tariqbenezza @camcrock @zabojad @pierreozoux

[budislav]

@lexoyo sorry for delay. So I really think we need to make this like webflow work flow. I will show you how that should be. I think ul, ol, img and other html elements should be added like a separate elements, that would allow user much more flexibility and options.

1. On the very beginning you have to choose what do you want to insert, you have:

   • heading (html element)
   • paragraph (html element)
   • text link (html element)
   • text block (silex have this, awesome!)
   • block quote (div, modified)
   • rich text (div, combination of html elements) So for now headings, paragraph, text link and text block are what I think we must have.

2. User choose for example to add text block in one empty container which can be added also but that is not important for now. So when user add it style settings should be opened. When he double click o text box also. Now if he want to change some text on fly he need to double click on word to select word or letters so options for editing will show on canvas like this And there are enough options for this fast text editing, everything we need there: bold, italic, insert link, wrap with span, and clear formating. On the element settigns tab there is nothing particular for this element because it is not really htmls element it is div with text right. but if user now choose to insert heading element this is how it should look like and every time user can access to these options fast by clicking on that small settings button , or on element settings tab. But he can also change same options when double click on word or letters. And also like for the each element he can switch to style tab.

[lexoyo]

I see, thank you @budislav very interesting discussion!

Since Silex has no "positioned" mode, only "absolute", it is not possible for now to have separate elements for heading, link, ... We can only have a rich text for now. How does webflow rich text behave?

[budislav]

I know we need css grid desperately, actually webflow team just sent an email they are working on css grid, it will be finished this month: "We’re nearing the end of our development cycle on a grid layout system in Webflow that is powered by CSS grid. In short, grid in Webflow will introduce an entirely new way to build layouts — the largest change to the styles panel since our introduction of flexbox in April of 2016. One particularly exciting note here is that grid will feature on-canvas controls for positioning grid items, setting rows and columns, and for defining grid areas on your layouts, so you’ll be able to work directly with your grid layouts on the Designer canvas. " Soooo, we need to see how that will work. Richtext is just a div with headings and paragraph.

[lexoyo]

Thank you @budislav for all this technology watch! As usual you have all the latest info. Very logical choice for webflow... We'll have to follow at one point, I know that :) It's a lot of work though

I took a shot at the inline text editor, and wysihtml it is very interesting, not too painful integration in silex. You can play with bold, italic, underline, h1-h3 and lists here: https://silex-test-tmp.herokuapp.com/

Let me know what you think?

[budislav]

It works nice, such improvement, but can we have these options in popup format just above text, so not in style panel?

[lexoyo]

Yes we probably can, I just have to figure out how. Maybe in the menu bar on top of the stage?

Don't you think it is better like it is now because it stays with the style editor? People will probably understand that it is linked together

[budislav]

Maybe in the menu bar on top of the stage? Don't you think it is better like it is now because it stays with the style editor? People will probably understand that it is linked together.

No because there are also settings for bold and italic already under the font style label and they are on the right place and there are same group of buttons already (p a b u i h1 h2 h3 ul ol) so it is confusing what to use. I just mean when using bold, italic, insert link, wrap with span, and clear formating should be easily accessible just right under or above the word you select. Those settings are more often used. Like I said Webflow is the best example what we need but if positioning is a problem, we can have this like you made it now in style editor, it is better then before.

[lexoyo]

Good morning

I am working on the links today

Here are the possible attributes I found here

The ones I think we should keep - but I'm not sure

href — Address of the hyperlink
target — Browsing context for hyperlink navigation
download — Whether to download the resource instead of navigating to it, and its file name if so
ping — URLs to ping
rel — Relationship between the location in the document containing the hyperlink and the destination resource

The less useful once according to me, what do you think?

hreflang — Language of the linked resource
type — Hint for the type of the referenced resource
referrerpolicy — Referrer policy for fetches initiated by the element

I would add title to le the user add a tooltip on the link

I wanted to see how the link editor looks in webflow but I could not create a link with their interface :face_with_head_bandage:

[budislav]

I see ping — URLs to ping is not supported in edge and safari but I would not say I like those browsers, for me they are not existing :) https://www.w3schools.com/TAGs/att_a_ping.asp

It would be good if Silex can support all html and css tags no matter if they are existing in some browser or not, we can have text beside those option (not supported in "browser names", or just icons of five main browsers: chrome, firefox, safari, opera, edge). But I really think before everything we need css grid.

[lexoyo]

Thank you for your feedback @budislav I have several bugs but the link editor is in its first version, you can try it here

[budislav]

Very nice! But we need to have this under the settings tab, that's why we have it :) Style tab is for css styles and settings tab is for html attributes settings. So when user click on "a" button it should open settings tab with these settings.

So we can easily see and change those settings in any moment. Now you need to click again on a button which is already activated and that is not good.

So this tab should be filled with this nice content :) So when you double click on hat linked text you made settings for that link will be shown there. That is how it should work for each html component.

[budislav]

This is how it works in webflow https://university.webflow.com/article/link-settings

[lexoyo]

But we need to have this under the settings tab, that's why we have it :) Style tab is for css styles and settings tab is for html attributes settings. So when user click on "a" button it should open settings tab with these settings. So we can easily see and change those settings in any moment. Now you need to click again on a button which is already activated and that is not good. So this tab should be filled with this nice content :) So when you double click on hat linked text you made settings for that link will be shown there. That is how it should work for each html component.

That is interesting... Let's discuss that please

Untill now I see the tab with the "A" as a tab for text styles, not all css styles. The problem I see in your solution is that params tab is dependent on the selection on stage, where the format section is dependent on the text selection in the text box. also the format section has the same tags which you can style in the style editor...

Also technically the 2 panels are very different: the format section is made by hand to integrate wysihtml editor, and the params tab is created with prodotype which generates this reactjs-based form based on a text file discribing the component. This makes it easy to create new components

Let me think about all this please. And if anyone has thoughts about how we should organize the panels, please share

[budislav]

@lexoyo maybe I already pointed why we need to have some good model on which we will make Silex really easy to use and also full featured web designer tool/editor gradually, and why Webflow is the best example but I will point again because I don't want Silex goes on it's own way, I already seeing new features going on some strange way.

Webflow have really great documented UI + all free short tutorials with great explanation of each thing. The easiest for us would be to use those materials and designs as examples, for role model on which Silex should be based of.

The best thing is you can open webflow in chrome and see how something is working, so we don't need to think about many many many complex tasks to solve with UX, on the end we don't have a bunch of contributors to help making something completely new on it's own new way, because that not easy and as UX designer I don't see a better way for making everything then Webflow, because that tool is the easiest to use and understand. So if we don't follow the best example we will end up with something unique but complicate and not as good as it should be.

Therefore, I constantly persist to look at how they made it, so we don't end with something which is hard to use or closed for any improvements.

So I think we need good foundation so we can easily made new features latter and build it like they are doing it, modular way, so all new components are working on same way, to know exactly how to use it and where to find it. Yeah I think we need to clone some things like foundation of webflow (workflow, elements, styles and box model, layering system, css grid which is coming..), there is nothing wrong with cloning, because this is open source software, this should be at the first clone of something that will evolve into something unique later.

That's why I think we need first to establish how SIlex should work and build it on that way gradually, so we don't have a problem with adding new features when the time comes for it.

Here are some really great short video tutorials really short and well described some basics, please watch them :)

https://university.webflow.com/article/intro-to-the-designer https://university.webflow.com/article/intro-to-web-layout https://university.webflow.com/article/intro-to-the-style-panel https://university.webflow.com/article/canvas https://university.webflow.com/article/navigator https://university.webflow.com/article/style-manager https://university.webflow.com/article/elements-panel

and of course page with many more https://university.webflow.com/tutorials

[lexoyo]

I understand your point about webflow and I am currently watching their videos to get inspired, thank you Please consider

• webflow probably has more than 50 developers and QA egineers full time on their editor
• we are creating our tool for ourselves, so Silex should be developed based on a "I develop what I need when I need it"
• the vision / direction we took since the beginning (2002) was the one which inspired wix: everything should be absolute because this is more intuitive in most cases - and it can be turned to positioned automatically in most cases

I just added images into text fields, but I am not sure that it is really useful as I did not add the options to have text around it... I will publish it and you will tell me? Also the UI with only letters seems not very intuitive to me (P, B, I...). Maybe an onboarding will be necessary (https://github.com/silexlabs/Silex/milestone/8)

[budislav]

I think there is no point going on without any right goal, direction. If that statement "I develop what I need when I need it" describing foundation of Silex than I can't tell I see a bright future of it.

We have Webflow for inspiration, but we can't use any model because Silex is not intended to be like that on the first place, so it can't adopt many essential things, because of Silex wrong foundation. Web technology is changing as design and coding principles almost every day, Silex need to follow everything.

Absolutely positioned pages are not good choice, that model is not good for modern websites, nobody is making website like that today and i don't believe if they ever in past, also not believe in future they will. So that's first thing we should think of, layout, structure, grid (css) box model, base...

In other words I think we really need new engine that could support all new essential things, that would require I can't imagine how much time but I think that is necessary for future of this project, for each next step, because just adding new features random in this kind of model is for me going back.

It would be just more and more harder and impossible to implement it on right way. There will just be so much hours invested into this direction so it would be impossible to think of making some radical changes, because that will involve erasing or changing lines and lines of code.

I just added images into text fields, but I am not sure that it is really useful as I did not add the options to have text around it... I will publish it and you will tell me?

Sure I will tell you, but I believe there is nice css thing called clip path https://bennettfeely.com/clippy/, please watch this video https://www.youtube.com/watch?v=w8pksaGhjfA. She is a mozila developer, please look at others videos on that channel.

They are really educational and giving you a full picture of modern web designing, that is really necessary to understand, I am watching also this course https://www.udemy.com/advanced-css-and-sass/ and it really giving me totally new way of thinking about how website should be designed (coded and everything)..

You see new technology is coming everyday, we need to catch it if we want this project be super awesome which I believe you want as me. To attract developers and designers, not just regular people. So when I export code from Silex it should be clean, simple html and css with all html5 code for google seo ready to go. So I can just convert it to scss easily without need to rebuild whole thing from scratch, than whole editor doesn't have a point. Also powerful editor so i can do there everything for front-end easily. Css is becoming more and more powerful everyday, we can build Silex even better than webflow but first it need to have many things at the same level.

[lexoyo]

I know, it's not perfect :-/ But it's there for a decade and the only free alternative to wix for DIY, so we have to continue ;)

Almost done with a 1st version of the text editor and styles https://silex-test-tmp.herokuapp.com/

[lexoyo]

after some tests, here is what I think is missing, what do you think?

• [x] float left/right for images in text boxes (where? how?)
• [ ] link editor should be also used outside the text, when attaching a link to an element (currently there is a dropdown list)

Also maybe make the UX better?

• [x] tool tips or something to make it obvious that the styles button bar is for formatting selected text
• [ ] a marker to signify when a text box has focus and the text is being edited (or is it me?)

Nice to have

• [ ] a "colums" style in the style editor

[lexoyo]

float left/right for images is added

I pushed it on preprod, here are the code changes: https://github.com/silexlabs/Silex/pull/789

could someone test the new text editor and style manager please? https://preprod.silex.me/

[clemos]

I had a quick look yesterday.

I find it weird that the style editor is not in sync with the text editor, ie when you format your text to H1, I think H1 should also be the selected style ?

Also, selected text is lost when you work on the style editor, which is very inconvenient.

The "Style name" part is quite confusing:

• is the class applied to the whole text block ?
• what is the "phone" button supposed to do ?
• where are the styles stored ? where can I edit them ?

Something I don't understand either: when adding a new Text style (duplicate or "+"), the "style" part disappears ? Then you have to re-select a text box for the style editor to reappear.

[lexoyo]

Wow great comments @clemos thx I'll answer each question but the general idea was

• Format block is in sync with the selection and used to change text box content's markup
• Style manager makes it possible to define and apply css styles to text boxes, with a context - mobile or desktop, and a state - normal, hover, other css pseudo classes

The idea of syncing the style editor and the selection is interesting! And this is easy to fix: "selected text is lost when you work on the style editor"

is the class applied to the whole text block ?

Yes and you'll find the style name in the text boxes CSS class property

what is the "phone" button supposed to do ?

It is on when editing the mobile version (mobile editor turned on). Then you are editing styles for the mobile site only

where are the styles stored ? where can I edit them ?

They are stored in as json in the website data. Also they are inserted as css styles in the website, and after publish they will be in a separate "css/styles.css" file

Something I don't understand either: when adding a new Text style (duplicate or "+"), the "style" part disappears ? Then you have to re-select a text box for the style editor to reappear.

Oh that's a bug, thx The rename seems to have this too It should apply the style to the selected text box(es) and display the style right away

[lexoyo]

Here are ideas of what could be done to address these issues, let me know if you have other ideas @clemos and what you think about the list of ideas bellow @clemos @budislav @ceubri @BaguetteAgile @JbIPS

1- sync the selection in the text box with the style manager, so the 2 button bars would be always showing the same thing and we should remove the 2nd one?

2- move the format block () 2.1- to the context menu () 2.2- or on stage, on top of the text box ( ) 2.3- or on stage, on top of the selection ( )

3- maybe an onboarding mechanism is needed to answer some of @clemos questions the first time a user edits a text box, like the tooltips suggested in #774

Let's discuss all this quickly so that I can do it while I have time

[clemos]

I looked into it again: Opening cleansquare template, double-clicking on a text box, the style of the text changes significantly, effectively breaking the template.

I think it's already quite difficult to apprehend because it mixes box-level settings with selected text formatting. I think box level (including style editor ?) should be in the first tab (box tab?), and thus replace / enhance the current "styles" dialog. In this context, (1) would make sense too.

Then you have only text formatting stuff left in the second tab, so you can indeed move it somewhere else. Personnally, I prefer the 2.2 option.

3 is probably a good idea, but IMHO will never replace a clearer UI :D

[lexoyo]

Great @clemos thx

The template being broken is because the template was made with the old text editor and has non-standard markup ( tags). We will need to change all the templates before putting this on editor.silex.me

To summarize what you advise

• [x] The text style editor in a separate tab is a bad idea, let's have all the styles in 1 tab like in webflow - in the long run, I would like to make all the editors with prodotype so this makes even more sense. A question: what should I display when no text box is selected?
• [ ] keep the style editor in sync with the selection in the text box
• [x] Make the format editor a floating bar

[clemos]

The text style editor in a separate tab is a bad idea, let's have all the styles in 1 tab like in webflow - in the long run, I would like to make all the editors with prodotype so this makes even more sense. A question: what should I display when no text box is selected?

It's not necessarily a bad idea to have text formatting in a separate tab, my point was rather to all things relative to the box should be in the same tab for consistency. Text formatting in a separate tab makes sense, it's really the "Style name" dialog that feels weird.

The rest is correct.

[lexoyo]

Hello I finished the "Make the format editor a floating bar" task This was quite a lot of work but it looks good: https://preprod.silex.me/ What do you think @clemos @budislav @ceubri @BaguetteAgile @tariqbenezza ? 1- is the floating mode ok? you see bugs or unexpected things? 2- please test the text style editor and tell me how it works together? 3- what do you think about the idea of "keep the style editor in sync with the selection in the text box" ? Thank you for your help!

[BaguetteAgile]

Hi, I just tested the text editor with the floating bar, great job, really good and make the text easier to edit.

I have not noticed any bug yet.

By cons, I have trouble understanding the operation of the link editor and advanced settings ...

[budislav]

Good job! style editor doesn't seems to work. Still think link settings and heading settings should be inside settings tab.

[lexoyo]

ok thank you for the feedback i'll wait the one of @clemos too here is mine after some experiments

1- I would like to add a style named "All style" which would be in all websites

• display in style manager when the body is selected
• in the website CSS, the selector should be .silex-element-content > * without a style name

2- the P selector in the style manager

• should create a CSS style with the selector .mys-tyle .silex-element-content > * so that all the tags are styled by it, not only P
• should be named * instead of P

What do you think about that?

[lexoyo]

I have trouble understanding the operation of the link editor and advanced settings ...

Do you mean this?

[clemos]

1- is the floating mode ok? you see bugs or unexpected things?

It's nice, though not immediately noticeable, but I have no suggestion as to how to deal with that...

2- please test the text style editor and tell me how it works together?

(The second tab on the right ?) It works well, once you understand that it's a style editor and not a text editor :S I think it's a bit clearer now that in the previous version

3- what do you think about the idea of "keep the style editor in sync with the selection in the text box" ?

I think it would make sense.

I noticed a small bug: when you add a new text style (+), the tab becomes blank, like the style isn't initialized correctly. Clicking on the refresh button makes it appear.

[BaguetteAgile]

yes that's it Alex,

in fact I do not understand all the possible options in the drop-down menu and in the advanced settings.

But that may be due to my computer level? (or my english)

maybe insert a bubble info for each choice? but it's not a priority at the moment.

Great job.

[lexoyo]

Great, thx a lot @budislav @clemos @BaguetteAgile

You did not react to my proposal:

1- I would like to add a style named "All style" which would be in all websites

• display in style manager when the body is selected
• in the website CSS, the selector should be .silex-element-content > * without a style name

2- the P selector in the style manager

• should create a CSS style with the selector .mys-tyle .silex-element-content > * so that all the tags are styled by it, not only P
• should be named * instead of P

Concerning your feedback:

@clemos It's nice, though not immediately noticeable, but I have no suggestion as to how to deal with that...

You mean that you did not notice the floating bar immediately after double clicking the tex box?

It works well, once you understand that it's a style editor and not a text editor :S

I can do this maybe

• [x] add a link to the wiki in the style editor

@BaguetteAgile in fact I do not understand all the possible options in the drop-down menu and in the advanced settings.

• [x] add a link to the wiki in the link editor

Do you think that a help link in the floating bar would be helpful ?

[lexoyo]

What I still want to change (thx @clemos)

• [x] B should be bold
• [x] A blue and underlined or a link icon
• [x] U underlined
• [x] remove the "list-style-image" property

[lexoyo]

here is what I did today

• changed the design
• added doc to the wiki
• links in the text editor and link editor to the wiki
• the "P" style changes also the h1-h3 styles as if they were inside a p tag

Some documentation is still missing, I have written "help wanted" in the wiki where it is the case

I think it is ready to ship like this, could you test on a real life case @ceubri @BaguetteAgile @fernandammoutinhobarros ?

[BaguetteAgile]

Hi @lexoyo ,

I just tested (on my site) the new text editor, frankly it's really great and editing is simple. the link to wiki is cool as well as the explanations for the links editor!

I did not notice any bug

the wiki will be completed of course.

For me the text editor is ready to go online.

Very good work.

PS: where are we with text fonts?