6e6e4edce7
Two editor features that were in flight alongside the sound work: - FontSize TipTap extension (rides on textStyle) with Small/Normal/Large/ Title presets in the toolbar; StatusBar + CSS support - Image handling: internal/images handler, upload route + config, client API, EditorCore wiring, and md/html/docx export support for images Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { Extension } from '@tiptap/core'
|
|
|
|
// FontSize adds a `fontSize` attribute to the textStyle mark so a writer can
|
|
// pick a size preset (Small / Normal / Large / Title) from the toolbar. It rides
|
|
// on TextStyle (already loaded) rather than introducing a new mark, so it stacks
|
|
// cleanly with color and other inline styling.
|
|
declare module '@tiptap/core' {
|
|
interface Commands<ReturnType> {
|
|
fontSize: {
|
|
setFontSize: (size: string) => ReturnType
|
|
unsetFontSize: () => ReturnType
|
|
}
|
|
}
|
|
}
|
|
|
|
export const FontSize = Extension.create({
|
|
name: 'fontSize',
|
|
|
|
addOptions() {
|
|
return { types: ['textStyle'] }
|
|
},
|
|
|
|
addGlobalAttributes() {
|
|
return [
|
|
{
|
|
types: this.options.types,
|
|
attributes: {
|
|
fontSize: {
|
|
default: null,
|
|
parseHTML: (element) => element.style.fontSize || null,
|
|
renderHTML: (attributes) =>
|
|
attributes.fontSize ? { style: `font-size: ${attributes.fontSize}` } : {},
|
|
},
|
|
},
|
|
},
|
|
]
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setFontSize:
|
|
(size) =>
|
|
({ chain }) =>
|
|
chain().setMark('textStyle', { fontSize: size }).run(),
|
|
unsetFontSize:
|
|
() =>
|
|
({ chain }) =>
|
|
chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run(),
|
|
}
|
|
},
|
|
})
|