From 6947c912a78079335d31d940f3e097d1751ec487 Mon Sep 17 00:00:00 2001
From: Scott Bell <scott@traclabs.com>
Date: Tue, 3 Oct 2023 00:28:02 +0200
Subject: [PATCH] Add markdown to notebook entries (#7084)

* try marked out

* fix url validation

* now rendering blockquotes properly

* add abbrv, link titles, and strikethrough

* fix tests and lint

* Closes #6060
- CSS resets and styling for markdown-related HTML markup in Notebook entries.
- Better styling and cursor affordances for Notebook entry selection and editing interaction flow.

* add line breaks option

* Closes #6060
- Tab

* Closes #6060
- Conversion of contenteditable-div to textarea started.
- Stubbed in textarea with styles.

* have it markdown with a textarea and adjust size automatically

* Closes #6060
- Padding added back to text `div` area.

* Closes #6060
- Styles added to support Shift Log and hover behavior for entries on locked pages.
- Removed `--major` styling from Shift Log Commit Entries button
to reduce confusion with entry commit button.
- CSS code cleanups.

* two step focus/edit. also scroll into view for editing

* add markdown, strip all tags, and truncate

* lint

* remove unneeded code

* fix notebook entry, selected page may also be null

* fix existing notebook tests

* lint

* fix whitelist

* readd whitelist

* lint

* fix link tests

* fix tests

* fix tagging test

* add some markdown test

* get rid of pause

* add another sanitization step

---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
---
 e2e/helper/notebookUtils.js                   |    4 +-
 .../plugins/notebook/notebook.e2e.spec.js     |   50 +-
 .../notebook/notebookSnapshots.e2e.spec.js    |    2 -
 .../plugins/notebook/tags.e2e.spec.js         |   10 +-
 .../contract/notebook.contract.perf.spec.js   |    5 +-
 package.json                                  |    1 +
 src/plugins/notebook/components/Notebook.vue  |   16 +-
 .../notebook/components/NotebookEntry.vue     |  176 ++-
 src/plugins/notebook/pluginSpec.js            |    6 +-
 src/styles/notebook.scss                      | 1357 +++++++++--------
 .../layout/search/AnnotationSearchResult.vue  |   73 +-
 11 files changed, 960 insertions(+), 740 deletions(-)

diff --git a/e2e/helper/notebookUtils.js b/e2e/helper/notebookUtils.js
index 4e27da9b54..ae4e6bd39e 100644
--- a/e2e/helper/notebookUtils.js
+++ b/e2e/helper/notebookUtils.js
@@ -34,7 +34,8 @@ async function enterTextEntry(page, text) {
   await page.locator(NOTEBOOK_DROP_AREA).click();
 
   // enter text
-  await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').fill(text);
+  await page.getByLabel('Notebook Entry Display').last().click();
+  await page.getByLabel('Notebook Entry Input').last().fill(text);
   await commitEntry(page);
 }
 
@@ -52,7 +53,6 @@ async function dragAndDropEmbed(page, notebookObject) {
   await page.click('button[title="Show selected item in tree"]');
   // Drag and drop the SWG into the notebook
   await page.dragAndDrop(`text=${swg.name}`, NOTEBOOK_DROP_AREA);
-  await commitEntry(page);
 }
 
 /**
diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
index 79fb500474..fe68487377 100644
--- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
@@ -279,8 +279,8 @@ test.describe('Notebook entry tests', () => {
 
     // Click .c-notebook__drag-area
     await page.locator('.c-notebook__drag-area').click();
-    await expect(page.locator('[aria-label="Notebook Entry Input"]')).toBeVisible();
-    await expect(page.locator('[aria-label="Notebook Entry"]')).toHaveClass(/is-selected/);
+    await expect(page.getByLabel('Notebook Entry Display')).toBeVisible();
+    await expect(page.getByLabel('Notebook Entry', { exact: true })).toHaveClass(/is-selected/);
   });
   test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({
     page
@@ -369,6 +369,8 @@ test.describe('Notebook entry tests', () => {
 
     const validLink = page.locator(`a[href="${TEST_LINK}"]`);
 
+    expect(await validLink.count()).toBe(1);
+
     // Start waiting for popup before clicking. Note no await.
     const popupPromise = page.waitForEvent('popup');
 
@@ -378,8 +380,6 @@ test.describe('Notebook entry tests', () => {
     // Wait for the popup to load.
     await popup.waitForLoadState();
     expect.soft(popup.url()).toContain('www.google.com');
-
-    expect(await validLink.count()).toBe(1);
   });
   test('when an invalid link is entered into a notebook entry, it does not become clickable when viewing', async ({
     page
@@ -447,6 +447,8 @@ test.describe('Notebook entry tests', () => {
 
     const validLink = page.locator(`a[href="${TEST_LINK}"]`);
 
+    expect(await validLink.count()).toBe(1);
+
     // Start waiting for popup before clicking. Note no await.
     const popupPromise = page.waitForEvent('popup');
 
@@ -456,8 +458,6 @@ test.describe('Notebook entry tests', () => {
     // Wait for the popup to load.
     await popup.waitForLoadState();
     expect.soft(popup.url()).toContain('www.google.com');
-
-    expect(await validLink.count()).toBe(1);
   });
   test('when a nefarious link is entered into a notebook entry, it is sanitized when viewing', async ({
     page
@@ -482,4 +482,42 @@ test.describe('Notebook entry tests', () => {
     expect.soft(await sanitizedLink.count()).toBe(1);
     expect(await unsanitizedLink.count()).toBe(0);
   });
+  test('Can add markdown to a notebook entry', async ({ page }) => {
+    await page.goto(notebookObject.url);
+
+    // Headers
+    const headerMarkdown = `# Big Header\n## Large Header\n### Medium Header\n#### Small Header`;
+    await nbUtils.enterTextEntry(page, headerMarkdown);
+    await expect(page.getByRole('heading', { name: 'Big Header' })).toBeVisible();
+
+    // Text markup
+    const markupText =
+      '**This is bold.** _This is italic_. `This is code`. ~This is strikethrough~';
+    await nbUtils.enterTextEntry(page, markupText);
+    await expect(page.locator('strong:has-text("This is bold.")')).toBeVisible();
+
+    // Tables
+    const tablesText = '|Col 1|Col 2|Col3|\n|-|-|-|\n |Value 1|Value 2|Value 3|\n';
+    await nbUtils.enterTextEntry(page, tablesText);
+    await expect(page.getByRole('cell', { name: 'Value 2' })).toBeVisible();
+
+    // Links
+    const linksText =
+      'Raw links https://www.google.com and Markdown links like [Google](https://www.google.com) work';
+    await nbUtils.enterTextEntry(page, linksText);
+    await expect(page.getByRole('link', { name: 'https://www.google.com' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Google', exact: true })).toBeVisible();
+
+    // Lists
+    const listsText = '- List item 1\n   - Item 1A \n- List Item 2\n  1. Order 1\n  1. Order 2\n';
+    await nbUtils.enterTextEntry(page, listsText);
+    const childItem = page.locator('li:has-text("List Item 2") ol li:has-text("Order 2")');
+    await expect(childItem).toBeVisible();
+
+    // Blocks
+    const blockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```';
+    await nbUtils.enterTextEntry(page, blockTest);
+    const codeBlock = page.locator('code.language-javascript:has-text("const foo = \\"bar\\";")');
+    await expect(codeBlock).toBeVisible();
+  });
 });
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
index e0d76dc53f..e4b80b62ee 100644
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -192,8 +192,6 @@ test.describe('Snapshot image tests', () => {
     // be sure that entry was created
     await expect(page.getByText('favicon-96x96.png')).toBeVisible();
 
-    // click on image (need to click twice to focus)
-    await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).click();
     await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).click();
 
     // expect large image to be displayed
diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
index 586336f381..89f46c7d3c 100644
--- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
@@ -147,16 +147,14 @@ test.describe('Tagging in Notebooks @addInit', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/5823'
     });
-
     await createNotebookEntryAndTags(page);
 
     await page.locator('text=To start a new entry, click here or drag and drop any object').click();
-    const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = 1`;
-    await page.locator(entryLocator).click();
-    await page.locator(entryLocator).fill(`An entry without tags`);
-    await page.locator('[aria-label="Notebook Entry Input"] >> nth=1').press('Enter');
+    await page.getByLabel('Notebook Entry Display').last().click();
+    await page.getByLabel('Notebook Entry Input').fill(`An entry without tags`);
+    await page.locator('.c-ne__save-button > button').click();
 
-    await page.hover('[aria-label="Notebook Entry Input"] >> nth=1');
+    await page.hover('[aria-label="Notebook Entry Display"] >> nth=1');
     await page.locator('button[title="Delete this entry"]').last().click();
     await expect(
       page.locator('text=This action will permanently delete this entry. Do you wish to continue?')
diff --git a/e2e/tests/performance/contract/notebook.contract.perf.spec.js b/e2e/tests/performance/contract/notebook.contract.perf.spec.js
index 4402e6960e..a2db7a0f3c 100644
--- a/e2e/tests/performance/contract/notebook.contract.perf.spec.js
+++ b/e2e/tests/performance/contract/notebook.contract.perf.spec.js
@@ -131,8 +131,9 @@ test.describe('Performance tests', () => {
     await page.evaluate(() => window.performance.mark('new-notebook-entry-created'));
 
     // Enter Notebook Entry text
-    await page.locator('div.c-ne__text').last().fill('New Entry');
-    await page.keyboard.press('Enter');
+    await page.getByLabel('Notebook Entry').last().click();
+    await page.getByLabel('Notebook Entry Input').last().fill('New Entry');
+    await page.locator('.c-ne__save-button').click();
     await page.evaluate(() => window.performance.mark('new-notebook-entry-filled'));
 
     //Individual Notebook Entry Search
diff --git a/package.json b/package.json
index ef67d55b1b..837f29e4cd 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "karma-webpack": "5.0.0",
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
+    "marked": "9.0.3",
     "mini-css-extract-plugin": "2.7.6",
     "moment": "2.29.4",
     "moment-duration-format": "2.3.2",
diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/Notebook.vue
index fb65a2aaf0..eb4edde72f 100644
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/Notebook.vue
@@ -19,7 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
 <template>
   <div class="c-notebook" :class="[{ 'c-notebook--restricted': isRestricted }]">
     <div class="c-notebook__head">
@@ -62,7 +61,13 @@
         @selectSection="selectSection"
         @toggleNav="toggleNav"
       />
-      <div class="c-notebook__page-view">
+      <div
+        class="c-notebook__page-view"
+        :class="{
+          'c-notebook--page-locked': selectedPage?.isLocked,
+          'c-notebook--page-unlocked': !selectedPage?.isLocked
+        }"
+      >
         <div class="c-notebook__page-view__header">
           <button
             class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
@@ -107,9 +112,9 @@
           class="c-telemetry-table__progress-bar"
           :model="{ progressPerc: null }"
         />
-        <div v-if="selectedPage && selectedPage.isLocked" class="c-notebook__page-locked">
+        <div v-if="selectedPage && selectedPage.isLocked" class="c-notebook__page-locked-message">
           <div class="icon-lock"></div>
-          <div class="c-notebook__page-locked__message">
+          <div class="c-notebook__page-locked-message-text">
             This page has been committed and cannot be modified or removed
           </div>
         </div>
@@ -142,7 +147,7 @@
           class="c-notebook__commit-entries-control"
         >
           <button
-            class="c-button c-button--major commit-button icon-lock"
+            class="c-button commit-button icon-lock"
             title="Commit entries and lock this page from further changes"
             @click="lockPage()"
           >
@@ -185,6 +190,7 @@ import {
 import NotebookEntry from './NotebookEntry.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
+
 function objectCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
index adb7053683..3101a2df3e 100644
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@@ -23,6 +23,7 @@
 
 <template>
   <div
+    ref="entry"
     class="c-notebook__entry c-ne has-local-controls"
     aria-label="Notebook Entry"
     :class="{ locked: isLocked, 'is-selected': isSelectedEntry, 'is-editing': editMode }"
@@ -56,7 +57,7 @@
         <template v-if="readOnly && result">
           <div :id="entry.id" class="c-ne__text highlight" tabindex="0">
             <TextHighlight
-              :text="formatValidUrls(entry.text)"
+              :text="convertMarkDownToHtml(entry.text)"
               :highlight="highlightText"
               :highlight-class="'search-highlight'"
             />
@@ -64,18 +65,26 @@
         </template>
         <template v-else-if="!isLocked">
           <div
+            v-if="!editMode"
             v-bind.prop="formattedText"
             :id="entry.id"
-            class="c-ne__text c-ne__input"
+            tabindex="-1"
+            aria-label="Notebook Entry Display"
+            class="c-ne__text"
+            @mouseover="checkEditability($event)"
+            @click="editingEntry($event)"
+          ></div>
+          <textarea
+            v-else
+            :id="entry.id"
+            ref="entryInput"
+            v-model="entry.text"
+            class="c-ne__input"
             aria-label="Notebook Entry Input"
             tabindex="-1"
-            :contenteditable="canEdit"
-            @mouseover="checkEditability($event)"
             @mouseleave="canEdit = true"
-            @mousedown="preventFocusIfNotSelected($event)"
-            @focus="editingEntry()"
             @blur="updateEntryValue($event)"
-          ></div>
+          ></textarea>
           <div v-if="editMode" class="c-ne__save-button">
             <button class="c-button c-button--major icon-check"></button>
           </div>
@@ -139,6 +148,7 @@
 
 <script>
 import _ from 'lodash';
+import { Marked } from 'marked';
 import Moment from 'moment';
 import sanitizeHtml from 'sanitize-html';
 
@@ -151,11 +161,49 @@ import {
 import NotebookEmbed from './NotebookEmbed.vue';
 
 const SANITIZATION_SCHEMA = {
-  allowedTags: [],
-  allowedAttributes: {}
+  allowedTags: [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'p',
+    'a',
+    'ul',
+    'ol',
+    'li',
+    'b',
+    'i',
+    'strong',
+    'em',
+    's',
+    'strike',
+    'code',
+    'hr',
+    'br',
+    'div',
+    'table',
+    'thead',
+    'caption',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'pre',
+    'del',
+    'ins',
+    'mark',
+    'abbr'
+  ],
+  allowedAttributes: {
+    a: ['href', 'target', 'class', 'title'],
+    code: ['class'],
+    abbr: ['title']
+  }
 };
-const URL_REGEX =
-  /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
+
 const UNKNOWN_USER = 'Unknown';
 
 export default {
@@ -236,16 +284,15 @@ export default {
       return this.formatTime(this.entry.createdOn, 'HH:mm:ss');
     },
     formattedText() {
-      // remove ANY tags
-      const text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
+      const text = this.entry.text;
 
-      if (this.editMode || this.urlWhitelist.length === 0) {
+      if (this.editMode) {
         return { innerText: text };
       }
 
-      const html = this.formatValidUrls(text);
+      const markDownHtml = this.convertMarkDownToHtml(text);
 
-      return { innerHTML: html };
+      return { innerHTML: markDownHtml };
     },
     isSelectedEntry() {
       return this.selectedEntryId === this.entry.id;
@@ -276,7 +323,23 @@ export default {
       return text;
     }
   },
+  watch: {
+    editMode() {
+      this.$nextTick(() => {
+        // waiting for textarea to be rendered
+        this.$refs.entryInput?.focus();
+        this.adjustTextareaHeight();
+      });
+    }
+  },
+  beforeMount() {
+    this.marked = new Marked();
+    this.renderer = new this.marked.Renderer();
+  },
   mounted() {
+    const originalLinkRenderer = this.renderer.link;
+    this.renderer.link = this.validateLink.bind(this, originalLinkRenderer);
+
     this.manageEmbedLayout = _.debounce(this.manageEmbedLayout, 400);
 
     if (this.$refs.embedsWrapper) {
@@ -309,6 +372,41 @@ export default {
 
       this.manageEmbedLayout();
     },
+    convertMarkDownToHtml(text) {
+      let markDownHtml = this.marked.parse(text, {
+        breaks: true,
+        renderer: this.renderer
+      });
+      markDownHtml = sanitizeHtml(markDownHtml, SANITIZATION_SCHEMA);
+      return markDownHtml;
+    },
+    adjustTextareaHeight() {
+      if (this.$refs.entryInput) {
+        this.$refs.entryInput.style.height = 'auto';
+        this.$refs.entryInput.style.height = `${this.$refs?.entryInput.scrollHeight}px`;
+        this.$refs.entryInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    },
+    validateLink(originalLinkRenderer, href, title, text) {
+      try {
+        const domain = new URL(href).hostname;
+        const urlIsWhitelisted = this.urlWhitelist.some((partialDomain) => {
+          return domain.endsWith(partialDomain);
+        });
+        if (!urlIsWhitelisted) {
+          return text;
+        }
+        const linkHtml = originalLinkRenderer.call(this.renderer, href, title, text);
+        const linkHtmlWithTarget = linkHtml.replace(
+          /^<a /,
+          '<a class="c-hyperlink" target="_blank"'
+        );
+        return linkHtmlWithTarget;
+      } catch (error) {
+        // had error parsing this URL, just return the text
+        return text;
+      }
+    },
     cancelEditMode(event) {
       const isEditing = this.openmct.editor.isEditing();
       if (isEditing) {
@@ -333,22 +431,6 @@ export default {
     deleteEntry() {
       this.$emit('deleteEntry', this.entry.id);
     },
-    formatValidUrls(text) {
-      return text.replace(URL_REGEX, (match) => {
-        const url = new URL(match);
-        const domain = url.hostname;
-        let result = match;
-        let isMatch = this.urlWhitelist.find((partialDomain) => {
-          return domain.endsWith(partialDomain);
-        });
-
-        if (isMatch) {
-          result = `<a class="c-hyperlink" target="_blank" href="${match}">${match}</a>`;
-        }
-
-        return result;
-      });
-    },
     manageEmbedLayout() {
       if (this.$refs.embeds) {
         const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;
@@ -417,9 +499,6 @@ export default {
 
       return position;
     },
-    forceBlur(event) {
-      event.target.blur();
-    },
     formatTime(unixTime, timeFormat) {
       return Moment.utc(unixTime).format(timeFormat);
     },
@@ -474,29 +553,26 @@ export default {
 
       this.$emit('updateEntry', this.entry);
     },
-    preventFocusIfNotSelected($event) {
-      if (!this.isSelectedEntry) {
-        $event.preventDefault();
-        // blur the previous focused entry if clicking on non selected entry input
-        const focusedElementId = document.activeElement?.id;
-        if (focusedElementId !== this.entry.id) {
-          document.activeElement.blur();
-        }
+    editingEntry(event) {
+      this.selectAndEmitEntry(event, this.entry);
+      if (this.isSelectedEntry) {
+        // selected and click, so we're ready to edit
+        this.selectAndEmitEntry(event, this.entry);
+        this.editMode = true;
+        this.adjustTextareaHeight();
+        this.$emit('editingEntry');
       }
     },
-    editingEntry() {
-      this.editMode = true;
-      this.$emit('editingEntry');
-    },
     updateEntryValue($event) {
       this.editMode = false;
-      const value = $event.target.innerText;
-      this.entry.text = sanitizeHtml(value, SANITIZATION_SCHEMA);
+      const rawEntryValue = $event.target.value;
+      const sanitizeInput = sanitizeHtml(rawEntryValue, { allowedAttributes: [], allowedTags: [] });
+      this.entry.text = sanitizeInput;
       this.timestampAndUpdate();
     },
     selectAndEmitEntry(event, entry) {
       selectEntry({
-        element: event.currentTarget,
+        element: this.$refs.entry,
         entryId: entry.id,
         domainObject: this.domainObject,
         openmct: this.openmct,
diff --git a/src/plugins/notebook/pluginSpec.js b/src/plugins/notebook/pluginSpec.js
index 12d5c276a3..a6b006daf1 100644
--- a/src/plugins/notebook/pluginSpec.js
+++ b/src/plugins/notebook/pluginSpec.js
@@ -220,7 +220,7 @@ describe('Notebook plugin:', () => {
       const notebookEntryElements = element.querySelectorAll('.c-notebook__entry');
       const firstEntryText = getEntryText(0);
       expect(notebookEntryElements.length).toBe(2);
-      expect(firstEntryText.innerText).toBe('First Test Entry');
+      expect(firstEntryText.innerText.trim()).toBe('First Test Entry');
     });
 
     describe('synchronization', () => {
@@ -232,13 +232,13 @@ describe('Notebook plugin:', () => {
       });
 
       it('updates an entry when another user modifies it', () => {
-        expect(getEntryText(0).innerText).toBe('First Test Entry');
+        expect(getEntryText(0).innerText.trim()).toBe('First Test Entry');
         objectCloneToSyncFrom.configuration.entries['test-section-1']['test-page-1'][0].text =
           'Modified entry text';
         objectProviderObserver(objectCloneToSyncFrom);
 
         return Vue.nextTick().then(() => {
-          expect(getEntryText(0).innerText).toBe('Modified entry text');
+          expect(getEntryText(0).innerText.trim()).toBe('Modified entry text');
         });
       });
 
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index cecb4f2ed5..edaddd1124 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -22,802 +22,873 @@
 
 /*********************************************** NOTEBOOK */
 @mixin searchHighlight {
-  background: rgba($colorBtnSelectedBg, 0.4);
-  color: $colorBtnSelectedFg;
-  font-weight: bold;
+    background: rgba($colorBtnSelectedBg, 0.4);
+    color: $colorBtnSelectedFg;
+    font-weight: bold;
 }
 
 .c-notebook {
-  $headerFontSize: 1.3em;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  overflow: hidden;
-  height: 100%;
-
-  /****************************** CONTENT */
-  &__body {
-    // Holds __nav and __page-view
+    $headerFontSize: 1.3em;
     display: flex;
+    flex-direction: column;
     flex: 1 1 auto;
     overflow: hidden;
-  }
+    height: 100%;
 
-  &__nav {
-    flex: 0 0 auto;
-
-    * {
-      overflow: hidden;
-    }
-  }
-
-  .c-sidebar {
-    .c-sidebar__pane {
-      flex-basis: 50%;
-    }
-  }
-
-  body.mobile & {
-    .c-list-button,
-    &-snapshot-menubutton {
-      display: none;
-    }
-  }
-
-  /****************************** CONTENT */
-  &__contents {
-    width: 70%;
-  }
-
-  &__page-view {
-    // Holds __header, __drag-area and __entries
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    width: 100%;
-
-    > * {
-      flex: 0 0 auto;
-
-      + * {
-        margin-top: $interiorMargin;
-      }
-    }
-  }
-
-  > * + * {
-    margin-top: $interiorMargin;
-  }
-
-  &__head,
-  &__controls,
-  &__drag-area,
-  &__entries {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  &__head,
-  &__drag-area,
-  &__controls {
-    flex: 0 0 auto;
-  }
-
-  &__head {
-    [class*='__'] + [class*='__'] {
-      margin-left: $interiorMargin;
-    }
-  }
-
-  &__search {
-    flex: 1 1 auto;
-  }
-
-  &__page-locked,
-  &__drag-area {
-    border-radius: $controlCr;
-    padding: 10px;
-
-    &:before {
-      margin-right: 7px !important;
-    }
-  }
-
-  &__drag-area {
-    background: rgba($colorKey, 0.1);
-    border: 1px dashed rgba($colorKey, 0.7);
-    color: $colorKey;
-    cursor: pointer;
-    justify-content: center;
-
-    [class*='__label'] {
-      font-style: italic;
-      @include ellipsize();
+    /****************************** CONTENT */
+    &__body {
+        // Holds __nav and __page-view
+        display: flex;
+        flex: 1 1 auto;
+        overflow: hidden;
     }
 
-    &:hover {
-      background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
-      //color: $colorBodyFg;
+    &__nav {
+        flex: 0 0 auto;
+
+        * {
+            overflow: hidden;
+        }
     }
 
-    &.drag-active,
-    &.is-active {
-      // Not currently working
-      border-color: $colorKey;
+    .c-sidebar {
+        .c-sidebar__pane {
+            flex-basis: 50%;
+        }
     }
 
     body.mobile & {
-      display: none;
-    }
-  }
-
-  /***** PAGE VIEW */
-  &__page-view {
-    &__header {
-      display: flex;
-      flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
-      line-height: 220%;
-
-      > * {
-        flex: 0 0 auto;
-      }
-    }
-
-    &__path {
-      flex: 1 1 auto;
-      margin: 0 $interiorMargin;
-      overflow: hidden;
-      white-space: nowrap;
-      font-size: $headerFontSize;
-
-      > * {
-        // Section
-        flex: 0 0 auto;
-
-        + * {
-          // Page
-          display: inline;
-          flex: 1 1 auto;
-          @include ellipsize();
+        .c-list-button,
+        &-snapshot-menubutton {
+            display: none;
         }
-      }
-    }
-  }
-
-  &__entries {
-    flex-direction: column;
-    flex: 1 1 auto;
-    overflow-x: hidden;
-    overflow-y: scroll;
-
-    @include desktop() {
-      padding-right: $interiorMarginSm; // Scrollbar kickoff
     }
 
-    [class*='__entry'] + [class*='__entry'] {
-      margin-top: $interiorMarginSm;
+    /****************************** CONTENT */
+    &__contents {
+        width: 70%;
     }
 
-    .commit-button {
-      @include cButton();
-      position: absolute;
-      right: 5px;
-      bottom: 5px;
-    }
-  }
+    &__page-view {
+        // Holds __header, __drag-area and __entries
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        width: 100%;
 
-  /***** SEARCH RESULTS */
-  &__search-results {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    overflow-y: auto;
+        > * {
+            flex: 0 0 auto;
+
+            + * {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
 
     > * + * {
-      margin-top: 5px;
-    }
-
-    &__header {
-      font-size: $headerFontSize;
-      flex: 0 0 auto;
-    }
-
-    .c-notebook__entries {
-      flex: 1 1 auto;
-    }
-
-    .c-ne {
-      flex-direction: column;
-
-      > * + * {
         margin-top: $interiorMargin;
-      }
-    }
-  }
-
-  /***** RESTRICTED NOTEBOOK */
-  &__page-locked {
-    background: rgba($colorAlert, 0.2);
-    display: flex;
-    padding: 5px;
-
-    > * + * {
-      margin-left: $interiorMargin;
     }
 
-    [class*='icon'] {
-      flex: 0 0 auto;
+    &__head,
+    &__controls,
+    &__drag-area,
+    &__entries {
+        display: flex;
+        flex-wrap: nowrap;
     }
 
-    [class*='__message'] {
-      flex: 1 1 auto;
+    &__head,
+    &__drag-area,
+    &__controls {
+        flex: 0 0 auto;
     }
-  }
 
-  &__commit-entries-control {
-    display: flex;
-    justify-content: flex-end;
-  }
+    &__head {
+        [class*='__'] + [class*='__'] {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    &__search {
+        flex: 1 1 auto;
+    }
+
+    &__page-locked-message,
+    &__drag-area {
+        border-radius: $controlCr;
+        padding: 10px;
+
+        &:before {
+            margin-right: 7px !important;
+        }
+    }
+
+    &__drag-area {
+        background: rgba($colorKey, 0.1);
+        border: 1px dashed rgba($colorKey, 0.7);
+        color: $colorKey;
+        cursor: pointer;
+        justify-content: center;
+
+        [class*='__label'] {
+            font-style: italic;
+            @include ellipsize();
+        }
+
+        &:hover {
+            background: rgba($colorBodyFg, 0.1);
+        }
+
+        &.drag-active,
+        &.is-active {
+            // Not currently working
+            border-color: $colorKey;
+        }
+
+        body.mobile & {
+            display: none;
+        }
+    }
+
+    /***** PAGE VIEW */
+    &__page-view {
+        &__header {
+            display: flex;
+            flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
+            line-height: 220%;
+
+            > * {
+                flex: 0 0 auto;
+            }
+        }
+
+        &__path {
+            flex: 1 1 auto;
+            margin: 0 $interiorMargin;
+            overflow: hidden;
+            white-space: nowrap;
+            font-size: $headerFontSize;
+
+            > * {
+                // Section
+                flex: 0 0 auto;
+
+                + * {
+                    // Page
+                    display: inline;
+                    flex: 1 1 auto;
+                    @include ellipsize();
+                }
+            }
+        }
+    }
+
+    &__entries {
+        flex-direction: column;
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        @include desktop() {
+            padding-right: $interiorMarginSm; // Scrollbar kickoff
+        }
+
+        [class*='__entry'] + [class*='__entry'] {
+            margin-top: $interiorMarginSm;
+        }
+
+        .commit-button {
+            @include cButton();
+            position: absolute;
+            right: 5px;
+            bottom: 5px;
+        }
+    }
+
+    /***** SEARCH RESULTS */
+    &__search-results {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        overflow-y: auto;
+
+        > * + * {
+            margin-top: 5px;
+        }
+
+        &__header {
+            font-size: $headerFontSize;
+            flex: 0 0 auto;
+        }
+
+        .c-notebook__entries {
+            flex: 1 1 auto;
+        }
+
+        .c-ne {
+            flex-direction: column;
+
+            > * + * {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    /***** RESTRICTED NOTEBOOK */
+    &__page-locked-message {
+        background: rgba($colorAlert, 0.2);
+        display: flex;
+        padding: 5px;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+
+        [class*='icon'] {
+            flex: 0 0 auto;
+        }
+
+        [class*='__message'] {
+            flex: 1 1 auto;
+        }
+    }
+
+    &__commit-entries-control {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 .is-notebook-default,
 .is-status--notebook-default {
-  &:after {
-    color: $colorFilter;
-    font-family: symbolsfont;
-    font-size: 0.9em;
-  }
+    &:after {
+        color: $colorFilter;
+        font-family: symbolsfont;
+        font-size: 0.9em;
+    }
 
-  &.c-list__item:after {
-    content: $glyph-icon-notebook-page;
-    flex: 1 0 auto;
-    text-align: right;
-  }
+    &.c-list__item:after {
+        content: $glyph-icon-notebook-page;
+        flex: 1 0 auto;
+        text-align: right;
+    }
 }
 
 /****************************** ENTRIES */
 .c-ne {
-  // A Notebook entry
-  $p: $interiorMarginSm;
-  @include discreteItem();
-  display: flex;
-  padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
-
-  &:hover {
-    background: rgba($colorBodyFg, 0.2);
-  }
-
-  &.is-selected {
-    background: rgba($colorKey, 0.3);
-  }
-
-  &__text,
-  &__local-controls {
-    padding-top: $p;
-    padding-bottom: $p;
-  }
-
-  &__creator,
-  &__embed__time {
-    opacity: 0.7;
-  }
-
-  &__time-and-creator-and-delete,
-  &__input {
-    padding: $p;
-  }
-
-  &__input {
-    word-break: break-word;
-  }
-  &__time-and-creator-and-delete {
+    // A Notebook entry
+    $p: $interiorMarginSm;
+    @include discreteItem();
+    cursor: pointer;
     display: flex;
-    align-items: center;
+    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
 
-    > * + * {
-      float: right;
-      margin-left: auto;
-    }
-  }
-
-  &__creator [class*='icon'] {
-    font-size: 0.95em;
-  }
-
-  &__time-and-content {
-    display: block;
-    flex: 1 1 auto;
-    overflow: visible;
-
-    > * + * {
-      margin-top: $interiorMarginSm;
+    &:hover {
+        background: rgba($colorBodyFg, 0.3);
     }
 
-    [class*='created-'] {
-      color: pullForward($colorBodyFg, 20%);
-    }
-  }
+    &.is-selected {
+        background: rgba($colorKey, 0.2);
 
-  &__time {
-    * {
-      white-space: nowrap;
-    }
-  }
+        .c-ne__text {
+            .c-notebook--page-unlocked & {
+                cursor: text;
 
-  &__content {
-    flex-direction: column;
-    flex: 1 1 auto;
-    margin-right: $interiorMarginSm;
-    margin-top: $interiorMargin;
+                @include hover() {
+                    &:not(:focus, .locked) {
+                        background: $colorInputBg;
+                    }
+                }
 
-    > [class*='__'] + [class*='__'] {
-      margin-top: $interiorMarginSm;
-    }
-  }
-
-  &__text {
-    min-height: 22px; // Needed in Firefox when field is blank
-
-    &:not(.highlight) {
-      white-space: pre-wrap;
+            }
+        }
     }
 
-    .search-highlight {
-      @include searchHighlight();
-    }
-  }
-
-  &__input {
-    // Appended to __text element when Notebook is not in readOnly mode
-    @include inlineInput;
-    padding-left: $p;
-    padding-right: $p;
-    overflow: unset;
-    margin-bottom: $interiorMargin;
-    @include hover {
-      &:not(:focus, .locked) {
-        background: rgba($colorBodyFg, 0.1);
-      }
+    &__text,
+    &__local-controls {
+        padding-top: $p;
+        padding-bottom: $p;
     }
 
-    &:focus {
-      background: $colorInputBg;
+    &__creator,
+    &__embed__time {
+        opacity: 0.7;
     }
 
-    white-space: pre-wrap;
-  }
-
-  &__save-button {
-    display: flex;
-    justify-content: flex-end;
-
-    .c-button {
-      $lrP: 15px;
-      padding-left: $lrP;
-      padding-right: $lrP;
-    }
-  }
-
-  &__section-and-page {
-    // Shown when c-ne within search results
-    background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
-    border-radius: $controlCr;
-    display: inline-flex;
-    align-items: center;
-    align-self: flex-start;
-    padding: $interiorMargin;
-
-    .search-highlight {
-      @include searchHighlight();
+    &__time-and-creator-and-delete,
+    &__text,
+    &__input {
+        padding: $p;
     }
 
-    > * + * {
-      margin-left: $interiorMargin;
+    &__time-and-creator-and-delete {
+        display: flex;
+        align-items: center;
+
+        > * + * {
+            float: right;
+            margin-left: auto;
+        }
     }
 
-    [class*='icon'] {
-      font-size: 0.8em;
-      opacity: 0.7;
+    &__creator [class*='icon'] {
+        font-size: 0.95em;
     }
-  }
 
-  &__remove {
-    float: right;
-  }
+    &__time-and-content {
+        display: block;
+        flex: 1 1 auto;
+        overflow: visible;
+
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
+
+        [class*='created-'] {
+            color: pullForward($colorBodyFg, 20%);
+        }
+    }
+
+    &__time {
+        * {
+            white-space: nowrap;
+        }
+    }
+
+    &__content {
+        flex-direction: column;
+        flex: 1 1 auto;
+        margin-right: $interiorMarginSm;
+        margin-top: $interiorMargin;
+
+        > [class*='__'] + [class*='__'] {
+            margin-top: $interiorMarginSm;
+        }
+    }
+
+    &__text {
+        min-height: 22px; // Needed in Firefox when field is blank
+        white-space: normal;
+
+        .search-highlight {
+            @include searchHighlight();
+        }
+
+        // Resets and styling for markdown
+        h1, h2, h3, h4, h5 {
+            margin: unset !important;
+            padding: unset !important;
+        }
+
+        a {
+            text-decoration: underline;
+        }
+
+        em {
+            font-style: italic;
+        }
+
+        > * {
+            &:not(:first-child) {
+                margin-top: $interiorMarginSm;
+            }
+        }
+
+        p, blockquote, pre {
+            margin: 0;
+
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
+            }
+        ;
+        }
+
+        blockquote {
+            $m: 16px;
+            margin-left: $m;
+            margin-right: $m;
+        }
+
+        ul, ol {
+            padding: 0 0 0 16px;
+        }
+
+        ul {
+            list-style: square;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+
+        li {
+            list-style-type: inherit;
+        }
+
+        table {
+            width: auto;
+        }
+
+        th, td {
+            border: 1px solid rgba($colorBodyFg, 0.7);
+        }
+
+        th {
+            background: rgba($colorBodyFg, 0.2);
+        }
+    }
+
+    &__input {
+        // Textarea
+        //@include inlineInput;
+        @include reactive-input();
+        padding-left: $p;
+        padding-right: $p;
+        overflow: unset;
+        margin-bottom: $interiorMargin;
+        min-height: 5rem;
+        resize: vertical;
+        width: 100%;
+    }
+
+    &__save-button {
+        display: flex;
+        justify-content: flex-end;
+
+        .c-button {
+            $lrP: 15px;
+            padding-left: $lrP;
+            padding-right: $lrP;
+        }
+    }
+
+    &__section-and-page {
+        // Shown when c-ne within search results
+        background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
+        border-radius: $controlCr;
+        display: inline-flex;
+        align-items: center;
+        align-self: flex-start;
+        padding: $interiorMargin;
+
+        .search-highlight {
+            @include searchHighlight();
+        }
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+
+        [class*='icon'] {
+            font-size: 0.8em;
+            opacity: 0.7;
+        }
+    }
+
+    &__remove {
+        float: right;
+    }
 }
 
 /****************************** EMBEDS */
 @mixin snapThumb() {
-  // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
-  $d: 40px;
-  border: 1px solid $colorInteriorBorder;
-  cursor: pointer;
-  width: $d;
-  height: $d;
-  border-radius: 5px;
-  overflow: hidden;
+    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
+    $d: 40px;
+    border: 1px solid $colorInteriorBorder;
+    cursor: pointer;
+    width: $d;
+    height: $d;
+    border-radius: 5px;
+    overflow: hidden;
 
-  img {
-    height: 100%;
-    width: 100%;
-  }
+    img {
+        height: 100%;
+        width: 100%;
+    }
 }
 
 .snap-thumb {
-  // LEGACY,
-  @include snapThumb();
+    // LEGACY,
+    @include snapThumb();
 }
+
 .c-ne__embeds-wrapper {
-  max-height: 75px;
-  padding-left: $interiorMargin;
-  padding-top: $interiorMargin;
-  display: flex;
+    max-height: 75px;
+    padding-left: $interiorMargin;
+    padding-top: $interiorMargin;
+    display: flex;
 }
 
 .c-ne__embed {
-  @include discreteItemInnerElem();
-  display: inline-flex;
-  flex: 0 0 auto;
-  padding: $interiorMargin;
-  border: 1px solid $colorInteriorBorder;
+    @include discreteItemInnerElem();
+    display: inline-flex;
+    flex: 0 0 auto;
+    padding: $interiorMargin;
+    border: 1px solid $colorInteriorBorder;
 
-  &__info {
-    display: flex;
-    flex-direction: column;
-    margin-left: $interiorMargin;
-    a {
-      color: $colorKey;
+    &__info {
+        display: flex;
+        flex-direction: column;
+        margin-left: $interiorMargin;
+
+        a {
+            color: $colorKey;
+        }
     }
-  }
 
-  &__name,
-  &__link {
-    // Holds __link and __context-available
-    display: flex;
-    align-items: center;
-  }
-
-  &__link {
-    flex: 1 1 auto;
-    &:before {
-      display: block;
-      font-size: 1em;
-      margin-right: $interiorMarginSm;
+    &__name,
+    &__link {
+        // Holds __link and __context-available
+        display: flex;
+        align-items: center;
     }
-  }
 
-  &__context-available {
-    font-size: 0.7em;
-    margin-left: $interiorMarginSm;
-  }
+    &__link {
+        flex: 1 1 auto;
 
-  &__snap-thumb {
-    @include snapThumb();
-  }
-  &__actions {
-    margin: $interiorMarginSm;
-  }
-  &__actions-menu {
-    width: 55vh;
-    max-width: 500px;
-    height: 130px;
-    z-index: 70;
-    [class*='__icon'] {
-      filter: $colorKeyFilter;
-      margin: 0%;
-      height: 4vh;
+        &:before {
+            display: block;
+            font-size: 1em;
+            margin-right: $interiorMarginSm;
+        }
     }
-    [class*='__item-description'] {
-      min-width: 200px;
+
+    &__context-available {
+        font-size: 0.7em;
+        margin-left: $interiorMarginSm;
+    }
+
+    &__snap-thumb {
+        @include snapThumb();
+    }
+
+    &__actions {
+        margin: $interiorMarginSm;
+    }
+
+    &__actions-menu {
+        width: 55vh;
+        max-width: 500px;
+        height: 130px;
+        z-index: 70;
+
+        [class*='__icon'] {
+            filter: $colorKeyFilter;
+            margin: 0%;
+            height: 4vh;
+        }
+
+        [class*='__item-description'] {
+            min-width: 200px;
+        }
     }
-  }
 }
 
 /****************************** SNAPSHOTTING */
 // LEGACY: TODO: refactor these names
 .t-contents,
 .snap-annotation {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .s-status-taking-snapshot,
 .overlay.snapshot {
-  // Handle overflow-y issues with tables and html2canvas
-  background: $colorBodyBg; // Prevent html2canvas from using white background
-  color: $colorBodyFg;
-  padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
+    // Handle overflow-y issues with tables and html2canvas
+    background: $colorBodyBg; // Prevent html2canvas from using white background
+    color: $colorBodyFg;
+    padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
 
-  .l-sticky-headers .l-tabular-body {
-    overflow: auto;
-  }
-
-  .l-browse-bar {
-    display: none; // Suppress browse-bar when snapshotting from view-large overlay
-    + * {
-      margin-top: 0 !important; // Remove margin from any following elements
+    .l-sticky-headers .l-tabular-body {
+        overflow: auto;
     }
-  }
 
-  * {
-    box-shadow: none !important; // Prevent html2canvas problems with box-shadow
-  }
+    .l-browse-bar {
+        display: none; // Suppress browse-bar when snapshotting from view-large overlay
+        + * {
+            margin-top: 0 !important; // Remove margin from any following elements
+        }
+    }
+
+    * {
+        box-shadow: none !important; // Prevent html2canvas problems with box-shadow
+    }
 }
 
 .c-notebook-snapshot {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-
-  > * + * {
-    margin-top: $interiorMargin;
-  }
-
-  &__header {
-    flex: 0 0 auto;
-  }
-
-  &__image {
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
     flex: 1 1 auto;
-  }
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__header {
+        flex: 0 0 auto;
+    }
+
+    &__image {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        flex: 1 1 auto;
+    }
 }
 
 /****************************** SNAPSHOT CONTAINER */
 .c-snapshots-h {
-  // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: $interiorMargin $interiorMarginLg;
-
-  > * + * {
-    margin-top: $interiorMargin;
-  }
-
-  .l-browse-bar {
-    flex: 0 0 auto;
-  }
-
-  .c-snapshots-h__title {
+    // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
     display: flex;
-  }
+    flex-direction: column;
+    overflow: hidden;
+    padding: $interiorMargin $interiorMarginLg;
 
-  .c-snapshots {
-    flex: 1 1 auto;
-  }
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    .l-browse-bar {
+        flex: 0 0 auto;
+    }
+
+    .c-snapshots-h__title {
+        display: flex;
+    }
+
+    .c-snapshots {
+        flex: 1 1 auto;
+    }
 }
 
 .c-snapshots {
-  flex-wrap: wrap;
-  overflow: auto;
+    flex-wrap: wrap;
+    overflow: auto;
 
-  .c-snapshot {
-    margin: 0 $interiorMarginSm $interiorMarginSm 0;
-  }
+    .c-snapshot {
+        margin: 0 $interiorMarginSm $interiorMarginSm 0;
+    }
 
-  .hint {
-    font-size: 1.25em;
-    font-style: italic;
-    opacity: 0.7;
-    padding: $interiorMarginLg;
-    text-align: center;
-  }
+    .hint {
+        font-size: 1.25em;
+        font-style: italic;
+        opacity: 0.7;
+        padding: $interiorMarginLg;
+        text-align: center;
+    }
 }
 
 /****************************** PAINTERRO OVERRIDES */
 .annotation-dialog .abs.editor {
-  border-radius: 0;
+    border-radius: 0;
 }
 
 #snap-annotation {
-  $m: 0; //$interiorMargin;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: $m;
-  right: 0;
-  bottom: $m;
-  left: 0; // LEGACY, deal with .editor border-radius clipping stuff
+    $m: 0; //$interiorMargin;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: $m;
+    right: 0;
+    bottom: $m;
+    left: 0; // LEGACY, deal with .editor border-radius clipping stuff
 }
 
 #snap-annotation-wrapper,
 #snap-annotation-bar {
-  position: relative;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
 }
 
 #snap-annotation-wrapper {
-  background: rgba($colorBodyFg, 0.1);
-  border: 1px solid $colorInteriorBorder;
-  order: 2;
-  flex: 10 0 auto;
+    background: rgba($colorBodyFg, 0.1);
+    border: 1px solid $colorInteriorBorder;
+    order: 2;
+    flex: 10 0 auto;
 }
 
 #snap-annotation-bar {
-  // Holds tool buttons, color selectors, etc.
-  $h: 22px;
-  $fs: 0.8rem;
-  $m: $interiorMarginSm;
+    // Holds tool buttons, color selectors, etc.
+    $h: 22px;
+    $fs: 0.8rem;
+    $m: $interiorMarginSm;
 
-  display: flex;
-  align-items: center;
-  height: $h + ($m * 2) !important;
-  margin-bottom: $interiorMarginLg;
-  order: 1;
-  flex: 0 0 auto;
-  background-color: transparent !important;
-  padding: $interiorMarginSm;
-
-  > div {
-    display: contents;
-
-    > * + * {
-      margin-left: $interiorMargin !important;
-    }
-  }
-
-  .ptro-tool-controls {
     display: flex;
-    margin-left: $interiorMarginLg !important;
+    align-items: center;
+    height: $h + ($m * 2) !important;
+    margin-bottom: $interiorMarginLg;
+    order: 1;
+    flex: 0 0 auto;
+    background-color: transparent !important;
+    padding: $interiorMarginSm;
 
-    > * + * {
-      margin-left: $interiorMargin !important;
-    }
-  }
+    > div {
+        display: contents;
 
-  .ptro-icon-btn,
-  .ptro-named-btn,
-  .ptro-color-btn,
-  .ptro-bordered-btn,
-  .ptro-tool-ctl-name,
-  .ptro-color-btn,
-  .tool-controls,
-  .ptro-input {
-    // Lot of resets for crappy CSS in Painterro
-    font-family: inherit;
-    font-size: $fs !important;
-    height: $h !important;
-    margin: 0;
-    position: relative;
-    line-height: $h !important;
-  }
-
-  .ptro-tool-ctl-name {
-    border-radius: 0;
-    background: none;
-    color: $colorBodyFg;
-    top: auto;
-    font-family: inherit;
-    padding: 0;
-  }
-
-  .ptro-color-btn {
-    width: $h !important;
-  }
-
-  .ptro-check,
-  .ptro-color-control,
-  .ptro-icon-btn,
-  .ptro-named-btn {
-    // Buttons in toolbar
-    border-radius: $smallCr;
-    box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
-    color: $colorBtnFg !important;
-    padding: 1px $interiorMargin;
-
-    &:hover {
-      background: $colorBtnBgHov;
-      color: $colorBtnFgHov;
+        > * + * {
+            margin-left: $interiorMargin !important;
+        }
     }
 
-    i {
-      display: contents;
-      font-size: $fs * 1.2;
-      line-height: inherit;
+    .ptro-tool-controls {
+        display: flex;
+        margin-left: $interiorMarginLg !important;
+
+        > * + * {
+            margin-left: $interiorMargin !important;
+        }
     }
-  }
 
-  .ptro-color-control,
-  .ptro-icon-btn,
-  .ptro-named-btn {
-    // Buttons in toolbar
-    background-color: $colorBtnBg;
-  }
+    .ptro-icon-btn,
+    .ptro-named-btn,
+    .ptro-color-btn,
+    .ptro-bordered-btn,
+    .ptro-tool-ctl-name,
+    .ptro-color-btn,
+    .tool-controls,
+    .ptro-input {
+        // Lot of resets for crappy CSS in Painterro
+        font-family: inherit;
+        font-size: $fs !important;
+        height: $h !important;
+        margin: 0;
+        position: relative;
+        line-height: $h !important;
+    }
 
-  .ptro-color-active-control {
-    background: $colorBtnMajorBg !important;
-    color: $colorBtnMajorFg !important;
-  }
+    .ptro-tool-ctl-name {
+        border-radius: 0;
+        background: none;
+        color: $colorBodyFg;
+        top: auto;
+        font-family: inherit;
+        padding: 0;
+    }
 
-  .ptro-info,
-  .ptro-btn-color-checkers-bar,
-  *[title='Font name'],
-  *[title='Stroke color'],
-  *[title='Stroke width'],
-  *[data-id='fontName'],
-  *[data-id='fontStrokeSize'],
-  *[data-id='stroke'] {
-    display: none;
-  }
+    .ptro-color-btn {
+        width: $h !important;
+    }
+
+    .ptro-check,
+    .ptro-color-control,
+    .ptro-icon-btn,
+    .ptro-named-btn {
+        // Buttons in toolbar
+        border-radius: $smallCr;
+        box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
+        color: $colorBtnFg !important;
+        padding: 1px $interiorMargin;
+
+        &:hover {
+            background: $colorBtnBgHov;
+            color: $colorBtnFgHov;
+        }
+
+        i {
+            display: contents;
+            font-size: $fs * 1.2;
+            line-height: inherit;
+        }
+    }
+
+    .ptro-color-control,
+    .ptro-icon-btn,
+    .ptro-named-btn {
+        // Buttons in toolbar
+        background-color: $colorBtnBg;
+    }
+
+    .ptro-color-active-control {
+        background: $colorBtnMajorBg !important;
+        color: $colorBtnMajorFg !important;
+    }
+
+    .ptro-info,
+    .ptro-btn-color-checkers-bar,
+    *[title='Font name'],
+    *[title='Stroke color'],
+    *[title='Stroke width'],
+    *[data-id='fontName'],
+    *[data-id='fontStrokeSize'],
+    *[data-id='stroke'] {
+        display: none;
+    }
 }
 
 /****************************** MOBILE */
 body.mobile {
-  .c-notebook__drag-area {
-    display: none;
-  }
-
-  .c-notebook__entry {
-    [class*='local-controls'] {
-      display: none;
-      height: fit-content;
-    }
-  }
-
-  &.phone.portrait {
-    .c-notebook__head,
-    .c-notebook__entry,
-    .c-ne__time-and-content {
-      flex-direction: column;
-
-      > [class*='__'] + [class*='__'] {
-        margin-left: 0;
-        margin-top: $interiorMargin;
-      }
+    .c-notebook__drag-area {
+        display: none;
     }
 
     .c-notebook__entry {
-      [class*='text'] {
-        min-height: 0;
-        pointer-events: none;
-      }
+        [class*='local-controls'] {
+            display: none;
+            height: fit-content;
+        }
+    }
+
+    &.phone.portrait {
+        .c-notebook__head,
+        .c-notebook__entry,
+        .c-ne__time-and-content {
+            flex-direction: column;
+
+            > [class*='__'] + [class*='__'] {
+                margin-left: 0;
+                margin-top: $interiorMargin;
+            }
+        }
+
+        .c-notebook__entry {
+            [class*='text'] {
+                min-height: 0;
+                pointer-events: none;
+            }
+        }
     }
-  }
 }
 
 /****************************** INDICATOR */
 .c-indicator.has-new-snapshot {
-  $c: $colorOk;
-  @include pulseProp(
-    $animName: flashSnapshot,
-    $dur: 500ms,
-    $iter: infinite,
-    $prop: background,
-    $valStart: rgba($c, 0.4),
-    $valEnd: rgba($c, 0)
-  );
+    $c: $colorOk;
+    @include pulseProp(
+            $animName: flashSnapshot,
+            $dur: 500ms,
+            $iter: infinite,
+            $prop: background,
+            $valStart: rgba($c, 0.4),
+            $valEnd: rgba($c, 0)
+    );
 }
 
 /****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
 .c-notebook--restricted {
-  .c-notebook__pages {
-    .c-list__item {
-      // Can display lock icon when a page is committed.
-      &:before {
-        $s: 0.8em;
-        color: $colorAlert;
-        display: block;
-        font-size: $s;
-        width: $s;
-        margin-right: $interiorMarginSm;
-      }
+    .c-notebook__pages {
+        .c-list__item {
+            // Can display lock icon when a page is committed.
+            &:before {
+                $s: 0.8em;
+                color: $colorAlert;
+                display: block;
+                font-size: $s;
+                width: $s;
+                margin-right: $interiorMarginSm;
+            }
 
-      &:not([class*='lock']) {
-        &:before {
-          content: '';
+            &:not([class*='lock']) {
+                &:before {
+                    content: '';
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .c-list__item {
-  &__name:focus {
-    text-overflow: clip;
-  }
+    &__name:focus {
+        text-overflow: clip;
+    }
 }
diff --git a/src/ui/layout/search/AnnotationSearchResult.vue b/src/ui/layout/search/AnnotationSearchResult.vue
index b506daf4f5..808b5d8415 100644
--- a/src/ui/layout/search/AnnotationSearchResult.vue
+++ b/src/ui/layout/search/AnnotationSearchResult.vue
@@ -53,6 +53,9 @@
 </template>
 
 <script>
+import { Marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
 import { identifierToString } from '../../../../src/tools/url';
 import ObjectPath from '../../components/ObjectPath.vue';
 import PreviewAction from '../../preview/PreviewAction';
@@ -81,30 +84,13 @@ export default {
     },
     getResultName() {
       if (this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.NOTEBOOK) {
-        const targetID = Object.keys(this.result.targets)[0];
-        const entryIdToFind = this.result.targets[targetID].entryId;
-        const notebookModel = this.result.targetModels[0].configuration.entries;
-
-        const sections = Object.values(notebookModel);
-        for (const section of sections) {
-          const pages = Object.values(section);
-          for (const entries of pages) {
-            for (const entry of entries) {
-              if (entry.id === entryIdToFind) {
-                return entry.text;
-              }
-            }
-          }
-        }
-
-        return 'Could not find any matching Notebook entries';
+        const previewText = this.getNotebookPreviewText(this.result);
+        return previewText;
       } else if (
         this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.GEOSPATIAL
       ) {
-        const targetID = Object.keys(this.result.targets)[0];
-        const { layerName, name } = this.result.targets[targetID];
-
-        return layerName ? `${layerName} - ${name}` : name;
+        const previewText = this.getGeospatialPreviewText(this.result);
+        return previewText;
       } else {
         return this.result.targetModels[0].name;
       }
@@ -119,6 +105,9 @@ export default {
       return this.result.fullTagModels[0].foregroundColor;
     }
   },
+  beforeMount() {
+    this.marked = new Marked();
+  },
   mounted() {
     this.previewAction = new PreviewAction(this.openmct);
     this.previewAction.on('isVisible', this.togglePreviewState);
@@ -129,6 +118,48 @@ export default {
     this.openmct.selection.off('change', this.fireAnnotationSelection);
   },
   methods: {
+    getNotebookEntryTextById(entryIdToFind, notebookModel) {
+      const sections = Object.values(notebookModel);
+      for (const section of sections) {
+        const pages = Object.values(section);
+        for (const entries of pages) {
+          for (const entry of entries) {
+            if (entry.id === entryIdToFind) {
+              return entry.text;
+            }
+          }
+        }
+      }
+      return null;
+    },
+    getNotebookPreviewText(result) {
+      const targetID = Object.keys(this.result.targets)[0];
+      const entryIdToFind = this.result.targets[targetID].entryId;
+      const notebookModel = this.result.targetModels[0].configuration.entries;
+
+      const entryText = this.getNotebookEntryTextById(entryIdToFind, notebookModel);
+      if (entryText === null) {
+        return 'Could not find any matching Notebook entries';
+      }
+      const markDownHtml = this.marked.parse(entryText, {
+        breaks: true
+      });
+      // strip everything
+      const cleanedHtml = sanitizeHtml(markDownHtml, { allowedAttributes: [], allowedTags: [] });
+      // strip to 64 characters
+      let truncatedText = cleanedHtml.substring(0, 64);
+      // add ellipsis if necessary
+      if (truncatedText.length < entryText.length) {
+        truncatedText = `${truncatedText}...`;
+      }
+      return truncatedText;
+    },
+    getGeospatialPreviewText(result) {
+      const targetID = Object.keys(this.result.targets)[0];
+      const { layerName, name } = this.result.targets[targetID];
+
+      return layerName ? `${layerName} - ${name}` : name;
+    },
     clickedResult(event) {
       const objectPath = this.domainObject.originalPath;
       if (this.openmct.editor.isEditing()) {