Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Target

Show changes

Only incoming changes from source

Include changes to target since source was created

Commits on Source 25

Intégration du slider · b6ade082
Antoine Roy authored Nov 15, 2023

b6ade082
slider integration · b775edfc
Antoine Roy authored Nov 17, 2023

b775edfc
hard coded values · dac6dda3
Antoine Roy authored Nov 17, 2023

dac6dda3
State manage the corect way · f8260e07
Antoine Roy authored Nov 27, 2023

f8260e07
Uncomment the handleChangeTime Function · dfcd3ada
Antoine Roy authored Nov 27, 2023

dfcd3ada
Range slider in place but doesn't workas intended · 42632439
Antoine Roy authored Nov 28, 2023

42632439
updating the location of the video's time selection on the annotation panel · d57ab90a
Antoine Roy authored Nov 30, 2023

d57ab90a
Delete END & START buttons. Updating handlechangetime function ton intehrate... · b78e56b3
Antoine Roy authored Nov 30, 2023
```
Delete END & START buttons. Updating handlechangetime function ton intehrate the buttons comportement
```
b78e56b3
Deleted arrows that incremented the timer and binded there comportement with arrow key · 2202c8fb
Antoine Roy authored Nov 30, 2023

2202c8fb
handle error when pressing letter key on time fields · ab9e6df3
Antoine Roy authored Nov 30, 2023

ab9e6df3
Change HMSinput's input type and refactor how the update of props are managed · 441376d2
Antoine Roy authored Dec 1, 2023

441376d2
Remove console.log() used for debuging · 771cb4ad
Antoine Roy authored Dec 1, 2023

771cb4ad
Correction EsLint , ajout de .idea dans les .gitignore et suppression de commentaire inutile · 1ca4346e
Antoine Roy authored Dec 7, 2023

1ca4346e
changement de police de Time Range · af7b7875
Antoine Roy authored Dec 8, 2023

af7b7875
Changement de couleur slider / Changement de typo time range to Display period · 60347207
Antoine Roy authored Dec 8, 2023

60347207
Start and End set over the clock icons · 3706d133
Antoine Roy authored Dec 8, 2023

3706d133
textAlign center on Time Input · b36d3caa
Antoine Roy authored Dec 8, 2023

b36d3caa
invert text content and display period / invert button bold and italic on text... · ec2e6452
Antoine Roy authored Dec 8, 2023
```
invert text content and display period / invert button bold and italic on text content and text content field
```
ec2e6452
some linter · 3d7c2b78
Antoine Roy authored Dec 8, 2023

3d7c2b78
Created a .nvmrc file and update AnnotationCreation.js to update the slider as entended. · a4cea483
Antoine Roy authored Dec 18, 2023

a4cea483
changement de chemin · aa5b240a
Antoine Roy authored Dec 19, 2023

aa5b240a
récupération de la durée de la vidéo utilisée par le Manifest · e9853d36
Antoine Roy authored Dec 19, 2023

e9853d36
Improve UX of HS Input button · ad5f8956
Anthony authored Dec 28, 2023

ad5f8956
Improve usability of HMS Input button · 0cd17e32
Anthony authored Dec 28, 2023

0cd17e32
Merge branch 'feature/SliderRangeTime/AntoineTest' into 'tetras-main' · 7942ec9a
Anthony authored Dec 28, 2023
```
Change on the slide bar's UI from pluggin annotation

See merge request !7
```
7942ec9a

Some changes are not shown.

For a faster browsing experience, only 7 of 8 files are shown. Download one of the files below to see all changes.

.gitignore

+2 −0

Original line number	Original line	Diff line number	Diff line
	@@ -5,3 +5,5 @@
	/node_modules		/node_modules
	/umd		/umd
	npm-debug.log*		npm-debug.log*
			.idea

.nvmrc

0 → 100644

+1 −0

Original line number	Original line	Diff line number	Diff line
			16.20.2
			No newline at end of file

