Giter Site home page Giter Site logo

Retrieve latest input about markupeditor HOT 2 CLOSED

kaimatachi avatar kaimatachi commented on July 25, 2024
Retrieve latest input

from markupeditor.

Comments (2)

stevengharris avatar stevengharris commented on July 25, 2024

I have tried to avoid keystrokes being tied to getHtml(), altho the demo does this to show the HTML updating as you edit. Clearly it works reasonably well if your HTML size is limited, but it is definitely overkill in the general case. If I were going to implement this, I think I would do something like I did for the "search mode", where there is a flag set/unset on the JavaScript side (like reportInputActive or something) that can be filtered-for in the keydown event listener. This listener falls thru and should be lightweight except for special keys like Enter, Delete, arrows, etc. Here's where I check on the search mode when the ev.key is Enter:

MU.editor.addEventListener('keydown', function(ev) {
    let sib;
    const key = ev.key;
    switch (key) {
        case 'Enter':
            // Seems super easy to get repeat Enter events, which I am declaring to
            // be non-useful to avoid expensive processing in lists, etc.
            if (ev.repeat) {
                ev.preventDefault();
                return;
            }
            const sel = document.getSelection()
            const selNode = (sel) ? sel.anchorNode : null;
            if (!selNode) { return };
            if (searcher.isActive) {
                ev.preventDefault();
                if (_keyModified('Shift', 'Enter')) {
                    searcher.searchBackward();
                } else {
                    searcher.searchForward();
                }
                return;
            };
...

Then you can keep a buffer like inputBuffer of the input while reportInputActive is true. In the cases for ev.key, you could activate and inactivate (just typing here, not compiling ;-))...

case '@':
    reportInputActive = true;
    inputBuffer = '';
    break;
case ' ':
    if (reportInputActive) { reportInputActive = false };
    break;

and in the fall-thru case at the end you can report the inputBuffer back to the Swift side at each keystroke when reportInputActive is true, something like:

if (reportInputActive) {
    inputBuffer += ev.key;
    _callback(JSON.stringify({'messageType' : 'reportedInput', 'buffer' : inputBuffer }));
}

This would require a new case on the Swift side in MarkupCoordinator.receivedMessageData(_:) to handle the reportedInput message type and trigger whatever user interaction you want. You might also want new callbacks to MarkupDelegate to inform you of when the mode has been turned off and on. So, for example, the new cases above for @ and space could do _callback('markupActivateInputReport') and _callback('markupdeactivateInputReport') that would need to be handled in MarkupCoordinator.userContentController(_:didReceive:) and then make the new calls to markupDelegate.

FWIW I recently noticed the fall-thru case I have for keydown to always cancel the search mode:

    // Always cancel search if we fall thru
    searcher.cancel()

is causing a callback on every keystroke that I'd like to avoid, so I may be doing something about that issue fairly soon.

from markupeditor.

kaimatachi avatar kaimatachi commented on July 25, 2024

Thanks a lot for your quick and detailed answer !
It seems to do exactly what I ask. I'll try this.

from markupeditor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.