Improved Sceditor integration

assets/3rdparty/js-bbcode-parser/bbcode-config.js

@@ -92,10 +92,10 @@ var parserTags = {
 	},
 	'quote': {
 		openTag: function(params,content) {
-			return '<q>';
+			return '<blockquote>';
 		},
 		closeTag: function(params,content) {
-			return '</q>';
+			return '</blockquote>';
 		}
 	},
 	's': {

assets/css/common/global.css

@@ -24,3 +24,10 @@ a {
 .a:focus, .a:hover {
     color: #72afd2;
 }
+
+/**
+ * Sceditor iframe
+ */
+.sceditor-iframe-body {
+    padding: 5px;
+}

assets/css/dark_theme.css

@@ -33,6 +33,13 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: var(--black3);
 }
 
+/**
+ * Sceditor body
+ */
+.sceditor-iframe-body {
+    background-color: var(--black5);
+    color: var(--white);
+}
 
 /**
 * Buttons

assets/js/common/utils.js

@@ -639,3 +639,43 @@ function removeJavascriptEventsFromHTML(html){
 
 	return html;
 }
+
+/**
+ * Get and return the DOM of a specified iframe
+ * 
+ * @param {HTMLIFrameElement} iframe The iframe to process
+ * @return {HTMLDocument} DOM of the iframe 
+ */
+function GetIframeDOM(iframe){
+	return iframe.contentWindow
+	 ? iframe.contentWindow.document
+	 : iframe.contentDocument;
+}
+
+/**
+ * Initialize styles for a sceditor textarea
+ * 
+ * @param {HTMLTextAreaElement} textarea Target textarea element that
+ * have sceditor initialized
+ */
+function ApplySceditorStyle(textarea){
+
+	//Get iframe DOM
+	var iframeDOM = GetIframeDOM(textarea.parentNode.getElementsByTagName("iframe")[0]);
+	
+	//Apply stylesheets
+	document.querySelectorAll("link[rel='stylesheet']").forEach(function(entry){
+
+		//Skip the entry if it is disabled
+		if(entry.disabled)
+			return;
+
+		var elem = iframeDOM.createElement("link");
+		elem.rel = "stylesheet";
+		elem.href = entry.href;
+		iframeDOM.head.appendChild(elem);
+	});
+
+	//Apply new styles to body
+	iframeDOM.body.className += " sceditor-iframe-body";
+}

assets/js/components/posts/edit.js

@@ -118,10 +118,11 @@ ComunicWeb.components.posts.edit = {
 			height: "200px",
 			width: "100%",
 			icons: "material",
-			style: ComunicWeb.components.posts.form.sceditor_stylsheet,
 			toolbarExclude: "youtube,image,size,link,print,mail,emoticon,maximize"
 		});
 
+		ApplySceditorStyle(editorTextarea);
+
 		//Create function to close modal
 		var closeModal = function(){
 			$(modal).modal('hide');

assets/js/components/posts/form.js

@@ -6,11 +6,6 @@
 
 ComunicWeb.components.posts.form = {
 
-	/**
-	 * SCEDITOR common options
-	 */
-	sceditor_stylsheet: "data:text/css;raw, body {font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 14px;line-height: 1.42857143;}",
-
 	/**
 	 * Display post creation form
 	 * 
@@ -69,11 +64,12 @@ ComunicWeb.components.posts.form = {
 			'bulletlist,orderedlist,table,code,quote,source',
 			emoticonsEnabled: false,
 			icons: "material",
-			//Hack : style a little iframe
-			style: this.sceditor_stylsheet,
 			toolbarContainer: inputMessageToolbarTarget
 		});
 
+		//Apply all stylesheets to the editor iframe
+		ApplySceditorStyle(inputMessageTextarea);
+
 		//Enable emojies picker
 		ComunicWeb.components.emoji.picker.addDetachedPicker(newPostMessageContener, function(emojie){