-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
start of markdown component, still needs sanitize and more element cl…
…asses to be used from the brands site #293
- Loading branch information
Dusty Cartwright
committed
Apr 27, 2022
1 parent
9c31cb3
commit d194510
Showing
3 changed files
with
156 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { LitElement } from 'lit'; | ||
import { MutationObserverController } from '../../utils/controllers/mutation-observer.js'; | ||
|
||
/** | ||
* @class UcdlibMdContent | ||
* @classdesc Component class for declaritively wrapping markdown and translating into sanitized html | ||
*/ | ||
export default class UcdlibMdContent extends LitElement { | ||
|
||
static get properties() { | ||
return {}; | ||
} | ||
|
||
mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true }); | ||
|
||
constructor() { | ||
super(); | ||
} | ||
|
||
createRenderRoot() { | ||
this.style.display = 'none'; | ||
return this; | ||
} | ||
|
||
_onChildListMutation() { | ||
// send event to ucdlib-md | ||
this.dispatchEvent(new CustomEvent('content-updated', { bubbles: true })); | ||
} | ||
} | ||
|
||
customElements.define('ucdlib-md-content', UcdlibMdContent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
import { LitElement, css } from 'lit'; | ||
import { marked } from 'marked'; | ||
import { UcdlibMdContent } from './ucdlib-md-content.js'; | ||
import { MutationObserverController } from '../../utils/controllers/mutation-observer.js'; | ||
|
||
/** | ||
* @class UcdlibMd | ||
* @classdesc Component class for translating/displaying markdown into sanitized html | ||
* @property {String} ignore - comma-separated list of html tags to ignore special rendering, just render as text | ||
* Format: ${tag wildcard},${tag name}, ie "h*,p" | ||
* @property {String} exclude - comma-separated list of html tags to excise from output | ||
* Format: ${tag name},${tag name}, ie "img,p" | ||
* @property {String} subset - Specifies some common sets of ignores/excludes, that we use | ||
* Format: "core|full|parsimonious" | ||
*/ | ||
export default class UcdlibMd extends LitElement { | ||
|
||
static get properties() { | ||
return { | ||
// ignore: {type: String}, | ||
// exclude: {type: String}, | ||
// subset: {type: String}, | ||
data: {type: String} | ||
}; | ||
} | ||
|
||
mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true }); | ||
|
||
constructor() { | ||
super(); | ||
this.data = ''; | ||
// this.ignore = ''; | ||
// this.exclude = ''; | ||
// this.subset = ''; | ||
|
||
this.renderedElement = document.createElement('div'); | ||
this.renderedElement.setAttribute('rendered', ''); | ||
} | ||
|
||
createRenderRoot() { | ||
this.appendChild(this.renderedElement); | ||
return this; | ||
} | ||
|
||
_onChildListMutation() { | ||
if( this.contentElement ) return; | ||
|
||
// query children for ucdlib-md-content | ||
// wire up listener if it exists | ||
this.contentElement = this.querySelector('ucdlib-md-content'); | ||
if( this.contentElement ) { | ||
this.contentElement.addEventListener('content-updated', this._updateFromContentElementMd.bind(this)); | ||
} | ||
} | ||
|
||
disconnectedCallback() { | ||
if( this.contentElement ) { | ||
this.contentElement.removeEventListener('content-updated', this._updateFromContentElementMd.bind(this)); | ||
} | ||
} | ||
|
||
/** | ||
* @method updated | ||
* @description Lit method called when element is updated. | ||
*/ | ||
updated() { | ||
// config markdown renderer so elements are correctly styled | ||
this._setRendererOverrides(); | ||
|
||
// update markdown data with the latest, either when the content changes or data property is updated | ||
this.data = marked.parse(this.data); | ||
this.renderedElement.innerHTML = this.data; | ||
} | ||
|
||
/** | ||
* @method _updateFromContentElementMd | ||
* @description Updates the local data property with the text from the ucdlib-md-content element (if it exists) | ||
* @private | ||
*/ | ||
_updateFromContentElementMd() { | ||
this.data = this.contentElement.innerText.trim(); // innerHTML pulls in the <!----> lit appends | ||
} | ||
|
||
/** | ||
* @method _setRendererOverrides | ||
* @description Updates the marked package renderer overrides to customize how element types are rendered | ||
* @private | ||
*/ | ||
_setRendererOverrides() { | ||
// TODO determine what subset should include/exclude | ||
// const self = this; | ||
const renderer = { | ||
|
||
// example of using the ignore/exclude properties | ||
// heading(text, level) { | ||
// let renderedContent = ''; | ||
// if (self.ignore && self.ignore.includes('h*') || self.ignore.includes(`h${level}`)) { | ||
// // ignore formatting | ||
// renderedContent = text; | ||
// } else if (!self.exclude || (self.exclude && !self.exclude.includes('h*') && !self.exclude.includes(`h${level}`))) { | ||
// // exclude should excise from output, so make sure it's not set for all headings or this heading level | ||
// renderedContent = `<h${level}>${text}</h${level}>` | ||
// } | ||
// return renderedContent; | ||
// }, | ||
|
||
list(body, ordered, start) { | ||
// TODO what does start control? | ||
let renderedContent = ''; | ||
if (ordered) { | ||
|
||
} else { | ||
renderedContent = `<ul class="list--bordered">${body}</ul>`; | ||
} | ||
return renderedContent; | ||
} | ||
|
||
}; | ||
marked.use({ renderer }); | ||
} | ||
|
||
} | ||
|
||
customElements.define('ucdlib-md', UcdlibMd); |