@vonage/vivid 5.4.0 → 5.6.0

package/lib/rich-text-editor/rte/html-parser.d.ts

@@ -0,0 +1,24 @@
+import { type ParseRule, type TagParseRule } from 'prosemirror-model';
+import { type RteConfig } from './config';
+import type { RteDocument, RteFragment } from './document';
+type ParseRules = {
+    nodes: {
+        [name: string]: TagParseRule[];
+    };
+    marks: {
+        [name: string]: ParseRule[];
+    };
+};
+export type RteHtmlParserOptions = {
+    modifyParseRules?: (rules: ParseRules) => void;
+};
+type ParseOptions = {
+    modifyDom?: (dom: DocumentFragment) => void;
+};
+export declare class RteHtmlParser {
+    constructor(config: RteConfig, options?: RteHtmlParserOptions);
+    parseDocument(html: string, options?: ParseOptions): RteDocument;
+    parseFragment(html: string, options?: ParseOptions): RteFragment;
+    private parseHtml;
+}
+export {};

package/lib/rich-text-editor/rte/html-serializer.d.ts

@@ -0,0 +1,30 @@
+import { type DOMOutputSpec, DOMSerializer, type Mark, type Node, type Schema } from 'prosemirror-model';
+import type { RteConfig, RteConfigImpl } from './config';
+import type { RteDocument, RteFragment } from './document';
+type DomSerializers = {
+    nodes: {
+        [name: string]: (node: Node) => DOMOutputSpec;
+    };
+    marks: {
+        [name: string]: (mark: Mark, inline: boolean) => DOMOutputSpec;
+    };
+};
+export type RteHtmlSerializerOptions = {
+    serializers?: Partial<DomSerializers>;
+};
+type SerializeOptions = {
+    modifyDom?: (dom: DocumentFragment) => void;
+};
+export declare class RteHtmlSerializer {
+    constructor(config: RteConfig, options?: RteHtmlSerializerOptions);
+    serializeDocument(doc: RteDocument, options?: SerializeOptions): string;
+    serializeFragment(fragment: RteFragment, options?: SerializeOptions): string;
+}
+export declare class RteHtmlSerializerImpl {
+    protected readonly config: RteConfigImpl;
+    serializer: DOMSerializer;
+    constructor(config: RteConfigImpl, options?: RteHtmlSerializerOptions);
+    static domSerializersFromSchema(schema: Schema): DomSerializers;
+    serializeFragment(fragment: RteFragment, options?: SerializeOptions): string;
+}
+export {};

package/lib/rich-text-editor/rte/instance.d.ts

@@ -0,0 +1,57 @@
+import { EditorState } from 'prosemirror-state';
+import { Schema } from 'prosemirror-model';
+import { ElementStyles } from '@microsoft/fast-element';
+import { EditorView } from 'prosemirror-view';
+import type { Constructor } from '../../../shared/utils/mixins';
+import type { Locale } from '../../../shared/localization/Locale';
+import { RteConfig, RteConfigImpl } from './config';
+import { type HostState } from './features/internal/core';
+import { RteFeatureImpl } from './feature';
+import type { RteDocument, RteFragment } from './document';
+import type { TextblockAttrs } from './utils/textblock-attrs';
+import { RteHtmlParser } from './html-parser';
+import { RteHtmlSerializer } from './html-serializer';
+export type RteInstanceOptions = {
+    initialDocument?: RteDocument;
+    onChange?: () => void;
+    foreignHtmlParser?: RteHtmlParser;
+    foreignHtmlSerializer?: RteHtmlSerializer;
+};
+export declare class RteInstance {
+    readonly options?: RteInstanceOptions | undefined;
+    constructor(config: RteConfig, options?: RteInstanceOptions | undefined);
+    getDocument(): RteDocument;
+    reset(initialDocument?: RteDocument): void;
+    replaceSelection(content: RteFragment, options?: {
+        cursorPlacement?: 'end' | 'start';
+        selectContent?: boolean;
+    }): void;
+    replaceDocument(newDocument: RteDocument, options?: {
+        cursorPlacement?: 'start' | 'end';
+        selectContent?: boolean;
+    }): void;
+}
+export declare class RteInstanceImpl {
+    readonly options?: RteInstanceOptions | undefined;
+    state: EditorState;
+    readonly config: RteConfigImpl;
+    readonly schema: Schema;
+    readonly textblockAttrs: TextblockAttrs;
+    readonly features: RteFeatureImpl[];
+    readonly styles: ElementStyles;
+    readonly foreignHtmlParser: RteHtmlParser;
+    readonly foreignHtmlSerializer: RteHtmlSerializer;
+    getFeature<T extends RteFeatureImpl>(constr: Constructor<T>): T;
+    constructor(configFacade: RteConfig, options?: RteInstanceOptions | undefined);
+    protected initState(initialDoc?: RteDocument): void;
+    reset(initialDocument?: RteDocument): void;
+    view: EditorView | null;
+    createView(target: HTMLElement): void;
+    destroyViewIfNeeded(): void;
+    createComponent<T>(type: Constructor<T>): T;
+    getLocale(): Locale;
+    get tr(): import("prosemirror-state").Transaction;
+    dispatchTransaction: (tr: any) => EditorState;
+    hostState(): HostState;
+    updateHostState(hostState: HostState | null): void;
+}

