Don't display string quotes for math results that are strings. (#92)

Fix bug that could cause the cursor to be positioned immediately to the left of the widget (within its margin) making it look like there was a space character in the buffer when there was not.
Add tests for math blocks.

Fixes #21.

src/editor/block/math.js

@@ -17,10 +17,13 @@ class MathResult extends WidgetType {
     eq(other) { return other.displayResult == this.displayResult }
 
     toDOM() {
-        let wrap = document.createElement("span")
+        const wrap = document.createElement("span")
         wrap.className = "heynote-math-result"
-        wrap.innerHTML = this.displayResult
-        wrap.addEventListener("click", (e) => {
+        const inner = document.createElement("span")
+        inner.className = "inner"
+        inner.innerHTML = this.displayResult
+        wrap.appendChild(inner)
+        inner.addEventListener("click", (e) => {
             e.preventDefault()
             navigator.clipboard.writeText(this.copyResult)
             const copyElement = document.createElement("i")
@@ -64,8 +67,11 @@ function mathDeco(view) {
 
                 // if we got a result from math.js, add the result decoration
                 if (result !== undefined) {
-                    builder.add(line.to, line.to, Decoration.widget({
-                        widget: new MathResult(
+                    let resultWidget
+                    if (typeof(result) === "string") {
+                        resultWidget = new MathResult(result, result)
+                    } else {
+                        resultWidget = new MathResult(
                             math.format(result, {
                                 precision: 8,
                                 upperExp: 8,
@@ -73,9 +79,13 @@ function mathDeco(view) {
                             }),
                             math.format(result, {
                                 notation: "fixed",
-                            }),
-                        ), side: 1},
-                    ))
+                            })
+                        )
+                    }
+                    builder.add(line.to, line.to, Decoration.widget({
+                        widget: resultWidget,
+                        side: 1,
+                    }))
                 }
             }
             pos = line.to + 1

src/editor/theme/base.js

@@ -97,14 +97,16 @@ export const heynoteBase = EditorView.theme({
         height: '0px',
     },
     '.heynote-math-result': {
+        paddingLeft: "12px",
+        position: "relative",
+    },
+    '.heynote-math-result .inner': {
         background: '#48b57e',
         color: '#fff',
         padding: '0px 4px',
         borderRadius: '2px',
-        marginLeft: '12px',
         boxShadow: '0 0 3px rgba(0,0,0, 0.1)',
         cursor: 'pointer',
-        position: "relative",
         whiteSpace: "nowrap",
     },
     '.heynote-math-result-copied': {

src/editor/theme/dark.js

@@ -143,7 +143,7 @@ const darkTheme = EditorView.theme({
         background: "#213644",
         borderTop: "1px solid #1e222a",
     },
-    ".heynote-math-result": {
+    ".heynote-math-result .inner": {
         background: "#0e1217",
         color: "#a0e7c7",
         boxShadow: '0 0 3px rgba(0,0,0, 0.3)',

tests/math.spec.js

@@ -0,0 +1,26 @@
+import { test, expect } from "@playwright/test";
+import { HeynotePage } from "./test-utils.js";
+
+let heynotePage
+
+test.beforeEach(async ({ page }) => {
+    console.log("beforeEach")
+    heynotePage = new HeynotePage(page)
+    await heynotePage.goto()
+});
+
+test("test math mode", async ({ page }) => {
+    await heynotePage.setContent(`
+∞∞∞math
+42*30+77
+`)
+    await expect(page.locator("css=.heynote-math-result")).toHaveText("1337")
+})
+
+test("test math string result has no quotes", async ({ page }) => {
+    await heynotePage.setContent(`
+∞∞∞math
+format(1/3, 3) 
+`)
+        await expect(page.locator("css=.heynote-math-result")).toHaveText("0.333")
+})

tests/test-utils.js

@@ -31,6 +31,7 @@ export class HeynotePage {
     }
 
     async setContent(content) {
+        await expect(this.page.locator("css=.cm-editor")).toBeVisible()
         await this.page.evaluate((content) => window._heynote_editor.setContent(content), content)
     }