diff --git a/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts b/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts
index 1541105a..6ca0e493 100644
--- a/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts
+++ b/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts
@@ -1,5 +1,5 @@
 import { DcWorkflow } from '../definition/dc-workflow';
-import { Component, computed, effect, inject, input, linkedSignal, signal } from '@angular/core';
+import { Component, computed, effect, inject, input, linkedSignal, model, signal } from '@angular/core';
 import { DcWorkflowModel, DcWorkflowSortOption } from '../models/dc-workflow-model';
 import { XtCompositeComponent, XtMessageHandler, XtResolverService } from 'xt-components';
 import {
@@ -56,6 +56,46 @@ export class AbstractDcWorkflow<T extends ManagedData=ManagedData> extends XtCom
     return this.config().entity;
   });
 
+  /** Search string used to filter the displayed items (case-insensitive substring match). */
+  search = model<string>('');
+
+  /**
+   * Updates the search string from a search box input event.
+   * @protected
+   */
+  protected onSearchInput(event: Event): void {
+    this.search.set((event.target as HTMLInputElement).value);
+  }
+
+  /**
+   * Computed signal returning displayable elements filtered by the search string.
+   * Matching is case-insensitive and only items containing the string are returned.
+   * @protected
+   */
+  protected searchedElements = computed(() => {
+    const elements = this.displayableElements();
+    const query = this.search().trim().toLowerCase();
+    if (query === '') {
+      return elements;
+    }
+    return elements.filter((element) => this.matchesSearch(element, query));
+  });
+
+  /**
+   * Checks whether any value of the item contains the search query (case-insensitive).
+   * Recursively inspects nested objects and dates.
+   * @protected
+   */
+  private matchesSearch(value: unknown, query: string): boolean {
+    if (value == null) return false;
+    if (value instanceof Date) return value.toLocaleDateString().toLowerCase().includes(query);
+    if (Array.isArray(value)) return value.some((v) => this.matchesSearch(v, query));
+    if (typeof value === 'object') {
+      return Object.values(value).some((v) => this.matchesSearch(v, query));
+    }
+    return String(value).toLowerCase().includes(query);
+  }
+
   /**
    * Toggle signal that changes whenever a new store is created.
    * Used to force recomputation of derived signals (e.g., displayableElements).
diff --git a/libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.spec.ts b/libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.spec.ts
index 2b254695..7a7085cc 100644
--- a/libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.spec.ts
+++ b/libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.spec.ts
@@ -108,6 +108,11 @@ describe('XtRenderComponent', () => {
   template: '@if (isInForm()) {<ng-container [formGroup]="formGroup()"><input id="text_input" [name]="formControlName()" type="text" [formControlName]="formControlName()" /></ng-container>} @else {<h2>Value is {{context().displayValue()}}</h2>}'
 })
 export class TestCurrencyComponent extends XtSimpleComponent<string> {
+  override ngOnInit() {
+    super.ngOnInit();
+      // Test the context is correctly set before ngOnInit
+    const context = this.context();
+  }
 }
 
 @Component({
diff --git a/libs/xt-type/src/handler/xt-type-handler.spec.ts b/libs/xt-type/src/handler/xt-type-handler.spec.ts
index d52eec4f..adf685d2 100644
--- a/libs/xt-type/src/handler/xt-type-handler.spec.ts
+++ b/libs/xt-type/src/handler/xt-type-handler.spec.ts
@@ -213,6 +213,123 @@ describe('Type Handler', () => {
 
 });
 
+describe('Type sorting', () => {
+
+  function handlerFor (typeName:string, handler:AbstractTypeHandler<any>):AbstractTypeHandler<any> {
+    const typeHierarchy = new XtBaseTypeHierarchy(typeName, handler);
+    typeHierarchy.initHandler();
+    return handler;
+  }
+
+  it ('should mark all primitive types as sortable', () => {
+    for (const typeName of ['string', 'number', 'boolean', 'date', 'date-time', 'time']) {
+      const handler = handlerFor(typeName, new DefaultTypeHandler());
+      expect(handler.isSortable(), typeName).toBe(true);
+    }
+  });
+
+  it ('should not mark an unknown complex type as sortable', () => {
+    const handler = handlerFor('person', new DefaultTypeHandler());
+    expect(handler.isSortable()).toBe(false);
+  });
+
+  it ('should mark a type with a numeric field as sortable', () => {
+    const handler = handlerFor('money', new ManagedDataHandler(
+      new SpecialFields<ManagedData>().setNumericValueField('amount')
+    ));
+    expect(handler.isSortable()).toBe(true);
+  });
+
+  it ('should compare strings', () => {
+    const handler = handlerFor('string', new DefaultTypeHandler());
+    expect(handler.compareTo('abc', 'abc')).toBe(0);
+    expect(handler.compareTo('abc', 'abd')).toBeLessThan(0);
+    expect(handler.compareTo('abd', 'abc')).toBeGreaterThan(0);
+  });
+
+  it ('should compare numbers', () => {
+    const handler = handlerFor('number', new DefaultTypeHandler());
+    expect(handler.compareTo(3, 3)).toBe(0);
+    expect(handler.compareTo(2, 3)).toBeLessThan(0);
+    expect(handler.compareTo(3, 2)).toBeGreaterThan(0);
+  });
+
+  it ('should compare booleans', () => {
+    const handler = handlerFor('boolean', new DefaultTypeHandler());
+    expect(handler.compareTo(false, false)).toBe(0);
+    expect(handler.compareTo(true, true)).toBe(0);
+    expect(handler.compareTo(false, true)).toBeLessThan(0);
+    expect(handler.compareTo(true, false)).toBeGreaterThan(0);
+  });
+
+  it ('should compare dates', () => {
+    const handler = handlerFor('date', new DefaultTypeHandler());
+    const first = new Date('2018-05-01');
+    const second = new Date('2019-05-01');
+    expect(handler.compareTo(first, first)).toBe(0);
+    expect(handler.compareTo(first, second)).toBeLessThan(0);
+    expect(handler.compareTo(second, first)).toBeGreaterThan(0);
+  });
+
+  it ('should compare date-time values', () => {
+    const handler = handlerFor('date-time', new DefaultTypeHandler());
+    const first = new Date('2018-05-01T10:00:00.000Z');
+    const second = new Date('2018-05-01T12:00:00.000Z');
+    expect(handler.compareTo(first, second)).toBeLessThan(0);
+    expect(handler.compareTo(second, first)).toBeGreaterThan(0);
+    expect(handler.compareTo(second, second)).toBe(0);
+  });
+
+  it ('should compare time values', () => {
+    const handler = handlerFor('time', new DefaultTypeHandler());
+    const first = new Date('1970-01-01T08:00:00.000Z');
+    const second = new Date('1970-01-01T09:30:00.000Z');
+    expect(handler.compareTo(first, second)).toBeLessThan(0);
+    expect(handler.compareTo(second, first)).toBeGreaterThan(0);
+    expect(handler.compareTo(second, second)).toBe(0);
+  });
+
+  it ('should compare date values given as strings', () => {
+    const handler = handlerFor('date', new DefaultTypeHandler());
+    expect(handler.compareTo('2018-05-01', '2019-05-01')).toBeLessThan(0);
+    expect(handler.compareTo('2019-05-01', '2018-05-01')).toBeGreaterThan(0);
+    expect(handler.compareTo('2019-05-01', '2019-05-01')).toBe(0);
+  });
+
+  it ('should sort null values first', () => {
+    const handler = handlerFor('string', new DefaultTypeHandler());
+    expect(handler.compareTo(null as any, 'abc')).toBeLessThan(0);
+    expect(handler.compareTo('abc', null as any)).toBeGreaterThan(0);
+    expect(handler.compareTo(null as any, null as any)).toBe(0);
+  });
+
+  it ('should compare complex types by their numeric field', () => {
+    const handler = handlerFor('money', new ManagedDataHandler(
+      new SpecialFields<ManagedData>().setNumericValueField('amount')
+    ));
+    expect(handler.compareTo({amount: 10}, {amount: 20})).toBeLessThan(0);
+    expect(handler.compareTo({amount: 20}, {amount: 10})).toBeGreaterThan(0);
+    expect(handler.compareTo({amount: 10}, {amount: 10})).toBe(0);
+  });
+
+  it ('should sort all primitive types by natural order', () => {
+    const types: {name:string, values:any[], expected:any[]}[] = [
+      {name: 'string', values: ['b', 'a', 'c'], expected: ['a', 'b', 'c']},
+      {name: 'number', values: [3, 1, 2], expected: [1, 2, 3]},
+      {name: 'boolean', values: [true, false, true], expected: [false, true, true]},
+      {name: 'date', values: [new Date('2019-05-01'), new Date('2018-05-01'), new Date('2020-05-01')], expected: [new Date('2018-05-01'), new Date('2019-05-01'), new Date('2020-05-01')]},
+      {name: 'date-time', values: [new Date('2019-05-01T12:00:00Z'), new Date('2019-05-01T10:00:00Z'), new Date('2019-05-01T11:00:00Z')], expected: [new Date('2019-05-01T10:00:00Z'), new Date('2019-05-01T11:00:00Z'), new Date('2019-05-01T12:00:00Z')]},
+      {name: 'time', values: [new Date('1970-01-01T09:00:00Z'), new Date('1970-01-01T07:00:00Z'), new Date('1970-01-01T08:00:00Z')], expected: [new Date('1970-01-01T07:00:00Z'), new Date('1970-01-01T08:00:00Z'), new Date('1970-01-01T09:00:00Z')]},
+    ];
+    for (const entry of types) {
+      const handler = handlerFor(entry.name, new DefaultTypeHandler());
+      const sorted = [...entry.values].sort((a, b) => handler.compareTo(a, b));
+      expect(sorted).toEqual(entry.expected);
+    }
+  });
+
+});
+
 
 type ToHandleType = {
   id: string,
diff --git a/libs/xt-type/src/handler/xt-type-handler.ts b/libs/xt-type/src/handler/xt-type-handler.ts
index 98791342..a919b937 100644
--- a/libs/xt-type/src/handler/xt-type-handler.ts
+++ b/libs/xt-type/src/handler/xt-type-handler.ts
@@ -32,6 +32,15 @@ export type XtTypeHandler<Type> = {
   isDisplayTemplateSet():boolean;
   numberToCalculate(value:Type):number | undefined;
 
+  /**
+   * Checks whether values of this type can be sorted.
+   */
+  isSortable ():boolean;
+  /**
+   * Compares two values of this type.
+   */
+  compareTo (value1: Type, value2: Type): number;
+
   getOrCreateMappingFrom<OtherType> (fromTypeName: string, registry:XtTypeResolver): MappingHelper<OtherType, Type> | undefined;
 }
 
