From ae6bb54be8f769a178c3be13a2e83ccf32ecb740 Mon Sep 17 00:00:00 2001
From: Kartheek Palla <palla.kartheekreddy@gmail.com>
Date: Tue, 1 Jun 2021 16:11:42 +0530
Subject: [PATCH] Revert "#SB-23246 fix: fixing the rich text editor issue"
---
package.json | 1 +
projects/common-form-elements/ng-package.json | 3 +-
projects/common-form-elements/package.json | 3 +-
.../src/lib/common-form-config.ts | 1 +
.../dynamic-field/dynamic-field.directive.ts | 3 +-
.../dynamic-form/dynamic-form.component.ts | 21 +++++-
.../dynamic-richtext.component.css | 1 +
.../dynamic-richtext.component.html | 6 +-
.../dynamic-richtext.component.ts | 65 ++++++++++++++++++-
9 files changed, 94 insertions(+), 10 deletions(-)
diff --git a/package.json b/package.json
index eb9905c..be1a844 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@ionic/angular-toolkit": "^2.0.0",
+ "@project-sunbird/ckeditor-build-classic": "0.0.4",
"@project-sunbird/client-services": "3.8.6",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
diff --git a/projects/common-form-elements/ng-package.json b/projects/common-form-elements/ng-package.json
index 4d7d88f..f1fe2b0 100644
--- a/projects/common-form-elements/ng-package.json
+++ b/projects/common-form-elements/ng-package.json
@@ -7,6 +7,7 @@
"whitelistedNonPeerDependencies": [
"immutable",
"ngx-chips",
- "moment"
+ "moment",
+ "@project-sunbird/ckeditor-build-classic"
]
}
diff --git a/projects/common-form-elements/package.json b/projects/common-form-elements/package.json
index 74df1a5..222a9be 100644
--- a/projects/common-form-elements/package.json
+++ b/projects/common-form-elements/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"immutable": "^4.0.0-rc.12",
- "moment": "^2.29.1"
+ "moment": "^2.29.1",
+ "@project-sunbird/ckeditor-build-classic": "0.0.4"
}
}
diff --git a/projects/common-form-elements/src/lib/common-form-config.ts b/projects/common-form-elements/src/lib/common-form-config.ts
index 5d1d806..26fd156 100644
--- a/projects/common-form-elements/src/lib/common-form-config.ts
+++ b/projects/common-form-elements/src/lib/common-form-config.ts
@@ -137,4 +137,5 @@ export interface CustomFormControl extends FormControl {
termsForDependantFields?: any;
customEventHandler$?: Subject<any>;
shouldListenToCustomEvent?: Boolean;
+ richTextCharacterCount?: any;
}
diff --git a/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts b/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts
index c4df120..e2c8785 100644
--- a/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts
+++ b/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts
@@ -38,7 +38,8 @@ const componentMapper = {
checkbox: DynamicCheckboxComponent,
timer: DynamicTimerComponent,
framework: DynamicFrameworkComponent,
- frameworkCategorySelect: DynamicFrameworkCategorySelectComponent
+ frameworkCategorySelect: DynamicFrameworkCategorySelectComponent,
+ richtext: DynamicRichtextComponent
};
@Directive({
diff --git a/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts b/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts
index 78de473..6f2304b 100644
--- a/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts
+++ b/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts
@@ -241,10 +241,18 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy {
validationList.push(Validators.pattern(element.validations[i].value as string));
break;
case 'minLength':
+ if (element.inputType === 'richtext') {
+ validationList.push(this.validateRichTextLength.bind(this, 'minLength' , '<', element.validations[i].value ));
+ } else {
validationList.push(Validators.minLength(element.validations[i].value as number));
+ }
break;
case 'maxLength':
+ if (element.inputType === 'richtext') {
+ validationList.push(this.validateRichTextLength.bind(this, 'maxLength' , '>', element.validations[i].value ));
+ } else {
validationList.push(Validators.maxLength(element.validations[i].value as number));
+ }
break;
case 'min':
validationList.push(Validators.min(element.validations[i].value as number));
@@ -337,5 +345,16 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy {
return null;
// return result ? {compare: true} : null;
}
-
+ validateRichTextLength(validationType, keyOperator, validationValue, control: AbstractControl): ValidationErrors | null {
+ let comp;
+ if (control.touched) {
+ comp = FieldComparator.operators[keyOperator](control['richTextCharacterCount'], validationValue);
+ } else {
+ comp = false;
+ }
+ if (comp && (control.touched || control.dirty)) {
+ return { [_.toLower(validationType)]: true };
+ }
+ return null;
+}
}
diff --git a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.css b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.css
index 8437110..8f51d27 100644
--- a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.css
+++ b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.css
@@ -65,3 +65,4 @@ label {
padding: 0 4px;
}
+ .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw{transform:inherit !important}
\ No newline at end of file
diff --git a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.html b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.html
index 981ddcf..4329634 100644
--- a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.html
+++ b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.html
@@ -5,10 +5,10 @@
<div class="prefix" *ngIf="prefix">
<span>{{prefix}}</span>
</div>
- <textarea id="richTextCount" [formControl]="formControlRef" [class.valid]="formControlRef.valid &&
+ <textarea *ngIf="showEditor" id="richTextCount" #EDITOR [formControl]="formControlRef" [class.valid]="formControlRef.valid &&
(formControlRef.dirty || formControlRef.touched)" [class.invalid]="formControlRef.invalid &&
-(formControlRef.dirty || formControlRef.touched)" class="sb-textbox {{disabled}}
- " placeholder={{placeholder}} type="text"
+(formControlRef.dirty || formControlRef.touched)" class="sb-textbox {{disabled}} ck ck-reset ck-editor ck-rounded-corners
+ck ck-reset ck-editor ck-rounded-corners " placeholder={{placeholder}} type="text"
[attr.disabled]="disabled ? true : null"></textarea>
<div class="async-icons" *ngIf="asyncValidation && asyncValidation?.trigger">
</div>
diff --git a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.ts b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.ts
index 7eeda10..b22814c 100644
--- a/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.ts
+++ b/projects/common-form-elements/src/lib/dynamic-richtext/dynamic-richtext.component.ts
@@ -1,13 +1,16 @@
-import { Component, Input, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, OnInit, AfterViewInit, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
import { FieldConfigAsyncValidation, CustomFormControl } from '../common-form-config';
+import ClassicEditor from '@project-sunbird/ckeditor-build-classic';
import * as _ from 'lodash-es';
@Component({
selector: 'sb-dynamic-richtext',
templateUrl: './dynamic-richtext.component.html',
styleUrls: ['./dynamic-richtext.component.css'],
+ encapsulation: ViewEncapsulation.None,
})
export class DynamicRichtextComponent implements OnInit, AfterViewInit {
+ @ViewChild('EDITOR', { static: false }) public editorRef: ElementRef;
@Input() asyncValidation?: FieldConfigAsyncValidation;
@Input() label: String;
@Input() labelHtml: any;
@@ -20,13 +23,39 @@ export class DynamicRichtextComponent implements OnInit, AfterViewInit {
@Input() disabled: Boolean;
@Input() visible: Boolean;
@ViewChild('validationTrigger', { static: false }) validationTrigger: ElementRef;
-
+ showEditor = false;
+ editorConfig: any;
+ editorInstance: any;
+ characterCount: any;
constructor() { }
ngOnInit() {
+ this.editorConfig = {
+ toolbar: ['bold', '|', 'italic', '|', 'underline', '|', 'insertTable',
+ '|', 'numberedList', '|', 'BulletedList', '|', 'fontSize', '|',
+ ],
+ fontSize: {
+ options: [
+ 9,
+ 11,
+ 13,
+ 15,
+ 17,
+ 19,
+ 21,
+ 23,
+ 25
+ ]
+ },
+ isReadOnly: this.disabled,
+ removePlugins: ['ImageCaption', 'mathtype', 'ChemType']
+ };
+ this.showEditor = true;
}
ngAfterViewInit() {
-
+ if (this.visible) {
+ this.initializeEditors();
+ }
if (this.asyncValidation && this.asyncValidation.asyncValidatorFactory && this.formControlRef) {
if (this.formControlRef.asyncValidator) {
return;
@@ -38,4 +67,34 @@ export class DynamicRichtextComponent implements OnInit, AfterViewInit {
}
}
+ initializeEditors() {
+ ClassicEditor.create(this.editorRef.nativeElement, {
+ extraPlugins: ['Font', 'Table'],
+ toolbar: this.editorConfig.toolbar,
+ fontSize: this.editorConfig.fontSize,
+ isReadOnly: this.editorConfig.isReadOnly,
+ removePlugins: this.editorConfig.removePlugins,
+ wordCount: {
+ onUpdate: stats => {
+ this.characterCount = stats.characters;
+ },
+ }
+ })
+ .then(editor => {
+ this.editorInstance = editor;
+
+ editor.isReadOnly = this.disabled;
+ this.onChangeEditor(this.editorInstance);
+ })
+ .catch(error => {
+ console.error(error.stack);
+ });
+ }
+ onChangeEditor(editor) {
+ editor.model.document.on('change', (eventInfo, batch) => {
+ this.formControlRef.markAsTouched();
+ this.formControlRef.richTextCharacterCount = this.characterCount;
+ this.formControlRef.patchValue(editor.getData());
+ });
+ }
}
\ No newline at end of file
--
GitLab