@flogeez/angular-tiptap-editor 3.1.5 → 3.2.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/CHANGELOG.md +6 -0
- package/esm2022/lib/components/editor/angular-tiptap-editor.component.mjs +23 -2
- package/esm2022/lib/models/ate-editor-ref.mjs +319 -0
- package/esm2022/lib/services/ate-editor-registry.service.mjs +94 -0
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +432 -2
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/lib/components/editor/angular-tiptap-editor.component.d.ts +9 -1
- package/lib/models/ate-editor-ref.d.ts +73 -0
- package/lib/services/ate-editor-registry.service.d.ts +36 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -6360,6 +6360,416 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
6360
6360
|
`, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"] }]
|
|
6361
6361
|
}] });
|
|
6362
6362
|
|
|
6363
|
+
/**
|
|
6364
|
+
* A wrapper class that holds a reference to a registered editor component.
|
|
6365
|
+
* It provides direct, type-safe facade methods to interact with the editor
|
|
6366
|
+
* and execute formatting/utility commands without needing to manage the raw
|
|
6367
|
+
* TipTap editor instance directly.
|
|
6368
|
+
*/
|
|
6369
|
+
class AteEditorRef {
|
|
6370
|
+
constructor(id, getEditorInstance, commandsService) {
|
|
6371
|
+
this.id = id;
|
|
6372
|
+
this.getEditorInstance = getEditorInstance;
|
|
6373
|
+
this.commandsService = commandsService;
|
|
6374
|
+
}
|
|
6375
|
+
/** Get the raw TipTap Editor instance. */
|
|
6376
|
+
get editor() {
|
|
6377
|
+
return this.getEditorInstance();
|
|
6378
|
+
}
|
|
6379
|
+
/** Get the current editor state snapshot. */
|
|
6380
|
+
get state() {
|
|
6381
|
+
return this.commandsService.editorState();
|
|
6382
|
+
}
|
|
6383
|
+
/** Get the reactive editor state as a Signal. */
|
|
6384
|
+
get stateSignal() {
|
|
6385
|
+
return this.commandsService.editorState;
|
|
6386
|
+
}
|
|
6387
|
+
/** Execute a generic command by name. */
|
|
6388
|
+
execute(command, ...args) {
|
|
6389
|
+
const editor = this.editor;
|
|
6390
|
+
if (editor) {
|
|
6391
|
+
this.commandsService.execute(editor, command, ...args);
|
|
6392
|
+
}
|
|
6393
|
+
}
|
|
6394
|
+
// ============================================
|
|
6395
|
+
// Facade Formatting Commands
|
|
6396
|
+
// ============================================
|
|
6397
|
+
toggleBold() {
|
|
6398
|
+
const editor = this.editor;
|
|
6399
|
+
if (editor) {
|
|
6400
|
+
this.commandsService.toggleBold(editor);
|
|
6401
|
+
}
|
|
6402
|
+
}
|
|
6403
|
+
toggleItalic() {
|
|
6404
|
+
const editor = this.editor;
|
|
6405
|
+
if (editor) {
|
|
6406
|
+
this.commandsService.toggleItalic(editor);
|
|
6407
|
+
}
|
|
6408
|
+
}
|
|
6409
|
+
toggleStrike() {
|
|
6410
|
+
const editor = this.editor;
|
|
6411
|
+
if (editor) {
|
|
6412
|
+
this.commandsService.toggleStrike(editor);
|
|
6413
|
+
}
|
|
6414
|
+
}
|
|
6415
|
+
toggleCode() {
|
|
6416
|
+
const editor = this.editor;
|
|
6417
|
+
if (editor) {
|
|
6418
|
+
this.commandsService.toggleCode(editor);
|
|
6419
|
+
}
|
|
6420
|
+
}
|
|
6421
|
+
toggleCodeBlock() {
|
|
6422
|
+
const editor = this.editor;
|
|
6423
|
+
if (editor) {
|
|
6424
|
+
this.commandsService.toggleCodeBlock(editor);
|
|
6425
|
+
}
|
|
6426
|
+
}
|
|
6427
|
+
toggleUnderline() {
|
|
6428
|
+
const editor = this.editor;
|
|
6429
|
+
if (editor) {
|
|
6430
|
+
this.commandsService.toggleUnderline(editor);
|
|
6431
|
+
}
|
|
6432
|
+
}
|
|
6433
|
+
toggleSuperscript() {
|
|
6434
|
+
const editor = this.editor;
|
|
6435
|
+
if (editor) {
|
|
6436
|
+
this.commandsService.toggleSuperscript(editor);
|
|
6437
|
+
}
|
|
6438
|
+
}
|
|
6439
|
+
toggleSubscript() {
|
|
6440
|
+
const editor = this.editor;
|
|
6441
|
+
if (editor) {
|
|
6442
|
+
this.commandsService.toggleSubscript(editor);
|
|
6443
|
+
}
|
|
6444
|
+
}
|
|
6445
|
+
toggleHeading(level) {
|
|
6446
|
+
const editor = this.editor;
|
|
6447
|
+
if (editor) {
|
|
6448
|
+
this.commandsService.toggleHeading(editor, level);
|
|
6449
|
+
}
|
|
6450
|
+
}
|
|
6451
|
+
toggleBulletList() {
|
|
6452
|
+
const editor = this.editor;
|
|
6453
|
+
if (editor) {
|
|
6454
|
+
this.commandsService.toggleBulletList(editor);
|
|
6455
|
+
}
|
|
6456
|
+
}
|
|
6457
|
+
toggleOrderedList() {
|
|
6458
|
+
const editor = this.editor;
|
|
6459
|
+
if (editor) {
|
|
6460
|
+
this.commandsService.toggleOrderedList(editor);
|
|
6461
|
+
}
|
|
6462
|
+
}
|
|
6463
|
+
toggleBlockquote() {
|
|
6464
|
+
const editor = this.editor;
|
|
6465
|
+
if (editor) {
|
|
6466
|
+
this.commandsService.toggleBlockquote(editor);
|
|
6467
|
+
}
|
|
6468
|
+
}
|
|
6469
|
+
setTextAlign(alignment) {
|
|
6470
|
+
const editor = this.editor;
|
|
6471
|
+
if (editor) {
|
|
6472
|
+
this.commandsService.setTextAlign(editor, alignment);
|
|
6473
|
+
}
|
|
6474
|
+
}
|
|
6475
|
+
insertHorizontalRule() {
|
|
6476
|
+
const editor = this.editor;
|
|
6477
|
+
if (editor) {
|
|
6478
|
+
this.commandsService.insertHorizontalRule(editor);
|
|
6479
|
+
}
|
|
6480
|
+
}
|
|
6481
|
+
insertImage(options) {
|
|
6482
|
+
const editor = this.editor;
|
|
6483
|
+
if (editor) {
|
|
6484
|
+
this.commandsService.insertImage(editor, options);
|
|
6485
|
+
}
|
|
6486
|
+
}
|
|
6487
|
+
uploadImage(file, options) {
|
|
6488
|
+
const editor = this.editor;
|
|
6489
|
+
if (editor) {
|
|
6490
|
+
this.commandsService.uploadImage(editor, file, options);
|
|
6491
|
+
}
|
|
6492
|
+
}
|
|
6493
|
+
toggleHighlight(color) {
|
|
6494
|
+
const editor = this.editor;
|
|
6495
|
+
if (editor) {
|
|
6496
|
+
this.commandsService.toggleHighlight(editor, color);
|
|
6497
|
+
}
|
|
6498
|
+
}
|
|
6499
|
+
undo() {
|
|
6500
|
+
const editor = this.editor;
|
|
6501
|
+
if (editor) {
|
|
6502
|
+
this.commandsService.undo(editor);
|
|
6503
|
+
}
|
|
6504
|
+
}
|
|
6505
|
+
redo() {
|
|
6506
|
+
const editor = this.editor;
|
|
6507
|
+
if (editor) {
|
|
6508
|
+
this.commandsService.redo(editor);
|
|
6509
|
+
}
|
|
6510
|
+
}
|
|
6511
|
+
// ============================================
|
|
6512
|
+
// Table Commands
|
|
6513
|
+
// ============================================
|
|
6514
|
+
insertTable(rows, cols) {
|
|
6515
|
+
const editor = this.editor;
|
|
6516
|
+
if (editor) {
|
|
6517
|
+
this.commandsService.insertTable(editor, rows, cols);
|
|
6518
|
+
}
|
|
6519
|
+
}
|
|
6520
|
+
addColumnBefore() {
|
|
6521
|
+
const editor = this.editor;
|
|
6522
|
+
if (editor) {
|
|
6523
|
+
this.commandsService.addColumnBefore(editor);
|
|
6524
|
+
}
|
|
6525
|
+
}
|
|
6526
|
+
addColumnAfter() {
|
|
6527
|
+
const editor = this.editor;
|
|
6528
|
+
if (editor) {
|
|
6529
|
+
this.commandsService.addColumnAfter(editor);
|
|
6530
|
+
}
|
|
6531
|
+
}
|
|
6532
|
+
deleteColumn() {
|
|
6533
|
+
const editor = this.editor;
|
|
6534
|
+
if (editor) {
|
|
6535
|
+
this.commandsService.deleteColumn(editor);
|
|
6536
|
+
}
|
|
6537
|
+
}
|
|
6538
|
+
addRowBefore() {
|
|
6539
|
+
const editor = this.editor;
|
|
6540
|
+
if (editor) {
|
|
6541
|
+
this.commandsService.addRowBefore(editor);
|
|
6542
|
+
}
|
|
6543
|
+
}
|
|
6544
|
+
addRowAfter() {
|
|
6545
|
+
const editor = this.editor;
|
|
6546
|
+
if (editor) {
|
|
6547
|
+
this.commandsService.addRowAfter(editor);
|
|
6548
|
+
}
|
|
6549
|
+
}
|
|
6550
|
+
deleteRow() {
|
|
6551
|
+
const editor = this.editor;
|
|
6552
|
+
if (editor) {
|
|
6553
|
+
this.commandsService.deleteRow(editor);
|
|
6554
|
+
}
|
|
6555
|
+
}
|
|
6556
|
+
deleteTable() {
|
|
6557
|
+
const editor = this.editor;
|
|
6558
|
+
if (editor) {
|
|
6559
|
+
this.commandsService.deleteTable(editor);
|
|
6560
|
+
}
|
|
6561
|
+
}
|
|
6562
|
+
mergeCells() {
|
|
6563
|
+
const editor = this.editor;
|
|
6564
|
+
if (editor) {
|
|
6565
|
+
this.commandsService.mergeCells(editor);
|
|
6566
|
+
}
|
|
6567
|
+
}
|
|
6568
|
+
splitCell() {
|
|
6569
|
+
const editor = this.editor;
|
|
6570
|
+
if (editor) {
|
|
6571
|
+
this.commandsService.splitCell(editor);
|
|
6572
|
+
}
|
|
6573
|
+
}
|
|
6574
|
+
toggleHeaderColumn() {
|
|
6575
|
+
const editor = this.editor;
|
|
6576
|
+
if (editor) {
|
|
6577
|
+
this.commandsService.toggleHeaderColumn(editor);
|
|
6578
|
+
}
|
|
6579
|
+
}
|
|
6580
|
+
toggleHeaderRow() {
|
|
6581
|
+
const editor = this.editor;
|
|
6582
|
+
if (editor) {
|
|
6583
|
+
this.commandsService.toggleHeaderRow(editor);
|
|
6584
|
+
}
|
|
6585
|
+
}
|
|
6586
|
+
// ============================================
|
|
6587
|
+
// Color Picker & Link Commands
|
|
6588
|
+
// ============================================
|
|
6589
|
+
applyColor(color, selectionOnly, closeMenu) {
|
|
6590
|
+
const editor = this.editor;
|
|
6591
|
+
if (editor) {
|
|
6592
|
+
this.commandsService.execute(editor, "applyColor", color, selectionOnly, closeMenu);
|
|
6593
|
+
}
|
|
6594
|
+
}
|
|
6595
|
+
applyHighlight(color, selectionOnly, closeMenu) {
|
|
6596
|
+
const editor = this.editor;
|
|
6597
|
+
if (editor) {
|
|
6598
|
+
this.commandsService.execute(editor, "applyHighlight", color, selectionOnly, closeMenu);
|
|
6599
|
+
}
|
|
6600
|
+
}
|
|
6601
|
+
unsetColor(selectionOnly) {
|
|
6602
|
+
const editor = this.editor;
|
|
6603
|
+
if (editor) {
|
|
6604
|
+
this.commandsService.execute(editor, "unsetColor", selectionOnly);
|
|
6605
|
+
}
|
|
6606
|
+
}
|
|
6607
|
+
unsetHighlight(selectionOnly) {
|
|
6608
|
+
const editor = this.editor;
|
|
6609
|
+
if (editor) {
|
|
6610
|
+
this.commandsService.execute(editor, "unsetHighlight", selectionOnly);
|
|
6611
|
+
}
|
|
6612
|
+
}
|
|
6613
|
+
toggleLink(event) {
|
|
6614
|
+
const editor = this.editor;
|
|
6615
|
+
if (editor) {
|
|
6616
|
+
this.commandsService.execute(editor, "toggleLink", event);
|
|
6617
|
+
}
|
|
6618
|
+
}
|
|
6619
|
+
unsetLink() {
|
|
6620
|
+
const editor = this.editor;
|
|
6621
|
+
if (editor) {
|
|
6622
|
+
this.commandsService.execute(editor, "unsetLink");
|
|
6623
|
+
}
|
|
6624
|
+
}
|
|
6625
|
+
toggleColorPicker(mode, event) {
|
|
6626
|
+
const editor = this.editor;
|
|
6627
|
+
if (editor) {
|
|
6628
|
+
this.commandsService.execute(editor, "toggleColorPicker", mode, event);
|
|
6629
|
+
}
|
|
6630
|
+
}
|
|
6631
|
+
// ============================================
|
|
6632
|
+
// General Controls & Content
|
|
6633
|
+
// ============================================
|
|
6634
|
+
clearContent() {
|
|
6635
|
+
const editor = this.editor;
|
|
6636
|
+
if (editor) {
|
|
6637
|
+
this.commandsService.clearContent(editor);
|
|
6638
|
+
}
|
|
6639
|
+
}
|
|
6640
|
+
setContent(content, emitUpdate = true) {
|
|
6641
|
+
const editor = this.editor;
|
|
6642
|
+
if (editor) {
|
|
6643
|
+
this.commandsService.setContent(editor, content, emitUpdate);
|
|
6644
|
+
}
|
|
6645
|
+
}
|
|
6646
|
+
getContent(format) {
|
|
6647
|
+
const editor = this.editor;
|
|
6648
|
+
return editor ? this.commandsService.getContent(editor, format) : "";
|
|
6649
|
+
}
|
|
6650
|
+
getHTML() {
|
|
6651
|
+
const editor = this.editor;
|
|
6652
|
+
return editor ? editor.getHTML() : "";
|
|
6653
|
+
}
|
|
6654
|
+
getJSON() {
|
|
6655
|
+
const editor = this.editor;
|
|
6656
|
+
return editor ? editor.getJSON() : undefined;
|
|
6657
|
+
}
|
|
6658
|
+
getText() {
|
|
6659
|
+
const editor = this.editor;
|
|
6660
|
+
return editor ? editor.getText() : "";
|
|
6661
|
+
}
|
|
6662
|
+
async exportAs(format, method, options) {
|
|
6663
|
+
const editor = this.editor;
|
|
6664
|
+
if (editor) {
|
|
6665
|
+
await this.commandsService.exportAs(editor, format, method, options);
|
|
6666
|
+
}
|
|
6667
|
+
}
|
|
6668
|
+
focus() {
|
|
6669
|
+
const editor = this.editor;
|
|
6670
|
+
if (editor) {
|
|
6671
|
+
this.commandsService.focus(editor);
|
|
6672
|
+
}
|
|
6673
|
+
}
|
|
6674
|
+
blur() {
|
|
6675
|
+
const editor = this.editor;
|
|
6676
|
+
if (editor) {
|
|
6677
|
+
this.commandsService.blur(editor);
|
|
6678
|
+
}
|
|
6679
|
+
}
|
|
6680
|
+
}
|
|
6681
|
+
|
|
6682
|
+
/**
|
|
6683
|
+
* A root-level registry service to register, unregister, and manage active editor instances.
|
|
6684
|
+
* This service is provided in 'root' and can be injected anywhere in the application.
|
|
6685
|
+
*/
|
|
6686
|
+
class AteEditorRegistry {
|
|
6687
|
+
constructor() {
|
|
6688
|
+
// Map of registered editors
|
|
6689
|
+
this._editors = signal(new Map());
|
|
6690
|
+
this.editors = this._editors.asReadonly();
|
|
6691
|
+
// Active (last focused or last registered) editor ID
|
|
6692
|
+
this._activeEditorId = signal(null);
|
|
6693
|
+
this.activeEditorId = this._activeEditorId.asReadonly();
|
|
6694
|
+
// List of all active editor IDs reactively
|
|
6695
|
+
this.editorIds = computed(() => Array.from(this._editors().keys()));
|
|
6696
|
+
// Active AteEditorRef reactively
|
|
6697
|
+
this.activeEditor = computed(() => {
|
|
6698
|
+
const activeId = this._activeEditorId();
|
|
6699
|
+
if (!activeId) {
|
|
6700
|
+
return null;
|
|
6701
|
+
}
|
|
6702
|
+
return this._editors().get(activeId) || null;
|
|
6703
|
+
});
|
|
6704
|
+
}
|
|
6705
|
+
static { this.counter = 0; }
|
|
6706
|
+
/**
|
|
6707
|
+
* Register an editor instance.
|
|
6708
|
+
* Returns the final registered ID.
|
|
6709
|
+
*/
|
|
6710
|
+
register(id, getEditor, commandsService) {
|
|
6711
|
+
const finalId = id || `ate-editor-${++AteEditorRegistry.counter}`;
|
|
6712
|
+
const editorRef = new AteEditorRef(finalId, getEditor, commandsService);
|
|
6713
|
+
this._editors.update(map => {
|
|
6714
|
+
const newMap = new Map(map);
|
|
6715
|
+
newMap.set(finalId, editorRef);
|
|
6716
|
+
return newMap;
|
|
6717
|
+
});
|
|
6718
|
+
// If there is no active editor, make this one active
|
|
6719
|
+
if (!this._activeEditorId()) {
|
|
6720
|
+
this._activeEditorId.set(finalId);
|
|
6721
|
+
}
|
|
6722
|
+
return finalId;
|
|
6723
|
+
}
|
|
6724
|
+
/**
|
|
6725
|
+
* Unregister an editor instance by ID.
|
|
6726
|
+
*/
|
|
6727
|
+
unregister(id) {
|
|
6728
|
+
this._editors.update(map => {
|
|
6729
|
+
const newMap = new Map(map);
|
|
6730
|
+
newMap.delete(id);
|
|
6731
|
+
return newMap;
|
|
6732
|
+
});
|
|
6733
|
+
// If the active editor is the one being unregistered, find a fallback
|
|
6734
|
+
if (this._activeEditorId() === id) {
|
|
6735
|
+
const remainingIds = this.editorIds();
|
|
6736
|
+
if (remainingIds.length > 0) {
|
|
6737
|
+
// Set active to the last registered one remaining
|
|
6738
|
+
this._activeEditorId.set(remainingIds[remainingIds.length - 1]);
|
|
6739
|
+
}
|
|
6740
|
+
else {
|
|
6741
|
+
this._activeEditorId.set(null);
|
|
6742
|
+
}
|
|
6743
|
+
}
|
|
6744
|
+
}
|
|
6745
|
+
/**
|
|
6746
|
+
* Mark an editor as active (usually on focus).
|
|
6747
|
+
*/
|
|
6748
|
+
setActive(id) {
|
|
6749
|
+
if (this._editors().has(id)) {
|
|
6750
|
+
this._activeEditorId.set(id);
|
|
6751
|
+
}
|
|
6752
|
+
}
|
|
6753
|
+
/**
|
|
6754
|
+
* Retrieve an editor reference by ID, or the active editor if ID is not specified.
|
|
6755
|
+
*/
|
|
6756
|
+
get(id) {
|
|
6757
|
+
if (id) {
|
|
6758
|
+
return this._editors().get(id);
|
|
6759
|
+
}
|
|
6760
|
+
const activeId = this._activeEditorId();
|
|
6761
|
+
return activeId ? this._editors().get(activeId) : undefined;
|
|
6762
|
+
}
|
|
6763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6764
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, providedIn: "root" }); }
|
|
6765
|
+
}
|
|
6766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, decorators: [{
|
|
6767
|
+
type: Injectable,
|
|
6768
|
+
args: [{
|
|
6769
|
+
providedIn: "root",
|
|
6770
|
+
}]
|
|
6771
|
+
}] });
|
|
6772
|
+
|
|
6363
6773
|
/**
|
|
6364
6774
|
* Noop Value Accessor Directive
|
|
6365
6775
|
* @link https://medium.com/netanelbasal/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
|
|
@@ -7351,6 +7761,11 @@ class AngularTiptapEditorComponent {
|
|
|
7351
7761
|
* ```
|
|
7352
7762
|
*/
|
|
7353
7763
|
this.imageUploadHandler = input(undefined);
|
|
7764
|
+
/**
|
|
7765
|
+
* Optional unique identifier for the editor instance in the registry.
|
|
7766
|
+
* If not specified, a unique ID is automatically generated.
|
|
7767
|
+
*/
|
|
7768
|
+
this.editorId = input(undefined);
|
|
7354
7769
|
// Nouveaux outputs
|
|
7355
7770
|
this.contentChange = output();
|
|
7356
7771
|
this.editorCreated = output();
|
|
@@ -7543,6 +7958,9 @@ class AngularTiptapEditorComponent {
|
|
|
7543
7958
|
this.editorCommandsService = inject(AteEditorCommandsService);
|
|
7544
7959
|
// Access editor state via service
|
|
7545
7960
|
this.editorState = this.editorCommandsService.editorState;
|
|
7961
|
+
this.editorRegistry = inject(AteEditorRegistry);
|
|
7962
|
+
this._registeredId = signal(null);
|
|
7963
|
+
this.registeredId = this._registeredId.asReadonly();
|
|
7546
7964
|
this.injector = inject(Injector);
|
|
7547
7965
|
this.globalConfig = inject(ATE_GLOBAL_CONFIG, { optional: true });
|
|
7548
7966
|
/**
|
|
@@ -7653,6 +8071,11 @@ class AngularTiptapEditorComponent {
|
|
|
7653
8071
|
currentEditor.destroy();
|
|
7654
8072
|
}
|
|
7655
8073
|
this._editorFullyInitialized.set(false);
|
|
8074
|
+
// Unregister from the global registry
|
|
8075
|
+
const id = this.registeredId();
|
|
8076
|
+
if (id) {
|
|
8077
|
+
this.editorRegistry.unregister(id);
|
|
8078
|
+
}
|
|
7656
8079
|
}
|
|
7657
8080
|
initEditor() {
|
|
7658
8081
|
const extensions = [
|
|
@@ -7825,6 +8248,10 @@ class AngularTiptapEditorComponent {
|
|
|
7825
8248
|
}, 100);
|
|
7826
8249
|
},
|
|
7827
8250
|
onFocus: ({ editor, event }) => {
|
|
8251
|
+
const id = this.registeredId();
|
|
8252
|
+
if (id) {
|
|
8253
|
+
this.editorRegistry.setActive(id);
|
|
8254
|
+
}
|
|
7828
8255
|
this.editorFocus.emit({ editor, event });
|
|
7829
8256
|
},
|
|
7830
8257
|
onBlur: ({ editor, event }) => {
|
|
@@ -7837,6 +8264,9 @@ class AngularTiptapEditorComponent {
|
|
|
7837
8264
|
});
|
|
7838
8265
|
// Stocker la référence de l'éditeur immédiatement
|
|
7839
8266
|
this._editor.set(newEditor);
|
|
8267
|
+
// Register editor in the global registry
|
|
8268
|
+
const registeredId = this.editorRegistry.register(this.editorId(), () => this.editor(), this.editorCommandsService);
|
|
8269
|
+
this._registeredId.set(registeredId);
|
|
7840
8270
|
}
|
|
7841
8271
|
toggleEditMode(event) {
|
|
7842
8272
|
event.preventDefault();
|
|
@@ -7963,7 +8393,7 @@ class AngularTiptapEditorComponent {
|
|
|
7963
8393
|
}
|
|
7964
8394
|
}
|
|
7965
8395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, blockControls: { classPropertyName: "blockControls", publicName: "blockControls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "class.ate-blocks-inside": "finalBlockControls() === 'inside'", "class.ate-blocks-outside": "finalBlockControls() === 'outside'", "attr.data-theme": "config().theme" } }, providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService, AteExportService], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
|
|
8396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, blockControls: { classPropertyName: "blockControls", publicName: "blockControls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "class.ate-blocks-inside": "finalBlockControls() === 'inside'", "class.ate-blocks-outside": "finalBlockControls() === 'outside'", "attr.data-theme": "config().theme" } }, providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService, AteExportService], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
|
|
7967
8397
|
<div class="ate-editor">
|
|
7968
8398
|
<!-- Toolbar -->
|
|
7969
8399
|
@if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
|
|
@@ -8326,5 +8756,5 @@ const ATE_TOOLBAR_KEYS = [
|
|
|
8326
8756
|
* Generated bundle index. Do not edit.
|
|
8327
8757
|
*/
|
|
8328
8758
|
|
|
8329
|
-
export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteExportService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
|
|
8759
|
+
export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteEditorRef, AteEditorRegistry, AteExportService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
|
|
8330
8760
|
//# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map
|