feat: migrate editor components from FontAwesome to Phosphor Icons

frontend/src/components/input/editor/CommandsList.vue

@@ -8,7 +8,7 @@
 				:class="{ 'is-selected': index === selectedIndex }"
 				@click="selectItem(index)"
 			>
-				<Icon :icon="item.icon" />
+				<component :is="item.icon" />
 				<div class="description">
 					<p>{{ item.title }}</p>
 					<p>{{ item.description }}</p>
@@ -27,10 +27,10 @@
 <script lang="ts">
 /* eslint-disable vue/component-api-style */
 import type {PropType} from 'vue'
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import type {Component} from 'vue'
 
 interface CommandItem {
-	icon: IconProp
+	icon: Component
 	title: string
 	description: string
 	command: () => void

frontend/src/components/input/editor/EditorToolbar.vue

@@ -8,7 +8,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'header']" />
+					<PhTextH />
 					<span
 						class="icon__lower-text"
 						aria-hidden="true"
@@ -23,7 +23,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'header']" />
+					<PhTextH />
 					<span
 						class="icon__lower-text"
 						aria-hidden="true"
@@ -38,7 +38,7 @@
 				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'header']" />
+					<PhTextH />
 					<span
 						class="icon__lower-text"
 						aria-hidden="true"
@@ -56,7 +56,7 @@
 				@click="editor.chain().focus().toggleBold().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'bold']" />
+					<PhTextB />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.bold') }}</span>
 			</BaseButton>
@@ -67,7 +67,7 @@
 				@click="editor.chain().focus().toggleItalic().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'italic']" />
+					<PhTextItalic />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.italic') }}</span>
 			</BaseButton>
@@ -78,7 +78,7 @@
 				@click="editor.chain().focus().toggleUnderline().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'underline']" />
+					<PhTextUnderline />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.underline') }}</span>
 			</BaseButton>
@@ -89,7 +89,7 @@
 				@click="editor.chain().focus().toggleStrike().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'strikethrough']" />
+					<PhTextStrikethrough />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span>
 			</BaseButton>
@@ -103,7 +103,7 @@
 				@click="editor.chain().focus().toggleCodeBlock().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'code']" />
+					<PhCode />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.code') }}</span>
 			</BaseButton>
@@ -114,7 +114,7 @@
 				@click="editor.chain().focus().toggleBlockquote().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'quote-right']" />
+					<PhQuotes />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.quote') }}</span>
 			</BaseButton>
@@ -128,7 +128,7 @@
 				@click="editor.chain().focus().toggleBulletList().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'list-ul']" />
+					<PhListBullets />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span>
 			</BaseButton>
@@ -139,7 +139,7 @@
 				@click="editor.chain().focus().toggleOrderedList().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'list-ol']" />
+					<PhListNumbers />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span>
 			</BaseButton>
@@ -150,7 +150,7 @@
 				@click="editor.chain().focus().toggleTaskList().run()"
 			>
 				<span class="icon">
-					<Icon icon="list-check" />
+					<PhListChecks />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.taskList') }}</span>
 			</BaseButton>
@@ -163,7 +163,7 @@
 				@click="e => emit('imageUploadClicked', e)"
 			>
 				<span class="icon">
-					<Icon icon="image" />
+					<PhImage />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.image') }}</span>
 			</BaseButton>
@@ -178,7 +178,7 @@
 				@click="setLink"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'link']" />
+					<PhLink />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.link') }}</span>
 			</BaseButton>
@@ -190,7 +190,7 @@
 				@click="editor.chain().focus().setParagraph().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'paragraph']" />
+					<PhParagraph />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.text') }}</span>
 			</BaseButton>
@@ -201,7 +201,7 @@
 				@click="editor.chain().focus().setHorizontalRule().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'ruler-horizontal']" />
+					<PhRuler />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
 			</BaseButton>
@@ -214,7 +214,7 @@
 				@click="editor.chain().focus().undo().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'undo']" />
+					<PhArrowCounterClockwise />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.undo') }}</span>
 			</BaseButton>
@@ -224,7 +224,7 @@
 				@click="editor.chain().focus().redo().run()"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'redo']" />
+					<PhArrowClockwise />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.redo') }}</span>
 			</BaseButton>
@@ -239,7 +239,7 @@
 				@click="toggleTableMode"
 			>
 				<span class="icon">
-					<Icon :icon="['fas', 'table']" />
+					<PhTable />
 				</span>
 				<span class="is-sr-only">{{ $t('input.editor.table.title') }}</span>
 			</BaseButton>
@@ -366,6 +366,13 @@
 import {ref} from 'vue'
 import type {Editor} from '@tiptap/vue-3'
 
+import {
+	PhTextH, PhTextB, PhTextItalic, PhTextUnderline, PhTextStrikethrough,
+	PhCode, PhQuotes, PhListBullets, PhListNumbers, PhListChecks,
+	PhImage, PhLink, PhParagraph, PhRuler,
+	PhArrowCounterClockwise, PhArrowClockwise, PhTable,
+} from '@phosphor-icons/vue'
+
 import BaseButton from '@/components/base/BaseButton.vue'
 import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
 

