Merge pull request #8 from SinclaM/breakout-chars

Customize breakout characters

package.json

@@ -1,6 +1,6 @@
 {
  "name": "desmos-unlocked",
- "version": "1.0.4",
+ "version": "1.0.5",
  "description": "Browser extension for better user control of the Desmos graphing calculator configuration ",
  "main": "background.js",
  "scripts": {
@@ -9,13 +9,13 @@
  "code:prettier": "prettier --write '**/**/*.{ts,js,html,css,json}'",
  "code:check": "./node_modules/.bin/tsc --noEmit && prettier --check '**/**/*.{ts,js,html,css,json}' && eslint '**/**/*.ts'",
  "app:chrome": "rimraf dist && cross-env BROWSER='chrome' webpack --config webpack/webpack.prod.js",
- "app:chrome-dev": "cross-env BROWSER='chrome' webpack --config webpack/webpack.dev.js --watch",
+ "app:chrome-dev": "rimraf dist && cross-env BROWSER='chrome' webpack --config webpack/webpack.dev.js --watch",
  "app:edge": "rimraf dist && cross-env BROWSER='edge' webpack --config webpack/webpack.prod.js",
- "app:edge-dev": "cross-env BROWSER='edge' webpack --config webpack/webpack.dev.js --watch",
+ "app:edge-dev": "rimraf dist && cross-env BROWSER='edge' webpack --config webpack/webpack.dev.js --watch",
  "app:opera": "rimraf dist && cross-env BROWSER='opera' webpack --config webpack/webpack.prod.js",
- "app:opera-dev": "cross-env BROWSER='opera' webpack --config webpack/webpack.dev.js --watch",
+ "app:opera-dev": "rimraf dist && cross-env BROWSER='opera' webpack --config webpack/webpack.dev.js --watch",
  "app:firefox": "rimraf dist && cross-env BROWSER='firefox' webpack --config webpack/webpack.prod.js",
- "app:firefox-dev": "cross-env BROWSER='firefox' webpack --config webpack/webpack.dev.js --watch"
+ "app:firefox-dev": "rimraf dist && cross-env BROWSER='firefox' webpack --config webpack/webpack.dev.js --watch"
  },
  "repository": {
  "type": "git",

public/chrome_manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "Desmos Unlocked",
- "version": "1.0.4",
+ "version": "1.0.5",
  "description": "Browser extension for better user control of the Desmos graphing calculator configuration",
  "permissions": ["storage", "declarativeNetRequest", "declarativeNetRequestWithHostAccess", "webRequest"],
  "manifest_version": 3,

public/edge_manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "Desmos Unlocked",
- "version": "1.0.4",
+ "version": "1.0.5",
  "description": "Browser extension for better user control of the Desmos graphing calculator configuration",
  "permissions": ["storage", "declarativeNetRequest", "declarativeNetRequestWithHostAccess", "webRequest"],
  "manifest_version": 3,

public/firefox_manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "Desmos Unlocked",
- "version": "1.0.4",
+ "version": "1.0.5",
  "description": "Browser extension for better user control of the Desmos graphing calculator configuration",
  "permissions": ["https://*.desmos.com/*", "storage", "webRequest", "webRequestBlocking"],
  "manifest_version": 2,

public/opera_manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "Desmos Unlocked",
- "version": "1.0.4",
+ "version": "1.0.5",
  "description": "Browser extension for better user control of the Desmos graphing calculator configuration",
  "permissions": ["storage", "declarativeNetRequest", "declarativeNetRequestWithHostAccess", "webRequest"],
  "manifest_version": 3,

public/popup.css

@@ -206,3 +206,21 @@ h2 {
 .latex-item#mathrm .symbol {
  font-family: "Times New Roman", Times, serif;
 }
+
+#breakout {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+}
+
+#breakout textarea {
+ flex-grow: 0.5;
+ height: 1.5em;
+ resize: none;
+ font-size: 1.4em;
+}
+
+#set-chars {
+ min-height: 0;
+ height: 0.8em;
+}

public/popup.html

@@ -54,6 +54,15 @@ <h2>Advanced shortcuts</h2>
  <p>⚠️ These shortcuts may have unexpected behavior</p>
  <div id="advanced" class="grid"></div>
  <hr class="thick-line" />
+ <h1>Other options</h1>
+ <hr class="thick-line" />
+ <h2>Breakout characters</h2>
+ <p>These characters will break out of superscripts.<br />⚠️ Spaces count as characters.</p>
+ <div id="breakout">
+ <textarea cols="20" rows="1"></textarea>
+ <button id="set-chars">set</button>
+ </div>
+ <hr class="thick-line" />
  <script type="application/javascript" src="browser-polyfill.js"></script>
  <script src="popup.js"></script>
  </body>

src/background/chrome/background.ts

