Add highlight text transform

Author: wenga86

__test__/text-node-to-html.test.ts

@@ -15,7 +15,7 @@ describe('Text Node To HTML', () => {
             ...textNode,
             bold: true
         }
-        
+
         const resultHtml = textNodeToHTML(node, {
             ...defaultNodeOption
         })
@@ -212,4 +212,18 @@ describe('Text Node To HTML', () => {
         expect(resultHtml).toEqual(`<strong><em><br />${node.text}</em></strong>`)
         done()
     })
-})
+
+    it('Should return Highlighted string text', done => {
+        const node = {
+            ...textNode,
+            highlight: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual(`<mark>${textNode.text}</mark>`)
+        done()
+    })
+})

src/helper/enumerate-entries.ts

@@ -44,11 +44,11 @@ export function enumerateContents(
 
 export function textNodeToHTML(node: TextNode, renderOption: RenderOption): string {
   let text = replaceHtmlEntities(node.text);
-  
+
   // Convert newlines to <br /> tags if there are no other marks
   // This ensures newlines are always handled consistently
   let hasMarks = false;
-  
+
   if (node.classname || node.id) {
     text = (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id);
     hasMarks = true;
@@ -85,12 +85,16 @@ export function textNodeToHTML(node: TextNode, renderOption: RenderOption): stri
     text = (renderOption[MarkType.BOLD] as RenderMark)(text);
     hasMarks = true;
   }
-  
+  if (node.highlight) {
+    text = (renderOption[MarkType.HIGHLIGHT] as RenderMark)(text);
+    hasMarks = true;
+  }
+
   // If no marks were applied, but text contains newlines, convert them to <br />
   if (!hasMarks && text.includes('\n')) {
     text = text.replace(/\n/g, '<br />');
   }
-  
+
   return text;
 }
 export function referenceToHTML(
@@ -121,7 +125,7 @@ export function referenceToHTML(
     const aTag = `<a${aTagAttrs}>${entryText}</a>`;
     return aTag;
   }
- 
+
   if (!renderEmbed && renderOption[node.type] !== undefined) {
     return sendToRenderOption(node);
   }
@@ -136,7 +140,7 @@ export function referenceToHTML(
   if (!item && renderOption[node.type] !== undefined) {
     return sendToRenderOption(node);
   }
-  
+
   return findRenderString(item, metadata, renderOption);
 
 }
@@ -184,4 +188,4 @@ function nodeToHTML(
       return (renderOption.default as RenderNode)(node, next);
     }
   }
-}
+}

src/nodes/mark-type.ts

@@ -6,11 +6,12 @@ enum MarkType {
 
     STRIKE_THROUGH = 'strikethrough',
     INLINE_CODE = 'inlineCode',
+    HIGHLIGHT = 'highlight',
 
 
     SUBSCRIPT = 'subscript',
     SUPERSCRIPT = 'superscript',
     BREAK = 'break'
 }
 
-export default MarkType
+export default MarkType

src/nodes/text-node.ts

@@ -9,6 +9,7 @@ export default class TextNode extends Node {
     superscript?: boolean
     subscript?: boolean
     break?: boolean
+    highlight?: boolean
     classname?: string
     id?: string
 

src/options/default-node-options.ts

@@ -24,7 +24,7 @@ function getAttrString(node: Node, key: string): string | undefined {
  */
 function buildCommonAttrs(node: Node): string {
     if (!node.attrs) return '';
-    
+
     const attrs: string[] = [];
     if (node.attrs.style) {
         attrs.push(` style="${node.attrs.style}"`);
@@ -134,7 +134,7 @@ export const defaultNodeOption: RenderOption = {
             });
             colgroupHTML += `</${NodeType.COL_GROUP}>`;
         }
-    
+
         // Generate table with colgroup and other attributes
         return `<table${buildCommonAttrs(node)}>${colgroupHTML}${sanitizeHTML(next(node.children))}</table>`;
     },
@@ -157,7 +157,7 @@ export const defaultNodeOption: RenderOption = {
         const colSpan = getAttr(node, 'colSpan');
         const rowSpanAttr = rowSpan ? ` rowspan="${rowSpan}"` : '';
         const colSpanAttr = colSpan ? ` colspan="${colSpan}"` : '';
-        
+
         return `<th${rowSpanAttr}${colSpanAttr}${buildCommonAttrs(node)}>${sanitizeHTML(next(node.children))}</th>`
     },
     [NodeType.TABLE_DATA]:(node: Node, next: Next) => {
@@ -167,7 +167,7 @@ export const defaultNodeOption: RenderOption = {
         const colSpan = getAttr(node, 'colSpan');
         const rowSpanAttr = rowSpan ? ` rowspan="${rowSpan}"` : '';
         const colSpanAttr = colSpan ? ` colspan="${colSpan}"` : '';
-        
+
         return `<td${rowSpanAttr}${colSpanAttr}${buildCommonAttrs(node)}>${sanitizeHTML(next(node.children))}</td>`
     },
     [NodeType.BLOCK_QUOTE]:(node: Node, next: Next) => {
@@ -180,12 +180,12 @@ export const defaultNodeOption: RenderOption = {
     ['reference']:(node: Node, next: Next) => {
         const type = getAttr(node, 'type');
         const displayType = getAttr(node, 'display-type');
-        
+
         if ((type === 'entry' || type === 'asset') && displayType === 'link'){
             const href = getAttrString(node, 'href') || getAttrString(node, 'url') || '';
             const target = getAttrString(node, 'target');
             const assetUid = getAttrString(node, 'asset-uid');
-            
+
             let aTagAttrs = buildCommonAttrs(node);
             if (href) aTagAttrs += ` href="${href}"`;
             if (target) {
@@ -200,7 +200,7 @@ export const defaultNodeOption: RenderOption = {
             }
             return `<a${aTagAttrs}>${sanitizeHTML(next(node.children))}</a>`;
         }
-        
+
         if (type === 'asset') {
             const assetLink = getAttrString(node, 'asset-link');
             const src = assetLink ? encodeURI(assetLink) : '';
@@ -219,7 +219,7 @@ export const defaultNodeOption: RenderOption = {
             const altAttr = alt ? ` alt="${alt}"` : '';
             const targetAttr = target === "_blank" ? ` target="_blank"` : '';
             const styleAttr = style ? ` style="${style}"` : '';
-            
+
             const imageTag = `<img${assetUidAttr}${classAttr}${srcAttr}${altAttr}${targetAttr}${styleAttr} />`;
             const styleAttrFig = style ? ` style="${style}"` : '';
 
@@ -251,6 +251,9 @@ export const defaultNodeOption: RenderOption = {
     [MarkType.INLINE_CODE]:(text: string) => {
         return `<span data-type='inlineCode'>${sanitizeHTML(text)}</span>`
     },
+    [MarkType.HIGHLIGHT]:(text: string) => {
+        return `<mark>${sanitizeHTML(text)}</mark>`
+    },
     [MarkType.SUBSCRIPT]:(text: string) => {
         return `<sub>${sanitizeHTML(text)}</sub>`
     },