diff --git a/shared/naturalcrit/codeEditor/autocomplete-emoji.js b/shared/naturalcrit/codeEditor/autocompleteEmoji.js similarity index 88% rename from shared/naturalcrit/codeEditor/autocomplete-emoji.js rename to shared/naturalcrit/codeEditor/autocompleteEmoji.js index 49957af7e..2719526ae 100644 --- a/shared/naturalcrit/codeEditor/autocomplete-emoji.js +++ b/shared/naturalcrit/codeEditor/autocompleteEmoji.js @@ -1,6 +1,6 @@ -const diceFont = require('../../../themes/fonts/icon fonts/diceFont.js'); -const elderberryInn = require('../../../themes/fonts/icon fonts/elderberryInn.js'); -const fontAwesome = require('../../../themes/fonts/icon fonts/fontAwesome.js'); +const diceFont = require('../../../themes/fonts/iconFonts/diceFont.js'); +const elderberryInn = require('../../../themes/fonts/iconFonts/elderberryInn.js'); +const fontAwesome = require('../../../themes/fonts/iconFonts/fontAwesome.js'); const emojis = { ...diceFont, @@ -8,7 +8,7 @@ const emojis = { ...fontAwesome }; -const showEmojiAutocomplete = function(CodeMirror, editor) { +const showAutocompleteEmoji = function(CodeMirror, editor) { CodeMirror.commands.autocomplete = function(editor) { editor.showHint({ completeSingle: false, @@ -78,5 +78,5 @@ const showEmojiAutocomplete = function(CodeMirror, editor) { } module.exports = { - showEmojiAutocomplete + showAutocompleteEmoji }; \ No newline at end of file diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index c5e7ba948..d6543ab37 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -5,7 +5,7 @@ const createClass = require('create-react-class'); const _ = require('lodash'); const cx = require('classnames'); const closeTag = require('./close-tag'); -const autoCompleteEmojis = require('./autocomplete-emoji'); +const autoCompleteEmoji = require('./autocompleteEmoji'); let CodeMirror; if(typeof window !== 'undefined'){ @@ -183,7 +183,7 @@ const CodeEditor = createClass({ // Add custom behaviors (auto-close curlies and auto-complete emojis) closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror); - autoCompleteEmojis.showEmojiAutocomplete(CodeMirror, this.codeMirror); + autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror); // Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works. this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());}); diff --git a/shared/naturalcrit/codeEditor/codeEditor.less b/shared/naturalcrit/codeEditor/codeEditor.less index 65078886d..349166248 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.less +++ b/shared/naturalcrit/codeEditor/codeEditor.less @@ -5,8 +5,8 @@ @import (less) 'codemirror/addon/hint/show-hint.css'; //Icon fonts included so they can appear in emoji autosuggest dropdown -@import (less) './themes/fonts/icon fonts/diceFont.less'; -@import (less) './themes/fonts/icon fonts/elderberryInn.less'; +@import (less) './themes/fonts/iconFonts/diceFont.less'; +@import (less) './themes/fonts/iconFonts/elderberryInn.less'; @keyframes sourceMoveAnimation { 50% {background-color: red; color: white;} diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index b7734ead3..0f8a18a0d 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -7,9 +7,9 @@ const { gfmHeadingId: MarkedGFMHeadingId } = require('marked-gfm-heading-id'); const { markedEmoji: MarkedEmojis} = require('marked-emoji'); //Icon fonts included so they can appear in emoji autosuggest dropdown -const diceFont = require('../../themes/fonts/icon fonts/diceFont.js'); -const elderberryInn = require('../../themes/fonts/icon fonts/elderberryInn.js'); -const fontAwesome = require('../../themes/fonts/icon fonts/fontAwesome.js'); +const diceFont = require('../../themes/fonts/iconFonts/diceFont.js'); +const elderberryInn = require('../../themes/fonts/iconFonts/elderberryInn.js'); +const fontAwesome = require('../../themes/fonts/iconFonts/fontAwesome.js'); const MathParser = require('expr-eval').Parser; const renderer = new Marked.Renderer(); @@ -676,6 +676,12 @@ function MarkedVariables() { //^=====--------------------< Variable Handling >-------------------=====^// // Emoji options +// To add more icon fonts, need to do 4 things: +// 1) Add the font file as .woff2 to themes/fonts/iconFonts folder +// 2) Create a .less file mapping CSS class names to the font character +// 3) Create a .js file mapping Autosuggest names to CSS class names +// 4) Import the .js file to shared/naturalcrit/codeEditor/autocompleteEmoji.js and add to `emojis` object +// 5) Import the .js file here to markdown.js, and add to `emojis` object below const MarkedEmojiOptions = { emojis: { ...diceFont, diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 37300fa61..05076f8c9 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -1,6 +1,6 @@ @import (less) './themes/assets/assets.less'; -@import (less) './themes/fonts/icon fonts/elderberryInn.less'; -@import (less) './themes/fonts/icon fonts/diceFont.less'; +@import (less) './themes/fonts/iconFonts/elderberryInn.less'; +@import (less) './themes/fonts/iconFonts/diceFont.less'; :root { //Colors diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index ec8905630..133e3badf 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -1,6 +1,6 @@ @import (less) './themes/fonts/5e/fonts.less'; @import (less) './themes/assets/assets.less'; -@import (less) './themes/fonts/icon fonts/diceFont.less'; +@import (less) './themes/fonts/iconFonts/diceFont.less'; :root { //Colors diff --git a/themes/fonts/icon fonts/diceFont.js b/themes/fonts/iconFonts/diceFont.js similarity index 100% rename from themes/fonts/icon fonts/diceFont.js rename to themes/fonts/iconFonts/diceFont.js diff --git a/themes/fonts/icon fonts/diceFont.less b/themes/fonts/iconFonts/diceFont.less similarity index 98% rename from themes/fonts/icon fonts/diceFont.less rename to themes/fonts/iconFonts/diceFont.less index 069f6f769..6fe226a05 100644 --- a/themes/fonts/icon fonts/diceFont.less +++ b/themes/fonts/iconFonts/diceFont.less @@ -3,7 +3,7 @@ font-family : 'DiceFont'; font-style : normal; font-weight : normal; - src : url('../../../fonts/icon fonts/diceFont.woff2'); + src : url('../../../fonts/iconFonts/diceFont.woff2'); } .df { diff --git a/themes/fonts/icon fonts/diceFont.woff2 b/themes/fonts/iconFonts/diceFont.woff2 similarity index 100% rename from themes/fonts/icon fonts/diceFont.woff2 rename to themes/fonts/iconFonts/diceFont.woff2 diff --git a/themes/fonts/icon fonts/diceFont_license.md b/themes/fonts/iconFonts/diceFont_license.md similarity index 100% rename from themes/fonts/icon fonts/diceFont_license.md rename to themes/fonts/iconFonts/diceFont_license.md diff --git a/themes/fonts/icon fonts/elderberryInn.js b/themes/fonts/iconFonts/elderberryInn.js similarity index 100% rename from themes/fonts/icon fonts/elderberryInn.js rename to themes/fonts/iconFonts/elderberryInn.js diff --git a/themes/fonts/icon fonts/elderberryInn.less b/themes/fonts/iconFonts/elderberryInn.less similarity index 99% rename from themes/fonts/icon fonts/elderberryInn.less rename to themes/fonts/iconFonts/elderberryInn.less index 6cfe8d5ec..e439bcac0 100644 --- a/themes/fonts/icon fonts/elderberryInn.less +++ b/themes/fonts/iconFonts/elderberryInn.less @@ -3,7 +3,7 @@ font-family : 'Elderberry-Inn'; font-style : normal; font-weight : normal; - src : url('../../../fonts/icon fonts/elderberryInn.woff2'); + src : url('../../../fonts/iconFonts/elderberryInn.woff2'); } .ei { diff --git a/themes/fonts/icon fonts/elderberryInn.woff2 b/themes/fonts/iconFonts/elderberryInn.woff2 similarity index 100% rename from themes/fonts/icon fonts/elderberryInn.woff2 rename to themes/fonts/iconFonts/elderberryInn.woff2 diff --git a/themes/fonts/icon fonts/fontAwesome.js b/themes/fonts/iconFonts/fontAwesome.js similarity index 100% rename from themes/fonts/icon fonts/fontAwesome.js rename to themes/fonts/iconFonts/fontAwesome.js