@@ -50,6 +59,11 @@ export abstract class AbstractTypeHandler<Type> implements XtTypeHandler<Type> {
    */
   protected static readonly NONE_MAPPING=new MappingHelper<any,any>({});
 
+  /**
+   * Primitive type names that can be sorted by their natural value
+   */
+  protected static readonly SORTABLE_PRIMITIVES=['string','number','boolean','date','date-time','time'];
+
   /**
    * @param specialFields Optional pre-configured special fields
    */
@@ -202,6 +216,68 @@ export abstract class AbstractTypeHandler<Type> implements XtTypeHandler<Type> {
     return undefined;
   }
 
+  /**
+   * Checks whether values of this type can be sorted.
+   * Primitive types (string, number, boolean, date, date-time, time) are always sortable,
+   * as well as any type configured with a numeric field.
+   * @returns True if the values of this type can be sorted
+   */
+  isSortable(): boolean {
+    const typeName = this.type?.type;
+    if (typeName==null) return false;
+    if (AbstractTypeHandler.SORTABLE_PRIMITIVES.includes(typeName)) return true;
+    return this.fields.numericValueField!=null;
+  }
+
+  /**
+   * Compares two values of this type. Null values are always sorted first.
+   * Comparison uses the natural value of the type: lexicographic for strings,
+   * numeric for numbers and booleans, chronological for dates and times,
+   * and the configured numeric field for complex types.
+   * @param value1 The first value to compare
+   * @param value2 The second value to compare
+   * @returns A negative number if value1 is smaller, zero if equal, a positive number if value1 is greater
+   */
+  compareTo(value1: Type, value2: Type): number {
+    if (value1==null) return value2==null ? 0 : -1;
+    if (value2==null) return 1;
+
+    const typeName = this.type?.type;
+    switch (typeName) {
+      case 'string':
+        return (value1 as string).localeCompare(value2 as string);
+      case 'number':
+        return (value1 as number) - (value2 as number);
+      case 'boolean':
+        return ((value1 as boolean) ? 1 : 0) - ((value2 as boolean) ? 1 : 0);
+      case 'date':
+      case 'date-time':
+      case 'time':
+        return this.timeOf(value1) - this.timeOf(value2);
+      default: {
+        if (this.fields.numericValueField!=null) {
+          const n1 = this.numberToCalculate(value1);
+          const n2 = this.numberToCalculate(value2);
+          if (n1==null) return n2==null ? 0 : -1;
+          if (n2==null) return 1;
+          return n1 - n2;
+        }
+        return 0;
+      }
+    }
+  }
+
+  /**
+   * Extracts a timestamp from a date value, which may be a Date, a date string or an epoch number
+   * @param value The value to convert to a timestamp
+   * @returns The timestamp in milliseconds, or 0 if it cannot be parsed
+   */
+  private timeOf(value: Type): number {
+    if (value instanceof Date) return value.getTime();
+    const timeEpoch = Date.parse(String(value));
+    return isNaN(timeEpoch) ? 0 : timeEpoch;
+  }
+
   /**
    * Parses a date string into a Date object, handling optional timezone annotations
    * @param dateAsString The date string to parse
diff --git a/libs/xt-type/src/resolver/xt-type-resolver.spec.ts b/libs/xt-type/src/resolver/xt-type-resolver.spec.ts
index fbadf0b5..0ebcc863 100644
--- a/libs/xt-type/src/resolver/xt-type-resolver.spec.ts
+++ b/libs/xt-type/src/resolver/xt-type-resolver.spec.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { xtTypeManager } from '../globals';
+import { DefaultTypeHandler } from '../handler/default/default-type-handler';
 import { XtBaseTypeHierarchy } from './xt-type-resolver.ts';
 
 describe('Xt Type Resolver', () => {
@@ -61,5 +62,26 @@ describe('Xt Type Resolver', () => {
     expect((newBookType.children!['author'] as XtBaseTypeHierarchy).children).toBeDefined();
 
   });
+
+  it ('should keep an alias type handler sortable when used as a child', () => {
+    const resolver = xtTypeManager();
+    resolver.addRootType('rating', 'number', new DefaultTypeHandler());
+    resolver.addRootType('movieType', {
+      title: 'string',
+      rating: 'rating'
+    });
+
+    const root = resolver.findTypeHandler('rating');
+    expect(root.typeName).toEqual('number');
+    expect(root.handler?.isSortable()).toBe(true);
+
+    const child = resolver.findTypeHandler('movieType', false, 'rating');
+    expect(child.typeName).toEqual('number');
+    expect(child.handler?.isSortable()).toBe(true);
+
+    // The child node must keep its alias type name so that rendering resolves the right component
+    const childType = resolver.findType('movieType', 'rating') as XtTypeHierarchy;
+    expect(childType.type).toEqual('rating');
+  });
 })
 
diff --git a/libs/xt-type/src/resolver/xt-type-resolver.ts b/libs/xt-type/src/resolver/xt-type-resolver.ts
index f1aa1deb..0d63f7c3 100644
--- a/libs/xt-type/src/resolver/xt-type-resolver.ts
+++ b/libs/xt-type/src/resolver/xt-type-resolver.ts
@@ -374,9 +374,11 @@ export class XtTypeHierarchyResolver implements XtUpdatableTypeResolver {
           ret = new UNRESOLVED_TYPE (typeHierarchy);
         }
       } else {
-          // Just create the hierarchy to the primitive type
+          // Just create the hierarchy to the primitive type.
+          // The handler is initialized by the root type registration (addRootType).
+          // For children, the handler may be shared with the root type: re-initializing
+          // it here would overwrite its type context (e.g. 'rating' alias of 'number').
         ret= new XtBaseTypeHierarchy(typeHierarchy, handler);
-        ret.initHandler();
       }
     } else {
 
diff --git a/plugins/xt-default/projects/default/src/lib/object-set/default-object-set.component.ts b/plugins/xt-default/projects/default/src/lib/object-set/default-object-set.component.ts
index cfb66b1e..50773814 100644
--- a/plugins/xt-default/projects/default/src/lib/object-set/default-object-set.component.ts
+++ b/plugins/xt-default/projects/default/src/lib/object-set/default-object-set.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, model, output, Signal } from '@angular/core';
 import { XtContext, XtRenderSubComponent } from 'xt-components';
 import { TableModule } from 'primeng/table';
-import { isTypeReference, XtTypeHierarchy, XtTypeReference } from 'xt-type';
+import { isTypeReference, XtTypeHandler, XtTypeHierarchy, XtTypeReference } from 'xt-type';
 import { ObjectSetBase } from './object-set-base';
 
 /**
@@ -38,7 +38,7 @@ export class DefaultObjectSetComponent<T> extends ObjectSetBase<T> {
     return ret;
   });
 
-  /** Sub-fields that can be sorted. Only primitives (string, number, date, boolean) are sortable for now. */
+  /** Sub-fields that can be sorted, based on their type handler (or the primitive type when no handler is registered). */
   sortableSubNames = computed<Set<string>>(() => {
     const sortable = new Set<string>();
     for (const subName of this.subNames()) {
@@ -79,10 +79,36 @@ export class DefaultObjectSetComponent<T> extends ObjectSetBase<T> {
     return typeResolver.findPrimitiveType((firstElement as any)[subName])?.type;
   }
 
-  /** Checks whether the sub-field type is a sortable primitive (string, number, date or boolean). */
+  /**
+   * Resolves the type handler of a sub-field, if the sub-field type is registered in the resolver.
+   * @param subName - The sub-field name to resolve
+   * @returns The type handler, or undefined when the sub-field type has no registered handler
+   */
+  private subFieldTypeHandler(subName: string): XtTypeHandler<any> | undefined {
+    const typeResolver = this.resolverService.typeResolver;
+    const values = this.valueSet();
+    const firstElement = (Array.isArray(values) && values.length > 0) ? values[0] : null;
+    try {
+      const found = typeResolver.findTypeHandler(this.context().valueType, false, subName, firstElement);
+      return found.handler;
+    } catch {
+      return undefined;
+    }
+  }
+
+  /**
+   * Checks whether the sub-field type can be sorted, using the type handler when one is registered.
+   * @param subName - The sub-field name to check
+   * @returns True if the sub-field can be sorted
+   */
   private isSubFieldTypeSortable(subName: string): boolean {
+    const typeResolver = this.resolverService.typeResolver;
     const typeName = this.subFieldTypeName(subName);
-    return (typeName == 'string') || (typeName == 'number') || (typeName == 'date') || (typeName == 'boolean');
+    if (typeName == null) return false;
+    const handler = this.subFieldTypeHandler(subName);
+    if (handler != null) return handler.isSortable();
+    // No handler registered for this type, fall back to the primitive types
+    return typeResolver.isPrimitiveType(typeName);
   }
 
   /** Builds an XtContext for a specific row element so its sub-fields can be rendered inline. */
diff --git a/plugins/xt-editor/.editorconfig b/plugins/xt-editor/.editorconfig
new file mode 100644
index 00000000..f166060d
--- /dev/null
+++ b/plugins/xt-editor/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/plugins/xt-editor/.gitignore b/plugins/xt-editor/.gitignore
new file mode 100644
index 00000000..854acd5f
--- /dev/null
+++ b/plugins/xt-editor/.gitignore
@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/plugins/xt-editor/.postcssrc.json b/plugins/xt-editor/.postcssrc.json
new file mode 100644
index 00000000..e663f87e
--- /dev/null
+++ b/plugins/xt-editor/.postcssrc.json
@@ -0,0 +1 @@
+{  "plugins": {    "@tailwindcss/postcss": {}  }}
diff --git a/plugins/xt-editor/.prettierrc b/plugins/xt-editor/.prettierrc
new file mode 100644
index 00000000..d6c16d7e
--- /dev/null
+++ b/plugins/xt-editor/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}
diff --git a/plugins/xt-editor/CHANGELOG.md b/plugins/xt-editor/CHANGELOG.md
new file mode 100644
index 00000000..4dc68c6f
--- /dev/null
+++ b/plugins/xt-editor/CHANGELOG.md
@@ -0,0 +1,2 @@
+# Changelog
+
diff --git a/plugins/xt-editor/README.md b/plugins/xt-editor/README.md
new file mode 100644
index 00000000..7278eccf
--- /dev/null
+++ b/plugins/xt-editor/README.md
@@ -0,0 +1,13 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# Plugin xt-editor
+
+This plugin is part of the [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md)
+
+It enable [xt-components](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-components) to
+
+- Display and edit rich text notes
+![Rich Text Editor](https://dont-code.net/assets/images/screenshots/plugin-default-primitive.png)
+
+With it you are sure you can display / edit any type within any xt-components application like [xt-host](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-host).
+
diff --git a/plugins/xt-editor/angular.json b/plugins/xt-editor/angular.json
new file mode 100644
index 00000000..0b621070
--- /dev/null
+++ b/plugins/xt-editor/angular.json
@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "cache": {
+      "enabled": true
+    }
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "editor": {
+      "projectType": "library",
+      "root": "projects/editor",
+      "sourceRoot": "projects/editor/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/editor/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/editor/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "projects/editor/tsconfig.spec.json"
+          }
+        }
+      }
+    },
+    "editor-plugin": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/editor-plugin",
+      "sourceRoot": "projects/editor-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {},
+          "configurations": {
+            "production": {
+              "target": "editor-plugin:esbuild:production"
+            },
+            "development": {
+              "target": "editor-plugin:esbuild:development",
+              "dev": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {
+            "target": "editor-plugin:serve-original:development",
+            "rebuildDelay": 500,
+            "dev": true,
+            "cacheExternalArtifacts": false,
+            "port": 0
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        },
+        "esbuild": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/xt-editor-plugin",
+            "index": "projects/editor-plugin/src/index.html",
+            "browser": "projects/editor-plugin/src/main.ts",
+            "preserveSymlinks": true,
+            "polyfills": [
+              "es-module-shims"
+            ],
+            "tsConfig": "projects/editor-plugin/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/editor-plugin/public"
+              }
+            ],
+            "styles": ["projects/editor-plugin/src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+					"defaultConfiguration": "development"
+        },
+				"serve-original": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "editor-plugin:esbuild:production"
+            },
+            "development": {
+              "buildTarget": "editor-plugin:esbuild:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 4202
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/plugins/xt-editor/package.json b/plugins/xt-editor/package.json
new file mode 100644
index 00000000..52900d46
--- /dev/null
+++ b/plugins/xt-editor/package.json
@@ -0,0 +1,78 @@
+{
+  "name": "xt-plugin-editor",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build editor",
+    "build-deploy": "APP=editor-plugin && MAIN_LIB=editor && ng build $MAIN_LIB --configuration=$BUILD && ng build $APP --configuration=$BUILD --output-path=\"../../dist/$STAGE/$APP\" --base-href=\"https://dont-code.net/apps/$STAGE/$APP/\"",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test editor && ng test editor-plugin"
+  },
+  "publishConfig": {
+    "directory": "dist/xt-plugin-editor",
+    "linkDirectory": true
+  },
+  "repository": {
+    "url": "https://github.com/dont-code/ng-xtend.git"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^21.2.7",
+    "@angular/common": "^21.2.7",
+    "@angular/compiler": "^21.2.7",
+    "@angular/core": "^21.2.7",
+    "@angular/forms": "^21.2.7",
+    "@angular/platform-browser": "^21.2.7",
+    "@angular/platform-browser-dynamic": "^21.2.7",
+    "@angular/router": "^21.2.7",
+    "@angular/cdk": "^21.2.5",
+    "@types/node": "^24.12.2",
+    "xt-components": "workspace:^",
+    "xt-type": "workspace:^",
+    "xt-store": "workspace:^",
+    "@ngrx/signals": "^21.1.0",
+    "rxjs": "^7.8.2",
+    "primeng": "^21.1.5",
+    "primeicons": "^7.0.0",
+    "@primeuix/themes": "^2.0.3",
+    "tslib": "^2.8.1",
+    "tailwindcss": "~4.2.2",
+    "es-module-shims": "^2.8.0",
+    "@softarc/native-federation-runtime": "^3.3.6",
+    "prosemirror-model": "^1.25.11",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-view": "^1.42.2",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-commands": "^1.0.0",
+    "prosemirror-schema-basic": "^1.2.4",
+    "prosemirror-markdown": "^1.13.5",
+    "prosemirror-schema-list": "^1.5.1",
+    "prosemirror-menu": "^1.3.2",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.1",
+    "prosemirror-dropcursor": "^1.8.3",
+    "prosemirror-gapcursor": "^1.4.1",
+    "prosemirror-history-v2": "^1.1.3"
+  },
+  "devDependencies": {
+    "@angular-architects/native-federation": "^21.2.3",
+    "@primeuix/utils": "^0.7.1",
+    "@primeuix/styled": "^0.7.2",
+    "@angular-devkit/build-angular": "^21.2.6",
+    "@angular/cli": "^21.2.6",
+    "@angular/build": "^21.2.6",
+    "@angular/compiler-cli": "^21.2.7",
+    "@types/node": "^24.12.2",
+    "ng-packagr": "^21.2.2",
+    "typescript": "^5.9.3",
+    "jsdom": "^29.0.1",
+    "vitest": "^4.1.2",
+    "happy-dom": "^20.8.9",
+    "@tailwindcss/postcss": "~4.2.2",
+    "postcss": "~8.5.6",
+    "@prosemirror/buildhelper": "^0.1.5"
+  }
+}
+
diff --git a/plugins/xt-editor/projects/editor-plugin/federation.config.js b/plugins/xt-editor/projects/editor-plugin/federation.config.js
new file mode 100644
index 00000000..892b1656
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/federation.config.js
@@ -0,0 +1,34 @@
+const { withNativeFederation, shareAll, share } = require('@angular-architects/native-federation/config');
+
+module.exports = withNativeFederation({
+
+  name: 'editor-plugin',
+
+  exposes: {
+    './EditorComponent': './projects/editor/src/lib/editor/editor.component.ts',
+    './Register': './projects/editor/src/lib/register.ts'
+  },
+
+  shared: {
+    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+},
+
+  features: {
+    ignoreUnusedDeps:true
+  },
+  skip: [
+    'rxjs/ajax',
+    'rxjs/fetch',
+    'rxjs/testing',
+    'rxjs/webSocket',
+    // Add further packages you don't need at runtime
+    /^@primeuix\//,
+    'chart.js/auto',
+    'primeng/chart',
+    'primeicons'
+  ]
+
+  // Please read our FAQ about sharing libs:
+  // https://shorturl.at/jmzH0
+
+});
diff --git a/plugins/xt-editor/projects/editor-plugin/public/favicon.ico b/plugins/xt-editor/projects/editor-plugin/public/favicon.ico
new file mode 100644
index 00000000..57614f9c
Binary files /dev/null and b/plugins/xt-editor/projects/editor-plugin/public/favicon.ico differ
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.component.css b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.component.html b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.html
new file mode 100644
index 00000000..80570948
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>Editor Plugin Testing app</h1>
+
+<router-outlet />
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.component.spec.ts b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.spec.ts
new file mode 100644
index 00000000..0aa0d554
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.spec.ts
@@ -0,0 +1,34 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+
+describe('Editor Tester', () => {
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [provideNoopAnimations(),provideZonelessChangeDetection()]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'WebTester' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('WebTester');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Web Plugin Testing app');
+  });
+});
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.component.ts b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.ts
new file mode 100644
index 00000000..d5b7767a
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { XtResolverService } from 'xt-components';
+import { registerEditorPlugin } from '../../../editor/src/lib/register';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'EditorTester';
+
+  protected resolverService = inject (XtResolverService);
+
+  constructor () {
+    registerEditorPlugin(this.resolverService);
+  }
+
+}
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.config.ts b/plugins/xt-editor/projects/editor-plugin/src/app/app.config.ts
new file mode 100644
index 00000000..58547d2b
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/app.config.ts
@@ -0,0 +1,22 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { providePrimeNG } from 'primeng/config';
+import Aura from '@primeuix/themes/aura';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideHttpClient(),
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+        preset: Aura
+      }
+    }),
+    provideRouter(routes)]
+};
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/app.routes.ts b/plugins/xt-editor/projects/editor-plugin/src/app/app.routes.ts
new file mode 100644
index 00000000..531b53c6
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/app.routes.ts
@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { EditorTestComponent } from './editor-test-component/editor-test.component';
+
+export const routes: Routes = [{
+  path:'', component:EditorTestComponent
+}];
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.css b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.html b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.html
new file mode 100644
index 00000000..f7a13145
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.html
@@ -0,0 +1,31 @@
+<h1 class="text-2xl">Testing Editor</h1>
+
+<p-panel header="Configuration">
+  <div class="flex flex-wrap m-12 gap-4 items-center" id="DocUrl">
+    <label for="inMemoryStore">Use In memory storage</label>
+    <p-checkbox id="inMemoryStore" [ngModel]="storeInMemory()" [binary]="true" (ngModelChange)="inMemoryChanged ($event)">In memory only</p-checkbox>
+    <label for="docUrl">Store documents with this url</label>
+    <p-autocomplete id="docUrl" [ngModel]="docUrl()" (ngModelChange)="docUrlChanged($event)" [suggestions]="listofDocUrls()"  [dropdown]="true" [forceSelection]="false" ></p-autocomplete>
+  </div>
+</p-panel>
+<div class="flex flex-wrap mt-6 mb-6">
+  <p-panel header="Selection">
+    <label class="text-xl m-3" for="TypeSelector">Select the type to test</label>
+    <div class="m-3" id="TypeSelector">
+      <p-autocomplete [suggestions]="listOfSimpleTypes()" [ngModel]="selectedType()" (onSelect)="typeSwitch($event)" [dropdown]="true"></p-autocomplete>
+    </div>
+  </p-panel>
+  <p-panel header="Edit Mode">
+    <form class="m-3" id="editView" [formGroup]="mainForm">
+      <xt-render [valueType]="selectedType()" displayMode="FULL_EDITABLE" subName="TestType" [formGroup]="mainForm"></xt-render>
+    </form>
+    <span class="m-3 mt-6">Form Value is {{mainForm.value | json}}, Form is {{mainForm.pristine?"pristine":"Dirty"}}
+    </span>
+  </p-panel>
+  <p-panel header="View Inline Mode">
+    <xt-render id="inlineView" [valueType]="selectedType()" displayMode="INLINE_VIEW" [value]="value()" ></xt-render>
+  </p-panel>
+  <p-panel header="Full View Mode">
+    <xt-render id="fullView" [valueType]="selectedType()" displayMode="FULL_VIEW" [value]="value()"></xt-render>
+  </p-panel>
+</div>
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.spec.ts b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.spec.ts
new file mode 100644
index 00000000..09b0f6c8
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebTestComponent } from './web-test.component';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { registerWebPlugin } from '../../../../web/src/lib/register';
+import { StoreTestHelper, XtResolverService } from 'xt-components';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('TestComponent', () => {
+  let component: WebTestComponent;
+  let fixture: ComponentFixture<WebTestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WebTestComponent],
+      providers: [provideNoopAnimations(), provideZonelessChangeDetection(), provideHttpClient()]
+    })
+    .compileComponents();
+
+    StoreTestHelper.ensureTestProviderOnly();
+    registerWebPlugin(TestBed.inject(XtResolverService));
+    fixture = TestBed.createComponent(WebTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.ts b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.ts
new file mode 100644
index 00000000..27a22114
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/app/editor-test-component/editor-test.component.ts
@@ -0,0 +1,103 @@
+import { Component, effect, inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { AutoComplete, AutoCompleteSelectEvent } from 'primeng/autocomplete';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { attachToFormGroup, XtRenderComponent, XtResolverService } from 'xt-components';
+import { Panel } from 'primeng/panel';
+import { Checkbox } from 'primeng/checkbox';
+import { XtStoreManagerService, XtApiStoreProvider, XtMemoryStoreProvider } from 'xt-store';
+
+@Component({
+  selector: 'app-editor-test',
+  imports: [
+    AutoComplete,
+    FormsModule,
+    ReactiveFormsModule,
+    JsonPipe, XtRenderComponent, Panel, Checkbox
+  ],
+  templateUrl: './editor-test.component.html',
+  styleUrl: './editor-test.component.css'
+})
+export class EditorTestComponent implements OnInit, OnDestroy {
+
+  protected builder = inject(FormBuilder);
+  mainForm :FormGroup =this.builder.group ({  });
+
+  protected resolver = inject (XtResolverService);
+
+  selectedType= signal<string>('link');
+
+  docUrl = signal<string|null>(null);
+  storeInMemory = signal(true);
+
+  value = signal<any>('https://ng-xtend.dev');
+
+  protected storeMgr= inject(XtStoreManagerService);
+  protected apiProvider = inject (XtApiStoreProvider);
+
+  protected subscriptions= new Subscription();
+
+  constructor() {
+
+  }
+
+  listOfSimpleTypes() {
+    return ['image','link', 'rating'];
+  }
+
+  typeSwitch($event: AutoCompleteSelectEvent) {
+    attachToFormGroup(this.mainForm, 'TestType', null, $event.value, this.resolver.typeResolver);
+    this.selectedType.set($event.value);
+//    this.mainForm.setValue();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    attachToFormGroup(this.mainForm, 'TestType', this.value(), this.selectedType(), this.resolver.typeResolver);
+
+    this.listenToValueChanges();
+  }
+
+  protected listenToValueChanges() {
+    // this.subscriptions.unsubscribe();
+    this.subscriptions.add(this.mainForm.valueChanges.subscribe({
+      next: newValue => {
+        if (newValue.TestType !== undefined)
+          this.value.set(newValue.TestType);
+      }
+    }));
+  }
+
+  updateStore() {
+    if (this.storeInMemory()) {
+      this.storeMgr.setDefaultStoreProvider(new XtMemoryStoreProvider());
+    }else {
+      this.apiProvider.docUrl=this.docUrl()??'';
+      this.storeMgr.setDefaultStoreProvider(this.apiProvider);
+    }
+  }
+
+  listofDocUrls():string[] {
+    return [
+      'https://test.dont-code.net/demo/documents',
+      'https://collinfr.net/dont-code/documents',
+      'http://localhost:8084/documents'];
+  }
+
+  docUrlChanged($event: string) {
+    if (($event==null)||($event.length==0)){
+      this.storeInMemory.set(true);
+    } else  this.storeInMemory.set(false);
+    this.docUrl.set($event);
+    this.updateStore();
+  }
+
+  inMemoryChanged($event: boolean) {
+    this.storeInMemory.set($event);
+    this.updateStore();
+  }
+}
diff --git a/plugins/xt-editor/projects/editor-plugin/src/bootstrap.ts b/plugins/xt-editor/projects/editor-plugin/src/bootstrap.ts
new file mode 100644
index 00000000..35b00f34
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/bootstrap.ts
@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
diff --git a/plugins/xt-editor/projects/editor-plugin/src/index.html b/plugins/xt-editor/projects/editor-plugin/src/index.html
new file mode 100644
index 00000000..d31aea78
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Editor Tester</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/plugins/xt-editor/projects/editor-plugin/src/main.ts b/plugins/xt-editor/projects/editor-plugin/src/main.ts
new file mode 100644
index 00000000..ed18d478
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/main.ts
@@ -0,0 +1,6 @@
+import { initFederation } from '@angular-architects/native-federation';
+
+initFederation()
+  .catch(err => console.error(err))
+  .then(_ => import('./bootstrap'))
+  .catch(err => console.error(err));
diff --git a/plugins/xt-editor/projects/editor-plugin/src/styles.css b/plugins/xt-editor/projects/editor-plugin/src/styles.css
new file mode 100644
index 00000000..8b1d69c2
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/src/styles.css
@@ -0,0 +1,12 @@
+/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";
+@import "primeicons/primeicons.css";
+
+html {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/plugins/xt-editor/projects/editor-plugin/tsconfig.app.json b/plugins/xt-editor/projects/editor-plugin/tsconfig.app.json
new file mode 100644
index 00000000..d846f25e
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/tsconfig.app.json
@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}
diff --git a/plugins/xt-editor/projects/editor-plugin/tsconfig.federation.json b/plugins/xt-editor/projects/editor-plugin/tsconfig.federation.json
new file mode 100644
index 00000000..5f69876e
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/tsconfig.federation.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/xt-editor/projects/editor-plugin/tsconfig.spec.json b/plugins/xt-editor/projects/editor-plugin/tsconfig.spec.json
new file mode 100644
index 00000000..48fcc2fd
--- /dev/null
+++ b/plugins/xt-editor/projects/editor-plugin/tsconfig.spec.json
@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}
diff --git a/plugins/xt-editor/projects/editor/README.md b/plugins/xt-editor/projects/editor/README.md
new file mode 100644
index 00000000..642dccb2
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/README.md
@@ -0,0 +1,13 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# Plugin xt-editor
+
+This plugin is part of the [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md)
+
+It enable [xt-components](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-components) to
+
+- Display and edit rich text notes
+  ![Rich Text Editor](https://dont-code.net/assets/images/screenshots/plugin-default-primitive.png)
+
+With it you are sure you can display / edit any type within any xt-components application like [xt-host](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-host).
+
diff --git a/plugins/xt-editor/projects/editor/ng-package.json b/plugins/xt-editor/projects/editor/ng-package.json
new file mode 100644
index 00000000..1571f5b6
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/xt-plugin-editor",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/plugins/xt-editor/projects/editor/package.json b/plugins/xt-editor/projects/editor/package.json
new file mode 100644
index 00000000..8f629559
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "xt-plugin-editor",
+  "version": "1.0.0",
+  "repository": {
+    "url": "https://github.com/dont-code/ng-xtend.git"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "xt-components": "^1.0.0",
+    "rxjs": "^7.8.2",
+    "primeng": "^21.0.0",
+    "primeicons": "^7.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false
+}
diff --git a/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.css b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.html b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.html
new file mode 100644
index 00000000..c1080521
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.html
@@ -0,0 +1,7 @@
+@if (isInForm() ) {
+  <ng-container [formGroup]="formGroup()" #proseMirror>
+    <ng-content></ng-content>
+  </ng-container>
+} @else if (displayValue()!=null) {
+  ${{ displayValue() }}
+}
diff --git a/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.spec.ts b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.spec.ts
new file mode 100644
index 00000000..a5cda7c2
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.spec.ts
@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { HostTestFormComponent, XtBaseContext } from 'xt-components';
+import { EditorComponent } from './editor.component';
+import { By } from '@angular/platform-browser';
+
+describe('EditorComponent', () => {
+  let component: EditorComponent;
+  let fixture: ComponentFixture<EditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditorComponent],
+      providers: [provideNoopAnimations(), provideZonelessChangeDetection()]
+
+    })
+    .compileComponents();
+  });
+
+  it('should create', () => {
+    fixture = TestBed.createComponent(EditorComponent);
+    const context=new XtBaseContext('FULL_VIEW');
+    context.setDisplayValue("My Text to display");
+    fixture.componentRef.setInput('context', context);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should show editor in form', () => {
+    const hostFixture = TestBed.createComponent(HostTestFormComponent);
+    hostFixture.componentRef.setInput('type', EditorComponent);
+    hostFixture.componentRef.setInput('formDescription', {
+      testText: 'My text to edit'
+    });
+    hostFixture.componentRef.setInput('controlName', 'testText');
+    const host = hostFixture.componentInstance;
+    expect(host).toBeTruthy();
+    hostFixture.detectChanges();
+
+    const componentDebug = hostFixture.debugElement.query(By.directive(EditorComponent));
+    component=componentDebug.componentInstance;
+    expect(component).toBeTruthy();
+  });
+
+});
diff --git a/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.ts b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.ts
new file mode 100644
index 00000000..e704fa1e
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/lib/editor/editor.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, Renderer2, ViewChild } from '@angular/core';
+import { XtSimpleComponent } from 'xt-components';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { DOMParser, Schema } from 'prosemirror-model';
+import { schema } from 'prosemirror-schema-basic';
+import { addListNodes } from 'prosemirror-schema-list';
+import { basicSetup } from '../prose-mirror/basic-setup';
+
+@Component({
+  selector: 'xt-editor',
+  imports: [
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './editor.component.html',
+  styleUrl: './editor.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EditorComponent extends XtSimpleComponent{
+
+  @ViewChild('proseMirror', { static: false }) private proseMirror: ElementRef | undefined;
+  //private proseMirror: ElementRef | undefined;
+
+  constructor(    private renderer: Renderer2, private injector: Injector, private elementRef: ElementRef<HTMLElement>,
+  ) {
+    super();
+  }
+// Mix the nodes from prosemirror-schema-list into the basic schema to
+// create a schema with list support.
+  mySchema = new Schema({
+    nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
+    marks: schema.spec.marks
+  });
+
+  protected view: EditorView|null=null;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if( this.proseMirror!=null) {
+      this.view = new EditorView(null, {
+        state: EditorState.create({
+          doc: DOMParser.fromSchema(this.mySchema).parse(this.context().value()),
+          plugins: basicSetup({schema: this.mySchema})
+        })
+      })
+
+      this.renderer.appendChild(this.proseMirror.nativeElement, this.view.dom);
+    }
+  /*  this.editor.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe((jsonDoc) => {
+      this.handleChange(jsonDoc);
+    });*/
+  }
+
+}
diff --git a/plugins/xt-editor/projects/editor/src/lib/prose-mirror/basic-setup.ts b/plugins/xt-editor/projects/editor/src/lib/prose-mirror/basic-setup.ts
new file mode 100644
index 00000000..07f26be1
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/lib/prose-mirror/basic-setup.ts
@@ -0,0 +1,654 @@
+
+
+
+/// Given a blockquote node type, returns an input rule that turns `"> "`
+/// at the start of a textblock into a blockquote.
+
+import {
+  wrapItem, blockTypeItem, Dropdown, DropdownSubmenu, joinUpItem, liftItem,
+  selectParentNodeItem, undoItem, redoItem, icons, MenuItem, MenuElement, MenuItemSpec, menuBar
+} from 'prosemirror-menu';
+import {NodeSelection, EditorState, Command} from "prosemirror-state"
+import {Schema, NodeType, MarkType} from "prosemirror-model"
+
+import {Attrs} from "prosemirror-model"
+
+const prefix = "ProseMirror-prompt"
+
+import {
+  wrapIn, setBlockType, chainCommands, toggleMark, exitCode,
+  joinUp, joinDown, lift, selectParentNode, baseKeymap
+} from 'prosemirror-commands';
+import {wrapInList, splitListItem, liftListItem, sinkListItem} from "prosemirror-schema-list"
+import { undo, redo, history } from 'prosemirror-history';
+import {
+  ellipsis, emDash,
+  inputRules,
+  smartQuotes,
+  textblockTypeInputRule,
+  undoInputRule,
+  wrappingInputRule
+} from 'prosemirror-inputrules';
+import { keymap } from 'prosemirror-keymap';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { gapCursor } from 'prosemirror-gapcursor';
+
+const mac = typeof navigator != "undefined" ? /Mac|iP(hone|[oa]d)/.test(navigator.platform) : false
+
+/// Inspect the given schema looking for marks and nodes from the
+/// basic schema, and if found, add key bindings related to them.
+/// This will add:
+///
+/// * **Mod-b** for toggling [strong](#schema-basic.StrongMark)
+/// * **Mod-i** for toggling [emphasis](#schema-basic.EmMark)
+/// * **Mod-`** for toggling [code font](#schema-basic.CodeMark)
+/// * **Ctrl-Shift-0** for making the current textblock a paragraph
+/// * **Ctrl-Shift-1** to **Ctrl-Shift-Digit6** for making the current
+///   textblock a heading of the corresponding level
+/// * **Ctrl-Shift-Backslash** to make the current textblock a code block
+/// * **Ctrl-Shift-8** to wrap the selection in an ordered list
+/// * **Ctrl-Shift-9** to wrap the selection in a bullet list
+/// * **Ctrl->** to wrap the selection in a block quote
+/// * **Enter** to split a non-empty textblock in a list item while at
+///   the same time splitting the list item
+/// * **Mod-Enter** to insert a hard break
+/// * **Mod-_** to insert a horizontal rule
+/// * **Backspace** to undo an input rule
+/// * **Alt-ArrowUp** to `joinUp`
+/// * **Alt-ArrowDown** to `joinDown`
+/// * **Mod-BracketLeft** to `lift`
+/// * **Escape** to `selectParentNode`
+///
+/// You can suppress or map these bindings by passing a `mapKeys`
+/// argument, which maps key names (say `"Mod-B"` to either `false`, to
+/// remove the binding, or a new key name string.
+export function buildKeymap(schema: Schema, mapKeys?: {[key: string]: false | string}) {
+  let keys: {[key: string]: Command} = {}, type
+  function bind(key: string, cmd: Command) {
+    if (mapKeys) {
+      let mapped = mapKeys[key]
+      if (mapped === false) return
+      if (mapped) key = mapped
+    }
+    keys[key] = cmd
+  }
+
+  bind("Mod-z", undo)
+  bind("Shift-Mod-z", redo)
+  bind("Backspace", undoInputRule)
+  if (!mac) bind("Mod-y", redo)
+
+  bind("Alt-ArrowUp", joinUp)
+  bind("Alt-ArrowDown", joinDown)
+  bind("Mod-BracketLeft", lift)
+  bind("Escape", selectParentNode)
+
+  if (type == schema.marks["strong"]) {
+    bind("Mod-b", toggleMark(type))
+    bind("Mod-B", toggleMark(type))
+  }
+  if (type == schema.marks["em"]) {
+    bind("Mod-i", toggleMark(type))
+    bind("Mod-I", toggleMark(type))
+  }
+  if (type == schema.marks["code"])
+    bind("Mod-`", toggleMark(type))
+
+  if (type == schema.nodes["bullet_list"])
+    bind("Shift-Ctrl-8", wrapInList(type))
+  if (type == schema.nodes["ordered_list"])
+    bind("Shift-Ctrl-9", wrapInList(type))
+  if (type == schema.nodes["blockquote"])
+    bind("Ctrl->", wrapIn(type))
+  if (type == schema.nodes["hard_break"]) {
+    let br = type as any, cmd = chainCommands(exitCode, (state, dispatch) => {
+      if (dispatch) dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView())
+      return true
+    })
+    bind("Mod-Enter", cmd)
+    bind("Shift-Enter", cmd)
+    if (mac) bind("Ctrl-Enter", cmd)
+  }
+  if (type == schema.nodes["list_item"]) {
+    bind("Enter", splitListItem(type))
+    bind("Mod-[", liftListItem(type))
+    bind("Mod-]", sinkListItem(type))
+  }
+  if (type == schema.nodes["paragraph"])
+    bind("Shift-Ctrl-0", setBlockType(type))
+  if (type == schema.nodes["code_block"])
+    bind("Shift-Ctrl-\\", setBlockType(type))
+  if (type == schema.nodes["heading"])
+    for (let i = 1; i <= 6; i++) bind("Shift-Ctrl-" + i, setBlockType(type, {level: i}))
+  if (type == schema.nodes["horizontal_rule"]) {
+    let hr = type as any
+    bind("Mod-_", (state, dispatch) => {
+      if (dispatch) dispatch(state.tr.replaceSelectionWith(hr.create()).scrollIntoView())
+      return true
+    })
+  }
+
+  return keys
+}
+
+
+export function openPrompt(options: {
+  title: string,
+  fields: {[name: string]: Field},
+  callback: (attrs: Attrs) => void
+}) {
+  let wrapper = document.body.appendChild(document.createElement("div"))
+  wrapper.className = prefix
+
+  let mouseOutside = (e: MouseEvent) => { if (!wrapper.contains(e.target as HTMLElement)) close() }
+  setTimeout(() => window.addEventListener("mousedown", mouseOutside), 50)
+  let close = () => {
+    window.removeEventListener("mousedown", mouseOutside)
+    if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper)
+  }
+
+  let domFields: HTMLElement[] = []
+  for (let name in options.fields) domFields.push(options.fields[name].render())
+
+  let submitButton = document.createElement("button")
+  submitButton.type = "submit"
+  submitButton.className = prefix + "-submit"
+  submitButton.textContent = "OK"
+  let cancelButton = document.createElement("button")
+  cancelButton.type = "button"
+  cancelButton.className = prefix + "-cancel"
+  cancelButton.textContent = "Cancel"
+  cancelButton.addEventListener("click", close)
+
+  let form = wrapper.appendChild(document.createElement("form"))
+  if (options.title) form.appendChild(document.createElement("h5")).textContent = options.title
+  domFields.forEach(field => {
+    form.appendChild(document.createElement("div")).appendChild(field)
+  })
+  let buttons = form.appendChild(document.createElement("div"))
+  buttons.className = prefix + "-buttons"
+  buttons.appendChild(submitButton)
+  buttons.appendChild(document.createTextNode(" "))
+  buttons.appendChild(cancelButton)
+
+  let box = wrapper.getBoundingClientRect()
+  wrapper.style.top = ((window.innerHeight - box.height) / 2) + "px"
+  wrapper.style.left = ((window.innerWidth - box.width) / 2) + "px"
+
+  let submit = () => {
+    let params = getValues(options.fields, domFields)
+    if (params) {
+      close()
+      options.callback(params)
+    }
+  }
+
+  form.addEventListener("submit", e => {
+    e.preventDefault()
+    submit()
+  })
+
+  form.addEventListener("keydown", e => {
+    if (e.keyCode == 27) {
+      e.preventDefault()
+      close()
+    } else if (e.keyCode == 13 && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+      e.preventDefault()
+      submit()
+    } else if (e.keyCode == 9) {
+      window.setTimeout(() => {
+        if (!wrapper.contains(document.activeElement)) close()
+      }, 500)
+    }
+  })
+
+  let input = form.elements[0] as HTMLElement
+  if (input) input.focus()
+}
+
+function getValues(fields: {[name: string]: Field}, domFields: readonly HTMLElement[]) {
+  let result = Object.create(null), i = 0
+  for (let name in fields) {
+    let field = fields[name], dom = domFields[i++]
+    let value = field.read(dom), bad = field.validate(value)
+    if (bad) {
+      reportInvalid(dom, bad)
+      return null
+    }
+    result[name] = field.clean(value)
+  }
+  return result
+}
+
+function reportInvalid(dom: HTMLElement, message: string) {
+  // FIXME this is awful and needs a lot more work
+  let parent = dom.parentNode!
+  let msg = parent.appendChild(document.createElement("div"))
+  msg.style.left = (dom.offsetLeft + dom.offsetWidth + 2) + "px"
+  msg.style.top = (dom.offsetTop - 5) + "px"
+  msg.className = "ProseMirror-invalid"
+  msg.textContent = message
+  setTimeout(() => parent.removeChild(msg), 1500)
+}
+
+/// The type of field that `openPrompt` expects to be passed to it.
+export abstract class Field {
+  /// Create a field with the given options. Options support by all
+  /// field types are:
+  constructor(
+    /// @internal
+    readonly options: {
+      /// The starting value for the field.
+      value?: any
+
+      /// The label for the field.
+      label: string
+
+      /// Whether the field is required.
+      required?: boolean
+
+      /// A function to validate the given value. Should return an
+      /// error message if it is not valid.
+      validate?: (value: any) => string | null
+
+      /// A cleanup function for field values.
+      clean?: (value: any) => any
+    }
+  ) {}
+
+  /// Render the field to the DOM. Should be implemented by all subclasses.
+  abstract render(): HTMLElement
+
+  /// Read the field's value from its DOM node.
+  read(dom: HTMLElement) { return (dom as any).value }
+
+  /// A field-type-specific validation function.
+  validateType(value: any): string | null { return null }
+
+  /// @internal
+  validate(value: any): string | null {
+    if (!value && this.options.required)
+      return "Required field"
+    return this.validateType(value) || (this.options.validate ? this.options.validate(value) : null)
+  }
+
+  clean(value: any): any {
+    return this.options.clean ? this.options.clean(value) : value
+  }
+}
+
+/// A field class for single-line text fields.
+export class TextField extends Field {
+  render() {
+    let input = document.createElement("input")
+    input.type = "text"
+    input.placeholder = this.options.label
+    input.value = this.options.value || ""
+    input.autocomplete = "off"
+    return input
+  }
+}
+
+
+/// A field class for dropdown fields based on a plain `<select>`
+/// tag. Expects an option `options`, which should be an array of
+/// `{value: string, label: string}` objects, or a function taking a
+/// `ProseMirror` instance and returning such an array.
+export class SelectField extends Field {
+  render() {
+    let select = document.createElement("select")
+    ;((this.options as any).options as {value: string, label: string}[]).forEach(o => {
+      let opt = select.appendChild(document.createElement("option"))
+      opt.value = o.value
+      opt.selected = o.value == this.options.value
+      opt.label = o.label
+    })
+    return select
+  }
+}
+
+// Helpers to create specific types of items
+
+function canInsert(state: EditorState, nodeType: NodeType) {
+  let $from = state.selection.$from
+  for (let d = $from.depth; d >= 0; d--) {
+    let index = $from.index(d)
+    if ($from.node(d).canReplaceWith(index, index, nodeType)) return true
+  }
+  return false
+}
+
+function insertImageItem(nodeType: NodeType) {
+  return new MenuItem({
+    title: "Insert image",
+    label: "Image",
+    enable(state) { return canInsert(state, nodeType) },
+    run(state, _, view) {
+      let {from, to} = state.selection, attrs = null
+      if (state.selection instanceof NodeSelection && state.selection.node.type == nodeType)
+        attrs = state.selection.node.attrs
+      openPrompt({
+        title: "Insert image",
+        fields: {
+          src: new TextField({label: "Location", required: true, value: attrs && attrs["src"]}),
+          title: new TextField({label: "Title", value: attrs && attrs["title"]}),
+          alt: new TextField({label: "Description",
+            value: attrs ? attrs["alt"] : state.doc.textBetween(from, to, " ")})
+        },
+        callback(attrs) {
+          view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)!))
+          view.focus()
+        }
+      })
+    }
+  })
+}
+
+function cmdItem(cmd: Command, options: Partial<MenuItemSpec>) {
+  let passedOptions: MenuItemSpec = {
+    label: options.title as string | undefined,
+    run: cmd
+  }
+  for (let prop in options) (passedOptions as any)[prop] = (options as any)[prop]
+  if (!options.enable && !options.select)
+    passedOptions[options.enable ? "enable" : "select"] = state => cmd(state)
+
+  return new MenuItem(passedOptions)
+}
+
+function markActive(state: EditorState, type: MarkType) {
+  let {from, $from, to, empty} = state.selection
+  if (empty) return !!type.isInSet(state.storedMarks || $from.marks())
+  else return state.doc.rangeHasMark(from, to, type)
+}
+
+function markItem(markType: MarkType, options: Partial<MenuItemSpec>) {
+  let passedOptions: Partial<MenuItemSpec> = {
+    active(state) { return markActive(state, markType) }
+  }
+  for (let prop in options) (passedOptions as any)[prop] = (options as any)[prop]
+  return cmdItem(toggleMark(markType), passedOptions)
+}
+
+function linkItem(markType: MarkType) {
+  return new MenuItem({
+    title: "Add or remove link",
+    icon: icons["link"],
+    active(state) { return markActive(state, markType) },
+    enable(state) { return !state.selection.empty },
+    run(state, dispatch, view) {
+      if (markActive(state, markType)) {
+        toggleMark(markType)(state, dispatch)
+        return true
+      }
+      openPrompt({
+        title: "Create a link",
+        fields: {
+          href: new TextField({
+            label: "Link target",
+            required: true
+          }),
+          title: new TextField({label: "Title"})
+        },
+        callback(attrs) {
+          toggleMark(markType, attrs)(view.state, view.dispatch)
+          view.focus()
+        }
+      })
+      return true
+    }
+  })
+}
+
+function wrapListItem(nodeType: NodeType, options: Partial<MenuItemSpec>) {
+  return cmdItem(wrapInList(nodeType, (options as any).attrs), options)
+}
+
+type MenuItemResult = {
+  /// A menu item to toggle the [strong mark](#schema-basic.StrongMark).
+  toggleStrong?: MenuItem
+
+  /// A menu item to toggle the [emphasis mark](#schema-basic.EmMark).
+  toggleEm?: MenuItem
+
+  /// A menu item to toggle the [code font mark](#schema-basic.CodeMark).
+  toggleCode?: MenuItem
+
+  /// A menu item to toggle the [link mark](#schema-basic.LinkMark).
+  toggleLink?: MenuItem
+
+  /// A menu item to insert an [image](#schema-basic.Image).
+  insertImage?: MenuItem
+
+  /// A menu item to wrap the selection in a [bullet list](#schema-list.BulletList).
+  wrapBulletList?: MenuItem
+
+  /// A menu item to wrap the selection in an [ordered list](#schema-list.OrderedList).
+  wrapOrderedList?: MenuItem
+
+  /// A menu item to wrap the selection in a [block quote](#schema-basic.BlockQuote).
+  wrapBlockQuote?: MenuItem
+
+  /// A menu item to set the current textblock to be a normal
+  /// [paragraph](#schema-basic.Paragraph).
+  makeParagraph?: MenuItem
+
+  /// A menu item to set the current textblock to be a
+  /// [code block](#schema-basic.CodeBlock).
+  makeCodeBlock?: MenuItem
+
+  /// Menu items to set the current textblock to be a
+  /// [heading](#schema-basic.Heading) of level _N_.
+  makeHead1?: MenuItem
+  makeHead2?: MenuItem
+  makeHead3?: MenuItem
+  makeHead4?: MenuItem
+  makeHead5?: MenuItem
+  makeHead6?: MenuItem
+
+  /// A menu item to insert a horizontal rule.
+  insertHorizontalRule?: MenuItem
+
+  /// A dropdown containing the `insertImage` and
+  /// `insertHorizontalRule` items.
+  insertMenu: Dropdown
+
+  /// A dropdown containing the items for making the current
+  /// textblock a paragraph, code block, or heading.
+  typeMenu: Dropdown
+
+  /// Array of block-related menu items.
+  blockMenu: MenuElement[][]
+
+  /// Inline-markup related menu items.
+  inlineMenu: MenuElement[][]
+
+  /// An array of arrays of menu elements for use as the full menu
+  /// for, for example the [menu
+  /// bar](https://code.haverbeke.berlin/prosemirror/prosemirror-menu).
+  fullMenu: MenuElement[][]
+}
+
+/// Given a schema, look for default mark and node types in it and
+/// return an object with relevant menu items relating to those marks.
+export function buildMenuItems(schema: Schema): MenuItemResult {
+  let r: MenuItemResult = {} as any
+  let mark: MarkType | undefined
+  if (mark == schema.marks["strong"])
+    r.toggleStrong = markItem(mark, {title: "Toggle strong style", icon: icons["strong"]})
+  if (mark == schema.marks["em"])
+    r.toggleEm = markItem(mark, {title: "Toggle emphasis", icon: icons["em"]})
+  if (mark == schema.marks["code"])
+    r.toggleCode = markItem(mark, {title: "Toggle code font", icon: icons["code"]})
+  if (mark == schema.marks["link"])
+    r.toggleLink = linkItem(mark)
+
+  let node: NodeType | undefined
+  if (node == schema.nodes["image"])
+    r.insertImage = insertImageItem(node)
+  if (node == schema.nodes["bullet_list"])
+    r.wrapBulletList = wrapListItem(node, {
+      title: "Wrap in bullet list",
+      icon: icons["bulletList"]
+    })
+  if (node == schema.nodes["ordered_list"])
+    r.wrapOrderedList = wrapListItem(node, {
+      title: "Wrap in ordered list",
+      icon: icons["orderedList"]
+    })
+  if (node == schema.nodes["blockquote"])
+    r.wrapBlockQuote = wrapItem(node, {
+      title: "Wrap in block quote",
+      icon: icons["blockquote"]
+    })
+  if (node == schema.nodes["paragraph"])
+    r.makeParagraph = blockTypeItem(node, {
+      title: "Change to paragraph",
+      label: "Plain"
+    })
+  if (node == schema.nodes["code_block"])
+    r.makeCodeBlock = blockTypeItem(node, {
+      title: "Change to code block",
+      label: "Code"
+    })
+  if (node == schema.nodes["heading"])
+    for (let i = 1; i <= 10; i++)
+      (r as any)["makeHead" + i] = blockTypeItem(node, {
+        title: "Change to heading " + i,
+        label: "Level " + i,
+        attrs: {level: i}
+      })
+  if (node == schema.nodes["horizontal_rule"]) {
+    let hr = node
+    r.insertHorizontalRule = new MenuItem({
+      title: "Insert horizontal rule",
+      label: "Horizontal rule",
+      enable(state) { return canInsert(state, hr) },
+      run(state, dispatch) { dispatch(state.tr.replaceSelectionWith(hr.create())) }
+    })
+  }
+
+  let cut = <T>(arr: T[]) => arr.filter(x => x) as NonNullable<T>[]
+  r.insertMenu = new Dropdown(cut([r.insertImage, r.insertHorizontalRule]), {label: "Insert"})
+  r.typeMenu = new Dropdown(cut([r.makeParagraph, r.makeCodeBlock, r.makeHead1 && new DropdownSubmenu(cut([
+    r.makeHead1, r.makeHead2, r.makeHead3, r.makeHead4, r.makeHead5, r.makeHead6
+  ]), {label: "Heading"})]), {label: "Type..."})
+
+  r.inlineMenu = [cut([r.toggleStrong, r.toggleEm, r.toggleCode, r.toggleLink])]
+  r.blockMenu = [cut([r.wrapBulletList, r.wrapOrderedList, r.wrapBlockQuote, joinUpItem,
+    liftItem, selectParentNodeItem])]
+  r.fullMenu = r.inlineMenu.concat([[r.insertMenu, r.typeMenu]], [[undoItem, redoItem]], r.blockMenu)
+
+  return r
+}
+
+export function blockQuoteRule(nodeType: NodeType) {
+  return wrappingInputRule(/^\s*>\s$/, nodeType)
+}
+
+/// Given a list node type, returns an input rule that turns a number
+/// followed by a dot at the start of a textblock into an ordered list.
+export function orderedListRule(nodeType: NodeType) {
+  return wrappingInputRule(/^(\d+)\.\s$/, nodeType, match => ({order: +match[1]}),
+    (match, node) => node.childCount + node.attrs["order"] == +match[1])
+}
+
+/// Given a list node type, returns an input rule that turns a bullet
+/// (dash, plush, or asterisk) at the start of a textblock into a
+/// bullet list.
+export function bulletListRule(nodeType: NodeType) {
+  return wrappingInputRule(/^\s*([-+*])\s$/, nodeType)
+}
+
+/// Given a code block node type, returns an input rule that turns a
+/// textblock starting with three backticks into a code block.
+export function codeBlockRule(nodeType: NodeType) {
+  return textblockTypeInputRule(/^```$/, nodeType)
+}
+
+/// Given a node type and a maximum level, creates an input rule that
+/// turns up to that number of `#` characters followed by a space at
+/// the start of a textblock into a heading whose level corresponds to
+/// the number of `#` signs.
+export function headingRule(nodeType: NodeType, maxLevel: number) {
+  return textblockTypeInputRule(new RegExp("^(#{1," + maxLevel + "})\\s$"),
+    nodeType, match => ({level: match[1].length}))
+}
+
+/// A set of input rules for creating the basic block quotes, lists,
+/// code blocks, and heading.
+export function buildInputRules(schema: Schema) {
+  let rules = smartQuotes.concat(ellipsis, emDash), type
+  if (type == schema.nodes["blockquote"]) rules.push(blockQuoteRule(type))
+  if (type == schema.nodes["ordered_list"]) rules.push(orderedListRule(type))
+  if (type == schema.nodes["bullet_list"]) rules.push(bulletListRule(type))
+  if (type == schema.nodes["code_block"]) rules.push(codeBlockRule(type))
+  if (type == schema.nodes["heading"]) rules.push(headingRule(type, 6))
+  return inputRules({rules})
+}
+
+/// Create an array of plugins pre-configured for the given schema.
+/// The resulting array will include the following plugins:
+///
+///  * Input rules for smart quotes and creating the block types in the
+///    schema using markdown conventions (say `"> "` to create a
+///    blockquote)
+///
+///  * A keymap that defines keys to create and manipulate the nodes in the
+///    schema
+///
+///  * A keymap binding the default keys provided by the
+///    prosemirror-commands module
+///
+///  * The undo history plugin
+///
+///  * The drop cursor plugin
+///
+///  * The gap cursor plugin
+///
+///  * A custom plugin that adds a `menuContent` prop for the
+///    prosemirror-menu wrapper, and a CSS class that enables the
+///    additional styling defined in `style/style.css` in this package
+///
+/// Probably only useful for quickly setting up a passable
+/// editor—you'll need more control over your settings in most
+/// real-world situations.
+export function basicSetup(options: {
+  /// The schema to generate key bindings and menu items for.
+  schema: Schema
+
+  /// Can be used to [adjust](#example-setup.buildKeymap) the key bindings created.
+  mapKeys?: {[key: string]: string | false}
+
+  /// Set to false to disable the menu bar.
+  menuBar?: boolean
+
+  /// Set to false to disable the history plugin.
+  history?: boolean
+
+  /// Set to false to make the menu bar non-floating.
+  floatingMenu?: boolean
+
+  /// Can be used to override the menu content.
+  menuContent?: MenuElement[][]
+}) {
+  let plugins = [
+    buildInputRules(options.schema),
+    keymap(buildKeymap(options.schema, options.mapKeys)),
+    keymap(baseKeymap),
+    dropCursor(),
+    gapCursor()
+  ]
+  if (options.menuBar !== false)
+    plugins.push(menuBar({floating: options.floatingMenu !== false,
+      content: options.menuContent || buildMenuItems(options.schema).fullMenu}))
+  if (options.history !== false)
+    plugins.push(history())
+
+  return plugins;/*.concat(new Plugin({
+    props: {
+      attributes: {class: "ProseMirror-example-setup-style"}
+    }
+  }))*/
+}
+
diff --git a/plugins/xt-editor/projects/editor/src/lib/register.ts b/plugins/xt-editor/projects/editor/src/lib/register.ts
new file mode 100644
index 00000000..15965ebb
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/lib/register.ts
@@ -0,0 +1,26 @@
+import { XtResolverService } from 'xt-components';
+import { EditorComponent } from './editor/editor.component';
+
+export function registerEditorPlugin (resolverService:XtResolverService):string {
+  const pluginName = "Plugin Editor";
+    console.info ('Registering ' +pluginName);
+    resolverService.registerPlugin ({
+        name:pluginName,
+        uriLogo:'pluginicon.png',
+        components: [
+            {
+              componentName:'Editor',
+              componentClass:EditorComponent,
+              typesHandled: ['markdown'],
+            }
+        ],
+      types: {
+        'markdown':'string'
+      }
+    });
+    return pluginName;
+}
+
+export function registerPlugin (resolverService:XtResolverService):string {
+  return registerEditorPlugin(resolverService);
+}
diff --git a/plugins/xt-editor/projects/editor/src/public-api.ts b/plugins/xt-editor/projects/editor/src/public-api.ts
new file mode 100644
index 00000000..3b65f09f
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/src/public-api.ts
@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of web plugin
+ */
+
+export * from './lib/editor/editor.component';
+export * from './lib/register';
diff --git a/plugins/xt-editor/projects/editor/tsconfig.lib.json b/plugins/xt-editor/projects/editor/tsconfig.lib.json
new file mode 100644
index 00000000..e28f812e
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/tsconfig.lib.json
@@ -0,0 +1,13 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}
diff --git a/plugins/xt-editor/projects/editor/tsconfig.lib.prod.json b/plugins/xt-editor/projects/editor/tsconfig.lib.prod.json
new file mode 100644
index 00000000..9215caac
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/tsconfig.lib.prod.json
@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
diff --git a/plugins/xt-editor/projects/editor/tsconfig.spec.json b/plugins/xt-editor/projects/editor/tsconfig.spec.json
new file mode 100644
index 00000000..48fcc2fd
--- /dev/null
+++ b/plugins/xt-editor/projects/editor/tsconfig.spec.json
@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}
diff --git a/plugins/xt-editor/tsconfig.json b/plugins/xt-editor/tsconfig.json
new file mode 100644
index 00000000..e95f63c0
--- /dev/null
+++ b/plugins/xt-editor/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "useDefineForClassFields": false,
+    "paths": {
+    }
+
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/plugins/xt-finance/projects/finance/src/lib/finance-amount/finance-amount.component.spec.ts b/plugins/xt-finance/projects/finance/src/lib/finance-amount/finance-amount.component.spec.ts
index 4bb1c4f0..9460972b 100644
--- a/plugins/xt-finance/projects/finance/src/lib/finance-amount/finance-amount.component.spec.ts
+++ b/plugins/xt-finance/projects/finance/src/lib/finance-amount/finance-amount.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FinanceAmountComponent } from './finance-amount.component';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { XtBaseContext } from 'xt-components';
+import { XtBaseContext, XtResolverService } from 'xt-components';
 import { MoneyAmount } from '../money-handler/money-amount';
+import { MoneyAmountHandler } from '../money-handler/money-amount-handler';
+import { registerFinancePlugin } from '../register';
 import { By } from '@angular/platform-browser';
 
 describe('FinanceAmountComponent', () => {
@@ -16,6 +18,7 @@ describe('FinanceAmountComponent', () => {
     })
     .compileComponents();
 
+    registerFinancePlugin(TestBed.inject(XtResolverService));
   });
 
   it('should display amount', () => {
@@ -35,4 +38,25 @@ describe('FinanceAmountComponent', () => {
     expect(textContent).contains('€');
 
   });
+
+  it('should be sortable by amount through its type handler', () => {
+    const resolverService = TestBed.inject(XtResolverService);
+    const found = resolverService.typeResolver.findTypeHandler('money-amount');
+    expect(found.typeName).toEqual('money-amount');
+    const handler = found.handler!;
+    expect(handler).toBeInstanceOf(MoneyAmountHandler);
+    expect(handler.isSortable()).toBe(true);
+
+    expect(handler.compareTo({ amount: 12.4, currency: 'EUR' }, { amount: 8, currency: 'EUR' })).toBeGreaterThan(0);
+    expect(handler.compareTo({ amount: 8, currency: 'EUR' }, { amount: 12.4, currency: 'USD' })).toBeLessThan(0);
+    expect(handler.compareTo({ amount: 5, currency: 'EUR' }, { amount: 5, currency: 'USD' })).toBe(0);
+
+    const amounts = [
+      { amount: 12, currency: 'EUR' },
+      { amount: 5, currency: 'USD' },
+      { amount: 8, currency: 'EUR' }
+    ];
+    const sorted = [...amounts].sort((a, b) => handler.compareTo(a, b));
+    expect(sorted.map((value) => value.amount)).toEqual([5, 8, 12]);
+  });
 });
diff --git a/plugins/xt-finance/projects/finance/src/lib/money-handler/money-amount-handler.ts b/plugins/xt-finance/projects/finance/src/lib/money-handler/money-amount-handler.ts
index e96104af..ff187fa5 100644
--- a/plugins/xt-finance/projects/finance/src/lib/money-handler/money-amount-handler.ts
+++ b/plugins/xt-finance/projects/finance/src/lib/money-handler/money-amount-handler.ts
@@ -18,4 +18,26 @@ export class MoneyAmountHandler extends AbstractTypeHandler<MoneyAmount> {
       return ret;
     }
 
+    /**
+     * Money amounts are always sortable
+     * @returns True
+     */
+    override isSortable(): boolean {
+      return true;
+    }
+
+    /**
+     * Compares two money amounts by their amount. Null values are always sorted first.
+     * @param value1 - The first money amount
+     * @param value2 - The second money amount
+     * @returns A negative number if value1 is smaller, zero if equal, a positive number if value1 is greater
+     */
+    override compareTo(value1: MoneyAmount, value2: MoneyAmount): number {
+      const amount1 = value1?.amount;
+      const amount2 = value2?.amount;
+      if (amount1 == null) return amount2 == null ? 0 : -1;
+      if (amount2 == null) return 1;
+      return amount1 - amount2;
+    }
+
 }
