@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.
- package/bundles/ecodev-natural-editor.umd.js +132 -3
- package/bundles/ecodev-natural-editor.umd.js.map +1 -1
- package/esm2015/lib/editor/editor.component.js +2 -2
- package/esm2015/lib/utils/item.js +39 -0
- package/esm2015/lib/utils/menu.js +10 -39
- package/esm2015/lib/utils/paragraph-with-alignment.js +43 -0
- package/esm2015/lib/utils/schema.js +4 -3
- package/esm2015/lib/utils/text-align-item.js +78 -0
- package/fesm2015/ecodev-natural-editor.js +130 -4
- package/fesm2015/ecodev-natural-editor.js.map +1 -1
- package/lib/utils/item.d.ts +30 -0
- package/lib/utils/menu.d.ts +2 -31
- package/lib/utils/paragraph-with-alignment.d.ts +2 -0
- package/lib/utils/text-align-item.d.ts +6 -0
- package/package.json +1 -1
|
@@ -434,6 +434,49 @@
|
|
|
434
434
|
}] }];
|
|
435
435
|
} });
|
|
436
436
|
|
|
437
|
+
var ALIGN_PATTERN = /(left|right|center|justify)/;
|
|
438
|
+
// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
|
|
439
|
+
// :: NodeSpec A plain paragraph textblock. Represented in the DOM
|
|
440
|
+
// as a `<p>` element.
|
|
441
|
+
var paragraphWithAlignment = {
|
|
442
|
+
attrs: {
|
|
443
|
+
align: { default: null },
|
|
444
|
+
id: { default: null },
|
|
445
|
+
},
|
|
446
|
+
content: 'inline*',
|
|
447
|
+
group: 'block',
|
|
448
|
+
parseDOM: [
|
|
449
|
+
{
|
|
450
|
+
tag: 'p',
|
|
451
|
+
getAttrs: function (dom) {
|
|
452
|
+
if (!(dom instanceof HTMLElement)) {
|
|
453
|
+
return;
|
|
454
|
+
}
|
|
455
|
+
var textAlign = dom.style.textAlign;
|
|
456
|
+
var align = dom.getAttribute('align') || textAlign || '';
|
|
457
|
+
align = ALIGN_PATTERN.test(align) ? align : null;
|
|
458
|
+
var id = dom.getAttribute('id') || '';
|
|
459
|
+
return { align: align, id: id };
|
|
460
|
+
},
|
|
461
|
+
},
|
|
462
|
+
],
|
|
463
|
+
toDOM: function (node) {
|
|
464
|
+
var _a = node.attrs, align = _a.align, id = _a.id;
|
|
465
|
+
var attrs = {};
|
|
466
|
+
var style = '';
|
|
467
|
+
if (align && align !== 'left') {
|
|
468
|
+
style += "text-align: " + align + ";";
|
|
469
|
+
}
|
|
470
|
+
if (style) {
|
|
471
|
+
attrs.style = style;
|
|
472
|
+
}
|
|
473
|
+
if (id) {
|
|
474
|
+
attrs.id = id;
|
|
475
|
+
}
|
|
476
|
+
return ['p', attrs, 0];
|
|
477
|
+
},
|
|
478
|
+
};
|
|
479
|
+
|
|
437
480
|
var basicNodes = {
|
|
438
481
|
heading: prosemirrorSchemaBasic.nodes.heading,
|
|
439
482
|
doc: prosemirrorSchemaBasic.nodes.doc,
|
|
@@ -452,7 +495,7 @@
|
|
|
452
495
|
marks: tmpSchema.spec.marks,
|
|
453
496
|
});
|
|
454
497
|
var tmpSchema2 = new prosemirrorModel.Schema({
|
|
455
|
-
nodes: Object.assign(Object.assign({}, prosemirrorSchemaBasic.nodes), prosemirrorTables.tableNodes({
|
|
498
|
+
nodes: Object.assign(Object.assign(Object.assign({}, prosemirrorSchemaBasic.nodes), prosemirrorTables.tableNodes({
|
|
456
499
|
tableGroup: 'block',
|
|
457
500
|
cellContent: 'block+',
|
|
458
501
|
cellAttributes: {
|
|
@@ -468,7 +511,7 @@
|
|
|
468
511
|
},
|
|
469
512
|
},
|
|
470
513
|
},
|
|
471
|
-
})),
|
|
514
|
+
})), { paragraph: paragraphWithAlignment }),
|
|
472
515
|
marks: basicMarks,
|
|
473
516
|
});
|
|
474
517
|
var advancedSchema = new prosemirrorModel.Schema({
|
|
@@ -586,6 +629,86 @@
|
|
|
586
629
|
};
|
|
587
630
|
return Item;
|
|
588
631
|
}());
|
|
632
|
+
|
|
633
|
+
function setTextAlign(tr, schema, alignment) {
|
|
634
|
+
console.log('setTextAlign', alignment);
|
|
635
|
+
var selection = tr.selection, doc = tr.doc;
|
|
636
|
+
if (!selection || !doc) {
|
|
637
|
+
return tr;
|
|
638
|
+
}
|
|
639
|
+
var from = selection.from, to = selection.to;
|
|
640
|
+
var nodes = schema.nodes;
|
|
641
|
+
var tasks = [];
|
|
642
|
+
alignment = alignment || null;
|
|
643
|
+
var allowedNodeTypes = new Set([
|
|
644
|
+
nodes.paragraph,
|
|
645
|
+
// nodes['blockquote'],
|
|
646
|
+
// nodes['listItem'],
|
|
647
|
+
// nodes['heading'],
|
|
648
|
+
]);
|
|
649
|
+
doc.nodesBetween(from, to, function (node, pos) {
|
|
650
|
+
var nodeType = node.type;
|
|
651
|
+
var align = node.attrs.align || null;
|
|
652
|
+
if (align !== alignment && allowedNodeTypes.has(nodeType)) {
|
|
653
|
+
tasks.push({
|
|
654
|
+
node: node,
|
|
655
|
+
pos: pos,
|
|
656
|
+
nodeType: nodeType,
|
|
657
|
+
});
|
|
658
|
+
}
|
|
659
|
+
return true;
|
|
660
|
+
});
|
|
661
|
+
if (!tasks.length) {
|
|
662
|
+
return tr;
|
|
663
|
+
}
|
|
664
|
+
tasks.forEach(function (job) {
|
|
665
|
+
var node = job.node, pos = job.pos, nodeType = job.nodeType;
|
|
666
|
+
var newAttrs = Object.assign(Object.assign({}, node.attrs), { align: alignment ? alignment : null });
|
|
667
|
+
console.log('newAttrs', newAttrs);
|
|
668
|
+
tr = tr.setNodeMarkup(pos, nodeType, newAttrs, node.marks);
|
|
669
|
+
});
|
|
670
|
+
return tr;
|
|
671
|
+
}
|
|
672
|
+
var TextAlignItem = /** @class */ (function (_super) {
|
|
673
|
+
__extends(TextAlignItem, _super);
|
|
674
|
+
function TextAlignItem(alignment) {
|
|
675
|
+
var _this = _super.call(this, {
|
|
676
|
+
active: function (state) {
|
|
677
|
+
var selection = state.selection, doc = state.doc;
|
|
678
|
+
var from = selection.from, to = selection.to;
|
|
679
|
+
var keepLooking = true;
|
|
680
|
+
var active = false;
|
|
681
|
+
doc.nodesBetween(from, to, function (node) {
|
|
682
|
+
if (keepLooking && node.attrs.align === alignment) {
|
|
683
|
+
keepLooking = false;
|
|
684
|
+
active = true;
|
|
685
|
+
}
|
|
686
|
+
return keepLooking;
|
|
687
|
+
});
|
|
688
|
+
return active;
|
|
689
|
+
},
|
|
690
|
+
enable: function (state) {
|
|
691
|
+
var selection = state.selection;
|
|
692
|
+
return selection instanceof prosemirrorState.TextSelection || selection instanceof prosemirrorState.AllSelection;
|
|
693
|
+
},
|
|
694
|
+
run: function (state, dispatch) {
|
|
695
|
+
var schema = state.schema, selection = state.selection;
|
|
696
|
+
console.log(_this);
|
|
697
|
+
var tr = setTextAlign(state.tr.setSelection(selection), schema, _this.active ? null : alignment);
|
|
698
|
+
if (tr.docChanged) {
|
|
699
|
+
dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
|
|
700
|
+
return true;
|
|
701
|
+
}
|
|
702
|
+
else {
|
|
703
|
+
return false;
|
|
704
|
+
}
|
|
705
|
+
},
|
|
706
|
+
}) || this;
|
|
707
|
+
return _this;
|
|
708
|
+
}
|
|
709
|
+
return TextAlignItem;
|
|
710
|
+
}(Item));
|
|
711
|
+
|
|
589
712
|
/**
|
|
590
713
|
* Convert built-in `MenuItem` into our Angular specific `Item`
|
|
591
714
|
*/
|
|
@@ -707,6 +830,12 @@
|
|
|
707
830
|
type = schema.nodes.paragraph;
|
|
708
831
|
if (type) {
|
|
709
832
|
r.makeParagraph = toItem(prosemirrorMenu.blockTypeItem(type, {}));
|
|
833
|
+
if (type.spec === paragraphWithAlignment) {
|
|
834
|
+
r.alignLeft = new TextAlignItem('left');
|
|
835
|
+
r.alignRight = new TextAlignItem('right');
|
|
836
|
+
r.alignCenter = new TextAlignItem('center');
|
|
837
|
+
r.alignJustify = new TextAlignItem('justify');
|
|
838
|
+
}
|
|
710
839
|
}
|
|
711
840
|
type = schema.nodes.code_block;
|
|
712
841
|
if (type) {
|
|
@@ -1110,7 +1239,7 @@
|
|
|
1110
1239
|
return NaturalEditorComponent;
|
|
1111
1240
|
}());
|
|
1112
1241
|
NaturalEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }, { token: i6.DOCUMENT }, { token: i1__namespace.MatDialog }, { token: ImagePlugin }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1113
|
-
NaturalEditorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace.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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace$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__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11__namespace.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
|
|
1242
|
+
NaturalEditorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace.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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace$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__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i7__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i7__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11__namespace.NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }] });
|
|
1114
1243
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.9", ngImport: i0__namespace, type: NaturalEditorComponent, decorators: [{
|
|
1115
1244
|
type: i0.Component,
|
|
1116
1245
|
args: [{
|