@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";
// include the Stacks js and css as they're not included in the bundle
import "@stackoverflow/stacks";
import "@stackoverflow/stacks/dist/css/stacks.css";

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

Import via <script> tag

<!--include Stacks -->
<link rel="stylesheet" src="path/to/node_modules/@stackoverflow/stacks/dist/css/stacks.css" />
<!-- 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 Stacks -->
<script src="path/to/node_modules/@stackoverflow/stacks/dist/stacks.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.5.0 (2022-05-13)

⚠ BREAKING CHANGES

• Stacks 1.0 contains breaking changes

Features

• add basic description list (<dl>, <dd>, <dt>) support (4ec9f36)
• add heading dropdown menu (0f1a096), closes #5
• add localization support (e9ae75e), closes #60
• add mod+e keybinding to insert tables (#8) (d3c6975)
• add text only link preview support (#94) (a49d73c)
• allow users to exit certain marks and code blocks by using the arrow keys (e37a959), closes #64

Bug Fixes

• allow headings to contain any inline nodes, such as soft/hard line breaks (e709127), closes #107
• allow unformatted text to inherit formatting when pasted into formatted content (6254acf), closes #48
• backslash escaped hardbreaks now detect and serialize correctly (1bbbb89)
• change editor target to display: flex so the inner editor grows when resized (9be120f), closes #88
• change mod+a to only select markdown text, excluding the root node itself (d3598f5), closes #24
• disallow any marks or nodes inside code_blocks (439bed6), closes #39
• ensure all generated element ids are unique to prevent clashes with multiple editors (#118) (859f315)
• fix global runtime crashes when bundling as an es6 module (1d2e7f1), closes #108
• fix table serialization having incorrect trailing whitespace (5a4c9b0)
• increase button contrast in high contrast mode (#123) (f769642), closes #86
• link preview decorations not showing on the correct node (16cfde3), closes #37
• on horizontal_rule insert, append and prepend paragraph nodes as needed (#124) (bda2637), closes #26
• toggle heading only when same level (#125) (7b5b5c1), closes #105
• treat images as inline (#121) (00cd3ea), closes #53
• update all keybinds to work with capslock turned on (27a785a), closes #90
• update to Stacks 1.0.1 (#117) (b7b44bc)