diff --git a/plugins/xt-intl/projects/intl/src/lib/country/country-type-handler.ts b/plugins/xt-intl/projects/intl/src/lib/country/country-type-handler.ts
new file mode 100644
index 00000000..46ea3d4f
--- /dev/null
+++ b/plugins/xt-intl/projects/intl/src/lib/country/country-type-handler.ts
@@ -0,0 +1,43 @@
+import { AbstractTypeHandler } from 'xt-type';
+import { getByAlpha3 } from 'countries-ts';
+
+/**
+ * Handles the country type, an ISO 3166-1 alpha-3 country code (e.g. 'FRA').
+ * Values are sorted by their country name.
+ */
+export class CountryTypeHandler extends AbstractTypeHandler<string> {
+
+  /**
+   * Countries are always sortable
+   * @returns True
+   */
+  override isSortable(): boolean {
+    return true;
+  }
+
+  /**
+   * Compares two countries by their country name. Null values are always sorted first.
+   * @param value1 - The first country code
+   * @param value2 - The second country code
+   * @returns A negative number if value1 is smaller, zero if equal, a positive number if value1 is greater
+   */
+  override compareTo(value1: string, value2: string): number {
+    const name1 = this.countryName(value1);
+    const name2 = this.countryName(value2);
+    if (name1 == null) return name2 == null ? 0 : -1;
+    if (name2 == null) return 1;
+    return name1.localeCompare(name2);
+  }
+
+  /**
+   * Resolves the display name of a country from its alpha-3 code
+   * @param code - The country code
+   * @returns The country name, or the code itself when it cannot be resolved
+   */
+  private countryName(code: string): string | null {
+    if (code == null) return null;
+    const country = getByAlpha3(code);
+    return country?.label ?? code;
+  }
+
+}
diff --git a/plugins/xt-intl/projects/intl/src/lib/country/intl-country.component.spec.ts b/plugins/xt-intl/projects/intl/src/lib/country/intl-country.component.spec.ts
index c609ddfc..43723299 100644
--- a/plugins/xt-intl/projects/intl/src/lib/country/intl-country.component.spec.ts
+++ b/plugins/xt-intl/projects/intl/src/lib/country/intl-country.component.spec.ts
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it } from 'vitest';
 import { registerInternationalPlugin } from '../register';
 import { XtBaseContext, XtResolverService } from 'xt-components';
 import { IntlCountryComponent } from './intl-country.component';
