Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
Something went wrong. Try again.
2.5 kB · 64 lines
TypeScript
at debugDirs
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import { useState, useEffect, useCallback } from 'react';
const STORAGE_KEY = 'scb-placeholders';const CHANGE_EVENT = 'scb-placeholders-change';const FIELD = 'input.scb-placeholder';
const readPlaceholders = (): Record<string, string> => { try { return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) ?? '{}') ?? {}; } catch (error) { console.error(error); return {}; }}
const readValue = (key: string, initialValue: string): string => { if (typeof window === 'undefined') { return initialValue; } return readPlaceholders()[key] ?? initialValue;}
/** * Reads/writes the same values as starlight-codeblocks fill-in placeholders. * * The placeholders script only reads sessionStorage once (on init) and keeps values in memory after that, * so writing to sessionStorage directly does not update code blocks. Instead, changes are routed through a * placeholder input on the page (the script listens for bubbling 'input' events on document), and the * 'scb-placeholders-change' event the script dispatches after saving is used to re-read the stored values. * * The browser 'storage' event can't be used for this because it never fires in the document that made the change. */export const useTypedCodeblocksStorage = (key: string, initialValue: string): [string, (value: string) => void] => { const [storedValue, setStoredValue] = useState<string>(() => readValue(key, initialValue));
useEffect(() => { const sync = () => setStoredValue(readValue(key, initialValue)); document.addEventListener(CHANGE_EVENT, sync); return () => document.removeEventListener(CHANGE_EVENT, sync); }, [key, initialValue]);
const updateValue = useCallback((newValue: string) => { if (newValue === readValue(key, initialValue)) { return; } const input = Array.from(document.querySelectorAll<HTMLInputElement>(FIELD)).find(x => x.placeholder === key); if (input !== undefined) { input.value = newValue; input.dispatchEvent(new Event('input', { bubbles: true })); return; } // no code block on this page uses this key so write to storage ourselves and notify other hooks const placeholders = readPlaceholders(); if (newValue) { placeholders[key] = newValue; } else { delete placeholders[key]; } window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(placeholders)); document.dispatchEvent(new CustomEvent(CHANGE_EVENT)); }, [key, initialValue]);
return [storedValue, updateValue];}