@dynamicforms/vuetify-inputs 0.9.1 → 0.10.0

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import { Action as Action_2 } from '@dynamicforms/vue-forms';
 import { ActionValue } from '@dynamicforms/vue-forms';
+import { AllowedComponentProps } from 'vue';
 import { App } from 'vue';
 import { ClassTypes } from '@dynamicforms/vue-forms';
 import { ClassValue } from '../../node_modules/vuetify/lib/composables/component';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } from 'vue';
@@ -11,7 +14,6 @@ import { Day } from 'date-fns';
 import { default as default_2 } from '@dynamicforms/vue-forms';
 import { DefaultInputSlot } from 'vuetify/lib/components/VField/VField';
 import { DefineComponent } from 'vue';
-import { Editor } from '@ckeditor/ckeditor5-core';
 import { Era } from 'date-fns';
 import { FirstWeekContainsDate } from 'date-fns';
 import { FormatDistanceFn } from 'date-fns';
@@ -50,6 +52,7 @@ import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
 import { VListItem } from 'vuetify/components/VList';
 import { VMenu } from 'vuetify/components/VMenu';
+import { VNodeProps } from 'vue';
 import { VNumberInput } from 'vuetify/components/VNumberInput';
 import { VProgressLinear } from 'vuetify/components/VProgressLinear';
 import { VRow } from 'vuetify/components/VGrid';
@@ -80,25 +83,17 @@ fetchChoices: SelectFetchChoices;
 dfSelectRef: unknown;
 }, any>;
 
-declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_2: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 blur: () => any;
 "update:modelValue": (value: any) => any;
 "click:clear": () => any;
