ngx-stackedit

StackEdit aspires to surpass all other markdown editors, becoming the most formidable and feature-rich markdown editor in the market. With a focus on power and versatility, we designed it to empower your markdown editing experience like never before

With the goal of burying all other markdown editors six feet under, we sometimes have to take risky measures. One of those measures is acting like we're better than the other markdown editors. Because we are.

Features:

• Rich Text Editing: Enjoy a seamless editing experience with real-time Markdown rendering, making it easier than ever to see your content come to life as you type.

• Syntax Highlighting: Write and edit code in style with syntax highlighting for various programming languages, ensuring your code looks as good as it works.

• Color Customization: Express your creativity by customizing the editor's color scheme to match your unique preferences or brand aesthetics.

• Mermaid Charts: Effortlessly integrate Mermaid charts into your documents for visually appealing data visualization.

• Scroll Syncing: Experience a fluid writing and reading experience with scroll syncing, keeping your place in your document no matter where you are.

---

Demo: https://dotglitch.dev/#/StackEdit

Quickstart

Install

1    npm i -S ngx-stackedit

Import

1import { Component } from '@angular/core';
2import { StackEditorComponent } from 'ngx-stackedit';
3
4@Component({
5    selector: 'app-example',
6    template: `
7<ngx-stackedit
8    [(value)]="defaultValue"
9    mode="viewonly"
10    (onImageUpload)="onImageUpload($event)"
11/>
12    `,
13    imports: [
14        StackEditorComponent
15    ],
16    standalone: true
17})
18export class ExampleBasicComponent {
19
20    defaultValue = `
21Lorem **ipsum** _dolor_ sit amet, consectetur adipiscing elit, sed do _eiusmod tempor incididunt_ \
22ut labore et dolore magna ~~aliqua~~. Ut enim ad minim veniam, quis nostrud exercitation \
23ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in \
24_reprehenderit_ in <span style="color: #ff0000">voluptate</span> velit esse cillum \
25dolore eu fugiat nulla pariatur. Excepteur sint ~~occaecat cupidatat~~ non proident, \
26sunt in culpa qui **officia deserunt mollit** anim id est laborum.
27    `;
28
29    // Sample for handling an image upload event
30    onImageUpload(evt: { data: FileList, stackEditor: StackEditorComponent }) {
31        const formData = new FormData();
32
33        Object.keys(evt.data).forEach(k => {
34            const file: {
35                lastModified: number,
36                lastModifiedDate: Date,
37                name: string,
38                size: number,
39                type: string;
40            } = evt.data[k];
41
42            const parts = file.name.split('.');
43            const name = parts.slice(0, -1).join('.') + '-' + ulid() + '.' + parts.slice(-1)[0];
44            formData.append(name, file as any);
45        });
46        formData.append("data", JSON.stringify({
47            path,
48            autoRename: true
49        }));
50
51        const url = `/api/files/upload`;
52
53        const { files } = await this.fetch.post<{ files: {url: string, name: string}[] }>(url, formData);
54
55        evt.stackEditor.finalizeImageUpload({
56            label: files[0].name,
57            link: files[0].url
58        });
59    }
60}
61

Developing

1npm install
2
3# Start dev server on localhost:8080
4npm run dev
5# OR: Start standalone app dev server
6npm run tauri:dev
7

Building

1# npm package build in ./dist
2npm run build
3# Build a static site (uses indexedDB for storage)
4npm run build:static
5# or build the tauri app (requires rust Tauri setup)
6npm run tauri:build
7
8# build for production and view the bundle analyzer report
9npm run build:analyze
10

License

This project is licensed under mixed MIT and Apache 2.0 Licenses. See the LICENSE file for details.