WBCE CMS Forum

losttrip

Member

cwsoft addon file editor - missing menu bar

WBCE Version: 1.6.2
PHP Version: 8.1.27
cwsoft-addon-file-editor_3.2.6

The top menu bar in the text cwsoft-addon-file-editor is not displaying in my latest website installation.

Is there something in my versions or configuration that might be causing this?  I tried lowering the PHP versions, but that didn't seem to help.  I tried installing cwsoft-addon-file-editor_3.2.6 on some other sites running lower WBCE versions, and they seem to function as expected.  Could it have anything to do with version 1.6.2 of WBCE?

What I am used to seeing:

Thank you for any guidance you can offer.

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

It's changed the editor from EditArea to CodeMirror. Is it that?
Or do you have any other issues?

Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

florian

Administrator

Re: cwsoft addon file editor - missing menu bar

The "menu bar" belonged to the old editor Editarea, which was replaced with CodeMirror - which does not have such a menubar - already in WBCE 1.6.0.
You can configure the appearance of the source code editor with the admin tool Code Mirror Configurator.
With Firefox, you can switch to fullscreen edit mode with F11. Unfortunately, there's no search module implemented yet.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

The implementation of CodeMirror was kept as simple as possible, therefore not all too many plugins, bars and features were implemented.

Since the implementation I have not heard any negative feedback, or much feedback at all for that matter.
Is there something specific you would like to be added in a future version?
What exactly is it in the toolbar you have been using? Or is it just that you wonder because it is no longer there and therefore seems "broken"?

Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

florian

Administrator

Re: cwsoft addon file editor - missing menu bar

I think, the search extension would be useful. Hitting Strg-F (the search function of the actual browser) just searches in the visible area of the code. E.g. if you have a huge template or CSS file, and you're looking for "foo", but "foo" is in a line out of focus, you won't find it with the browser search.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

OK Florian,
will have a look soon.

#fullscreen mode switch cross browser
#search

Christian

Last edited by stefanek (05.02.2024 18:35:19)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

losttrip

Member

Re: cwsoft addon file editor - missing menu bar

Yes, it was the search and REPLACE functionality that was really useful.

Replace All  - Made it possible to make mass changes easily (e.g., changing colour schemes)

Thanks for your prompt replies.

Last edited by losttrip (05.02.2024 18:43:05)

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

OK, thanks.

#fullscreen mode switch cross browser
#search and replace, replace all

Will have a look asap, but can take a few days as I'm up to my eyeballs with work. But we will get there.

Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

losttrip

Member

Re: cwsoft addon file editor - missing menu bar

First, I just want to stress that my post was not intended as negative feedback in any way.  As you mentioned, I thought I might have done something to break the editor.  Also, please don't feel there is any pressure from me to hurry toward a solution.  As far as I am concerned, this change must have been made for the good of many... so I will happily find workflows to aid me through the transition.

Thanks for your time and consideration.

I'm sure you don't need help, but I did find this, which seems pretty elegant:
repo: https://github.com/kofifus/CodeMirrorSearch
demo: http://plnkr.co/edit/LEEZf2Vt9U6PASRGpsrt

Keeps the default editor clean, as it only appears by ctrl-f, and then has all search and replace functionality. *just realized this code is from eight years ago... whoops!

Like I said, I'm sure you will find the most suitable option.

Last edited by losttrip (05.02.2024 20:41:44)

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

All good. I thought you were just thinking "wtf just broke".

