-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Discussion: v0.9.0 and further developments #4159
Comments
Please leave a comment to help us! ❤️ |
Thank you lqez and the team for an awesome HTML editor. I used other editors before but after a lot of research, I choose SummerNote for 1der1. 1der1 is a website builder and it uses SummerNote as a nucleus for many extensions. The website builder uses a lot of interfaces to other software, and it is painful when an interface changes later on. When I started using SummerNote, it came with Font Awesome. When the SummerNote team invested huge efforts to get rid of Font Awesome, I kept the latest version and continued developing it. While I am no longer using the newer versions, I keep connected and I am happy to help solve issues, I already solved for the 1der1 version, |
Here are some of my thoughts of some things I think are important, or where I would like to see the development path taken:
Here's some things that are different in the Skunkworks repository, some are new features, some are fixes:
There's been other fixes added from issues from the main repo, which I've marked as Those are just some of my thoughts, off the top of my head, obviously they can be expanded on, or forgotten about. |
I've noticed some weird issue that happens in all of the versions of Summernote I could test today, BS3, BS4, BS5, Lite, and Skunkworks, where some of the formatting during normal editing gets elements added, in strange ways. For e.g. <p>This is some test text</p> If i then add a line break by pressing enter after the <p>This is</p><p><br></p><p> some test text</p> This is wrong, and shouldn't happen, it should, theoretically do: <p>This is</p><p> some test text</p>
//or
<p>This is<br> some test text</p> If think this is something that needs addressing as well. |
I tested this today (develop branch) but failed to reproduce. |
Linux, Chrome. Using both the Skunkworks version (based on Lite), and BS4, and Lite versions built on my machine for testing the latest changes. |
I just now had a thought on the dialog/modal problem with too many modals loaded into the DOM producing large pages for those that use multiple instances of Summernote on one page. What if we used the I'm thinking we could have one dialog/modal instance that gets populated when the need to use one is needed. It may mean moving the code embedded markup into the functions for each dialog where they are initiated, but I'm also thinking that may help with maintaining the code easier as everything for that function will be together, rather than spread across multiple files. I think this may also resolve what dialog/modal belongs to what instance of Summernote as well, as we can more closely tie them together with each Summernote instance having it's own dialog/modal instance. |
@diemendesign |
Yes, that could be another way, and would make cleaner markup, esp. for those that don't need to use them, making the footprint even smaller. There's no reason they couldn't be generated as needed. Maybe the same for the popovers as well. |
I think we should pay more attention to function rather than style. According to the use of users, they can modify the style freely to make it look more beautiful, because the style modification is simpler and will not affect the practicability of the editor. I think we should pay attention to the optimization of functions, such as the execcommand() function mentioned in @diemendesign . This function has many uncontrollable factors, which will pollute the style of the editing area in some cases. If possible, I hope that the code of summernote can realize functions similar to execcommand(). I investigated TinyMCE about plug-ins. I think they did a good job. We can also refer to their ideas. We can provide more APIs (such as selection area, current cursor position, insertion line, button or toolbar status...) to allow users to combine freely to realize their customized functions, but this is a huge project. |
Styling the current interface of Summernote isn't that easy, and has to be accomplished mostly by overriding styles in another stylesheet. What I've been working on, mostly with the Skunkworks version (based on the Lite version), is modifying how the styling works, so it uses the var options that is available now with stylesheets, that way, restyling only requires changing the vars values, rather than having the override existing styles, as mostly changing the look is about changing the colours. |
That's pretty much what I'm talking about, but making it easier, so extra styles don't need to be added, helping keep the overall footprint smaller, and making changing the look easier, even on the fly, as javascript can modify the variables that affect the styling directly. It also means we can provide multiple styles people can just, as they would only require changing the values to achieve different looks while keeping the functionality of Summernote consistent. |
Oh, and it also means anyone wanting to create their own look, don't have to sift through all the styles to make the changes they need. |
Same issue hapening for almost all tags #4303 (comment) |
Variably set I want to set these style variably by number input text in the toolbar UI. (Rather than a list of fixed font sizes.) 🥺
|
First of all, I would like to thank everyone for this amazing work that you guys did so far. Wonderful product! What I love:
My 2 cents on this discussion:
I hope the above helps a bit on your discussion on how to move forward. Cheers |
Thanks for your thoughts @VangelisP you bring up some interesting points, a lot that I agree with. I've been working on the summernote-skunkworks repository, which is based on the lite version. I have recently set the repository to public, but as of yet, no releases of that version, it currently needs to be built to be used. I have so far completely removed the dependence on Bootstrap, which was mostly styling, and added mostly colour control variables to make themes easier to produce. There are also some sizing variables added, mostly to do with padding and margins for some elements. There has also been extensive remodelling of the modals, which can now be closed via Esc, or by clicking on the background. Plus a lot of other improvements and fixes were added, for testing and fixing issues brought up in the main repository. The styling has also been namespaced better, along with making sure things like "active", "dropdown" which use similar classes to Bootstrap have been namespaced and the relevant code modified to work, further removing interference from other frameworks. jQuery, as you mentioned there are some functions that are exclusive to jQuery that Summernote currently relies on, making it hard to simply remove the dependence on jQuery easily. I do, however, want to start modifying code that will for now be easily removed and can be done in Vanilla Javascript. We do have a repository for the plugins "awesome-summernote". Thinking about it, maybe a new repository could be called summernote-plugins would make more sense, and maybe also summernote-themes might also be an idea. And within those, we have a tagging system that indicates exactly which version of summernote the plugin or theme works with. We could also have on repo for both, but I'm not sure what we could call that. At this stage, I think we can drop Bootstrap, from my testing, the skunkworks version works fine inside it, without interference (though someone may find something to fix, but that is to be expected), it also works inside tailwind. I have yet to test other frameworks, but it wouldn't be hard to fix those. |
I'm frustrated that summernote doesn't add Font-family like ej2 syncfusion richtexteditor : var rteditor = $('#rteditor').summernote({
fontNames: [
'Source Sans Pro',
'Segoe UI',
'Arial',
'Arial Black',
'Courier New',
'Georgia',
'Impact',
'Lucida Console',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana'
],
height: 400,
});
////////////////// ej2 syncfusion richtexteditor //////////////////////////////
var richTextEditor = new ej.richtexteditor.RichTextEditor({
fontFamily: {
default: "Source Sans Pro",
width: "80px",
items: [
{ text: "Source Sans Pro", value: "Source Sans Pro" },
{ text: "Segoe UI", value: "Segoe UI" },
{ text: "Arial", value: "Arial,Helvetica,sans-serif" },
{ text: "Courier New", value: "Courier New,Courier,monospace" },
{ text: "Georgia", value: "Georgia,serif" },
{ text: "Impact", value: "Impact,Charcoal,sans-serif" },
{ text: "Lucida Console", value: "Lucida Console,Monaco,monospace" },
{ text: "Tahoma", value: "Tahoma,Geneva,sans-serif" },
{ text: "Times New Roman", value: "Times New Roman,Times,serif" },
{ text: "Trebuchet MS", value: "Trebuchet MS,Helvetica,sans-serif" },
{ text: "Verdana", value: "Verdana,Geneva,sans-serif" }
]
},
height: 400,
});
richTextEditor.appendTo('#rteditor'); Please add this feature to summernote. |
@hldvuong Do you mean like this: https://summernote.org/deep-dive/#custom-fontnames |
Yes, it does not same ej2 syncfusion richtexteditor feature. |
But it does it in a different manner, yes? |
I can't get it to save any of my changes, like adding a video or image. When I navigate to another section of the course it looses all the changes I made for my edit. How can I keep the changes I edit? How do I save my progress? |
@Ninja-man07 could you create an issue for this, your comment doesn't really have anything to do with the Topic, thanks. |
Drop jquery please, it's about time. |
PR's are welcome to convert code away from jQuery. |
It sounds reasonable to get away from jQuery. I have already seen a lot of talking about it for years. However, the modern JavaScript replacements are not so forgiving, and you write wrapping code that does all the checking. Your wrapping code is not a standard like jQuery. Additionally, browser-emulating components like bots and scrapers often don't support some new JavaScript features and will fail. Does anyone know a major project that stripped jQuery usage? Keeping jQuery would reduce the to-do list significantly, freeing up many resources. |
@1der1 agreed, hence why we haven't just jumped straight in. Plus there are some functions that rely on jQuery. That said, however, there's no reason we can't slowly migrate code to vanilla Javascript that allows. Oftentimes, it speeds up code execution as well, as we're not relying on third-party code that the browser can do natively. For me, despite the increase in speed of execution, it would help put Summernote into more projects that don't use jQuery. Also, as I've noticed with some other projects (Fancybox, Fullcalendar) that have moved away from jQuery, they have options that allow initialising their functionality using jQuery. |
will there be any future releases? |
There is intention for it, it's just getting it done. The number of commits, recent or otherwise, isn't an indicator that a release should or will happen. |
Thanks for your reply. |
@DennisSuitters @lqez do you guys need any support in making the new release happen? There's a few fixes already in the develop branch, which people (myself included) look forward to have, but a new package version is required. I think the project is just awesome, and it would be so nice to see a couple of updates there! |
This is a discussion about the future release
v0.9.0
.About the legacy
Summernote began its journey in 2013 — it was the time Bootstrap 2 was getting popular and jQuery widely used, so Summernote was built on them. The first commit message was simple but grand, ‘summer is coming’ by @hackerwins.
As a WYSIWYG web editor, Summernote got popular. And most of its popularity came from its ease-of-use on Bootstrap-themed sites.
It was fine for a while. But Bootstrap released its version 3 and we'd decided to drop Bootstrap 2 and replace it with Bootstrap 3. At that time, it was not a bad choice. The difference between version 2 and 3 was not that huge and did not need to be changed many parts in most cases, almost drop-in replacement.
At the same time, we'd got a lot of requests about using Summernote without Bootstrap. So @hackerwins made a lightweight version, and we named it
lite
. We got two versions.And Bootstrap 4 had released two years later.
It was pretty different from its ancestor. So we couldn't apply the same strategy. Not everyone wanted to upgrade their Bootstrap styles to version 4. Therefore, we decided to support both Bootstrap versions together. Three versions.
Meanwhile
Since 2018, most maintainers and committers have been away. Only @diemendesign and @easylogic have been struggling with fixing bugs and answering issues over and over again. @hackerwins is now busy with a new opensource project (Yorkie), and I (@lqez) quitted and retired from my job – losing confidence and motivation to maintain the project as diligent as years ago.
Meanwhile,
Yes, Summernote lost many chances stepping forward.
Now
I'm preparing
v0.8.19
, which includes minor bug fixes and updates for broken and outdated build/test chains.And it's a good time to say goodbye to Bootstrap 3. At least we should not use version 3 as default. I thought to set
Lite
style as default and replace the defaultsummernote.js
andsummernote.css
with it. But I would like to hear other opinions.Future
From the very beginning till 2017, I'd considered strength points of Summernote to be;
But to continue the journey of development, below things should be addressed first;
Lite
as default)Lite
as the default style, adding more styles – like Bootstrap 5, Tailwind, Tachyon, etc.webpack.ProvidePlugin
) I think this is not intuitive. It doesn't need jQuery as much as years ago. We can use modern JavaScript syntax itself and Babel with polyfills. But there is a problem – most plugins depend on jQuery's$.extend
function.awesome-summernote
holds plugins by categories, but we don't know anything about the qualities and compatibilities of plugins, or even they works or not. We're not that big as React, so Pelican plugin style could be an alternative way to manage plugins.The text was updated successfully, but these errors were encountered: