werk
Repositories Projects Packages

@facet/editor (1.0.1)

Published 2026-07-26 20:22:41 +02:00 by amelie

Installation

@facet:registry=https://gitlab.amandy.love/api/packages/werk/npm/
npm install @facet/editor@1.0.1
"@facet/editor": "1.0.1"

About this package

Ein adaptiver Editor mit verschiedenen UI-Strategien für unterschiedliche Erfahrungsstufen.

@facet/editor

Ein dependencyless TypeScript-Editor, der sein UI-Layout adaptiv an die gewünschte Darstellung anpasst.

Features

  • Progressive Disclosure: Drei kompatible UI-Modi (senior, medium, advanced).
  • Representation Options: Density, text scale, guidance, toolbar, and preview can be chosen independently from the mode.
  • Strategy Pattern: Saubere Trennung von Logik und UI.
  • Dependencyless: Keine externen Frameworks, reines TypeScript/Web APIs.
  • AI-Optimiert: Umfassende TSDoc-Kommentare und klare API-Oberfläche.

Installation

npm install adaptive-tablet-editor

Schnellstart

import { createAdaptiveEditor } from '@facet/editor';

const container = document.getElementById('editor-container');
const editor = createAdaptiveEditor(container, {
  level: 'medium',
  content: '# Willkommen\n\nBeginne zu schreiben...',
  representation: {
    density: 'comfortable',
    textScale: 'large',
    guidance: 'contextual',
  },
});

editor.setRepresentation({ density: 'compact', guidance: 'minimal' });

Architektur

Der Editor nutzt das Strategy Pattern. Der EditorCore hält den Zustand und delegiert das Rendering an eine UIStrategy.

  • Senior: Fokus auf Barrierefreiheit, große Touch-Targets und begleitende Hinweise.
  • Medium: Klassisches WYSIWYG Tablet-Layout.
  • Advanced: Maximale Kontrolle, Split-View für Markdown, Gestensteuerung.

Themes können das Verhalten über die vom Core gesetzten Attribute steuern:

  • data-editor-audience="assisted|balanced|expert"
  • data-editor-density="comfortable|cozy|compact"
  • data-editor-scale="large|normal|small"
  • data-editor-guidance="always|contextual|minimal"
  • data-editor-toolbar="intent|formatting|split"
  • data-editor-preview="hidden|inline|split"

Entwickelt für Menschen und KI-Assistenten.

Dependencies

Dependencies

ID Version
@facet/field ^1.0.0

Development Dependencies

ID Version
typescript ^6.0.3

Keywords

editor adaptive tablet brutalism strategy-pattern typescript
Details
npm
2026-07-26 20:22:41 +02:00
3
ISC
latest
21 KiB
Assets (1)
editor-1.0.1.tgz 21 KiB
Versions (2) View all
1.0.1 2026-07-26
1.0.0 2026-07-26