Desktop: Added support for Fountain screenwriting language

ReactNativeClient/lib/renderers/MdToHtml.js

@@ -11,6 +11,7 @@ const rules = {
 	html_image: require('./MdToHtml/rules/html_image'),
 	highlight_keywords: require('./MdToHtml/rules/highlight_keywords'),
 	code_inline: require('./MdToHtml/rules/code_inline'),
+	fountain: require('./MdToHtml/rules/fountain'),
 };
 const setupLinkify = require('./MdToHtml/setupLinkify');
 const hljs = require('highlight.js');
@@ -69,6 +70,8 @@ class MdToHtml {
 			assetLoaders: {},
 		};
 
+		const ruleOptions = Object.assign({}, options, { resourceBaseUrl: this.resourceBaseUrl_ });
+
 		const markdownIt = new MarkdownIt({
 			breaks: breaks_,
 			linkify: true,
@@ -103,8 +106,6 @@ class MdToHtml {
 			},
 		});
 
-		const ruleOptions = Object.assign({}, options, { resourceBaseUrl: this.resourceBaseUrl_ });
-
 		// To add a plugin, there are three options:
 		//
 		// 1. If the plugin does not need any application specific data, use the standard way:
@@ -138,6 +139,7 @@ class MdToHtml {
 		markdownIt.use(rules.link_open(context, ruleOptions));
 		markdownIt.use(rules.html_image(context, ruleOptions));
 		if (Setting.value('markdown.plugin.katex')) markdownIt.use(rules.katex(context, ruleOptions));
+		if (Setting.value('markdown.plugin.fountain')) markdownIt.use(rules.fountain(context, ruleOptions));
 		markdownIt.use(rules.highlight_keywords(context, ruleOptions));
 		markdownIt.use(rules.code_inline(context, ruleOptions));
 		markdownIt.use(markdownItAnchor);

ReactNativeClient/lib/renderers/MdToHtml/rules/fountain.js

@@ -0,0 +1,134 @@
+const fountain = require('lib/vendor/fountain.min.js');
+
+const fountainCss = `
+.fountain {
+	font-family: monospace;
+	line-height: 107%;
+	max-width: 1000px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.fountain .title-page,
+.fountain .page { 
+	box-shadow: 0 0 5px rgba(0,0,0,0.1);
+	border: 1px solid #d2d2d2;
+	padding: 10%;
+	margin-bottom: 2em;
+}
+
+.fountain h1,
+.fountain h2,
+.fountain h3,
+.fountain h4,
+.fountain p {
+	font-weight: normal;
+	line-height: 107%;
+	margin: 1em 0;
+	border: none;
+	font-size: 1em;
+}
+
+.fountain .bold {
+	font-weight: bold;
+}
+
+.fountain .underline {
+	text-decoration: underline;
+}
+
+.fountain .centered {
+	text-align: center;
+}
+
+.fountain h2 {
+	text-align: right;
+}
+
+.fountain .dialogue p.parenthetical {
+	margin-left: 11%;
+}
+
+.fountain .title-page .credit,
+.fountain .title-page .authors,
+.fountain .title-page .source {
+	text-align: center;
+}
+
+.fountain .title-page h1 {
+	margin-bottom: 1.5em;
+	text-align: center;
+}
+
+.fountain .title-page .source {
+	margin-top: 1.5em;
+}
+
+.fountain .title-page .notes {
+	text-align: right;
+	margin: 3em 0;
+}
+
+.fountain .title-page h1 {
+	margin-bottom: 1.5em;
+	text-align: center;
+}
+
+.fountain .dialogue {
+	margin-left: 3em;
+	margin-right: 3em;
+}
+
+.fountain .dialogue p,
+.fountain .dialogue h1,
+.fountain .dialogue h2,
+.fountain .dialogue h3,
+.fountain .dialogue h4 {
+	margin: 0;
+}
+
+.fountain .dialogue h1,
+.fountain .dialogue h2,
+.fountain .dialogue h3,
+.fountain .dialogue h4 {
+	text-align: center;
+}
+`;
+
+function renderFountainScript(content) {
+	const result = fountain.parse(content);
+	return `
+		<div class="fountain">
+			<div class="title-page">
+				${result.html.title_page}
+			</div>
+			<div class="page">
+				${result.html.script}
+			</div>
+		</div>
+	`;
+}
+
+function addContextAssets(context) {
+	if ('fountain' in context.css) return;
+	context.css['fountain'] = fountainCss;
+}
+
+function installRule(markdownIt, mdOptions, ruleOptions, context) {
+	const defaultRender = markdownIt.renderer.rules.fence || function(tokens, idx, options, env, self) {
+		return self.renderToken(tokens, idx, options);
+	};
+
+	markdownIt.renderer.rules.fence = function (tokens, idx, options, env, self) {
+		const token = tokens[idx];
+		if (token.info !== 'fountain') return defaultRender(tokens, idx, options, env, self);
+		addContextAssets(context);
+		return renderFountainScript(token.content);
+	};
+}
+
+module.exports = function(context, ruleOptions) {
+	return function(md, mdOptions) {
+		installRule(md, mdOptions, ruleOptions, context);
+	};
+};