add option to specify and custom system font for editor. fixes chinch…

…ang#136
fengweijp · Jul 15, 2017 · 71e7a7e · 71e7a7e
1 parent a9898f2
commit 71e7a7e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -419,7 +419,10 @@ <h3>Editor</h3>
 							<option value="Inconsolata">Inconsolata</option>
 							<option value="Monoid">Monoid</option>
 							<option value="FixedSys">FixedSys</option>
+							<option disabled="disabled">----</option>
+							<option value="other">Other font from system</option>
 						</select>
+						<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
 					</label>
 					<label class="line">
 						Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px

diff --git a/src/script.js b/src/script.js
@@ -5,7 +5,8 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
-runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate
+runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
+customEditorFontInput
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -1582,6 +1583,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
 		$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
 		$('[data-setting=autoPreview]').checked = prefs.autoPreview;
 		$('[data-setting=editorFont]').value = prefs.editorFont;
+		$('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
 		$('[data-setting=autoSave]').checked = prefs.autoSave;
 		$('[data-setting=autoComplete]').checked = prefs.autoComplete;
 	}
@@ -1620,8 +1622,13 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
 			'/lib/codemirror/theme/' + prefs.editorTheme + '.css';
 		fontStyleTag.textContent = fontStyleTemplate.textContent.replace(
 			/fontname/g,
-			prefs.editorFont || 'FiraCode'
+			(prefs.editorFont === 'other'
+				? prefs.editorCustomFont
+				: prefs.editorFont) || 'FiraCode'
 		);
+		customEditorFontInput.classList[
+			prefs.editorFont === 'other' ? 'remove' : 'add'
+		]('hide');
 
 		['html', 'js', 'css'].forEach(type => {
 			scope.cm[type].setOption(
@@ -2143,6 +2150,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
 				refreshOnResize: false,
 				autoPreview: true,
 				editorFont: 'FiraCode',
+				editorCustomFont: '',
 				autoSave: true,
 				autoComplete: true
 			},
@@ -2177,6 +2185,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
 				prefs.refreshOnResize = result.refreshOnResize;
 				prefs.autoPreview = result.autoPreview;
 				prefs.editorFont = result.editorFont;
+				prefs.editorCustomFont = result.editorCustomFont;
 				prefs.autoSave = result.autoSave;
 				prefs.autoComplete = result.autoComplete;