Increase parser and SCEditor synchronization + return inline style for color, background, font bbcodes

app/config/defaultBBCode.php

@@ -112,6 +112,7 @@ HANDLER,
             ],
         ],
         'handler' => <<<'HANDLER'
+$parser->inlineStyle(true);
 $color = $attrs['Def'];
 
 if ('#' === $color[0]) {
@@ -141,7 +142,7 @@ if ('#' === $color[0]) {
     }
 }
 
-return "<span class=\"f-bb-color\" data-bb=\"{$color}\">{$body}</span>";
+return "<span class=\"f-bb-color\" style=\"color:{$color};\">{$body}</span>";
 HANDLER,
     ],
     [
@@ -153,6 +154,7 @@ HANDLER,
             ],
         ],
         'handler' => <<<'HANDLER'
+$parser->inlineStyle(true);
 $color = $attrs['Def'];
 
 if ('#' === $color[0]) {
@@ -182,7 +184,7 @@ if ('#' === $color[0]) {
     }
 }
 
-return "<span class=\"f-bb-color\" data-bb=\"{$color}\">{$body}</span>";
+return "<span class=\"f-bb-color\" style=\"color:{$color};\">{$body}</span>";
 HANDLER,
     ],
     [
@@ -194,7 +196,37 @@ HANDLER,
             ],
         ],
         'handler' => <<<'HANDLER'
-return "<span style=\"background-color:{$attrs['Def']};\">{$body}</span>";
+$parser->inlineStyle(true);
+$color = $attrs['Def'];
+
+if ('#' === $color[0]) {
+    $color = \strtoupper($color);
+} else {
+    $repl = [
+        'black'   => '#000000',
+        'gray'    => '#808080',
+        'silver'  => '#C0C0C0',
+        'white'   => '#FFFFFF',
+        'fuchsia' => '#FF00FF',
+        'purple'  => '#800080',
+        'red'     => '#FF0000',
+        'maroon'  => '#800000',
+        'yellow'  => '#FFFF00',
+        'olive'   => '#808000',
+        'lime'    => '#00FF00',
+        'green'   => '#008000',
+        'aqua'    => '#00FFFF',
+        'teal'    => '#008080',
+        'blue'    => '#0000FF',
+        'navy'    => '#000080',
+    ];
+
+    if (isset($repl[$color])) {
+        $color = $repl[$color];
+    }
+}
+
+return "<span class=\"f-bb-bgcolor\" style=\"background-color:{$color};\">{$body}</span>";
 HANDLER,
     ],
     [
@@ -206,7 +238,7 @@ HANDLER,
             ],
         ],
         'handler' => <<<'HANDLER'
-return "<span class=\"f-bb-size{$attrs['Def']}\">{$body}</span>";
+return "<span class=\"f-bb-size\" data-bb=\"{$attrs['Def']}\">{$body}</span>";
 HANDLER,
     ],
     [
@@ -240,7 +272,7 @@ HANDLER,
     [
         'tag' => 'mono',
         'handler' => <<<'HANDLER'
-return "<code class=\"f-bb-mono\">{$body}</code>";
+return "<span class=\"f-bb-mono\">{$body}</span>";
 HANDLER,
     ],
     [
@@ -252,7 +284,9 @@ HANDLER,
             ],
         ],
         'handler' => <<<'HANDLER'
