feat(schema-engine): add Rich Text Editor field type (#5308)

frontend/src/app/modules/schema-engine/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,73 @@
+<div class="rte-wrapper" [class.rte-readonly]="readonly || isDisabled">
+
+  <!-- Toolbar (hidden in readonly mode) -->
+  @if (!readonly && !isDisabled) {
+    <div class="rte-toolbar" role="toolbar" aria-label="Text formatting">
+      @for (item of toolbarItems; track $index) {
+        @if (item.separator) {
+          <span class="rte-separator"></span>
+        } @else {
+          <button
+            type="button"
+            class="rte-btn"
+            [title]="item.title!"
+            (mousedown)="execCommand(item.command!, $event)"
+            tabindex="-1"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon"></i>
+            } @else {
+              <span class="rte-label">{{ item.label }}</span>
+            }
+          </button>
+        }
+      }
+    </div>
+  }
+
+  <!-- Editable area -->
+  <div
+    #editor
+    class="rte-editor"
+    [class.rte-empty]="isEmpty"
+    [attr.contenteditable]="(readonly || isDisabled) ? false : true"
+    [attr.data-placeholder]="placeholder"
+    (input)="onInput()"
+    (blur)="onBlur()"
+    role="textbox"
+    aria-multiline="true"
+    [attr.aria-label]="placeholder"
+    [attr.aria-readonly]="readonly || isDisabled"
+  ></div>
+
+  <!-- Inline link dialog -->
+  @if (showLinkDialog) {
+    <div class="rte-link-dialog" role="dialog" aria-modal="true" aria-label="Insert hyperlink">
+      <div class="rte-link-dialog-content">
+        <label class="rte-link-label">URL</label>
+        <input
+          class="rte-link-input p-inputtext"
+          type="url"
+          [(ngModel)]="linkUrl"
+          placeholder="https://example.com"
+          (keydown.enter)="insertLink()"
+          (keydown.escape)="cancelLink()"
+          autofocus
+        />
+        <div class="rte-link-actions">
+          <button
+            type="button"
+            class="guardian-button guardian-button-primary"
+            (click)="insertLink()"
+          >Insert</button>
+          <button
+            type="button"
+            class="guardian-button guardian-button-secondary"
+            (click)="cancelLink()"
+          >Cancel</button>
+        </div>
+      </div>
+    </div>
+  }
+
+</div>

frontend/src/app/modules/schema-engine/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,181 @@
+// ── Rich Text Editor ──────────────────────────────────────────────────────────
+
+.rte-wrapper {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--guardian-border-color, #d1d5db);
+    border-radius: 4px;
+    background: var(--guardian-input-bg, #ffffff);
+    width: 100%;
+    transition: border-color 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--guardian-focus-color, #3b82f6);
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+    }
+
+    &.rte-readonly {
+        background: var(--guardian-readonly-bg, #f9fafb);
+        border-color: var(--guardian-border-color, #d1d5db);
+
+        .rte-editor {
+            cursor: default;
+            color: var(--guardian-text-color, #374151);
+        }
+    }
+}
+
+// ── Toolbar ──────────────────────────────────────────────────────────────────
+
+.rte-toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 4px 6px;
+    border-bottom: 1px solid var(--guardian-border-color, #d1d5db);
+    background: var(--guardian-toolbar-bg, #f3f4f6);
+    border-radius: 4px 4px 0 0;
+}
+
+.rte-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: none;
+    background: transparent;
+    border-radius: 3px;
+    cursor: pointer;
+    color: var(--guardian-icon-color, #4b5563);
+    font-size: 13px;
+    font-weight: 600;
+    transition: background 0.1s ease, color 0.1s ease;
+
+    &:hover {
+        background: var(--guardian-btn-hover-bg, #e5e7eb);
+        color: var(--guardian-primary-color, #1d4ed8);
+    }
+
+    &:active {
+        background: var(--guardian-btn-active-bg, #dbeafe);
+    }
+
+    i {
+        font-size: 12px;
+    }
+}
+
+.rte-label {
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.rte-separator {
+    display: inline-block;
+    width: 1px;
+    height: 20px;
+    background: var(--guardian-border-color, #d1d5db);
+    margin: 0 4px;
+}
+
+// ── Editor area ───────────────────────────────────────────────────────────────
+
+.rte-editor {
+    min-height: 80px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 8px 12px;
+    outline: none;
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--guardian-text-color, #111827);
+    word-break: break-word;
+
+    // Placeholder via pseudo-element
+    &.rte-empty::before {
+        content: attr(data-placeholder);
+        color: var(--guardian-placeholder-color, #9ca3af);
+        pointer-events: none;
+        position: absolute;
+        // fallback – absolute won't work without relative parent, use float trick
+    }
+
+    // Resets for editable content
+    &:focus { outline: none; }
+
+    // Style pasted / user content
+    b, strong { font-weight: 700; }
+    i, em     { font-style: italic; }
+    u         { text-decoration: underline; }
+
+    h1, h2, h3 {
+        margin: 0.4em 0 0.2em;
+        font-weight: 700;
+        line-height: 1.3;
+    }
+    h1 { font-size: 1.5em; }
+    h2 { font-size: 1.25em; }
+    h3 { font-size: 1.1em; }
+
+    ul, ol {
+        margin: 0.3em 0 0.3em 1.6em;
+        padding: 0;
+    }
+    ul { list-style-type: disc; }
+    ol { list-style-type: decimal; }
+
+    a {
+        color: var(--guardian-link-color, #2563eb);
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+    p, div { margin: 0.2em 0; }
+}
+
+// ── Link dialog ───────────────────────────────────────────────────────────────
+
+.rte-link-dialog {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 100%;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.rte-link-dialog-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #fff;
+    border: 1px solid var(--guardian-border-color, #d1d5db);
+    border-radius: 6px;
+    padding: 8px 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    flex-wrap: wrap;
+}
+
+.rte-link-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    white-space: nowrap;
+}
+
+.rte-link-input {
+    flex: 1;
+    min-width: 200px;
+    font-size: 13px;
+}
+
+.rte-link-actions {
+    display: flex;
+    gap: 6px;
+}