From d2f951a6a9da0067b8ab33bd177415b93fad7aab Mon Sep 17 00:00:00 2001 From: Neelesh Date: Sat, 12 Sep 2020 13:38:05 +0530 Subject: [PATCH 1/2] adding emmet integration --- client/modules/IDE/components/Editor.jsx | 12 +++++++++++- client/styles/components/_editor.scss | 4 ++++ package-lock.json | 5 +++++ package.json | 1 + 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index d93e66351a..d8a1100c65 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import CodeMirror from 'codemirror'; +import emmet from '@emmetio/codemirror-plugin'; import beautifyJS from 'js-beautify'; import { withTranslation } from 'react-i18next'; import 'codemirror/mode/css/css'; @@ -54,6 +55,7 @@ import * as ToastActions from '../actions/toast'; import * as ConsoleActions from '../actions/console'; search(CodeMirror); +emmet(CodeMirror); const beautifyCSS = beautifyJS.css; const beautifyHTML = beautifyJS.html; @@ -103,6 +105,11 @@ class Editor extends React.Component { keyMap: 'sublime', highlightSelectionMatches: true, // highlight current search match matchBrackets: true, + mode: 'text/html', + emmet: { + preview: true, + markTagPairs: true, + }, lint: { onUpdateLinting: ((annotations) => { this.props.hideRuntimeErrorWarning(); @@ -121,6 +128,7 @@ class Editor extends React.Component { this._cm.setOption('extraKeys', { Tab: (cm) => { + if (!cm.execCommand('emmetExpandAbbreviation')) return; // might need to specify and indent more? const selection = cm.doc.getSelection(); if (selection.length > 0) { @@ -129,6 +137,8 @@ class Editor extends React.Component { cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT)); } }, + Enter: 'emmetInsertLineBreak', + Esc: 'emmetResetAbbreviation', [`${metaKey}-Enter`]: () => null, [`Shift-${metaKey}-Enter`]: () => null, [`${metaKey}-F`]: 'findPersistent', @@ -184,7 +194,7 @@ class Editor extends React.Component { componentDidUpdate(prevProps) { if (this.props.file.content !== prevProps.file.content && - this.props.file.content !== this._cm.getValue()) { + this.props.file.content !== this._cm.getValue()) { const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]); this._docs[prevProps.file.id] = oldDoc; this._cm.focus(); diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 7fc22f8e2e..ef507b35b0 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -395,3 +395,7 @@ pre.CodeMirror-line { .editor__unsaved-changes { margin-left: #{2 / $base-font-size}rem; } + +.emmet-close-tag,.emmet-open-tag{ + text-decoration: underline; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 98e283194f..bce5c711ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3003,6 +3003,11 @@ "integrity": "sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==", "dev": true }, + "@emmetio/codemirror-plugin": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emmetio/codemirror-plugin/-/codemirror-plugin-1.2.1.tgz", + "integrity": "sha512-XXJO5742H6Vu6TcLnigLlS8vj7hAjbv68T/RNfTub77B6+iGGeTOr9tcMQx/1tNmi5D+f4Sh6/60su13ed6wRA==" + }, "@emotion/babel-utils": { "version": "0.6.10", "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz", diff --git a/package.json b/package.json index f4ee76eb5a..2ccda95fd6 100644 --- a/package.json +++ b/package.json @@ -140,6 +140,7 @@ "@babel/core": "^7.8.4", "@babel/polyfill": "^7.8.3", "@babel/register": "^7.8.3", + "@emmetio/codemirror-plugin": "^1.2.1", "archiver": "^1.1.0", "async": "^2.6.3", "axios": "^0.18.1", From 3b90c9ee8876922173bf866b973802180143ebfe Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Fri, 12 Feb 2021 16:58:15 -0500 Subject: [PATCH 2/2] [#1522] Add updates to emmet config --- client/modules/IDE/components/Editor.jsx | 6 ++-- client/styles/components/_editor.scss | 41 ++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 8b4bf0cd39..088e3c38e1 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -110,10 +110,10 @@ class Editor extends React.Component { keyMap: 'sublime', highlightSelectionMatches: true, // highlight current search match matchBrackets: true, - mode: 'text/html', emmet: { - preview: true, - markTagPairs: true + preview: ['html'], + markTagPairs: true, + autoRenameTags: true }, autoCloseBrackets: this.props.autocloseBracketsQuotes, styleSelectedText: true, diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 68d3c57749..fc798ccaaf 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -423,6 +423,41 @@ pre.CodeMirror-line { margin-left: #{2 / $base-font-size}rem; } -.emmet-close-tag,.emmet-open-tag{ - text-decoration: underline; -} \ No newline at end of file +/** Inline abbreviation preview */ + +.emmet-abbreviation-preview { + @extend %modal; + position: absolute; + @include themify() { + background: getThemifyVariable('background-color'); + } + & .CodeMirror-lines { + padding: 0; + } + & .CodeMirror { + height: auto; + max-width: #{400 / $base-font-size}rem; + max-height: #{300 / $base-font-size}rem; + border: none; + } +} + +.emmet-abbreviation-preview:not(.has-error) .emmet-abbreviation-preview-error { + display: none; +} + +.emmet-abbreviation-preview.has-error .CodeMirror { + display: none; +} + +.emmet-abbreviation-preview .CodeMirror-cursors { + visibility: hidden !important; +} + +.emmet-abbreviation-preview .emmet-error-snippet-message { + padding: 5px; +} + +.emmet-open-tag, .emmet-close-tag { + text-decoration: underline; +}