-return "<span class=\"f-bb-font\" data-bb=\"{$attrs['Def']}\">{$body}</span>";
+$parser->inlineStyle(true);
+
+return "<span class=\"f-bb-font\" style=\"font-family:{$attrs['Def']};\">{$body}</span>";
 HANDLER,
     ],
     [

public/js/sc/formats/bbcode.js

@@ -347,6 +347,9 @@
 			tags: {
 				font: {
 					size: null
+				},
+				span: {
+					class: 'f-bb-size'
 				}
 			},
 			styles: {
@@ -356,6 +359,10 @@
 				var	fontSize = attr(element, 'size'),
 					size     = 2;
 
+				if (!fontSize) {
+					fontSize = attr(element, 'data-bb');
+				}
+
 				if (!fontSize) {
 					fontSize = css(element, 'fontSize');
 				}
@@ -694,18 +701,29 @@
 		// START_COMMAND: Code
 		code: {
 			tags: {
+				pre: null,
 				code: null
 			},
 			isInline: false,
 			allowedChildren: ['#', '#newline'],
-			format: '[code]{0}[/code]',
+			format: function (element, content) {
+				if (is(element, 'pre') && is(element.firstChild, 'code')) {
+					content	= this.elementToBbcode(element.firstChild);
+				}
+
+				return '[code]' + content + '[/code]';
+			},
 			html: '<code>{0}</code>'
 		},
 		// END_COMMAND
 
-
 		// START_COMMAND: Left
 		left: {
+			tags: {
+				p: {
+					class: 'f-bb-left'
+				}
+			},
 			styles: {
 				'text-align': [
 					'left',
@@ -723,6 +741,11 @@
 
 		// START_COMMAND: Centre
 		center: {
+			tags: {
+				p: {
+					class: 'f-bb-center'
+				}
+			},
 			styles: {
 				'text-align': [
 					'center',
@@ -740,6 +763,11 @@
 
 		// START_COMMAND: Right
 		right: {
+			tags: {
+				p: {
+					class: 'f-bb-right'
+				}
+			},
 			styles: {
 				'text-align': [
 					'right',
@@ -757,6 +785,11 @@
 
 		// START_COMMAND: Justify
 		justify: {
+			tags: {
+				p: {
+					class: 'f-bb-justify'
+				}
+			},
 			styles: {
 				'text-align': [
 					'justify',
@@ -814,6 +847,62 @@
 		},
 		// END_COMMAND
 
+		// START_COMMAND: Mono
+		mono: {
+			tags: {
+				span: {
+					class: 'f-bb-mono'
+				}
+			},
+			isInline: true,
+			format: '[mono]{0}[/mono]',
+			html: '<span class="f-bb-mono">{0}</span>'
+		},
+		// END_COMMAND
+
+		// START_COMMAND: Spoiler
+		spoiler: {
+			tags: {
+				details: null
+			},
+			isInline: false,
+//			quoteType: QuoteType.never,
+			format: function (element, content) {
+				var summary;
+				var children = element.children;
+
+				for (var i = 0; !summary && i < children.length; i++) {
+					if (is(children[i], 'summary')) {
+						summary = children[i];
+					}
+				}
+
+				if (summary) {
+					element.removeChild(summary);
+					content	= this.elementToBbcode(element);
+					summary = '=' + summary.textContent;
+
+					if (/^=['"]?Hidden text['"]?$/.test(summary)) {
+						summary = '';
+					}
+				} else {
+					summary = '';
+				}
+
+				return '[spoiler' + summary + ']' + content + '[/spoiler]';
+			},
+			html: function (token, attrs, content) {
+				if (attrs.defaultattr) {
+					var summary = escapeEntities(attrs.defaultattr);
+				} else {
+					var summary = 'Hidden text';
+				}
+
+				return '<details><summary>' + summary + '</summary><div class="f-bb-s-body">' + content + '</div></details>';
+			}
+		},
+		// END_COMMAND
+
 		// this is here so that commands above can be removed
 		// without having to remove the , after the last one.
 		// Needed for IE.

public/style/ForkBB/sccontent.css

@@ -89,6 +89,7 @@ video {
   box-sizing: border-box;
   overflow-wrap: break-word;
   word-break: break-word;
+  outline: none;
 }
 
 body {
@@ -214,3 +215,32 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+span.f-bb-mono {
+  border: 0.0625rem solid #C0C0C0;
+  background-color: #FFFFFF;
+  padding: 0 0.25rem;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+}
+
+summary {
+  cursor: pointer;
+  margin-bottom: 0.625rem;
+}
+
+summary::after {
+  display: inline-block;
+  content: "(click to open)";
+  font-size: 0.875rem;
+  margin: 0 0.3125rem;
+  opacity: 0.6;
+}
+
+details[open] > summary::after {
+  content: "(click to close)";
+}
+
+div.f-bb-s-body {
+  padding: 0.625rem;
+  border-inline-start: 0.1875rem solid #AA7939;
+}

public/style/ForkBB/style.css

@@ -164,7 +164,8 @@ body,
 }
 
 #fork code,
-#fork pre {
+#fork pre,
+#fork .f-bb-mono {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 }
 
@@ -1758,143 +1759,35 @@ body,
   background-color: #D3B58D;
 }
 
-#fork .f-bb-size1 {
+#fork .f-bb-size[data-bb="1"] {
   font-size: xx-small;
 }
 
-#fork .f-bb-size2 {
+#fork .f-bb-size[data-bb="2"] {
   font-size: small;
 }
 
-#fork .f-bb-size3 {
+#fork .f-bb-size[data-bb="3"] {
   font-size: medium;
 }
 
-#fork .f-bb-size4 {
+#fork .f-bb-size[data-bb="4"] {
   font-size: large;
 }
 
-#fork .f-bb-size5 {
+#fork .f-bb-size[data-bb="5"] {
   font-size: x-large;
 }
 
-#fork .f-bb-size6 {
+#fork .f-bb-size[data-bb="6"] {
   font-size: xx-large;
 }
 
-#fork .f-bb-size7 {
+#fork .f-bb-size[data-bb="7"] {
   font-size: 3rem;
   font-size: xxx-large; /* https://caniuse.com/mdn-css_properties_font-size_xxx-large */
 }
 
-#fork .f-bb-font[data-bb="Arial"] {
-  font-family: Arial;
-}
-
-#fork .f-bb-font[data-bb="Arial Black"] {
-  font-family: "Arial Black";
-}
-
-#fork .f-bb-font[data-bb="Comic Sans MS"] {
-  font-family: "Comic Sans MS";
-}
-
-#fork .f-bb-font[data-bb="Courier New"] {
-  font-family: "Courier New";
-}
-
-#fork .f-bb-font[data-bb="Georgia"] {
-  font-family: Georgia;
-}
-
-#fork .f-bb-font[data-bb="Impact"] {
-  font-family: Impact;
-}
-
-#fork .f-bb-font[data-bb="Sans-serif"] {
-  font-family: Sans-serif;
-}
-
-#fork .f-bb-font[data-bb="Serif"] {
-  font-family: Serif;
-}
-
-#fork .f-bb-font[data-bb="Times New Roman"] {
-  font-family: "Times New Roman";
-}
-
-#fork .f-bb-font[data-bb="Trebuchet MS"] {
-  font-family: "Trebuchet MS";
-}
-
-#fork .f-bb-font[data-bb="Verdana"] {
-  font-family: Verdana;
-}
-
-#fork .f-bb-color[data-bb="#000000"] {
-  color: #000000;
-}
-
-#fork .f-bb-color[data-bb="#808080"] {
-  color: #808080;
-}
-
-#fork .f-bb-color[data-bb="#C0C0C0"] {
-  color: #C0C0C0;
-}
-
-#fork .f-bb-color[data-bb="#FFFFFF"] {
-  color: #FFFFFF;
-}
-
-#fork .f-bb-color[data-bb="#FF00FF"] {
-  color: #FF00FF;
-}
-
-#fork .f-bb-color[data-bb="#800080"] {
-  color: #800080;
-}
-
-#fork .f-bb-color[data-bb="#FF0000"] {
-  color: #FF0000;
-}
-
-#fork .f-bb-color[data-bb="#800000"] {
-  color: #800000;
-}
-
-#fork .f-bb-color[data-bb="#FFFF00"] {
-  color: #FFFF00;
-}
-
-#fork .f-bb-color[data-bb="#808000"] {
-  color: #808000;
-}
-
-#fork .f-bb-color[data-bb="#00FF00"] {
-  color: #00FF00;
-}
-
-#fork .f-bb-color[data-bb="#008000"] {
-  color: #008000;
-}
-
-#fork .f-bb-color[data-bb="#00FFFF"] {
-  color: #00FFFF;
-}
-
-#fork .f-bb-color[data-bb="#008080"] {
-  color: #008080;
-}
-
-#fork .f-bb-color[data-bb="#0000FF"] {
-  color: #0000FF;
-}
-
-#fork .f-bb-color[data-bb="#000080"] {
-  color: #000080;
-}
-
 /****************/
 /* Предпросмотр */
 /****************/