+import { CountryTypeHandler } from './country-type-handler';
 import { provideZonelessChangeDetection } from '@angular/core';
 
 describe('IntlCountryComponent', () => {
@@ -30,4 +31,22 @@ describe('IntlCountryComponent', () => {
     expect(component).toBeTruthy();
 
   });
+
+  it('should be sortable by country name through its type handler', () => {
+    const resolverService = TestBed.inject(XtResolverService);
+    const found = resolverService.typeResolver.findTypeHandler('country');
+    expect(found.typeName).toEqual('string');
+    const handler = found.handler!;
+    expect(handler).toBeInstanceOf(CountryTypeHandler);
+    expect(handler.isSortable()).toBe(true);
+
+    // FRA=France, DEU=Germany, BRA=Brazil, USA=United States of America
+    expect(handler.compareTo('FRA', 'DEU')).toBeLessThan(0);
+    expect(handler.compareTo('BRA', 'FRA')).toBeLessThan(0);
+    expect(handler.compareTo('FRA', 'FRA')).toBe(0);
+
+    const countries = ['FRA', 'DEU', 'BRA', 'USA'];
+    const sorted = [...countries].sort((a, b) => handler.compareTo(a, b));
+    expect(sorted).toEqual(['BRA', 'FRA', 'DEU', 'USA']);
+  });
 });
