# mardkdown-editor-element

A lightweight markdown editor for the modern web

## Usage

Via npm:

```sh
npm install @screeb/markdown-editor-element
```

```js
import "@screeb/markdown-editor-element";
```

Or as a `<script>` tag:

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@screeb/markdown-editor-element@^1/index.js"
></script>
```

Then use the HTML:

```html
<markdown-editor></markdown-editor>
```

And listen for `change` events:

```js
document
  .querySelector("markdown-editor")
  .addEventListener("change", (event) => console.log(event.detail));
```

This will log a string:

```json
"Hello **world**"
```

## Styling

`markdown-editor-element` uses [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so its inner styling cannot be (easily) changed with arbitrary CSS. Refer to the API below for style customization.

### Size

`markdown-editor-element` has a default size, but you can change it to whatever you want:

```css
markdown-editor {
  width: 400px;
  height: 300px;
}
```

For instance, to make it expand to fit whatever container you give it:

```css
markdown-editor {
  width: 100%;
  height: 100%;
}
```

### CSS variables

Most colors and sizes can be styled with CSS variables.
For example:

```css
markdown-editor {
  --markdown-editor-color: black;
  --markdown-editor-border-color: green;
  --markdown-editor-selection-color: red;
}
```

Here is a full list of css variables:

| Variable                             | Default                                  | Description                                        |
| ------------------------------------ | ---------------------------------------- | -------------------------------------------------- |
| `--markdown-editor-background-color` | `#ffffff`                                | Background color of the entire `<markdown-editor>` |
| `--markdown-editor-color`            | `#303140`                                | Text color of the entire `<markdown-editor>`       |
| `--markdown-editor-selection-color`  | `#5e21f1`                                | Background of the `<markdown-editor>` selection    |
| `--markdown-editor-border-color`     | `#e5e5ed`                                | Border color of the entire `<markdown-editor>`     |
| `--markdown-editor-shadow`           | `0px 2px 2px 0px rgba(48, 49, 64, 0.05)` | Shadow of the entire `<markdown-editor>`           |

## Contributing

### Developing

Install dependencies with `pnpm install`

Start a development server with:

```bash
pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev -- --open
```

Everything inside `src/lib` is part of the library, everything inside `src/routes` is used as a showcase.

### Building

Build library:

```bash
pnpm build
```

### Publishing

```bash
pnpm publish
```