40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import type { CSSProperties } from "react"
|
|
import type { DocParagraphStyleDefinition, DocParagraphStylesCatalog } from "@/lib/drive/docs-paragraph-styles"
|
|
|
|
export function paragraphStylePreviewStyle(def: DocParagraphStyleDefinition): CSSProperties {
|
|
return {
|
|
fontFamily: def.fontFamily,
|
|
fontSize: def.fontSizePx ? `${def.fontSizePx}px` : undefined,
|
|
fontWeight: def.bold ? 700 : 400,
|
|
fontStyle: def.italic ? "italic" : "normal",
|
|
textDecoration: def.underline ? "underline" : undefined,
|
|
color: def.color,
|
|
lineHeight: def.lineHeight,
|
|
}
|
|
}
|
|
|
|
export function buildParagraphStylesCss(
|
|
catalog: DocParagraphStylesCatalog,
|
|
editorSelector = ".ultidrive-richtext-editor"
|
|
): string {
|
|
const rules: string[] = []
|
|
|
|
for (const def of Object.values(catalog.definitions)) {
|
|
const selector = `${editorSelector} [data-style-id="${def.id}"]`
|
|
const props: string[] = []
|
|
if (def.fontFamily) props.push(`font-family: ${def.fontFamily}`)
|
|
if (def.fontSizePx) props.push(`font-size: ${def.fontSizePx}px`)
|
|
if (def.bold) props.push("font-weight: 700")
|
|
if (def.italic) props.push("font-style: italic")
|
|
if (def.underline) props.push("text-decoration: underline")
|
|
if (def.color) props.push(`color: ${def.color}`)
|
|
if (def.lineHeight) props.push(`line-height: ${def.lineHeight}`)
|
|
if (def.spaceBeforePt) props.push(`margin-top: ${def.spaceBeforePt}pt`)
|
|
if (def.spaceAfterPt) props.push(`margin-bottom: ${def.spaceAfterPt}pt`)
|
|
if (def.textAlign) props.push(`text-align: ${def.textAlign}`)
|
|
if (props.length > 0) rules.push(`${selector} { ${props.join("; ")}; }`)
|
|
}
|
|
|
|
return rules.join("\n")
|
|
}
|