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 <[email protected]>
SimpleMachines · Dec 27, 2023 · 98d7f00 · 98d7f00
1 parent e19cc26
commit 98d7f00
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 213 deletions.
diff --git a/Sources/BBCodeParser.php b/Sources/BBCodeParser.php
@@ -357,14 +357,14 @@ class BBCodeParser
 		[
 			'tag' => 'code',
 			'type' => 'unparsed_content',
-			'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>',
+			'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>',
 			'validate' => __CLASS__ . '::codeValidate',
 			'block_level' => true,
 		],
 		[
 			'tag' => 'code',
 			'type' => 'unparsed_equals_content',
-			'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>',
+			'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>',
 			'validate' => __CLASS__ . '::codeValidate',
 			'block_level' => true,
 		],
@@ -2226,16 +2226,20 @@ public static function highlightPhpCode(string $code): string
 		// Remove special characters.
 		$code = Utils::htmlspecialcharsDecode(strtr($code, ['<br />' => "\n", '<br>' => "\n", "\t" => 'SMF_TAB();', '&#91;' => '[']));
 
-		$oldlevel = error_reporting(0);
-
-		$buffer = str_replace(["\n", "\r"], '', @highlight_string($code, true));
-
-		error_reporting($oldlevel);
+		$patterns = ['/<\/?(?:pre|code)[^>]*>/'];
+		$replacements = [''];
 
 		// Yes, I know this is kludging it, but this is the best way to preserve tabs from PHP :P.
-		$buffer = preg_replace('~SMF_TAB(?:</(?:font|span)><(?:font color|span style)="[^"]*?">)?\(\);~', '<pre style="display: inline;">' . "\t" . '</pre>', $buffer);
+		$patterns[] = '/SMF_TAB(?:<\/(?:font|span)><(?:font color|span style)="[^"]*?">)?\(\);/';
+		$replacements[] = "\t";
 
