Skip to content

Commit 98d7f00

Browse files
live627live627
committed
code tag changes
- wrap code in preformatted html tags - do the same in the sceditor - bonus: fix php tag processing in the sceditor - php 8.3 changes highlight_string(), so update our integrations - do not add php start and end php tags to the final output of the php bbcode - add buttons for selecting and expanding code blocks with js; don't output them from php - remove smfSelectText( ) as it is unused now Signed-off-by: John Rayes <live627@gmail.com>
1 parent e19cc26 commit 98d7f00

8 files changed

Lines changed: 115 additions & 213 deletions

File tree

‎Sources/BBCodeParser.php‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -357,14 +357,14 @@ class BBCodeParser
357357
[
358358
'tag' => 'code',
359359
'type' => 'unparsed_content',
360-
'content' => '<div class="codeheader"><span class="code">{txt_code}</span> <a class="codeoperation smf_select_text">{txt_code_select}</a> <a class="codeoperation smf_expand_code hidden" data-shrink-txt="{txt_code_shrink}" data-expand-txt="{txt_code_expand}">{txt_code_expand}</a></div><code class="bbc_code">$1</code>',
360+
'content' => '<div class="codeheader">{txt_code}</div><pre data-select-txt="{txt_code_select}" data-shrink-txt="{txt_code_shrink}" data-expand-txt="{txt_code_expand}" class="bbc_code"><code>$1</code></pre>',
361361
'validate' => __CLASS__ . '::codeValidate',
362362
'block_level' => true,
363363
],
364364
[
365365
'tag' => 'code',
366366
'type' => 'unparsed_equals_content',
367-
'content' => '<div class="codeheader"><span class="code">{txt_code}</span> ($2) <a class="codeoperation smf_select_text">{txt_code_select}</a> <a class="codeoperation smf_expand_code hidden" data-shrink-txt="{txt_code_shrink}" data-expand-txt="{txt_code_expand}">{txt_code_expand}</a></div><code class="bbc_code">$1</code>',
367+
'content' => '<div class="codeheader">{txt_code} ($2)</div><pre data-select-txt="{txt_code_select}" data-shrink-txt="{txt_code_shrink}" data-expand-txt="{txt_code_expand}" class="bbc_code"><code>$1</code></pre>',
368368
'validate' => __CLASS__ . '::codeValidate',
369369
'block_level' => true,
370370
],
@@ -2226,16 +2226,20 @@ public static function highlightPhpCode(string $code): string
22262226
// Remove special characters.
22272227
$code = Utils::htmlspecialcharsDecode(strtr($code, ['<br />' => "\n", '<br>' => "\n", "\t" => 'SMF_TAB();', '&#91;' => '[']));
22282228

2229-
$oldlevel = error_reporting(0);
2230-
2231-
$buffer = str_replace(["\n", "\r"], '', @highlight_string($code, true));
2232-
2233-
error_reporting($oldlevel);
2229+
$patterns = ['/<\/?(?:pre|code)[^>]*>/'];
2230+
$replacements = [''];
22342231

22352232
// Yes, I know this is kludging it, but this is the best way to preserve tabs from PHP :P.
2236-
$buffer = preg_replace('~SMF_TAB(?:</(?:font|span)><(?:font color|span style)="[^"]*?">)?\(\);~', '<pre style="display: inline;">' . "\t" . '</pre>', $buffer);
2233+
$patterns[] = '/SMF_TAB(?:<\/(?:font|span)><(?:font color|span style)="[^"]*?">)?\(\);/';
2234+
$replacements[] = "\t";
22372235

2238-
return strtr($buffer, ['\'' => '&#039;', '<code>' => '', '</code>' => '']);
2236+
// PHP 8.3 changed this to return real linebreaks, but SMF still expects HTML breaks.
2237+
if (version_compare(PHP_VERSION, '8.3', '>=')) {
2238+
$patterns[] = "/\n/";
2239+
$replacements[] = '<br />';
2240+
}
2241+
2242+
return strtr(preg_replace($patterns, $replacements, highlight_string($code, true)), array('\'' => '&#039;'));
22392243
}
22402244