-}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
 onBlur?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 "onClick:clear"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare type __VLS_Props = {
-    data?: DefaultInputSlot & {
-        label?: string | MdString;
-    };
-    label: Label;
-    allowWrap?: boolean;
-};
-
-declare type __VLS_Props_2 = BaseProps & {
+declare type __VLS_Props = BaseProps & {
     loading?: boolean;
 };
 
@@ -210,7 +205,14 @@ export declare class Action extends Action_2<ActionBreakpointOptions> {
     static noAction(data?: Partial<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
 }
 
-export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions>;
+export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions, ActionBreakpointRenderOptions>;
+
+/**
+ * What one breakpoint of an action's value may state: the members that describe how the action is drawn.
+ * `name`, `defaultConfirm` and `defaultReject` are not among them - which key a modal resolves with, and which
+ * key fires the action, are properties of the action itself and do not depend on the width of the screen.
+ */
+export declare type ActionBreakpointRenderOptions = Omit<ActionRenderOptions, 'name' | 'defaultConfirm' | 'defaultReject'>;
 
 /**
  * DisplayMode enum provides an enumeration for supported ways of rendering a particular object in the DOM
@@ -290,12 +292,12 @@ export declare interface BaseProps<T = any> {
 
 export declare type BreakpointNames = (typeof responsiveBreakpoints)[number];
 
-export declare type BreakpointsJSON<T extends Record<string, any>> = T & Partial<Record<BreakpointNames, T>>;
-
-export declare const ckEditorLanguage: {
-    language: string;
-    translations: undefined;
-};
+/**
+ * A set of options and the per-breakpoint sets that restate parts of it. `B` is what a breakpoint may state,
+ * and defaults to the whole of `T`; a subclass narrows it where a member belongs to the object as a whole rather
+ * than to one screen width.
+ */
+export declare type BreakpointsJSON<T extends Record<string, any>, B extends Record<string, any> = T> = T & Partial<Record<BreakpointNames, B>>;
 
 export declare const DateTimeLocaleConfig: {
     dateTimeLocale: Ref<{
@@ -478,6 +480,8 @@ export declare namespace DfInputComponentProps {
         DfDateTimeProps,
         DfFileProps,
         DfInputProps,
+        DfInputHintProps,
+        DfLabelProps,
         DfRtfEditorProps,
         DfSelectProps,
         DfTextAreaProps
@@ -493,19 +497,239 @@ export declare namespace DfInputComponents {
         DfFile,
         DfInput,
         DfInputHint,
+        DfLabel,
         DfRtfEditor,
         DfSelect,
         DfTextArea
     }
 }
 
-export declare const DfInputHint: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+/**
+ * Every component this library draws with, keyed by the tag a layout names it by.
+ *
+ * A rendering layer that resolves a component by name out of a map - `@dynamicforms/vuetify-modal-form-kit`'s
+ * `<component-render>` is one - is handed this instead of keeping a list of its own, which would have to be
+ * extended whenever this package gains a component and would silently render nothing until it was.
+ *
+ * The keys are the kebab-case of the export names, so a tag names the same component whether it is looked up
+ * here or left to Vue's own resolver after `DynamicFormsInputs` has registered the components globally.
+ */
+export declare const dfInputComponentsByTag: {
+    readonly 'df-actions': DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
+    buttonSize: string | number;
+    showAsGroup: "no" | "grouped" | "grouped-no-borders";
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-checkbox': DefineComponent<DfCheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfCheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-color': DefineComponent<DfColorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfColorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-date-time': DefineComponent<DfDateTimeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfDateTimeProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    inputType: "datetime" | "date" | "time";
+    displayFormatDate: string;
+    displayFormatTime: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-file': DefineComponent<DfFileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfFileProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-input': DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    inputType: "text" | "password" | "email" | "url" | "number";
+    precision: number | null;
+    step: number;
+    min: number;
+    max: number;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-input-hint': DefineComponent<DfInputHintProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfInputHintProps> & Readonly<{}>, {
+    errors: string | ValidationError[];
+    message: string | ValidationError[];
+    errorClasses: ClassTypes;
+    messageClasses: ClassTypes;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-label': DefineComponent<DfLabelProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+    readonly 'df-rtf-editor': DefineComponent<DfRtfEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfRtfEditorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    minHeight: string;
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {
+    $editor: CreateComponentPublicInstanceWithMixins<Readonly<{
+    modelValue?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    }> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    }, PublicProps, {
+    minHeight: string;
+    modelValue: string;
+    disabled: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+    }, Readonly<{
+    modelValue?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    }> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+    minHeight: string;
+    modelValue: string;
+    disabled: boolean;
+    }> | null;
+    }, any>;
+    readonly 'df-select': {
+        new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<DfSelectProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        "onClick:clear"?: (() => any) | undefined;
+        "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+        }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: any) => any;
+        "click:clear": () => any;
+        "update:modelValueDisplay": (value: SelectChoice[]) => any;
+        }, PublicProps, {
+        enabled: boolean;
+        clearable: boolean;
+        allowNull: boolean;
+        choices: SelectChoice[];
+        multiple: boolean;
+        allowTags: boolean;
+        fetchChoices: SelectFetchChoices;
+        }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        dfSelectRef: unknown;
+        }, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+        }, Readonly<DfSelectProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        "onClick:clear"?: (() => any) | undefined;
+        "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+        enabled: boolean;
+        clearable: boolean;
+        allowNull: boolean;
+        choices: SelectChoice[];
+        multiple: boolean;
+        allowTags: boolean;
+        fetchChoices: SelectFetchChoices;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & ComponentOptionsBase<Readonly<DfSelectProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    "update:modelValueDisplay": (value: SelectChoice[]) => any;
+    }, string, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    choices: SelectChoice[];
+    multiple: boolean;
+    allowTags: boolean;
+    fetchChoices: SelectFetchChoices;
+    }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            'append-inner'?: (props: any) => any;
+            'prepend-inner'?: (props: any) => any;
+        }> & {
+            'append-inner'?: (props: any) => any;
+            'prepend-inner'?: (props: any) => any;
+        };
+    });
+    readonly 'df-text-area': DefineComponent<DfTextAreaProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfTextAreaProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    rows: number;
+    maxRows: number;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+};
+
+/** The tags {@link dfInputComponentsByTag} answers for. */
+export declare type DfInputComponentTag = keyof typeof dfInputComponentsByTag;
+
+export declare const DfInputHint: DefineComponent<DfInputHintProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfInputHintProps> & Readonly<{}>, {
 errors: string | ValidationError[];
 message: string | ValidationError[];
 errorClasses: ClassTypes;
 messageClasses: ClassTypes;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
+declare interface DfInputHintProps {
+    /** The errors to render. Rendered in place of {@link message} whenever there is one. */
+    errors?: string | ValidationError[];
+    /** The message to render, shown while there is no error. */
+    message?: string | ValidationError[];
+    /** Classes for the rendered errors. Defaults to `text-error`. */
+    errorClasses?: ClassTypes;
+    /** Classes for the rendered message. Defaults to no class. */
+    messageClasses?: ClassTypes;
+}
+
 declare interface DfInputProps extends BaseProps {
     inputType?: 'text' | 'password' | 'email' | 'url' | 'number';
     precision?: number | null;
@@ -514,7 +738,18 @@ declare interface DfInputProps extends BaseProps {
     max?: number;
 }
 
-export declare const DfLabel: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const DfLabel: DefineComponent<DfLabelProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare interface DfLabelProps {
+    /** The slot data Vuetify hands a `#label` slot. Where it is given, its `label` is what is rendered. */
+    data?: DefaultInputSlot & {
+        label?: string | MdString;
+    };
+    /** The label to render where no {@link data} is given: its text, and the icon it carries. */
+    label: Label;
+    /** Whether the label wraps over several lines. It is rendered on one line by default. */
+    allowWrap?: boolean;
+}
 
 export declare const DfRtfEditor: DefineComponent<DfRtfEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: any) => any;
@@ -533,17 +768,13 @@ minHeight?: string;
 disabled?: boolean;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-onEditorReady: (editorReady: Editor) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
 }, PublicProps, {
 minHeight: string;
 modelValue: string;
 disabled: boolean;
-}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-editorElement: HTMLDivElement;
-}, HTMLDivElement, ComponentProvideOptions, {
+}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
 P: {};
 B: {};
 D: {};
