start of markdown component, still needs sanitize and more element cl…

…asses to be used from the brands site #293

elements/package.json

@@ -13,6 +13,7 @@
     "@ucd-lib/theme-sass": "^5.0.15",
     "ip-cidr": "^3.0.4",
     "lit": "^2.0.2",
+    "marked": "^4.0.14",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

elements/ucdlib/ucdlib-md/ucdlib-md-content.js

@@ -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);

elements/ucdlib/ucdlib-md/ucdlib-md.js

@@ -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);