diff --git a/plugins/xt-intl/projects/intl/src/lib/currency/currency-type-handler.ts b/plugins/xt-intl/projects/intl/src/lib/currency/currency-type-handler.ts
new file mode 100644
index 00000000..1defb528
--- /dev/null
+++ b/plugins/xt-intl/projects/intl/src/lib/currency/currency-type-handler.ts
@@ -0,0 +1,29 @@
+import { AbstractTypeHandler } from 'xt-type';
+
+/**
+ * Handles the currency type, an ISO 4217 currency code (e.g. 'EUR', 'USD').
+ * Values are sorted by their code.
+ */
+export class CurrencyTypeHandler extends AbstractTypeHandler<string> {
+
+  /**
+   * Currency codes are always sortable
+   * @returns True
+   */
+  override isSortable(): boolean {
+    return true;
+  }
+
+  /**
+   * Compares two currency codes lexicographically. Null values are always sorted first.
+   * @param value1 - The first currency code
+   * @param value2 - The second currency code
+   * @returns A negative number if value1 is smaller, zero if equal, a positive number if value1 is greater
+   */
+  override compareTo(value1: string, value2: string): number {
+    if (value1 == null) return value2 == null ? 0 : -1;
+    if (value2 == null) return 1;
+    return value1.localeCompare(value2);
+  }
+
+}
diff --git a/plugins/xt-intl/projects/intl/src/lib/currency/intl-currency.component.spec.ts b/plugins/xt-intl/projects/intl/src/lib/currency/intl-currency.component.spec.ts
index 186ec800..96d94b07 100644
--- a/plugins/xt-intl/projects/intl/src/lib/currency/intl-currency.component.spec.ts
+++ b/plugins/xt-intl/projects/intl/src/lib/currency/intl-currency.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IntlCurrencyComponent } from './intl-currency.component';
+import { CurrencyTypeHandler } from './currency-type-handler';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { HostTestTypedComponent, HostTestTypedFormComponent, XtBaseContext, XtResolverService } from 'xt-components';
 import { registerInternationalPlugin } from '../register';
@@ -71,4 +72,21 @@ describe('XtCurrencyComponent', () => {
 
   });
 
+  it('should be sortable by currency code through its type handler', () => {
+    const resolverService = TestBed.inject(XtResolverService);
+    const found = resolverService.typeResolver.findTypeHandler('currency');
+    expect(found.typeName).toEqual('string');
+    const handler = found.handler!;
+    expect(handler).toBeInstanceOf(CurrencyTypeHandler);
+    expect(handler.isSortable()).toBe(true);
+
+    expect(handler.compareTo('EUR', 'USD')).toBeLessThan(0);
+    expect(handler.compareTo('USD', 'EUR')).toBeGreaterThan(0);
+    expect(handler.compareTo('EUR', 'EUR')).toBe(0);
+
+    const currencies = ['USD', 'EUR', 'AUD', 'GBP'];
+    const sorted = [...currencies].sort((a, b) => handler.compareTo(a, b));
+    expect(sorted).toEqual(['AUD', 'EUR', 'GBP', 'USD']);
+  });
+
 });
diff --git a/plugins/xt-intl/projects/intl/src/lib/register.ts b/plugins/xt-intl/projects/intl/src/lib/register.ts
index 71e12932..92d2c5f4 100644
--- a/plugins/xt-intl/projects/intl/src/lib/register.ts
+++ b/plugins/xt-intl/projects/intl/src/lib/register.ts
@@ -1,6 +1,8 @@
 import { XtResolverService } from 'xt-components';
 import { IntlCurrencyComponent } from './currency/intl-currency.component';
+import { CurrencyTypeHandler } from './currency/currency-type-handler';
 import { IntlCountryComponent } from './country/intl-country.component';
+import { CountryTypeHandler } from './country/country-type-handler';
 
 export function registerInternationalPlugin (resolverService:XtResolverService):string {
   const pluginName = "Plugin International";
@@ -26,7 +28,17 @@ export function registerInternationalPlugin (resolverService:XtResolverService):
           {
             currency:'string',
             country:'string'
+          },
+        typeHandlers: [
+          {
+            typesHandled: ['currency'],
+            handlerClass: CurrencyTypeHandler
+          },
+          {
+            typesHandled: ['country'],
+            handlerClass: CountryTypeHandler
           }
+        ]
     });
     return pluginName;
 }
diff --git a/plugins/xt-web/projects/web/src/lib/register.ts b/plugins/xt-web/projects/web/src/lib/register.ts
index 60e66c9c..0ad14f4c 100644
--- a/plugins/xt-web/projects/web/src/lib/register.ts
+++ b/plugins/xt-web/projects/web/src/lib/register.ts
@@ -1,6 +1,7 @@
 import { XtResolverService } from 'xt-components';
 import { WebImageComponent } from './web-image/web-image.component';
 import { WebLinkComponent } from './web-link/web-link.component';
+import { RatingTypeHandler } from './web-rating/rating-type-handler';
 import { WebRatingComponent } from './web-rating/web-rating.component';
 
 export function registerWebPlugin (resolverService:XtResolverService):string {
@@ -28,7 +29,13 @@ export function registerWebPlugin (resolverService:XtResolverService):string {
         'image':'string',
         'link':'string',
         'rating': 'number'
-      }
+      },
+      typeHandlers: [
+        {
+          typesHandled: ['rating'],
+          handlerClass: RatingTypeHandler
+        }
+      ]
     });
     return pluginName;
 }
