mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
AAE-25569 Add text alignment options to the rich text editor (#10208)
This commit is contained in:
Pablo Martinez
GitHub
parent
6cb3b589f8
commit
02587ecbb6
@ -69,4 +69,6 @@ export class RichTextEditorDemo {
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| data | `OutputData` | null | EditorJs data format (follow the [official documentation](https://editorjs.io/saving-data) ) |
|
||||
| placeholder | `string` | '' | Placeholder displayed when the content of the editor is empty (follow the [official documentation](https://editorjs.io/configuration/#placeholder) ) |
|
||||
| autofocus | `boolean` | false | Set a Caret to the Editor after initialization (follow the [official documentation](https://editorjs.io/configuration/#autofocus) ) |
|
||||
| readOnly | `boolean` | false | If true users won't have the ability to change the document content |
|
||||
|
||||
@ -18,12 +18,14 @@
|
||||
/** Plugin import */
|
||||
import CodeTool from '@editorjs/code';
|
||||
import Header from '@editorjs/header';
|
||||
import Paragraph from '@editorjs/paragraph';
|
||||
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';
|
||||
import AlignmentTuneTool from 'editorjs-text-alignment-blocktune';
|
||||
|
||||
export const editorJsConfig = {
|
||||
autofocus: true,
|
||||
@ -35,7 +37,13 @@ export const editorJsConfig = {
|
||||
},
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: true
|
||||
inlineToolbar: true,
|
||||
tunes: ['anyTuneName']
|
||||
},
|
||||
paragraph: {
|
||||
class: Paragraph,
|
||||
inlineToolbar: true,
|
||||
tunes: ['anyTuneName']
|
||||
},
|
||||
list: {
|
||||
class: List,
|
||||
@ -48,7 +56,25 @@ export const editorJsConfig = {
|
||||
class: ColorPlugin,
|
||||
config: {
|
||||
customPicker: true,
|
||||
colorCollections: ['#FF1300', '#ffa500', '#9C27B0', '#673AB7', '#3F51B5', '#0070FF', '#03A9F4', '#00BCD4', '#5f9ea0', '#4CAF50', '#8BC34A', '#CDDC39', '#FFF', '#000', '#c0c0c0', '#808080', '#800000'],
|
||||
colorCollections: [
|
||||
'#FF1300',
|
||||
'#ffa500',
|
||||
'#9C27B0',
|
||||
'#673AB7',
|
||||
'#3F51B5',
|
||||
'#0070FF',
|
||||
'#03A9F4',
|
||||
'#00BCD4',
|
||||
'#5f9ea0',
|
||||
'#4CAF50',
|
||||
'#8BC34A',
|
||||
'#CDDC39',
|
||||
'#FFF',
|
||||
'#000',
|
||||
'#c0c0c0',
|
||||
'#808080',
|
||||
'#800000'
|
||||
],
|
||||
defaultColor: '#FF1300',
|
||||
type: 'text'
|
||||
}
|
||||
@ -67,6 +93,9 @@ export const editorJsConfig = {
|
||||
class: InlineCode,
|
||||
shortcut: 'CMD+SHIFT+M'
|
||||
},
|
||||
anyTuneName: {
|
||||
class: AlignmentTuneTool
|
||||
},
|
||||
code: CodeTool
|
||||
}
|
||||
};
|
||||
|
||||
@ -39,6 +39,20 @@ export default {
|
||||
table: {
|
||||
type: { summary: 'OutputData' }
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
control: 'text',
|
||||
description: 'Placeholder text.',
|
||||
table: {
|
||||
type: { summary: 'string' }
|
||||
}
|
||||
},
|
||||
autoFocus: {
|
||||
control: 'boolean',
|
||||
description: 'Focus on the editor when it is loaded.',
|
||||
table: {
|
||||
type: { summary: 'boolean' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta<RichTextEditorComponent>;
|
||||
@ -46,7 +60,7 @@ export default {
|
||||
const template: StoryFn<RichTextEditorComponent> = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<adf-cloud-rich-text-editor [data]=data #editor>
|
||||
<adf-cloud-rich-text-editor [data]=data [placeholder]=placeholder [autofocus]=autofocus #editor>
|
||||
</adf-cloud-rich-text-editor>
|
||||
<hr/>
|
||||
<h3>Output data from editor:</h3>
|
||||
@ -80,5 +94,7 @@ DefaultRichTextEditor.args = {
|
||||
}
|
||||
],
|
||||
version: '2.29.0'
|
||||
}
|
||||
},
|
||||
placeholder: 'Type something here...',
|
||||
autoFocus: true
|
||||
};
|
||||
|
||||
@ -31,6 +31,12 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
|
||||
@Input()
|
||||
data: OutputData;
|
||||
|
||||
@Input()
|
||||
placeholder = '';
|
||||
|
||||
@Input()
|
||||
autoFocus = false;
|
||||
|
||||
private _outputData = new Subject<OutputData>();
|
||||
|
||||
outputData$ = this._outputData.asObservable();
|
||||
@ -46,6 +52,8 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
|
||||
ngAfterViewInit(): void {
|
||||
this.editorInstance = new EditorJS({
|
||||
holder: this.dynamicId,
|
||||
placeholder: this.placeholder,
|
||||
autofocus: this.autoFocus,
|
||||
...editorJsConfig,
|
||||
data: this.data,
|
||||
onChange: () => {
|
||||
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
@ -22,6 +22,7 @@
|
||||
"@angular/router": "15.2.10",
|
||||
"@apollo/client": "^3.10.2",
|
||||
"@cspell/eslint-plugin": "^7.3.6",
|
||||
"@editorjs/paragraph": "^2.11.6",
|
||||
"@mat-datetimepicker/core": "11.0.3",
|
||||
"@ngx-translate/core": "^14.0.0",
|
||||
"@storybook/core-server": "8.2.6",
|
||||
@ -34,6 +35,7 @@
|
||||
"cropperjs": "1.6.2",
|
||||
"date-fns": "^2.30.0",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"editorjs-text-alignment-blocktune": "^1.0.3",
|
||||
"event-emitter": "^0.3.5",
|
||||
"material-icons": "^1.13.12",
|
||||
"minimatch-browser": "1.0.0",
|
||||
@ -4610,6 +4612,19 @@
|
||||
"@codexteam/icons": "^0.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@editorjs/paragraph": {
|
||||
"version": "2.11.6",
|
||||
"resolved": "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.11.6.tgz",
|
||||
"integrity": "sha512-i9B50Ylvh+0ZzUGWIba09PfUXsA00Y//zFZMwqsyaXXKxMluSIJ6ADFJbbK0zaV9Ijx49Xocrlg+CEPRqATk9w==",
|
||||
"dependencies": {
|
||||
"@codexteam/icons": "^0.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@editorjs/paragraph/node_modules/@codexteam/icons": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.4.tgz",
|
||||
"integrity": "sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q=="
|
||||
},
|
||||
"node_modules/@editorjs/underline": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@editorjs/underline/-/underline-1.1.0.tgz",
|
||||
@ -17608,6 +17623,11 @@
|
||||
"integrity": "sha512-vSjjB/KUECEBxYqbj9yn1L799L14n0uoKrvk5qfaAokIHB8mYg5hZ8mOTtoS2cJu+xE3QZ/jmHY/Fh0EJeM8ZQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/editorjs-text-alignment-blocktune": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/editorjs-text-alignment-blocktune/-/editorjs-text-alignment-blocktune-1.0.3.tgz",
|
||||
"integrity": "sha512-DAJ2LJP+WjETvU4lVOJCqZ1kZkKHp0GkujkqZgza9DRv7bO46m1M/s2d5Ba5hPFdmqk1vA/ci++MQXgWD7mWYw=="
|
||||
},
|
||||
"node_modules/editorjs-text-color-plugin": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-1.13.1.tgz",
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
"@angular/router": "15.2.10",
|
||||
"@apollo/client": "^3.10.2",
|
||||
"@cspell/eslint-plugin": "^7.3.6",
|
||||
"@editorjs/paragraph": "^2.11.6",
|
||||
"@mat-datetimepicker/core": "11.0.3",
|
||||
"@ngx-translate/core": "^14.0.0",
|
||||
"@storybook/core-server": "8.2.6",
|
||||
@ -54,6 +55,7 @@
|
||||
"cropperjs": "1.6.2",
|
||||
"date-fns": "^2.30.0",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"editorjs-text-alignment-blocktune": "^1.0.3",
|
||||
"event-emitter": "^0.3.5",
|
||||
"material-icons": "^1.13.12",
|
||||
"minimatch-browser": "1.0.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user