@stronglify13/editor

Introduction

@stronglify13/editor is a package based on Editor.js that provides a predefined configuration with additional block and inline tools, making it easier to create rich text editors.

Installation

yarn add @stronglify13/editor
# or
npm install @stronglify13/editor

Quick start

import { newEditor } from '@stronglify13/editor';

const editor = newEditor({
  htmlContainerID: 'editor',
  placeholder: 'Write something...',
  autofocus: true,
});

Ensure the target container exists in the DOM before calling newEditor.

Requirements to set up the development environment

Before you start, make sure you meet the following requirements:

• Node.js (version v20.16.0)

  • You can use nvm to install and manage Node.js versions.

  • A .nvmrc file with the recommended version is included in the root of this project.

  • You can install the recommended version with the following command:

    nvm install

  • You can use the recommended version with the following command:

    nvm use

• yarn installed
• Have an npm account if you want to publish the package and be part of the @stronglify13 organization.

Installing dependencies

Clone the repository and run:

yarn

Generate a new version of the package

To generate a new version, follow these steps:

1. Make sure all changes are committed in Git.

2. Modify the version in package.json:

3. Build the package:

   npm run build && npx tsc

4. Verify that everything works correctly before publishing.

Publishing the package

1. Log in to npm if you haven't already:

   npm login

2. Publish the package to npm:

   npm publish --access public

3. Verify that the package has been published correctly by checking npmjs.com.

Exported functionalities

The package exports the following tools and functions:

Main function

• newEditor(config: NewEditorUsage): Creates a new instance of the editor with the provided configurations.

Block tools

| Tool | Description | | --- | --- | | Paragraph | Standard text block with inline toolbar support. | | Header | Heading block with configurable levels. | | List | Ordered and unordered list block. | | Image | Image block with captions via Simple Image. | | Code | Monospaced code snippet block. | | RawHTML | Raw HTML injection block for custom markup. | | Embed | External embeds (YouTube enabled by default). | | Table | Tabular data block with row/column controls. | | Video | Custom video block for Stronglify use cases. |

Block settings

| Tune | Description | | --- | --- | | AlignmentTune | Aligns block content left, center, or right. |

Inline tools

| Tool | Description | | --- | --- | | BoldInlineTool | Toggle bold text formatting. | | ItalicInlineTool | Toggle italic text formatting. | | UnderlineInlineTool | Toggle underline formatting. | | MarkerInlineTool | Highlight text with a marker style. | | CodeInlineTool | Inline code styling for short snippets. | | HyperlinkInlineTool | Add and edit hyperlinks. | | IdClassStyleInlineTool | Apply custom id/class/style attributes. |

Additional utilities

• parseEditorHTML: Converts the editor's output to HTML.

Usage example

import { newEditor } from '@stronglify13/editor';

newEditor({
  htmlContainerID: 'editor',
  placeholder: 'Write something...',
  autofocus: true,
});

Advanced configuration

import { BlockTools, InlineTools, newEditor } from '@stronglify13/editor';

const editor = newEditor({
  htmlContainerID: 'editor',
  blockTools: [BlockTools.header, BlockTools.list, BlockTools.embed],
  inlineTools: [InlineTools.bold, InlineTools.link, InlineTools.marker],
  enableInlineToolbar: true,
  minHeight: 400,
  onReady: () => console.log('Editor ready'),
  onChange: (data) => console.log('Editor data', data),
});

• Pass initialData to hydrate the editor with saved OutputData blocks.
• onChange receives the full OutputData; the helper saves only when changes occur.
• Customize blockTools and inlineTools to ship a lighter bundle.

HTML serialization

Use parseEditorHTML to convert Editor.js output into HTML.

import { newEditor, parseEditorHTML } from '@stronglify13/editor';

const editor = newEditor({ htmlContainerID: 'editor' });

async function toHTML() {
  const data = await editor.save();
  const html = parseEditorHTML(data);
  return html;
}

Development playground

• Run yarn dev to launch the Vite-powered playground in src/example.
• Modify blocks or tools in src/plugins and see the changes live.
• yarn build generates production-ready bundles and type definitions.

Compatibility and SSR

• Requires a browser environment; calling newEditor on the server throws an error if document is missing.
• Tested with modern Chromium, Firefox, and Safari versions that support ES modules and contenteditable APIs.
• For frameworks with SSR (Nuxt, Next.js), instantiate the editor only on the client side.

Contributing

• Fork the repository, create a feature branch, and submit a pull request.
• Run quality gates before pushing: yarn lint, yarn format-check, yarn test, and yarn build.
• Keep documentation and examples in src/example aligned with new functionality.
• Open an issue to discuss larger changes before implementation.