@@ -556,9 +787,7 @@ minHeight?: string;
 disabled?: boolean;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-onEditorReady: (editorReady: Editor) => void;
-}, {}, {}, {}, {
+}>, {}, {}, {}, {}, {
 minHeight: string;
 modelValue: string;
 disabled: boolean;
@@ -660,13 +889,6 @@ export declare class Label {
     constructor(text: string, icon?: string | undefined, iconComponent?: string);
 }
 
-declare interface Props {
-    errors?: string | ValidationError[];
-    message?: string | ValidationError[];
-    errorClasses?: ClassTypes;
-    messageClasses?: ClassTypes;
-}
-
 export declare class ResponsiveActionRenderOptions extends ResponsiveRenderOptions<ActionRenderOptions> {
     protected cleanBreakpoint(bp?: ActionRenderOptions, defaultIfEmpty?: boolean): ActionRenderOptions | null;
 }
@@ -681,8 +903,7 @@ export declare abstract class ResponsiveRenderOptions<T extends Record<string, a
      * Normalizes one breakpoint's options. The merge reads `null` and `undefined` as "this breakpoint says
      * nothing about that field", so a field the breakpoint does not state has to come back as `undefined` rather
      * than as an empty value - an empty array or string returned here reads as a breakpoint deliberately emptying
-     * what it inherited. The value returned for `defaultIfEmpty` carries every field the class merges, since the
-     * field set is taken from it.
+     * what it inherited.
      */
     protected abstract cleanBreakpoint(bp?: T, defaultIfEmpty?: boolean): T | null;
 }
