npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

govspeak-visual-editor

v3.0.0

Published

This repo demonstrates how [ProseMirror] could be used to build a visual editor for [Govspeak].

Downloads

317

Readme

Govspeak visual editor

This repo demonstrates how ProseMirror could be used to build a visual editor for Govspeak.

Govspeak is a flavour of Markdown used for publishing content on GOV.UK.

Local development

  1. Clone this repo

  2. Install dependencies

    npm install
  3. Run the development server

    npm run dev
  4. Open the example editor

  5. Run tests

    Unit tests

    npm run test

    e2e tests

    npm run e2e-test

Editor overview

The editor implements a schema based on the prosemirror-schema-basic and prosemirror-schema-list modules, extended with some Govspeak-specific nodes (such as callouts).

It also builds upon the prosemirror-example-setup package which provides a basic editor UI and some useful configuration defaults.

Govspeak-specific nodes

You'll find custom Govspeak-specific nodes defined in the src/nodes directory.

Each 'node' file in that directory defines a few things:

  1. A NodeSpec, which describes the node's schema for use with the prosemirror-model module
  2. Input rules, which enable users to type Markdown-esque syntax to create nodes using the prosemirror-inputrules module
  3. A buildMenu function which can add custom buttons to the toolbar menu provided by the prosemirror-example-setup module.

Making changes

You should keep track of relevant unreleased changed by adding to the "Unreleased" section of the CHANGELOG.md.

Publishing to npm

  1. Checkout main and pull latest changes.

  2. Create and checkout a new branch (release-[version-number]). The version number is determined by looking at the current "Unreleased" changes in CHANGELOG and updating the previous release number depending on the kind of entries:

  • Breaking changes corresponds to a major (1.X.X) change.
  • New features corresponds to a minor (X.1.X) change.
  • Fixes corresponds to a patch (X.X.1) change.

For example if the previous version is 2.3.0 and there are entries for Breaking changes then the new release should be 3.0.0.

See Semantic Versioning for more information.

  1. Update CHANGELOG.md "Unreleased" heading with the new version number and review the latest commits to make sure the latest changes are correctly reflected in the CHANGELOG).

  2. Update package.json version with the new version number.

  3. Run npm install to ensure you have the latest dependencies installed.

  4. Commit changes. These should include updates in the following files:

  1. Create a pull request and copy the changelog text for the current version in the pull request description.

  2. Once the pull request is approved, merge into the main branch. This action will trigger the CI to publish the new version to NPM. A dependabot pull request will automatically be raised in relevant applications.

Custom events

The following events are emitted from the Visual Editor. Add event listeners to any parent wrapper to implement behaviour in response to these actions (e.g. for tracking purposes.)

  • visualEditorButtonClick - emitted when a button is clicked in the toolbar. Details sent with the event can be accessed via:
    • event.detail.buttonText which returns the title of the selected button
  • visualEditorSelectChange - emitted when select values change on dropdowns in the toolbar. Details sent with the event can be accessed via:
    • event.detail.selectText which returns the text of the selected option in the dropdown