initial prototype

src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx

@@ -20,6 +20,7 @@ import { FindspotService } from 'fragmentarium/application/FindspotService'
 import { Session } from 'auth/Session'
 import ColophonEditor from 'fragmentarium/ui/fragment/ColophonEditor'
 import { Colophon } from 'fragmentarium/domain/Colophon'
+import FragmentAnnotator from 'fragmentarium/ui/fragment/FragmentAnnotator'
 
 const ContentSection: FunctionComponent = ({
   children,
@@ -47,6 +48,7 @@ type TabName =
   | 'references'
   | 'archaeology'
   | 'colophon'
+  | 'annotation'
 
 const tabNames: TabName[] = [
   'display',
@@ -55,6 +57,7 @@ const tabNames: TabName[] = [
   'references',
   'archaeology',
   'colophon',
+  'annotation',
 ]
 
 function EditorTab({
@@ -92,6 +95,7 @@ function TabContentsMatcher({
     references: () => ReferencesContents(props),
     archaeology: () => ArchaeologyContents(props),
     colophon: () => ColophonContents(props),
+    annotation: () => AnnotationContents(props),
   }[name]()
 }
 
@@ -126,9 +130,7 @@ export const EditorTabs: FunctionComponent<TabsProps> = ({
       {(session) => (
         <Tabs
           id={tabsId}
-          defaultActiveKey={
-            session.isAllowedToTransliterateFragments() ? 'edition' : 'display'
-          }
+          defaultActiveKey={'annotation'}
           mountOnEnter={true}
           className={
             session.isGuestSession() ? 'CuneiformFragment__tabs-hidden' : ''
@@ -235,3 +237,7 @@ function ColophonContents(props: TabsProps): JSX.Element {
 
   return <ColophonEditor updateColophon={updateColophon} {...props} />
 }
+
+function AnnotationContents(props: TabsProps): JSX.Element {
+  return <FragmentAnnotator fragment={props.fragment} />
+}

src/fragmentarium/ui/fragment/FragmentAnnotator.sass

@@ -0,0 +1,4 @@
+.fragment-annotator__markable-token
+    flex-grow: 0
+    padding-left: 0
+    padding-right: 0

src/fragmentarium/ui/fragment/FragmentAnnotator.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Fragment } from 'fragmentarium/domain/fragment'
+import { Col, Container, Row } from 'react-bootstrap'
+import { Token } from 'transliteration/domain/token'
+import { isShift, isTextLine } from 'transliteration/domain/type-guards'
+import './FragmentAnnotator.sass'
+import { TextLine } from 'transliteration/domain/text-line'
+import { AbstractLine } from 'transliteration/domain/abstract-line'
+
+function isMarkable(token: Token): boolean {
+  return !isShift(token)
+}
+
+function DisplayMarkableRow({ line }: { line: TextLine }): JSX.Element {
+  return (
+    <Row>
+      {line.content.map((token, index) => (
+        <React.Fragment key={index}>
+          {index !== 0 && <>&nbsp;</>}
+          {isMarkable(token) && (
+            <Col className={'fragment-annotator__markable-token'}>
+              {token.cleanValue}
+            </Col>
+          )}
+        </React.Fragment>
+      ))}
+    </Row>
+  )
+}
+
+function DisplayUnmarkableRow({ line }: { line: AbstractLine }): JSX.Element {
+  return <Row>{`(${line.prefix}A ${line.type})`}</Row>
+}
+
+export default function FragmentAnnotator({
+  fragment,
+}: {
+  fragment: Fragment
+}): JSX.Element {
+  console.log(fragment.text)
+  return (
+    <>
+      {fragment.text.lines.map((line, index) => (
+        <Container key={index}>
+          {isTextLine(line) ? (
+            <DisplayMarkableRow line={line} />
+          ) : (
+            <DisplayUnmarkableRow line={line} />
+          )}
+        </Container>
+      ))}
+    </>
+  )
+}