@@ -6,6 +6,7 @@ chrome.runtime.onInstalled.addListener(function () {
  // space-delimited list of commands.
  autoCommands:
  "keepmeKEEPME alpha beta sqrt theta Theta phi Phi pi Pi tau nthroot cbrt sum prod int ans percent infinity infty gamma Gamma delta Delta epsilon epsiv zeta eta kappa lambda Lambda mu xi Xi rho sigma Sigma chi Psi omega Omega digamma iota nu upsilon Upsilon Psi square mid parallel nparallel perp times div approx",
+ charsThatBreakOutOfSupSub: "+-=<>*",
  });
 });
 

src/background/edge/background.ts

@@ -6,6 +6,7 @@ chrome.runtime.onInstalled.addListener(function () {
  // space-delimited list of commands.
  autoCommands:
  "keepmeKEEPME alpha beta sqrt theta Theta phi Phi pi Pi tau nthroot cbrt sum prod int ans percent infinity infty gamma Gamma delta Delta epsilon epsiv zeta eta kappa lambda Lambda mu xi Xi rho sigma Sigma chi Psi omega Omega digamma iota nu upsilon Upsilon Psi square mid parallel nparallel perp times div approx",
+ charsThatBreakOutOfSupSub: "+-=<>*",
  });
 });
 

src/background/firefox/background.ts

@@ -6,6 +6,7 @@ browser.runtime.onInstalled.addListener(function () {
  // space-delimited list of commands.
  autoCommands:
  "keepmeKEEPME alpha beta sqrt theta Theta phi Phi pi Pi tau nthroot cbrt sum prod int ans percent infinity infty gamma Gamma delta Delta epsilon epsiv zeta eta kappa lambda Lambda mu xi Xi rho sigma Sigma chi Psi omega Omega digamma iota nu upsilon Upsilon Psi square mid parallel nparallel perp times div approx",
+ charsThatBreakOutOfSupSub: "+-=<>*",
  });
 });
 

src/background/opera/background.ts

@@ -6,6 +6,7 @@ chrome.runtime.onInstalled.addListener(function () {
  // space-delimited list of commands.
  autoCommands:
  "keepmeKEEPME alpha beta sqrt theta Theta phi Phi pi Pi tau nthroot cbrt sum prod int ans percent infinity infty gamma Gamma delta Delta epsilon epsiv zeta eta kappa lambda Lambda mu xi Xi rho sigma Sigma chi Psi omega Omega digamma iota nu upsilon Upsilon Psi square mid parallel nparallel perp times div approx",
+ charsThatBreakOutOfSupSub: "+-=<>*",
  });
 });
 

src/content.ts

@@ -9,7 +9,7 @@ declare const cloneInto: ((toClone: MathQuillConfig, context: any) => MathQuillC
 async function updateConfig(changes?: browser.storage.ChangeDict) {
  let config: MathQuillConfig;
  if (typeof changes === "undefined") {
- config = await browser.storage.local.get(["autoCommands"]);
+ config = await browser.storage.local.get(["autoCommands", "charsThatBreakOutOfSupSub"]);
  } else {
  config = {};
  Object.keys(changes).forEach((configOption) => (config[configOption] = changes[configOption].newValue));

src/globals/config.ts

@@ -1,3 +1,4 @@
 export interface MathQuillConfig {
  autoCommands?: string;
+ charsThatBreakOutOfSupSub?: string;
 }

src/popup.ts

@@ -3,6 +3,12 @@ import { massSet, storeConfig, populateGrid } from "./utils/utils";
 
 const setToDefault = document.getElementById("set-to-default");
 const setToDesmosDefault = document.getElementById("set-to-desmos-default");
+const breakoutChars = document.querySelector<HTMLInputElement>("#breakout textarea");
+const setChars = document.getElementById("set-chars");
+
+browser.storage.local
+ .get("charsThatBreakOutOfSupSub")
+ .then((stored) => (breakoutChars.value = stored.charsThatBreakOutOfSupSub.toString()));
 
 setToDefault.onclick = function () {
  massSet(
@@ -22,6 +28,10 @@ setToDesmosDefault.onclick = function () {
  );
 };
 
+setChars.onclick = function () {
+ browser.storage.local.set({ charsThatBreakOutOfSupSub: breakoutChars.value });
+};
+
 // Add all the dynamically loaded nodes to the DOM using templates and give
 // sliders their funcionality
 async function initialize() {

src/script.ts

@@ -6,9 +6,7 @@ import { MathQuillConfig } from "./globals/config";
 const handler = (({ detail }: CustomEvent<MathQuillConfig>) => {
  // Have to wait for all the preload modifications to finish
  pollForValue(() => window.Desmos?.MathQuill?.config).then(() => {
- window.Desmos.MathQuill.config({
- autoCommands: detail.autoCommands,
- });
+ window.Desmos.MathQuill.config(detail);
  document.removeEventListener("send-config", handler);
  });
 }) as EventListener;