Markdown Previewer inconsistencies

Markdown Previewer inconsistencies
0

#1

Tell us what’s happening:
Well, there are some inconsistencies in my code depending where is hosted.
In Codepen looks like this. Editor and Preview(headlines) are not the same on my localhost nor in gitpages. Code is exactly the same, only difference is imports in local and git version.
Here is image of my local version:


ReadMe(of sorts): If you hover over Editor: , Previewer:, Erase button, Editor text, Preview text and that small stack at bottom you’ll see tooltips. stack at bottom also works as sort of “window blinders” like when you click reply in FCC, bottom window open whom you can resize upwards. When you resize it tooltip on that stack at bottom changes. Also if you doubleClick it (stack) it goes back to full height. Or you can “pull the blinders down” … DoubleClick on Editor: or Previewer: makes their respective “text element” go fullscreen. Basically everything is explained in tooltips.
EDIT: Resizing is done by jquery’s plugin “resizable”. For some unknown reason it doesn’t work in codepen.

Your code so far
Html:

<!DOCTYPE html>
<html>
<head>
<title>Markdown Previewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<link href='https://fonts.googleapis.com/css?family=Russo One' rel='stylesheet'>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body title="trt">

<div id="root"></div>

</body>
</html>

Css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

.btn1{
	position: absolute;
	bottom: -30px;
	left: 51.3%;
	z-index: 999;
	background-color: whitesmoke;
	border: 1px solid gray;
	color: aqua;
}

#root{
	width: 100%;
}

body, html {
	height: 100%;
}

body{
	background-color: whitesmoke;
	background-image: url("react1.png"), url("react2.png");
	background-repeat:no-repeat;
	background-size: auto;
	background-position:center bottom;
	overflow: hidden;
}

.grid-container {
	display: grid;
	grid-template-columns: 50% 50%;
	background-color: whitesmoke;
	padding: 10px;
	grid-gap: 10px;
	width: 100%;
	grid-template-rows: 30px 25px 98%;
}

.grid-item1, .grid-item2{
	text-align: center;
}

#inner2{
	border-bottom: 15px solid #d6e9c6;
	padding-bottom: 55px;	
	background-color: #fcf8e3;
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	min-height: 20%;
	max-height: 100%;
}

#editor{
	width: 100%;
	background-color: white;
	resize: none;
	color: #495057;
	border: 1px solid #ced4da;
    border-radius: .25rem;
	overflow-y: auto;
	max-height:100%;
	min-height: 40px;
	margin-bottom: 40px;
}

#preview{
	width: 98.9%;
	background-color: white;
	border-radius: .25rem;
	border: 1px solid #ced4da;
	overflow-y: auto;
	overflow-x: hidden;
	max-height:100%;
	min-height: 40px;
	margin-bottom: 40px;
}

label{
	font-family: 'Russo One';
	font-style: oblique;
	font-weight: bold;
	font-size: 2em;
	margin-bottom: 10px;
	padding-bottom: 0px;
	width: 100%;
	background-color: #fcf8e3;
	min-height: 50px;
}

.ui-resizable-s {
    cursor: row-resize;
}

textarea:focus, input:focus{
    outline: none;
}

#arrow{
	background-color: #dff0d8;
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: -12px;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 1.5em;
	border-bottom: 1px solid #d6e9c6;
	text-align: center;
}

.glyphicon{
	top: -4px;
	left: 4px;
	color: #d6e9c6;
	color: gray;
	-ms-transform: scale(1, 0.6); /* IE 9 */
    -webkit-transform: scale(1, 0.6); /* Safari */
    transform: scale(1, 0.6);
}

@media screen and (max-height: 600px) {
	#inner2{
		height: 90vh !important;
	}
}

#erase{
	text-align: center;
	grid-column: 1 / 3;
}

/*Additional styling*/

pre.box1{
	color: blue !important;
	width: 100%;
	display: inline;
	background: #d6e9c6;
    padding: 5px 0 5px 5px;
}

pre{
	background-color: #d6e9c6;
	overflow: hidden;
}

.box2{
	visibility: hidden;
}

.box3{
	font-weight: 600 !important;
	border-left: 2px solid #224B4B;
    color: #224B4B;
}

td, th{
	border: 2px solid #224B4B;
    padding-left: 5px;
    padding-right: 5px;
}

label:hover{
	cursor: pointer; 
}

.label{
	position : absolute; 
	top : 0px;
	left : 0px;
	min-width : 100%;
	z-index: 999;
}

.preview-editor{
	position : fixed;
	top : 40px;
	left : 0px;
	min-width : 100%;
	height : 100%;
	z-index: 999;
}

Js:

