Source list

src/UI/components/shared/textEditor/RichTextEditor.tsx

@@ -56,11 +56,13 @@ const ReactStatePlugin = ({ description }: { description: string }) => {
 };
 
 export const TextEditor = (props: {
+  label?: string;
   description: string;
   initialDescription: string;
   setDescription: (d: string) => void;
   error?: boolean;
   helperText?: string;
+  hideBlockTypeSelector?: boolean;
 }) => {
   const editorConfig = {
     namespace: 'speciesInformation',
@@ -69,6 +71,15 @@ export const TextEditor = (props: {
     onError(error: Error) {
       throw error;
     },
+    // Underline (unlike bold/italic) has no native HTML tag Lexical applies
+    // automatically — it needs a theme class name to attach the formatting to.
+    // The matching CSS rule (.editor-text-underline) lives in the global stylesheet
+    // alongside the other .editor-* classes.
+    theme: {
+      text: {
+        underline: 'editor-text-underline',
+      },
+    },
     nodes: [
       HeadingNode,
       ListNode,
@@ -87,7 +98,12 @@ export const TextEditor = (props: {
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className="editor-container">
-        <EditorToolbar />
+        {props.label ? (
+          <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+            {props.label}
+          </Typography>
+        ) : null}
+        <EditorToolbar hideBlockTypeSelector={props.hideBlockTypeSelector} />
         <div className="editor-inner">
           <RichTextPlugin
             contentEditable={

src/UI/components/shared/textEditor/ToolbarPlugin.tsx

@@ -37,7 +37,11 @@ import { useTranslations } from 'next-intl';
 
 const LowPriority = 1;
 
-const EditorToolbar = () => {
+const EditorToolbar = ({
+  hideBlockTypeSelector,
+}: {
+  hideBlockTypeSelector?: boolean;
+}) => {
   const t = useTranslations('RichTextEditor');
   const [editor] = useLexicalComposerContext();
   const [blockType, setBlockType] = useState('paragraph');
@@ -139,19 +143,21 @@ const EditorToolbar = () => {
 
   return (
     <Toolbar variant="dense" disableGutters>
-      <FormControl sx={{ minWidth: 120 }} size="small">
-        <Select
-          value={blockType}
-          onChange={handleBlockTypeChange}
-          sx={{ minWidth: '200px' }}
-        >
-          <MenuItem value={'paragraph'}>{t('normal')}</MenuItem>
-          <MenuItem value={'h1'}>{t('largeHeading')}</MenuItem>
-          <MenuItem value={'h2'}>{t('smallHeading')}</MenuItem>
-          <MenuItem value={'ul'}>{t('bulletList')}</MenuItem>
-          <MenuItem value={'ol'}>{t('numberedList')}</MenuItem>
-        </Select>
-      </FormControl>
+      {!hideBlockTypeSelector && (
+        <FormControl sx={{ minWidth: 120 }} size="small">
+          <Select
+            value={blockType}
+            onChange={handleBlockTypeChange}
+            sx={{ minWidth: '200px' }}
+          >
+            <MenuItem value={'paragraph'}>{t('normal')}</MenuItem>
+            <MenuItem value={'h1'}>{t('largeHeading')}</MenuItem>
+            <MenuItem value={'h2'}>{t('smallHeading')}</MenuItem>
+            <MenuItem value={'ul'}>{t('bulletList')}</MenuItem>
+            <MenuItem value={'ol'}>{t('numberedList')}</MenuItem>
+          </Select>
+        </FormControl>
+      )}
       <ToggleButtonGroup
         value={formats}
         onChange={handleFormat}
@@ -173,8 +179,8 @@ const EditorToolbar = () => {
           <FormatItalicIcon />
         </ToggleButton>
         <ToggleButton
-          value="underlined"
-          aria-label="underlined"
+          value="underline"
+          aria-label="underline"
           onClick={toggleFormat('underline')}
         >
           <FormatUnderlinedIcon />

src/UI/components/sources/source_filters.tsx

@@ -1,11 +1,18 @@
-import { Box, TextField } from '@mui/material';
+import {
+  Box,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+} from '@mui/material';
 import { debounce } from 'lodash';
 import { useCallback, useState } from 'react';
 import { useAppDispatch } from '../../state/hooks';
 import { getSourceInfo } from '../../state/source/actions/getSourceInfo';
 import {
   changeFilterId,
   changeFilterText,
+  changeFilterField,
 } from '../../state/source/sourceSlice';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
@@ -17,6 +24,14 @@ const getEndId = (range: string) => {
   return parseInt(range.substring(range.indexOf('-') + 1, range.length));
 };
 
+// The value each option maps to must match a real column name that
+// reference.service.ts's findReferences can filter against.
+const FILTER_FIELD_OPTIONS = [
+  { value: 'article_title', labelKey: 'filters.fieldTitle' },
+  { value: 'author', labelKey: 'filters.fieldAuthor' },
+  { value: 'journal_title', labelKey: 'filters.fieldJournalTitle' },
+];
+
 export default function SourceFilters(): JSX.Element {
   const t = useTranslations('SourcesPage');
   const dispatch = useAppDispatch();
@@ -25,6 +40,7 @@ export default function SourceFilters(): JSX.Element {
   const hasNumIds = typeof router.query.num_ids === 'string';
 
   const [idError, setIdError] = useState(false);
+  const [filterField, setFilterField] = useState('article_title');
 
   const idHandler = useCallback(
     debounce((value: string) => {
@@ -70,22 +86,57 @@ export default function SourceFilters(): JSX.Element {
     textHandler(event.target.value);
   };
 
+  const handleFieldChange = (event: SelectChangeEvent<string>) => {
+    const value = event.target.value;
+    setFilterField(value);
+    dispatch(changeFilterField(value));
+    dispatch(getSourceInfo());
+  };
+
   return (
     <Box
       sx={{
         display: hasNumIds ? 'none' : 'flex',
-        width: '50%',
-        alignItems: 'flex-end',
+        width: '60%',
+        alignItems: 'stretch',
         paddingBottom: '10px',
         float: 'right',
+        gap: 0,
       }}
     >
+      <Select
+        value={filterField}
+        onChange={handleFieldChange}
+        disabled={hasNumIds}
+        size="small"
+        sx={{
+          minWidth: 160,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          '.MuiOutlinedInput-notchedOutline': {
+            borderRight: 'none',
+          },
+        }}
+      >
+        {FILTER_FIELD_OPTIONS.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {t(option.labelKey)}
+          </MenuItem>
+        ))}
+      </Select>
       <TextField
         id="title-filter"
         data-testid="title-filter"
-        sx={{ width: '60%' }}
-        label={t('filters.titleFilter')}
-        variant="standard"
+        sx={{
+          width: '100%',
+          '.MuiOutlinedInput-root': {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          },
+        }}
+        size="small"
+        placeholder={t('filters.searchPlaceholder')}
+        variant="outlined"
         onChange={handleTitleChange}
         disabled={hasNumIds}
       />