mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
292c894b93
Summary: Text columns can now display their values as Markdown-formatted text by changing their cell format to "Markdown". A minimal subset of the Markdown specification is currently supported. Test Plan: Browser tests. Reviewers: Spoffy, dsagal Reviewed By: Spoffy, dsagal Subscribers: dsagal, Spoffy Differential Revision: https://phab.getgrist.com/D4326
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { sanitizeHTML } from 'app/client/ui/sanitizeHTML';
|
|
import { BindableValue, DomElementMethod, subscribeElem } from 'grainjs';
|
|
import { marked } from 'marked';
|
|
|
|
/**
|
|
* Helper function for using Markdown in grainjs elements. It accepts
|
|
* both plain Markdown strings, as well as methods that use an observable.
|
|
* Example usage:
|
|
*
|
|
* cssSection(markdown(t(`# New Markdown Function
|
|
*
|
|
* We can _write_ [the usual Markdown](https://markdownguide.org) *inside*
|
|
* a Grainjs element.`)));
|
|
*
|
|
* or
|
|
*
|
|
* cssSection(markdown(use => use(toggle) ? t('The toggle is **on**') : t('The toggle is **off**'));
|
|
*
|
|
* Markdown strings are easier for our translators to handle, as it's possible
|
|
* to include all of the context around a single markdown string without
|
|
* breaking it up into separate strings for grainjs elements.
|
|
*/
|
|
export function markdown(markdownObs: BindableValue<string>): DomElementMethod {
|
|
return elem => subscribeElem(elem, markdownObs, value => setMarkdownValue(elem, value));
|
|
}
|
|
|
|
function setMarkdownValue(elem: Element, markdownValue: string): void {
|
|
elem.innerHTML = sanitizeHTML(marked(markdownValue, {async: false}));
|
|
}
|