From 152a50063708b9c1c95a3b4edc5ee47fb4bc56ae Mon Sep 17 00:00:00 2001 From: Dave Roberts <145559566+droberts-ctrlo@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:12:35 +0100 Subject: [PATCH] Markdown preview and help (#243) * Markdown is working I don't like the way the table "overflows" in the "cheat sheet" if the window is certain sizes - I shall ascertain if this is an issue and try to mitigate * Redone to use popover Also modified popovers to allow for scrolling * Changes as suggested * Style changes for markdown preview * Completed markdown (I think) * Fixed styling for preview and added scrolling * Removed commented code and updated spacing --- package.json | 1 + .../components/markdown/_markdown.scss | 6 ++ src/frontend/components/markdown/index.js | 5 ++ .../components/markdown/lib/component.js | 33 +++++++ src/frontend/components/popover/_popover.scss | 1 + .../css/stylesheets/base/_global.scss | 8 ++ src/frontend/css/stylesheets/general.scss | 1 + src/frontend/js/site.js | 2 + views/fields/textarea.tt | 2 +- views/layout.tt | 22 +++-- views/snippets/markdown.tt | 65 ++++++++++++++ views/snippets/markdown_section.tt | 8 ++ views/topic.tt | 89 +++++++++---------- yarn.lock | 11 ++- 14 files changed, 198 insertions(+), 56 deletions(-) create mode 100644 src/frontend/components/markdown/_markdown.scss create mode 100644 src/frontend/components/markdown/index.js create mode 100644 src/frontend/components/markdown/lib/component.js create mode 100644 views/snippets/markdown.tt create mode 100644 views/snippets/markdown_section.tt diff --git a/package.json b/package.json index 0b591b7ca..e79f4ad9f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "jquery-ui-sortable-npm": "^1.0.0", "jstree": "^3.3.12", "keycharm": "^0.3.0", + "marked": "^9.1.0", "moment": "^2.24.0", "npm-run-all": "^4.1.5", "popper.js": "^1.16.1", diff --git a/src/frontend/components/markdown/_markdown.scss b/src/frontend/components/markdown/_markdown.scss new file mode 100644 index 000000000..624e2f1ce --- /dev/null +++ b/src/frontend/components/markdown/_markdown.scss @@ -0,0 +1,6 @@ +div.form-group { + div.js-markdown-preview { + height: 8rem; + overflow: auto; + } +} \ No newline at end of file diff --git a/src/frontend/components/markdown/index.js b/src/frontend/components/markdown/index.js new file mode 100644 index 000000000..8d4059a79 --- /dev/null +++ b/src/frontend/components/markdown/index.js @@ -0,0 +1,5 @@ +import { initializeComponent } from "../../js/lib/component"; +import MarkdownComponent from "./lib/component"; + +export default (scope) => + initializeComponent(scope, ".js-markdown-section", MarkdownComponent); diff --git a/src/frontend/components/markdown/lib/component.js b/src/frontend/components/markdown/lib/component.js new file mode 100644 index 000000000..2ace69281 --- /dev/null +++ b/src/frontend/components/markdown/lib/component.js @@ -0,0 +1,33 @@ +import { marked } from "marked"; +import { Component } from "../../../js/lib/component"; + +class MarkdownComponent extends Component { + constructor(element) { + super(element); + this.initMarkdownEditor(); + } + + initMarkdownEditor() { + marked.use({ breaks: true }); + + const $textArea = $(this.element).find(".js-markdown-input"); + const $preview = $(this.element).find(".js-markdown-preview"); + $().ready(() => { + if ($textArea.val() !== "") { + const htmlText = marked($textArea.val()); + $preview.html(htmlText); + } + }); + $textArea.keyup(() => { + const markdownText = $textArea.val(); + if (!markdownText || markdownText === "") { + $preview.html('

Nothing to preview!

'); + } else { + const htmlText = marked(markdownText); + $preview.html(htmlText); + } + }); + } +} + +export default MarkdownComponent; diff --git a/src/frontend/components/popover/_popover.scss b/src/frontend/components/popover/_popover.scss index 62a4d9348..a6c1ffb06 100644 --- a/src/frontend/components/popover/_popover.scss +++ b/src/frontend/components/popover/_popover.scss @@ -74,6 +74,7 @@ margin-top: 0.375rem; overflow-y: auto; border-color: $brand-secundary; + max-height: 15rem; } .popover.show { diff --git a/src/frontend/css/stylesheets/base/_global.scss b/src/frontend/css/stylesheets/base/_global.scss index 87181aa4e..5da58a5ab 100644 --- a/src/frontend/css/stylesheets/base/_global.scss +++ b/src/frontend/css/stylesheets/base/_global.scss @@ -85,3 +85,11 @@ h3 { display: block; } } + +table.table-bordered { + border: solid 1px $gray; + thead>tr>th, + tbody>tr>td { + border: solid 1px $gray; + } +} \ No newline at end of file diff --git a/src/frontend/css/stylesheets/general.scss b/src/frontend/css/stylesheets/general.scss index be2f7ad48..0f14c5be4 100644 --- a/src/frontend/css/stylesheets/general.scss +++ b/src/frontend/css/stylesheets/general.scss @@ -77,3 +77,4 @@ @import 'table-header/table-header'; @import 'timeline/timeline'; @import 'user/user'; +@import 'markdown/markdown'; \ No newline at end of file diff --git a/src/frontend/js/site.js b/src/frontend/js/site.js index 3a868494a..2f399fcea 100644 --- a/src/frontend/js/site.js +++ b/src/frontend/js/site.js @@ -37,6 +37,7 @@ import TippyComponent from 'components/timeline/tippy' import TreeComponent from 'components/form-group/tree' import UserModalComponent from 'components/modal/modals/user' import ValueLookupComponent from 'components/form-group/value-lookup' +import MarkdownComponent from "../components/markdown" // Register them registerComponent(AddTableModalComponent) @@ -72,6 +73,7 @@ registerComponent(TippyComponent) registerComponent(TreeComponent) registerComponent(UserModalComponent) registerComponent(ValueLookupComponent) +registerComponent(MarkdownComponent) // Initialize all components at some point initializeRegisteredComponents(document.body) diff --git a/views/fields/textarea.tt b/views/fields/textarea.tt index 3d3f5b831..6dca389ec 100644 --- a/views/fields/textarea.tt +++ b/views/fields/textarea.tt @@ -31,7 +31,7 @@ [% INCLUDE fields/sub/label_input.tt label_type="textarea"; %]