diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass b/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass index c76af9ca1..2907ed8bc 100644 --- a/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass +++ b/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass @@ -9,7 +9,7 @@ border-top: 0 tr.line-separator height: 1em - // border-top: 1px solid black + border-top: 1px solid grey .annotation-line &__source &__annotation-layer @@ -18,3 +18,11 @@ white-space: nowrap // border: 1px dashed orange margin-right: 1em + + &__checkbox-column + visibility: hidden + &:hover + visibility: visible !important + &__lemma-column + min-width: 10em + // white-space: nowrap diff --git a/src/transliteration/ui/annotation-line-tokens.tsx b/src/transliteration/ui/annotation-line-tokens.tsx index 15245d8d1..3ad7e2a1a 100644 --- a/src/transliteration/ui/annotation-line-tokens.tsx +++ b/src/transliteration/ui/annotation-line-tokens.tsx @@ -1,10 +1,92 @@ -import React from 'react' +import React, { Component } from 'react' import { TextLineColumn } from 'transliteration/domain/columns' import { TextLine } from 'transliteration/domain/text-line' import { isLeftSide, Protocol } from 'transliteration/domain/token' import { MarkableToken } from './MarkableToken' import { Form } from 'react-bootstrap' import lineNumberToString from 'transliteration/domain/lineNumberToString' +import AsyncSelect from 'react-select/async' +import FragmentService from 'fragmentarium/application/FragmentService' +import { + components, + MultiValueProps, + OptionProps, + SingleValueProps, +} from 'react-select' +import InlineMarkdown from 'common/InlineMarkdown' +import { LemmaOption } from 'fragmentarium/ui/lemmatization/LemmaSelectionForm' +import WordService from 'dictionary/application/WordService' + +type Props = { + markable: MarkableToken + fragmentService: FragmentService + wordService: WordService +} + +const Option = ( + props: OptionProps | OptionProps +): JSX.Element => ( + + + +) + +const MultiValueLabel = (props: MultiValueProps): JSX.Element => ( + + + +) + +const SingleValue = (props: SingleValueProps): JSX.Element => ( + + + +) + +type State = { + isComplex: boolean +} + +class LemmaEditForm extends Component { + markable: MarkableToken + lemmatizable: boolean + + constructor(props: Props) { + super(props) + this.markable = props.markable + this.lemmatizable = this.markable.token.lemmatizable || false + const isComplex = this.markable.hasLemma && this.markable.lemma.length === 1 + + this.state = { + isComplex: isComplex, + } + } + + loadOptions = ( + inputValue: string, + callback: (lemmas: LemmaOption[]) => void + ): void => { + this.props.wordService + .searchLemma(inputValue) + .then((words) => words.map((word) => new LemmaOption(word))) + .then(callback) + } + + render(): JSX.Element { + return ( + + ) + } +} function createTokenMarkables( columns: readonly TextLineColumn[] @@ -60,29 +142,43 @@ function DisplayMarkable({ export function AnnotationLine({ line, lineIndex, + fragmentService, + wordService, }: { line: TextLine lineIndex: number + fragmentService: FragmentService + wordService: WordService }): JSX.Element { const markables = createTokenMarkables(line.columns) - const checkbox = + const checkbox = ( + + + + ) return ( <> - {checkbox} + {checkbox} ({lineNumberToString(line.lineNumber)}) {markables.map((markable, index) => { return ( - {checkbox} + {checkbox} - {markable.lemma} + + + ) })}