Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Adding markers while composing text #1382

Closed
wants to merge 1 commit into from

2 participants

@mutahhir

This is my first pull request here, so please bear with me.

In Mac OSX, during composing IME characters, there is a visual marker that is shown for the character / series of characters that will be affected by further input.

The submitted code enables this feature, however uses composition events to make this work.

Please find attached below an image of how this looks like currently:

Screen Shot 2013-03-20 at 5 26 06 PM

Please let me know if there are further improvements required, or whether there's a better way to add the markers. I'm unfortunately a little new with the CodeMirror codebase.

Thanks
Mutahhir

@marijnh
Owner

On Chrome Linux, every update to the input is preceded by first a compositionstart and then a compositionend event, which causes the start to be reset incorrectly. On Firefox Linux, no composition events appear to be fired at all. Which browser did you test on?

@mutahhir
@mutahhir mutahhir closed this
@marijnh
Owner

Having something like this would be great. But I don't currently have the time to investigate the various quirks these events have on all the different platforms, and your patch, as it is, is bound to break things.

@mutahhir

@marijnh I completely understand. I developed it particularly for mac safari / chrome, so there are bound to be a lot of inconsistencies. Eventually I'll have to support other platforms and will post back a better way. Thanks again for a great editor!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 20, 2013
  1. @mutahhir
This page is out of date. Refresh to see the latest.
Showing with 38 additions and 0 deletions.
  1. +4 −0 lib/codemirror.css
  2. +34 −0 lib/codemirror.js
View
4 lib/codemirror.css
@@ -226,6 +226,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-composing {
+ border-bottom: 3px solid black;
+}
+
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
View
34 lib/codemirror.js
@@ -1375,6 +1375,7 @@ window.CodeMirror = (function() {
if (!changed && !missed) {missed = true; cm.display.poll.set(60, p);}
else {cm.display.pollingFast = false; slowPoll(cm);}
}
+ if (cm.state.composing) p();
cm.display.poll.set(20, p);
}
@@ -1405,6 +1406,7 @@ window.CodeMirror = (function() {
from = Pos(from.line, from.ch - (prevInput.length - same));
else if (cm.state.overwrite && posEq(from, to) && !cm.state.pasteIncoming)
to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + (text.length - same)));
+
var updateInput = cm.curOp.updateInput;
makeChange(cm.doc, {from: from, to: to, text: splitLines(text.slice(same)),
origin: cm.state.pasteIncoming ? "paste" : "+input"}, "end");
@@ -1414,6 +1416,15 @@ window.CodeMirror = (function() {
else cm.display.prevInput = text;
if (withOp) endOperation(cm);
cm.state.pasteIncoming = false;
+
+ if (cm.state.composing) {
+ if (!cm.state.lastComposeMark) {
+ cm.state.lastComposeMark = cm.doc.markText(cm.state.composeStart, {line: cm.state.composeStart.line, ch: cm.state.composeStart.ch + cm.state.lastCompositionEventData.length}, {className: 'CodeMirror-composing'});
+ } else {
+ cm.state.lastComposeMark.clear();
+ cm.state.lastComposeMark = cm.doc.markText(cm.state.composeStart, {line: cm.state.composeStart.line, ch: cm.state.composeStart.ch + cm.state.lastCompositionEventData.length}, {className: 'CodeMirror-composing'});
+ }
+ }
return true;
}
@@ -1502,6 +1513,9 @@ window.CodeMirror = (function() {
on(d.input, "keypress", operation(cm, onKeyPress));
on(d.input, "focus", bind(onFocus, cm));
on(d.input, "blur", bind(onBlur, cm));
+ on(d.input, "compositionstart", function(e) { onCompositionEvent(cm, e); });
+ on(d.input, "compositionupdate", function(e) { onCompositionEvent(cm, e); });
+ on(d.input, "compositionend", function(e) { onCompositionEvent(cm, e); });
function drag_(e) {
if (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))) return;
@@ -2030,6 +2044,26 @@ window.CodeMirror = (function() {
clearInterval(cm.display.blinker);
setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
}
+ function onCompositionEvent(cm, e) {
+ switch(e.type) {
+ case "compositionstart":
+ cm.state.composing = true;
+ cm.state.composeStart = cm.getCursor();
+ break;
+ case "compositionupdate":
+ cm.state.lastCompositionEventData = e.data;
+ fastPoll(cm);
+ break;
+ case "compositionend":
+ cm.state.composing = false;
+ if (cm.state.lastComposeMark) {
+ cm.state.lastComposeMark.clear();
+ cm.state.lastComposeMark = null;
+ }
+ cm.state.composeStart = null;
+ break;
+ }
+ }
var detectingSelectAll;
function onContextMenu(cm, e) {
Something went wrong with that request. Please try again.