From 3ef9ca4b3c1eb5661867125eb6e21abfe861bf8c Mon Sep 17 00:00:00 2001
From: George Gevoian <85144792+georgegevoian@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:25:33 -0500
Subject: [PATCH] Save Markdown on blur and tweak CSS (#123)

---
 markdown/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++---
 markdown/index.js   | 27 +++++++++++++++--
 test/calendar.ts    | 14 +++++++--
 test/markdown.ts    | 46 +++++++++++++++++++++++++++++
 4 files changed, 151 insertions(+), 8 deletions(-)
 create mode 100644 test/markdown.ts

diff --git a/markdown/index.html b/markdown/index.html
index 021c4440..76a657d6 100644
--- a/markdown/index.html
+++ b/markdown/index.html
@@ -9,6 +9,15 @@
     <script src="https://cdn.jsdelivr.net/npm/grainjs@1.0.2/dist/grain-full.min.js"></script>
     <script src="index.js"></script>
     <style>
+      :root {
+        --border-radius: 4px;
+        --medium-font-size: 13px;
+        --primary-bg: #FFFFFF;
+        --primary-fg-hover: #009058;
+        --primary-fg: #16B378;
+        --secondary-fg: #16B378;
+        --secondary-fg-hover: #009058;
+      }
       html, body, textarea {
         width: 100%;
         height: 100vh;
@@ -84,14 +93,13 @@
       }
       .toolbar-read-mode {
         position: absolute;
-        top: 4px;
-        right: 4px;
+        top: 9px;
+        right: 10px;
         z-index: 100;
         background-color: #ffffff80;
-        border: 1px solid #16b378;
         margin: 0;
         padding: 0;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
       }
       .toolbar-read-mode > :not(.edit-action) {
         display: none !important;
@@ -99,6 +107,62 @@
       .editor-preview {
         background: white;
       }
+      .edit-action,
+      .save-action {
+        float: right;
+        padding: 4px 8px !important;
+
+        position: relative;
+        outline: none;
+        line-height: normal;
+        font-size: var(--medium-font-size);
+        font-weight: 500 !important;
+        letter-spacing: -0.08px;
+        color: var(--grist-theme-control-primary-fg, var(--primary-bg));
+        background: var(--grist-theme-control-primary-bg, var(--primary-fg)) !important;
+        border: 1px solid var(--grist-theme-control-primary-bg, var(--primary-fg)) !important;
+        border-radius: var(--border-radius) !important;
+        cursor: pointer;
+
+        appearance: button;
+        -webkit-appearance: button;
+      }
+      .cancel-action {
+        float: right;
+        margin-right: 8px !important;
+        padding: 4px 8px !important;
+
+        position: relative;
+        outline: none;
+        line-height: normal;
+        font-size: var(--medium-font-size);
+        font-weight: 400 !important;
+        letter-spacing: -0.08px;
+        color: var(--grist-theme-control-fg, var(--secondary-fg));
+        background: transparent !important;
+        border: 1px solid var(--grist-theme-control-fg, var(--secondary-fg)) !important;
+        border-radius: var(--border-radius) !important;
+        cursor: pointer;
+
+        appearance: button;
+        -webkit-appearance: button;
+      }
+      .edit-action:hover,
+      .save-action:hover {
+        color: var(--grist-theme-control-primary-fg, var(--primary-bg));
+        background: var(--grist-theme-control-primary-hover-bg, var(--primary-fg-hover)) !important;
+        border: 1px solid var(--grist-theme-control-primary-hover-bg, var(--primary-fg-hover)) !important;
+      }
+      .cancel-action:hover {
+        color: var(--grist-theme-control-hover-fg, var(--secondary-fg-hover));
+        background: transparent !important;
+        border: 1px solid var(--grist-theme-control-hover-fg, var(--secondary-fg-hover)) !important;
+      }
+      .cancel-action > i,
+      .edit-action > i,
+      .save-action > i {
+        display: none;
+      }
       @media print {
         html, body, textarea {
           height: initial !important;
diff --git a/markdown/index.js b/markdown/index.js
index 6b8c502a..3d0a8d90 100644
--- a/markdown/index.js
+++ b/markdown/index.js
@@ -35,13 +35,20 @@ window.addEventListener('keydown', (ev) => {
   } else if (ev.keyCode === 27) {
     if (!txt.isPreviewActive()) {
       // If user pressed Escape, cancel edit
-      txt.value("" + cachedData);
+      cancel();
       readMode();
       ev.preventDefault();
     }
   }
 })
 
+window.addEventListener('blur', () => {
+  if (txt.isPreviewActive()) { return; }
+
+  save();
+  readMode();
+});
+
 function editMode() {
   isEditMode.set(true);
   if (txt.isPreviewActive()) {
@@ -97,6 +104,10 @@ function save() {
   });
 }
 
+function cancel() {
+  txt.value("" + cachedData);
+}
+
 function ready(fn) {
   if (document.readyState !== 'loading'){
     fn();
@@ -107,8 +118,10 @@ function ready(fn) {
 
 var isMac = /Mac/.test(navigator.platform);
 var toolbar = [
+  "bold", "italic", "heading", "quote", "|", "link", "guide",
   {
     name: 'save',
+    text: 'Save',
     action: function(editor) {
       save();
       readMode();
@@ -116,15 +129,25 @@ var toolbar = [
     className: 'fa fa-save save-action',
     title: `Save (${isMac ? 'Cmd' : 'Ctrl'} + S)`
   },
+  {
+    name: 'cancel',
+    text: 'Cancel',
+    action: function(editor) {
+      cancel();
+      readMode();
+    },
+    className: 'fa fa-cancel cancel-action',
+    title: `Cancel (Escape)`
+  },
   {
     name: 'edit',
+    text: 'Edit',
     action: function(editor) {
       editMode();
     },
     className: 'fa fa-pencil edit-action',
     title: 'Edit (Enter or Space)'
   },
-  "|", "bold", "italic", "heading", "quote", "|", "link", "guide",
 ];
 
 ready(() => {
diff --git a/test/calendar.ts b/test/calendar.ts
index 2aa528d2..aea548c0 100644
--- a/test/calendar.ts
+++ b/test/calendar.ts
@@ -201,9 +201,19 @@ describe('calendar', function () {
     // find a way to mock a date both in the system (by using TimeShift) and in the TUI Calendar to get rid of this
     // data builder here.
     const monthNameOf = (date: Date) => date.toLocaleString('en-us', {month: 'long', year: 'numeric'});
-    const shiftMonth = (date: Date, months: number) => {
+    const shiftMonth = (date: Date, months: 1 | -1) => {
       const newDate = new Date(date);
-      newDate.setMonth(date.getMonth() + months);
+      newDate.setDate(1);
+      const currentMonth = date.getMonth();
+      if (currentMonth === 0 && months === -1) {
+        newDate.setMonth(11);
+        newDate.setFullYear(newDate.getFullYear() - 1);
+      } else if (currentMonth === 11 && months === 1) {
+        newDate.setMonth(0);
+        newDate.setFullYear(newDate.getFullYear() + 1);
+      } else {
+        newDate.setMonth(currentMonth + months);
+      }
       return newDate;
     };
     const now = new Date(Date.now());
diff --git a/test/markdown.ts b/test/markdown.ts
new file mode 100644
index 00000000..30b1659f
--- /dev/null
+++ b/test/markdown.ts
@@ -0,0 +1,46 @@
+import { Key, assert } from 'mocha-webdriver';
+import { getGrist } from 'test/getGrist';
+
+describe('markdown', function() {
+  this.timeout(20000);
+  const grist = getGrist();
+
+  it('renders text as markdown', async function() {
+    const docId = await grist.upload('test/fixtures/docs/SchoolsSample.grist');
+    await grist.openDoc(docId);
+    await grist.toggleSidePanel('right', 'open');
+    await grist.addNewSection(/Custom/, /School/, {dismissTips: true});
+    await grist.clickWidgetPane();
+    await grist.selectCustomWidget(/Markdown/);
+    await grist.setCustomWidgetAccess('full');
+    await grist.setCustomWidgetMapping('Content', /School Head/);
+    await grist.waitToPass(async () => {
+      const paragraph = await grist.getCustomWidgetBody('.editor-preview > p');
+      assert.equal(paragraph, 'SUPERINTENDENT - DR. MARGUERITE VANDEN WYNGAARD');
+    });
+    await grist.inCustomWidget(async () => {
+      await grist.driver.find('button.edit').click();
+      await grist.driver.sendKeys('# ');
+      await grist.driver.find('button.save').click();
+    });
+    await grist.waitToPass(async () => {
+      const heading = await grist.getCustomWidgetBody('.editor-preview > h1');
+      assert.equal(heading, 'SUPERINTENDENT - DR. MARGUERITE VANDEN WYNGAARD');
+    });
+  });
+
+  it('saves on blur', async function() {
+    await grist.inCustomWidget(async () => {
+      await grist.driver.find('button.edit').click();
+      await grist.driver.sendKeys(Key.END, Key.ENTER, Key.ENTER,
+        ' - Phone Number: (123) 456-7890');
+    });
+    await grist.openAccountMenu();
+    await grist.waitToPass(async () => {
+      const heading = await grist.getCustomWidgetBody('.editor-preview > h1');
+      assert.equal(heading, 'SUPERINTENDENT - DR. MARGUERITE VANDEN WYNGAARD');
+      const listItem = await grist.getCustomWidgetBody('.editor-preview > ul > li');
+      assert.equal(listItem, 'Phone Number: (123) 456-7890');
+    });
+  });
+});