WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 05.02.2024 18:01:25

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

597d60b6f251c6dbaf949edb08bac123.png

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:
0e4c8c74aa0d7987ca840076f932c17f.png

Thank you for any guidance you can offer.

Offline

#2 05.02.2024 18:11:01

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

Online

#3 05.02.2024 18:11:16

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#4 05.02.2024 18:25:11

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

Online

#5 05.02.2024 18:28:05

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#6 05.02.2024 18:33:52

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

Online

#7 05.02.2024 18:36:13

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)

Offline

Liked by:

stefanek

#8 05.02.2024 19:57:43

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

Online

#9 05.02.2024 20:38:31

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)

Offline

#10 06.02.2024 00:29:17

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  smile

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

Online

#11 16.02.2024 22:42:55

stefanek
Developer

Re: cwsoft addon file editor - missing menu bar

losttrip wrote:

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

Online

#12 16.02.2024 22:46:41

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

Online

#13 17.02.2024 07:43:37

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
attachment.php?item=3522&download=1
belongs to the "plunker" editor, not to Codemirror sad

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)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#14 17.02.2024 12:28:33

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

Online

#15 17.02.2024 15:21:05

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:
0bf2b5a85073e914f64bedd2cdd818a7.png

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

Offline

#16 17.02.2024 17:04:22

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)

Offline

#17 17.02.2024 17:25:42

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

Online

Liked by:

florian

#18 17.02.2024 21:32:59

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.

Offline

Liked by:

stefanek

#19 18.02.2024 12:39:46

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.

losttrip wrote:

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

Online

Liked by:

losttrip

#20 18.02.2024 14:39:09

stefanek
Developer

Re: cwsoft addon file editor - missing menu bar

Hello LT,

so, here we go.

It's not only the Ace implementation.
Over the months I have included some features that will make the work with AFE more convenient.
One feature is: if you edit a file and save&return to the overview the window will scroll to the file you just edited and will show a green background for a few seconds.
There are more minor improvements and changes.

But let us first see if this Ace implementation is any good to begin with.

The mode (day or night) and the font and font-size come from the settings in the CodeMirror Configurator AdminTool.
Note: there are only wbce-day and wbce-night currently available with Ace/AFE. This means if you select any dark mode in the CodeMirror Configurator AdminTool wbce-night will be used. The same goes for any bright mode, in this case wbce-day will be used.

Please test it and let me know what impressions you get.

Of course all testers and feedback, as always, welcome.

Christian

Dowloan removed. Newer version down the thread.

Last edited by stefanek (21.02.2024 19:23:38)


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

Online

Liked by:

losttrip

#21 18.02.2024 20:54:40

losttrip
Member

Re: cwsoft addon file editor - missing menu bar

Hi Christian,

Your commitment is commendable, thank you.  I trust your sound thinking and judgement on which editor is best to try.

I have installed and tested a little.  First impression is, it's perfect!  I am a little at a loss for more descriptive words, because although there is obviously a lot of behind the scenes work done by you, the end result it... it just seems like a working text editor to a humble user like myself.  Hope that makes sense.

I will throw out some more feedback, if that's okay, as I continue using it in practice.  Nothing I say will ever be meant as negative, just comments from a user.



Feedback:

1. I think the "green background" highlighting feature will be really helpful.  Great addition!

2. I notice when I go into fullscreen (F11) mode, the editor does not completely fill the screen.  This doesn't bother me in the least, just wanted to point it out.  You can see the admin window along the right side:
24f6a754d99e8cd04faea17efe808c99.png

I checked the css and it looks like the id="code_area" has more specificity than the ACE class .fullscreen 100% width.

in backend.css

#mod_addon_file_editor .code_area {
  width: 98%;
}

which overrules the width in inline.css

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 98vh !important;
  z-index: 9999;
}
<div id="code_area" class="code_area ace_editor ace-wbce-day fullscreen" style="font-size: 14px; font-family: Proggy; height: 60vh;">

3. Undo (ctrl-z) ultimately deletes all code.  Not sure if this is how ACE is built, but if you open a file and click ctrl-z, all code is deleted from the editor.  Redo (ctrl-y) does bring it back, but it was a bit of a shock staring at a blank screen.  I'm used to ctrl-z in sequence taking me back step by step through my changes until I arrive at the initial state of the code.  But, now, if I make three subsequent code changes, then click ctrl-z three times, I arrive back to the initial state... but if I click ctrl-z one more time - the code window is cleared.

4. The Search and replace is perfect.  Hopefully users will know how to find it (ctrl-f) and get the most out of it.  The Automatic indent and outdent is awesome.  Thank you!

5. The "HotPink" colour for the file paths caught me off guard.  I had a flashback to coming home to find my significant other had painted a bathroom in our brand new home that exact colour.  Surprise!
cf88c1b02d379dd8fd840c2a9034096a.png

6. Is the "Line wrapping" setting something that could be included in the CodeMirror Configurator AdminTool?  I think I prefer the default no-wrap, but I can imagine there may be times where switching to wrap would come in handy.

I'll leave it at that for now.  Ultimately, I want to thank you for your efforts to truly improve this already fantastic CMS.