There is sometimes too little feedback maybe because people think it's offensive when they utter something. But I am genuinely interested in making software others can actually use. So a feedback loop is necessary, as it is not given one person alone will use a software in all scenarios.
In the case of CodeMirror I only so far have used it with Droplets and OutputFilter where the code is rather short and I was not reliant on the search function (which explaines why it didn't bother me).
That said, all is good and I will look into it as soon as I am up for breath 

Thanks for the links. Even the old ones. The CodeMirror page has also plenty of examples of different implementations.

Best regards,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

Thanks for your time and consideration.

I'm sure you don't need help, but I did find this, which seems pretty elegant:
repo: https://github.com/kofifus/CodeMirrorSearch
demo: http://plnkr.co/edit/LEEZf2Vt9U6PASRGpsrt

I actually could need some help, especially with decision making in this regard.
The above example does not work for me. Neither in Chrome nor in Firefox.

However, this one does, straight from the CodeMirror page:
https://codemirror.net/2/demo/search.html

But the handling is not as convenient as it could be:

Start searching: Ctrl-F / Cmd-F
Find next:       Ctrl-G / Cmd-G
Find previous:   Shift-Ctrl-G / Shift-Cmd-G
Replace:         Shift-Ctrl-F / Cmd-Option-F
Replace all:     Shift-Ctrl-R / Shift-Cmd-Option-F

It is working and can be actually helpful if there is no way to make file changes using an IDE and FTP. Especially if you quickly need to make minute changes on the fly.

I am wondering where to put the instructions.
@Florian, what would you suggest?

I could put them into the CodeMirror Configurator (AdminTool) or also create a Help file that could be placed next to the CodeMirror instance and open in a new window when clicked on. This would be present/visible out-of-the-box but could be disabled from being shown in the CodeMirror Configurator.

Best regards,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

#fullscreen mode using [F11] works for me with Chrome and Firefox. Are any browsers not working in fullscreen mode with CodeMirror?

Note: you need to place the cursor inside the CodeMirror instance for the [F11] to trigger the instance to go fullscreen instead of the browser window itself.

Christian

Last edited by stefanek (17.02.2024 00:53:25)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

florian

Administrator

Re: cwsoft addon file editor - missing menu bar

The demo mentioned does not work for me neither, it throws a bunch of JS errors.
@losttrip - this nice search bar

belongs to the "plunker" editor, not to Codemirror

CodeMirror's own search is better than nothing.
The replace functionality is unfortunately useless for people who are not familiar with regular expressions (for example me and probably 95% of the common WBCE users).

The fullscreen editor works in Firefox, Waterfox and Palemoon Chrome and Edge. It does not work on Opera. Tested with Win 11.

It's really a pity. Editarea had this features, but shows severe issues with modern browsers. ACE is oversized. All other source code editors are dead too and/or lack of functionality.

So in conclusio I would suggest to add the working Codemirror search nevertheless, but I'm afraid that on long-term we need a replacement for CodeMirror 5 (?) as well as for CKEditor 4.

Last edited by florian (17.02.2024 07:44:03)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

Yes, I agree.
While CodeMirror is a lightweight compared to other tools it lacks some features.

Editarea was actually not bad while it was compatible with browsers.

For the CodeMirror search/replace you don't really need to use regular expressions. But still it's a nightmare for real code editing.
It's good for Droplets and rather smaller instances. Not that great for whole files.

There is another tool on the horizon, the Monaco Editor:
https://microsoft.github.io/monaco-editor/

It's all you could possibly need in an online editor -- for example: try search/replace in the demo I linked. On the downside: it's huge. Comparable with Ace.

My suggestion would be the following:
- Let's keep the WBCE code editor as small as possible.
- And then, let's see that we ship a bigger, convenient code editor with the AFE, as an addon.

It may be possible to replace the CodeMirror with the editor shipped with AFE when it's installed. I would look into it while I am at it.

I can not do it immediately, however, as I am concerned with other aspects of the CMS at the moment.

Also, the replacement of the HTML/WYSIWYG editor takes precedence in importance and priority (imo, and I think I'm not alone in this estimate).

Best regards,
Christian

P.S. I will implement the search/replace to CodeMirror first in the next couple of days.

Edit: I think for the "big" editor shipped with the AFE I would go with ACE rather than Monaco. It's still in active development and well documented.

Last edited by stefanek (17.02.2024 12:35:45)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

losttrip

Member

Re: cwsoft addon file editor - missing menu bar

I trust that whatever decisions are made, the whole WBCE communty's best interests will be at the heart.  I fully understand that this "search and replace" functionality is not a major priority.

That said, has codemirror 6 been considered?  https://codemirror.net/

It has more elegant find and replace functionality:

Last edited by losttrip (17.02.2024 15:23:09)

losttrip

Member

Re: cwsoft addon file editor - missing menu bar

Is there a "better" way to make the codemirror vertical scrollbar wider?  When doing a lot of editing on longer files, it quickly becomes frustrating to mouse click this minimized scrollbar.

I looked at the css and the width is set to 6px.  I can increase that, but then I run into cases where the scrollbar overlaps content in the editor window (especially at narrow screen browser widths).

[== CSS ==]
.CodeMirror-overlayscroll-vertical {
  right: 0;
  top: 0;
  width: 6px;

I believe the default width of the "hidden" scrollbar is around 14px.  So, if I increase the .CodeMirror-overlayscroll-vertical width to 14px, I then also need to add padding-right to the editor window, to prevent this overlap:

[== CSS ==]
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
    background-color: white;
  padding-right: 14px;
}

Last edited by losttrip (17.02.2024 17:05:09)

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

Hello LT,

I just looked into the implementation possibilities of Ace editor and I think this is a much better option. For you and for the whole community.
This will be an AFE Addon only implementation (for now).
I will make it available by tomorrow and you can test it.

How does it sound?

Best regards,
Christian

Last edited by stefanek (17.02.2024 17:26:11)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

losttrip

Member

Re: cwsoft addon file editor - missing menu bar

Just got back from a nice long, head clearing ice skate.

I am happy to test something, if you think it will help.  I have little hands-on experience with the options for text editors.  I've just been searching around and trying to educate myself a bit since this thread sparked this conversation.  I had assumed codemirror was chosen for specific reasons, which is why I asked if codemirror 6 had been considered.  What are the advantages of Ace Editor over something like codemirror 6?  Not debating, just curious.

As I mentioned, there is no rush from me for any kind of action on this.

stefanek

Developer

Re: cwsoft addon file editor - missing menu bar

To be honest I just wanted to test something new and while I was looking at the different currently available code editors I saw that Ace is rather straight forward in its implementation.
CodeMirror 6 may be very well good, too, but I don't see much info.
At the other hand Ace has not only all the info and documentation but also the development seems very active -- and a lot of usage.

Most importantly, it seems stable. The way it behaves and works seems more reliable than CodeMirror. But that remains to be verified in praxis.

I have it running now and will upload in the next hour.
I stripped it to the bare minimum of approx 1.2 MB. Just two themes (day and night) for bright and dark mode.
We can add more features later, if needed.

As I mentioned, there is no rush from me for any kind of action on this.

Yes, I just had this small window of time at my hands yesterday and splurged it right into it.

Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale