StackExchange / StackExchange/Stacks-Editor

Stacks Editor outside the Stack Overflow ecosystem

Open
#504 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
437
Forks
61
Avg merge
16h 2m
Merged PRs (30d)
8

Description

Very nice editor, but have a problem. Now, if I include editor styles, all styles in my project are broken.
<style scoped> doesn't help (the styles aren't applied to the editor).
Is it possible to use Stacks Editor outside the Stack Overflow ecosystem? My project is built on Nuxt + Tailwind.

<script setup>
import { StacksEditor } from '@stackoverflow/stacks-editor'

const editor = useTemplateRef('editor')

onMounted(() => new StacksEditor(editor.value, "*Your* **markdown** here"))
</script>

<template>
  <div ref="editor"></div>
</template>

<style>
@import '@stackoverflow/stacks-editor/dist/styles.css';
@import '@stackoverflow/stacks';
@import '@stackoverflow/stacks/dist/css/stacks.css';
</style>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Vue/Nuxt example using the @stackoverflow/stacks-editor entry point and the listed Stacks and editor stylesheet imports. Check whether the imported styles break surrounding Tailwind/project styles and whether editor styles apply; done means the editor works outside Stack Overflow without global style conflicts.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, tailwindcss, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.