refactor(function): Add markdown rendering of ticket reference

ref: #40 #42 nofusscomputing/centurion_erp#466

Author: jon-nfc

src/functions/RenderMarkdown.js

@@ -3,6 +3,7 @@ import hljs from 'highlight.js'
 import markdownIt from "markdown-it";
 import { full as emoji } from 'markdown-it-emoji'
 import model_link_plugin from './markdown_plugins/ModelLink';
+import ticket_link_plugin from './markdown_plugins/TicketLink';
 
 
 
@@ -37,6 +38,8 @@ const md = markdownIt({
 
     .use( require('markdown-it-task-lists') )
 
+    .use(ticket_link_plugin)
+
     .use(model_link_plugin);
 
 

src/functions/markdown_plugins/TicketLink.js

@@ -0,0 +1,121 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import IconLoader from "../../components/IconLoader";
+
+
+const UNESCAPE_RE = /(?<markdown>#(?<model_id>\d+))/g
+
+
+
+function ticket_link (state, silent) {
+  /**
+   * Render ticket tag links
+   * i.e. #<ticket_id>
+   */
+
+  const max = state.posMax
+  let start = state.pos
+  let end = state.pos
+
+  let begining = state.pos
+
+  const re = new RegExp(UNESCAPE_RE);
+
+  const fields = [ ...String(state.src).matchAll(re) ]
+
+
+  if( fields.length === 0 ) {
+
+    return false
+
+  }
+
+  if( fields[0].index !== begining ) {
+
+    return false
+
+  }
+
+
+  for( let item_link of fields) {
+
+    start = item_link.index
+    end = start + String(item_link.groups.markdown).length
+
+    if ( start !== state.posMax ) {    // middle text
+
+      const middle_text = state.push('text', '', 0)
+      middle_text.content = state.src.slice(state.posMax, start)
+
+    }
+
+    state.pos = start
+    state.posMax = end
+
+    if( state.env.tickets[item_link.groups.model_id] ?? null ) {
+
+      const span_o = state.push('span_open', 'span', 1)
+      span_o.attrPush(['class', 'text-inline'])
+
+        const anchor_o = state.push('a_open', 'a', 1)
+        anchor_o.attrPush(['href', state.env.tickets[item_link.groups.model_id].url])
+
+
+          const icon_o = state.push('icon_open', 'span', 1)
+          icon_o.attrPush([
+            'class', 'badge-icon ticket-status-icon ticket-status-icon-' + String(state.env.tickets[item_link.groups.model_id].status).toLowerCase().replace(' ', '_').replace('(', '').replace(')', '')
+          ])
+
+            const icon_t = state.push('html_inline', '', 0)
+
+            icon_t.content = renderToStaticMarkup(
+              <IconLoader
+                name={'ticket_status_new'}
+              />
+            )
+
+          const icon_c = state.push('icon_close', 'span', -1)
+
+
+          const ref_o = state.push('ref_open', 'span', 1)
+            ref_o.attrPush(["class", "sub-script metadata"])
+
+            const ref_t = state.push('text', '', 0)
+            ref_t.content = ' #' + String( item_link.groups.model_id ) + ' '
+
+          const ref_c = state.push('ref_close', 'span', -1)
+
+
+          const anchor_t = state.push('text', '', 0)
+          anchor_t.content = state.env.tickets[item_link.groups.model_id].title
+
+
+          const item_o = state.push('item_open', 'span', 1)
+            item_o.attrPush(["class", "sub-script metadata"])
+
+            const item_t = state.push('text', '', 0)
+            item_t.content = ', ' + String( state.env.tickets[item_link.groups.model_id].ticket_type ) + ' '
+
+          const item_c = state.push('item_close', 'span', -1)
+
+
+        const anchor_c = state.push('a_close', 'a', -1)
+
+      
+      const span_c = state.push('span_close', 'span', -1)
+
+    }
+
+  }
+
+
+  state.pos = end
+  state.posMax = max
+
+
+  return true
+
+}
+
+export default function ticket_link_plugin (md) {
+  md.inline.ruler.push('ticket_link', ticket_link)
+};

src/index.css

@@ -802,6 +802,29 @@ span.sub-script.metadata,
   padding: 10px
 }
 
+.external-links a {
+  color: var(--text-colour);
+  text-decoration: none;
+}
+
+
+span.text-inline {
+  display: inline-block;
+  line-height: inherit;
+}
+
+span.text-inline span.badge-icon {
+  display: inline-block;
+  width: fit-content;
+
+}
+
+span.text-inline span.badge-icon svg {
+  transform: translateY(5px);
+
+}
+
+
 span.badge {
   background-color: var(--background-colour-active);
   border: 1px solid var(--border-colour-form-field);
@@ -815,11 +838,6 @@ span.badge {
   margin: 0px 2px;
 }
 
-.external-links a {
-  color: var(--text-colour);
-  text-decoration: none;
-}
-
 
 span.badge span {
   display: inline-block;
@@ -877,65 +895,78 @@ span.badge span.badge-text.badge-text-action-remove {
 
 
 
+span.badge-icon.ticket-status-icon svg,
 span.badge span.badge-icon.ticket-status-icon svg {
   border-radius: 10px;
 }
 
+span.badge-icon.ticket-status-icon-accepted svg,
 span.badge span.badge-icon.ticket-status-icon-accepted svg {
   background-color: #e1ffb2;
   fill: #2e9200;
 }
 
+span.badge-icon.ticket-status-icon-approvals svg,
 span.badge span.badge-icon.ticket-status-icon-approvals svg {
   background-color: #ffceb2;
   fill: #d86100;
 }
 
+span.badge-icon.ticket-status-icon-assigned svg,
 span.badge span.badge-icon.ticket-status-icon-assigned svg {
   background-color: #e1ffb2;
   fill: #2e9200;
 }
 
+span.badge-icon.ticket-status-icon-assigned_planning svg,
 span.badge span.badge-icon.ticket-status-icon-assigned_planning svg {
   background-color: #e1ffb2;
   fill: #2e9200;
 }
 
+span.badge-icon.ticket-status-icon-closed svg,
 span.badge span.badge-icon.ticket-status-icon-closed svg {
   background-color: #c9b2ff;
   fill: #640092;
 }
 
+span.badge-icon.ticket-status-icon-draft svg,
 span.badge span.badge-icon.ticket-status-icon-draft svg {
   background-color: #cacaca;
   fill: #4d4d4d;
 }
 
+span.badge-icon.ticket-status-icon-evaluation svg,
 span.badge span.badge-icon.ticket-status-icon-evaluation svg {
   background-color: #b2d6ff;
   fill: #007592;
 }
 
+span.badge-icon.ticket-status-icon-invalid svg,
 span.badge span.badge-icon.ticket-status-icon-invalid svg {
   background-color: #ffb2b6;
   fill: #920000;
 }
 
+span.badge-icon.ticket-status-icon-new svg,
 span.badge span.badge-icon.ticket-status-icon-new svg {
   background-color: #b2dcff;
   fill: #004492
 }
 
+span.badge-icon.ticket-status-icon-pending svg,
 span.badge span.badge-icon.ticket-status-icon-pending svg {
   background-color: #ffceb2;
   fill: #d86100;
 }
 
+span.badge-icon.ticket-status-icon-solved svg,
 span.badge span.badge-icon.ticket-status-icon-solved svg {
   background-color: #c9b2ff;
   fill: #640092;
 }
 
+span.badge-icon.ticket-status-icon-testing svg,
 span.badge span.badge-icon.ticket-status-icon-testing svg {
   background-color: #b2d3ff;
   fill: #8c00ff;