RaymondLim/InlineWidget.html

## InlineWidget.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" +
                ".rule3 {\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>
	<!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" +
	".rule3 {\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>