README.md

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -17,6 +17,7 @@ Persisting annotations requires implementing an a IIIF annotation server. Severa

	`mirador-annotations` requires an instance of Mirador 3. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application. See the [live demo's index.js](https://github.com/ProjectMirador/mirador-annotations/blob/master/demo/src/index.js) for an example of importing the `mirador-annotations` plugin and configuring the adapter.		`mirador-annotations` requires an instance of Mirador 3. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application. See the [live demo's index.js](https://github.com/ProjectMirador/mirador-annotations/blob/master/demo/src/index.js) for an example of importing the `mirador-annotations` plugin and configuring the adapter.

			You must use node v16.20.2. You can `run nvm use` at the racine of the project to set your node version to 16.20.2.
	## Contribute		## Contribute
	Mirador's development, design, and maintenance is driven by community needs and ongoing feedback and discussion. Join us at our regularly scheduled community calls, on [IIIF slack #mirador](http://bit.ly/iiif-slack), or the [mirador-tech](https://groups.google.com/forum/#!forum/mirador-tech) and [iiif-discuss](https://groups.google.com/forum/#!forum/iiif-discuss) mailing lists. To suggest features, report bugs, and clarify usage, please submit a GitHub issue.		Mirador's development, design, and maintenance is driven by community needs and ongoing feedback and discussion. Join us at our regularly scheduled community calls, on [IIIF slack #mirador](http://bit.ly/iiif-slack), or the [mirador-tech](https://groups.google.com/forum/#!forum/mirador-tech) and [iiif-discuss](https://groups.google.com/forum/#!forum/iiif-discuss) mailing lists. To suggest features, report bugs, and clarify usage, please submit a GitHub issue.

package-lock.json

0 → 100644

+41562 −0

File added.

Preview size limit exceeded, changes collapsed.

package.json

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -49,6 +49,7 @@
	"@babel/eslint-parser": "^7.19.1",		"@babel/eslint-parser": "^7.19.1",
	"@babel/preset-env": "^7.10.4",		"@babel/preset-env": "^7.10.4",
	"@babel/preset-react": "^7.10.4",		"@babel/preset-react": "^7.10.4",
			"@babel/plugin-proposal-private-property-in-object":"^7.21.11" ,
	"@material-ui/core": "^4.11.0",		"@material-ui/core": "^4.11.0",
	"@material-ui/icons": "^4.9.1",		"@material-ui/icons": "^4.9.1",
	"@material-ui/lab": "^4.0.0-alpha.56",		"@material-ui/lab": "^4.0.0-alpha.56",

src/AnnotationCreation.js

+263 −167

Original line number	Original line	Diff line number	Diff line
	@@ -19,13 +19,13 @@ import StrokeColorIcon from '@material-ui/icons/BorderColor';
	import LineWeightIcon from '@material-ui/icons/LineWeight';		import LineWeightIcon from '@material-ui/icons/LineWeight';
	import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';		import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
	import FormatShapesIcon from '@material-ui/icons/FormatShapes';		import FormatShapesIcon from '@material-ui/icons/FormatShapes';
	import TextField from '@material-ui/core/TextField';
	import { SketchPicker } from 'react-color';		import { SketchPicker } from 'react-color';
	import { v4 as uuid } from 'uuid';		import { v4 as uuid } from 'uuid';
	import { withStyles } from '@material-ui/core/styles';		import { withStyles } from '@material-ui/core/styles';
	import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';		import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
	import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';		import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
	import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';		import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
			import Slider from '@material-ui/core/Slider';
	import AnnotationDrawing from './AnnotationDrawing';		import AnnotationDrawing from './AnnotationDrawing';
	import TextEditor from './TextEditor';		import TextEditor from './TextEditor';
	import WebAnnotation from './WebAnnotation';		import WebAnnotation from './WebAnnotation';
	@@ -33,7 +33,6 @@ import CursorIcon from './icons/Cursor';
	import HMSInput from './HMSInput';		import HMSInput from './HMSInput';
	import ImageFormField from './ImageFormField';		import ImageFormField from './ImageFormField';
	import { secondsToHMS } from './utils';		import { secondsToHMS } from './utils';

	/** Extract time information from annotation target */		/** Extract time information from annotation target */
	function timeFromAnnoTarget(annotarget) {		function timeFromAnnoTarget(annotarget) {
	console.info('TODO proper time extraction from: ', annotarget);		console.info('TODO proper time extraction from: ', annotarget);
	@@ -62,7 +61,6 @@ class AnnotationCreation extends Component {
	super(props);		super(props);

	const annoState = {};		const annoState = {};

	if (props.annotation) {		if (props.annotation) {
	//		//
	// annotation body		// annotation body
	@@ -136,8 +134,12 @@ class AnnotationCreation extends Component {
	svg: null,		svg: null,
	textBody: '',		textBody: '',
	textEditorStateBustingKey: 0,		textEditorStateBustingKey: 0,
			// eslint-disable-next-line sort-keys,max-len
			// TO DO : The state must be updated with the video's timing information when the component is mounted
			valueTime: [0, 1],
	xywh: null,		xywh: null,
	...annoState,		...annoState,
			valuetextTime: '',
	};		};

	this.submitForm = this.submitForm.bind(this);		this.submitForm = this.submitForm.bind(this);
	@@ -159,6 +161,8 @@ class AnnotationCreation extends Component {
	this.closeChooseColor = this.closeChooseColor.bind(this);		this.closeChooseColor = this.closeChooseColor.bind(this);
	this.updateStrokeColor = this.updateStrokeColor.bind(this);		this.updateStrokeColor = this.updateStrokeColor.bind(this);
	this.handleImgChange = this.handleImgChange.bind(this);		this.handleImgChange = this.handleImgChange.bind(this);
			this.handleChangeTime = this.handleChangeTime.bind(this);
			this.valuetextTime = this.valuetextTime.bind(this);
	}		}

	/** */		/** */
	@@ -196,16 +200,23 @@ class AnnotationCreation extends Component {
	this.setState({ tend: Math.floor(this.props.currentTime) });		this.setState({ tend: Math.floor(this.props.currentTime) });
	}		}

			handleChangeTime = (event, newValueTime) => {
			const timeStart = newValueTime[0];
			const timeEnd = newValueTime[1];
			this.updateTstart(timeStart);
			this.updateTend(timeEnd);
			this.seekToTstart();
			this.seekToTend();
			this.setState({ valueTime: newValueTime });
			};

			/** update annotation start time */
			updateTstart(value) { this.setState({ tstart: value }); }

			/** update annotation end time */
			updateTend(value) { this.setState({ tend: value }); }

	/** seekTo/goto annotation start time */		/** seekTo/goto annotation start time */
	seekToTstart() {
	const { paused, setCurrentTime, setSeekTo } = this.props;
	const { tstart } = this.state;
	if (!paused) {
	this.setState(setSeekTo(tstart));
	} else {
	this.setState(setCurrentTime(tstart));
	}
	}

	/** seekTo/goto annotation end time */		/** seekTo/goto annotation end time */
	seekToTend() {		seekToTend() {
	@@ -218,11 +229,21 @@ class AnnotationCreation extends Component {
	}		}
	}		}

	/** update annotation start time */		// eslint-disable-next-line require-jsdoc
	updateTstart(value) { this.setState({ tstart: value }); }		seekToTstart() {
			const { paused, setCurrentTime, setSeekTo } = this.props;
			const { tstart } = this.state;
			if (!paused) {
			this.setState(setSeekTo(tstart));
			} else {
			this.setState(setCurrentTime(tstart));
			}
			}

	/** update annotation end time */		// eslint-disable-next-line require-jsdoc
	updateTend(value) { this.setState({ tend: value }); }		valuetextTime() {
			return this.valueTime;
			}

	/** */		/** */
	openChooseColor(e) {		openChooseColor(e) {
	@@ -342,10 +363,17 @@ class AnnotationCreation extends Component {
	activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl,		activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl,
	strokeColor, popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode,		strokeColor, popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode,
	textBody, svg, tstart, tend,		textBody, svg, tstart, tend,
	textEditorStateBustingKey, image,		textEditorStateBustingKey, image, valueTime,
	} = this.state;		} = this.state;

			let mediaVideo;
			// TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère.
	const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';		const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
			if (mediaIsVideo) {
			mediaVideo = VideosReferences.get(windowId);
			valueTime[0] = tstart;
			valueTime[1] = tend;
			}

	return (		return (
	<CompanionWindow		<CompanionWindow
	@@ -366,6 +394,97 @@ class AnnotationCreation extends Component {
	player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}		player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
	/>		/>
	<form onSubmit={this.submitForm} className={classes.section}>		<form onSubmit={this.submitForm} className={classes.section}>
			<div>
			<Grid item xs={12}>
			<Typography variant="overline">
			Text Content
			</Typography>
			</Grid>
			<Grid item xs={12}>
			<TextEditor
			key={textEditorStateBustingKey}
			annoHtml={textBody}
			updateAnnotationBody={this.updateTextBody}
			/>
			</Grid>
			</div>
			<div>

			{ mediaIsVideo && (
			<>
			<Grid item xs={12} className={classes.paper}>
			<Typography id="range-slider" variant="overline">
			Display period
			</Typography>
			{/* <Typography>
			{mediaIsVideo ? mediaVideo?.video.duration : null}
			</Typography> */}
			<Slider
			value={valueTime}
			onChange={this.handleChangeTime}
			valueLabelDisplay="auto"
			aria-labelledby="range-slider"
			getAriaValueText={secondsToHMS}
			max={mediaVideo ? mediaVideo.video.duration : null}
			color="secondary"
			classes={{
			root: classes.MuiSliderColorSecondary,
			}}
			/>
			</Grid>
			<div className={`${classes.paper} ${classes.selectTimeField} `}>
			<div className={`${classes.paper} ${classes.selectTimeModule} `}>
			<div className={classes.buttonTimeContainer}>
			<div>
			<p className={classes.textTimeButton}>Start</p>
			</div>
			<ToggleButton
			value="true"
			title="Set current time"
			size="small"
			onClick={this.setTstartNow}
			className={classes.timecontrolsbutton}
			>
			<Alarm fontSize="small" />
			</ToggleButton>
			</div>
			<HMSInput seconds={tstart} onChange={this.updateTstart} />
			</div>
			<div className={`${classes.paper} ${classes.selectTimeModule}`}>
			<div className={classes.buttonTimeContainer}>
			<div>
			<p className={classes.textTimeButton}>End</p>
			</div>
			<ToggleButton
			value="true"
			title="Set current time"
			size="small"
			onClick={this.setTendNow}
			className={classes.timecontrolsbutton}
			>
			<Alarm fontSize="small" />
			</ToggleButton>
			</div>
			<HMSInput seconds={tend} onChange={this.updateTend} />
			</div>
			</div>
			</>
			)}
			</div>
			<div>
			<Grid container>

			<Grid item xs={12}>
			<Typography variant="overline">
			Image Content
			</Typography>
			</Grid>
			<Grid item xs={12} style={{ marginBottom: 10 }}>
			<ImageFormField value={image} onChange={this.handleImgChange} />
			</Grid>
			</Grid>
			</div>
			<div>
	<Grid container>		<Grid container>
	<Grid item xs={12}>		<Grid item xs={12}>
	<Typography variant="overline">		<Typography variant="overline">
	@@ -414,6 +533,8 @@ class AnnotationCreation extends Component {
	</Paper>		</Paper>
	</Grid>		</Grid>
	</Grid>		</Grid>
			</div>
			<div>
	<Grid container>		<Grid container>
	<Grid item xs={12}>		<Grid item xs={12}>
	<Typography variant="overline">		<Typography variant="overline">
	@@ -472,69 +593,15 @@ class AnnotationCreation extends Component {
	}		}
	</Grid>		</Grid>
	</Grid>		</Grid>
	<Grid container>		</div>
	{ mediaIsVideo && (		<div>
	<>
	<Grid item xs={12}>
	<ToggleButton value="true" title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}>
	<LastPage />
	</ToggleButton>
	<Typography variant="overline">
	Start
	</Typography>
	</Grid>

	<Grid item xs={12} className={classes.paper}>
	<ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
	<Alarm />
	</ToggleButton>
	<HMSInput seconds={tstart} onChange={this.updateTstart} />
	</Grid>

	<Grid item xs={12}>
	<Typography variant="overline">
	<ToggleButton value="true" title="Go to end time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}>
	<LastPage />
	</ToggleButton>
	End
	</Typography>
	</Grid>

	<Grid item xs={12} className={classes.paper}>
	<ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
	<Alarm />
	</ToggleButton>
	<HMSInput seconds={tend} onChange={this.updateTend} />
	</Grid>
	</>
	)}
	<Grid item xs={12}>
	<Typography variant="overline">
	Image Content
	</Typography>
	</Grid>
	<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>
	<Button onClick={closeCompanionWindow}>		<Button onClick={closeCompanionWindow}>
	Cancel		Cancel
	</Button>		</Button>
	<Button variant="contained" color="primary" type="submit">		<Button variant="contained" color="primary" type="submit">
	Save		Save
	</Button>		</Button>
			</div>
	</form>		</form>
	<Popover		<Popover
	open={lineWeightPopoverOpen}		open={lineWeightPopoverOpen}
	@@ -574,9 +641,12 @@ class AnnotationCreation extends Component {
	);		);
	}		}
	}		}

	/** */		/** */
	const styles = (theme) => ({		const styles = (theme) => ({
			buttonTimeContainer: {
			display: 'flex',
			flexDirection: 'column',
			},
	divider: {		divider: {
	margin: theme.spacing(1, 0.5),		margin: theme.spacing(1, 0.5),
	},		},
	@@ -590,22 +660,48 @@ const styles = (theme) => ({
	border: 'none',		border: 'none',
	margin: theme.spacing(0.5),		margin: theme.spacing(0.5),
	},		},
			MuiSliderColorSecondary: {
			color: 'rgba(1, 0, 0, 0.38)',
			},
	paper: {		paper: {
	display: 'flex',		display: 'flex',
	flexWrap: 'wrap',		flexWrap: 'wrap',
	},		},
	section: {		section: {
			display: 'flex',
			flexDirection: 'column',
			gap: '20px',
	paddingBottom: theme.spacing(1),		paddingBottom: theme.spacing(1),
	paddingLeft: theme.spacing(2),		paddingLeft: theme.spacing(2),
	paddingRight: theme.spacing(1),		paddingRight: theme.spacing(1),
	paddingTop: theme.spacing(2),		paddingTop: theme.spacing(2),
	},		},
			selectTimeField: {
			alignContent: 'center',
			display: 'flex',
			flexDirection: 'wrap',
			gap: '5px',
			padding: '5px',
			},
			selectTimeModule: {
			border: '1px solid rgba(0, 0, 0, 0.12)',
			borderRadius: '4px',
			display: 'flex',
			flexWrap: 'nowrap',
			justifyContent: 'center',
			padding: '5px',
			},
			textTimeButton: {
			fontSize: '15px',
			margin: 0,
			minWidth: '40px',
			},
	timecontrolsbutton: {		timecontrolsbutton: {
			border: 'none',
	height: '30px',		height: '30px',
	margin: 'auto',		margin: 'auto',
	marginLeft: '0',		marginLeft: '0',
	marginRight: '5px',		marginRight: '5px',
	width: '30px',
	},		},
	});		});

src/HMSInput.js

+33 −30

Original line number	Original line	Diff line number	Diff line
	import React, { Component } from 'react';		import React, { Component } from 'react';
	import PropTypes from 'prop-types';		import PropTypes from 'prop-types';
	import { withStyles } from '@material-ui/core/styles';		import { withStyles } from '@material-ui/core/styles';
	import { IconButton, Input } from '@material-ui/core';		import { IconButton, Input, TextField } from '@material-ui/core';
	import { ArrowDownward, ArrowUpward } from '@material-ui/icons';		import { ArrowDownward, ArrowUpward } from '@material-ui/icons';
	import { secondsToHMSarray } from './utils';		import { secondsToHMSarray } from './utils';

	@@ -18,10 +18,7 @@ class HMSInput extends Component {
	minutes: m,		minutes: m,
	seconds: s,		seconds: s,
	};		};

	this.someChange = this.someChange.bind(this);		this.someChange = this.someChange.bind(this);
	this.addOneSec = this.addOneSec.bind(this);
	this.subOneSec = this.subOneSec.bind(this);
	}		}

	/** update */		/** update */
	@@ -44,18 +41,6 @@ class HMSInput extends Component {
	onChange(state.hours * 3600 + state.minutes * 60 + state.seconds);		onChange(state.hours * 3600 + state.minutes * 60 + state.seconds);
	}		}

	/** Add one second by simulating an input change */
	addOneSec() {
	const { seconds } = this.state;
	this.someChange({ target: { name: 'seconds', value: seconds + 1 } });
	}

	/** Substract one second by simulating an input change */
	subOneSec() {
	const { seconds } = this.state;
	this.someChange({ target: { name: 'seconds', value: seconds - 1 } });
	}

	/** Render */		/** Render */
	render() {		render() {
	const { hours, minutes, seconds } = this.state;		const { hours, minutes, seconds } = this.state;
	@@ -63,17 +48,22 @@ class HMSInput extends Component {
	return (		return (
	<div className={classes.root}>		<div className={classes.root}>
	<div className={classes.root}>		<div className={classes.root}>
	<Input className={classes.input} name="hours" value={hours} onChange={this.someChange} />		<Input
	<Input className={classes.input} name="minutes" value={minutes} onChange={this.someChange} />		className={classes.input}
	<Input className={classes.input} name="seconds" value={seconds} onChange={this.someChange} />		variant="filled"
	</div>		type="number"
	<div className={classes.flexcol}>		min="0"
	<IconButton size="small" onClick={this.addOneSec}>		pattern
	<ArrowUpward />		name="hours"
	</IconButton>		value={hours}
	<IconButton size="small" onClick={this.subOneSec}>		onChange={this.someChange}
	<ArrowDownward />		inputProps={{ style: { textAlign: 'center' } }}
	</IconButton>		/>
			<span className={classes.hmsLabel}>h</span>
			<Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
			<span className={classes.hmsLabel}>m</span>
			<Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
			<span className={classes.hmsLabel}>s</span>
	</div>		</div>
	</div>		</div>
	);		);
	@@ -85,7 +75,6 @@ const styles = (theme) => ({
	root: {		root: {
	alignItems: 'center',		alignItems: 'center',
	display: 'flex',		display: 'flex',
	justifyContent: 'end',
	},		},
	// eslint-disable-next-line sort-keys		// eslint-disable-next-line sort-keys
	flexcol: {		flexcol: {
	@@ -93,12 +82,26 @@ const styles = (theme) => ({
	flexDirection: 'column',		flexDirection: 'column',
	justifyContent: 'center',		justifyContent: 'center',
	},		},
			hmsLabel: {
			color: 'grey',
			},
	// eslint-disable-next-line sort-keys		// eslint-disable-next-line sort-keys
	input: {		input: {
	height: 'fit-content',		height: 'fit-content',
	margin: '2px',		margin: '2px',
	textAlign: 'center',		// remove arrow from field for Firefox
	width: '4ch',		'& input[type=number]': {
			'-moz-appearance': 'textfield',
			},
			// remove arrow from field for Chrome, Safari and Opera
			'& input[type=number]::-webkit-outer-spin-button': {
			'-webkit-appearance': 'none',
			margin: 0,
			},
			'& input[type=number]::-webkit-inner-spin-button': {
			'-webkit-appearance': 'none',
			margin: 0,
			},
	},		},
	});		});

src/TextEditor.js

+25 −26

Original line number	Original line	Diff line number	Diff line
	@@ -71,6 +71,14 @@ class TextEditor extends Component {

	return (		return (
	<div>		<div>
			<div className={classes.editorRoot} onClick={this.handleFocus}>
			<Editor
			editorState={editorState}
			handleKeyCommand={this.handleKeyCommand}
			onChange={this.onChange}
			ref={this.editorRef}
			/>
			</div>
	<ToggleButtonGroup		<ToggleButtonGroup
	size="small"		size="small"
	value={currentStyle.toArray()}		value={currentStyle.toArray()}
	@@ -88,15 +96,6 @@ class TextEditor extends Component {
	<ItalicIcon/>		<ItalicIcon/>
	</ToggleButton>		</ToggleButton>
	</ToggleButtonGroup>		</ToggleButtonGroup>

	<div className={classes.editorRoot} onClick={this.handleFocus}>
	<Editor
	editorState={editorState}
	handleKeyCommand={this.handleKeyCommand}
	onChange={this.onChange}
	ref={this.editorRef}
	/>
	</div>
	</div>		</div>
	);		);
	}		}

Source

Target

Files

Some changes are not shown.