Save Markdown on blur and tweak CSS (#123)

markdown/index.html

@@ -9,6 +9,15 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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,21 +93,76 @@
       }
       .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;
       }
       .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;

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,24 +118,36 @@ 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();
     },
     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(() => {

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());

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');
+    });
+  });
+});