xt-plugin-editor 0.0.0-stage → 1.0.0

package/projects/editor/src/lib/markdown/inline-markdown-pipe.ts

@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'inlineMarkdown',
+})
+export class InlineMarkdownPipe implements PipeTransform {
+  transform(value: unknown, ...args: unknown[]): unknown {
+    if( typeof value === 'string' ) {
+      let text = value as string;
+      if (text.length>100)
+        text=text.substring(0,100); // For inline text, we don't want all the text, just the start
+      text = text.replace(/!\[[^\]]*\]\([^)]*\)/g, '');   // images
+      text = text.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1');// links -> visible text
+      text = text.replace(/^#{1,6}\s*/gm, '');            // headers
+      text = text.replace(/^\s*[-*+]\s+/gm, '');          // bullet lists
+      text = text.replace(/^\s*\d+[.)]\s+/gm, '');        // numbered lists
+      text = text.replace(/^\s*[-*]\s+/gm, '');           // bullets that were bold markers
+      text = text.replace(/\*\*([^*]*)\*\*/g, '$1');      // bold
+      text = text.replace(/\*([^*]*)\*/g, '$1');          // italic *
+      text = text.replace(/(?<!\w)_([^_\n]+)_(?!\w)/g, '$1');   // italic _text_
+      text = text.replace(/\s*\n\s*/g, ' ');              // newlines -> spaces
+      text = text.replace(/\s{2,}/g, ' ').trim();         // collapse
+      if (text.length>57) {
+        return text.substring(0,57)+'...';
+      }
+      return text;
+    }
+    return null;
+  }
+}

package/projects/editor/src/lib/markdown/markdown-pipe.spec.ts

@@ -0,0 +1,29 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { MarkdownPipe } from './markdown-pipe';
+import { TestBed } from '@angular/core/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideZonelessChangeDetection } from '@angular/core';
+
+describe('MarkdownPipe', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [MarkdownPipe, provideNoopAnimations(), provideZonelessChangeDetection()]
+
+    })
+      .compileComponents();
+  });
+
+  it('create an instance', () => {
+    const pipe = TestBed.inject(MarkdownPipe);
+    expect(pipe).toBeTruthy();
+  });
+
+  it('Render correctly HTML', () => {
+    const pipe = TestBed.inject(MarkdownPipe);
+    const response = pipe.transform("# Header\n\nTest **Text**") as string;
+    expect(response.indexOf('<h1>')).not.toBe(-1);
+    expect(response.indexOf('Test')).not.toBe(-1);
+    expect(response.indexOf('<strong>')).not.toBe(-1);
+  });
+
+});

package/projects/editor/src/lib/markdown/markdown-pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
+import { marked } from 'marked';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+  constructor(protected sanitizer: DomSanitizer) {
+  }
+  transform(value: unknown, ...args: unknown[]): unknown {
+    if( typeof value === 'string' ) {
+      const html= marked.parse(value.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,""),
+        {
+          async:false
+        });
+      return this.sanitizer.sanitize(SecurityContext.HTML, html);
+    }
+    return null;
+  }
+}