Lexical: Make labels localizable

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx

@@ -21,7 +21,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadFile } from 'soapbox/actions/compose';
 import { useAppDispatch, useInstance } from 'soapbox/hooks';
@@ -34,6 +34,11 @@ import { ToolbarButton } from './floating-text-format-toolbar-plugin';
 
 import type { List as ImmutableList } from 'immutable';
 
+const messages = defineMessages({
+  createHorizontalLine: { id: 'compose_form.lexical.create_horizontal_line', defaultMessage: 'Create horizontal line' },
+  uploadMedia: { id: 'compose_form.lexical.upload_media', defaultMessage: 'Upload media' },
+});
+
 interface IUploadButton {
   onSelectFile: (src: string) =>  void
 }
@@ -61,10 +66,6 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
     fileElement.current?.click();
   };
 
-  // if (unavailable) {
-  //   return null;
-  // }
-
   const src = (
     onlyImages(attachmentTypes)
       ? require('@tabler/icons/photo.svg')
@@ -75,7 +76,7 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
     <label>
       <ToolbarButton
         onClick={handleClick}
-        aria-label='Upload media'
+        aria-label={intl.formatMessage(messages.uploadMedia)}
         icon={src}
       />
       <input
@@ -99,6 +100,7 @@ const BlockTypeFloatingToolbar = ({
    editor: LexicalEditor
    anchorElem: HTMLElement
  }): JSX.Element => {
+  const intl = useIntl();
   const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
 
   const updateBlockTypeFloatingToolbar = useCallback(() => {
@@ -197,7 +199,7 @@ const BlockTypeFloatingToolbar = ({
         <>
           <ToolbarButton
             onClick={createHorizontalLine}
-            aria-label='Insert horizontal line'
+            aria-label={intl.formatMessage(messages.createHorizontalLine)}
             icon={require('@tabler/icons/line-dashed.svg')}
           />
           <UploadButton onSelectFile={createImage} />

app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx

@@ -43,6 +43,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from 'soapbox/components/ui';
 import { useInstance } from 'soapbox/hooks';
@@ -51,6 +52,15 @@ import { getDOMRangeRect } from '../utils/get-dom-range-rect';
 import { getSelectedNode } from '../utils/get-selected-node';
 import { setFloatingElemPosition } from '../utils/set-floating-elem-position';
 
+const messages = defineMessages({
+  formatBold: { id: 'compose_form.lexical.format_bold', defaultMessage: 'Format bold' },
+  formatItalic: { id: 'compose_form.lexical.format_italic', defaultMessage: 'Format italic' },
+  formatUnderline: { id: 'compose_form.lexical.format_underline', defaultMessage: 'Format underline' },
+  formatStrikethrough: { id: 'compose_form.lexical.format_strikethrough', defaultMessage: 'Format strikethrough' },
+  insertCodeBlock: { id: 'compose_form.lexical.insert_code_block', defaultMessage: 'Insert code block' },
+  insertLink: { id: 'compose_form.lexical.insert_link', defaultMessage: 'Insert link' },
+});
+
 const blockTypeToIcon = {
   bullet: require('@tabler/icons/list.svg'),
   check: require('@tabler/icons/list-check.svg'),
@@ -266,6 +276,7 @@ const TextFormatFloatingToolbar = ({
    isStrikethrough: boolean
    isUnderline: boolean
  }): JSX.Element => {
+  const intl = useIntl();
   const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
 
   const insertLink = useCallback(() => {
@@ -363,7 +374,7 @@ const TextFormatFloatingToolbar = ({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
             active={isBold}
-            aria-label='Format text as bold'
+            aria-label={intl.formatMessage(messages.formatBold)}
             icon={require('@tabler/icons/bold.svg')}
           />
           <ToolbarButton
@@ -371,7 +382,7 @@ const TextFormatFloatingToolbar = ({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
             active={isItalic}
-            aria-label='Format text as italics'
+            aria-label={intl.formatMessage(messages.formatItalic)}
             icon={require('@tabler/icons/italic.svg')}
           />
           <ToolbarButton
@@ -379,7 +390,7 @@ const TextFormatFloatingToolbar = ({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
             active={isUnderline}
-            aria-label='Format text to underlined'
+            aria-label={intl.formatMessage(messages.formatUnderline)}
             icon={require('@tabler/icons/underline.svg')}
           />
           <ToolbarButton
@@ -387,7 +398,7 @@ const TextFormatFloatingToolbar = ({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
             active={isStrikethrough}
-            aria-label='Format text with a strikethrough'
+            aria-label={intl.formatMessage(messages.formatStrikethrough)}
             icon={require('@tabler/icons/strikethrough.svg')}
           />
           <ToolbarButton
@@ -395,13 +406,13 @@ const TextFormatFloatingToolbar = ({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
             }}
             active={isCode}
-            aria-label='Insert code block'
+            aria-label={intl.formatMessage(messages.insertCodeBlock)}
             icon={require('@tabler/icons/code.svg')}
           />
           <ToolbarButton
             onClick={insertLink}
             active={isLink}
-            aria-label='Insert link'
+            aria-label={intl.formatMessage(messages.insertLink)}
             icon={require('@tabler/icons/link.svg')}
           />
         </>

app/soapbox/features/developers/settings-store.tsx

@@ -98,7 +98,7 @@ const SettingsStore: React.FC = () => {
         </FormActions>
       </Form>
 
-      <CardHeader>
+      <CardHeader className='mb-4'>
         <CardTitle title={intl.formatMessage(messages.advanced)} />
       </CardHeader>