Draftail Documentation

Once the environment is installed, use the following npm scripts to manage your development workflow, including starting the server, linting, formatting, and running tests.

# Make sure you use the correct node version.
nvm use
# Start the server and the development tools.
npm run start
# Runs linting.
npm run lint
# Re-formats all of the files in the project (with Prettier).
npm run format
# Run tests in a watcher.
npm run test:watch
# Run test coverage
npm run test:coverage
# Open the coverage report with:
npm run report:coverage
# Open the build report with:
npm run report:build
# Open the file size report with:
npm run report:size
# Open the package contents report with:
npm run report:package
# View other available commands with:
npm run

For detailed implementation and usage information, refer to the official documentation at draftail.org:

• Getting Started: Initial setup and integration steps.
• API Reference: Detailed technical documentation for the Draftail API.
• User Guide: Instructions for end-users on how to use the editor.
• Extensions Guide: How to build and integrate custom extensions.

The primary source for all Draftail documentation, project updates, and release information is the official website at draftail.org.

Key resources include:

• Documentation: draftail.org/docs
• Project Updates: The official blog for releases and news.
• Underlying Library: Since Draftail is built on Draft.js, refer to the Draft.js documentation for low-level editor logic.

To release a new version, follow these steps:

1. Create a new branch for the release.
2. Update CHANGELOG.md and ensure documentation links point to the correct version.
3. Update the version number in package.json and package-lock.json following semantic versioning (semver).
4. Submit a PR and squash merge it.
5. On the main branch, run the distribution and publishing commands.
6. Create a release and a tag on GitHub.

npm run dist
npm run report:size
npm run report:package
npm publish

Before asking a question, ensure you have consulted the official documentation and searched for existing answers online. If you still need assistance, you can use the following channels:

• Slack: Join the #draftail channel on Wagtail’s Slack to interact with the community.
• Stack Overflow: Search for existing answers using the draftail query or the draftjs tag.

To set up a local development environment for Draftail, clone the repository, ensure you have Node.js and nvm installed, and follow these steps:

1. Install the required Node version using nvm.
2. Install project dependencies using npm.
3. Create a .env file to manage local secrets.

nvm install
# Then, install all project dependencies.
npm install
# Set up a `.env` file with the appropriate secrets.
touch .env

Draftail uses Prettier for code formatting. The project follows these specific formatting rules defined in prettier.config.js. If you are contributing to the codebase or setting up a local development environment, ensure your editor or CLI uses these settings to maintain consistency.

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  trailingComma: "all",
  bracketSpacing: true,
  arrowParens: "always",
  proseWrap: "preserve",
};

Use getControlLabel to determine the text label for a UI control. The function resolves the label based on the following priority:

1. If config is a boolean, it returns the predefined label from LABELS using the control's type.
2. If config.label is a string or null, it returns that value.
3. If config.icon is defined, it returns null (indicating the control is represented by an icon rather than text).
4. Otherwise, it falls back to the predefined label from LABELS using the control's type.

import { getControlLabel } from './api/ui';

// Example usage:
const label = getControlLabel('bold', { type: 'bold', label: 'Bold Text' });