var placeholder = '# Welcome to my React Markdown Previewer!\n\n## This is a sub-heading...\n### And here\'s some other cool stuff:\n  \nHeres some code, `<div></div>`, between 2 backticks.\n\n```\n// this is multi-line code:\n\nfunction anotherExample(firstLine, lastLine) {\n  if (firstLine == \'```\' && lastLine == \'```\') {\n    return multiLineCode;\n  }\n}\n```\n  \nYou can also make text **bold**... whoa!\nOr _italic_.\nOr... wait for it... **_both!_**\nAnd feel free to go crazy ~~crossing stuff out~~.\n\nThere\'s also [links](https://www.freecodecamp.com), and\n> Block Quotes!\n\nAnd if you want to get really crazy, even tables:\n\nWild Header | Crazy Header | Another Header?\n------------ | ------------- | ------------- \nYour content can | be here, and it | can be here....\nAnd here. | Okay. | I think we get it.\n\n- And of course there are lists.\n  - Some are bulleted.\n     - With different indentation levels.\n        - That look like this.\n\n\n1. And there are numbererd lists too.\n1. Use just 1s if you want! \n1. But the list goes on...\n- Even if you use dashes or asterisks.\n* And last but not least, let\'s not forget embedded images:\n\n![React Logo w/ Text](https://goo.gl/Umyytc)\n';

var counter1 = 0;
var counter2 = 0;
class DisplayMessages extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			input: placeholder,
			messages: [placeholder],
			value: placeholder
		}
		this.handleChange = this.handleChange.bind(this);
		this.eraseIt = this.eraseIt.bind(this);
	}
	
	eraseIt(){
		counter2++;
		var editor = document.getElementById("editor");
		
		if(counter2===1){
				
			this.setState({
				messages: [],
			});
			
			editor.value="";
			document.getElementById("eraser").innerHTML = "Populate";
		}
		
		if(counter2===2){
			
			this.setState({
				messages: [placeholder],
			});
			
			editor.value = placeholder;
			document.getElementById("eraser").innerHTML = "Erase";
			counter2 = 0;
		}
		
	}
	
	componentDidMount() {
		var arrow = $("#arrow").offset().top;
		$("#inner2").resizable({
			handles: 's',
			minHeight: 170
		});
		
		$(document.links).filter(function() {
			return this.hostname != window.location.hostname;
		}).attr('target', '_blank');
		
		$( "code" ).wrapInner( "<pre class='box1'></pre>");
		$( "blockquote>p" ).prepend( "<span class='box2'>......</span><span class='box3'></span>");
		
		$(".grid-item1").on("click", function(){
			counter1 ++;
			
			if(counter1===1){
				$(".grid-item1").prop("title", "Click again to go back!");
				$(".grid-item1").addClass("label", {duration:800});
				$("#editor").addClass("preview-editor", {duration:800});
				$("#preview").hide(800);
			}
			
			if(counter1===2){
				$(".grid-item1").prop("title", "Click on me for fullscreen");
				$(".grid-item1").removeClass("label", {duration:800});
				$("#editor").removeClass("preview-editor", {duration:800});
				$("#preview").show(800);
				counter1 = 0;
			}
			
			
		});
		
		$(".grid-item2").on("click", function(){
			counter1 ++;
			
			if(counter1===1){
				$(".grid-item2").prop("title", "Click again to go back!");
				$(".grid-item2").addClass("label", {duration:800});
				$("#preview").addClass("preview-editor", {duration:800});
				$("#editor").hide(800);
			}
			if(counter1===2){
				$(".grid-item2").prop("title", "Click on me for fullscreen");
				$(".grid-item2").removeClass("label", {duration:800});
				$("#preview").removeClass("preview-editor", {duration:800});
				$("#editor").show(800);
				counter1 = 0;
			}
			
		});
		
		$("#inner2").dblclick(function(){
			$("#inner2").css("height", "100%");
		});
		
		
		
		$(window).resize(function(){
			if(arrow !== $("#arrow").offset().top){
				$(".ui-resizable-handle.ui-resizable-s").prop("title", "Double click on me or pull me down to full height");
			}
		});
		
	}
	
	handleChange(event){

		this.setState({
		
			messages: [event.target.value]
			
		});

	}	
	
	getMarkdownText() {
		var message = this.state.messages.join("");
		var rawMarkup = marked(message, {sanitize: true});
		
		return { __html: rawMarkup };
	}
	
	render(){

		return (
				
			<div className="grid-container" id="inner2">
			<label className="grid-item1" title="Click on me for fullscreen">Editor:</label><label className="grid-item2" title="Click on me for fullscreen">Previewer:</label>	
			
			<div id="erase"><button id="eraser" onClick={this.eraseIt} type="button" className="btn btn-danger btn-lg" title="I erase & populate editor and preview">Erase</button></div>
			
			<textarea id="editor" className="editor1" onChange={this.handleChange} defaultValue={this.state.value} placeholder="Enter ... some kind a text!? ..." title="This is rather obvious isn't it? It's editor window Sherlock :D"></textarea>	
			<div id="preview" className="preview1" dangerouslySetInnerHTML={this.getMarkdownText()} title="It's a preview window, Sherlock ;)"></div>
			
			<div id="arrow"><span className="glyphicon glyphicon-align-justify"></span></div>
			</div>
					
		);
	}
	
};

ReactDOM.render(<DisplayMessages/>, document.getElementById('root'));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer


Use of jquery in React
Use of jquery in React