Add embedding option in text editor

client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.html

@@ -1,35 +1,142 @@
-<h1 mat-dialog-title translate>Insert/edit link</h1>
-<div mat-dialog-content>
-    <div>
-        <mat-form-field>
-            <mat-label translate>URL</mat-label>
-            <input matInput [(ngModel)]="link.href" />
-        </mat-form-field>
+<div
+    aria-label="Insert/edit external link"
+    cdkFocusInitial
+    class="title"
+    role="button"
+    tabindex="0"
+    (click)="toggleArrow('toggleExternalReference')"
+    (keydown.enter)="toggleArrow('toggleExternalReference')"
+    (keydown.space)="toggleArrow('toggleExternalReference')"
+>
+    <div class="references">
+        <h1 aria-label="Insert/edit external link" mat-dialog-title translate>Insert/edit external link</h1>
+        <button #btn class="arrows" matIconButton (click)="toggleArrow('toggleExternalReference')">
+            @if (toggleExternalReference) {
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            } @else {
+                <mat-icon>keyboard_arrow_down</mat-icon>
+            }
+        </button>
     </div>
-
-    <div>
-        @if (data.needsText) {
+</div>
+@if (toggleExternalReference) {
+    <div mat-dialog-content [formGroup]="externalLink">
+        <div class="card-grid">
+            <mat-form-field>
+                <mat-label translate>URL</mat-label>
+                <input formControlName="extUrl" matInput />
+            </mat-form-field>
+        </div>
+        <div>
+            @if (data.needsText) {
+                <mat-form-field>
+                    <mat-label translate>Text to display</mat-label>
+                    <input formControlName="extText" matInput />
+                </mat-form-field>
+            }
+        </div>
+        <div>
             <mat-form-field>
-                <mat-label translate>Text to display</mat-label>
-                <input matInput [(ngModel)]="text" />
+                <mat-label translate>Open link in ...</mat-label>
+                <select formControlName="extDisplayMode" matNativeControl>
+                    <option translate value="_self">Current window</option>
+                    <option translate value="_blank">New window</option>
+                </select>
             </mat-form-field>
-        }
+        </div>
     </div>
-
-    <div>
-        <mat-form-field>
-            <mat-label translate>Open link in ...</mat-label>
-            <select matNativeControl [(ngModel)]="link.target">
-                <option translate value="_self">Current window</option>
-                <option translate value="_blank">New window</option>
-            </select>
-        </mat-form-field>
+}
+<div
+    cdkTrapFocus
+    class="title"
+    role="button"
+    tabindex="0"
+    (click)="toggleArrow('toggleInternalReference')"
+    (keydown.enter)="toggleArrow('toggleInternalReference')"
+    (keydown.space)="toggleArrow('toggleInternalReference')"
+>
+    <div class="references">
+        <h1 aria-label="Link a topic/motion/assignment" mat-dialog-title translate>Link a topic/motion/assignment</h1>
+        <button class="arrows" matIconButton (click)="toggleArrow('toggleInternalReference')">
+            @if (toggleInternalReference) {
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            } @else {
+                <mat-icon>keyboard_arrow_down</mat-icon>
+            }
+        </button>
     </div>
 </div>
-<div mat-dialog-actions>
-    <button color="accent" mat-button translate [disabled]="!link.href" (click)="save()">Ok</button>
+@if (toggleInternalReference) {
+    <div mat-dialog-content>
+        <div class="card-grid" [formGroup]="internalRadioOptions">
+            <mat-radio-group aria-label="Select an option" class="radio-group" formControlName="options">
+                <mat-radio-button
+                    aria-label="Topics"
+                    translate
+                    [disabled]="!!externalUrl"
+                    [value]="0"
+                    (click)="changeEditMode()"
+                >
+                    Topics
+                </mat-radio-button>
+                <mat-radio-button
+                    aria-label="Motions"
+                    translate
+                    [disabled]="!!externalUrl"
+                    [value]="1"
+                    (click)="changeEditMode()"
+                >
+                    Motions
+                </mat-radio-button>
+                <mat-radio-button
+                    aria-label="Assignments"
+                    translate
+                    [disabled]="!!externalUrl"
+                    [value]="2"
+                    (click)="changeEditMode()"
+                >
+                    Assignments
+                </mat-radio-button>
+            </mat-radio-group>
+            <mat-form-field [formGroup]="internalReferenceForm">
+                <mat-label translate>
+                    {{ searchLists[selectedRepoValue].label }}
+                </mat-label>
+                @for (searchRepo of searchRepos; track $index) {
+                    @if (selectedRepoValue === $index) {
+                        <os-repo-search-selector
+                            formControlName="{{ searchLists[$index].label }}FormControl"
+                            [disabled]="!!externalUrl"
+                            [keepOpen]="searchRepo.keepOpen"
+                            [repo]="searchRepo"
+                            [subscriptionConfig]="subscriptionConfig"
+                            [wider]="searchRepo.wider"
+                        ></os-repo-search-selector>
+                    }
+                }
+            </mat-form-field>
+        </div>
+        <div class="clear-button">
+            <button aria-label="Reset" color="gray" mat-icon-button translate (click)="initForm()">
+                <mat-icon>clear</mat-icon>
+            </button>
+        </div>
+    </div>
+}
+
+<div class="matDialogActions" mat-dialog-actions>
+    <button
+        aria-label="Ok"
+        color="accent"
+        mat-button
+        translate
+        [disabled]="!externalUrl && !this.item"
+        (click)="save()"
+    >
+        Ok
+    </button>
     @if (isUpdate) {
-        <button color="warn" mat-button translate (click)="removeLink()">Remove link</button>
+        <button aria-label="Remove link" color="warn" mat-button translate (click)="removeLink()">Remove link</button>
     }
-    <button mat-button translate (click)="cancel()">Cancel</button>
+    <button aria-label="Cancel" mat-button translate (click)="cancel()">Cancel</button>
 </div>

client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.scss

@@ -1,3 +1,43 @@
 mat-form-field {
     width: 100%;
 }
+
+.radio-group {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 5px;
+}
+
+.references {
+    display: flex;
+
+    .arrows {
+        display: flex;
+        margin-top: 7px;
+        margin-left: auto;
+        transform: translateX(-20px);
+    }
+}
+
+// How the focus is highlighted must be discussed further. Actual style is provisional.
+
+.title {
+    padding: 0;
+}
+
+.title:focus {
+    padding: 0;
+    outline: none;
+    box-shadow: none;
+    & h1 {
+        background-color: #eee;
+        border-radius: 25px;
+    }
+}
+
+.clear-button {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -15px;
+    margin-bottom: -20px;
+}