feat(SPA): i18n internationzalization, english and french

web/src/components/ArticleEditor.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { ref } from 'vue'
 import type { EditorToolbarItem } from '@nuxt/ui'
 import type { Editor } from '@tiptap/core'
@@ -42,10 +44,10 @@ function onUpdate(value: string) {
 function currentBlockLabel(editor: Editor) {
 	for (let level = 1; level <= 4; level += 1) {
 		if (editor.isActive('heading', { level })) {
-			return `Heading ${level}`
+			return t('Heading {0}', [level])
 		}
 	}
-	return 'Paragraph'
+	return t('Paragraph')
 }
 
 function isDefaultAlignment(editor: Editor) {
@@ -58,12 +60,20 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 			{
 				kind: 'undo',
 				icon: 'i-lucide-undo-2',
-				tooltip: { text: 'Undo' },
+				tooltip: {
+					get text() {
+						return t('Undo')
+					},
+				},
 			},
 			{
 				kind: 'redo',
 				icon: 'i-lucide-redo-2',
-				tooltip: { text: 'Redo' },
+				tooltip: {
+					get text() {
+						return t('Redo')
+					},
+				},
 			},
 		],
 		[
@@ -72,40 +82,70 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 				label: currentBlockLabel(editor),
 				trailingIcon: 'i-lucide-chevron-down',
 				ui: { trailingIcon: 'size-3' },
-				tooltip: { text: 'Paragraph style' },
+				tooltip: {
+					get text() {
+						return t('Paragraph style')
+					},
+				},
 				items: [
 					{
 						icon: 'i-lucide-pilcrow',
-						label: 'Paragraph',
+						get label() {
+							return t('Paragraph')
+						},
 						onSelect: () => editor.chain().focus().setParagraph().run(),
 					},
 					{
 						kind: 'heading',
 						level: 1,
 						icon: 'i-lucide-heading-1',
-						label: 'Heading 1',
-						tooltip: { text: 'Heading 1' },
+						get label() {
+							return t('Heading 1')
+						},
+						tooltip: {
+							get text() {
+								return t('Heading 1')
+							},
+						},
 					},
 					{
 						kind: 'heading',
 						level: 2,
 						icon: 'i-lucide-heading-2',
-						label: 'Heading 2',
-						tooltip: { text: 'Heading 2' },
+						get label() {
+							return t('Heading 2')
+						},
+						tooltip: {
+							get text() {
+								return t('Heading 2')
+							},
+						},
 					},
 					{
 						kind: 'heading',
 						level: 3,
 						icon: 'i-lucide-heading-3',
-						label: 'Heading 3',
-						tooltip: { text: 'Heading 3' },
+						get label() {
+							return t('Heading 3')
+						},
+						tooltip: {
+							get text() {
+								return t('Heading 3')
+							},
+						},
 					},
 					{
 						kind: 'heading',
 						level: 4,
 						icon: 'i-lucide-heading-4',
-						label: 'Heading 4',
-						tooltip: { text: 'Heading 4' },
+						get label() {
+							return t('Heading 4')
+						},
+						tooltip: {
+							get text() {
+								return t('Heading 4')
+							},
+						},
 					},
 				],
 			},
@@ -115,25 +155,41 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 				kind: 'mark',
 				mark: 'bold',
 				icon: 'i-lucide-bold',
-				tooltip: { text: 'Bold' },
+				tooltip: {
+					get text() {
+						return t('Bold')
+					},
+				},
 			},
 			{
 				kind: 'mark',
 				mark: 'italic',
 				icon: 'i-lucide-italic',
-				tooltip: { text: 'Italic' },
+				tooltip: {
+					get text() {
+						return t('Italic')
+					},
+				},
 			},
 			{
 				kind: 'mark',
 				mark: 'underline',
 				icon: 'i-lucide-underline',
-				tooltip: { text: 'Underline' },
+				tooltip: {
+					get text() {
+						return t('Underline')
+					},
+				},
 			},
 			{
 				kind: 'mark',
 				mark: 'strike',
 				icon: 'i-lucide-strikethrough',
-				tooltip: { text: 'Strikethrough' },
+				tooltip: {
+					get text() {
+						return t('Strikethrough')
+					},
+				},
 			},
 		],
 		[
@@ -142,46 +198,78 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 				align: 'left',
 				active: isDefaultAlignment(editor),
 				icon: 'i-lucide-align-left',
-				tooltip: { text: 'Align left' },
+				tooltip: {
+					get text() {
+						return t('Align left')
+					},
+				},
 			},
 			{
 				kind: 'textAlign',
 				align: 'center',
 				icon: 'i-lucide-align-center',
-				tooltip: { text: 'Align center' },
+				tooltip: {
+					get text() {
+						return t('Align center')
+					},
+				},
 			},
 			{
 				kind: 'textAlign',
 				align: 'right',
 				icon: 'i-lucide-align-right',
-				tooltip: { text: 'Align right' },
+				tooltip: {
+					get text() {
+						return t('Align right')
+					},
+				},
 			},
 			{
 				kind: 'textAlign',
 				align: 'justify',
 				icon: 'i-lucide-align-justify',
-				tooltip: { text: 'Justify' },
+				tooltip: {
+					get text() {
+						return t('Justify')
+					},
+				},
 			},
 		],
 		[
 			{
 				kind: 'bulletList',
 				icon: 'i-lucide-list',
-				tooltip: { text: 'Bullet list' },
+				tooltip: {
+					get text() {
+						return t('Bullet list')
+					},
+				},
 			},
 			{
 				kind: 'orderedList',
 				icon: 'i-lucide-list-ordered',
-				tooltip: { text: 'Numbered list' },
+				tooltip: {
+					get text() {
+						return t('Numbered list')
+					},
+				},
 			},
 			{
 				icon: 'i-lucide-indent-decrease',
-				tooltip: { text: 'Outdent' },
+				tooltip: {
+					get text() {
+						return t('Outdent')
+					},
+				},
 				onClick: () => editor.chain().focus().outdent().run(),
 			},
 			{
 				icon: 'i-lucide-indent-increase',
-				tooltip: { text: 'Indent' },
+				tooltip: {
+					get text() {
+						return t('Indent')
+					},
+				},
 				onClick: () => editor.chain().focus().indent().run(),
 			},
 		],
@@ -189,12 +277,22 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 			{
 				kind: 'clearFormatting',
 				icon: 'i-lucide-remove-formatting',
-				tooltip: { text: 'Clear formatting' },
+				tooltip: {
+					get text() {
+						return t('Clear formatting')
+					},
+				},
 			},
 			{
 				icon: 'i-lucide-image-plus',
-				label: 'Image',
-				tooltip: { text: 'Add an image' },
+				get label() {
+					return t('Image')
+				},
+				tooltip: {
+					get text() {
+						return t('Add an image')
+					},
+				},
 				onClick: () => emit('request-image'),
 			},
 		],