Skip to content
/ markdown Public

Kong's open-source markdown renderer and live editor

License

Notifications You must be signed in to change notification settings

Kong/markdown

Repository files navigation

Kong Markdown

Important

This repository and the @kong/markdown package are currently in development on the alpha branch. Breaking changes should be expected.

Kong's open-source markdown renderer and live editor.

TODO

  • Utilize design tokens
  • Add new icons for toolbar
  • Possibly export separate bundles for syntax highlighting options
  • Document theming instructions
  • Light / Dark mode
  • Default styles for markdown HTML elements

Usage

Installation

Install the @kong/markdown package in your host project.

pnpm add @kong/markdown

# OR

yarn add @kong/markdown

Notes

By default, the editor does not handle the Tab key unless there is an active text selection within the textarea. This isn't an oversight —- it is an intentional decision to make the default configuration pass the "no keyboard trap" criterion of the W3C Web Content Accessibility Guidelines.

Some users browse the web without access to a pointing device, and it is really unfriendly towards such users to have focusable inputs that they cannot escape from.

Props

v-model

  • type: String
  • required: false
  • default: ''

Contributing & Local Development

To get started, install the package dependencies

pnpm install

Development Sandbox

This repository includes a Vue sandbox app (see the /sandbox directory) to allow you to experiment with icons.

Build and Preview the Development Sandbox

To build and run a local preview of the Sandbox:

pnpm run preview

Lint and fix

Lint package files, and optionally auto-fix detected issues.

# Stylelint only
pnpm run stylelint

# Stylelint and fix
pnpm run stylelint:fix

# ESLint only
pnpm run lint

# ESLint and fix
pnpm run lint:fix

Testing

Unit and component tests are run with Vitest.

# Run tests
pnpm run test

# Run tests in the Vitest UI
pnpm run test:open

Build for production

pnpm run build

Committing Changes

Commitizen friendly

This repo uses Conventional Commits.

Commitizen and Commitlint are used to help build and enforce commit messages.

It is highly recommended to use the following command in order to create your commits:

pnpm run commit

This will trigger the Commitizen interactive prompt for building your commit message.

Enforcing Commit Format

Lefthook is used to manage Git Hooks within the repo.

  • A commit-msg hook is automatically setup that enforces commit message stands with commitlint, see lefthook.ymal
  • A pre-push hook is used that runs eslint before allowing you to push your changes to the repository

Additionally, CI will use commitlint to validate the commits associated with a PR in the Lint and Validate job.

Package Publishing

This repository utilizes Semantic Release for automated package publishing and version updates.