inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-12723] Move rich text editor in Process cloud (#8283)

Browse Source 
* move rich text editor in Process cloud

* fix import

* fix

* fix
This commit is contained in:
Eugenio Romano
2023-03-07 14:12:36 +01:00
committed by GitHub
parent 29132ec5c8
commit 8db863219c
33 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/core/src/lib/core.module.ts
View File

@@ -58,7 +58,6 @@ import { SearchTextModule } from './search-text/search-text-input.module';
import { AlfrescoJsClientsModule } from '@alfresco/adf-core/api';
import { AuthenticationInterceptor, Authentication } from '@alfresco/adf-core/auth';
import { LegacyApiClientModule } from './api-factories/legacy-api-client.module';
import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module';
import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthenticationService } from './auth/services/authentication.service';
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
@@ -112,7 +111,6 @@ const defaultConfig: Config = { useAngularBasedHttpClientInAlfrescoJs: false };
BlankPageModule,
LegacyApiClientModule,
AlfrescoJsClientsModule,
RichTextEditorModule,
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'CSRF-TOKEN',
@@ -151,8 +149,7 @@ const defaultConfig: Config = { useAngularBasedHttpClientInAlfrescoJs: false };
IconModule,
NotificationHistoryModule,
SearchTextModule,
BlankPageModule,
RichTextEditorModule
BlankPageModule
]
})
export class CoreModule {

4
lib/core/src/lib/form/components/widgets/core/form-field-types.ts
View File

@@ -22,6 +22,8 @@ export class FormFieldTypes {
static GROUP: string = 'group';
static DYNAMIC_TABLE: string = 'dynamic-table';
static TEXT: string = 'text';
static STRING: string = 'string';
static INTEGER: string = 'integer';
static MULTILINE_TEXT: string = 'multi-line-text';
static DROPDOWN: string = 'dropdown';
static HYPERLINK: string = 'hyperlink';
@@ -42,6 +44,8 @@ export class FormFieldTypes {
static PROPERTIES_VIEWER: string = 'properties-viewer';
static ALFRESCO_FILE_VIEWER: string = 'file-viewer';
static VIEWER: string = 'base-viewer';
static DISPLAY_RICH_TEXT: string = 'display-rich-text';
static JSON: string = 'json';
static READONLY_TYPES: string[] = [
FormFieldTypes.HYPERLINK,

3
lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.html
View File

@@ -1,3 +0,0 @@
<div class="adf-display-rich-text-widget">
<div class="adf-display-rich-text-widget-parsed-html" [innerHTML]="parsedHTML"></div>
</div>

22
lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss
View File

@@ -1,22 +0,0 @@
.adf-display-rich-text-widget {
padding: 10px;
pre {
min-height: 100px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
color: #41314e;
line-height: 1.6em;
font-size: 12px;
background: #f8f7fa;
border: 1px solid #f1f1f4;
box-shadow: none;
white-space: pre;
word-wrap: normal;
overflow-x: auto;
resize: vertical;
border-radius: 3px;
padding: 10px 12px;
outline: none;
width: 100%;
}
}

90
lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts
View File

@@ -1,90 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CoreTestingModule, setupTestBed } from '../../../../testing';
import { DisplayRichTextWidgetComponent } from './display-rich-text.widget';
describe('DisplayRichTextWidgetComponent', () => {
let widget: DisplayRichTextWidgetComponent;
let fixture: ComponentFixture<DisplayRichTextWidgetComponent>;
let debugEl: DebugElement;
const cssSelector = {
parsedHTML: '.adf-display-rich-text-widget-parsed-html'
};
const fakeFormField: any = {
id: 'fake-form-field',
name: 'fake-label',
value: {
time: 1658154611110,
blocks: [
{
id: '1',
type: 'header',
data: {
text: 'Editor.js',
level: 1
}
}
],
version: 1
},
required: false,
readOnly: false,
overrideId: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
params: {
existingColspan: 1,
maxColspan: 1
}
};
setupTestBed({
imports: [
CoreTestingModule
]
});
beforeEach(() => {
fixture = TestBed.createComponent(DisplayRichTextWidgetComponent);
widget = fixture.componentInstance;
debugEl = fixture.debugElement;
widget.field = fakeFormField;
});
it('should create', () => {
fixture.detectChanges();
expect(widget).toBeTruthy();
});
it('should parse editorjs data to html', async () => {
const expectedHtml = '<h1>Editor.js</h1>';
fixture.detectChanges();
await fixture.whenStable();
const parsedHtmlEl = debugEl.query(By.css(cssSelector.parsedHTML));
expect(parsedHtmlEl.nativeElement.innerHTML).toEqual(expectedHtml);
});
});

55
lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts
View File

@@ -1,55 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
/* cspell:disable-next-line */
import edjsHTML from 'editorjs-html';
@Component({
selector: 'display-rich-text',
templateUrl: './display-rich-text.widget.html',
styleUrls: ['./display-rich-text.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',
'(change)': 'event($event)',
'(focus)': 'event($event)',
'(focusin)': 'event($event)',
'(focusout)': 'event($event)',
'(input)': 'event($event)',
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
encapsulation: ViewEncapsulation.None
})
export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit {
parsedHTML: any;
constructor(public formService: FormService) {
super(formService);
}
ngOnInit(): void {
/* cspell:disable-next-line */
this.parsedHTML = edjsHTML().parseStrict(this.field.value).join('\n');
}
}

5
lib/core/src/lib/form/components/widgets/index.ts
View File

@@ -30,7 +30,6 @@ import { TextWidgetComponent } from './text/text.widget';
import { DateTimeWidgetComponent } from './date-time/date-time.widget';
import { JsonWidgetComponent } from './json/json.widget';
import { BaseViewerWidgetComponent } from './base-viewer/base-viewer.widget';
import { DisplayRichTextWidgetComponent } from './display-rich-text/display-rich-text.widget';
// core
export * from './widget.component';
@@ -50,7 +49,6 @@ export * from './error/error.component';
export * from './date-time/date-time.widget';
export * from './json/json.widget';
export * from './base-viewer/base-viewer.widget';
export * from './display-rich-text/display-rich-text.widget';
export * from './text/text-mask.component';
export const WIDGET_DIRECTIVES: any[] = [
@@ -66,8 +64,7 @@ export const WIDGET_DIRECTIVES: any[] = [
ErrorWidgetComponent,
DateTimeWidgetComponent,
JsonWidgetComponent,
BaseViewerWidgetComponent,
DisplayRichTextWidgetComponent
BaseViewerWidgetComponent
];
export const MASK_DIRECTIVE: any[] = [

8
lib/core/src/lib/form/services/form-rendering.service.spec.ts
View File

@@ -20,8 +20,7 @@ import {
FormFieldTypes,
UnknownWidgetComponent,
TextWidgetComponent,
JsonWidgetComponent,
DisplayRichTextWidgetComponent
JsonWidgetComponent
} from '../components/widgets';
import { FormRenderingService } from './form-rendering.service';
@@ -101,9 +100,4 @@ describe('FormRenderingService', () => {
expect(type).toBe(JsonWidgetComponent);
});
it('should resolve Display Rich Text widget for display-rich-text field type', () => {
const resolver = service.getComponentTypeResolver('display-rich-text');
const type = resolver(null);
expect(type).toBe(DisplayRichTextWidgetComponent);
});
});

34
lib/core/src/lib/form/services/form-rendering.service.ts
View File

@@ -15,9 +15,14 @@
* limitations under the License.
*/
import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../common/services/dynamic-component-mapper.service';
import {
DynamicComponentMapper,
DynamicComponentResolveFunction,
DynamicComponentResolver
} from '../../common/services/dynamic-component-mapper.service';
import { Injectable, Type } from '@angular/core';
import * as widgets from '../components/widgets';
import { FormFieldTypes } from '../components/widgets';
/* eslint-disable id-blacklist */
@Injectable({
@@ -27,19 +32,18 @@ export class FormRenderingService extends DynamicComponentMapper {
protected defaultValue: Type<any> = widgets.UnknownWidgetComponent;
protected types: { [key: string]: DynamicComponentResolveFunction } = {
text: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
string: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
integer: DynamicComponentResolver.fromType(widgets.NumberWidgetComponent),
'multi-line-text': DynamicComponentResolver.fromType(widgets.MultilineTextWidgetComponentComponent),
boolean: DynamicComponentResolver.fromType(widgets.CheckboxWidgetComponent),
date: DynamicComponentResolver.fromType(widgets.DateWidgetComponent),
amount: DynamicComponentResolver.fromType(widgets.AmountWidgetComponent),
hyperlink: DynamicComponentResolver.fromType(widgets.HyperlinkWidgetComponent),
'readonly-text': DynamicComponentResolver.fromType(widgets.DisplayTextWidgetComponent),
json: DynamicComponentResolver.fromType(widgets.JsonWidgetComponent),
readonly: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
datetime: DynamicComponentResolver.fromType(widgets.DateTimeWidgetComponent),
'base-viewer': DynamicComponentResolver.fromType(widgets.BaseViewerWidgetComponent),
'display-rich-text': DynamicComponentResolver.fromType(widgets.DisplayRichTextWidgetComponent)
[FormFieldTypes.TEXT]: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
[FormFieldTypes.STRING]: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
[FormFieldTypes.INTEGER]: DynamicComponentResolver.fromType(widgets.NumberWidgetComponent),
[FormFieldTypes.MULTILINE_TEXT]: DynamicComponentResolver.fromType(widgets.MultilineTextWidgetComponentComponent),
[FormFieldTypes.BOOLEAN]: DynamicComponentResolver.fromType(widgets.CheckboxWidgetComponent),
[FormFieldTypes.DATE]: DynamicComponentResolver.fromType(widgets.DateWidgetComponent),
[FormFieldTypes.AMOUNT]: DynamicComponentResolver.fromType(widgets.AmountWidgetComponent),
[FormFieldTypes.HYPERLINK]: DynamicComponentResolver.fromType(widgets.HyperlinkWidgetComponent),
[FormFieldTypes.READONLY_TEXT]: DynamicComponentResolver.fromType(widgets.DisplayTextWidgetComponent),
[FormFieldTypes.JSON]: DynamicComponentResolver.fromType(widgets.JsonWidgetComponent),
[FormFieldTypes.DISPLAY_VALUE]: DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
[FormFieldTypes.DATETIME]: DynamicComponentResolver.fromType(widgets.DateTimeWidgetComponent),
[FormFieldTypes.VIEWER]: DynamicComponentResolver.fromType(widgets.BaseViewerWidgetComponent)
};
}

72
lib/core/src/lib/rich-text-editor/editorjs-config.ts
View File

@@ -1,72 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/** Plugin import */
import CodeTool from '@editorjs/code';
import Header from '@editorjs/header';
import InlineCode from '@editorjs/inline-code';
import List from '@editorjs/list';
import Marker from '@editorjs/marker';
import Underline from '@editorjs/underline';
import ChangeFontSize from '@quanzo/change-font-size';
import ColorPlugin from 'editorjs-text-color-plugin';
export const editorJsConfig = {
autofocus: true,
logLevel: 'ERROR',
tools: {
underline: {
class: Underline,
shortcut: 'CMD+U'
},
header: {
class: Header,
inlineToolbar: true
},
list: {
class: List,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
}
},
Color: {
class: ColorPlugin,
config: {
customPicker: true,
colorCollections: ['#FF1300', '#ffa500', '#9C27B0', '#673AB7', '#3F51B5', '#0070FF', '#03A9F4', '#00BCD4', '#5f9ea0', '#4CAF50', '#8BC34A', '#CDDC39', '#FFF', '#000', '#c0c0c0', '#808080', '#800000'],
defaultColor: '#FF1300',
type: 'text'
}
},
Marker: {
class: Marker,
shortcut: 'CMD+M'
},
'Increase/Decrease font size': {
class: ChangeFontSize,
config: {
cssClass: 'plus20pc'
}
},
inlineCode: {
class: InlineCode,
shortcut: 'CMD+SHIFT+M'
},
code: CodeTool
}
};

18
lib/core/src/lib/rich-text-editor/index.ts
View File

@@ -1,18 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './public-api';

54
lib/core/src/lib/rich-text-editor/mocks/rich-text-editor.mock.ts
View File

@@ -1,54 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const exampleData = {
time: 1663761278752,
blocks: [
{
id: 'yOV_DfEQhC',
type: 'paragraph',
data: {
text: 'text value'
}
},
{
id: 'IZwymOWyds',
type: 'header',
data: {
text: 'Heading value',
level: 2
}
},
{
id: '3JJj6A8XFO',
type: 'list',
data: {
style: 'unordered',
items: ['unordered list item A', 'unordered list item B']
}
},
{
id: 'q98W4eK4Nj',
type: 'list',
data: {
style: 'ordered',
items: ['ordered list item 1', 'ordered list item 2']
}
}
],
version: '2.25.0'
};

19
lib/core/src/lib/rich-text-editor/public-api.ts
View File

@@ -1,19 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './rich-text-editor.component';
export * from './rich-text-editor.module';

3
lib/core/src/lib/rich-text-editor/rich-text-editor.component.html
View File

@@ -1,3 +0,0 @@
<div class="adf-rich-text-editor-container">
<div class="editorjs" [ngClass]="{'readonly': readOnly}" id="{{dynamicId}}"></div>
</div>

10
lib/core/src/lib/rich-text-editor/rich-text-editor.component.scss
View File

@@ -1,10 +0,0 @@
/* stylelint-disable selector-class-pattern */
.adf-rich-text-editor-container {
.editorjs {
&.readonly {
.codex-editor__redactor {
padding-bottom: 0 !important;
}
}
}
}

122
lib/core/src/lib/rich-text-editor/rich-text-editor.component.spec.ts
View File

@@ -1,122 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { RichTextEditorComponent } from './rich-text-editor.component';
describe('RichTextEditorComponent', () => {
let component: RichTextEditorComponent;
let fixture: ComponentFixture<RichTextEditorComponent>;
let debugElement: DebugElement;
const cssSelectors = {
editorContent: '.codex-editor',
editorJsElement: '.editorjs'
};
const mockEditorData = {
time: 1658154611110,
blocks: [
{
id: '1',
type: 'header',
data: {
text: 'Editor.js',
level: 2
}
}
],
version: 1
};
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [RichTextEditorComponent]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(RichTextEditorComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
});
it('should create', () => {
fixture.detectChanges();
expect(component).toBeTruthy();
});
it('should render rich text editor', async () => {
fixture.detectChanges();
await fixture.whenStable();
const editor = debugElement.query(By.css(cssSelectors.editorContent));
expect(editor).toBeTruthy();
});
it('should generate dynamic id', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(component.dynamicId).toContain('editorjs');
});
it('should get editorjs data by calling getEditorContent', async () => {
fixture.detectChanges();
await fixture.whenStable();
spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData) as any);
const savedEditorData = await component.getEditorContent();
expect(savedEditorData).toEqual(mockEditorData);
});
it('should destroy editor instance on ngOnDestroy', async () => {
fixture.detectChanges();
await fixture.whenStable();
const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
component.ngOnDestroy();
expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
expect(destroyEditorSpy).toHaveBeenCalled();
});
it('should not destroy editor instance on ngOnDestroy if editor is not ready', async () => {
fixture.detectChanges();
await fixture.whenStable();
const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
component.isReady = false;
component.ngOnDestroy();
expect(destroyEditorSpy).not.toHaveBeenCalled();
});
it('should add readonly class if readOnly is set to true', async () => {
component.readOnly = true;
fixture.detectChanges();
await fixture.whenStable();
const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
expect(editorEl.nativeElement.classList).toContain('readonly');
});
it('should not add readonly class if readOnly is set to false', async () => {
component.readOnly = false;
fixture.detectChanges();
await fixture.whenStable();
const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
expect(editorEl.nativeElement.classList).not.toContain('readonly');
});
});

86
lib/core/src/lib/rich-text-editor/rich-text-editor.component.stories.ts
View File

@@ -1,86 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { RichTextEditorModule } from './rich-text-editor.module';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { RichTextEditorComponent } from './rich-text-editor.component';
import { exampleData } from './mocks/rich-text-editor.mock';
export default {
component: RichTextEditorComponent,
title: 'Core/Rich Text Editor/Rich Text Editor',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, RichTextEditorModule]
})
],
argTypes: {
data: {
control: 'object',
description: 'Output data.',
table: {
type: { summary: 'OutputData' }
}
},
readOnly: {
control: 'boolean',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
}
}
} as Meta;
const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
props: args,
template: `
<adf-rich-text-editor
[data]=data
[readOnly]=readOnly
#editor >
</adf-rich-text-editor>
<hr/>
<h3>Output data from editor:</h3>
<pre>{{editor.outputData$ | async | json}}</pre>
`
});
export const defaultRichTextEditor = template.bind({});
defaultRichTextEditor.args = {
data: {
time: 1663761278752,
blocks: [
{
id: 'yOV_DfEQhC',
type: 'paragraph',
data: {
text: 'text'
}
}
],
version: '2.25.0'
}
};
export const readOnlyRichTextEditor = template.bind({});
readOnlyRichTextEditor.args = {
readOnly: true,
data: exampleData
};

