changeset 49:f225e82b2bf8

add code bbcode
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 17 Nov 2022 16:46:21 -0700
parents 4e1a01db19ec
children 0d99cec5142c
files src/bbcode/Bbcode.luan src/bbcode/bbcode.css src/bbcode/bbcode.js src/bbcode/icons/code.svg src/bbcode/icons/code_blocks.svg src/bbcode/icons/format_list_bulleted.svg src/bbcode/icons/format_list_numbered.svg src/bbcode/test.html src/thread.html.luan
diffstat 9 files changed, 32 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/Bbcode.luan
--- a/src/bbcode/Bbcode.luan	Thu Nov 17 00:11:44 2022 -0700
+++ b/src/bbcode/Bbcode.luan	Thu Nov 17 16:46:21 2022 -0700
@@ -72,9 +72,13 @@
 end
 
 function html.code(bbcode,options)
-	local s = starting_cr_regex.gsub(bbcode.contents,"")
-	%><code><%= html_encode(s) %></code><%
-	options.strip_newline = true
+	if bbcode.param == "inline" then
+		%><code inline><%= html_encode(bbcode.contents) %></code><%
+	else
+		local s = starting_cr_regex.gsub(bbcode.contents,"")
+		%><code><%= html_encode(s) %></code><%
+		options.strip_newline = true
+	end
 end
 
 function html.img(bbcode,options)
@@ -250,7 +254,7 @@
 
 function Bbcode.to_html(bbcode)
 	bbcode = bbcode_parse(bbcode)
-	%><div message><%
+	%><div from_bbcode><%
 	to_html(bbcode,{strip_newline=false})
 	%></div><%
 end
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/bbcode.css
--- a/src/bbcode/bbcode.css	Thu Nov 17 00:11:44 2022 -0700
+++ b/src/bbcode/bbcode.css	Thu Nov 17 16:46:21 2022 -0700
@@ -34,3 +34,17 @@
 div[bbcode] div[buttons] img {
 	height: 24px;
 }
+
+div[from_bbcode] {
+	white-space: pre-wrap;
+	line-height: 1.4;
+}
+div[from_bbcode] code {
+	display: block;
+	background-color: #EEE;
+	padding: 7px;
+}
+div[from_bbcode] code[inline] {
+	display: initial;
+	padding: 1px;
+}
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/bbcode.js
--- a/src/bbcode/bbcode.js	Thu Nov 17 00:11:44 2022 -0700
+++ b/src/bbcode/bbcode.js	Thu Nov 17 16:46:21 2022 -0700
@@ -49,6 +49,8 @@
 				<button type=button sup title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
 				<button type=button ul title="Bullet list"><img src="/bbcode/icons/format_list_bulleted.svg"></button>
 				<button type=button ol title="Numbered list"><img src="/bbcode/icons/format_list_numbered.svg"></button>
+				<button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button>
+				<button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button>
 				<button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
 				<input type=file>
 				<button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
@@ -129,6 +131,8 @@
 	add('sup','[sup]','[/sup]');
 	add('ul','[list]\n[item]','[/item]\n[/list]');
 	add('ol','[list=1]\n[item]','[/item]\n[/list]');
+	add('code_block','[code]','[/code]');
+	add('code_inline','[code=inline]','[/code]');
 
 	let fileInput = div.querySelector('input[type="file"]');
 	div.querySelector('button[upload]').onclick = function(){ fileInput.click(); };
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/icons/code.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/code.svg	Thu Nov 17 16:46:21 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"/></svg>
\ No newline at end of file
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/icons/code_blocks.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/code_blocks.svg	Thu Nov 17 16:46:21 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m18.95 30.85 2.2-2.2L16.5 24l4.6-4.6-2.2-2.2-6.8 6.8Zm10.1 0L35.9 24l-6.85-6.85-2.2 2.2L31.5 24l-4.65 4.65ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>
\ No newline at end of file
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/icons/format_list_bulleted.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_list_bulleted.svg	Thu Nov 17 16:46:21 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M8.55 39q-1.05 0-1.8-.725T6 36.55q0-1.05.75-1.8t1.8-.75q1 0 1.725.75.725.75.725 1.8 0 1-.725 1.725Q9.55 39 8.55 39ZM16 38v-3h26v3ZM8.55 26.5q-1.05 0-1.8-.725T6 24q0-1.05.75-1.775.75-.725 1.8-.725 1 0 1.725.75Q11 23 11 24t-.725 1.75q-.725.75-1.725.75Zm7.45-1v-3h26v3ZM8.5 14q-1.05 0-1.775-.725Q6 12.55 6 11.5q0-1.05.725-1.775Q7.45 9 8.5 9q1.05 0 1.775.725Q11 10.45 11 11.5q0 1.05-.725 1.775Q9.55 14 8.5 14Zm7.5-1v-3h26v3Z"/></svg>
\ No newline at end of file
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/icons/format_list_numbered.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_list_numbered.svg	Thu Nov 17 16:46:21 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 40v-1.7h4.2V37H8.1v-1.7h2.1V34H6v-1.7h5.9V40Zm10.45-2.45v-3H42v3ZM6 27.85v-1.6l3.75-4.4H6v-1.7h5.9v1.6l-3.8 4.4h3.8v1.7Zm10.45-2.45v-3H42v3ZM8.1 15.8V9.7H6V8h3.8v7.8Zm8.35-2.55v-3H42v3Z"/></svg>
\ No newline at end of file
diff -r 4e1a01db19ec -r f225e82b2bf8 src/bbcode/test.html
--- a/src/bbcode/test.html	Thu Nov 17 00:11:44 2022 -0700
+++ b/src/bbcode/test.html	Thu Nov 17 16:46:21 2022 -0700
@@ -4,11 +4,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<style>
 			@import "bbcode.css";
-
-			[message] {
-				white-space: pre-wrap;
-				line-height: 1.4;
-			}
 		</style>
 		<script src="bbcode.js"></script>
 		<script>
@@ -47,7 +42,7 @@
 		<p>top</p>
 		<p edit></p>
 		<p>result:</p>
-		<p result><div message></div></p>
+		<p result></p>
 		<p>bottom</p>
 	</body>
 </html>
diff -r 4e1a01db19ec -r f225e82b2bf8 src/thread.html.luan
--- a/src/thread.html.luan	Thu Nov 17 00:11:44 2022 -0700
+++ b/src/thread.html.luan	Thu Nov 17 16:46:21 2022 -0700
@@ -53,10 +53,6 @@
 			span[ago] {
 				color: #888;
 			}
-			[message] {
-				white-space: pre-wrap;
-				line-height: 1.4;
-			}
 <%	if user_name == nil then %>
 			[logged_in] {
 				display: none;
@@ -102,7 +98,7 @@
 			function updated(postId,html) {
 				let postDiv = document.querySelector('[post="'+postId+'"]');
 				if(postDiv)
-					postDiv.querySelector('[message]').innerHTML = html;
+					postDiv.querySelector('[from_bbcode]').outerHTML = html;
 			}
 
 			function newPost() {