From 1d7675c01745dc4c642220706db8b8a8ed837043 Mon Sep 17 00:00:00 2001 From: Andrey Nenashev Date: Thu, 30 May 2024 13:52:51 +0200 Subject: [PATCH] chore: enable spellcheck for md editor (#1683) --- .../QueryExampleDetailsContainer.tsx | 6 ++--- .../Terms/TermDetails/Overview/Overview.tsx | 4 ++-- .../TermDefinition/TermDefinition.styles.ts | 2 +- .../TermDefinition/TermDefinition.tsx | 23 ++++++++----------- .../shared/elements/Markdown/Markdown.tsx | 10 +++++++- .../hooks/api/dataModelling/queryExamples.ts | 1 - odd-platform-ui/src/lib/hooks/api/terms.ts | 2 +- 7 files changed, 25 insertions(+), 23 deletions(-) diff --git a/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx b/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx index 71e977605..7af94134d 100644 --- a/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx +++ b/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import { Box, Grid, Typography } from '@mui/material'; import { useGetQueryExampleDetails } from 'lib/hooks/api/dataModelling/queryExamples'; import { useAppDateTime } from 'lib/hooks'; @@ -67,9 +67,7 @@ const QueryExampleDetailsContainer: React.FC = () => { diff --git a/odd-platform-ui/src/components/Terms/TermDetails/Overview/Overview.tsx b/odd-platform-ui/src/components/Terms/TermDetails/Overview/Overview.tsx index 92a059a6c..f3ba76963 100644 --- a/odd-platform-ui/src/components/Terms/TermDetails/Overview/Overview.tsx +++ b/odd-platform-ui/src/components/Terms/TermDetails/Overview/Overview.tsx @@ -1,6 +1,6 @@ -import { Grid, Typography } from '@mui/material'; +import { Grid } from '@mui/material'; import React, { useMemo, type FC } from 'react'; -import { Markdown, SkeletonWrapper } from 'components/shared/elements'; +import { SkeletonWrapper } from 'components/shared/elements'; import { Permission, PermissionResourceType } from 'generated-sources'; import { WithPermissionsProvider } from 'components/shared/contexts'; import { useTermsRouteParams } from 'routes'; diff --git a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts index 45607c86b..073513755 100644 --- a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts +++ b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts @@ -14,4 +14,4 @@ export const Definition = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', marginBottom: theme.spacing(1), -})); \ No newline at end of file +})); diff --git a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx index c874d6cd9..ae087b650 100644 --- a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx +++ b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx @@ -1,12 +1,10 @@ import React, { type FC } from 'react'; -import { Box, Grid, Typography } from '@mui/material'; -import { WithPermissions } from 'components/shared/contexts'; +import { Typography } from '@mui/material'; import type { TermRef } from 'generated-sources'; -import { Permission } from 'generated-sources'; -import { AppTooltip, Button, Markdown } from 'components/shared/elements'; +import { AppTooltip, Markdown } from 'components/shared/elements'; import { useTermWiki } from 'lib/hooks'; import { updateDataSetFieldDescription } from 'redux/thunks'; -import { InformationIcon, StrokedInfoIcon } from 'components/shared/icons'; +import { InformationIcon } from 'components/shared/icons'; import * as S from './TermDefinition.styles'; interface TermDefinitionProps { @@ -16,14 +14,13 @@ interface TermDefinitionProps { } const TermDefinition: FC = ({ definition, termId, terms }) => { - const { error, internalDescription, transformDescriptionToMarkdown, editMode } = - useTermWiki({ - terms, - description: definition, - entityId: termId, - updateDescription: updateDataSetFieldDescription, - isDatasetField: false, - }); + const { transformDescriptionToMarkdown } = useTermWiki({ + terms, + description: definition, + entityId: termId, + updateDescription: updateDataSetFieldDescription, + isDatasetField: false, + }); const tooltipInfoContent = ( diff --git a/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx b/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx index bdcb100c6..f16587e8f 100644 --- a/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx +++ b/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx @@ -1,4 +1,4 @@ -import React, { type FC, type ReactNode, type CSSProperties } from 'react'; +import React, { type FC, type ReactNode, type CSSProperties, useEffect } from 'react'; import type { ContextStore } from '@uiw/react-md-editor'; import MDEditor from '@uiw/react-md-editor'; import type { Position } from 'unist'; @@ -87,8 +87,16 @@ const Markdown: FC = ({ 'data-color-mode'?: 'light' | 'dark'; }; + useEffect(() => { + document + .getElementById('md-editor') + ?.querySelector('textarea') + ?.setAttribute('spellcheck', 'true'); + }, []); + return editor ? ( queryExampleApi.getQueryExampleByTermId({ termId }), }); } - diff --git a/odd-platform-ui/src/lib/hooks/api/terms.ts b/odd-platform-ui/src/lib/hooks/api/terms.ts index fa6ffbbf5..dab5760e3 100644 --- a/odd-platform-ui/src/lib/hooks/api/terms.ts +++ b/odd-platform-ui/src/lib/hooks/api/terms.ts @@ -119,7 +119,7 @@ export function useUnassignTermQueryExample() { mutationKey: ['unassignTermQueryExample'], mutationFn: async ({ exampleId, - termId + termId, }: TermApiDeleteQueryExampleToTermRelationshipRequest) => termApi.deleteQueryExampleToTermRelationship({ termId,