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

* 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 57 additions and 57 deletions

View File

@ -2,7 +2,7 @@
<div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-sx">
<h1 class="app-rich-text-editor-col-title">Rich Text Editor</h1>
<adf-rich-text-editor [data]="sampleData" #textEditor></adf-rich-text-editor>
<adf-cloud-rich-text-editor [data]="sampleData" #textEditor></adf-cloud-rich-text-editor>
</div>
<div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-rx">
<h1 class="app-rich-text-editor-col-title">Output Data</h1>

View File

@ -15,9 +15,9 @@
* limitations under the License.
*/
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { OutputData } from '@editorjs/editorjs';
import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-core';
import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-process-services-cloud';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@ -26,7 +26,7 @@ import { Subject } from 'rxjs';
templateUrl: './rich-text-editor.component.html',
styleUrls: ['./rich-text-editor.component.scss']
})
export class RichTextEditorComponent implements OnInit, AfterViewInit, OnDestroy {
export class RichTextEditorComponent implements AfterViewInit, OnDestroy {
@ViewChild('textEditor')
textEditor: AdfRichTextEditorComponent;
@ -91,11 +91,6 @@ export class RichTextEditorComponent implements OnInit, AfterViewInit, OnDestroy
]
};
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.textEditor.outputData$.pipe(
takeUntil(this.onDestroy$)

View File

@ -19,6 +19,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RichTextEditorComponent } from './rich-text-editor.component';
import { ContentModule } from '@alfresco/adf-content-services';
import { RichTextEditorModule } from '@alfresco/adf-process-services-cloud';
import { CoreModule } from '@alfresco/adf-core';
import { RouterModule, Routes } from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';
@ -37,7 +38,8 @@ const routes: Routes = [
CoreModule,
RouterModule.forChild(routes),
ContentModule.forChild(),
FlexLayoutModule
FlexLayoutModule,
RichTextEditorModule
]
})
export class AppRichTextEditorModule { }

View File