-		return strtr($buffer, ['\'' => '&#039;', '<code>' => '', '</code>' => '']);
+		// PHP 8.3 changed this to return real linebreaks, but SMF still expects HTML breaks.
+		if (version_compare(PHP_VERSION, '8.3', '>=')) {
+			$patterns[] = "/\n/";
+			$replacements[] = '<br />';
+		}
+
+		return strtr(preg_replace($patterns, $replacements, highlight_string($code, true)), array('\'' => '&#039;'));
 	}
 
 	/**
@@ -2460,33 +2464,26 @@ public static function codeValidate(&$tag, &$data, $disabled, $params): void
 		if (!isset($disabled['code'])) {
 			$code = is_array($data) ? $data[0] : $data;
 
-			$php_parts = preg_split('~(&lt;\?php|\?&gt;)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE);
+			$parts = preg_split('~(&lt;\?php|\?&gt;)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE);
 
-			for ($php_i = 0, $php_n = count($php_parts); $php_i < $php_n; $php_i++) {
+			for ($i = 0, $n = count($parts); $i < $n; $i++) {
 				// Do PHP code coloring?
-				if ($php_parts[$php_i] != '&lt;?php') {
+				if ($parts[$i] != '&lt;?php') {
 					continue;
 				}
 
-				$php_string = '';
-
-				while ($php_i + 1 < count($php_parts) && $php_parts[$php_i] != '?&gt;') {
-					$php_string .= $php_parts[$php_i];
-					$php_parts[$php_i++] = '';
+				$string = '';
+				while ($i + 1 < $n && $parts[$i] != '?&gt;') {
+					$string .= $parts[$i];
+					$parts[$i++] = '';
 				}
-
-				$php_parts[$php_i] = self::highlightPhpCode($php_string . $php_parts[$php_i]);
+				$parts[$i] = self::highlightPhpCode($string . $parts[$i]);
 			}
 
-			// Fix the PHP code stuff...
-			$code = str_replace("<pre style=\"display: inline;\">\t</pre>", "\t", implode('', $php_parts));
-
-			$code = str_replace("\t", "<span style=\"white-space: pre;\">\t</span>", $code);
-
 			if (is_array($data)) {
-				$data[0] = $code;
+				$data[0] = implode('', $parts);
 			} else {
-				$data = $code;
+				$data = implode('', $parts);
 			}
 		}
 	}

diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css
@@ -44,37 +44,11 @@ input, button, select, textarea {
 	font-size: var(--ibst_font_size);
 	line-height: var(--ibst_font_line_height);
 	background: var(--ibst_bg_color);
-	outline: none;
 	border: var(--ibst_border_width) var(--ibst_border_style) var(--ibst_border_color);
 	vertical-align: middle;
 	border-radius: var(--ibst_border_radius);
-	box-shadow: var(--ibst_box_shadow_color);
 	padding: var(--ibst_padding);
 }
-input:hover, textarea:hover, button:hover, select:hover {
-	outline: none;
-	border-color: var(--ibst_hover_border_color);
-}
-textarea:hover {
-	background: var(--ibst_textarea_hover_bg_color);
-}
-input:focus, textarea:focus, button:focus, select:focus {
-	outline: none;
-	border-color: var(--ibst_focus_border_color);
-	background: var(--ibst_focus_bg_color);
-}
-input, button, select {
-	padding: 0 0.4em;
-	height: 2em;
-	line-height: 2em;
-}
-select {
-	padding: 0.22em 0.2em; /* selects don't apply line-height */
-}
-/* Selects with more than one line */
-select[size] {
-	height: auto;
-}
 input[type="file"] {
 	padding: 2px;
 	height: auto;
@@ -101,9 +75,6 @@ textarea {
 	font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
 }
 
-.sceditor-container textarea, .sceditor-container textarea:focus {
-	box-shadow: none;
-}
 #quick_edit_body_container textarea,
 .move_topic textarea,
 dd textarea {
@@ -199,23 +170,6 @@ hr {
 	background: var(--horizontal_rule_bg_color);
 	box-shadow: var(--horizontal_rule_box_shadow);
 }
-/* This is about links */
-a, a:visited {
-	color: var(--link);
-	text-decoration: none;
-	transition: ease 0.35s;
-}
-a:hover {
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-/* Help popups require a different styling of the body element. */
-/* Deprecated? */
-body#help_popup {
-	padding: 12px;
-}
-
 #likes li {
 	clear: both;
 	padding: 1px 0;
@@ -290,6 +244,20 @@ a.new_posts:visited {
 .clear_right {
 	clear: right;
 }
+.reset {
+	all: unset;
+	outline: revert;
+}
+/* This is about links */
+a, a:visited, .reset.link {
+	color: var(--link);
+	text-decoration: none;
+	transition: ease 0.35s;
+}
+a:hover, .reset.link:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
 
 /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
 .smalltext, tr.smalltext th {
@@ -387,7 +355,6 @@ blockquote cite::before {
 	margin: 1px 0 6px 0;
 	padding: 3px 12px;
 	overflow: auto;
-	white-space: nowrap;
 	max-height: 25em;
 }
 /* The "Quote:" and "Code:" header parts... */

diff --git a/Themes/default/css/index_dark.css b/Themes/default/css/index_dark.css
@@ -326,13 +326,9 @@
 	--ibst_disabled_bg_color: hsl(0, 0%, 13%);
 	--ibst_disabled_border_color: hsl(0, 0%, 71%);
 	--ibst_disabled_txt_color: hsl(0, 0%, 60%);
-	--ibst_focus_bg_color: hsl(0, 0%, 0%);
-	--ibst_focus_border_color: hsl(207, 53%, 67%);
 	--ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
 	--ibst_font_size: 85%;
 	--ibst_font_line_height: 150%;
-	--ibst_hover_border_color: hsl(207, 30%, 42%);
-	--ibst_textarea_hover_bg_color: hsl(0, 0%, 8%);
 	--ibst_padding: 0.3em 0.4em;
 
 	/* Maintenance Mode */

diff --git a/Themes/default/css/index_light.css b/Themes/default/css/index_light.css
@@ -324,13 +324,9 @@
 	--ibst_disabled_bg_color: hsl(0, 0%, 93%);
 	--ibst_disabled_border_color: hsl(0, 0%, 71%);
 	--ibst_disabled_txt_color: hsl(0, 0%, 60%);
-	--ibst_focus_bg_color: hsl(0, 0%, 100%);
-	--ibst_focus_border_color: hsl(207, 53%, 67%);
 	--ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
 	--ibst_font_size: 85%;
 	--ibst_font_line_height: 150%;
-	--ibst_hover_border_color: hsl(207, 30%, 62%);
-	--ibst_textarea_hover_bg_color: hsl(0, 0%, 98%);
 	--ibst_padding: 0.3em 0.4em;
 
 	/* Maintenance Mode */

diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css
@@ -1,5 +1,5 @@
 /*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
-html, p, code::before, table {
+html, p, .bbc_code code::before, table {
 	margin: 0;
 	padding: 0;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
@@ -43,30 +43,21 @@ table, td {
 	min-width: 0.5ch;
 }
 
-code::before {
+.bbc_code code::before {
 	position: absolute;
 	content: 'Code:';
 	top: -1.35em;
 	left: 0;
 }
-code[data-title]::before {
+.bbc_code code[data-title]::before {
 	content: 'Code: (' attr(data-title) ')';
 }
-code {
+.bbc_code {
 	margin-top: 1.5em;
 	position: relative;
 	background: #eee;
 	border: 1px solid #aaa;
-	white-space: pre;
 	padding: .25em;
-	display: block;
-}
-.ie6 code, .ie7 code {
-	margin-top: 0;
-}
-code::before, code {
-	display: block;
-	text-align: left;
 }
 
 blockquote {

diff --git a/Themes/default/scripts/jquery.sceditor.smf.js b/Themes/default/scripts/jquery.sceditor.smf.js
@@ -814,7 +814,17 @@ sceditor.formats.bbcode.set(
 
 sceditor.formats.bbcode.set(
 	'php', {
+		tags: {
+			code: {
+				class: 'php'
+			},
+			span: {
+				class: 'phpcode'
+			}
+		},
+		allowsEmpty: true,
 		isInline: false,
+		allowedChildren: ['#', '#newline'],
 		format: "[php]{0}[/php]",
 		html: '<code class="php">{0}</code>'
 	}
@@ -823,26 +833,41 @@ sceditor.formats.bbcode.set(
 sceditor.formats.bbcode.set(
 	'code', {
 		tags: {
-			code: null
+			code: null,
+			div: {
+				class: 'codeheader'
+			},
+			pre: {
+				class: 'bbc_code'
+			}
 		},
 		isInline: false,
 		allowedChildren: ['#', '#newline'],
 		format: function (element, content) {
-			if ($(element).hasClass('php'))
-				return '[php]' + content.replace('&#91;', '[') + '[/php]';
+			let title = element.getAttribute('data-title');
+
+			if (element.className === 'php')
+				return content;
+			else if (element.tagName === 'DIV')
+				return '';
+			else if (element.tagName === 'PRE')
+				return content;
+			else if (element.parentNode.tagName === 'PRE' && !title)
+			{
+				const t = element.parentNode.previousSibling.textContent;
+
+				if (t.indexOf('(') != -1)
+					title = t.replace(/^[^(]+\(/, '').replace(/\)? \[.+/, '');
+			}
 
-			var
-				dom = sceditor.dom,
-				attr = dom.attr,
-				title = attr(element, 'data-title'),
-				from = title ?' =' + title : '';
+			const from = title ? ' =' + title : '';
 
 			return '[code' + from + ']' + content.replace('&#91;', '[') + '[/code]';
 		},
 		html: function (element, attrs, content) {
 			var from = attrs.defaultattr ? ' data-title="' + attrs.defaultattr + '"'  : '';
 
-			return '<code data-name="' + this.opts.txtVars.code + '"' + from + '>' + content.replace('[', '&#91;') + '</code>'
+			return '<pre class="bbc_code"><code data-name="' + this.opts.txtVars.code + '"' + from + '>' + content.replace('[', '&#91;') + '</code></pre>'
 		}
 	}
 );