@ecodev/natural-editor 41.2.1 → 41.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/bundles/ecodev-natural-editor.umd.js +132 -3
  2. package/bundles/ecodev-natural-editor.umd.js.map +1 -1
  3. package/esm2015/lib/editor/editor.component.js +2 -2
  4. package/esm2015/lib/utils/item.js +39 -0
  5. package/esm2015/lib/utils/menu.js +10 -39
  6. package/esm2015/lib/utils/paragraph-with-alignment.js +43 -0
  7. package/esm2015/lib/utils/schema.js +4 -3
  8. package/esm2015/lib/utils/text-align-item.js +78 -0
  9. package/fesm2015/ecodev-natural-editor.js +130 -4
  10. package/fesm2015/ecodev-natural-editor.js.map +1 -1
  11. package/lib/utils/item.d.ts +30 -0
  12. package/lib/utils/menu.d.ts +2 -31
  13. package/lib/utils/paragraph-with-alignment.d.ts +2 -0
  14. package/lib/utils/text-align-item.d.ts +6 -0
  15. package/package.json +1 -1
package/esm2015/lib/utils/text-align-item.js ADDED
@@ -0,0 +1,78 @@
1
+ import { AllSelection, TextSelection } from 'prosemirror-state';
2
+ import { Item } from './item';
3
+ function setTextAlign(tr, schema, alignment) {
4
+ console.log('setTextAlign', alignment);
5
+ const { selection, doc } = tr;
6
+ if (!selection || !doc) {
7
+ return tr;
8
+ }
9
+ const { from, to } = selection;
10
+ const { nodes } = schema;
11
+ const tasks = [];
12
+ alignment = alignment || null;
13
+ const allowedNodeTypes = new Set([
14
+ nodes.paragraph,
15
+ // nodes['blockquote'],
16
+ // nodes['listItem'],
17
+ // nodes['heading'],
18
+ ]);
19
+ doc.nodesBetween(from, to, (node, pos) => {
20
+ const nodeType = node.type;
21
+ const align = node.attrs.align || null;
22
+ if (align !== alignment && allowedNodeTypes.has(nodeType)) {
23
+ tasks.push({
24
+ node,
25
+ pos,
26
+ nodeType,
27
+ });
28
+ }
29
+ return true;
30
+ });
31
+ if (!tasks.length) {
32
+ return tr;
33
+ }
34
+ tasks.forEach(job => {
35
+ const { node, pos, nodeType } = job;
36
+ const newAttrs = Object.assign(Object.assign({}, node.attrs), { align: alignment ? alignment : null });
37
+ console.log('newAttrs', newAttrs);
38
+ tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
39
+ });
40
+ return tr;
41
+ }
42
+ export class TextAlignItem extends Item {
43
+ constructor(alignment) {
44
+ super({
45
+ active: state => {
46
+ const { selection, doc } = state;
47
+ const { from, to } = selection;
48
+ let keepLooking = true;
49
+ let active = false;
50
+ doc.nodesBetween(from, to, node => {
51
+ if (keepLooking && node.attrs.align === alignment) {
52
+ keepLooking = false;
53
+ active = true;
54
+ }
55
+ return keepLooking;
56
+ });
57
+ return active;
58
+ },
59
+ enable: state => {
60
+ const { selection } = state;
61
+ return selection instanceof TextSelection || selection instanceof AllSelection;
62
+ },
63
+ run: (state, dispatch) => {
64
+ const { schema, selection } = state;
65
+ console.log(this);
66
+ const tr = setTextAlign(state.tr.setSelection(selection), schema, this.active ? null : alignment);
67
+ if (tr.docChanged) {
68
+ dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
69
+ return true;
70
+ }
71
+ else {
72
+ return false;
73
+ }
74
+ },
75
+ });
76
+ }
77
+ }
78
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1hbGlnbi1pdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmF0dXJhbC1lZGl0b3Ivc3JjL2xpYi91dGlscy90ZXh0LWFsaWduLWl0ZW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFDLFlBQVksRUFBRSxhQUFhLEVBQWMsTUFBTSxtQkFBbUIsQ0FBQztBQUMzRSxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBSTVCLFNBQVMsWUFBWSxDQUFDLEVBQWUsRUFBRSxNQUFjLEVBQUUsU0FBMkI7SUFDOUUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFDdkMsTUFBTSxFQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUMsR0FBRyxFQUFFLENBQUM7SUFDNUIsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLEdBQUcsRUFBRTtRQUNwQixPQUFPLEVBQUUsQ0FBQztLQUNiO0lBQ0QsTUFBTSxFQUFDLElBQUksRUFBRSxFQUFFLEVBQUMsR0FBRyxTQUFTLENBQUM7SUFDN0IsTUFBTSxFQUFDLEtBQUssRUFBQyxHQUFHLE1BQU0sQ0FBQztJQUV2QixNQUFNLEtBQUssR0FJTCxFQUFFLENBQUM7SUFFVCxTQUFTLEdBQUcsU0FBUyxJQUFJLElBQUksQ0FBQztJQUU5QixNQUFNLGdCQUFnQixHQUFHLElBQUksR0FBRyxDQUFDO1FBQzdCLEtBQUssQ0FBQyxTQUFTO1FBQ2YsdUJBQXVCO1FBQ3ZCLHFCQUFxQjtRQUNyQixvQkFBb0I7S0FDdkIsQ0FBQyxDQUFDO0lBRUgsR0FBRyxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsRUFBRSxFQUFFLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQ3JDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDM0IsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FB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Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOb2RlLCBOb2RlVHlwZSwgU2NoZW1hfSBmcm9tICdwcm9zZW1pcnJvci1tb2RlbCc7XG5pbXBvcnQge0FsbFNlbGVjdGlvbiwgVGV4dFNlbGVjdGlvbiwgVHJhbnNhY3Rpb259IGZyb20gJ3Byb3NlbWlycm9yLXN0YXRlJztcbmltcG9ydCB7SXRlbX0gZnJvbSAnLi9pdGVtJztcblxudHlwZSBBbGlnbm1lbnQgPSAnbGVmdCcgfCAncmlnaHQnIHwgJ2NlbnRlcicgfCAnanVzdGlmeSc7XG5cbmZ1bmN0aW9uIHNldFRleHRBbGlnbih0cjogVHJhbnNhY3Rpb24sIHNjaGVtYTogU2NoZW1hLCBhbGlnbm1lbnQ6IG51bGwgfCBBbGlnbm1lbnQpOiBUcmFuc2FjdGlvbiB7XG4gICAgY29uc29sZS5sb2coJ3NldFRleHRBbGlnbicsIGFsaWdubWVudCk7XG4gICAgY29uc3Qge3NlbGVjdGlvbiwgZG9jfSA9IHRyO1xuICAgIGlmICghc2VsZWN0aW9uIHx8ICFkb2MpIHtcbiAgICAgICAgcmV0dXJuIHRyO1xuICAgIH1cbiAgICBjb25zdCB7ZnJvbSwgdG99ID0gc2VsZWN0aW9uO1xuICAgIGNvbnN0IHtub2Rlc30gPSBzY2hlbWE7XG5cbiAgICBjb25zdCB0YXNrczoge1xuICAgICAgICBub2RlOiBOb2RlO1xuICAgICAgICBwb3M6IG51bWJlcjtcbiAgICAgICAgbm9kZVR5cGU6IE5vZGVUeXBlO1xuICAgIH1bXSA9IFtdO1xuXG4gICAgYWxpZ25tZW50ID0gYWxpZ25tZW50IHx8IG51bGw7XG5cbiAgICBjb25zdCBhbGxvd2VkTm9kZVR5cGVzID0gbmV3IFNldChbXG4gICAgICAgIG5vZGVzLnBhcmFncmFwaCxcbiAgICAgICAgLy8gbm9kZXNbJ2Jsb2NrcXVvdGUnXSxcbiAgICAgICAgLy8gbm9kZXNbJ2xpc3RJdGVtJ10sXG4gICAgICAgIC8vIG5vZGVzWydoZWFkaW5nJ10sXG4gICAgXSk7XG5cbiAgICBkb2Mubm9kZXNCZXR3ZWVuKGZyb20sIHRvLCAobm9kZSwgcG9zKSA9PiB7XG4gICAgICAgIGNvbnN0IG5vZGVUeXBlID0gbm9kZS50eXBlO1xuICAgICAgICBjb25zdCBhbGlnbiA9IG5vZGUuYXR0cnMuYWxpZ24gfHwgbnVsbDtcbiAgICAgICAgaWYgKGFsaWduICE9PSBhbGlnbm1lbnQgJiYgYWxsb3dlZE5vZGVUeXBlcy5oYXMobm9kZVR5cGUpKSB7XG4gICAgICAgICAgICB0YXNrcy5wdXNoKHtcbiAgICAgICAgICAgICAgICBub2RlLFxuICAgICAgICAgICAgICAgIHBvcyxcbiAgICAgICAgICAgICAgICBub2RlVHlwZSxcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiB0cnVlO1xuICAgIH0pO1xuXG4gICAgaWYgKCF0YXNrcy5sZW5ndGgpIHtcbiAgICAgICAgcmV0dXJuIHRyO1xuICAgIH1cblxuICAgIHRhc2tzLmZvckVhY2goam9iID0+IHtcbiAgICAgICAgY29uc3Qge25vZGUsIHBvcywgbm9kZVR5cGV9ID0gam9iO1xuICAgICAgICBjb25zdCBuZXdBdHRycyA9IHtcbiAgICAgICAgICAgIC4uLm5vZGUuYXR0cnMsXG4gICAgICAgICAgICBhbGlnbjogYWxpZ25tZW50ID8gYWxpZ25tZW50IDogbnVsbCxcbiAgICAgICAgfTtcbiAgICAgICAgY29uc29sZS5sb2coJ25ld0F0dHJzJywgbmV3QXR0cnMpO1xuICAgICAgICB0ciA9IHRyLnNldE5vZGVNYXJrdXAocG9zLCBub2RlVHlwZSwgbmV3QXR0cnMsIG5vZGUubWFya3MpO1xuICAgIH0pO1xuXG4gICAgcmV0dXJuIHRyO1xufVxuXG5leHBvcnQgY2xhc3MgVGV4dEFsaWduSXRlbSBleHRlbmRzIEl0ZW0ge1xuICAgIGNvbnN0cnVjdG9yKGFsaWdubWVudDogQWxpZ25tZW50KSB7XG4gICAgICAgIHN1cGVyKHtcbiAgICAgICAgICAgIGFjdGl2ZTogc3RhdGUgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IHtzZWxlY3Rpb24sIGRvY30gPSBzdGF0ZTtcbiAgICAgICAgICAgICAgICBjb25zdCB7ZnJvbSwgdG99ID0gc2VsZWN0aW9uO1xuICAgICAgICAgICAgICAgIGxldCBrZWVwTG9va2luZyA9IHRydWU7XG4gICAgICAgICAgICAgICAgbGV0IGFjdGl2ZSA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIGRvYy5ub2Rlc0JldHdlZW4oZnJvbSwgdG8sIG5vZGUgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoa2VlcExvb2tpbmcgJiYgbm9kZS5hdHRycy5hbGlnbiA9PT0gYWxpZ25tZW50KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBrZWVwTG9va2luZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgICAgICAgICAgYWN0aXZlID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICByZXR1cm4ga2VlcExvb2tpbmc7XG4gICAgICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgICAgICAgICByZXR1cm4gYWN0aXZlO1xuICAgICAgICAgICAgfSxcblxuICAgICAgICAgICAgZW5hYmxlOiBzdGF0ZSA9PiB7XG4gICAgICAgICAgICAgICAgY29uc3Qge3NlbGVjdGlvbn0gPSBzdGF0ZTtcbiAgICAgICAgICAgICAgICByZXR1cm4gc2VsZWN0aW9uIGluc3RhbmNlb2YgVGV4dFNlbGVjdGlvbiB8fCBzZWxlY3Rpb24gaW5zdGFuY2VvZiBBbGxTZWxlY3Rpb247XG4gICAgICAgICAgICB9LFxuXG4gICAgICAgICAgICBydW46IChzdGF0ZSwgZGlzcGF0Y2gpOiBib29sZWFuID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCB7c2NoZW1hLCBzZWxlY3Rpb259ID0gc3RhdGU7XG5cbiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZyh0aGlzKTtcbiAgICAgICAgICAgICAgICBjb25zdCB0ciA9IHNldFRleHRBbGlnbihzdGF0ZS50ci5zZXRTZWxlY3Rpb24oc2VsZWN0aW9uKSwgc2NoZW1hLCB0aGlzLmFjdGl2ZSA/IG51bGwgOiBhbGlnbm1lbnQpO1xuICAgICAgICAgICAgICAgIGlmICh0ci5kb2NDaGFuZ2VkKSB7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BhdGNoPy4odHIpO1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSxcbiAgICAgICAgfSk7XG4gICAgfVxufVxuIl19
package/fesm2015/ecodev-natural-editor.js CHANGED
@@ -2,7 +2,7 @@ import '@angular/localize/init';
2
2
  import * as i0 from '@angular/core';