@ -112,7 +112,7 @@ for more information about installing and using the source code.
| [Notification History component](core/components/notification-history.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component is in the current status just an experimental component. | |
| The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) | |
| [Pagination Component](core/components/pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/pagination.component.ts) |
| [Rich Text Editor component](core/components/rich-text-editor.md) | Wrap Editor.js element to show a Rich Text editor allows to add formatted text. | [Source](../lib/core/src/lib/rich-text-editor/rich-text-editor.component.ts) |
| [Rich Text Editor component](docs/process-services-cloud/rich-text-editor.md) | Wrap Editor.js element to show a Rich Text editor allows to add formatted text. | [Source](lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.ts) |
| [Search Text Input Component](core/components/search-text-input.component.md) | Displays a input text that supports autocompletion | [Source](../lib/core/src/lib/search-text/search-text-input.component.ts) |
| [Sidebar action menu component](core/components/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
| [Sidenav Layout component](core/components/sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts) |

View File

@ -57,6 +57,5 @@ Forms defined in APS have the following default mappings for the form fields:
| Attach File | upload | AttachWidgetComponent or [`UploadWidgetComponent`](../../../lib/process-services/src/lib/form/widgets/upload/upload.widget.ts) (based on metadata) |
| Display value | readonly | [`TextWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/text/text.widget.ts) |
| Display text | readonly-text | [`DisplayTextWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/display-text/display-text.widget.ts) |
| Display Rich text | display-rich-text | [`DisplayRichTextWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
| N/A | container | [`ContainerWidgetComponent`](lib/core/src/lib/form/components/widgets/container/container.widget.ts) (layout component) |
| N/A | container | [`ContainerWidgetComponent`](lib/core/src/lib/form/components/widgets/container/container.widget.ts) (layout component) |
| N/A | N/A | [`UnknownWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/unknown/unknown.widget.ts) |

View File

@ -73,7 +73,7 @@ The [`Form`](../../../lib/process-services/src/lib/task-list/models/form.model.t
| Checkbox | "boolean" | [`CheckboxWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts) |
| Date | "date" | [`DateWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/date/date.widget.ts) |
| Display text | "readonly-text" | [`DisplayTextWidgetComponentComponent`](../../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
| Display Rich text | "display-rich-text" | [`DisplayRichTextWidgetComponent`](../../../lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
| Display Rich text | "display-rich-text" | [`DisplayRichTextWidgetComponent`](lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
| Display value | "readonly" | DisplayValueWidgetComponent |
| Dropdown | "dropdown" | [`DropdownWidgetComponent`](../../../lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.ts) |
| Dynamic table | "dynamic-table" | [`DynamicTableWidgetComponent`](../../../lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.ts) |

View File

@ -5,7 +5,7 @@ Status: Active
Last reviewed: 2020-07-20
---
# [Rich Text Editor component](lib/core/src/lib/rich-text-editor/rich-text-editor.component.ts "Defined in rich-text-editor.component.ts")
# [Rich Text Editor component](lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.ts "Defined in rich-text-editor.component.ts")
Wrap [Editor.js](https://editorjs.io/) element to show a Rich Text editor allows to add formatted text.

View File

@ -141,6 +141,7 @@ v6.0.0 and after:
| `SharedLinksApiService` | `@alfresco/adf-core` | `@alfresco/adf-process-services` |
| `LockService` | `@alfresco/adf-core` | `@alfresco/adf-process-services` |
| `FavoritesApiService` | `@alfresco/adf-core` | `@alfresco/adf-process-services` |
| `RichTextEditorComponent` | `@alfresco/adf-core` | `@alfresco/adf-process-services-cloud` |
### Update Data-table a data change

View File

@ -89,7 +89,7 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
| Radio buttons | radio-buttons | [`RadioButtonsWidgetComponent`](lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts) |
| Hyperlink | hyperlink | [`HyperlinkWidgetComponent`](lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.ts) |
| Display value | readonly | DisplayValueWidgetComponent |
| Display Rich text | display-rich-text | [`DisplayRichTextWidgetComponent`](lib/core/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
| Display Rich text | display-rich-text | [`DisplayRichTextWidgetComponent`](lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
| Display text | readonly-text | [`DisplayTextWidgetComponentComponent`](lib/core/src/lib/form/components/widgets/display-text/display-text.widget.ts) |
| Typeahead | typeahead | [`TypeaheadWidgetComponent`](lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.ts) |
| People | people | [`PeopleWidgetComponent`](lib/process-services/src/lib/form/widgets/people/people.widget.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 {

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,

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[] = [

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);
});
});

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)
};
}

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';

View File

@ -25,6 +25,7 @@ import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
import { PropertiesViewerWidgetComponent } from './widgets/properties-viewer/properties-viewer.widget';
import { RadioButtonsCloudWidgetComponent } from './widgets/radio-buttons/radio-buttons-cloud.widget';
import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';
import { DisplayRichTextWidgetComponent } from './widgets/display-rich-text/display-rich-text.widget';
@Injectable({
providedIn: 'root'
@ -41,7 +42,8 @@ export class CloudFormRenderingService extends FormRenderingService {
[FormFieldTypes.FUNCTIONAL_GROUP]: () => GroupCloudWidgetComponent,
[FormFieldTypes.PROPERTIES_VIEWER]: () => PropertiesViewerWidgetComponent,
[FormFieldTypes.RADIO_BUTTONS]: () => RadioButtonsCloudWidgetComponent,
[FormFieldTypes.ALFRESCO_FILE_VIEWER]: () => FileViewerWidgetComponent
[FormFieldTypes.ALFRESCO_FILE_VIEWER]: () => FileViewerWidgetComponent,
[FormFieldTypes.DISPLAY_RICH_TEXT]: () => DisplayRichTextWidgetComponent
}, true);
}
}

View File

@ -18,7 +18,7 @@
import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CoreTestingModule, setupTestBed } from '../../../../testing';
import { CoreTestingModule, setupTestBed } from '@alfresco/adf-core';
import { DisplayRichTextWidgetComponent } from './display-rich-text.widget';

View File

@ -18,8 +18,7 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { WidgetComponent, FormService } from '@alfresco/adf-core';
/* cspell:disable-next-line */
import edjsHTML from 'editorjs-html';
@Component({

View File

@ -40,6 +40,7 @@ import { PropertiesViewerWrapperComponent } from './components/widgets/propertie
import { RadioButtonsCloudWidgetComponent } from './components/widgets/radio-buttons/radio-buttons-cloud.widget';
import { FilePropertiesTableCloudComponent } from './components/widgets/attach-file/file-properties-table-cloud.component';
import { FileViewerWidgetComponent } from './components/widgets/file-viewer/file-viewer.widget';
import { RichTextEditorModule } from '../rich-text-editor';
@NgModule({
imports: [
@ -54,7 +55,8 @@ import { FileViewerWidgetComponent } from './components/widgets/file-viewer/file
GroupCloudModule,
ContentMetadataModule,
UploadModule,
AlfrescoViewerModule
AlfrescoViewerModule,
RichTextEditorModule
],
declarations: [
FormCloudComponent,

View File

@ -35,6 +35,7 @@ import { PeopleCloudModule } from './people/people-cloud.module';
import { CloudFormRenderingService } from './form/components/cloud-form-rendering.service';
import { ProcessServicesCloudPipeModule } from './pipes/process-services-cloud-pipe.module';
import { ApolloModule } from 'apollo-angular';
import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module';
@NgModule({
imports: [
@ -47,7 +48,8 @@ import { ApolloModule } from 'apollo-angular';
FormCloudModule,
TaskFormModule,
ProcessServicesCloudPipeModule,
ApolloModule
ApolloModule,
RichTextEditorModule
],
providers: [
{
@ -67,7 +69,8 @@ import { ApolloModule } from 'apollo-angular';
FormCloudModule,
TaskFormModule,
PeopleCloudModule,
ProcessServicesCloudPipeModule
ProcessServicesCloudPipeModule,
RichTextEditorModule
]
})
export class ProcessServicesCloudModule {

View File

@ -17,7 +17,7 @@
import { RichTextEditorModule } from './rich-text-editor.module';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { ProcessServicesCloudStoryModule } from '../testing/process-services-cloud-story.module';
import { RichTextEditorComponent } from './rich-text-editor.component';
import { exampleData } from './mocks/rich-text-editor.mock';
@ -26,7 +26,7 @@ export default {
title: 'Core/Rich Text Editor/Rich Text Editor',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, RichTextEditorModule]
imports: [ProcessServicesCloudStoryModule, RichTextEditorModule]
})
],
argTypes: {

View File

@ -22,7 +22,7 @@ import { Subject } from 'rxjs';
import { editorJsConfig } from './editorjs-config';
@Component({
selector: 'adf-rich-text-editor',
selector: 'adf-cloud-rich-text-editor',
templateUrl: './rich-text-editor.component.html',
styleUrls: ['./rich-text-editor.component.scss'],
encapsulation: ViewEncapsulation.None

View File

@ -23,6 +23,8 @@ export * from './lib/group/public-api';
export * from './lib/people/public-api';
export * from './lib/form/public-api';
export * from './lib/services/public-api';
export * from './lib/rich-text-editor/public-api';
export * from './lib/types';
export * from './lib/pipes/process-name-cloud.pipe';
export * from './lib/pipes/process-services-cloud-pipe.module';