README

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

Features

• Dynamic placeholder override based on the configured fallback text
• Optional live character counter in focused editable fields
• Visual counter states (ok, warning, error)

Requirements

• neos/neos ^8.3 || ^9.0
• carbon/includeassets ^7.0

Installation

Install the package via Composer:

composer require carbon/inline-editable

The package auto-includes its Fusion and backend assets via Configuration/Settings.yaml.

Usage

This package extends Neos.Neos:Editable in Resources/Private/Fusion/Root.fusion.

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.mts to Resources/Public/Modules/Backend.mjs
• pnpm run css bundles/minifies Resources/Private/Assets/Backend.pcss to Resources/Public/Styles/Backend.css
• pnpm build runs both

License

GPL-3.0-or-later