Skip to content

Commit 5cdf4af

Browse files
dencodenco
authored
Merge pull request #51 from denco/fix/issue_41
fix issue #41
2 parents 6077149 + 535f26e commit 5cdf4af

File tree

11 files changed

+446
-14
lines changed

11 files changed

+446
-14
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Confluence Wiki Markup
22

3+
## [1.0.2](https://github.com/denco/vscode-confluence-markup/releases/tag/1.0.2)
4+
5+
- add render tip, note, info and warning macros [he info, tip, note, and warning macros are not rendered](https://github.com/denco/vscode-confluence-markup/issues/41)
6+
- fix render bulleted list with leading spaces [Not rendering variations of bulleted list correctly](https://github.com/denco/vscode-confluence-markup/issues/44)
7+
38
## [1.0.1](https://github.com/denco/vscode-confluence-markup/releases/tag/1.0.1)
49

510
- modified code/noformat blocks so they can be used in lists to match confluence behaviour

‎media/css/confluence.css‎

Lines changed: 82 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ h1, h2, h3 {
3737
}
3838

3939
blockquote {
40-
margin: 0 7px 0 5px;
41-
padding: 0 16px 0 10px;
40+
padding: 1px 2px;
4241
border-left: 5px solid;
4342
}
4443

@@ -83,28 +82,104 @@ pre > code {
8382
line-height: 1.5em;
8483
}
8584

86-
87-
.panel {
85+
.panel, .tip, .info, .note, .warning {
8886
display: inline-block;
8987
width: 90%;
9088
color: black;
9189
margin: 0px;
9290
background-color: lightslategrey;
93-
border-width: 1px;
94-
91+
border-width: 2px;
92+
vertical-align: middle;
9593
}
9694

9795
.panel-title {
9896
font-weight: bold;
9997
padding: 5px 3px;
100-
border-bottom: none;
98+
border-style: solid;
99+
/* border-bottom: none; */
101100
}
102101

103102
.panel-body {
104103
background-color: lightgrey;
105104
padding: 3px;
105+
border-style: solid;
106+
border-top: none;
107+
}
108+
109+
.info, .info-title, .info-body {
110+
border-color: #aab8c6;
111+
border-style: solid;
112+
background-color: #fcfcfc;
113+
}
114+
115+
.tip, .tip-title, .tip-body {
116+
border-color: #91c89c;
117+
border-style: solid;
118+
background-color: #f3f9f4;
106119
}
107120

121+
.note, .note-title, .note-body {
122+
border-color: #ffeaae;
123+
border-style: solid;
124+
background-color: #fffdf6;
125+
}
126+
127+
.warning, .warning-title, .warning-body {
128+
border-color: #d04437;
129+
border-style: solid;
130+
background-color: #fff8f7;
131+
}
132+
133+
.info-title, .tip-title, .note-title, .warning-title,
134+
.info-title-iconless, .tip-title-iconless, .note-title-iconless, .warning-title-iconless {
135+
font-weight: bold;
136+
padding: 2px;
137+
margin: 0px;
138+
padding-left: 30px;
139+
padding-bottom: 0px;
140+
width: 80%;
141+
border-top-left-radius: 15px;
142+
border-top-right-radius: 15px;
143+
border-bottom: none;
144+
}
145+
146+
.info-body, .tip-body, .note-body, .warning-body {
147+
padding: 2px;
148+
margin: 0px;
149+
padding-left: 35px;
150+
padding-top: 0px;
151+
width: calc(80% - 5px);
152+
border-bottom-left-radius: 15px;
153+
border-bottom-right-radius: 15px;
154+
border-top: none;
155+
}
156+
157+
.info-title:before, .tip-title:before, .note-title:before, .warning-title:before,
158+
.info-title-iconless:before, .tip-title-iconless:before, .note-title-iconless:before, .warning-title-iconless:before {
159+
margin-left: -16px;
160+
margin-right: 5px;
161+
vertical-align: middle;
162+
}
163+
164+
.info-title:before, .info-title-iconless:before {
165+
content: url('./../icons/macro-info.png');
166+
}
167+
168+
.tip-title:before, .tip-title-iconless:before {
169+
content: url('./../icons/macro-tip.png');
170+
}
171+
172+
.note-title:before, .note-title-iconless:before {
173+
content: url('./../icons/macro-note.png');
174+
}
175+
176+
.warning-title:before, .warning-title-iconless:before {
177+
content: url('./../icons/macro-warning.png');
178+
}
179+
180+
.info-title-iconless:before, .tip-title-iconless:before,.note-title-iconless:before, .warning-title-iconless:before {
181+
opacity: 0.0;
182+
}
108183

109184
pre > code > p {
110185
margin: .5em 0;

‎media/icons/macro-info.png‎

626 Bytes
Loading

‎media/icons/macro-note.png‎

542 Bytes
Loading

‎media/icons/macro-tip.png‎

649 Bytes
Loading

‎media/icons/macro-warning.png‎

582 Bytes
Loading

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "confluence-markup",
33
"displayName": "Confluence markup",
4-
"version": "1.0.1",
4+
"version": "1.0.2",
55
"publisher": "denco",
66
"description": "Confluence markup language support for Visual Studio Code",
77
"keywords": [

‎src/markupParser.ts‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -225,18 +225,21 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
225225
tag = tag.replace(/</gi, '&lt;') + '<br />';
226226
}
227227

228-
const panel_re = /\{panel(.*)}/;
228+
const panel_re = /\{(panel|tip|info|note|warning)(.*)}/;
229229
if (! codeTagFlag && tag.match(panel_re)) {
230230
if (! panelTagFlag ) {
231231
let panelStyle = "";
232232
let titleStyle = "";
233-
tag = tag.replace(panel_re, function (m0, m1) {
234-
let res = '<div class="panel panel-body" $panelStyle>'
235-
const splits = m1.split(/[|:]/);
233+
let iconlessFlag = "";
234+
tag = tag.replace(panel_re, function (m0, m1, m2) {
235+
const panelClass = m1;
236+
237+
let res = `<div class="${panelClass} ${panelClass}-body" $panelStyle>`
238+
const splits = m2.split(/[|:]/);
236239
splits.forEach( (el:string) => {
237240
const elems = el.split('=');
238241
if (elems[0] === "title"){
239-
res = `<div class="panel panel-title" $titleStyle>${elems[1]}</div>${res}`;
242+
res = `<div class="${panelClass} ${panelClass}-title$iconlessFlag" $titleStyle>${elems[1]}</div>${res}`;
240243
}
241244
if (elems[0] === "titleBGColor"){
242245
if (titleStyle.length === 0) {
@@ -288,15 +291,27 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
288291
titleStyle += ` border-width: ${elems[1]}; `;
289292
}
290293
}
294+
if (elems[0] === "icon" && elems[1] === "false"){
295+
iconlessFlag = "-iconless";
296+
}
291297
});
292298
if (titleStyle.length > 0) {
293299
titleStyle += `'`;
294300
}
295301
if (panelStyle.length > 0) {
296302
panelStyle += `'`;
297303
}
298-
res = res.replace('$panelStyle', panelStyle);
304+
if (panelClass != 'panel') {
305+
panelStyle = "";
306+
titleStyle = "";
307+
if (!res.match(`${panelClass}-title`)){
308+
res = `<div class="${panelClass} ${panelClass}-title$iconlessFlag"></div>${res}`;
309+
}
310+
}
311+
312+
res = res.replace('$iconlessFlag', iconlessFlag);
299313
res = res.replace('$titleStyle', titleStyle);
314+
res = res.replace('$panelStyle', panelStyle);
300315
return res;
301316
});
302317
panelTagFlag = true;

‎src/test/suite/fixtures/expected/issue_41.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<p>
2+
<h1>Issue <a href='https://github.com/denco/vscode-confluence-markup/issues/41'>#41</a> - macros: info,tip,note and warning</h1>
3+
</p>
4+
<p>
5+
<h2>macro-info</h2>
6+
</p>
7+
<p>
8+
<div class="info info-title">This is info title</div>
9+
<div class="info info-body">
10+
</p>
11+
<p>This is Info information.</p>
12+
<p>
13+
</div>
14+
</p>
15+
<p>
16+
<div class="info info-title"></div>
17+
<div class="info info-body">
18+
</p>
19+
<p>This is info without title information.</p>
20+
<p>
21+
</div>
22+
</p>
23+
<p>
24+
<div class="info info-title-iconless">Info with title w/o icon</div>
25+
<div class="info info-body">
26+
</p>
27+
<p>This is Info information.</p>
28+
<p>
29+
</div>
30+
</p>
31+
<p>
32+
<div class="info info-title-iconless"></div>
33+
<div class="info info-body">
34+
</p>
35+
<p>INFO: titleless and iconless</p>
36+
<p>
37+
</div>
38+
</p>
39+
<p>
40+
<div class="info info-title-iconless">This is my title</div>
41+
<div class="info info-body">
42+
</p>
43+
<p>This is <i>important</i> information.</p>
44+
<p>
45+
</div>
46+
</p>
47+
<p>
48+
<h2>macro-tip</h2>
49+
</p>
50+
<p>
51+
<div class="tip tip-title">This is tip title</div>
52+
<div class="tip tip-body">
53+
</p>
54+
<p>This is Tip information.</p>
55+
<p>
56+
</div>
57+
</p>
58+
<p>
59+
<div class="tip tip-title"></div>
60+
<div class="tip tip-body">
61+
</p>
62+
<p>This is tip without title information.</p>
63+
<p>
64+
</div>
65+
</p>
66+
<p>
67+
<div class="tip tip-title-iconless">Tip with title w/o icon</div>
68+
<div class="tip tip-body">
69+
</p>
70+
<p>This is Tip information.</p>
71+
<p>
72+
</div>
73+
</p>
74+
<p>
75+
<div class="tip tip-title-iconless"></div>
76+
<div class="tip tip-body">
77+
</p>
78+
<p>TIP: titleless and iconless</p>
79+
<p>
80+
</div>
81+
</p>
82+
<p>
83+
<h2>macro-note</h2>
84+
</p>
85+
<p>
86+
<div class="note note-title">This is note title</div>
87+
<div class="note note-body">
88+
</p>
89+
<p>This is note information.</p>
90+
<p>
91+
</div>
92+
</p>
93+
<p>
94+
<div class="note note-title"></div>
95+
<div class="note note-body">
96+
</p>
97+
<p>This is note without title information.</p>
98+
<p>
99+
</div>
100+
</p>
101+
<p>
102+
<div class="note note-title-iconless">Note with title w/o icon</div>
103+
<div class="note note-body">
104+
</p>
105+
<p>This is note information.</p>
106+
<p>
107+
</div>
108+
</p>
109+
<p>
110+
<div class="note note-title-iconless"></div>
111+
<div class="note note-body">
112+
</p>
113+
<p>NOTE: titleless and iconless</p>
114+
<p>
115+
</div>
116+
</p>
117+
<p>
118+
<h2>macro-warning</h2>
119+
</p>
120+
<p>
121+
<div class="warning warning-title">This is warning title</div>
122+
<div class="warning warning-body">
123+
</p>
124+
<p>This is warning information.</p>
125+
<p>
126+
</div>
127+
</p>
128+
<p>
129+
<div class="warning warning-title"></div>
130+
<div class="warning warning-body">
131+
</p>
132+
<p>This is warning without title information.</p>
133+
<p>
134+
</div>
135+
</p>
136+
<p>
137+
<div class="warning warning-title-iconless">This is warning title without icon</div>
138+
<div class="warning warning-body">
139+
</p>
140+
<p>This is warning information.</p>
141+
<p>
142+
</div>
143+
</p>
144+
<p>
145+
<div class="warning warning-title-iconless"></div>
146+
<div class="warning warning-body">
147+
</p>
148+
<p>WARNING: titleless and iconless</p>
149+
<p>
150+
</div>
151+
</p>
152+
<p>
153+
<h2>formatted panel</h2>
154+
</p>
155+
<p>
156+
<div class="panel panel-title" style='border-style: dashed; border-bottom:none; border-color: YellowGreen; background-color: #00a400;'>My title
157+
</div>
158+
<div class="panel panel-body" style='border-style: dashed; border-color: YellowGreen; background-color: #72bc72;'>
159+
</p>
160+
<p>A formatted panel</p>
161+
<p>
162+
</div>
163+
</p>
164+
<p>
165+
<div class="panel panel-title" style='border-style: solid; border-bottom:none; border-color: Violet; background-color: #00a400;'>My title</div>
166+
<div class="panel panel-body" style='border-style: solid; border-color: Violet; background-color: #72bc72;'>
167+
</p>
168+
<p>A formatted panel</p>
169+
<p>
170+
</div>
171+
</p>
172+
<p>
173+
<div class="panel panel-title" style='border-style: dotted; border-bottom:none; border-color: red; '>My title</div>
174+
<div class="panel panel-body" style='border-style: dotted; border-color: red; '>
175+
</p>
176+
<p>A formatted panel</p>
177+
<p>
178+
</div>
179+
</p>

0 commit comments

Comments
 (0)