::mark(…) feature is comming

Please consider these tasks:

  1. Find all words in text on HTML page and highlight them
  2. Syntax highlighting: parse text of <pre> and mark all keywords by changing their color
  3. Find all misspelled words in <textarea> highlight them specifically.

Currently you can do #1 and #2 by wrapping each text found into <span>s with specific classes – thus to modify DOM structure of the document. Such modification by itself is a) not trivial to implement, b) is highly non-desirable (consider text editor with syntax highlighting) and c) even impossible in case of <textarea> for example.

Ideally we should have some facility that will allow us to a) mark text fragments, b) apply styling to such marked runs through CSS and c) do that without DOM tree modifications.

As a result upcoming Sciter will have:

  1. In CSS, support of ::mark(...name[s]...) pseudo element.
  2. In script runtime, new methods of Selection class:
    • Selection.applyMark(start,end, ... mark names...); – to add marks to the range.
    • Selection.clearMark(start,end, ... mark names...); – to clear marks from the range.

Example, CSS:

div::mark(hilite) { background-color:lime; } 
div::mark(hilite2) { background-color:cyan; }
div::mark(literal,string) { font-style:italic; color: red; }

First rule will tell the engine to set background color on all text runs that are marked by “hilite” to “lime”.

And script code

      var text = $(div).firstNode;
      var start = [bookmark: text, 6, false];
      var end   = [bookmark: text, 11, false];
      Selection.applyMark(start,end,"hilite");

will apply mark “hilite” to the text node from 6th until 11th position and so you will have the following rendering:
marks in text nodes
Note: this will not change DOM structure but rather apply some meta information to characters in the text.

New DOM/script inspector is coming

Sciter’s is getting new Inspector tool.

inspector on mac osx
inspector on mac osx
inspector on linux
inspector on linux

New Inspector is a standalone executable that communicates with the inspectable Sciter window (view) over TCP/IP using DataSockets.
There are few reasons behind such architecture:

  1. Mac OSX and GTK (or QT) do not really support multiple GUI threads in the same GUI process. Inspector UI must be run independently
    from the inspectable.
  2. There is a need to support remote debugging mode. Especially when Sciter runs in kiosk mode spanning whole desktop space.
  3. UI Automation Testing, and UI of testing tool in particular, has to work out of inspectable application.

Each Sciter application that wants to be inspectable shall allow connection with the Inspector explicitly by calling SciterSetOption(hwnd | NULL, SCITER_SET_DEBUG_MODE, TRUE); before loading HTML into Sciter’s window. In response Sciter engine injects so called inspector peer script into the view. Inspector peer script is a small script block that establish event handlers and interceptors (e.g. stdout/stderr proxies). The script adds the following method

  function view.connectToInspector(rootEl = null, inspectorHostIP = null); 

to the view instance and registers CTRL+SHIFT+I (connect to inspector) and CTRL+SHIFT+Click (select DOM element for the inspection).
CTRL+SHIFT+I is used to connect with the inspector when it runs on the same machine.

The same Inspector instance can serve multiple windows/views, even from different processes or GUI threads.

BlockNote on KickStarter

blocknote2

I have started BlockNote campaign on Kickstarter

That is about funding of BlockNote2 development: WYSIWYG HTML editor for the rest of us that will work on Windows, Mac and Linux.

BlockNote editor was free last 10 years and if you have found it handy please donate if you can. Each river starts from a small stream.

As a part of this campaign I am also offering discounts (up to 50%) for Sciter license and source code access. And yet advertisement spots on BlockNote front page. Note: that space and number of offerings is limited.