josdejong · josdejong · Jan 17, 2024 · Feb 7, 2023 · Feb 8, 2023 · Feb 8, 2023
diff --git a/AUTHORS b/AUTHORS
@@ -217,9 +217,9 @@ Evan Miller <[email protected]>
 Timur <[email protected]>
 Ari Markowitz <[email protected]>
 Jay Wang <[email protected]>
+David Contreras <[email protected]>
 Jaeu Jeong <[email protected]>
 cyavictor88 <[email protected]>
-David Contreras <[email protected]>
 Jakub Riegel <[email protected]>
 Angus Comrie <[email protected]>
 TMTron <[email protected]>

diff --git a/examples/code editor/.gitignore b/examples/code editor/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/code editor/README.md b/examples/code editor/README.md
@@ -0,0 +1,18 @@
+# Code Editor Example
+
+This is an example for using [mathjs](https://mathjs.org) with a code editor.
+
+To run your own you need to install the dependancies with.
+```
+npm install
+```
+
+You can start development mode with:
+```
+npm run dev
+```
+
+Or build the project with:
+```
+npm run build
+```
diff --git a/examples/code editor/getExpressions.js b/examples/code editor/getExpressions.js
@@ -0,0 +1,59 @@
+import { parse } from 'mathjs'
+
+/**
+ * Extracts parsable expressions from a multiline string.
+ *
+ * @param {string} str - The multiline string containing expressions.
+ * @returns {Array<{from: number, to: number, source: string}>} An array of objects,
+ *   where each object represents a parsable expression and contains:
+ *   - from: The starting line number of the expression within the original string.
+ *   - to: The ending line number of the expression within the original string.
+ *   - source: The actual string content of the expression.
+ */
+export default function getExpressions(str) {
+    const lines = str.split('\n');
+    let nextLineToParse = 0;
+    const result = [];
+
+    for (let lineID = 0; lineID < lines.length; lineID++) {
+        const linesToTest = lines.slice(nextLineToParse, lineID + 1).join('\n');
+        if (canBeParsed(linesToTest)) {
+            if (!isEmptyString(linesToTest)) {
+                result.push({ from: nextLineToParse, to: lineID, source: linesToTest });
+            }
+            // Start the next parsing attempt from the line after the successfully parsed expression.
+            nextLineToParse = lineID + 1;
+        }
+    }
+    // Handle any remaining lines that couldn't be parsed as expressions.
+    const linesToTest = lines.slice(nextLineToParse).join('\n');
+    if (!isEmptyString(linesToTest)) {
+        result.push({ from: nextLineToParse, to: lines.length - 1, source: linesToTest });
+    }
+    return result;
+}
+
+/**
+ * Determines whether a given expression can be successfully parsed.
+ *
+ * @param {string} expression - The expression to parse.
+ * @returns {boolean} True if the expression can be parsed, false otherwise.
+ */
+function canBeParsed(expression) {
+    try {
+        parse(expression)
+        return true
+    } catch (error) {
+        return false
+    }
+}
+
+/**
+ * Checks if a given string is empty or only contains whitespace characters.
+ *
+ * @param {string} str - The string to check.
+ * @returns {boolean} True if the string is empty or only contains whitespace, false otherwise.
+ */
+function isEmptyString(str) {
+    return str.trim() === ""
+}
diff --git a/examples/code editor/index.html b/examples/code editor/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>math.js | code editor</title>
+</head>
+
+<body>
+  <div id="app">
+    <div id="editor"></div>
+    <article id="result" class="markdown-body"></article>
+  </div>
+  <script type="module" src="/main.js"></script>
+</body>
+
+</html>
diff --git a/examples/code editor/main.js b/examples/code editor/main.js
@@ -0,0 +1,218 @@
+import './style.css'
+import 'github-markdown-css/github-markdown.css'
+
+import 'katex/dist/katex.min.css'
+import katex from 'katex'
+
+import { mathjsLang } from './mathjs-lang.js'
+
+import { EditorState } from "@codemirror/state"
+import { EditorView, basicSetup } from "codemirror"
+import { create, all } from 'mathjs'
+import getExpressions from './getExpressions'
+
+import {
+  StreamLanguage
+} from '@codemirror/language'
+
+let processedExpressions
+let previousSelectedExpressionIndex
+let timer
+const timeout = 250 // milliseconds
+
+const math = create(all)
+const digits = 14
+let parser = math.parser()
+const editorDOM = document.querySelector('#editor')
+const resultsDOM = document.querySelector('#result')
+
+const doc = [
+  "round(e, 3)",
+  "atan2(3, -3) / pi",
+  "log(10000, 10)",
+  "sqrt(-4)",
+  "derivative('x^2 + x', 'x')",
+  "pow([[-1, 2], [3, 1]], 2)",
+  "# expressions",
+  "1.2 * (2 + 4.5)",
+  "12.7 cm to inch",
+  "sin(45 deg) ^ 2",
+  "9 / 3 + 2i",
+  "det([-1, 2; 3, 1])"
+].join('\n')
+
+let startState = EditorState.create({
+  doc,
+  extensions: [
+    basicSetup,
+    StreamLanguage.define(mathjsLang(math)),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        // if doc changed debounce and update results after a timeout
+        clearTimeout(timer)
+        timer = setTimeout(() => {
+          updateResults()
+          previousSelectedExpressionIndex = null
+          updateSelection()
+        }, timeout)
+      } else if (update.selectionSet) {
+        updateSelection()
+      }
+    })
+  ],
+})
+
+let editor = new EditorView({
+  state: startState,
+  parent: editorDOM
+})
+
+/**
+ * Evaluates a given expression using a parser.
+ *
+ * @param {string} expression - The expression to evaluate.
+ * @returns {any} The result of the evaluation, or the error message if an error occurred.
+*/
+function calc(expression) {
+  let result
+  try {
+    result = parser.evaluate(expression)
+  } catch (error) {
+    result = error.toString()
+  }
+  return result
+}
+
+/**
+ * Formats result depending on the type of result
+ * 
+ * @param {number, string, Help, any} result - The result to format
+ * @returns {string} The string in HTML with the formated result
+ */
+const formatResult = math.typed({
+  'number': result => math.format(result, { precision: digits }),
+  'string': result => `<code>${result}</code>`,
+  'Help': result => `<pre>${math.format(result)}</pre>`,
+  'any': math.typed.referTo(
+    'number',
+    fnumber => result => katex.renderToString(math.parse(fnumber(result)).toTex())
+  )
+})
+
+/**
+ * Processes an array of expressions by evaluating them, formatting the results,
+ * and determining their visibility.
+ *
+ * @param {Array<{from: number, to: number, source: string}>} expressions - An array of objects representing expressions,
+ *   where each object has `from`, `to`, and `source` properties.
+ * @returns {Array<{from: number, to: number, source: string, outputs: any, visible: boolean}>} An array of processed expressions,
+ *   where each object has additional `outputs` and `visible` properties.
+ */
+function processExpressions(expressions) {
+  parser.clear()
+  return expressions.map(expression => {
+    const result = calc(expression.source)
+    const outputs = formatResult(result)
+    // Determine visibility based on the result type:
+    // - Undefined results are hidden.
+    // - Results with an `isResultSet` property are hidden.
+    // - All other results are visible.
+    const visible = result === undefined ? false : result.isResultSet ? false : true
+    return ({
+      ...expression,
+      outputs,
+      visible
+    })
+  })
+}
+
+/**
+ * Updates the displayed results based on the editor's current content.
+ *
+ * @function updateResults
+ * @requires getExpressions, processExpressions, resultsToHTML
+ *
+ * @description
+ * 1. Extracts expressions from the editor's content.
+ * 2. Evaluates and analyzes the expressions.
+ * 3. Generates HTML to display the processed results.
+ * 4. Renders the generated HTML in the designated results container.
+ */
+function updateResults() {
+  // Extract expressions from the editor's content.
+  const expressions = getExpressions(editor.state.doc.toString());
+
+  // Evaluate and analyze the expressions.
+  processedExpressions = processExpressions(expressions);
+
+  // Generate HTML to display the results.
+  const resultsHtml = resultsToHTML(processedExpressions);
+
+  // Render the generated HTML in the results container.
+  resultsDOM.innerHTML = resultsHtml;
+}
+
+/**
+* Updates the visual highlighting of results based on the current line selection in the editor.
+*
+* @function updateSelection
+* @requires editor, processedExpressions
+*
+* @description
+* 1. Determines the current line number in the editor's selection.
+* 2. Finds the corresponding result (processed expression) that matches the current line.
+* 3. If a different result is selected than before:
+*   - Removes highlighting from the previously selected result.
+*   - Highlights the newly selected result.
+*   - Scrolls the newly selected result into view.
+*/
+function updateSelection() {
+  const selectedLine = editor.state.doc.lineAt(
+    editor.state.selection.ranges[editor.state.selection.mainIndex].from
+  ).number - 1;
+
+  let selectedExpressionIndex;
+
+  processedExpressions.forEach((result, index) => {
+    if ((selectedLine >= result.from) && (selectedLine <= result.to)) {
+      selectedExpressionIndex = index;
+    }
+  });
+
+  if (selectedExpressionIndex !== previousSelectedExpressionIndex) {
+    const previouslyHighlightedResult = document.querySelector('#result').children[previousSelectedExpressionIndex];
+    if (previouslyHighlightedResult !== undefined) {
+      previouslyHighlightedResult.className = null;
+    }
+
+    const currentlySelectedResult = document.querySelector('#result').children[selectedExpressionIndex];
+    if (currentlySelectedResult !== undefined) {
+      currentlySelectedResult.className = 'highlighted';
+      currentlySelectedResult.scrollIntoView({ block: 'nearest', inline: 'start' });
+    }
+
+    previousSelectedExpressionIndex = selectedExpressionIndex;
+  }
+}
+
+/**
+* Converts an array of processed results into HTML elements for display.
+*
+* @function resultsToHTML
+* @param {Array<{from: number, to: number, source: string, outputs: any, visible: boolean}>} results - An array of processed results, where each object has:
+*   - from: The starting line number of the expression.
+*   - to: The ending line number of the expression.
+*   - source: The original expression string.
+*   - outputs: The formatted result of evaluating the expression.
+*   - visible: A boolean indicating whether the result should be displayed or hidden.
+* @returns {string} A string of HTML elements representing the results, where each result is enclosed in a <pre> tag with appropriate styling based on its visibility.
+*/
+function resultsToHTML(results) {
+  return results.map(el => {
+    const elementStyle = el.visible ? '' : 'style="display:none"'
+    return `<pre ${elementStyle}>${el.outputs}</pre>`
+  }
+  ).join('')
+}
+
+updateResults()