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"; %]