@stackoverflow/stacks-editor

Stacks-Editor

Stacks-Editor is a combination rich text / markdown editor that powers Stack Overflow's post editing experience.

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/dist/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 test:e2e

End-to-end tests need to follow the convention of using someName.e2e.test.ts as their filename. They'll automatically get picked up by the test runner this way.

Debug End-to-end tests

Understanding why end-to-end tests fail can be tricky business. There are a few ways to get a glimpse of playwright's internals:

1. Activate debug logging With debug logging enabled, Playwright will log whatever it's currently trying to do or waiting for to the console. Activate it by running DEBUG=pw:api npm run test:e2e

2. Show the browser window By default, playwright starts a headless browser to make things fast. If you want to follow along, you can tell playwright to show you the browser window. Go to jest-playwright.config.js and uncomment the block containing the headless: false setting.

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.

Changelog

0.4.2 (2022-03-04)

Features

• add ability to pass custom validateLink method to parser (124762a)
• add deserialization support for reference links (22e84dd), closes #29
• add StacksEditor:image-uploader-show event (a9ac79c)

Bug Fixes

• add aria-labels to icon-only buttons (#98) (b69c3e0)
• add html render support for hard breaks/br tags (a360b6d)
• add missing import reference for _stacks-mixins (#94) (af1c6c5)
• add not-allowed cursor to the disabled editor (#100) (1933f6f)
• always add a paragraph to the end of the doc when inserting a block element at the end (2df6573), closes #18
• fix table insertion in the middle of text incorrectly adding trailing paragraph (84fc550)
• fix table menu entry always manipulating the menu icon of the last initialized editor instance (cc592c1)
• markdown-parser: do not autolink emails without the "mailto:" prefix (#85) (1a8b6cc)
• add support for serializing node attributes to html (0a00644)
• render html versions of blockquote, p and header tags back to markdown (746743e)