From 006b15b467a5cd835a6eab1b49023100bdc8f2e6 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 Oct 2023 19:32:56 +0200 Subject: refactor(components): rewrite Code component and usePrism hook * move Prism styles to Sass placeholders to avoid repeats * let usePrism consumer define its plugins (remove default ones) * remove `plugins` prop from Code component * add new props to Code component to let consumer configure plugins (and handle plugin list from the given options) However there are some problems with Prism plugins: line-highlight and treeview does not seems to be loaded. I don't want to use Babel instead of SWC so I have no solution for now. --- src/utils/hooks/use-prism.tsx | 183 -------------------- src/utils/hooks/use-prism/index.ts | 1 + src/utils/hooks/use-prism/use-prism.test.tsx | 91 ++++++++++ src/utils/hooks/use-prism/use-prism.ts | 217 +++++++++++++++++++++++ src/utils/plugins/prism-color-scheme.cjs | 246 +++++++++++++++++++++++++++ src/utils/plugins/prism-color-scheme.js | 246 --------------------------- 6 files changed, 555 insertions(+), 429 deletions(-) delete mode 100644 src/utils/hooks/use-prism.tsx create mode 100644 src/utils/hooks/use-prism/index.ts create mode 100644 src/utils/hooks/use-prism/use-prism.test.tsx create mode 100644 src/utils/hooks/use-prism/use-prism.ts create mode 100644 src/utils/plugins/prism-color-scheme.cjs delete mode 100644 src/utils/plugins/prism-color-scheme.js (limited to 'src/utils') diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx deleted file mode 100644 index 429808f..0000000 --- a/src/utils/hooks/use-prism.tsx +++ /dev/null @@ -1,183 +0,0 @@ -import Prism from 'prismjs'; -import { useEffect, useMemo } from 'react'; -import { useIntl } from 'react-intl'; - -const PRISM_PLUGINS = [ - 'autoloader', - 'color-scheme', - 'command-line', - 'copy-to-clipboard', - 'diff-highlight', - 'inline-color', - 'line-highlight', - 'line-numbers', - 'match-braces', - 'normalize-whitespace', - 'show-language', - 'toolbar', -] as const; - -export type PrismPlugin = (typeof PRISM_PLUGINS)[number]; - -export type DefaultPrismPlugin = Extract< - PrismPlugin, - | 'autoloader' - | 'color-scheme' - | 'copy-to-clipboard' - | 'match-braces' - | 'normalize-whitespace' - | 'show-language' - | 'toolbar' ->; - -export type OptionalPrismPlugin = Exclude; - -export type PrismLanguage = - | 'apacheconf' - | 'bash' - | 'css' - | 'diff' - | 'docker' - | 'editorconfig' - | 'ejs' - | 'git' - | 'graphql' - | 'html' - | 'ignore' - | 'ini' - | 'javascript' - | 'jsdoc' - | 'json' - | 'jsx' - | 'makefile' - | 'markup' - | 'php' - | 'phpdoc' - | 'regex' - | 'scss' - | 'shell-session' - | 'smarty' - | 'tcl' - | 'toml' - | 'tsx' - | 'twig' - | 'yaml'; - -export type PrismAttributes = { - 'data-prismjs-copy': string; - 'data-prismjs-copy-success': string; - 'data-prismjs-copy-error': string; - 'data-prismjs-color-scheme-dark': string; - 'data-prismjs-color-scheme-light': string; -}; - -export type UsePrismProps = { - language?: PrismLanguage; - plugins: OptionalPrismPlugin[]; -}; - -export type UsePrismReturn = { - attributes: PrismAttributes; - className: string; -}; - -/** - * Import and configure all given Prism plugins. - * - * @param {PrismPlugin[]} plugins - The Prism plugins to activate. - */ -const loadPrismPlugins = async (plugins: PrismPlugin[]) => { - for (const plugin of plugins) { - try { - if (plugin === 'color-scheme') { - await import(`../plugins/prism-${plugin}`); - } else { - await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`); - } - - if (plugin === 'autoloader') { - Prism.plugins.autoloader.languages_path = '/prism/'; - } - } catch (error) { - console.error('usePrism: an error occurred while loading Prism plugins.'); - console.error(error); - } - } -}; - -/** - * Use Prism and its plugins. - * - * @param {UsePrismProps} props - An object of options. - * @returns {UsePrismReturn} An object of data. - */ -export const usePrism = ({ - language, - plugins, -}: UsePrismProps): UsePrismReturn => { - /** - * The order matter. Toolbar must be loaded before some other plugins. - */ - const defaultPlugins: DefaultPrismPlugin[] = useMemo( - () => [ - 'toolbar', - 'autoloader', - 'show-language', - 'copy-to-clipboard', - 'color-scheme', - 'match-braces', - 'normalize-whitespace', - ], - [] - ); - - useEffect(() => { - loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => { - Prism.highlightAll(); - }); - }, [defaultPlugins, plugins]); - - const defaultClassName = 'match-braces'; - const languageClassName = language ? `language-${language}` : ''; - const pluginsClassName = plugins.join(' '); - const className = `${defaultClassName} ${pluginsClassName} ${languageClassName}`; - - const intl = useIntl(); - const copyText = intl.formatMessage({ - defaultMessage: 'Copy', - description: 'usePrism: copy button text (not clicked)', - id: '6GySNl', - }); - const copiedText = intl.formatMessage({ - defaultMessage: 'Copied!', - description: 'usePrism: copy button text (clicked)', - id: 'nsw6Th', - }); - const errorText = intl.formatMessage({ - defaultMessage: 'Use Ctrl+c to copy', - description: 'usePrism: copy button error text', - id: 'lKhTGM', - }); - const darkTheme = intl.formatMessage({ - defaultMessage: 'Dark Theme 🌙', - description: 'usePrism: toggle dark theme button text', - id: 'QLisK6', - }); - const lightTheme = intl.formatMessage({ - defaultMessage: 'Light Theme 🌞', - description: 'usePrism: toggle light theme button text', - id: 'hHVgW3', - }); - const attributes = { - 'data-prismjs-copy': copyText, - 'data-prismjs-copy-success': copiedText, - 'data-prismjs-copy-error': errorText, - 'data-prismjs-color-scheme-dark': darkTheme, - 'data-prismjs-color-scheme-light': lightTheme, - }; - - return { - attributes, - className, - }; -}; diff --git a/src/utils/hooks/use-prism/index.ts b/src/utils/hooks/use-prism/index.ts new file mode 100644 index 0000000..751cde7 --- /dev/null +++ b/src/utils/hooks/use-prism/index.ts @@ -0,0 +1 @@ +export * from './use-prism'; diff --git a/src/utils/hooks/use-prism/use-prism.test.tsx b/src/utils/hooks/use-prism/use-prism.test.tsx new file mode 100644 index 0000000..f7e83a2 --- /dev/null +++ b/src/utils/hooks/use-prism/use-prism.test.tsx @@ -0,0 +1,91 @@ +import { describe, expect, it } from '@jest/globals'; +import { renderHook } from '@testing-library/react'; +import type { PropsWithChildren, ReactElement } from 'react'; +import { type IntlConfig, IntlProvider } from 'react-intl'; +import { + type PrismLanguage, + usePrism, + type PrismAvailablePlugin, + type PrismAttributes, + type PrismToolbarAttributes, +} from './use-prism'; + +type WrapperProps = { + children: ReactElement; +}; + +const createWrapper = ( + Wrapper: typeof IntlProvider, + props: PropsWithChildren +) => + function CreatedWrapper({ children }: WrapperProps) { + return {children}; + }; + +const toolbarAttributes: PrismToolbarAttributes = { + 'data-prismjs-color-scheme-dark': 'Dark Theme 🌙', + 'data-prismjs-color-scheme-light': 'Light Theme 🌞', + 'data-prismjs-copy': 'Copy', + 'data-prismjs-copy-error': 'Use Ctrl+c to copy', + 'data-prismjs-copy-success': 'Copied!', +}; + +describe('usePrism', () => { + it('returns the className and the attributes', () => { + const { result } = renderHook(() => usePrism({}), { + wrapper: createWrapper(IntlProvider, { locale: 'en' }), + }); + + expect(result.current.className).toStrictEqual(''); + expect(result.current.attributes).toStrictEqual(toolbarAttributes); + }); + + it('can return a className based on the given language', () => { + const language: PrismLanguage = 'docker'; + const { result } = renderHook(() => usePrism({ language }), { + wrapper: createWrapper(IntlProvider, { locale: 'en' }), + }); + + expect(result.current.className).toStrictEqual(`language-${language}`); + }); + + it('can return a className based on the given plugins', () => { + const pluginWithClass: PrismAvailablePlugin = 'diff-highlight'; + const { result } = renderHook( + () => usePrism({ plugins: [pluginWithClass] }), + { + wrapper: createWrapper(IntlProvider, { locale: 'en' }), + } + ); + + expect(result.current.className).toMatch(pluginWithClass); + }); + + it('can return a className based on the given language and plugins', () => { + const language: PrismLanguage = 'javascript'; + const pluginWithClass: PrismAvailablePlugin = 'diff-highlight'; + const { result } = renderHook( + () => usePrism({ language, plugins: [pluginWithClass] }), + { + wrapper: createWrapper(IntlProvider, { locale: 'en' }), + } + ); + + expect(result.current.className).toMatch(`language-diff-${language}`); + expect(result.current.className).toMatch(pluginWithClass); + }); + + it('can return the default attributes with the given owns', () => { + const attributes: Partial = { + 'data-filter-output': '(out)', + }; + const { result } = renderHook(() => usePrism({ attributes }), { + wrapper: createWrapper(IntlProvider, { locale: 'en' }), + }); + + expect(result.current.attributes).toStrictEqual({ + ...toolbarAttributes, + ...attributes, + }); + }); +}); diff --git a/src/utils/hooks/use-prism/use-prism.ts b/src/utils/hooks/use-prism/use-prism.ts new file mode 100644 index 0000000..7f8330b --- /dev/null +++ b/src/utils/hooks/use-prism/use-prism.ts @@ -0,0 +1,217 @@ +import Prism from 'prismjs'; +import { useEffect } from 'react'; +import { useIntl } from 'react-intl'; + +export type PrismToolbarAttributes = { + 'data-prismjs-copy': string; + 'data-prismjs-copy-success': string; + 'data-prismjs-copy-error': string; + 'data-prismjs-color-scheme-dark': string; + 'data-prismjs-color-scheme-light': string; +}; + +export type PrismAttributes = PrismToolbarAttributes & { + 'data-continuation-prompt'?: string; + 'data-continuation-str'?: string; + 'data-filter-output'?: string; + 'data-filter-continuation'?: string; + 'data-host'?: string; + 'data-line'?: string; + 'data-prompt'?: string; + 'data-output'?: string; + 'data-start'?: string; + 'data-toolbar-order'?: string; + 'data-user'?: string; +}; + +export type PrismLanguage = + | 'apacheconf' + | 'bash' + | 'css' + | 'diff' + | 'docker' + | 'editorconfig' + | 'ejs' + | 'git' + | 'graphql' + | 'html' + | 'ignore' + | 'ini' + | 'javascript' + | 'jsdoc' + | 'json' + | 'jsx' + | 'makefile' + | 'markup' + | 'php' + | 'phpdoc' + | 'regex' + | 'scss' + | 'shell-session' + | 'smarty' + | 'tcl' + | 'toml' + | 'treeview' + | 'tsx' + | 'twig' + | 'yaml'; + +export type PrismAvailablePlugin = + | 'autoloader' + | 'color-scheme' + | 'command-line' + | 'copy-to-clipboard' + | 'diff-highlight' + | 'inline-color' + | 'line-highlight' + | 'line-numbers' + | 'match-braces' + | 'normalize-whitespace' + | 'show-language' + | 'toolbar' + | 'treeview'; + +type PrismPlugin = { + name: PrismAvailablePlugin; + hasClassName: boolean; +}; + +const prismPlugins: PrismPlugin[] = [ + { name: 'toolbar', hasClassName: false }, + { name: 'autoloader', hasClassName: false }, + { name: 'show-language', hasClassName: false }, + { name: 'color-scheme', hasClassName: false }, + { name: 'copy-to-clipboard', hasClassName: false }, + { name: 'command-line', hasClassName: true }, + { name: 'diff-highlight', hasClassName: true }, + { name: 'inline-color', hasClassName: false }, + { name: 'line-highlight', hasClassName: false }, + { name: 'line-numbers', hasClassName: true }, + { name: 'match-braces', hasClassName: true }, + { name: 'normalize-whitespace', hasClassName: false }, + { name: 'treeview', hasClassName: false }, +]; + +/** + * Reorder the given plugins. + * + * The toolbar plugin must be loaded before some other plugins, so we need to + * ensure it is at the beginning of the array. + * + * @param {PrismAvailablePlugin[]} plugins - An array of Prism plugins. + * @returns {PrismAvailablePlugin[]} The sorted plugins. + */ +const sortPlugins = ( + plugins: PrismAvailablePlugin[] +): PrismAvailablePlugin[] => { + if (!plugins.includes('toolbar')) return plugins; + + const remainingPlugins = plugins.filter((plugin) => plugin !== 'toolbar'); + + return ['toolbar', ...remainingPlugins]; +}; + +/** + * Import and configure all given Prism plugins. + * + * @param {PrismAvailablePlugin[]} plugins - The plugins to activate. + */ +const loadPrismPlugins = async (plugins: PrismAvailablePlugin[]) => { + if (!plugins.length) return; + + const orderedPlugins = sortPlugins(plugins); + + try { + const importPromises = orderedPlugins.map(async (plugin) => { + if (plugin === 'color-scheme') { + return import('../../plugins/prism-color-scheme.cjs'); + } + + return import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`); + }); + + await importPromises.reduce(async (currImport, nextImport) => + currImport.then(await nextImport) + ); + + if (orderedPlugins.includes('autoloader')) + // cSpell:ignore camelcase + // eslint-disable-next-line camelcase -- Case is coming from Prism + Prism.plugins.autoloader.languages_path = '/prism/'; + } catch (error) { + console.error('usePrism: an error occurred while loading Prism plugins.'); + console.error(error); + } +}; + +export type UsePrismProps = { + attributes?: Omit; + language?: PrismLanguage; + plugins?: PrismAvailablePlugin[]; +}; + +/** + * Use Prism and its plugins. + * + * @param {UsePrismProps} props - An object of options. + * @returns An object with attributes and className. + */ +export const usePrism = ({ attributes, language, plugins }: UsePrismProps) => { + const intl = useIntl(); + const pluginsToLoad = prismPlugins.filter( + (plugin) => plugins?.includes(plugin.name) + ); + + const pluginClasses = pluginsToLoad + .map((plugin) => { + if (plugin.hasClassName) return plugin.name; + return undefined; + }) + .filter((maybeStr): maybeStr is PrismAvailablePlugin => !!maybeStr); + + const diffClass = language ? `language-diff-${language}` : 'language-diff'; + const languageClass = plugins?.includes('diff-highlight') + ? diffClass + : `language-${language}`; + + const className = [language ? languageClass : '', ...pluginClasses].join(' '); + + const toolbarAttributes: PrismToolbarAttributes = { + 'data-prismjs-color-scheme-dark': intl.formatMessage({ + defaultMessage: 'Dark Theme 🌙', + description: 'usePrism: toggle dark theme button text', + id: 'QLisK6', + }), + 'data-prismjs-color-scheme-light': intl.formatMessage({ + defaultMessage: 'Light Theme 🌞', + description: 'usePrism: toggle light theme button text', + id: 'hHVgW3', + }), + 'data-prismjs-copy': intl.formatMessage({ + defaultMessage: 'Copy', + description: 'usePrism: copy button text (not clicked)', + id: '6GySNl', + }), + 'data-prismjs-copy-error': intl.formatMessage({ + defaultMessage: 'Use Ctrl+c to copy', + description: 'usePrism: copy button error text', + id: 'lKhTGM', + }), + 'data-prismjs-copy-success': intl.formatMessage({ + defaultMessage: 'Copied!', + description: 'usePrism: copy button text (clicked)', + id: 'nsw6Th', + }), + }; + + useEffect(() => { + loadPrismPlugins(pluginsToLoad.map((plugin) => plugin.name)).then(() => { + Prism.highlightAll(); + }); + }, [pluginsToLoad]); + + return { + attributes: { ...toolbarAttributes, ...attributes }, + className, + }; +}; diff --git a/src/utils/plugins/prism-color-scheme.cjs b/src/utils/plugins/prism-color-scheme.cjs new file mode 100644 index 0000000..2632dd3 --- /dev/null +++ b/src/utils/plugins/prism-color-scheme.cjs @@ -0,0 +1,246 @@ +(function () { + if (typeof Prism === 'undefined' || typeof document === 'undefined') { + return; + } + + if (!Prism.plugins.toolbar) { + console.warn('Color scheme plugin loaded before Toolbar plugin.'); + + return; + } + + /** + * + * @typedef {"dark" | "light" | "system"} Theme + * @typedef {Record<"current", Theme> & Record<"dark" | "light", string>} Settings + */ + + var storage = { + /** + * Get a deserialized value from local storage. + * + * @param {string} key - The local storage key. + * @returns {string | undefined} The value of the given key. + */ + get: function (key) { + var serializedItem = localStorage.getItem(key); + return serializedItem ? JSON.parse(serializedItem) : undefined; + }, + /** + * Set or update a local storage key with a new serialized value. + * + * @param {string} key - The local storage key. + * @param {string} value - The value of the given key. + */ + set: function (key, value) { + var serializedValue = JSON.stringify(value); + localStorage.setItem(key, serializedValue); + }, + }; + + /** + * Check if user has set its color scheme preference. + * + * @returns {boolean} True if user prefers dark color scheme. + */ + function prefersDarkScheme() { + return ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ); + } + + /** + * Get the theme that matches the system theme. + * + * @returns {Theme} The theme to use. + */ + function getThemeFromSystem() { + return prefersDarkScheme() ? 'dark' : 'light'; + } + + /** + * Check if the provided string is a valid theme. + * + * @param {string} theme - A theme to check. + * @returns {boolean} True if it is a valid theme. + */ + function isValidTheme(theme) { + return theme === 'dark' || theme === 'light' || theme === 'system'; + } + + /** + * Set the default theme depending on user preferences. + * + * @returns {Theme} The default theme. + */ + function setDefaultTheme() { + var theme = storage.get('prismjs-color-scheme'); + + return theme && isValidTheme(theme) ? theme : 'system'; + } + + /** + * Traverses up the DOM tree to find data attributes that override the + * default plugin settings. + * + * @param {Element} startElement - An element to start from. + * @returns {Settings} The plugin settings. + */ + function getSettings(startElement) { + /** @type Settings */ + var settings = { + current: setDefaultTheme(), + dark: 'Toggle Dark Theme', + light: 'Toggle Light Theme', + }; + var prefix = 'data-prismjs-color-scheme-'; + + for (var key in settings) { + var attr = prefix + key; + var element = startElement; + + while (element && !element.hasAttribute(attr)) { + element = element.parentElement; + } + + if (element) { + settings[key] = element.getAttribute(attr); + } + } + + return settings; + } + + /** + * Retrieve the new theme depending on current theme value. + * + * @param {Theme} currentTheme - The current theme. + * @returns {Theme} The new theme. + */ + function getNewTheme(currentTheme) { + switch (currentTheme) { + case 'light': + return 'dark'; + case 'dark': + return 'light'; + case 'system': + default: + return getNewTheme(getThemeFromSystem()); + } + } + + /** + * Get the button content depending on current theme. + * + * @param {Theme} theme - The current theme. + * @param {Settings} settings - The plugin settings. + * @returns {string} The button text. + */ + function getButtonContent(theme, settings) { + return theme === 'dark' ? settings['light'] : settings['dark']; + } + + /** + * Update the button text depending on the current theme. + * + * @param {HTMLButtonElement} button - The color scheme button. + * @param {Settings} settings - The plugin settings. + */ + function updateButtonText(button, settings) { + var theme = + settings['current'] === 'system' + ? getThemeFromSystem() + : settings['current']; + + button.textContent = getButtonContent(theme, settings); + } + + /** + * Update pre data-prismjs-color-scheme attribute. + * + * @param {HTMLPreElement} pre - The pre element wrapping the code. + * @param {Theme} theme - The current theme. + */ + function updatePreAttribute(pre, theme) { + pre.setAttribute('data-prismjs-color-scheme-current', theme); + } + + /** + * Update pre attribute for all code blocks. + * + * @param {Theme} theme - The new theme. + */ + function switchTheme(theme) { + var allPre = document.querySelectorAll( + 'pre[data-prismjs-color-scheme-current]' + ); + allPre.forEach((pre) => { + updatePreAttribute(pre, theme); + }); + } + + /** + * Set current theme on pre attribute change. + * + * @param {HTMLPreElement} pre - The pre element wrapping the code. + * @param {Settings} settings - The plugin settings. + */ + function listenAttributeChange(pre, settings) { + var observer = new MutationObserver(function (mutations) { + mutations.forEach((record) => { + var mutatedPre = record.target; + var button = mutatedPre.parentElement.querySelector( + '.prism-color-scheme-button' + ); + var newTheme = mutatedPre.getAttribute( + 'data-prismjs-color-scheme-current' + ); + settings['current'] = newTheme; + updateButtonText(button, settings); + }); + }); + observer.observe(pre, { + attributes: true, + attributeFilter: ['data-prismjs-color-scheme-current'], + }); + } + + /** + * Create a color scheme button. + * + * @param {Object} env - The environment variables of the hook. + * @returns {HTMLButtonElement} The color scheme button. + */ + function getColorSchemeButton(env) { + var element = env.element; + var pre = element.parentElement; + var settings = getSettings(element); + var themeButton = document.createElement('button'); + themeButton.className = 'prism-color-scheme-button'; + themeButton.setAttribute('type', 'button'); + updateButtonText(themeButton, settings); + updatePreAttribute(pre, settings['current']); + listenAttributeChange(pre, settings); + + themeButton.addEventListener('click', () => { + var newTheme = getNewTheme(settings['current']); + switchTheme(newTheme); + storage.set('prismjs-color-scheme', newTheme); + }); + + window.addEventListener('storage', (e) => { + if (e.key === 'prismjs-color-scheme') { + var newTheme = JSON.parse(e.newValue); + if (isValidTheme(newTheme)) updatePreAttribute(pre, newTheme); + } + }); + + return themeButton; + } + + /** + * Register a new button in Prism toolbar plugin. + */ + Prism.plugins.toolbar.registerButton('color-scheme', getColorSchemeButton); +})(); diff --git a/src/utils/plugins/prism-color-scheme.js b/src/utils/plugins/prism-color-scheme.js deleted file mode 100644 index 2632dd3..0000000 --- a/src/utils/plugins/prism-color-scheme.js +++ /dev/null @@ -1,246 +0,0 @@ -(function () { - if (typeof Prism === 'undefined' || typeof document === 'undefined') { - return; - } - - if (!Prism.plugins.toolbar) { - console.warn('Color scheme plugin loaded before Toolbar plugin.'); - - return; - } - - /** - * - * @typedef {"dark" | "light" | "system"} Theme - * @typedef {Record<"current", Theme> & Record<"dark" | "light", string>} Settings - */ - - var storage = { - /** - * Get a deserialized value from local storage. - * - * @param {string} key - The local storage key. - * @returns {string | undefined} The value of the given key. - */ - get: function (key) { - var serializedItem = localStorage.getItem(key); - return serializedItem ? JSON.parse(serializedItem) : undefined; - }, - /** - * Set or update a local storage key with a new serialized value. - * - * @param {string} key - The local storage key. - * @param {string} value - The value of the given key. - */ - set: function (key, value) { - var serializedValue = JSON.stringify(value); - localStorage.setItem(key, serializedValue); - }, - }; - - /** - * Check if user has set its color scheme preference. - * - * @returns {boolean} True if user prefers dark color scheme. - */ - function prefersDarkScheme() { - return ( - window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches - ); - } - - /** - * Get the theme that matches the system theme. - * - * @returns {Theme} The theme to use. - */ - function getThemeFromSystem() { - return prefersDarkScheme() ? 'dark' : 'light'; - } - - /** - * Check if the provided string is a valid theme. - * - * @param {string} theme - A theme to check. - * @returns {boolean} True if it is a valid theme. - */ - function isValidTheme(theme) { - return theme === 'dark' || theme === 'light' || theme === 'system'; - } - - /** - * Set the default theme depending on user preferences. - * - * @returns {Theme} The default theme. - */ - function setDefaultTheme() { - var theme = storage.get('prismjs-color-scheme'); - - return theme && isValidTheme(theme) ? theme : 'system'; - } - - /** - * Traverses up the DOM tree to find data attributes that override the - * default plugin settings. - * - * @param {Element} startElement - An element to start from. - * @returns {Settings} The plugin settings. - */ - function getSettings(startElement) { - /** @type Settings */ - var settings = { - current: setDefaultTheme(), - dark: 'Toggle Dark Theme', - light: 'Toggle Light Theme', - }; - var prefix = 'data-prismjs-color-scheme-'; - - for (var key in settings) { - var attr = prefix + key; - var element = startElement; - - while (element && !element.hasAttribute(attr)) { - element = element.parentElement; - } - - if (element) { - settings[key] = element.getAttribute(attr); - } - } - - return settings; - } - - /** - * Retrieve the new theme depending on current theme value. - * - * @param {Theme} currentTheme - The current theme. - * @returns {Theme} The new theme. - */ - function getNewTheme(currentTheme) { - switch (currentTheme) { - case 'light': - return 'dark'; - case 'dark': - return 'light'; - case 'system': - default: - return getNewTheme(getThemeFromSystem()); - } - } - - /** - * Get the button content depending on current theme. - * - * @param {Theme} theme - The current theme. - * @param {Settings} settings - The plugin settings. - * @returns {string} The button text. - */ - function getButtonContent(theme, settings) { - return theme === 'dark' ? settings['light'] : settings['dark']; - } - - /** - * Update the button text depending on the current theme. - * - * @param {HTMLButtonElement} button - The color scheme button. - * @param {Settings} settings - The plugin settings. - */ - function updateButtonText(button, settings) { - var theme = - settings['current'] === 'system' - ? getThemeFromSystem() - : settings['current']; - - button.textContent = getButtonContent(theme, settings); - } - - /** - * Update pre data-prismjs-color-scheme attribute. - * - * @param {HTMLPreElement} pre - The pre element wrapping the code. - * @param {Theme} theme - The current theme. - */ - function updatePreAttribute(pre, theme) { - pre.setAttribute('data-prismjs-color-scheme-current', theme); - } - - /** - * Update pre attribute for all code blocks. - * - * @param {Theme} theme - The new theme. - */ - function switchTheme(theme) { - var allPre = document.querySelectorAll( - 'pre[data-prismjs-color-scheme-current]' - ); - allPre.forEach((pre) => { - updatePreAttribute(pre, theme); - }); - } - - /** - * Set current theme on pre attribute change. - * - * @param {HTMLPreElement} pre - The pre element wrapping the code. - * @param {Settings} settings - The plugin settings. - */ - function listenAttributeChange(pre, settings) { - var observer = new MutationObserver(function (mutations) { - mutations.forEach((record) => { - var mutatedPre = record.target; - var button = mutatedPre.parentElement.querySelector( - '.prism-color-scheme-button' - ); - var newTheme = mutatedPre.getAttribute( - 'data-prismjs-color-scheme-current' - ); - settings['current'] = newTheme; - updateButtonText(button, settings); - }); - }); - observer.observe(pre, { - attributes: true, - attributeFilter: ['data-prismjs-color-scheme-current'], - }); - } - - /** - * Create a color scheme button. - * - * @param {Object} env - The environment variables of the hook. - * @returns {HTMLButtonElement} The color scheme button. - */ - function getColorSchemeButton(env) { - var element = env.element; - var pre = element.parentElement; - var settings = getSettings(element); - var themeButton = document.createElement('button'); - themeButton.className = 'prism-color-scheme-button'; - themeButton.setAttribute('type', 'button'); - updateButtonText(themeButton, settings); - updatePreAttribute(pre, settings['current']); - listenAttributeChange(pre, settings); - - themeButton.addEventListener('click', () => { - var newTheme = getNewTheme(settings['current']); - switchTheme(newTheme); - storage.set('prismjs-color-scheme', newTheme); - }); - - window.addEventListener('storage', (e) => { - if (e.key === 'prismjs-color-scheme') { - var newTheme = JSON.parse(e.newValue); - if (isValidTheme(newTheme)) updatePreAttribute(pre, newTheme); - } - }); - - return themeButton; - } - - /** - * Register a new button in Prism toolbar plugin. - */ - Prism.plugins.toolbar.registerButton('color-scheme', getColorSchemeButton); -})(); -- cgit v1.2.3