nss_libs - NssSimpleTextEditor

A section-based rich text editor with headline/text types, alignment options, and validation. NUI

Getting Started

NssSimpleTextEditor provides a lightweight editor where users can create multiple text sections, each with a type (headline or text) and alignment (left, center, right). Sections can be added, removed, and reordered via toolbar buttons.

import {NssSimpleTextEditor} from "nui://nss_libs/ui/NssSimpleTextEditor/NssSimpleTextEditor.js";

const editor = new NssSimpleTextEditor(document.getElementById('editor-container'));
editor.setPlaceholderText('Enter your text here...').start();

Constructor

new NssSimpleTextEditor(target_el)

Creates a new text editor instance bound to a container element.

Parameters

• target_el : HTMLElement — The parent element the editor will be rendered into.

Example

const editor = new NssSimpleTextEditor(document.getElementById('editor-wrapper'));

Methods

start()

Initializes the editor DOM, creates a default headline section and a text section, and renders into the target element.

Syntax

editor.start()

Parameters

None.

Return Value

Returns undefined.

Example

const editor = new NssSimpleTextEditor(container_el);
editor.setPlaceholderText('Write something...').start();

---

setPlaceholderText(text)

Sets the placeholder text shown in empty sections.

Syntax

editor.setPlaceholderText(text)

Parameters

• text : string — The placeholder text.

Return Value

Returns NssSimpleTextEditor — the instance for chaining.

Example

editor.setPlaceholderText('Enter your message...');

---

getPlaceholderText()

Returns the current placeholder text.

Syntax

editor.getPlaceholderText()

Parameters

None.

Return Value

Returns string — the placeholder text.

Example

const placeholder = editor.getPlaceholderText();

---

addSection(parent_section)

Adds a new text section to the editor.

Syntax

editor.addSection(parent_section)

Parameters

• parent_section : NssSimpleTextEditorSection (Optional, default: undefined) — If provided, the new section is inserted after this section. Otherwise appended at the end.

Return Value

Returns undefined.

Example

// Add a section at the end
editor.addSection();

---

removeSection(section)

Removes a section from the editor and destroys its DOM.

Syntax

editor.removeSection(section)

Parameters

• section : NssSimpleTextEditorSection — The section instance to remove.

Return Value

Returns undefined.

Example

// Sections handle their own removal via toolbar buttons internally

---

getSectionsComputed()

Returns the content of all sections as a plain-object array, ready for serialization.

Syntax

editor.getSectionsComputed()

Parameters

None.

Return Value

Returns Array<Object> — an array of objects with the shape:

{
    type: 'headline' | 'text',
    text: 'The section content',
    align: 'left' | 'center' | 'right'
}

Example

const sections = editor.getSectionsComputed();
// [
//   { type: 'headline', text: 'My Title', align: 'center' },
//   { type: 'text', text: 'Some content here.', align: 'left' }
// ]
nss_client.post('save', {sections: sections});

---

isErrorHandlingSuccessful()

Validates all sections. Sections with empty text are marked with an error state (shake animation + error CSS class).

Syntax

editor.isErrorHandlingSuccessful()

Parameters

None.

Return Value

Returns boolean — true if all sections are valid, false if any section has empty text.

Example

function save() {
    if (!editor.isErrorHandlingSuccessful()) {
        return; // validation failed — error states are shown automatically
    }

    const sections = editor.getSectionsComputed();
    nss_client.post('save_content', {sections: sections});
}

Events / Callbacks

NssSimpleTextEditor does not expose external callbacks. Interaction is handled internally:

• Tab key on the last section automatically creates a new section.
• Toolbar buttons per section: toggle type (headline ↔ text), toggle alignment (left → center → right), remove section, add section after.
• Remove button is disabled when only one section remains.

CSS

Classes

Class	Description
.nss-simple-text-editor__section	A single editable section container.
.nss-simple-text-editor__section--headline	Section in headline mode (larger font).
.nss-simple-text-editor__section--text	Section in text mode (normal font).
.nss-simple-text-editor__section--align-left	Left-aligned text.
.nss-simple-text-editor__section--align-center	Center-aligned text.
.nss-simple-text-editor__section--align-right	Right-aligned text.
.nss-simple-text-editor__section--error	Error state with shake animation.
.nss-simple-text-editor__section-options	Floating toolbar (visible on hover).
.nss-simple-text-editor__section-footer	Floating footer with add-section button.
.nss-simple-text-editor__section-text	The contenteditable text area.
.nss-simple-text-editor__btn	Generic toolbar button.
.nss-simple-text-editor__section-text-btn	Switch-to-text-type button.
.nss-simple-text-editor__section-headline-btn	Switch-to-headline-type button.
.nss-simple-text-editor__section-remove-btn--disabled	Disabled state for the remove button.

Custom Properties

Property	Scope	Default	Description
--translateX	__section-options	0	Horizontal offset of the options toolbar.
--translateY	__section-options	-75%	Vertical offset of the options toolbar.
--translateX	__section-footer	-50%	Horizontal offset of the footer.
--translateY	__section-footer	50%	Vertical offset of the footer.

Animations

Keyframe	Description
nss-simple-text-editor-anim__shake	Horizontal shake animation for error state (0.82s).

Dependencies

• NssUiComponent — base class (which initializes NssResponsive).

Things to Know

• Sections use contenteditable divs, not <textarea> or <input> elements.
• The placeholder text is implemented manually — it clears on focus and restores on blur if the section is empty.
• getSectionsComputed() returns plain objects (not class instances), suitable for direct serialization via JSON.stringify or sending via NssClient.post().
• Tab on the last section creates a new section — this only works on the last section in the list.
• The active type/alignment button in the toolbar is visually disabled (dimmed) to indicate the current state.