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/counter.js b/examples/code editor/counter.js
@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
diff --git a/examples/code editor/getExpressions.js b/examples/code editor/getExpressions.js
@@ -0,0 +1,35 @@
+import { parse } from 'mathjs'
+
+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 });
+            }
+            nextLineToParse = lineID + 1;
+        }
+    }
+    const linesToTest = lines.slice(nextLineToParse).join('\n');
+    if (!isEmptyString(linesToTest)) {
+        result.push({ from: nextLineToParse, to: lines.length - 1, source: linesToTest });
+    }
+    return result;
+}
+
+function canBeParsed(expression) {
+    try {
+        parse(expression)
+        return true
+    } catch (error) {
+        return false
+    }
+}
+
+function isEmptyString(str) {
+    return str.trim() === ""
+}
diff --git a/examples/code editor/index.html b/examples/code editor/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <div id="app" x-data="app">
+    <div id="editor" @doc-changed.camel.debounce="calcExpressions" @doc-changed.camel="getCurrentLine"
+      @selection-changed.camel="getCurrentLine"></div>
+    <article id="result" class="markdown-body">
+      <template x-for="expression in expressions">
+        <pre class="results" :class=" (currentLine >= expression.from) && (currentLine <= expression.to) ? 'highligted' : ''"
+          x-html="expression.outputs" x-show="expression.visible"
+          x-effect="if((currentLine >= expression.from) && (currentLine <= expression.to)) $el.scrollIntoView({ block: 'nearest', inline: 'start'})">
+        </pre>
+      </template>
+    </article>
+  </div>
+  <script type="module" src="/main.js"></script>
+</body>
+
+</html>
diff --git a/examples/code editor/javascript.svg b/examples/code editor/javascript.svg
diff --git a/examples/code editor/main.js b/examples/code editor/main.js
@@ -0,0 +1,114 @@
+import './style.css'
+import 'github-markdown-css/github-markdown.css'
+
+import Alpine from 'alpinejs'
+
+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'
+
+const math = create(all)
+const digits = 14
+let parser = math.parser()
+const editorDOM = document.querySelector('#editor')
+const docChanged = new CustomEvent('docChanged')
+const selectionChanged = new CustomEvent('selectionChanged')
+
+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) {
+        editorDOM.dispatchEvent(docChanged)
+      } else if (update.selectionSet) {
+        editorDOM.dispatchEvent(selectionChanged)
+      }
+    })
+  ],
+})
+
+let editor = new EditorView({
+  state: startState,
+  parent: editorDOM
+})
+
+function calc(expression) {
+  let result
+  try {
+    result = parser.evaluate(expression)
+  } catch (error) {
+    result = error.toString()
+  }
+  return result
+}
+
+const formatResult = math.typed({
+  'number': x => math.format(x, { precision: digits }),
+  'string': x => `<code>${x}</code>`,
+  'Help': x => `<pre>${math.format(x)}</pre>`,
+  'any': math.typed.referTo(
+    'number',
+    fnumber => x => katex.renderToString(math.parse(fnumber(x)).toTex())
+  )
+})
+
+function processExpressions(expressions) {
+  parser.clear()
+  return expressions.map(expression => {
+    const result = calc(expression.source)
+    const outputs = formatResult(result)
+    const visible = result === undefined ? false : result.isResultSet ? false : true
+    return ({
+      ...expression,
+      outputs,
+      visible
+    })
+  })
+}
+
+window.Alpine = Alpine
+
+Alpine.data(
+  'app',
+  () => ({
+    expressions: processExpressions(getExpressions(editor.state.doc.toString())),
+    currentLine: 1,
+    get calcExpressions() {
+      this.expressions = processExpressions(getExpressions(editor.state.doc.toString()))
+    },
+    get getCurrentLine() {
+      this.currentLine = editor.state.doc.lineAt(
+        editor.state.selection.ranges[editor.state.selection.mainIndex].from
+      ).number - 1
+    }
+  })
+)
+
+Alpine.start()