Skip to content

Instantly share code, notes, and snippets.

@njx

njx/cm-wordwrap-issue.html

Created April 1, 2014 00:00
Show Gist options
  • Save njx/9905035 to your computer and use it in GitHub Desktop.
Save njx/9905035 to your computer and use it in GitHub Desktop.
Download ZIP
Nested CodeMirror wordwrap issue
Raw
cm-wordwrap-issue.html
<!doctype html>
<html>
<head>
<title>CodeMirror line widget / wordwrap issue</title>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<style type="text/css">
.CodeMirror {
margin: 0;
border: 0;
width: 100%;
}
.CodeMirror .CodeMirror {
height: auto;
width: 100%;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="code"></div>
<script>
// Set up the outer CodeMirror instance
var content = "here's some content\nand more content\n";
var hostEditor = CodeMirror(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true,
mode: "html",
value: content
});
// Add a line widget containing a nested CodeMirror instance
var inlineContent = ".rule1 {\n" +
" display: none;\n" +
"}\n" +
"\n" +
".rule2 {\n" +
" font-family: \"Trebuchet MS\", Arial, Helvetica, sans-serif;\n" +
" color: #000;\n" +
" background: #fbfbfb;\n" +
" display: none;\n" +
"}\n";
var container = document.createElement("div");
var inlineEditor = CodeMirror(container, {
lineNumbers: true,
lineWrapping: true,
mode: "html",
value: inlineContent
});
var lineWidget = hostEditor.addLineWidget(0, container, {
coverGutter: true
});
inlineEditor.refresh();
// Set it so that the widget height updates as the nested instance's height changes
function updateWidgetHeight() {
container.style.height = inlineEditor.getWrapperElement().clientHeight + "px";
lineWidget.changed();
}
updateWidgetHeight();
window.addEventListener("resize", updateWidgetHeight);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment