Merge pull request #9 from 4giving/mobile-bar-scroll

mobile bar scroll
4giving · Jun 3, 2022 · 574117c · 574117c
2 parents 344535f + aabff14
commit 574117c
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 103 deletions.
diff --git a/example/src/index.js b/example/src/index.js
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import * as React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import Editor from '../../src';
@@ -27,116 +27,130 @@ class YoutubeEmbed extends React.Component {
 	}
 }
 
-class Example extends React.Component {
-	state = {
-		readOnly: false,
-		template: false,
-		dark: localStorage.getItem('dark') === 'enabled',
-		value: undefined
-	};
+const Example = () => {
+	const [readOnly, setReadOnly] = React.useState(false);
+	const [template, setTemplate] = useState(false);
+	const [dark, setDarkMode] = useState(localStorage.getItem('dark') === 'enabled');
+	const [value, setValue] = useState(undefined);
+	const [imageUrl, setImageUrl] = useState();
+	const [imageHandler, setHandler] = useState();
 
-	handleToggleReadOnly = () => {
-		this.setState({ readOnly: !this.state.readOnly });
+	const handleToggleReadOnly = () => {
+		setReadOnly(!readOnly);
 	};
 
-	handleToggleTemplate = () => {
-		this.setState({ template: !this.state.template });
+	const handleToggleTemplate = () => {
+		setTemplate(!template);
 	};
 
-	handleToggleDark = () => {
-		const dark = !this.state.dark;
-		this.setState({ dark });
+	const handleToggleDark = () => {
+		setDarkMode({ dark: !dark });
 		localStorage.setItem('dark', dark ? 'enabled' : 'disabled');
 	};
 
-	handleUpdateValue = () => {
+	const handleUpdateValue = () => {
 		const existing = localStorage.getItem('saved') || '';
-		const value = `${existing}\n\nedit!`;
-		localStorage.setItem('saved', value);
+		const updatedValue = `${existing}\n\nedit!`;
+		localStorage.setItem('saved', updatedValue);
 
-		this.setState({ value });
+		setValue(updatedValue);
 	};
 
-	handleChange = debounce(value => {
+	const handleChange = debounce(value => {
 		const text = value();
 		localStorage.setItem('saved', text);
 	}, 250);
 
-	render() {
-		const { body } = document;
-		if (body) body.style.backgroundColor = this.state.dark ? '#181A1B' : '#FFF';
+	const { body } = document;
+	if (body) body.style.backgroundColor = dark ? '#181A1B' : '#FFF';
 
-		return (
+	const handleChangeOfInput = e => {
+		setImageUrl(e.target.value);
+	};
+
+	const callImageAdd = () => {
+		if (imageUrl && imageHandler) {
+			imageHandler(imageUrl);
+		} else {
+			console.log('imageUrl', imageUrl);
+			console.log('imageHandler', imageHandler);
+		}
+	};
+
+	return (
+		<div>
+			<div>
+				<input onChange={handleChangeOfInput} onBlur={callImageAdd}></input>
+			</div>
 			<div>
-				<div>
-					<br />
-					<button type="button" onClick={this.handleToggleReadOnly}>
-						{this.state.readOnly ? 'Switch to Editable' : 'Switch to Read-only'}
-					</button>{' '}
-					<button type="button" onClick={this.handleToggleDark}>
-						{this.state.dark ? 'Switch to Light' : 'Switch to Dark'}
-					</button>{' '}
-					<button type="button" onClick={this.handleToggleTemplate}>
-						{this.state.template ? 'Switch to Document' : 'Switch to Template'}
-					</button>{' '}
-					<button type="button" onClick={this.handleUpdateValue}>
-						Update value
-					</button>
-				</div>
-				<br />
 				<br />
-				<Editor
-					id="example"
-					readOnly={this.state.readOnly}
-					readOnlyWriteCheckboxes
-					value={this.state.value}
-					template={this.state.template}
-					defaultValue={defaultValue}
-					scrollTo={window.location.hash}
-					handleDOMEvents={{
-						focus: () => console.log('FOCUS'),
-						blur: () => console.log('BLUR'),
-						paste: () => console.log('PASTE'),
-						touchstart: () => console.log('TOUCH START')
-					}}
-					onSave={options => console.log('Save triggered', options)}
-					onCancel={() => console.log('Cancel triggered')}
-					onChange={this.handleChange}
-					// onClickLink={(href, event) => console.log('Clicked link: ', href, event)}
-					onHoverLink={event => {
-						console.log('Hovered link: ', event.target.href);
-						return false;
-					}}
-					onShowToast={(message, type) => window.alert(`${type}: ${message}`)}
-					insertImageHandler={handler => {
-						handler('https://picsum.photos/600/600');
-					}}
-					embeds={[
-						{
-							title: 'YouTube',
-							keywords: 'youtube video tube google',
-							icon: () => (
-								<img
-									src="https://upload.wikimedia.org/wikipedia/commons/7/75/YouTube_social_white_squircle_%282017%29.svg"
-									width={24}
-									height={24}
-								/>
-							),
-							matcher: url => {
-								return url.match(
-									/(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i
-								);
-							},
-							component: YoutubeEmbed
-						}
-					]}
-					dark={this.state.dark}
-					autoFocus
-				/>
+				<button type="button" onClick={handleToggleReadOnly}>
+					{readOnly ? 'Switch to Editable' : 'Switch to Read-only'}
+				</button>{' '}
+				<button type="button" onClick={handleToggleDark}>
+					{dark ? 'Switch to Light' : 'Switch to Dark'}
+				</button>{' '}
+				<button type="button" onClick={handleToggleTemplate}>
+					{template ? 'Switch to Document' : 'Switch to Template'}
+				</button>{' '}
+				<button type="button" onClick={handleUpdateValue}>
+					Update value
+				</button>
 			</div>
-		);
-	}
-}
+			<br />
+			<br />
+			<Editor
+				id="example"
+				readOnly={readOnly}
+				readOnlyWriteCheckboxes
+				value={value}
+				template={template}
+				defaultValue={defaultValue}
+				scrollTo={window.location.hash}
+				handleDOMEvents={{
+					focus: () => console.log('FOCUS'),
+					blur: () => console.log('BLUR'),
+					paste: () => console.log('PASTE'),
+					touchstart: () => console.log('TOUCH START')
+				}}
+				onSave={options => console.log('Save triggered', options)}
+				onCancel={() => console.log('Cancel triggered')}
+				onChange={handleChange}
+				// onClickLink={(href, event) => console.log('Clicked link: ', href, event)}
+				onHoverLink={event => {
+					console.log('Hovered link: ', event.target.href);
+					return false;
+				}}
+				onShowToast={(message, type) => window.alert(`${type}: ${message}`)}
+				insertImageHandler={handler => {
+					setHandler(() => handler);
+					// handler('https://picsum.photos/600/600');
+				}}
+				embeds={[
+					{
+						title: 'YouTube',
+						keywords: 'youtube video tube google',
+						icon: () => (
+							<img
+								src="https://upload.wikimedia.org/wikipedia/commons/7/75/YouTube_social_white_squircle_%282017%29.svg"
+								width={24}
+								height={24}
+							/>
+						),
+						matcher: url => {
+							return url.match(
+								/(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i
+							);
+						},
+						component: YoutubeEmbed
+					}
+				]}
+				dark={dark}
+				autoFocus
+			/>
+		</div>
+	);
+};
 
 if (element) {
 	ReactDOM.render(<Example />, element);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@4giving/r-m-e",
   "description": "A modified rich markdown editor",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "license": "BSD-3-Clause",

diff --git a/src/components/MenuBar.tsx b/src/components/MenuBar.tsx
@@ -42,9 +42,12 @@ const MenuBar = (props: Props): ReactElement | null => {
 const MenuBarContainer = styled('div')`
 	padding: 10px 15px;
 	border-bottom: 1px solid rgba(48, 46, 40, 0.1);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	display: grid;
+	grid-gap: 16px;
+	grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(30px, 1fr);
+	overflow-x: auto;
 `;
 
 export default MenuBar;
diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
@@ -8,21 +8,13 @@ export default styled.button<Props>`
 	width: 24px;
 	height: 24px;
 	cursor: pointer;
-	margin: 0 10px;
 	border: none;
 	background: none;
 	transition: opacity 100ms ease-in-out;
 	padding: 0;
 	opacity: 0.7;
 	outline: none;
 
-	&:first-child {
-		margin-left: 0;
-	}
-	&:last-child {
-		margin-right: 0;
-	}
-
 	&:hover {
 		opacity: 1;
 	}