port emmet, asktoimport and add modal classes

webmaker/package.json

@@ -27,7 +27,9 @@
     "preact-render-spy": "^1.2.1"
   },
   "dependencies": {
+    "@emmetio/codemirror-plugin": "^0.5.4",
     "codemirror": "^5.37.0",
+    "esprima": "^4.0.0",
     "firebase": "^5.0.4",
     "preact": "^8.2.6",
     "preact-compat": "^3.17.0",

webmaker/src/components/AskToImportModal.jsx

@@ -0,0 +1,39 @@
+import { h, Component } from 'preact';
+import Modal from './Modal';
+
+export default class AskToImportModal extends Component {
+	render() {
+		return (
+			<Modal
+				extraClasses="ask-to-import-modal"
+				show={this.props.show}
+				closeHandler={this.props.closeHandler}
+			>
+				<h2>Import your creations in your account</h2>
+
+				<div>
+					<p>
+						You have <span>{this.props.oldSavedCreationsCount}</span> creations
+						saved in your local machine. Do you want to import those creations
+						in your account so they are more secure and accessible anywhere?
+					</p>
+					<p>
+						It's okay if you don't want to. You can simply logout and access
+						them anytime on this browser.
+					</p>
+					<div class="flex flex-h-end">
+						<button d-click="dontAskToImportAnymore" class="btn">
+							Don't ask me again
+						</button>
+						<button
+							d-click="importCreationsAndSettingsIntoApp"
+							class="btn btn--primary ml-1"
+						>
+							Yes, please import
+						</button>
+					</div>
+				</div>
+			</Modal>
+		);
+	}
+}

webmaker/src/components/ContentWrap.jsx

@@ -733,8 +733,8 @@ export default class ContentWrap extends Component {
 								profile: 'xhtml',
 								gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
 								noAutocomplete: true,
-								matchTags: { bothTags: true }
-								// emmet: true
+								matchTags: { bothTags: true },
+								emmet: true
 							}}
 							onChange={this.onHtmlCodeChange.bind(this)}
 							onCreation={el => (this.cm.html = el)}
@@ -795,8 +795,8 @@ export default class ContentWrap extends Component {
 									'error-gutter',
 									'CodeMirror-linenumbers',
 									'CodeMirror-foldgutter'
-								]
-								// emmet: true
+								],
+								emmet: true
 							}}
 							onChange={this.onCssCodeChange.bind(this)}
 							onCreation={el => (this.cm.css = el)}

webmaker/src/components/Modal.jsx

@@ -27,7 +27,7 @@ export default class Modal extends Component {
 
 		return (
 			<div
-				class="modal is-modal-visible"
+				class={`${this.props.extraClasses || ''} modal is-modal-visible`}
 				ref={el => (this.overlayEl = el)}
 				onClick={this.onOverlayClick.bind(this)}
 			>

webmaker/src/components/SupportDeveloperModal.jsx

@@ -4,7 +4,11 @@ import Modal from './Modal';
 export default class SupportDeveloperModal extends Component {
 	render() {
 		return (
-			<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
+			<Modal
+				extraClasses="pledge-modal"
+				show={this.props.show}
+				closeHandler={this.props.closeHandler}
+			>
 				<div class="tac">
 					<h1>Support the Developer</h1>
 					<p>

webmaker/src/components/UserCodeMirror.jsx

@@ -31,6 +31,10 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
 import 'codemirror/keymap/sublime.js';
 import 'codemirror/keymap/vim.js';
 
+import emmet from '@emmetio/codemirror-plugin';
+
+emmet(CodeMirror);
+
 export default class UserCodeMirror extends Component {
 	componentDidMount() {
 		this.initEditor();

webmaker/src/components/app.jsx

@@ -32,6 +32,7 @@ import { auth } from '../auth';
 import SupportDeveloperModal from './SupportDeveloperModal';
 import KeyboardShortcutsModal from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
+import AskToImportModal from './AskToImportModal';
 
 if (module.hot) {
 	require('preact/debug');
@@ -107,7 +108,7 @@ export default class App extends Component {
 							return;
 						}
 						this.oldSavedItems = items;
-						// window.oldSavedCreationsCountEl.textContent = items.length;
+						this.oldSavedCreationsCount = items.length;
 						this.setState({
 							isAskToImportModalOpen: true
 						});
@@ -967,6 +968,7 @@ export default class App extends Component {
 					<Notifications />
 				</Modal>
 				<Modal
+					extraClasses="modal--settings"
 					show={this.state.isSettingsModalOpen}
 					closeHandler={() => this.setState({ isSettingsModalOpen: false })}
 				>
@@ -976,6 +978,7 @@ export default class App extends Component {
 					/>
 				</Modal>
 				<Modal
+					extraClasses="login-modal"
 					show={this.state.isLoginModalOpen}
 					closeHandler={() => this.setState({ isLoginModalOpen: false })}
 				>
@@ -1006,6 +1009,11 @@ export default class App extends Component {
 						this.setState({ isKeyboardShortcutsModalOpen: false })
 					}
 				/>
+				<AskToImportModal
+					show={this.state.isAskToImportModalOpen}
+					closeHandler={() => this.setState({ isAskToImportModalOpen: false })}
+					oldSavedCreationsCount={this.oldSavedCreationsCount}
+				/>
 
 				<div class="modal-overlay" />