feat: add superscript/subscript to BubbleMenu + fix slash menu descriptions
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 45s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 45s
This commit is contained in:
@@ -67,12 +67,11 @@ const slashCommands: SlashItem[] = [
|
|||||||
{ title: 'Align Left', description: 'Align text left', icon: AlignLeft, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('left').run() },
|
{ title: 'Align Left', description: 'Align text left', icon: AlignLeft, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('left').run() },
|
||||||
{ title: 'Align Center', description: 'Center text', icon: AlignCenter, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('center').run() },
|
{ title: 'Align Center', description: 'Center text', icon: AlignCenter, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('center').run() },
|
||||||
{ title: 'Align Right', description: 'Align text right', icon: AlignRight, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('right').run() },
|
{ title: 'Align Right', description: 'Align text right', icon: AlignRight, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('right').run() },
|
||||||
{ title: 'Superscript', description: 'Raise text above baseline', icon: SuperscriptIcon, category: 'Formatting', command: (e) => {
|
{ title: 'Superscript', description: 'Sélectionner du texte d’abord', icon: SuperscriptIcon, category: 'Formatting', command: (e) => {
|
||||||
// Only apply when text is selected, otherwise typed text gets stuck in superscript mode
|
|
||||||
if (!e.state.selection.empty) e.chain().focus().toggleSuperscript().run()
|
if (!e.state.selection.empty) e.chain().focus().toggleSuperscript().run()
|
||||||
else e.chain().focus().run()
|
else e.chain().focus().run()
|
||||||
}},
|
}},
|
||||||
{ title: 'Subscript', description: 'Lower text below baseline', icon: SubscriptIcon, category: 'Formatting', command: (e) => {
|
{ title: 'Subscript', description: 'Sélectionner du texte d’abord', icon: SubscriptIcon, category: 'Formatting', command: (e) => {
|
||||||
if (!e.state.selection.empty) e.chain().focus().toggleSubscript().run()
|
if (!e.state.selection.empty) e.chain().focus().toggleSubscript().run()
|
||||||
else e.chain().focus().run()
|
else e.chain().focus().run()
|
||||||
}},
|
}},
|
||||||
@@ -246,12 +245,14 @@ function BubbleToolbar({ editor }: { editor: Editor | null }) {
|
|||||||
if (!editor) return null
|
if (!editor) return null
|
||||||
|
|
||||||
const marks = [
|
const marks = [
|
||||||
{ icon: Bold, active: editor.isActive('bold'), action: () => editor.chain().focus().toggleBold().run() },
|
{ icon: Bold, active: editor.isActive('bold'), action: () => editor.chain().focus().toggleBold().run(), title: 'Gras' },
|
||||||
{ icon: Italic, active: editor.isActive('italic'), action: () => editor.chain().focus().toggleItalic().run() },
|
{ icon: Italic, active: editor.isActive('italic'), action: () => editor.chain().focus().toggleItalic().run(), title: 'Italique' },
|
||||||
{ icon: UnderlineIcon, active: editor.isActive('underline'), action: () => editor.chain().focus().toggleUnderline().run() },
|
{ icon: UnderlineIcon, active: editor.isActive('underline'), action: () => editor.chain().focus().toggleUnderline().run(), title: 'Souligné' },
|
||||||
{ icon: Strikethrough, active: editor.isActive('strike'), action: () => editor.chain().focus().toggleStrike().run() },
|
{ icon: Strikethrough, active: editor.isActive('strike'), action: () => editor.chain().focus().toggleStrike().run(), title: 'Barré' },
|
||||||
{ icon: Code, active: editor.isActive('code'), action: () => editor.chain().focus().toggleCode().run() },
|
{ icon: Code, active: editor.isActive('code'), action: () => editor.chain().focus().toggleCode().run(), title: 'Code' },
|
||||||
{ icon: Highlighter, active: editor.isActive('highlight'), action: () => editor.chain().focus().toggleHighlight().run() },
|
{ icon: Highlighter, active: editor.isActive('highlight'), action: () => editor.chain().focus().toggleHighlight().run(), title: 'Surligner' },
|
||||||
|
{ icon: SuperscriptIcon, active: editor.isActive('superscript'), action: () => editor.chain().focus().toggleSuperscript().run(), title: 'Exposant' },
|
||||||
|
{ icon: SubscriptIcon, active: editor.isActive('subscript'), action: () => editor.chain().focus().toggleSubscript().run(), title: 'Indice' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const handleAI = async (option: 'clarify' | 'shorten' | 'improve') => {
|
const handleAI = async (option: 'clarify' | 'shorten' | 'improve') => {
|
||||||
@@ -313,7 +314,7 @@ function BubbleToolbar({ editor }: { editor: Editor | null }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-0.5 px-1 py-0.5 relative">
|
<div className="flex items-center gap-0.5 px-1 py-0.5 relative">
|
||||||
{marks.map((m, i) => (
|
{marks.map((m, i) => (
|
||||||
<button key={i} onClick={m.action} className={cn('notion-bubble-btn', m.active && 'notion-bubble-btn-active')}>
|
<button key={i} onClick={m.action} title={m.title} className={cn('notion-bubble-btn', m.active && 'notion-bubble-btn-active')}>
|
||||||
<m.icon className="w-3.5 h-3.5" />
|
<m.icon className="w-3.5 h-3.5" />
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -492,9 +492,9 @@
|
|||||||
"slashAlignRight": "Aligner à droite",
|
"slashAlignRight": "Aligner à droite",
|
||||||
"slashAlignRightDesc": "Aligner le texte à droite",
|
"slashAlignRightDesc": "Aligner le texte à droite",
|
||||||
"slashSuperscript": "Exposant",
|
"slashSuperscript": "Exposant",
|
||||||
"slashSuperscriptDesc": "Texte au-dessus de la ligne de base",
|
"slashSuperscriptDesc": "Sélectionner du texte d'abord",
|
||||||
"slashSubscript": "Indice",
|
"slashSubscript": "Indice",
|
||||||
"slashSubscriptDesc": "Texte sous la ligne de base",
|
"slashSubscriptDesc": "Sélectionner du texte d'abord",
|
||||||
"slashClarify": "Clarifier",
|
"slashClarify": "Clarifier",
|
||||||
"slashClarifyDesc": "Rendre le texte plus clair",
|
"slashClarifyDesc": "Rendre le texte plus clair",
|
||||||
"slashShorten": "Raccourcir",
|
"slashShorten": "Raccourcir",
|
||||||
|
|||||||
Reference in New Issue
Block a user