3
3
  import { Injectable, Inject, Component, EventEmitter, ElementRef, Optional, Self, ViewChild, Output, Input, NgModule } from '@angular/core';
4
4
  import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
5
- import { Plugin, TextSelection, EditorState } from 'prosemirror-state';
5
+ import { Plugin, TextSelection, AllSelection, EditorState } from 'prosemirror-state';
6
6
  import { Schema, DOMSerializer, DOMParser } from 'prosemirror-model';
7
7
  import * as i6 from '@angular/common';
8
8
  import { DOCUMENT, CommonModule } from '@angular/common';
@@ -116,6 +116,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImpor
116
116
  args: [DOCUMENT]
117
117
  }] }]; } });
118
118
 
119
+ const ALIGN_PATTERN = /(left|right|center|justify)/;
120
+ // https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
121
+ // :: NodeSpec A plain paragraph textblock. Represented in the DOM
122
+ // as a `<p>` element.
123
+ const paragraphWithAlignment = {
124
+ attrs: {
125
+ align: { default: null },
126
+ id: { default: null },
127
+ },
128
+ content: 'inline*',
129
+ group: 'block',
130
+ parseDOM: [
131
+ {
132
+ tag: 'p',
133
+ getAttrs: dom => {
134
+ if (!(dom instanceof HTMLElement)) {
135
+ return;
136
+ }
137
+ const { textAlign } = dom.style;
138
+ let align = dom.getAttribute('align') || textAlign || '';
139
+ align = ALIGN_PATTERN.test(align) ? align : null;
140
+ const id = dom.getAttribute('id') || '';
141
+ return { align, id };
142
+ },
143
+ },
144
+ ],
145
+ toDOM: node => {
146
+ const { align, id } = node.attrs;
147
+ const attrs = {};
148
+ let style = '';
149
+ if (align && align !== 'left') {
150
+ style += `text-align: ${align};`;
151
+ }
152
+ if (style) {
153
+ attrs.style = style;
154
+ }
155
+ if (id) {
156
+ attrs.id = id;
157
+ }
158
+ return ['p', attrs, 0];
159
+ },
160
+ };
161
+
119
162
  const basicNodes = {
120
163
  heading: nodes.heading,
121
164
  doc: nodes.doc,
@@ -134,7 +177,7 @@ const basicSchema = new Schema({
134
177
  marks: tmpSchema.spec.marks,
135
178
  });
136
179
  const tmpSchema2 = new Schema({
137
- nodes: Object.assign(Object.assign({}, nodes), tableNodes({
180
+ nodes: Object.assign(Object.assign(Object.assign({}, nodes), tableNodes({
138
181
  tableGroup: 'block',
139
182
  cellContent: 'block+',
140
183
  cellAttributes: {
@@ -150,7 +193,7 @@ const tmpSchema2 = new Schema({
150
193
  },
151
194
  },
152
195
  },
153
- })),
196
+ })), { paragraph: paragraphWithAlignment }),
154
197
  marks: basicMarks,
155
198
  });
156
199
  const advancedSchema = new Schema({
@@ -262,6 +305,83 @@ class Item {
262
305
  }
263
306
  }
264
307
  }
308
+
309
+ function setTextAlign(tr, schema, alignment) {
310
+ console.log('setTextAlign', alignment);
311
+ const { selection, doc } = tr;
312
+ if (!selection || !doc) {
313
+ return tr;
314
+ }
315
+ const { from, to } = selection;
316
+ const { nodes } = schema;
317
+ const tasks = [];
318
+ alignment = alignment || null;
319
+ const allowedNodeTypes = new Set([
320
+ nodes.paragraph,
321
+ // nodes['blockquote'],
322
+ // nodes['listItem'],
323
+ // nodes['heading'],
324
+ ]);
325
+ doc.nodesBetween(from, to, (node, pos) => {
326
+ const nodeType = node.type;
327
+ const align = node.attrs.align || null;
328
+ if (align !== alignment && allowedNodeTypes.has(nodeType)) {
329
+ tasks.push({
330
+ node,
331
+ pos,
332
+ nodeType,
333
+ });
334
+ }
335
+ return true;
336
+ });
337
+ if (!tasks.length) {
338
+ return tr;
339
+ }
340
+ tasks.forEach(job => {
341
+ const { node, pos, nodeType } = job;
342
+ const newAttrs = Object.assign(Object.assign({}, node.attrs), { align: alignment ? alignment : null });
343
+ console.log('newAttrs', newAttrs);
344
+ tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
345
+ });
346
+ return tr;
347
+ }
348
+ class TextAlignItem extends Item {
349
+ constructor(alignment) {
350
+ super({
351
+ active: state => {
352
+ const { selection, doc } = state;
353
+ const { from, to } = selection;
354
+ let keepLooking = true;
355
+ let active = false;
356
+ doc.nodesBetween(from, to, node => {
357
+ if (keepLooking && node.attrs.align === alignment) {
358
+ keepLooking = false;
359
+ active = true;
360
+ }
361
+ return keepLooking;
362
+ });
363
+ return active;
364
+ },
365
+ enable: state => {
366
+ const { selection } = state;
367
+ return selection instanceof TextSelection || selection instanceof AllSelection;
368
+ },
369
+ run: (state, dispatch) => {
370
+ const { schema, selection } = state;
371
+ console.log(this);
372
+ const tr = setTextAlign(state.tr.setSelection(selection), schema, this.active ? null : alignment);
373
+ if (tr.docChanged) {
374
+ dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
375
+ return true;
376
+ }
377
+ else {
378
+ return false;
379
+ }
380
+ },
381
+ });
382
+ }
383
+ }
384
+
265
385
  /**
266
386
  * Convert built-in `MenuItem` into our Angular specific `Item`
267
387
  */
@@ -380,6 +500,12 @@ function buildMenuItems(schema, dialog) {
380
500
  type = schema.nodes.paragraph;
381
501
  if (type) {
382
502
  r.makeParagraph = toItem(blockTypeItem(type, {}));
503
+ if (type.spec === paragraphWithAlignment) {
504
+ r.alignLeft = new TextAlignItem('left');
505
+ r.alignRight = new TextAlignItem('right');
506
+ r.alignCenter = new TextAlignItem('center');
507
+ r.alignJustify = new TextAlignItem('justify');
508
+ }
383
509
  }
384
510
  type = schema.nodes.code_block;
385
511
  if (type) {
@@ -769,7 +895,7 @@ class NaturalEditorComponent {
769
895
  }
770
896
  }
771
897
  NaturalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i1.MatDialog }, { token: ImagePlugin }], target: i0.ɵɵFactoryTarget.Component });
