Make emmet work on tab

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Monaco/enable-emmet.js

@@ -1,77 +1,169 @@
-import extractAbbreviation from '@emmetio/extract-abbreviation';
 import { expand } from '@emmetio/expand-abbreviation';
 
-const field = () => '';
-
-const expandAbbreviation = (source, language) =>
-  expand(source.abbreviation, {
-    field,
-    syntax: language,
-    addons: {
-      jsx: true,
-    },
-  });
-
 const enableEmmet = (editor, monaco) => {
   if (!editor) {
     throw new Error('Must provide monaco-editor instance.');
   }
 
-  editor.addAction({
-    // An unique identifier of the contributed action.
-    id: 'emmet-abbr',
+  let cursor;
+  let emmetText;
+  let expandText;
 
-    // A label of the action that will be presented to the user.
-    label: 'Emmet: Expand abbreviation',
+  // get a legal emmet from a string
+  // if whole string matches emmet rules, return it
+  // if a substring(right to left) split by white space matches emmet rules, return the substring
+  // if nothing matches, return empty string
+  const getLegalEmmet = str => {
+    // empty or ends with white space, illegal
+    if (str === '' || str.match(/\s$/)) return '';
 
-    // An optional array of keybindings for the action.
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E], // eslint-disable-line no-bitwise
+    // deal with white space, this determines how many characters needed to be emmeted
+    // e.g. `a span div` => `a span <div></div>` skip `a span `
+    // e.g. `a{111 222}` => `<a href="">111 222</a>`
+    // conclusion: white spaces are only allowed between `[]` or `{}`
+    // note: quotes also allowed white spaces, but quotes must in `[]` or `{}`, so ignore it
+    const step = { '{': 1, '}': -1, '[': 1, ']': -1 };
+    let pair = 0;
 
-    // A precondition for this action.
-    precondition: null,
+    for (let i = str.length - 1; i > 0; i--) {
+      pair += step[str[i]] || 0;
+      if (str[i].match(/\s/) && pair >= 0) {
+        // illegal white space detected
+        str = str.substr(i + 1); // eslint-disable-line
+        break;
+      }
+    }
 
-    // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
-    keybindingContext: null,
+    // starts with illegal character
+    // note: emmet self allowed number element like `<1></1>`,
+    // but obviously its not fit html standard, so skip it
+    if (!str.match(/^[a-zA-Z[(.#]/)) {
+      return '';
+    }
 
-    contextMenuGroupId: 'navigation',
+    // finally run expand to test the final result
+    try {
+      expandText = expand(str, {
+        addons: {
+          jsx: true,
+        },
+      });
+    } catch (e) {
+      return '';
+    }
 
-    contextMenuOrder: 1.5,
+    return str;
+  };
 
-    // Method that will be executed when the action is triggered.
-    // @param editor The editor instance is passed in as a convenience
-    run: () => {
-      let word = editor.model.getValueInRange(editor.getSelection());
-      const pos = editor.getPosition();
-      if (!word) {
-        const lineContent = editor.model.getLineContent(pos.lineNumber);
-        word = extractAbbreviation(lineContent.substring(0, pos.column));
-      }
-      if (word) {
-        // Get expand text
-        const expandText = expandAbbreviation(word, 'html');
-        if (expandText) {
-          // replace range content: pos.column , pos.column -word.length;
-          const range = new monaco.Range(
-            pos.lineNumber,
-            pos.column - word.abbreviation.length,
-            pos.lineNumber,
-            pos.column
-          );
-          const id = { major: 1, minor: 1 };
-          const op = {
-            identifier: id,
-            range,
-            text: expandText,
-            forceMoveMarkers: true,
-          };
-          editor.executeEdits('', [op]);
-          return null;
-        }
-        return false;
+  // register a context key to make sure emmet triggered at proper condition
+  const emmetLegal = editor.createContextKey('emmetLegal', false);
+
+  editor.onDidChangeCursorPosition(cur => {
+    // to ensure emmet triggered at the right time
+    // we need to do grammar analysis
+
+    const model = editor.model;
+    cursor = cur.position;
+
+    const column = cursor.column;
+    // there is no character before column 1
+    // no need to continue
+    if (column === 1) {
+      emmetLegal.set(false);
+      return;
+    }
+
+    const lineNumber = cursor.lineNumber;
+
+    /* eslint-disable no-underscore-dangle */
+
+    // force line's state to be accurate
+    model.getLineTokens(lineNumber, /* inaccurateTokensAcceptable */ false);
+    // get the tokenization state at the beginning of this line
+    const state = model._lines[lineNumber - 1].getState();
+    // deal with state got null when paste
+    if (!state) return;
+
+    const freshState = state.clone();
+    // get the human readable tokens on this line
+    const token = model._tokenizationSupport.tokenize(
+      model.getLineContent(lineNumber),
+      freshState,
+      0
+    ).tokens;
+
+    /* eslint-enable */
+
+    // get token type at current cursor position
+    let i;
+    for (i = token.length - 1; i >= 0; i--) {
+      if (column - 1 > token[i].offset) {
+        break;
       }
-      return false;
-    },
+    }
+
+    // type must be empty string when start emmet
+    // and if not the first token, make sure the previous token is `delimiter.html`
+    // to prevent emmet triggered within attributes
+    if (
+      token[i].type !== '' ||
+      (i > 0 && token[i - 1].type !== 'delimiter.html')
+    ) {
+      emmetLegal.set(false);
+      return;
+    }
+
+    // get content starts from current token offset to current cursor column
+    emmetText = model
+      .getLineContent(lineNumber)
+      .substring(token[i].offset, column - 1)
+      .trimLeft();
+
+    emmetText = getLegalEmmet(emmetText);
+    emmetLegal.set(!!emmetText);
   });
+
+  // add tab command with context
+  editor.addCommand(
+    monaco.KeyCode.Tab,
+    () => {
+      // attention: push an undo stop before and after executeEdits
+      // to make sure the undo operation is as expected
+      editor.pushUndoStop();
+
+      // record first `${0}` position and remove all `${0}`
+      /* eslint-disable no-template-curly-in-string */
+      const posOffsetArr = expandText.split('${0}')[0].split('\n');
+      /* eslint-enable */
+      const lineNumber = cursor.lineNumber + posOffsetArr.length - 1;
+      const column =
+        posOffsetArr.length === 1
+          ? posOffsetArr[0].length - emmetText.length + cursor.column
+          : posOffsetArr.slice(-1)[0].length + 1;
+      expandText = expandText.replace(/\$\{0\}/g, '');
+
+      // replace range text with expandText
+      editor.executeEdits('emmet', [
+        {
+          identifier: { major: 1, minor: 1 },
+          range: new monaco.Range(
+            cursor.lineNumber,
+            cursor.column - emmetText.length,
+            cursor.lineNumber,
+            cursor.column
+          ),
+          text: expandText,
+          forceMoveMarkers: true,
+        },
+      ]);
+
+      // move cursor to the position of first `${0}` in expandText
+      editor.setPosition(new monaco.Position(lineNumber, column));
+
+      editor.pushUndoStop();
+    },
+    'emmetLegal && !suggestWidgetVisible'
+  );
 };
 
 export default enableEmmet;