From 607573dd44ed956f78569217f765fba99c8cd5e6 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 3 Oct 2020 23:23:25 +0000
Subject: [PATCH] Add buttons to convert <pre> to <p>

---
 webclient/src/Article.js      | 29 +++++++++++++++++++++++++++--
 webclient/src/Style-light.css |  1 +
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index 6d74d2e..5a363c8 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -15,6 +15,7 @@ class Article extends React.Component {
 		this.state = {
 			story: cache[id] || false,
 			error: false,
+			pConv: [],
 		};
 	}
 	
@@ -43,10 +44,22 @@ class Article extends React.Component {
 			);
 	}
 
+	pConvert = (n) => {
+		this.setState({ pConv: [...this.state.pConv, n]});
+	}
+
 	render() {
 		const id = this.props.match ? this.props.match.params.id : 'CLOL';
 		const story = this.state.story;
 		const error = this.state.error;
+		const pConv = this.state.pConv;
+		let nodes = null;
+
+		if (story.text) {
+			let domparser = new DOMParser();
+			let doc = domparser.parseFromString(story.text, 'text/html');
+			nodes = doc.querySelector('body').children;
+		}
 
 		return (
 			<div className='article-container'>
@@ -65,8 +78,20 @@ class Article extends React.Component {
 
 						{infoLine(story)}
 
-						{story.text ?
-							<div className='story-text' dangerouslySetInnerHTML={{ __html: story.text }} />
+						{nodes ?
+							<div className='story-text'>
+								{Object.entries(nodes).map(([k, v]) =>
+									pConv.includes(k) ?
+										v.innerHTML.split('\n\n').map(x =>
+											<p dangerouslySetInnerHTML={{ __html: x }} />
+										)
+									:
+										<>
+											<v.localName dangerouslySetInnerHTML={{ __html: v.innerHTML }} />
+											{v.localName == 'pre' && <button onClick={() => this.pConvert(k)}>Convert Code to Paragraph</button>}
+										</>
+								)}
+							</div>
 						:
 							<p>Problem getting article :(</p>
 						}
diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css
index 8516b59..18e999e 100644
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -4,6 +4,7 @@ body {
 	color: #000000;
 	margin-bottom: 100vh;
 	word-break: break-word;
+	font-kerning: normal;
 }
 
 a {