Merge pull request #26 from denco/feature/issue_22

Feature/issue 22

Author: denco

media/css/confluence.css

@@ -79,6 +79,29 @@ pre>code {
 	line-height: 1.5em;
 }
 
+
+.panel {
+	display: inline-block;
+	width: 90%;
+	color: black;
+	margin: 0px;
+	background-color: lightslategrey;
+	border-width: 1px;
+
+}
+
+.panel-title {
+	font-weight: bold;
+	padding: 5px;
+	border-bottom: none;
+}
+
+.panel-body {
+	background-color: lightgrey;
+	padding: 3px;
+}
+
+
 pre > code > p {
 	margin: 0px
 }

src/markupParser.ts

@@ -49,6 +49,7 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 	let listTag = '';
 	let listStyle = '';
 	let codeTagFlag = false;
+	let panelTagFlag = false;
 	let tableFlag = false;
 	let listFlag = false;
 	let listArr: string[] = [];
@@ -98,7 +99,6 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 			let esc_href = /\[\s*([^|]*)?\|?([^|].*)[\s+|\\]\]/g
 			if (tag.match(re_href)) {
 				tag = tag.replace(re_href, function (m0, m1, m2) {
-					console.log(`aaa: >${m1}<, >${m2}<`);
 					if ((m1.length !== 0) && (m2.length !== 0)) {
 						return "<a href='" + m2 + "'>" + m1 + "</a>";
 					} else {
@@ -117,8 +117,8 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 			}
 
 			//Table
-			let tab_th_re = /\s*\|{2}.*$/gi;
-			let tab_td_re = /\s*\|.*$/gi;
+			let tab_th_re = /\s*[^{]*\|{2}[^}]*$/gi;
+			let tab_td_re = /\s*[^{]*\|[^}]*$/gi;
 			if (!html_tag && (tag.match(tab_th_re) || tag.match(tab_td_re))) {
 				tag = tag.replace(/^\|{2,}/, '\|\|');
 				tag = tag.replace(/^\|{2}/, '<th>');
@@ -153,6 +153,87 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 			}
 		}
 
+		let panel_re = /\{panel(.*)}/;
+		if (tag.match(panel_re)) {
+			if (! panelTagFlag) {
+				let panelStyle = "";
+				let titleStyle = "";
+				tag = tag.replace(panel_re, function (m0, m1, m2) {
+					let res = '<div class="panel panel-body" $panelStyle>'
+					let splits=m1.split(/[\|:]/);
+					splits.forEach( (el:String) => {
+						let elems = el.split('=');
+						if (elems[0] === "title"){
+							res = `<div class="panel panel-title" $titleStyle>${elems[1]}</div>${res}`;
+						}
+						if (elems[0] === "titleBGColor"){
+							if (titleStyle.length === 0) {
+								titleStyle = `style='background-color: ${elems[1]};`;
+							} else {
+								titleStyle += ` background-color: ${elems[1]};`;
+							}
+						}
+						if (elems[0] === "bgColor"){
+							if (panelStyle.length === 0) {
+								panelStyle = `style='background-color: ${elems[1]};`;
+							} else {
+								panelStyle += ` background-color: ${elems[1]};`;
+							}
+						}
+						if (elems[0] === "borderStyle"){
+							if (panelStyle.length === 0) {
+								panelStyle = `style='border-style: ${elems[1]}; `;
+							} else {
+								panelStyle += ` border-style: ${elems[1]}; `;
+							}
+							if (titleStyle.length === 0) {
+								titleStyle = `style='border-style: ${elems[1]}; border-bottom:none; `;
+							} else {
+								titleStyle += ` border-style: ${elems[1]}; border-bottom:none; `;
+							}
+						}
+						if (elems[0] === "borderColor"){
+							if (panelStyle.length === 0) {
+								panelStyle = `style='border-color: ${elems[1]}; `;
+							} else {
+								panelStyle += ` border-color: ${elems[1]}; `;
+							}
+							if (titleStyle.length === 0) {
+								titleStyle = `style='border-color: ${elems[1]}; `;
+							} else {
+								titleStyle += ` border-color: ${elems[1]}; `;
+							}
+						}
+						if (elems[0] === "borderWidth"){
+							if (panelStyle.length === 0) {
+								panelStyle = `style='border-width: ${elems[1]}; `;
+							} else {
+								panelStyle += ` border-width: ${elems[1]}; `;
+							}
+							if (titleStyle.length === 0) {
+								titleStyle = `style='border-width: ${elems[1]}; `;
+							} else {
+								titleStyle += ` border-width: ${elems[1]}; `;
+							}
+						}
+					});
+					if (titleStyle.length >= 0) {
+						titleStyle += `'`;
+					}
+					if (panelStyle.length >= 0) {
+						panelStyle += `'`;
+					}
+					res = res.replace('$panelStyle', panelStyle);
+					res = res.replace('$titleStyle', titleStyle);
+					return res;
+				});
+				panelTagFlag = true;
+			} else {
+				tag = '</div>';
+				panelTagFlag = false;
+			}
+		}
+
 		if (! codeTagFlag) {
 			// lists
 			re = /^([-|\*|#]+)\s(.*)/;
@@ -216,7 +297,6 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 			tag = '</table>' + tag;
 			tableFlag = false;
 		}
-		console.log(tag);
 		result += "<p>" + tag + "</p>";
 	}
 

src/test/testfiles/nix/issues.confluence

@@ -60,6 +60,21 @@ This is a {{test}} of how things work with {{confluence}} markup.
 
 _Blah blah blah._
 
+[#22|https://github.com/denco/vscode-confluence-markup/issues/22] panel support
+
+{panel}
+Some text
+{panel}
+
+{panel:title=My Title}
+Some text with a title
+{panel}
+
+{panel:title=My Title|borderStyle=dashed|borderColor=#ccc|titleBGColor=#F7D6C1|bgColor=#FFFFCE}
+a block of text surrounded with a *panel*
+yet _another_ line
+{panel}
+
 [#24|https://github.com/denco/vscode-confluence-markup/issues/24]: Can't use [ and ] in string
 
 [lalala]

src/test/testfiles/win/issues.confluence

@@ -60,6 +60,21 @@ This is a {{test}} of how things work with {{confluence}} markup.
 
 _Blah blah blah._
 
+[#22|https://github.com/denco/vscode-confluence-markup/issues/22] panel support
+
+{panel}
+Some text
+{panel}
+
+{panel:title=My Title}
+Some text with a title
+{panel}
+
+{panel:title=My Title|borderStyle=dashed|borderColor=#ccc|titleBGColor=#F7D6C1|bgColor=#FFFFCE}
+a block of text surrounded with a *panel*
+yet _another_ line
+{panel}
+
 [#24|https://github.com/denco/vscode-confluence-markup/issues/24]: Can't use [ and ] in string
 
 [lalala]