Comments (2)
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.
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)
- Customizing Buttons HOT 1
- Toolbar justification HOT 4
- Possible strange interaction with other WKWebViews HOT 3
- Pasting trouble HOT 37
- Can't track changes in text editor HOT 3
- Two toolbars...but only once HOT 11
- Pasting html text sometimes gets truncated HOT 3
- Weird HTML tags not removing properly HOT 1
- Toolbar on iPhone that is set to keyboard location but also to persist at the bottom / top when keyboard dismisses HOT 3
- Pasting URLs doesn't work
- Support Custom CSS and File-Base User Scripts
- Support strict concurrency in anticipation of Swift 6
- The styling('Bold', 'cursive') is reset with each new line.(After enter is pressed) HOT 1
- Trouble placing an image at the top of the editor HOT 14
- Add parameter in getHtml function to remove css classes HOT 2
- Question on why top tag is removed at paste time HOT 6
- Typo/missing brackets from addEventListener 'selectionchange' HOT 1
- Not able to limit the number of characters in the editor. HOT 2
- Table navigation with Enter
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from markupeditor.