kabulmark
Version:
A React-based rich text editor built as a wrapper over Meta's Lexical library.
29 lines (28 loc) • 1.1 kB
JavaScript
// Auto-prefix Tailwind utility classes with the configured prefix (km-)
// Usage: className={km("p-2 bg-gray-50 hover:bg-gray-200")}
// Notes:
// - Leaves custom component classes (editor-*, toolbar-*, language-*) untouched
// - Handles variants like hover:, focus:, lg:, rtl:, etc.
// - Skips tokens already prefixed with km-
const SHOULD_SKIP_PREFIX = /^(editor-|toolbar-|language-|km-)/;
function prefixToken(token) {
if (!token)
return token;
if (SHOULD_SKIP_PREFIX.test(token))
return token;
// Split by colon to separate variants from the base utility
const parts = token.split(":");
const base = parts.pop(); // token has at least one part
if (!base || base.startsWith("km-")) {
return token;
}
const prefixedBase = `km-${base}`;
return parts.length ? `${parts.join(":")}:${prefixedBase}` : prefixedBase;
}
export function km(classes) {
const input = Array.isArray(classes)
? classes.filter(Boolean).join(" ")
: classes;
return input.split(/\s+/).filter(Boolean).map(prefixToken).join(" ");
}
export default km;