From ec2e6452d62ad3155d1b0511e4cc652ad6a00f0c Mon Sep 17 00:00:00 2001
From: Antoine <antoine.roy@tetras-libre.fr>
Date: Fri, 8 Dec 2023 16:23:47 +0100
Subject: [PATCH] invert text content and display period / invert button bold
and italic on text content and text content field
---
src/AnnotationCreation.js | 24 +++++++++---------
src/TextEditor.js | 51 +++++++++++++++++++--------------------
2 files changed, 37 insertions(+), 38 deletions(-)
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 49029d3..16a4b4a 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -389,6 +389,18 @@ class AnnotationCreation extends Component {
player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
/>
<form onSubmit={this.submitForm} className={classes.section}>
+ <Grid item xs={12}>
+ <Typography variant="overline">
+ Text Content
+ </Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <TextEditor
+ key={textEditorStateBustingKey}
+ annoHtml={textBody}
+ updateAnnotationBody={this.updateTextBody}
+ />
+ </Grid>
<Grid container>
{ mediaIsVideo && (
<>
@@ -450,18 +462,6 @@ class AnnotationCreation extends Component {
<Grid item xs={12} style={{ marginBottom: 10 }}>
<ImageFormField value={image} onChange={this.handleImgChange} />
</Grid>
- <Grid item xs={12}>
- <Typography variant="overline">
- Text Content
- </Typography>
- </Grid>
- <Grid item xs={12}>
- <TextEditor
- key={textEditorStateBustingKey}
- annoHtml={textBody}
- updateAnnotationBody={this.updateTextBody}
- />
- </Grid>
</Grid>
<Grid container>
<Grid item xs={12}>
diff --git a/src/TextEditor.js b/src/TextEditor.js
index 3dcaee9..5f24d6d 100644
--- a/src/TextEditor.js
+++ b/src/TextEditor.js
@@ -70,34 +70,33 @@ class TextEditor extends Component {
const currentStyle = editorState.getCurrentInlineStyle();
return (
- <div>
- <ToggleButtonGroup
- size="small"
- value={currentStyle.toArray()}
- >
- <ToggleButton
- onClick={this.handleFormating}
- value="BOLD"
+ <div>
+ <div className={classes.editorRoot} onClick={this.handleFocus}>
+ <Editor
+ editorState={editorState}
+ handleKeyCommand={this.handleKeyCommand}
+ onChange={this.onChange}
+ ref={this.editorRef}
+ />
+ </div>
+ <ToggleButtonGroup
+ size="small"
+ value={currentStyle.toArray()}
>
- <BoldIcon />
- </ToggleButton>
- <ToggleButton
- onClick={this.handleFormating}
- value="ITALIC"
- >
- <ItalicIcon />
- </ToggleButton>
- </ToggleButtonGroup>
-
- <div className={classes.editorRoot} onClick={this.handleFocus}>
- <Editor
- editorState={editorState}
- handleKeyCommand={this.handleKeyCommand}
- onChange={this.onChange}
- ref={this.editorRef}
- />
+ <ToggleButton
+ onClick={this.handleFormating}
+ value="BOLD"
+ >
+ <BoldIcon/>
+ </ToggleButton>
+ <ToggleButton
+ onClick={this.handleFormating}
+ value="ITALIC"
+ >
+ <ItalicIcon/>
+ </ToggleButton>
+ </ToggleButtonGroup>
</div>
- </div>
);
}
}
--
GitLab