772
- NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: NaturalEditorComponent, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"menu-container\" *ngIf=\"menu\">\n <div class=\"menu\">\n <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon>save</mat-icon>\n </button>\n\n <mat-button-toggle-group multiple>\n <mat-button-toggle\n *ngIf=\"menu.toggleStrong\"\n [disabled]=\"menu.toggleStrong.disabled\"\n [checked]=\"menu.toggleStrong.active\"\n (click)=\"run($event, 'toggleStrong')\"\n i18n-matTooltip\n matTooltip=\"Gras\"\n >\n <mat-icon>format_bold</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleEm\"\n [disabled]=\"menu.toggleEm.disabled\"\n [checked]=\"menu.toggleEm.active\"\n (click)=\"run($event, 'toggleEm')\"\n i18n-matTooltip\n matTooltip=\"Italique\"\n >\n <mat-icon>format_italic</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleCode\"\n [disabled]=\"menu.toggleCode.disabled\"\n [checked]=\"menu.toggleCode.active\"\n (click)=\"run($event, 'toggleCode')\"\n i18n-matTooltip\n matTooltip=\"Code\"\n >\n <mat-icon>code</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleLink\"\n [disabled]=\"menu.toggleLink.disabled\"\n [checked]=\"menu.toggleLink.active\"\n (click)=\"run($event, 'toggleLink')\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer un lien...\"\n >\n <mat-icon>insert_link</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #blockMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.makeParagraph\"\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeCodeBlock\"\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead1\"\n [disabled]=\"menu.makeHead1.disabled\"\n (click)=\"run($event, 'makeHead1')\"\n i18n\n >Titre 1\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead2\"\n [disabled]=\"menu.makeHead2.disabled\"\n (click)=\"run($event, 'makeHead2')\"\n i18n\n >Titre 2\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead3\"\n [disabled]=\"menu.makeHead3.disabled\"\n (click)=\"run($event, 'makeHead3')\"\n i18n\n >Titre 3\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead4\"\n [disabled]=\"menu.makeHead4.disabled\"\n (click)=\"run($event, 'makeHead4')\"\n i18n\n >Titre 4\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead5\"\n [disabled]=\"menu.makeHead5.disabled\"\n (click)=\"run($event, 'makeHead5')\"\n i18n\n >Titre 5\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead6\"\n [disabled]=\"menu.makeHead6.disabled\"\n (click)=\"run($event, 'makeHead6')\"\n i18n\n >Titre 6\n </button>\n </mat-menu>\n\n <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n <span i18n>Tableau</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #tableMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.insertTable\"\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteTable\"\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.mergeCells\"\n [disabled]=\"menu.mergeCells.disabled\"\n (click)=\"run($event, 'mergeCells')\"\n i18n\n >Fusionner les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.splitCell\"\n [disabled]=\"menu.splitCell.disabled\"\n (click)=\"run($event, 'splitCell')\"\n i18n\n >Scinder les cellules\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnBefore\"\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnAfter\"\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteColumn\"\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addRowBefore\"\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addRowAfter\"\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteRow\"\n [disabled]=\"menu.deleteRow.disabled\"\n (click)=\"run($event, 'deleteRow')\"\n i18n\n >Supprimer la ligne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderColumn\"\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderRow\"\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderCell\"\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n </mat-menu>\n\n <button\n mat-button\n *ngIf=\"imageUploader\"\n naturalFileDrop\n [selectable]=\"true\"\n [broadcast]=\"false\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer une image\"\n (fileChange)=\"upload($event)\"\n >\n <mat-icon>insert_photo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.undo\"\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.redo\"\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon>redo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon>format_list_bulleted</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon>format_list_numbered</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon>format_quote</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.joinUp && menu.joinUp.show\"\n [disabled]=\"menu.joinUp.disabled\"\n (click)=\"run($event, 'joinUp')\"\n i18n-matTooltip\n matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n >\n <mat-icon>move_up</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.lift && menu.lift.show\"\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon>format_indent_decrease</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n [disabled]=\"menu.selectParentNode.disabled\"\n (click)=\"run($event, 'selectParentNode')\"\n i18n-matTooltip\n matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n >\n <mat-icon>select_all</mat-icon>\n </button>\n </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:bold;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
898
+ NaturalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.9", type: NaturalEditorComponent, selector: "natural-editor", inputs: { imageUploader: "imageUploader" }, outputs: { contentChange: "contentChange", save: "save" }, providers: [ImagePlugin], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"menu-container\" *ngIf=\"menu\">\n <div class=\"menu\">\n <button mat-button *ngIf=\"save.observed\" (click)=\"save.emit()\" i18n-matTooltip matTooltip=\"Enregistrer\">\n <mat-icon>save</mat-icon>\n </button>\n\n <mat-button-toggle-group multiple>\n <mat-button-toggle\n *ngIf=\"menu.toggleStrong\"\n [disabled]=\"menu.toggleStrong.disabled\"\n [checked]=\"menu.toggleStrong.active\"\n (click)=\"run($event, 'toggleStrong')\"\n i18n-matTooltip\n matTooltip=\"Gras\"\n >\n <mat-icon>format_bold</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleEm\"\n [disabled]=\"menu.toggleEm.disabled\"\n [checked]=\"menu.toggleEm.active\"\n (click)=\"run($event, 'toggleEm')\"\n i18n-matTooltip\n matTooltip=\"Italique\"\n >\n <mat-icon>format_italic</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleCode\"\n [disabled]=\"menu.toggleCode.disabled\"\n [checked]=\"menu.toggleCode.active\"\n (click)=\"run($event, 'toggleCode')\"\n i18n-matTooltip\n matTooltip=\"Code\"\n >\n <mat-icon>code</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.toggleLink\"\n [disabled]=\"menu.toggleLink.disabled\"\n [checked]=\"menu.toggleLink.active\"\n (click)=\"run($event, 'toggleLink')\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer un lien...\"\n >\n <mat-icon>insert_link</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button mat-button [matMenuTriggerFor]=\"blockMenu\">\n <span i18n>Type</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #blockMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.makeParagraph\"\n [disabled]=\"menu.makeParagraph.disabled\"\n (click)=\"run($event, 'makeParagraph')\"\n i18n\n >Paragraphe\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeCodeBlock\"\n [disabled]=\"menu.makeCodeBlock.disabled\"\n (click)=\"run($event, 'makeCodeBlock')\"\n i18n\n >Code\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead1\"\n [disabled]=\"menu.makeHead1.disabled\"\n (click)=\"run($event, 'makeHead1')\"\n i18n\n >Titre 1\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead2\"\n [disabled]=\"menu.makeHead2.disabled\"\n (click)=\"run($event, 'makeHead2')\"\n i18n\n >Titre 2\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead3\"\n [disabled]=\"menu.makeHead3.disabled\"\n (click)=\"run($event, 'makeHead3')\"\n i18n\n >Titre 3\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead4\"\n [disabled]=\"menu.makeHead4.disabled\"\n (click)=\"run($event, 'makeHead4')\"\n i18n\n >Titre 4\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead5\"\n [disabled]=\"menu.makeHead5.disabled\"\n (click)=\"run($event, 'makeHead5')\"\n i18n\n >Titre 5\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.makeHead6\"\n [disabled]=\"menu.makeHead6.disabled\"\n (click)=\"run($event, 'makeHead6')\"\n i18n\n >Titre 6\n </button>\n </mat-menu>\n\n <button mat-button [matMenuTriggerFor]=\"tableMenu\" *ngIf=\"menu.addColumnBefore\">\n <span i18n>Tableau</span>\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n\n <mat-menu #tableMenu=\"matMenu\">\n <button\n mat-menu-item\n *ngIf=\"menu.insertTable\"\n [disabled]=\"menu.insertTable.disabled\"\n (click)=\"run($event, 'insertTable')\"\n i18n\n >Ins\u00E9rer un tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteTable\"\n [disabled]=\"menu.deleteTable.disabled\"\n (click)=\"run($event, 'deleteTable')\"\n i18n\n >Supprimer le tableau\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.mergeCells\"\n [disabled]=\"menu.mergeCells.disabled\"\n (click)=\"run($event, 'mergeCells')\"\n i18n\n >Fusionner les cellules\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.splitCell\"\n [disabled]=\"menu.splitCell.disabled\"\n (click)=\"run($event, 'splitCell')\"\n i18n\n >Scinder les cellules\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnBefore\"\n [disabled]=\"menu.addColumnBefore.disabled\"\n (click)=\"run($event, 'addColumnBefore')\"\n i18n\n >Ins\u00E9rer une colonne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addColumnAfter\"\n [disabled]=\"menu.addColumnAfter.disabled\"\n (click)=\"run($event, 'addColumnAfter')\"\n i18n\n >Ins\u00E9rer une colonne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteColumn\"\n [disabled]=\"menu.deleteColumn.disabled\"\n (click)=\"run($event, 'deleteColumn')\"\n i18n\n >Supprimer la colonne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.addRowBefore\"\n [disabled]=\"menu.addRowBefore.disabled\"\n (click)=\"run($event, 'addRowBefore')\"\n i18n\n >Ins\u00E9rer une ligne avant\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.addRowAfter\"\n [disabled]=\"menu.addRowAfter.disabled\"\n (click)=\"run($event, 'addRowAfter')\"\n i18n\n >Ins\u00E9rer une ligne apr\u00E8s\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.deleteRow\"\n [disabled]=\"menu.deleteRow.disabled\"\n (click)=\"run($event, 'deleteRow')\"\n i18n\n >Supprimer la ligne\n </button>\n\n <mat-divider></mat-divider>\n\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderColumn\"\n [disabled]=\"menu.toggleHeaderColumn.disabled\"\n (click)=\"run($event, 'toggleHeaderColumn')\"\n i18n\n >Ent\u00EAte de colonne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderRow\"\n [disabled]=\"menu.toggleHeaderRow.disabled\"\n (click)=\"run($event, 'toggleHeaderRow')\"\n i18n\n >Ent\u00EAte de ligne\n </button>\n <button\n mat-menu-item\n *ngIf=\"menu.toggleHeaderCell\"\n [disabled]=\"menu.toggleHeaderCell.disabled\"\n (click)=\"run($event, 'toggleHeaderCell')\"\n i18n\n >Ent\u00EAte de cellule\n </button>\n </mat-menu>\n\n <button\n mat-button\n *ngIf=\"imageUploader\"\n naturalFileDrop\n [selectable]=\"true\"\n [broadcast]=\"false\"\n i18n-matTooltip\n matTooltip=\"Ins\u00E9rer une image\"\n (fileChange)=\"upload($event)\"\n >\n <mat-icon>insert_photo</mat-icon>\n </button>\n\n <mat-button-toggle-group *ngIf=\"menu.alignLeft\">\n <mat-button-toggle\n *ngIf=\"menu.alignLeft\"\n [disabled]=\"menu.alignLeft.disabled\"\n [checked]=\"menu.alignLeft.active\"\n (click)=\"run($event, 'alignLeft')\"\n i18n-matTooltip\n matTooltip=\"Aligner gauche\"\n >\n <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignCenter\"\n [disabled]=\"menu.alignCenter.disabled\"\n [checked]=\"menu.alignCenter.active\"\n (click)=\"run($event, 'alignCenter')\"\n i18n-matTooltip\n matTooltip=\"Centrer\"\n >\n <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignRight\"\n [disabled]=\"menu.alignRight.disabled\"\n [checked]=\"menu.alignRight.active\"\n (click)=\"run($event, 'alignRight')\"\n i18n-matTooltip\n matTooltip=\"Aligner droite\"\n >\n <mat-icon>format_align_right</mat-icon>\n </mat-button-toggle>\n\n <mat-button-toggle\n *ngIf=\"menu.alignJustify\"\n [disabled]=\"menu.alignJustify.disabled\"\n [checked]=\"menu.alignJustify.active\"\n (click)=\"run($event, 'alignJustify')\"\n i18n-matTooltip\n matTooltip=\"Justifier\"\n >\n <mat-icon>format_align_justify</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <button\n mat-button\n *ngIf=\"menu.undo\"\n [disabled]=\"menu.undo.disabled\"\n (click)=\"run($event, 'undo')\"\n i18n-matTooltip\n matTooltip=\"Annuler\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.redo\"\n [disabled]=\"menu.redo.disabled\"\n (click)=\"run($event, 'redo')\"\n i18n-matTooltip\n matTooltip=\"Refaire\"\n >\n <mat-icon>redo</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBulletList && menu.wrapBulletList.show\"\n [disabled]=\"menu.wrapBulletList.disabled\"\n (click)=\"run($event, 'wrapBulletList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 puce\"\n >\n <mat-icon>format_list_bulleted</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapOrderedList && menu.wrapOrderedList.show\"\n [disabled]=\"menu.wrapOrderedList.disabled\"\n (click)=\"run($event, 'wrapOrderedList')\"\n i18n-matTooltip\n matTooltip=\"Liste \u00E0 num\u00E9ro\"\n >\n <mat-icon>format_list_numbered</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.wrapBlockQuote && menu.wrapBlockQuote.show\"\n [disabled]=\"menu.wrapBlockQuote.disabled\"\n (click)=\"run($event, 'wrapBlockQuote')\"\n i18n-matTooltip\n matTooltip=\"Citation\"\n >\n <mat-icon>format_quote</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.joinUp && menu.joinUp.show\"\n [disabled]=\"menu.joinUp.disabled\"\n (click)=\"run($event, 'joinUp')\"\n i18n-matTooltip\n matTooltip=\"Fusionner avec l'\u00E9l\u00E9ment du haut\"\n >\n <mat-icon>move_up</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.lift && menu.lift.show\"\n [disabled]=\"menu.lift.disabled\"\n (click)=\"run($event, 'lift')\"\n i18n-matTooltip\n matTooltip=\"D\u00E9sindenter\"\n >\n <mat-icon>format_indent_decrease</mat-icon>\n </button>\n\n <button\n mat-button\n *ngIf=\"menu.selectParentNode && menu.selectParentNode.show\"\n [disabled]=\"menu.selectParentNode.disabled\"\n (click)=\"run($event, 'selectParentNode')\"\n i18n-matTooltip\n matTooltip=\"S\u00E9lectionner l'\u00E9l\u00E9ment parent\"\n >\n <mat-icon>select_all</mat-icon>\n </button>\n </div>\n</div>\n<div #editor></div>\n", styles: [".menu{border-bottom:1px solid;display:flex;flex-wrap:wrap;padding:10px 18px}.menu-container{position:sticky;top:-20px;z-index:999}::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}::ng-deep .ProseMirror .tableWrapper{overflow-x:auto}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}::ng-deep .ProseMirror table{margin:0}::ng-deep .ProseMirror th,::ng-deep .ProseMirror td{min-width:1em;border:1px solid #ddd;padding:3px 5px}::ng-deep .ProseMirror .tableWrapper{margin:1em 0}::ng-deep .ProseMirror th{font-weight:bold;text-align:left}::ng-deep placeholder{display:block;width:50px;height:50px;background-size:500% 100%!important;animation:gradient 3s none infinite}@keyframes gradient{0%{background-position:100% 100%}to{background-position:0 0}}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
773
899
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0, type: NaturalEditorComponent, decorators: [{
774
900
  type: Component,
775
901
  args: [{