frontend/src/components/input/editor/TipTap.vue

@@ -23,7 +23,7 @@
 					:class="{ 'is-active': editor.isActive('bold') }"
 					@click="() => editor?.chain().focus().toggleBold().run()"
 				>
-					<Icon :icon="['fas', 'bold']" />
+					<PhTextB />
 				</BaseButton>
 				<BaseButton
 					v-tooltip="$t('input.editor.italic')"
@@ -31,7 +31,7 @@
 					:class="{ 'is-active': editor.isActive('italic') }"
 					@click="() => editor?.chain().focus().toggleItalic().run()"
 				>
-					<Icon :icon="['fas', 'italic']" />
+					<PhTextItalic />
 				</BaseButton>
 				<BaseButton
 					v-tooltip="$t('input.editor.underline')"
@@ -39,7 +39,7 @@
 					:class="{ 'is-active': editor.isActive('underline') }"
 					@click="() => editor?.chain().focus().toggleUnderline().run()"
 				>
-					<Icon :icon="['fas', 'underline']" />
+					<PhTextUnderline />
 				</BaseButton>
 				<BaseButton
 					v-tooltip="$t('input.editor.strikethrough')"
@@ -47,7 +47,7 @@
 					:class="{ 'is-active': editor.isActive('strike') }"
 					@click="() => editor?.chain().focus().toggleStrike().run()"
 				>
-					<Icon :icon="['fas', 'strikethrough']" />
+					<PhTextStrikethrough />
 				</BaseButton>
 				<BaseButton
 					v-tooltip="$t('input.editor.code')"
@@ -55,7 +55,7 @@
 					:class="{ 'is-active': editor.isActive('code') }"
 					@click="() => editor?.chain().focus().toggleCode().run()"
 				>
-					<Icon :icon="['fas', 'code']" />
+					<PhCode />
 				</BaseButton>
 				<BaseButton
 					v-tooltip="$t('input.editor.link')"
@@ -63,7 +63,7 @@
 					:class="{ 'is-active': editor.isActive('link') }"
 					@click="setLink"
 				>
-					<Icon :icon="['fas', 'link']" />
+					<PhLink />
 				</BaseButton>
 			</div>
 		</BubbleMenu>
@@ -146,6 +146,8 @@ import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {eventToHotkeyString} from '@github/hotkey'
 
+import {PhTextB, PhTextItalic, PhTextUnderline, PhTextStrikethrough, PhCode, PhLink} from '@phosphor-icons/vue'
+
 import EditorToolbar from './EditorToolbar.vue'
 
 import StarterKit from '@tiptap/starter-kit'

frontend/src/components/input/editor/suggestion.ts

@@ -1,5 +1,10 @@
 import type {Editor, Range} from '@tiptap/core'
+import type {Component} from 'vue'
 import {VueRenderer} from '@tiptap/vue-3'
+import {
+	PhTextAa, PhTextH, PhListBullets, PhListNumbers, PhListChecks,
+	PhQuotes, PhCode, PhImage, PhRuler,
+} from '@phosphor-icons/vue'
 import {computePosition, flip, shift, offset, autoUpdate} from '@floating-ui/dom'
 
 import CommandsList from './CommandsList.vue'
@@ -21,7 +26,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.text'),
 					description: t('input.editor.textTooltip'),
-					icon: 'fa-font',
+					icon: PhTextAa,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -34,7 +39,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.heading1'),
 					description: t('input.editor.heading1Tooltip'),
-					icon: 'fa-header',
+					icon: PhTextH,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -47,7 +52,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.heading2'),
 					description: t('input.editor.heading2Tooltip'),
-					icon: 'fa-header',
+					icon: PhTextH,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -60,7 +65,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.heading3'),
 					description: t('input.editor.heading3Tooltip'),
-					icon: 'fa-header',
+					icon: PhTextH,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -73,7 +78,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.bulletList'),
 					description: t('input.editor.bulletListTooltip'),
-					icon: 'fa-list-ul',
+					icon: PhListBullets,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -86,7 +91,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.orderedList'),
 					description: t('input.editor.orderedListTooltip'),
-					icon: 'fa-list-ol',
+					icon: PhListNumbers,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -99,7 +104,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.taskList'),
 					description: t('input.editor.taskListTooltip'),
-					icon: 'fa-list-check',
+					icon: PhListChecks,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -112,7 +117,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.quote'),
 					description: t('input.editor.quoteTooltip'),
-					icon: 'fa-quote-right',
+					icon: PhQuotes,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -125,7 +130,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.code'),
 					description: t('input.editor.codeTooltip'),
-					icon: 'fa-code',
+					icon: PhCode,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -138,7 +143,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.image'),
 					description: t('input.editor.imageTooltip'),
-					icon: 'fa-image',
+					icon: PhImage,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
@@ -154,7 +159,7 @@ export default function suggestionSetup(t: TranslateFunction) {
 				{
 					title: t('input.editor.horizontalRule'),
 					description: t('input.editor.horizontalRuleTooltip'),
-					icon: 'fa-ruler-horizontal',
+					icon: PhRuler,
 					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()