@stackoverflow/stacks-editor

Stacks-Editor

Usage

Installation

npm install @stackoverflow/stacks-editor

Import via Modules or CommonJS

<div id="editor-container"></div>

import { StacksEditor } from "@stackoverflow/stacks-editor";
// don't forget to include the styles as well
import "@stackoverflow/stacks-editor/styles.css";

new StacksEditor(
    document.querySelector("#editor-container"),
    "*Your* **markdown** here"
);

Import via <script> tag

<!-- include the bundled styles -->
<link
    rel="stylesheet"
    src="path/to/node_modules/@stackoverflow/stacks-editor/dist/styles.css"
/>

<div id="editor-container"></div>

<!-- highlight.js is not included in the bundle, so include it as well if you want it -->
<script src="//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js"></script>

<!-- include the bundle -->
<script src="path/to/node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>

<!-- initialize the editor -->
<script>
    new window.stacksEditor.StacksEditor(
        document.querySelector("#editor-container"),
        "*Your* **markdown** here",
        {}
    );
</script>

---

Development

1. Install dependencies with npm i
2. Build and start using npm start
3. Your browser will show the example page automatically

Run Tests

Run all unit tests (no end-to-end tests) using

npm test

Run all end-to-end tests (written in Playwright) using

npm run start
npm run test:e2e

End-to-end tests need to follow the convention of using someName.e2e.test.ts as their filename and being saved in the test/e2e directory. They'll automatically get picket up by the test runner this way.

Browser Bundle analysis

Generate a stats.json file for analysis using

npm run print-stats

You can upload your stats.json file here or here for visualization. See more resources here.