diff --git a/plugins/xt-web/projects/web/src/lib/web-rating/rating-type-handler.ts b/plugins/xt-web/projects/web/src/lib/web-rating/rating-type-handler.ts
new file mode 100644
index 00000000..b38e9c73
--- /dev/null
+++ b/plugins/xt-web/projects/web/src/lib/web-rating/rating-type-handler.ts
@@ -0,0 +1,17 @@
+import { AbstractTypeHandler } from 'xt-type';
+
+/**
+ * Handles the rating type, an integer number (typically from 1 to 5).
+ * Values are sorted numerically thanks to the number base type.
+ */
+export class RatingTypeHandler extends AbstractTypeHandler<number> {
+
+  /**
+   * A new rating defaults to the minimum value
+   * @returns The minimum rating value
+   */
+  override createNew(): number {
+    return 1;
+  }
+
+}
diff --git a/plugins/xt-web/projects/web/src/lib/web-rating/web-rating.component.spec.ts b/plugins/xt-web/projects/web/src/lib/web-rating/web-rating.component.spec.ts
index f5bc10fe..755aeae9 100644
--- a/plugins/xt-web/projects/web/src/lib/web-rating/web-rating.component.spec.ts
+++ b/plugins/xt-web/projects/web/src/lib/web-rating/web-rating.component.spec.ts
@@ -1,10 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { WebRatingComponent } from './web-rating.component';
+import { RatingTypeHandler } from './rating-type-handler';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { XtBaseContext } from 'xt-components';
+import { StoreTestHelper, XtBaseContext, XtResolverService } from 'xt-components';
+import { registerWebPlugin } from '../register';
 
 describe('WebRatingComponent', () => {
   let component: WebRatingComponent;
@@ -18,6 +20,8 @@ describe('WebRatingComponent', () => {
     })
     .compileComponents();
 
+    StoreTestHelper.ensureTestProviderOnly();
+
     fixture = TestBed.createComponent(WebRatingComponent);
     const context=new XtBaseContext('FULL_VIEW');
     context.setDisplayValue(4);
@@ -29,4 +33,40 @@ describe('WebRatingComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should be sortable through its type handler', () => {
+    const resolverService = TestBed.inject(XtResolverService);
+    registerWebPlugin(resolverService);
+
+    const found = resolverService.typeResolver.findTypeHandler('rating');
+    expect(found.typeName).toEqual('number');
+    const handler = found.handler!;
+    expect(handler).toBeInstanceOf(RatingTypeHandler);
+    expect(handler.isSortable()).toBe(true);
+    expect(handler.createNew()).toBe(1);
+
+    expect(handler.compareTo(3, 5)).toBeLessThan(0);
+    expect(handler.compareTo(5, 3)).toBeGreaterThan(0);
+    expect(handler.compareTo(4, 4)).toBe(0);
+
+    const ratings = [4, 2, 5, 1, 3];
+    const sorted = [...ratings].sort((a, b) => handler.compareTo(a, b));
+    expect(sorted).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('should keep the rating handler sortable when used as a child type', () => {
+    const resolverService = TestBed.inject(XtResolverService);
+    registerWebPlugin(resolverService);
+    resolverService.registerTypes({
+      movieType: {
+        title: 'string',
+        rating: 'rating'
+      }
+    });
+
+    const found = resolverService.typeResolver.findTypeHandler('movieType', false, 'rating');
+    expect(found.typeName).toEqual('number');
+    expect(found.handler?.isSortable()).toBe(true);
+    expect(found.handler?.compareTo(2, 5)).toBeLessThan(0);
+  });
 });
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css
index 4f4098bd..825005bb 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css
+++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css
@@ -6,6 +6,23 @@
   padding-top: 0.5rem;
 }
 
+.carousel__toolbar {
+  border-radius: 1.25rem;
+  padding: 0.85rem 1rem;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 28px rgb(0 0 0 / 0.05);
+  margin-bottom: 1rem;
+}
+
+.carousel__toolbar .p-iconfield {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .carousel__toolbar .p-iconfield {
+    width: 20rem;
+  }
+}
+
 @media (max-width: 767px) {
   .carousel__state {
     min-height: 14rem;
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html
index 18cd3a39..3e8e96d2 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html
+++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html
@@ -3,6 +3,15 @@
 
 @if (entName != null) {
 
+  <p-toolbar class="carousel__toolbar">
+    <ng-template #start>
+      <p-iconfield>
+        <p-inputicon styleclass="pi pi-search" />
+        <input pInputText type="text" [value]="search()" (input)="onSearchInput($event)" placeholder="Search {{ entName }}..." />
+      </p-iconfield>
+    </ng-template>
+  </p-toolbar>
+
   @if (store?.loading()) {
     <!-- Loading state: spinner while fetching entities -->
     <div class="carousel__state">
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts
index 52b11f84..e76f100e 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts
+++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts
@@ -77,6 +77,92 @@ describe('Carousel Component', () => {
     expect(carouselComponent.nativeElement.textContent?.indexOf('Another Book')).not.toBe(-1);
   });
 
+  it('should filter carousel items by search string, case insensitive', async () => {
+    await storeTestBed.defineTestDataFor('CarouselTest', [{
+      name: 'Test Book',
+      published: new Date(1970,10, 5)
+    }, {
+      name: 'Another Book',
+      published: new Date(2010,7, 15)
+    }]);
+
+    fixture = TestBed.createComponent(CarouselComponent);
+    fixture.componentRef.setInput('config', {
+      entity: 'CarouselTest',
+      workflow: 'carousel',
+      data: { sort: { 'published': 'descending' } },
+      selection: { field: { key: 'published', type: 'closest-before' } }
+    } as DcWorkflowModel);
+
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    await XtUnitTestHelper.waitFor(() => {
+      const child = fixture.debugElement.query(By.directive(CarouselObjectSetComponent));
+      return child?.componentInstance.valueSet()?.length > 0;
+    });
+
+    const getChild = () => fixture.debugElement.query(By.directive(CarouselObjectSetComponent)).componentInstance as CarouselObjectSetComponent<any>;
+
+    // Initial state: both items displayed
+    expect(getChild().valueSet().length).toEqual(2);
+
+    // Filter with an uppercase search string -> should still match case-insensitively
+    const searchInput = fixture.debugElement.query(By.css('.carousel__toolbar input'));
+    expect(searchInput).toBeTruthy();
+    searchInput.nativeElement.value = 'ANOTHER';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const filtered = getChild().valueSet();
+    expect(filtered.length).toEqual(1);
+    expect(filtered[0].name).toEqual('Another Book');
+  });
+
+  it('should show all items again when the search is cleared', async () => {
+    await storeTestBed.defineTestDataFor('CarouselTest', [{
+      name: 'Test Book',
+      published: new Date(1970,10, 5)
+    }, {
+      name: 'Another Book',
+      published: new Date(2010,7, 15)
+    }]);
+
+    fixture = TestBed.createComponent(CarouselComponent);
+    fixture.componentRef.setInput('config', {
+      entity: 'CarouselTest',
+      workflow: 'carousel',
+      data: { sort: { 'published': 'descending' } }
+    } as DcWorkflowModel);
+
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    await XtUnitTestHelper.waitFor(() => {
+      const child = fixture.debugElement.query(By.directive(CarouselObjectSetComponent));
+      return child?.componentInstance.valueSet()?.length > 0;
+    });
+
+    const searchInput = fixture.debugElement.query(By.css('.carousel__toolbar input'));
+    searchInput.nativeElement.value = 'zzz';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const child = fixture.debugElement.query(By.directive(CarouselObjectSetComponent)).componentInstance as CarouselObjectSetComponent<any>;
+    expect(child.valueSet().length).toEqual(0);
+
+    searchInput.nativeElement.value = '';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(child.valueSet().length).toEqual(2);
+  });
+
   it('should select element on click', async () => {
     await storeTestBed.defineTestDataFor('CarouselTest', [{
       name: 'Test Book',
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts
index ba6f5253..9f7923ba 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts
+++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts
@@ -7,6 +7,10 @@ import { CarouselObjectSetComponent } from 'xt-plugin-default';
 import { ProgressSpinner } from 'primeng/progressspinner';
 import { Button } from 'primeng/button';
 import { Dialog } from 'primeng/dialog';
+import { Toolbar } from 'primeng/toolbar';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+import { InputText } from 'primeng/inputtext';
 import { FormBuilder, FormGroup, ReactiveFormsModule, PristineChangeEvent } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
@@ -28,7 +32,8 @@ import { Subscription } from 'rxjs';
   imports: [
     CarouselObjectSetComponent, NgClass,
     ProgressSpinner, XtRenderComponent,
-    ReactiveFormsModule, Button, Dialog
+    ReactiveFormsModule, Button, Dialog, Toolbar,
+    IconField, InputIcon, InputText
   ],
   templateUrl: './carousel.component.html',
   styleUrl: './carousel.component.css',
@@ -65,7 +70,7 @@ export class CarouselComponent <T extends ManagedData> extends AbstractDcWorkflo
    */
   carouselContext = computed(() => {
     const ctx = new XtBaseContext<any>('LIST_VIEW');
-    ctx.setDisplayValue(this.displayableElements(), this.entityName() + '[]');
+    ctx.setDisplayValue(this.searchedElements(), this.entityName() + '[]');
     return ctx;
   });
 
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.css b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.css
index b6342aed..0b8c96aa 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.css
+++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.css
@@ -39,6 +39,16 @@
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 28px rgb(0 0 0 / 0.05);
 }
 
+.list-details__toolbar .p-iconfield {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .list-details__toolbar .p-iconfield {
+    width: 20rem;
+  }
+}
+
 .list-details__actions {
   display: flex;
   flex-wrap: wrap;
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.html b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.html
index 271a0957..334ea0c1 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.html
+++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.html
@@ -14,7 +14,7 @@ <h1 class="list-details__title">{{ entName }}</h1>
 
       <!-- Toolbar with CRUD operations -->
       <p-toolbar class="list-details__toolbar">
-        <ng-template #center>
+        <ng-template #start>
           <div class="list-details__actions">
             <!-- Create new entity -->
             <p-button
@@ -59,6 +59,12 @@ <h1 class="list-details__title">{{ entName }}</h1>
             </p-button>
           </div>
         </ng-template>
+        <ng-template #center>
+          <p-iconfield>
+            <p-inputicon styleclass="pi pi-search" />
+            <input pInputText type="text" [value]="search()" (input)="onSearchInput($event)" placeholder="Search {{ entName }}..." pTooltip="Filters the list: only items containing the search text are shown" />
+          </p-iconfield>
+        </ng-template>
       </p-toolbar>
     </header>
 
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts
index 8fabc0fa..4256606a 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts
+++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts
@@ -68,6 +68,96 @@ describe('ListDetailsComponent', () => {
     expect(rows[1].nativeElement.textContent.indexOf('Test Book')).not.toEqual(-1);
   });
 
+  it('should filter the list by search string, case insensitive', async () => {
+    await storeTestBed.defineTestDataFor('TestBook', [{
+      name: 'Test Book',
+      published: new Date(1970,10, 5)
+    }, {
+      name: 'Another Book',
+      published: new Date(2010,7, 15)
+    }]);
+
+    fixture = TestBed.createComponent(ListDetailsComponent);
+    fixture.componentRef.setInput("config", {
+      entity: 'TestBook',
+      workflow: 'list-detail',
+      data: {
+        sort: {
+          'name':'ascending'
+        }
+      }
+    } as DcWorkflowModel);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+
+    let rows = fixture.debugElement.queryAll(By.css('tbody > tr'));
+    expect(rows).toHaveLength(2);
+
+    // Type an uppercase search string in the toolbar search box
+    const searchInput = fixture.debugElement.query(By.css('.list-details__toolbar input'));
+    expect(searchInput).toBeTruthy();
+    searchInput.nativeElement.value = 'ANOTHER';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    rows = fixture.debugElement.queryAll(By.css('tbody > tr'));
+    expect(rows).toHaveLength(1);
+    expect(rows[0].nativeElement.textContent.indexOf('Another Book')).not.toEqual(-1);
+  });
+
+  it('should show the whole list again when the search is cleared', async () => {
+    await storeTestBed.defineTestDataFor('TestBook', [{
+      name: 'Test Book',
+      published: new Date(1970,10, 5)
+    }, {
+      name: 'Another Book',
+      published: new Date(2010,7, 15)
+    }]);
+
+    fixture = TestBed.createComponent(ListDetailsComponent);
+    fixture.componentRef.setInput("config", {
+      entity: 'TestBook',
+      workflow: 'list-detail',
+      data: {
+        sort: {
+          'name':'ascending'
+        }
+      }
+    } as DcWorkflowModel);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+    await fixture.whenStable();
+
+    const searchInput = fixture.debugElement.query(By.css('.list-details__toolbar input'));
+    searchInput.nativeElement.value = 'zzz';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    let rows = fixture.debugElement.queryAll(By.css('tbody > tr'));
+    expect(rows).toHaveLength(0);
+
+    searchInput.nativeElement.value = '';
+    searchInput.nativeElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    rows = fixture.debugElement.queryAll(By.css('tbody > tr'));
+    expect(rows).toHaveLength(2);
+  });
+
 
   it('should support full lifecycle for simple values',async () => {
     const resolver = TestBed.inject(XtResolverService);
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts
index 935da581..58dd9c44 100644
--- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts
+++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts
@@ -16,6 +16,10 @@ import { ManagedData } from 'xt-type';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 import { Toolbar } from 'primeng/toolbar';
 import { Button } from 'primeng/button';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+import { InputText } from 'primeng/inputtext';
+import { Tooltip } from 'primeng/tooltip';
 import { Subscription } from 'rxjs';
 import { ProgressSpinner } from 'primeng/progressspinner';
 import { AbstractDcWorkflow } from 'dc-workflow';
@@ -35,7 +39,7 @@ import { AbstractDcWorkflow } from 'dc-workflow';
  */
 @Component({
   selector: 'wfw-list-details',
-  imports: [XtRenderComponent, ReactiveFormsModule, TabPanel, TabPanels, Tab, TabList, Tabs, Toolbar, Button, ProgressSpinner],
+  imports: [XtRenderComponent, ReactiveFormsModule, TabPanel, TabPanels, Tab, TabList, Tabs, Toolbar, Button, ProgressSpinner, IconField, InputIcon, InputText, Tooltip],
   providers: [],
   templateUrl: './list-details.component.html',
   styleUrl: './list-details.component.css',
@@ -89,7 +93,7 @@ export class ListDetailsComponent<T extends ManagedData> extends AbstractDcWorkf
    * Provides live preview of edits in the list view without requiring save.
    */
   displayedEntities = computed<T[]>(() => {
-    const entities = this.displayableElements();
+    const entities = this.searchedElements();
     const value = this.formValue();
     const selected = this.selectedEntity();
     if (value != null && selected != null && (selected as any)._id != null) {