catamphetamine/captchan#4. Code syntax highlighting.

TODO.md

@@ -4,6 +4,32 @@ react-website: add @serverSideRender(({ children: string }) => string) (и уб
 
 
 
+
+Check <video/> border (focused).
+
+Slideshow: wasExpanded -> ... , isShown -> isCurrentSlide.
+
+Maybe remove isPlayerFocusable() from Video.js.
+
+Сохраняется ли фокус на видео, когда autoPlay меняется с false на true в slideshowMode.
+
+Сделать Picture функциональным компонентом (hooks).
+
+Проверить режим слайдшоу для видео и картинок (и обычный режим).
+
+Проверить expanded режим для видео и картинок.
+
+Maybe add hotkeys for "Expand attachments" and "Start slideshow".
+
+Check spoilers and transparent background pictures.
+
+Check errored image reload on click.
+
+
+
+
+https://github.com/catamphetamine/captchan/issues/4
+
 переделать скриншоты тем можно
 
 virtual scroller page up/down no timer

package.json

@@ -26,6 +26,7 @@
     "react-focus-lock": "^1.18.3",
     "react-redux": "^5.1.1",
     "react-responsive-ui": "^0.14.148",
+    "react-syntax-highlighter": "^11.0.2",
     "react-time-ago": "^5.0.3",
     "react-website": "^3.1.29",
     "redux": "^4.0.0",
@@ -75,7 +76,7 @@
     "universal-webpack": "^0.6.6",
     "url-loader": "^1.1.2",
     "web-service": "^0.5.7",
-    "webpack": "^4.29.0",
+    "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.10",

src/chan-parser/parser/4chan/parseCommentPlugins.js

@@ -1,3 +1,5 @@
+import { getContentText } from 'webapp-frontend/src/utility/post/getPostText'
+
 import createLink from '../../utility/createLink'
 import dropQuoteMarker from '../../dropQuoteMarker'
 import parsePostLink from '../../parsePostLink'
@@ -48,7 +50,7 @@ export const parseCode = {
 		return {
 			type: 'code',
 			// inline: true,
-			content
+			content: content && getContentText(content)
 		}
 	}
 }

src/chan-parser/parser/4chan/parseCommentPlugins.lainchan.js

@@ -6,6 +6,8 @@ import {
 	parseLink
 } from './parseCommentPlugins'
 
+import { getContentText } from 'webapp-frontend/src/utility/post/getPostText'
+
 // They have advanced code highlighting.
 // https://lainchan.org/faq.html
 // `<code/>` tags are placed inside `<pre/>` tags
@@ -36,13 +38,15 @@ export const parseCode = {
 		const result = {
 			type: 'code',
 			inline: true,
-			content
+			content: content && getContentText(content)
 		}
 		// `<pre><code class="hljs clojure">...</code></pre>`.
 		const cssClass = utility.getAttribute('class')
-		const langMatch = cssClass.match(CODE_LANG_REGEXP)
-		if (langMatch) {
-			result.language = langMatch[1]
+		if (cssClass) {
+			const langMatch = cssClass.match(CODE_LANG_REGEXP)
+			if (langMatch) {
+				result.language = langMatch[1]
+			}
 		}
 		return result
 	}

src/pages/Board.js

@@ -34,8 +34,8 @@ import './Board.css'
 @connect(({ app, chan, board }) => ({
 	board: chan.board,
 	threads: chan.threads,
-	settings: app.settings,
 	locale: app.settings.locale,
+	censoredWords: app.settings.censoredWords,
 	virtualScrollerState: board.virtualScrollerState,
 	scrollPosition: board.scrollPosition
 }), {
@@ -77,7 +77,7 @@ export default class BoardPage extends React.Component {
 			getThread,
 			pushLocation,
 			notify,
-			settings,
+			censoredWords,
 			locale
 		} = this.props
 		try {
@@ -86,7 +86,7 @@ export default class BoardPage extends React.Component {
 			await getThread(
 				board.id,
 				thread.id,
-				settings.censoredWords,
+				censoredWords,
 				locale
 			)
 			// Won't ever throw because `goto()` doesn't return a `Promise`.

src/styles/style-variables.css

@@ -173,7 +173,7 @@
 	--PostQuote-color--inverse: #dc5e5e;
 
 	/* PostSubheading. */
-	--PostSubheading-color: #e25656;
+	--PostSubheading-color: #cf5858;
 
 	/* CommentSeparator. */
 	--CommentSeparator-color: var(--Document-backgroundColor);