@@ -695,8 +916,6 @@ export declare interface SelectChoice {
 
 export declare type SelectFetchChoices<T1 = any, T2 = any> = (queryValue?: T1, idValue?: T2) => Promise<SelectChoice[]>;
 
-export declare function setCkEditorLanguage(language: string, translations: any): void;
-
 declare type ShowAsGroup = 'no' | 'grouped' | 'grouped-no-borders';
 
 export declare const translatableStrings: {
@@ -720,6 +939,43 @@ export declare const translatableStrings: {
     Spoiler: string;
     CodeDark: string;
     CodeBright: string;
+    Undo: string;
+    Redo: string;
+    SelectAll: string;
+    Bold: string;
+    Italic: string;
+    HorizontalLine: string;
+    Blockquote: string;
+    BulletedList: string;
+    NumberedList: string;
+    Outdent: string;
+    Indent: string;
+    AlignLeft: string;
+    AlignCenter: string;
+    AlignRight: string;
+    AlignJustify: string;
+    Link: string;
+    LinkUrl: string;
+    LinkApply: string;
+    LinkRemove: string;
+    Image: string;
+    ImageUrl: string;
+    ImageUpload: string;
+    ImageInsert: string;
+    Table: string;
+    TableInsert: string;
+    TableAddRowAbove: string;
+    TableAddRowBelow: string;
+    TableDeleteRow: string;
+    TableAddColumnBefore: string;
+    TableAddColumnAfter: string;
+    TableDeleteColumn: string;
+    TableToggleHeaderRow: string;
+    TableDeleteTable: string;
+    Style: string;
+    MediaEmbed: string;
+    MediaEmbedUrl: string;
+    MediaEmbedInsert: string;
 };
 
 export declare function translateStrings(translationCallback: (s: string) => string): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.9.1",
+  "version": "0.10.0",
   "type": "module",
   "description": "Vuetify input components with guaranteed visual consistency across all form fields — unified density/variant system, globally configurable, with inline mode for table cells. Built for @dynamicforms/vue-forms.",
   "author": "Jure Erznožnik",
@@ -24,6 +24,7 @@
   "scripts": {
     "build": "vite build",
     "test": "vitest run --coverage",
+    "test:e2e": "playwright test",
     "lint": "eslint src --fix && vue-tsc --noEmit",
     "lint:ci": "eslint src && vue-tsc --noEmit",
     "docs:dev": "npm run docs:dev -w docs",
@@ -55,10 +56,20 @@
     "url": "https://github.com/dynamicforms/vuetify-inputs/issues"
   },
   "peerDependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.0.0",
     "@dynamicforms/vue-forms": "^0.17.0",
     "@mdi/font": "^7.4.47",
-    "ckeditor5": "^43.0.0",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-link": "^3.30.2",
+    "@tiptap/extension-placeholder": "^3.30.2",
+    "@tiptap/extension-table": "^3.30.2",
+    "@tiptap/extension-table-cell": "^3.30.2",
+    "@tiptap/extension-table-header": "^3.30.2",
+    "@tiptap/extension-table-row": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/pm": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
+    "@tiptap/vue-3": "^3.30.2",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.12",
     "vitepress-plugin-crosslinks": "^1.0.0",
@@ -68,14 +79,15 @@
     "vuetify": "^3.9"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it-attrs": "^4.1.3",
-    "@types/node": "^24",
+    "@types/node": "^26",
     "@vitejs/plugin-vue": "^6",
     "@vitest/coverage-v8": "^3",
     "@vue/test-utils": "^2.2.4",
     "@vue/tsconfig": "^0.7.0",
-    "eslint-config-velis": "^2.0.12",
+    "eslint-config-velis": "^3",
     "jsdom": "^26.0.0",
     "markdown-it-attrs": "^4.3.1",
     "rollup-plugin-visualizer": "^5.14.0",
@@ -85,5 +97,10 @@
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^3",
     "vue-tsc": "^2"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.6.0": true,
+    "esbuild@0.28.2": true,
+    "unrs-resolver@1.12.2": true
   }
 }

package/readme.md

@@ -66,10 +66,9 @@ consistent appearance.
 - **Selection**: static choices or an async `fetchChoices`, single or multiple, chips with icons, free values with
   `allowTags`
 - **Uploads**: a `FileComms` object with upload progress, delete and a periodic touch
-- **Rich text**: a configured CKEditor 5 inside the same field frame as every other input
-- **Localisable**: `translateStrings()` replaces the library's own strings, `setCkEditorLanguage()` sets the RTF
-  editor's interface language, and `DateTimeLocaleConfig` sets the date-fns locale dates are formatted and parsed
-  with
+- **Rich text**: TipTap with a Vuetify toolbar, inside the same field frame as every other input
+- **Localisable**: `translateStrings()` replaces the library's own strings, including every RTF editor toolbar
+  label, and `DateTimeLocaleConfig` sets the date-fns locale dates are formatted and parsed with
 - **TypeScript**: every component's props are an exported interface, and the definitions ship with the build
 
 ## Installation