package/lib/rich-text-editor/rte/utils/default-textblock.d.ts

@@ -0,0 +1,2 @@
+import type { ContentMatch } from 'prosemirror-model';
+export declare function defaultTextblockForMatch(match: ContentMatch): import("prosemirror-model").NodeType;

package/lib/rich-text-editor/rte/utils/impl.d.ts

@@ -0,0 +1 @@
+export declare const impl: unique symbol;

package/lib/rich-text-editor/rte/utils/textblock-attrs.d.ts

@@ -0,0 +1,29 @@
+import { Node } from 'prosemirror-model';
+export interface TextblockAttrSpec {
+    name: string;
+    default: any;
+    fromDOM: (dom: HTMLElement) => any;
+    toStyles: (node: Node) => string[];
+}
+export declare class TextblockAttrs {
+    private specs;
+    attrs: {
+        [key: string]: {
+            default: any;
+        };
+    };
+    constructor(specs: TextblockAttrSpec[]);
+    fromDOM(dom: HTMLElement): any;
+    getStyle(node: Node): string;
+    getDOMAttrsProperties(node: Node): {
+        style?: undefined;
+    } | {
+        style: string;
+    };
+    getDOMAttrs(node: Node): ({
+        style?: undefined;
+    } | {
+        style: string;
+    })[];
+    extractFromNode(node: Node): any;
+}

package/lib/rich-text-editor/rte/utils/textblock-marks.d.ts

@@ -0,0 +1,10 @@
+export interface TextblockMarkSpec {
+    markName: string;
+    onNodeName?: string;
+}
+export declare class TextblockMarks {
+    private specs;
+    constructor(specs: TextblockMarkSpec[]);
+    getAllowedMarksForNode(nodeName: string): string[];
+    getReferencedNodeNames(): Set<string>;
+}

package/lib/rich-text-editor/rte/utils/ui.d.ts

