@widgetic/design-system 0.5.15 → 0.5.17

package/dist/components/shad-editor/icons/image.svelte

@@ -12,8 +12,10 @@
 	import { Button } from '../../ui/button/index.js';
 	import * as Popover from '../../ui/popover/index.js';
 	import { Input } from '../../ui/input/index.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: ImageProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -28,14 +30,14 @@
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">
 					<div class="flex items-center justify-between">
-						<h1 class="text-xl font-bold">Image</h1>
+						<h1 class="text-xl font-bold">{$t('shadEditor.image.title')}</h1>
 						<Popover.Close>
 							<X class="size-4 text-muted-foreground" />
 						</Popover.Close>
 					</div>
-					<p>Insert image url</p>
+					<p>{$t('shadEditor.image.urlHint')}</p>
 					<Input
-						placeholder="Enter image url..."
+						placeholder={$t('shadEditor.image.urlPlaceholder')}
 						type="url"
 						onchange={(e) => {
 							if (e !== null && e.target !== null) {
@@ -45,7 +47,7 @@
 						}}
 						class="w-full"
 					/>
-					<p>OR Pick an Image</p>
+					<p>{$t('shadEditor.image.orPick')}</p>
 					<Input
 						id="picture"
 						type="file"
@@ -72,7 +74,7 @@
 			</Popover.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Add Image</p>
+			<p>{$t('shadEditor.image.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/italic.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: ItalicProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Italic (⌘I)</p>
+			<p>{$t('shadEditor.toolbar.italic')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/link.svelte

@@ -13,8 +13,10 @@
 	import { cn } from '../../../utils.js';
 	import * as Popover from '../../ui/popover/index.js';
 	import { Input } from '../../ui/input/index.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: LinkProps = $props();
+	const { t } = useI18n();
 
 	function setLink(url: string) {
 		if (url.trim() === '') {
@@ -41,14 +43,14 @@
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">
 					<div class="flex items-center justify-between">
-						<h1 class="text-xl font-bold">Link</h1>
+						<h1 class="text-xl font-bold">{$t('shadEditor.link.title')}</h1>
 						<Popover.Close>
 							<X class="size-4 text-muted-foreground" />
 						</Popover.Close>
 					</div>
-					<p>Insert or remove link from selected text.</p>
+					<p>{$t('shadEditor.link.hint')}</p>
 					<Input
-						placeholder="Enter link to attach.."
+						placeholder={$t('shadEditor.link.placeholder')}
 						value={editor?.getAttributes('link').href}
 						onchange={(e) => {
 							//@ts-ignore
@@ -58,20 +60,20 @@
 					/>
 					<div class="flex items-center justify-end gap-2">
 						<Button size="sm" onclick={() => {}}>
-							<Popover.Close>Insert</Popover.Close>
+							<Popover.Close>{$t('shadEditor.link.insert')}</Popover.Close>
 						</Button>
 						<Button
 							variant="destructive"
 							onclick={() => {
 								editor.chain().focus().extendMarkRange('link').unsetLink().run();
-							}}>Remove</Button
+							}}>{$t('shadEditor.link.remove')}</Button
 						>
 					</div>
 				</Popover.Content>
 			</Popover.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Add Or Remove Link</p>
+			<p>{$t('shadEditor.link.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/ordered-list.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: OrderedListProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Ordered List</p>
+			<p>{$t('shadEditor.toolbar.orderedList')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/quickcolor.svelte

@@ -9,20 +9,24 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { type Editor } from '@tiptap/core';
 	import { Check, ChevronDown } from 'lucide-svelte';
+	import { useI18n } from '../i18n/context.js';
+	import type { ShadEditorMessageKey } from '../i18n/messages.js';
 
 	let { editor }: QuickcolorProps = $props();
+	const { t } = useI18n();
 
-	const colors = [
-		{ label: 'Default', value: '' },
-		{ label: 'Blue', value: '#0000FF' },
-		{ label: 'Brown', value: '#A52A2A' },
-		{ label: 'Green', value: '#008000' },
-		{ label: 'Grey', value: '#808080' },
-		{ label: 'Orange', value: '#FFA500' },
-		{ label: 'Pink', value: '#FFC0CB' },
-		{ label: 'Purple', value: '#800080' },
-		{ label: 'Red', value: '#FF0000' },
-		{ label: 'Yellow', value: '#FFFF00' }
+	// The names of the colours are words: a message key each, and the colour itself is the value.
+	const colors: { messageKey: ShadEditorMessageKey; value: string }[] = [
+		{ messageKey: 'shadEditor.colorName.default', value: '' },
+		{ messageKey: 'shadEditor.colorName.blue', value: '#0000FF' },
+		{ messageKey: 'shadEditor.colorName.brown', value: '#A52A2A' },
+		{ messageKey: 'shadEditor.colorName.green', value: '#008000' },
+		{ messageKey: 'shadEditor.colorName.grey', value: '#808080' },
+		{ messageKey: 'shadEditor.colorName.orange', value: '#FFA500' },
+		{ messageKey: 'shadEditor.colorName.pink', value: '#FFC0CB' },
+		{ messageKey: 'shadEditor.colorName.purple', value: '#800080' },
+		{ messageKey: 'shadEditor.colorName.red', value: '#FF0000' },
+		{ messageKey: 'shadEditor.colorName.yellow', value: '#FFFF00' }
 	];
 
 	const currentColor = $derived(editor.getAttributes('textStyle').color);
@@ -40,13 +44,12 @@
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
 					<DropdownMenu.Group>
-						<span class="text-[0.75rem] font-medium text-muted-foreground">Text Color</span>
+						<span class="text-[0.75rem] font-medium text-muted-foreground">{$t('shadEditor.quickColor.textColor')}</span>
 						{#each colors as color}
 							<DropdownMenu.Item
 								class="flex items-center"
 								onclick={() => {
-									if (color.value === '' || color.label === 'Default')
-										editor.chain().focus().unsetColor().run();
+									if (color.value === '') editor.chain().focus().unsetColor().run();
 									else
 										editor
 											.chain()
@@ -59,22 +62,21 @@
 								<span class="rounded border px-1 py-px font-medium" style={`color: ${color.value}`}
 									>A</span
 								>
-								<span>{color.label}</span>
+								<span>{$t(color.messageKey)}</span>
 								{#if editor.isActive('textStyle', { color: color.value })}
-									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+									<Check class="absolute end-2 !size-3 text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}
 					</DropdownMenu.Group>
 					<DropdownMenu.Separator />
 					<DropdownMenu.Group>
-						<span class="text-[0.75rem] font-medium text-muted-foreground">Background Colors</span>
+						<span class="text-[0.75rem] font-medium text-muted-foreground">{$t('shadEditor.quickColor.backgroundColors')}</span>
 						{#each colors as color}
 							<DropdownMenu.Item
 								class="flex items-center"
 								onclick={() => {
-									if (color.value === '' || color.label === 'Default')
-										editor.chain().focus().unsetHighlight().run();
+									if (color.value === '') editor.chain().focus().unsetHighlight().run();
 									else editor.chain().focus().toggleHighlight({ color: color.value }).run();
 								}}
 								closeOnSelect={false}
@@ -83,9 +85,9 @@
 									class="rounded px-1 py-px font-medium"
 									style={`background-color: ${color.value};`}>A</span
 								>
-								<span>{color.label}</span>
+								<span>{$t(color.messageKey)}</span>
 								{#if editor.isActive('highlight', { color: color.value })}
-									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+									<Check class="absolute end-2 !size-3 text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}
@@ -94,7 +96,7 @@
 			</DropdownMenu.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Quick Colors</p>
+			<p>{$t('shadEditor.quickColor.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/redo.svelte

@@ -8,8 +8,10 @@
 	import { type Editor } from '@tiptap/core';
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: RedoProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Undo (⌘R)</p>
+			<p>{$t('shadEditor.toolbar.redo')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/search-replace.svelte

@@ -18,8 +18,10 @@
 		ReplaceAll,
 		ChevronDown
 	} from 'lucide-svelte';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: SearchReplaceProps = $props();
+	const { t } = useI18n();
 
 	let searchText = $state('');
 	let replaceText = $state('');
@@ -90,7 +92,7 @@
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">
 					<Popover.Close
-						class="absolute right-2 top-0 text-muted-foreground"
+						class="absolute end-2 top-0 text-muted-foreground"
 						onclick={() => {
 							clear();
 							updateSearchTerm(true);
@@ -100,29 +102,29 @@
 					</Popover.Close>
 					<div class="flex items-center justify-between">
 						<Input
-							placeholder="Enter Text to search.."
+							placeholder={$t('shadEditor.search.searchPlaceholder')}
 							bind:value={searchText}
 							oninput={() => updateSearchTerm()}
-							class="mr-1 "
+							class="me-1 "
 						/>
-						<Button variant="ghost" class="ml-1 size-8" onclick={previous}>
-							<ArrowLeft />
+						<Button variant="ghost" class="ms-1 size-8" onclick={previous}>
+							<ArrowLeft class="rtl:-scale-x-100" />
 						</Button>
-						<Button variant="ghost" class="ml-1 size-8" onclick={next}>
-							<ArrowRight />
+						<Button variant="ghost" class="ms-1 size-8" onclick={next}>
+							<ArrowRight class="rtl:-scale-x-100" />
 						</Button>
 					</div>
 					<div class="flex items-center justify-between">
 						<Input
-							placeholder="Enter Text to Replace.."
+							placeholder={$t('shadEditor.search.replacePlaceholder')}
 							bind:value={replaceText}
 							oninput={() => updateSearchTerm()}
-							class="mr-1 "
+							class="me-1 "
 						/>
-						<Button variant="ghost" class="ml-1 size-8" onclick={replace}>
+						<Button variant="ghost" class="ms-1 size-8" onclick={replace}>
 							<Replace />
 						</Button>
-						<Button variant="ghost" class="ml-1 size-8" onclick={replaceAll}>
+						<Button variant="ghost" class="ms-1 size-8" onclick={replaceAll}>
 							<ReplaceAll />
 						</Button>
 					</div>
@@ -135,17 +137,17 @@
 								bind:checked={caseSensitive}
 								onchange={() => updateSearchTerm()}
 							/>
-							<p>Case Sensitive</p>
+							<p>{$t('shadEditor.search.caseSensitive')}</p>
 						</div>
 						<div class="flex items-center gap-2">
-							{searchCount > 0 ? searchIndex + 1 : 0} / {searchCount}
+							{$t('shadEditor.search.position', { index: searchCount > 0 ? searchIndex + 1 : 0, count: searchCount ?? 0 })}
 						</div>
 					</div>
 				</Popover.Content>
 			</Popover.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Search And Replace Text</p>
+			<p>{$t('shadEditor.search.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/strikethrough.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: StrikethroughProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Strike (⌘⇧S)</p>
+			<p>{$t('shadEditor.toolbar.strikethrough')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/subscript.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: SubscriptProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Subscript (⌘,)</p>
+			<p>{$t('shadEditor.toolbar.subscript')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/superscript.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: SuperscriptProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Superscript (⌘.)</p>
+			<p>{$t('shadEditor.toolbar.superscript')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/table.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { type Editor } from '@tiptap/core';
 	import { Table, ChevronDown } from 'lucide-svelte';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: TableProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -28,75 +30,75 @@
 						onclick={() =>
 							editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
 					>
-						<span>Insert Table</span>
+						<span>{$t('shadEditor.table.insert')}</span>
 					</DropdownMenu.Item>
 					<DropdownMenu.Sub>
 						<DropdownMenu.SubTrigger>
-							<span>Header</span>
+							<span>{$t('shadEditor.table.header')}</span>
 						</DropdownMenu.SubTrigger>
 						<DropdownMenu.SubContent>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderColumn().run()}>
-								<span>Toggle Column</span>
+								<span>{$t('shadEditor.table.toggleColumn')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderRow().run()}>
-								<span>Toggle Row</span>
+								<span>{$t('shadEditor.table.toggleRow')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderCell().run()}>
-								<span>Toggle Cell</span>
+								<span>{$t('shadEditor.table.toggleCell')}</span>
 							</DropdownMenu.Item>
 						</DropdownMenu.SubContent>
 					</DropdownMenu.Sub>
 					<DropdownMenu.Sub>
 						<DropdownMenu.SubTrigger>
-							<span>Cells</span>
+							<span>{$t('shadEditor.table.cells')}</span>
 						</DropdownMenu.SubTrigger>
 						<DropdownMenu.SubContent>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().mergeCells().run()}>
-								<span>Merge</span>
+								<span>{$t('shadEditor.table.merge')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().splitCell().run()}>
-								<span>Split</span>
+								<span>{$t('shadEditor.table.split')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().mergeOrSplit().run()}>
-								<span>Merge or Split</span>
+								<span>{$t('shadEditor.table.mergeOrSplit')}</span>
 							</DropdownMenu.Item>
 						</DropdownMenu.SubContent>
 					</DropdownMenu.Sub>
 					<DropdownMenu.Sub>
 						<DropdownMenu.SubTrigger>
-							<span>Row</span>
+							<span>{$t('shadEditor.table.row')}</span>
 						</DropdownMenu.SubTrigger>
 						<DropdownMenu.SubContent>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().addRowBefore().run()}>
-								<span>Insert Above</span>
+								<span>{$t('shadEditor.table.insertAbove')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().addRowAfter().run()}>
-								<span>Insert Below</span>
+								<span>{$t('shadEditor.table.insertBelow')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteRow().run()}
 								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 							>
-								<span>Delete Row</span>
+								<span>{$t('shadEditor.table.deleteRow')}</span>
 							</DropdownMenu.Item>
 						</DropdownMenu.SubContent>
 					</DropdownMenu.Sub>
 					<DropdownMenu.Sub>
 						<DropdownMenu.SubTrigger>
-							<span>Column</span>
+							<span>{$t('shadEditor.table.column')}</span>
 						</DropdownMenu.SubTrigger>
 						<DropdownMenu.SubContent>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().addColumnBefore().run()}>
-								<span>Insert Before</span>
+								<span>{$t('shadEditor.table.insertBefore')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item onclick={() => editor.chain().focus().addColumnAfter().run()}>
-								<span>Insert After</span>
+								<span>{$t('shadEditor.table.insertAfter')}</span>
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteColumn().run()}
 								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 							>
-								<span>Delete</span>
+								<span>{$t('shadEditor.table.deleteColumn')}</span>
 							</DropdownMenu.Item>
 						</DropdownMenu.SubContent>
 					</DropdownMenu.Sub>
@@ -104,13 +106,13 @@
 						onclick={() => editor.chain().focus().deleteTable().run()}
 						class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 					>
-						<span>Delete</span>
+						<span>{$t('shadEditor.table.deleteTable')}</span>
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Table</p>
+			<p>{$t('shadEditor.table.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/task-list.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: TaskListProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Tasks List (⌘⇧9)</p>
+			<p>{$t('shadEditor.toolbar.taskList')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/text.svelte

@@ -18,8 +18,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
 	import Button from '../../ui/button/button.svelte';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: TextProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -49,52 +51,52 @@
 						onclick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
 						closeOnSelect={false}
 					>
-						<Heading1 /> Heading 1
+						<Heading1 /> {$t('shadEditor.text.heading1')}
 						{#if editor.isActive('heading', { level: 1 })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
 						closeOnSelect={false}
 					>
-						<Heading2 /> Heading 2
+						<Heading2 /> {$t('shadEditor.text.heading2')}
 						{#if editor.isActive('heading', { level: 2 })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
 						closeOnSelect={false}
 					>
-						<Heading3 /> Heading 3
+						<Heading3 /> {$t('shadEditor.text.heading3')}
 						{#if editor.isActive('heading', { level: 3 })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().setParagraph().run()}
 						closeOnSelect={false}
 					>
-						<Pilcrow /> Paragraph
+						<Pilcrow /> {$t('shadEditor.text.paragraph')}
 						{#if editor.isActive('paragraph')}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute end-2 size-3! text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().toggleCodeBlock().run()}
 						closeOnSelect={false}
 					>
-						<FileJson /> Code Block
+						<FileJson /> {$t('shadEditor.text.codeBlock')}
 						{#if editor.isActive('codeBlock')}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute end-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Text Formatting</p>
+			<p>{$t('shadEditor.text.tooltip')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>