91
lib/core/src/lib/rich-text-editor/rich-text-editor.component.ts
View File

@@ -1,91 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import EditorJS, { OutputData } from '@editorjs/editorjs';
import { Subject } from 'rxjs';
import { editorJsConfig } from './editorjs-config';
@Component({
selector: 'adf-rich-text-editor',
templateUrl: './rich-text-editor.component.html',
styleUrls: ['./rich-text-editor.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit {
@Input()
data: OutputData;
@Input()
readOnly = false;
private _outputData = new Subject<OutputData>();
outputData$ = this._outputData.asObservable();
editorInstance: EditorJS;
dynamicId: string;
isReady = false;
constructor() {
}
ngOnInit(): void {
this.dynamicId = `editorjs-${crypto.getRandomValues(new Uint32Array(1))}`;
}
ngAfterViewInit(): void {
this.editorInstance = new EditorJS({
holder: this.dynamicId,
...editorJsConfig,
data: this.data,
readOnly: this.readOnly,
onChange: () => {
if (!this.readOnly) {
this.sendEditorOutputData();
}
},
onReady: () => {
this.isReady = true;
if (!this.readOnly) {
this.sendEditorOutputData();
}
}
} as any);
}
private sendEditorOutputData() {
this.editorInstance.save().then((outputData) => {
this._outputData.next(outputData);
}).catch((error) => {
console.error('Saving failed: ', error);
});
}
getEditorContent() {
return this.editorInstance.save();
}
ngOnDestroy(): void {
if (this.isReady) {
this.editorInstance.destroy();
}
}
}

30
lib/core/src/lib/rich-text-editor/rich-text-editor.module.ts
View File

@@ -1,30 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RichTextEditorComponent } from './rich-text-editor.component';
@NgModule({
declarations: [RichTextEditorComponent],
imports: [
CommonModule
],
exports: [RichTextEditorComponent]
})
export class RichTextEditorModule { }

1
lib/core/src/public-api.ts
View File

@@ -42,7 +42,6 @@ export * from './lib/dialogs/index';
export * from './lib/icon/index';
export * from './lib/notifications/index';
export * from './lib/blank-page/index';
export * from './lib/rich-text-editor/index';
export * from './lib/search-text/index';
export * from './lib/snackbar-content/index';
export * from './lib/translation/index';