@@ -0,0 +1,109 @@
+import type { EditorView } from 'prosemirror-view';
+import { MarkType } from 'prosemirror-model';
+import { RteInstanceImpl } from '../instance';
+import { MenuItem } from '../../../menu-item/menu-item';
+import { ListboxOption } from '../../../option/option';
+import { Divider } from '../../../divider/divider';
+import { TextField } from '../../../text-field/text-field';
+type Prop<T> = T | ((ctx: UiCtx) => T);
+type Props<T> = {
+    [P in keyof T]: Prop<T[P]>;
+};
+type EventBinding = [
+    string,
+    unknown,
+    (value: unknown) => (event: Event) => void
+];
+type CtxProps = {
+    popupPlacement: 'top' | 'bottom';
+};
+export declare class UiCtx {
+    readonly view: EditorView;
+    readonly rte: RteInstanceImpl;
+    readonly props: Props<CtxProps>;
+    constructor(view: EditorView, rte: RteInstanceImpl, props: Props<CtxProps>);
+    evalProp<T>(prop: Prop<T>): T;
+    private bindings;
+    bindProp<T>(prop: Prop<T> | undefined, bindFn: (value: T) => void): void;
+    updateBindings(): void;
+    bindToEl<T extends Node>(target: T, props?: Partial<Props<T>>, events?: EventBinding[], children?: Array<Node>): void;
+}
+export declare const createDiv: (ctx: UiCtx, props: {
+    className?: string;
+    slot?: string;
+    children: Array<Node>;
+}) => HTMLDivElement;
+export declare const createAnchor: (ctx: UiCtx, props: {
+    href: Prop<string>;
+    target?: string;
+    rel?: string;
+    className?: string;
+    children: Array<Node>;
+}) => HTMLAnchorElement;
+export declare const createOptionalTooltip: (ctx: UiCtx, props: {
+    enabled: Prop<boolean>;
+    label: Prop<string>;
+    anchor: HTMLElement;
+    slot?: string;
+}) => HTMLDivElement;
+export declare const createButton: (ctx: UiCtx, props: {
+    variant?: Prop<'toolbar' | 'popover' | 'popover-primary'>;
+    label: Prop<string>;
+    icon?: Prop<string>;
+    noTooltip?: boolean;
+    autofocus?: Prop<boolean>;
+    slot?: string;
+    active?: Prop<boolean>;
+    disabled?: Prop<boolean>;
+    connotation?: Prop<'alert'>;
+    onClick?: () => void | boolean;
+}) => HTMLDivElement;
+export declare const createMenu: (ctx: UiCtx, props: {
+    label: Prop<string>;
+    trigger: HTMLElement;
+    children: Array<HTMLElement>;
+}) => DocumentFragment;
+export declare const createMenuItem: (ctx: UiCtx, props: {
+    text: Prop<string>;
+    checked: Prop<boolean>;
+    disabled?: Prop<boolean>;
+    onSelect: () => void;
+}) => MenuItem;
+export declare const createButtonGroup: (ctx: UiCtx, props: {
+    children: Array<Node>;
+}) => HTMLDivElement;
+export declare const createMarkToggle: (ctx: UiCtx, props: {
+    label: Prop<string>;
+    icon: string;
+    markType: MarkType;
+}) => HTMLDivElement;
+export declare const createOption: (ctx: UiCtx, props: {
+    text: Prop<string>;
+    value: string;
+    disabled?: Prop<boolean>;
+}) => ListboxOption;
+export declare const createSelect: (ctx: UiCtx, props: {
+    label: Prop<string>;
+    value: Prop<string>;
+    children: Array<HTMLElement>;
+    onSelect: (value: string) => void;
+}) => HTMLDivElement;
+export declare const createDivider: (ctx: UiCtx) => Divider;
+export declare const createTextField: (ctx: UiCtx, props: {
+    label: Prop<string>;
+    value: Prop<string>;
+    placeholder?: Prop<string> | undefined;
+    slot?: string | undefined;
+    autofocus?: boolean | undefined;
+    type?: "url" | undefined;
+    onInput?: ((value: string) => void) | undefined;
+}) => TextField;
+export declare const createText: (ctx: UiCtx, props: {
+    text: Prop<string>;
+}) => Text;
+export declare const createSingleSlot: (ctx: UiCtx, props: {
+    name: string;
+    assignedProps: Record<string, Prop<any>>;
+    assignedEvents: Record<string, (e: Event) => void>;
+}) => HTMLSlotElement;
+export {};

package/lib/simple-color-picker/simple-color-picker.d.ts