Tomorrow is Family Day here in Canada.  I wish you and everyone here a wonderful day of quality time with family.

Last edited by losttrip (18.02.2024 20:58:27)

Offline

Liked by:

stefanek, florian

#22 18.02.2024 21:29:47

stefanek
Developer

Re: cwsoft addon file editor - missing menu bar

Hello LT, thank you for the appreciative words.

I will look into the issues you mentioned tomorrow.
The full-screen mode is a simple solution I wrote myself because the internal solution from Ace would need many more files (something that really made no sense to me, so I wrote a few lines of JS to do the same -- but this needs some more tweaking).
The CTRL+Z... I will look into it. It should actually behave as you describe, so possibly a bug. To be honest I missed it so will have to take a look.

The HotPink... haha... yeah... it's a bit extatic. I will change it to another color. One that doesn not draw so much attention (or takes you on a time travel lol ).
It was important to me to have the path to the addon as previously there was only the Name of the addon which is often times very different to the name of the directory.

More soon.

Enjoy your family time and greetings to Canada.

Christian


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

Online

Liked by:

losttrip, florian

#23 19.02.2024 00:13:23

florian
Administrator

Re: cwsoft addon file editor - missing menu bar

Looks very good. Thank you very much.
I was a bit puzzled to find the module under its "new old name" AFE instead of cwsoft-afe, but well, yes, since cwsoft unfortunately has left the community long time ago and you adapted a lot of changes, renaming the module is legit. The module description (german) has to be changed accordingly though.

I can confirm the fullscreen appearance, but imho it's no issue when some parts of the main screen "behind" keep visible.
Only a remark, the fullscreen mode does not work with Opera, which seems merely to be an Opera issue, see https://stackoverflow.com/a/17128342

The CTRL-Z behaviour is indeed a little bit dangerous, but not uncommon. if you hit the CTRL-Z too often/too long the window becomes blank. It's like you have pasted code into a local editor (like Notepad++) from the clipboard, if you go back to far the code disappears there too - idk if there's really a way to stop that behavoiur in ACE.

One question:
Maybe it's possible to remove the thin grey line at pos. 80?
attachment.php?item=3525&download=1

Beside of this, e.g. this has nothing to do with the ACE implementation:
There seems to be planned (?) to integrate an external / API based editor for images (pixlr), but this does not work yet. Hitting the edit button besides of images leads to a 404 on an URL like this:

http://example.com/modules/cwsoft-addon-file-editor/code/action_handler.phphttp://www.pixlr.com/editor/?image=http://example.com/templates/mytemplate/clouds.jpg&title=clouds.pixlr.jpg&method=GET&loc=de&exit=http://dev4.wbce-cms.eu/0702&referrer=http://example.com&target=http%3A%2F%2Fexample.com%2F0702%2Fmodules%2Fcwsoft-addon-file-editor%2Fcode%2Fget_pixlr_image.php%3Fimg_path%3D%2Ftemplates%mytemplate%2Fclouds.jpg

Last edited by florian (19.02.2024 00:15:07)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#24 19.02.2024 00:52:33

stefanek
Developer

Re: cwsoft addon file editor - missing menu bar

Thanks Florian.

With regards to the name, I only changed the display name of the Tool in the  AdminTools overview. The directory name remains as is and of course this is not meant as any form of disrespect. It is actually listed in the repository just the same way https://addons.wbce.org/pages/addons.ph … em&item=28 (except for the brackets, I used [AFE] not (AFE)).
We almost always call it colloquially as simply AFE, which stands for Addon File Editor. We can of course start to call it CAFÈ lol .

Regarding the www.pixlr.com image handler. I am not privy to that so much. I know it worked at some point in time when Doc implemented it, but I haven't used it (only some experimentation when it was first implemented). I have not looked into it any further and why it is disabled (EDIT: or was it me who disabled it ???). I can look into it at some later time if it is really something that's needed.


Florian wrote:

Maybe it's possible to remove the thin grey line at pos. 80?

I am sure it can be done via CSS. It's hardcoded in the javascript files, theme-wbce-day.js and -wbce-night.js, respectively.
We can also include other themes from the package. I just don't know which of those they provide would be prefered and I am not happy with including all of them. Therefore I adjusted 2 themes to make them look similar to the wbce-day and wbce-night ones I did for CodeMirror (since no one complained ;-))

The CTRL+Z issue,
I will look into it. It's possible that I can handle it; I have a suspicion why it happens. But I will need to have a look.


How do you people like the other new features?
The coming back after saving to the file you have been working on?

It's now also possible to edit code of SVG files. Before it was only shown in the browser when clicked on. Now both options are available.

Best regards,
Christian

Last edited by stefanek (19.02.2024 00:53:57)


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

Online

#25 19.02.2024 05:44:16

losttrip
Member

Re: cwsoft addon file editor - missing menu bar

There are reports of this crtl-z issue on google, and suggested solutions, but they seem to be from a few years ago.

The conversations seem to center around the Ace undo manager settings and also:

editor.session.setValue("the new text here"); // set value and reset undo history

Offline

Liked by:

stefanek

Board footer

up