search

c-smile / sciter-js-sdk

Sciter.JS - Sciter but with QuickJS on board instead of my TIScript
BSD 3-Clause "New" or "Revised" License
1.64k stars 97 forks source link

Doesn't work with CodeMirror #48

Closed differentprogramming closed 3 years ago

differentprogramming commented 3 years ago

I tried it with the CodeMirror javascript library for code editors, and it doesn't work. You can search github for that project, there's CodeMirror and CodeMirror.next.

In other browsers that editor even works from files without needing a web server.

Sometimes you can see an editor pane draw for a fraction of a second before disappearing.

After reading someone with a problem displaying a page, I tried the HTMLX sample on CodeMirror.

That takes it from: no editor appears to: Editor appears. Text coloring doesn't work. Layout is totally wrong, it seems to be missing CSS. Arabic text (from a mixed direction test) - the chunks are in the wrong order visually and the cursor moves in the wrong direction. Radio buttons aren't working.

I only tested a couple files.

I tried making the javascript and css inline and it was worse. Maybe I need to take all of those out.

c-smile commented 3 years ago

Sciter is not a browser. So don't expect it to run any imaginable web page or library.

If a library designed to be run only in browser it will run only in browser. And so you will need full scale browser for it, 100mb at least instead of 5mb of Sciter.

But I am sure that pretty much any modern library can be ported to run in Sciter.JS.

Main design goal of Sciter not to be a browser but an embeddable engine to run UI of desktop applications - so, again, not any page from the wild but concrete set of pages and modules.

And if you just need source code editor with syntax highlighting then check built-in (native) one: https://github.com/c-smile/sciter-js-sdk/blob/main/samples.sciter/editor-plaintext/sciter-resources.htm

differentprogramming commented 3 years ago

Your example makes code look very good, but for some reason it's not making the display area editable on my system. It shows the text, I can select it, but I can't edit it.

The richtext editor example is working well though.

I realize what this is, I was thinking of it as a low-resources substitute for Electron.

I was hoping that I could use it both as the basis for a light weight IDE for a custom language and for that language's way of displaying gui elements.

Any idea why the screen layout for those test pages didn't work at all?

sciter-js does seem to be able to understand css and javacript very well when it works and not at all when it doesn't. What's missing?

c-smile commented 3 years ago

but for some reason it's not making the display area editable on my system

That's because readonly attribute here <plaintext type="text/css" readonly />.

Syntax highlighting is done by colorizer component. It's full source code is here and editor integration example is: Check: sdk.js/samples.sciter/colorizer/test-editor.htm

Any idea why the screen layout for those test pages didn't work at all?

It depends what they use for layout. Sciter for example does not support display:flex, it has flex units instead: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm

differentprogramming commented 3 years ago

Flex isn't the reason. Nowhere in any of the CSS used is flex.

c-smile commented 3 years ago

It also may want to use some specific DOM methods in JS that are not implemented yet. Makes sense to check what it shows in inspector.exe.

Other than that I have no idea and I do not have requests for CodeMirror compatibility.
Most of customers that need editor with syntax highlighting are pretty satisfied with that built-in <plaintext>

differentprogramming commented 3 years ago

I'm new to using web technology to create apps. That does seem to be the way it's done now. I was a programmer for decades before all this.

I just made a sample Electron project - the node libraries and web frameworks are amazingly powerful - but even a small app gets packaged up as a 70 megabyte self-extracting zip.

c-smile commented 3 years ago

That does seem to be the way it's done now.

Not the only way, but most of UI ideas are coming from the web these days, yes.

Just treat Sciter as, let's say, Flutter, that instead of Dart and its esoteric UI model, uses HTML/CSS/JS.

While HTML, its DOM and JS are standard as they could be, but CSS is historically different in Sciter.JS. Sciter is 14 years old and flexes (for example) appeared in it long before display:flex feature in browsers. And HTML/CSS in Sciter was specifically targeted to desktop UI cases.

Expect pure JS libraries to work as they are in Sciter.JS. But libraries that rely heavily on browser/tab environment may need porting, which is anyway better than recreating them in Dart for Flutter from scratch.

And note that Sciter has many features built-in - implemented natively ( example ) - check first what is available in it out of box.

differentprogramming commented 3 years ago

I just used a library, Bulma, that's pure CSS. You might find that implementing the rest of CSS will be good for your product if it means that people can just use whatever they're already doing inside it.

Though I realize that the test project I just made used some of the really incredible things built into Chromium and Electron.

Chromium has video encoding built in! Electron has a built in api for streaming an uncompressed video feed for recording any window or monitor. I have no idea why that would be built in, but it's there! The number of features in Chromium is mind blowing.