carbon/inline-editable

Enhances Neos.Neos:Editable with better placeholder handling and optional inline character counting in the Neos backend

1.1.1 2026-07-01 20:23 UTC

Requires

• neos/neos: ^8.4 || ^9.0

GPL-3.0-or-later

Published on Packagist.org on 2026-07-01 20:23 UTC

README

Enhances Neos.Neos:Editable with better placeholder handling and optional inline character counting in the Neos backend.

Carbon.InlineEditable.mp4

Features

• Dynamic placeholder override based on the configured fallback text
• Optional live character counter in focused editable fields
• Emojis get count as one character 👍🏼
• Visual counter states (ok, warning, error)

Installation

Install the package via Composer:

composer require carbon/inline-editable

Usage

Fallback Placeholder

Use fallback to provide placeholder content when no value exists:

title = Neos.Neos:Editable {
	property = 'headline'
	fallback = ${q(node).property('title')}
}

Character Counter

Enable the counter by setting counter = true:

teaserText = Neos.Neos:Editable {
	property = 'teaserText'
	fallback = 'Enter teaser text'
	counter = true
}

When active, the backend script updates counter values live while editing.

You can also configure warning and error thresholds:

• counterMinWarning: Sets the minimum character count that should still be considered okay. If the current count is less than or equal to this value, the state becomes warning.
• counterMinError: Sets the critical minimum character count. If the current count is less than or equal to this value, the state becomes error.
• counterMaxWarning: Sets the maximum character count before warning. If the current count is greater than this value, the state becomes warning.
• counterMaxError: Sets the critical maximum character count. If the current count is greater than this value, the state becomes error.

Example with thresholds:

teaserText = Neos.Neos:Editable {
	property = 'teaserText'
	fallback = 'Enter teaser text'
	counter = true
	counterMinWarning = 40
	counterMinError = 20
	counterMaxWarning = 180
	counterMaxError = 220
}

State priority is error before warning.

Development

Install frontend dependencies and build backend assets:

pnpm install
pnpm build

Available scripts from package.json:

• pnpm run js bundles Resources/Private/Assets/Backend.ts to Resources/Public/Backend.js
• pnpm run css bundles/minifies Resources/Private/Assets/Backend.pcss to Resources/Public/Backend.css
• pnpm build runs both

License

GPL-3.0-or-later