Dynamic layout fix (#27)

* feat: fix bug with new layout * feat: fix bug with new layout --------- Co-authored-by: Madhur <[email protected]>
madhur · Dec 24, 2023 · 25dc76a · 25dc76a
1 parent 143ef72
commit 25dc76a
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 15 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,7 +15,8 @@
         "dartfmt": true,
         "prettier": true,
         "js_beautify": true,
-        "monaco": true
+        "monaco": true,
+        "chrome": true
 
     },
     "rules": {

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.14.0
+v20.10.0
diff --git a/README.md b/README.md
@@ -24,6 +24,18 @@ Use CTRL + ALT + F to trigger the format action through keyboard
 
 Send your feedback and any bug reports [here](https://github.com/madhur/leetcode-format-chrome-extension/issues)
 
+### Demo GIF 
+
 <img src="./images/format-demo.gif">
 
+### Dynamic layout
+
+<img src="./images/dynamic_layout.png">
+
+### New UI
+
+<img src="./images/new_ui.png">
+
+### Old UI
 
+<img src="./images/old_ui.png">
diff --git a/images/dynamic_layout.png b/images/dynamic_layout.png
diff --git a/images/new_ui.png b/images/new_ui.png
diff --git a/images/old_ui.png b/images/old_ui.png
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Leetcode format",
-    "version": "1.8",
+    "version": "1.9",
     "manifest_version": 3,
     "description": "Adds Format code button on leetcode to format the code using Prettier code formatter",
     "homepage_url": "https://github.com/madhur/leetcode-format-chrome-extension",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,18 +1,16 @@
 {
     "name": "leetcode-format-chrome",
     "version": "1.8",
-    "description": "",
+    "description": "LeetCode Code Format Google Chrome Extension",
     "main": "content.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Madhur Ahuja",
     "license": "ISC",
-    "dependencies": {
-        "prettier": "^2.2.1"
-    },
     "devDependencies": {
         "eslint": "^8.6.0",
+        "prettier": "^2.2.1",
         "eslint-config-prettier": "^9.0.0",
         "prettier-plugin-java": "^1.0.1"
     }

diff --git a/script.js b/script.js
@@ -66,6 +66,7 @@ function startLoading() {
 
     let button = getFormatButton();
     uiVersion = 0;
+    console.debug("Ui version is 0");
     addShortcutBinding(formatCodeMirror);
     button.addEventListener('click', function () {
         formatCodeMirror();
@@ -89,6 +90,7 @@ function checkAndLoadNewUI() {
         document.querySelector(buttonLocation)
     ) {
         uiVersion = 1;
+        console.debug("Ui version is 1");
         btn = getFormatButtonNew();
         document.querySelector(buttonLocation).appendChild(btn);
         addShortcutBinding(formatCodeMonaco);
@@ -99,13 +101,14 @@ function checkAndLoadNewUI() {
 function checkAndLoadNewUIv2() {
 
 
-    let buttonLocation = 'div.flex div.items-center div.mr-auto';
+    let buttonLocation = 'div.flex.flex-nowrap.items-center';
 
     if (
         !document.querySelector('.tool-button') &&
         document.querySelector(buttonLocation)
     ) {
         uiVersion = 2;
+        console.debug("Ui version is 2");
         btn = getFormatButtonNew();
         document.querySelector(buttonLocation).appendChild(btn);
         addShortcutBinding(formatCodeMonacov2);
@@ -114,6 +117,7 @@ function checkAndLoadNewUIv2() {
 
 }
 
+
 function setupLanguageObserver() {
     const languageObserver = '.relative.notranslate';
     const languageSelector = '.relative.notranslate div div';
@@ -204,7 +208,6 @@ const getFormatButtonNew = function () {
 function addShortcutBinding(func) {
     window.addEventListener('keyup', (event) => {
         if (event.ctrlKey && event.altKey && event.key == 'f')
-            //formatCodeMonaco();
             func();
     });
 }