{"id":13596890,"url":"https://github.com/StackExchange/Stacks-Editor","last_synced_at":"2025-04-09T20:31:33.796Z","repository":{"id":37080048,"uuid":"311743172","full_name":"StackExchange/Stacks-Editor","owner":"StackExchange","description":"Stack Overflow's Combination Rich Text / Markdown Editor","archived":false,"fork":false,"pushed_at":"2025-04-04T15:55:53.000Z","size":6442,"stargazers_count":379,"open_issues_count":62,"forks_count":56,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-06T06:57:39.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://editor.stackoverflow.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StackExchange.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-10T18:01:27.000Z","updated_at":"2025-04-01T14:23:42.000Z","dependencies_parsed_at":"2023-02-09T02:31:17.292Z","dependency_job_id":"2fcb3b25-1dbd-4344-bb37-e5de3fad1ea4","html_url":"https://github.com/StackExchange/Stacks-Editor","commit_stats":{"total_commits":387,"total_committers":18,"mean_commits":21.5,"dds":"0.15245478036175708","last_synced_commit":"2124fd6ec1fb0b6569a4f9d2fea8686984120292"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2FStacks-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StackExchange","download_url":"https://codeload.github.com/StackExchange/Stacks-Editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445659,"owners_count":20939957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:02:54.923Z","updated_at":"2025-04-09T20:31:33.787Z","avatar_url":"https://github.com/StackExchange.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Editors"],"sub_categories":[],"readme":"# Stacks-Editor\n\nStacks-Editor is a combination rich text / markdown editor that powers Stack Overflow's post editing experience.\n\n## Usage\n\n### Installation\n\n`npm install @stackoverflow/stacks-editor`\n\n### Import via Modules or CommonJS\n\n```html\n\u003cdiv id=\"editor-container\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { StacksEditor } from \"@stackoverflow/stacks-editor\";\n// don't forget to include the styles as well\nimport \"@stackoverflow/stacks-editor/dist/styles.css\";\n// include the Stacks js and css as they're not included in the bundle\nimport \"@stackoverflow/stacks\";\nimport \"@stackoverflow/stacks/dist/css/stacks.css\";\n\nnew StacksEditor(\n    document.querySelector(\"#editor-container\"),\n    \"*Your* **markdown** here\"\n);\n```\n\n### Import via \u0026lt;script\u0026gt; tag\n\n```html\n\u003c!--include Stacks --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/node_modules/@stackoverflow/stacks/dist/css/stacks.css\" /\u003e\n\u003c!-- include the bundled styles --\u003e\n\u003clink\n    rel=\"stylesheet\"\n    href=\"path/to/node_modules/@stackoverflow/stacks-editor/dist/styles.css\"\n/\u003e\n\n\u003cdiv id=\"editor-container\"\u003e\u003c/div\u003e\n\n\u003c!-- highlight.js is not included in the bundle, so include it as well if you want it --\u003e\n\u003cscript src=\"//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js\"\u003e\u003c/script\u003e\n\u003c!--include Stacks --\u003e\n\u003cscript src=\"path/to/node_modules/@stackoverflow/stacks/dist/js/stacks.min.js\"\u003e\u003c/script\u003e\n\u003c!-- include the bundle --\u003e\n\u003cscript src=\"path/to/node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js\"\u003e\u003c/script\u003e\n\n\u003c!-- initialize the editor --\u003e\n\u003cscript\u003e\n    new window.stacksEditor.StacksEditor(\n        document.querySelector(\"#editor-container\"),\n        \"*Your* **markdown** here\",\n        {}\n    );\n\u003c/script\u003e\n```\n\n---\n\n## Development\n\n1. Install dependencies with `npm i`\n2. Build and start using `npm start`\n3. Point your browser to the address listed in the output - typically \u003chttp://localhost:8080/\u003e\n\n## Run Tests\n\nRun all unit tests (no end-to-end tests) using\n\n    npm run test:unit\n\nRun all end-to-end tests (written in Playwright) using\n\n    npm run test:e2e\n\nEnd-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.\n\n## Browser Bundle analysis\n\nGenerate a `stats.json` file for analysis using\n\n    npm run build:stats\n\nYou can upload your `stats.json` file [here](http://webpack.github.io/analyse/) or [here](https://chrisbateman.github.io/webpack-visualizer/) for visualization. See more resources [here](https://webpack.js.org/guides/code-splitting/#bundle-analysis).\n\n## Publishing\n\nWe use [changesets](https://github.com/changesets/changesets) to automatize the steps necessary to publish to NPM, create GH releases and a changelog.\n\n- Every time you do work that requires a new release to be published, [add a changesets entry](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) by running `npx chageset` and follow the instrcutions on screen. (changes that do not require a new release - e.g. changing a test file - don't need a changeset).\n    - When opening a PR without a corresponding changeset the [changesets-bot](https://github.com/apps/changeset-bot) will remind you to do so. It generally makes sense to have one changeset for PR (if the PR changes do not require a new release to be published the bot message can be safely ignored)\n- The [release github workflow](.github/workflows/release.yml) continuosly check if there are new pending changesets in the main branch, if there are it creates a GH PR (`chore(release)` [see example](https://github.com/StackExchange/apca-check/pull/2)) and continue updating it as more changesets are potentially pushed/merged to the main branch.\n- When we are ready to cut a release we need to simply merge the `chore(release)` PR back to main and the release github workflow will take care of publishing the changes to NPM and create a GH release for us. The `chore(release)` PR also give us an opportunity to adjust the automatically generated changelog when necessary (the entry in the changelog file is also what will end up in the GH release notes).\n\n_The release github workflow only run if the CI workflow (running linter, formatter and tests) is successful: CI is blocking accidental releases_.\n\n_Despite using changesets to communicate the intent of creating releases in a more explicit way, we still follow [conventional commits standards](https://www.conventionalcommits.org/en/v1.0.0/) for keeping our git history easily parseable by the human eye._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStackExchange%2FStacks-Editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FStackExchange%2FStacks-Editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStackExchange%2FStacks-Editor/lists"}