From 4de82b774b415c44fd3003618de0879f42dbcc41 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Thu, 30 Dec 2021 21:26:56 +0100 Subject: [PATCH] Import emojis from scss and work around emoji bug on macos Signed-off-by: Tilman Vatteroth --- global-styles/index.scss | 2 +- global-styles/markdown-tweaks.scss | 5 ++++- global-styles/variables.module.scss | 13 +++++++++++++ global-styles/variables.scss | 8 -------- .../extended-codemirror/codemirror.module.scss | 5 ++++- .../tool-bar/emoji-picker/emoji-picker.tsx | 3 ++- .../markdown-extension/abcjs/abc.module.scss | 3 +-- .../markdown-extension/flowchart/flowchart.tsx | 3 ++- 8 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 global-styles/variables.module.scss delete mode 100644 global-styles/variables.scss diff --git a/global-styles/index.scss b/global-styles/index.scss index 7fae82d52..64b92e14f 100644 --- a/global-styles/index.scss +++ b/global-styles/index.scss @@ -4,7 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -@import "variables"; +@import "variables.module"; @import "variables.light"; @import "bootstrap-vendor/bootstrap"; @import '~react-bootstrap-typeahead/css/Typeahead'; diff --git a/global-styles/markdown-tweaks.scss b/global-styles/markdown-tweaks.scss index 50572a941..226af2663 100644 --- a/global-styles/markdown-tweaks.scss +++ b/global-styles/markdown-tweaks.scss @@ -6,8 +6,11 @@ .markdown-body { position: relative; - font-family: 'Source Sans Pro', "Twemoji", sans-serif; word-break: break-word; + & { + @import "./variables.module.scss"; + font-family: $font-family-base; + } .svg-container { overflow-x: auto; diff --git a/global-styles/variables.module.scss b/global-styles/variables.module.scss new file mode 100644 index 000000000..8f6cc299f --- /dev/null +++ b/global-styles/variables.module.scss @@ -0,0 +1,13 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +$font-family-emojis: "Apple Color Emoji", "Twemoji"; +$font-family-base: "Source Sans Pro", Helvetica, Arial, $font-family-emojis, sans-serif; + +:export { + font-family-emojis: $font-family-emojis; + font-family-base: $font-family-base; +} diff --git a/global-styles/variables.scss b/global-styles/variables.scss deleted file mode 100644 index 1ba01b7d8..000000000 --- a/global-styles/variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - - -$font-family-base: "Source Sans Pro", Helvetica, Arial, "Twemoji", sans-serif; diff --git a/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss b/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss index 6c9f98f5f..ec37b3bf3 100644 --- a/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss +++ b/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss @@ -15,7 +15,10 @@ @import './hints'; .CodeMirror { - font-family: "Fira Code", "Twemoji", Consolas, monaco, monospace; + & { + @import '../../../../../global-styles/variables.module'; + font-family: "Fira Code", $font-family-emojis, Consolas, monaco, monospace; + } letter-spacing: 0.025em; line-height: 1.25; font-size: 18px; diff --git a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx index 6d2e93bdc..d39107164 100644 --- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx +++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx @@ -12,6 +12,7 @@ import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark- import styles from './emoji-picker.module.scss' import forkawesomeIcon from './forkawesome.png' import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons' +import fontStyles from '../../../../../../global-styles/variables.module.scss' export interface EmojiPickerProps { show: boolean @@ -35,7 +36,7 @@ export const emojiPickerConfig = { const twemojiStyle = (): HTMLStyleElement => { const style = document.createElement('style') - style.textContent = 'section.picker { --font-family: "Twemoji" !important; }' + style.textContent = `section.picker { --font-family: ${fontStyles['font-family-emojis']} !important; }` return style } diff --git a/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss b/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss index cd780b36d..249e055f3 100644 --- a/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss +++ b/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss @@ -6,8 +6,6 @@ .abcjs-score { - @import "../../../../../global-styles/variables"; - :global(.markdown-body) & { overflow-x: auto !important; } @@ -17,6 +15,7 @@ } &, text { + @import "../../../../../global-styles/variables.module"; font-family: $font-family-base; } } diff --git a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx index 39722ad7d..554494e4e 100644 --- a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx +++ b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx @@ -10,6 +10,7 @@ import { Trans, useTranslation } from 'react-i18next' import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated' import { Logger } from '../../../../utils/logger' import { cypressId } from '../../../../utils/cypress-attribute' +import fontStyles from '../../../../../global-styles/variables.module.scss' const log = new Logger('FlowChart') @@ -40,7 +41,7 @@ export const FlowChart: React.FC = ({ code }) => { 'line-color': darkModeActivated ? '#ffffff' : '#000000', 'element-color': darkModeActivated ? '#ffffff' : '#000000', 'font-color': darkModeActivated ? '#ffffff' : '#000000', - 'font-family': 'Source Sans Pro, "Twemoji", monospace' + 'font-family': fontStyles['font-family-base'] }) setError(false) } catch (error) {