22412245
/**
@@ -2460,33 +2464,26 @@ public static function codeValidate(&$tag, &$data, $disabled, $params): void
24602464
if (!isset($disabled['code'])) {
24612465
$code = is_array($data) ? $data[0] : $data;
24622466

2463-
$php_parts = preg_split('~(&lt;\?php|\?&gt;)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE);
2467+
$parts = preg_split('~(&lt;\?php|\?&gt;)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE);
24642468

2465-
for ($php_i = 0, $php_n = count($php_parts); $php_i < $php_n; $php_i++) {
2469+
for ($i = 0, $n = count($parts); $i < $n; $i++) {
24662470
// Do PHP code coloring?
2467-
if ($php_parts[$php_i] != '&lt;?php') {
2471+
if ($parts[$i] != '&lt;?php') {
24682472
continue;
24692473
}
24702474

2471-
$php_string = '';
2472-
2473-
while ($php_i + 1 < count($php_parts) && $php_parts[$php_i] != '?&gt;') {
2474-
$php_string .= $php_parts[$php_i];
2475-
$php_parts[$php_i++] = '';
2475+
$string = '';
2476+
while ($i + 1 < $n && $parts[$i] != '?&gt;') {
2477+
$string .= $parts[$i];
2478+
$parts[$i++] = '';
24762479
}
2477-
2478-
$php_parts[$php_i] = self::highlightPhpCode($php_string . $php_parts[$php_i]);
2480+
$parts[$i] = self::highlightPhpCode($string . $parts[$i]);
24792481
}
24802482

2481-
// Fix the PHP code stuff...
2482-
$code = str_replace("<pre style=\"display: inline;\">\t</pre>", "\t", implode('', $php_parts));
2483-
2484-
$code = str_replace("\t", "<span style=\"white-space: pre;\">\t</span>", $code);
2485-
24862483
if (is_array($data)) {
2487-
$data[0] = $code;
2484+
$data[0] = implode('', $parts);
24882485
} else {
2489-
$data = $code;
2486+
$data = implode('', $parts);
24902487
}
24912488
}
24922489
}

‎Themes/default/css/index.css‎

Lines changed: 14 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -44,37 +44,11 @@ input, button, select, textarea {
4444
font-size: var(--ibst_font_size);
4545
line-height: var(--ibst_font_line_height);
4646
background: var(--ibst_bg_color);
47-
outline: none;
4847
border: var(--ibst_border_width) var(--ibst_border_style) var(--ibst_border_color);
4948
vertical-align: middle;
5049
border-radius: var(--ibst_border_radius);
51-
box-shadow: var(--ibst_box_shadow_color);
5250
padding: var(--ibst_padding);
5351
}
54-
input:hover, textarea:hover, button:hover, select:hover {
55-
outline: none;
56-
border-color: var(--ibst_hover_border_color);
57-
}
58-
textarea:hover {
59-
background: var(--ibst_textarea_hover_bg_color);
60-
}
61-
input:focus, textarea:focus, button:focus, select:focus {
62-
outline: none;
63-
border-color: var(--ibst_focus_border_color);
64-
background: var(--ibst_focus_bg_color);
65-
}
66-
input, button, select {
67-
padding: 0 0.4em;
68-
height: 2em;
69-
line-height: 2em;
70-
}
71-
select {
72-
padding: 0.22em 0.2em; /* selects don't apply line-height */
73-
}
74-
/* Selects with more than one line */
75-
select[size] {
76-
height: auto;
77-
}
7852
input[type="file"] {
7953
padding: 2px;
8054
height: auto;
@@ -101,9 +75,6 @@ textarea {
10175
font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
10276
}
10377

104-
.sceditor-container textarea, .sceditor-container textarea:focus {
105-
box-shadow: none;
106-
}
10778
#quick_edit_body_container textarea,
10879
.move_topic textarea,
10980
dd textarea {
@@ -199,23 +170,6 @@ hr {
199170
background: var(--horizontal_rule_bg_color);
200171
box-shadow: var(--horizontal_rule_box_shadow);
201172
}
202-
/* This is about links */
203-
a, a:visited {
204-
color: var(--link);
205-
text-decoration: none;
206-
transition: ease 0.35s;
207-
}
208-
a:hover {
209-
text-decoration: underline;
210-
cursor: pointer;
211-
}
212-
213-
/* Help popups require a different styling of the body element. */
214-
/* Deprecated? */
215-
body#help_popup {
216-
padding: 12px;
217-
}
218-
219173
#likes li {
220174
clear: both;
221175
padding: 1px 0;
@@ -290,6 +244,20 @@ a.new_posts:visited {
290244
.clear_right {
291245
clear: right;
292246
}
247+
.reset {
248+
all: unset;
249+
outline: revert;
250+
}
251+
/* This is about links */
252+
a, a:visited, .reset.link {
253+
color: var(--link);
254+
text-decoration: none;
255+
transition: ease 0.35s;
256+
}
257+
a:hover, .reset.link:hover {
258+
text-decoration: underline;
259+
cursor: pointer;
260+
}
293261

294262
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
295263
.smalltext, tr.smalltext th {
@@ -387,7 +355,6 @@ blockquote cite::before {
387355
margin: 1px 0 6px 0;
388356
padding: 3px 12px;
389357
overflow: auto;
390-
white-space: nowrap;
391358
max-height: 25em;
392359
}
393360
/* The "Quote:" and "Code:" header parts... */

‎Themes/default/css/index_dark.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -326,13 +326,9 @@
326326
--ibst_disabled_bg_color: hsl(0, 0%, 13%);
327327
--ibst_disabled_border_color: hsl(0, 0%, 71%);
328328
--ibst_disabled_txt_color: hsl(0, 0%, 60%);
329-
--ibst_focus_bg_color: hsl(0, 0%, 0%);
330-
--ibst_focus_border_color: hsl(207, 53%, 67%);
331329
--ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
332330
--ibst_font_size: 85%;
333331
--ibst_font_line_height: 150%;
334-
--ibst_hover_border_color: hsl(207, 30%, 42%);
335-
--ibst_textarea_hover_bg_color: hsl(0, 0%, 8%);
336332
--ibst_padding: 0.3em 0.4em;
337333

338334
/* Maintenance Mode */

‎Themes/default/css/index_light.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -324,13 +324,9 @@
324324
--ibst_disabled_bg_color: hsl(0, 0%, 93%);
325325
--ibst_disabled_border_color: hsl(0, 0%, 71%);
326326
--ibst_disabled_txt_color: hsl(0, 0%, 60%);
327-
--ibst_focus_bg_color: hsl(0, 0%, 100%);
328-
--ibst_focus_border_color: hsl(207, 53%, 67%);
329327
--ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
330328
--ibst_font_size: 85%;
331329
--ibst_font_line_height: 150%;
332-
--ibst_hover_border_color: hsl(207, 30%, 62%);
333-
--ibst_textarea_hover_bg_color: hsl(0, 0%, 98%);
334330
--ibst_padding: 0.3em 0.4em;
335331

336332
/* Maintenance Mode */

‎Themes/default/css/jquery.sceditor.default.css‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
2-
html, p, code::before, table {
2+
html, p, .bbc_code code::before, table {
33
margin: 0;
44
padding: 0;
55
font-family: Verdana, Arial, Helvetica, sans-serif;
@@ -43,30 +43,21 @@ table, td {
4343
min-width: 0.5ch;
4444
}
4545

46-
code::before {
46+
.bbc_code code::before {
4747
position: absolute;
4848
content: 'Code:';
4949
top: -1.35em;
5050
left: 0;
5151
}
52-
code[data-title]::before {
52+
.bbc_code code[data-title]::before {
5353
content: 'Code: (' attr(data-title) ')';
5454
}
55-
code {
55+
.bbc_code {
5656
margin-top: 1.5em;
5757
position: relative;
5858
background: #eee;
5959
border: 1px solid #aaa;
60-
white-space: pre;
6160
padding: .25em;
62-
display: block;
63-
}
64-
.ie6 code, .ie7 code {
65-
margin-top: 0;
66-
}
67-
code::before, code {
68-
display: block;
69-
text-align: left;
7061
}
7162

7263
blockquote {

‎Themes/default/scripts/jquery.sceditor.smf.js‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -814,7 +814,17 @@ sceditor.formats.bbcode.set(
814814

815815
sceditor.formats.bbcode.set(
816816
'php', {
817+
tags: {
818+
code: {
819+
class: 'php'
820+
},
821+
span: {
822+
class: 'phpcode'
823+
}
824+
},
825+
allowsEmpty: true,
817826
isInline: false,
827+
allowedChildren: ['#', '#newline'],
818828
format: "[php]{0}[/php]",
819829
html: '<code class="php">{0}</code>'
820830
}
@@ -823,26 +833,41 @@ sceditor.formats.bbcode.set(
823833
sceditor.formats.bbcode.set(
824834
'code', {
825835
tags: {
826-
code: null
836+
code: null,
837+
div: {
838+
class: 'codeheader'
839+
},
840+
pre: {
841+
class: 'bbc_code'
842+
}
827843
},
828844
isInline: false,
829845
allowedChildren: ['#', '#newline'],
830846
format: function (element, content) {
831-
if ($(element).hasClass('php'))
832-
return '[php]' + content.replace('&#91;', '[') + '[/php]';
847+
let title = element.getAttribute('data-title');
848+
849+
if (element.className === 'php')
850+
return content;
851+
else if (element.tagName === 'DIV')
852+
return '';
853+
else if (element.tagName === 'PRE')
854+
return content;
855+
else if (element.parentNode.tagName === 'PRE' && !title)
856+
{
857+
const t = element.parentNode.previousSibling.textContent;
858+
859+
if (t.indexOf('(') != -1)
860+
title = t.replace(/^[^(]+\(/, '').replace(/\)? \[.+/, '');
861+
}
833862

834-
var
835-
dom = sceditor.dom,
836-
attr = dom.attr,
837-
title = attr(element, 'data-title'),
838-
from = title ?' =' + title : '';
863+
const from = title ? ' =' + title : '';
839864

840865
return '[code' + from + ']' + content.replace('&#91;', '[') + '[/code]';
841866
},
842867
html: function (element, attrs, content) {
843868
var from = attrs.defaultattr ? ' data-title="' + attrs.defaultattr + '"' : '';
844869

845-
return '<code data-name="' + this.opts.txtVars.code + '"' + from + '>' + content.replace('[', '&#91;') + '</code>'
870+
return '<pre class="bbc_code"><code data-name="' + this.opts.txtVars.code + '"' + from + '>' + content.replace('[', '&#91;') + '</code></pre>'
846871
}
847872
}
848873
);

0 commit comments

Comments
 (0)