@@ -7,10 +7,10 @@ declare const SimpleColorPicker_base: {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#9@#updateAnchorEl": () => void;
-        "__#9@#observer"?: MutationObserver | undefined;
-        "__#9@#observeMissingAnchor": (anchorId: string) => void;
-        "__#9@#cleanupObserverIfNeeded": () => void;
+        "__#10@#updateAnchorEl": () => void;
+        "__#10@#observer"?: MutationObserver | undefined;
+        "__#10@#observeMissingAnchor": (anchorId: string) => void;
+        "__#10@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
@@ -392,6 +392,7 @@ declare const SimpleColorPicker_base: {
         swatches: import("../../shared/color-picker").ColorSwatch[];
         connectedCallback(): void;
         _canvasColor: string;
+        readonly _computedCanvasColor: string;
         _refreshCanvasColor(): void;
         _applyContrastClass(color: string, threshold?: number): boolean;
         _getRowLength(): number;
@@ -402,7 +403,7 @@ declare const SimpleColorPicker_base: {
         _getGridCells(): HTMLElement[];
         _handleCellKeydown(event: KeyboardEvent, value: string, index: number, isSaveCell?: boolean | undefined): boolean;
         _focusSwatchByIndex(index: number): void;
-        _renderColorSwatch(iconTag: import("@microsoft/fast-element").InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<import("../../shared/color-picker").ColorSwatch, any>;
+        _renderColorSwatch(iconTag: import("@microsoft/fast-element").InlineTemplateDirective, tooltipTag: import("@microsoft/fast-element").InlineTemplateDirective): import("@microsoft/fast-element").ViewTemplate<import("../../shared/color-picker").ColorSwatch, any>;
         readonly locale: import("../../shared/localization/Locale").Locale;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;

package/lib/text-area/text-area.d.ts

@@ -816,7 +816,7 @@ declare const TextArea_base: {
         maxlength: number;
         charCount: boolean;
         charCountRemaining: HTMLSpanElement;
-        "__#5@#charCountTimeout": NodeJS.Timeout | null;
+        "__#6@#charCountTimeout": NodeJS.Timeout | null;
         _charCountDescribedBy: string;
         _renderCharCountRemaining: () => void;
         _updateCharCountRemaining: () => void;

package/lib/text-field/text-field.d.ts

@@ -824,7 +824,7 @@ declare const TextField_base: {
         maxlength: number;
         charCount: boolean;
         charCountRemaining: HTMLSpanElement;
-        "__#5@#charCountTimeout": NodeJS.Timeout | null;
+        "__#6@#charCountTimeout": NodeJS.Timeout | null;
         _charCountDescribedBy: string;
         _renderCharCountRemaining: () => void;
         _updateCharCountRemaining: () => void;

package/lib/time-picker/time-picker.d.ts

@@ -13,12 +13,12 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#23@#clockChangeHandler": {
+    "__#25@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#23@#clockChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#23@#startObservingClockChanges"(): void;
-    "__#23@#stopObservingClockChanges"(): void;
+    "__#25@#clockChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#25@#startObservingClockChanges"(): void;
+    "__#25@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -40,20 +40,20 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _textFieldEl: import("../components").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../components").VwcButtonElement;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#22@#onFocusIn": () => void;
+    "__#22@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#22@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#22@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#22@#startObservingLocaleChanges"(): void;
+    "__#22@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#22@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#22@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -893,20 +893,20 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _pickerButtonEl: import("../components").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#20@#onFocusIn": () => void;
-    "__#20@#onFocusOut": () => void;
+    "__#22@#onFocusIn": () => void;
+    "__#22@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#20@#localeChangeHandler": {
+    "__#22@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
-    "__#20@#startObservingLocaleChanges"(): void;
-    "__#20@#stopObservingLocaleChanges"(): void;
+    "__#22@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#22@#startObservingLocaleChanges"(): void;
+    "__#22@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#20@#openPopupIfPossible"(): void;
+    "__#22@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#22@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;

package/lib/toggletip/toggletip.d.ts

@@ -384,10 +384,10 @@ declare const Toggletip_base: {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#9@#updateAnchorEl": () => void;
-        "__#9@#observer"?: MutationObserver | undefined;
-        "__#9@#observeMissingAnchor": (anchorId: string) => void;
-        "__#9@#cleanupObserverIfNeeded": () => void;
+        "__#10@#updateAnchorEl": () => void;
+        "__#10@#observer"?: MutationObserver | undefined;
+        "__#10@#observeMissingAnchor": (anchorId: string) => void;
+        "__#10@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;

package/lib/tooltip/tooltip.d.ts

@@ -7,10 +7,10 @@ declare const Tooltip_base: {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#9@#updateAnchorEl": () => void;
-        "__#9@#observer"?: MutationObserver | undefined;
-        "__#9@#observeMissingAnchor": (anchorId: string) => void;
-        "__#9@#cleanupObserverIfNeeded": () => void;
+        "__#10@#updateAnchorEl": () => void;
+        "__#10@#observer"?: MutationObserver | undefined;
+        "__#10@#observeMissingAnchor": (anchorId: string) => void;
+        "__#10@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;

package/locales/de-DE.cjs

@@ -406,14 +406,40 @@ const deDE = {
     )
   },
   richTextEditor: {
-    textBlockType: "Textblocktyp",
+    paragraphStyles: "Absatzstile",
     textSize: "Textgröße",
     bold: "Fett",
-    italics: "Kursiv",
+    italic: "Kursiv",
     underline: "Unterstrichen",
     strikethrough: "Durchgestrichen",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Dateien hierher ziehen & ablegen"
+    textColor: "Textfarbe",
+    undo: "Rückgängig",
+    redo: "Wiederholen",
+    bulletList: "Aufzählung",
+    numberedList: "Nummerierung",
+    alignment: "Ausrichtung",
+    alignments: {
+      left: "Linksbündig",
+      center: "Zentriert",
+      right: "Rechtsbündig"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Text eingeben, um Link zu erstellen",
+    linkUrlPlaceholder: "Link-URL einfügen",
+    cancel: "Abbrechen",
+    apply: "Anwenden",
+    close: "Schließen",
+    edit: "Bearbeiten",
+    delete: "Löschen",
+    clickHere: "Hier klicken",
+    imageSizes: {
+      small: "Klein",
+      fit: "Anpassen",
+      original: "Originalgröße"
+    }
   },
   button: {
     pendingLabel: "Laden..."
@@ -444,7 +470,19 @@ const deDE = {
   dataGrid: {
     cell: {
       selected: "Ausgewählt",
-      button: "(Schaltfläche)"
+      button: "(Schaltfläche)",
+      sortStatus: {
+        ascending: "Aufsteigend sortiert.",
+        descending: "Absteigend sortiert.",
+        none: "Nicht sortiert.",
+        other: "Benutzerdefinierte Sortierung aktiv."
+      },
+      sortInstruction: {
+        ascending: "Zum Absteigend sortieren klicken.",
+        descending: "Zum Entfernen der Sortierung klicken.",
+        none: "Zum Aufsteigend sortieren klicken.",
+        other: "Zum Zurücksetzen der Sortierung klicken."
+      }
     }
   },
   pagination: {
@@ -482,12 +520,25 @@ const deDE = {
   },
   colorPicker: {
     popupLabel: "Farbwähler",
-    swatchesLabel: "Gespeicherte Farben:",
-    pickerButtonLabel: "Farbwähler öffnen",
+    swatchesLabel: "Gespeicherte Farben",
+    pickerButtonLabel: "Farbwähler",
+    hexInputLabel: "HEX-Farbcode",
     saveButtonLabel: "Aktuelle Farbe speichern",
     closeButtonLabel: "Farbwähler schließen",
     copyButtonLabel: "Farbe in die Zwischenablage kopieren",
-    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} in die Zwischenablage kopiert.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} ausgewählt.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} von ${limit} Farben gespeichert.`
+    )
   }
 };
 

package/locales/de-DE.js

@@ -404,14 +404,40 @@ const deDE = {
     )
   },
   richTextEditor: {
-    textBlockType: "Textblocktyp",
+    paragraphStyles: "Absatzstile",
     textSize: "Textgröße",
     bold: "Fett",
-    italics: "Kursiv",
+    italic: "Kursiv",
     underline: "Unterstrichen",
     strikethrough: "Durchgestrichen",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Dateien hierher ziehen & ablegen"
+    textColor: "Textfarbe",
+    undo: "Rückgängig",
+    redo: "Wiederholen",
+    bulletList: "Aufzählung",
+    numberedList: "Nummerierung",
+    alignment: "Ausrichtung",
+    alignments: {
+      left: "Linksbündig",
+      center: "Zentriert",
+      right: "Rechtsbündig"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Text eingeben, um Link zu erstellen",
+    linkUrlPlaceholder: "Link-URL einfügen",
+    cancel: "Abbrechen",
+    apply: "Anwenden",
+    close: "Schließen",
+    edit: "Bearbeiten",
+    delete: "Löschen",
+    clickHere: "Hier klicken",
+    imageSizes: {
+      small: "Klein",
+      fit: "Anpassen",
+      original: "Originalgröße"
+    }
   },
   button: {
     pendingLabel: "Laden..."
@@ -442,7 +468,19 @@ const deDE = {
   dataGrid: {
     cell: {
       selected: "Ausgewählt",
-      button: "(Schaltfläche)"
+      button: "(Schaltfläche)",
+      sortStatus: {
+        ascending: "Aufsteigend sortiert.",
+        descending: "Absteigend sortiert.",
+        none: "Nicht sortiert.",
+        other: "Benutzerdefinierte Sortierung aktiv."
+      },
+      sortInstruction: {
+        ascending: "Zum Absteigend sortieren klicken.",
+        descending: "Zum Entfernen der Sortierung klicken.",
+        none: "Zum Aufsteigend sortieren klicken.",
+        other: "Zum Zurücksetzen der Sortierung klicken."
+      }
     }
   },
   pagination: {
@@ -480,12 +518,25 @@ const deDE = {
   },
   colorPicker: {
     popupLabel: "Farbwähler",
-    swatchesLabel: "Gespeicherte Farben:",
-    pickerButtonLabel: "Farbwähler öffnen",
+    swatchesLabel: "Gespeicherte Farben",
+    pickerButtonLabel: "Farbwähler",
+    hexInputLabel: "HEX-Farbcode",
     saveButtonLabel: "Aktuelle Farbe speichern",
     closeButtonLabel: "Farbwähler schließen",
     copyButtonLabel: "Farbe in die Zwischenablage kopieren",
-    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut.",
+    copySuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} in die Zwischenablage kopiert.`
+    ),
+    selectionSuccessMessage: (
+      /* istanbul ignore next */
+      (value) => `Farbe ${value} ausgewählt.`
+    ),
+    maxSwatchesMessage: (
+      /* istanbul ignore next */
+      (total, limit) => `${total} von ${limit} Farben gespeichert.`
+    )
   }
 };