@cuby-ui/core 0.0.596 → 0.0.597

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.
@@ -6,7 +6,7 @@ import { DomSanitizer } from '@angular/platform-browser';
6
6
  import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
7
7
  import * as i1$1 from '@cuby-ui/cdk';
8
8
  import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CUI_WINDOW, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, CuiActiveZone, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, cuiWithStyles, CHAR_NO_BREAK_SPACE, CuiItemDirective, CuiFocusTrapDirective, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiElementDirective, CuiDimensionsObserverDirective, CuiIdService, CuiAutoResizingDirective, CuiDragPointerDirective, CuiDragDropDirective, CuiDragListDirective, CuiHandleScrollDirective, FilesUploader, takeCaptureFromVideo, CuiConsumptionUnitsService, UnitsAmount, CuiTypedTemplateDirective } from '@cuby-ui/cdk';
9
- import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, switchMap, tap, catchError, throwError, of, from, filter, timer, Subject, delay, repeat, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, debounceTime, pairwise, EMPTY } from 'rxjs';
9
+ import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, switchMap, tap, catchError, throwError, of, from, filter, timer, Subject, delay, repeat, takeWhile, fromEvent, debounce, skip, take, forkJoin, EMPTY, concatMap, toArray, debounceTime, pairwise } from 'rxjs';
10
10
  import { __decorate, __metadata } from 'tslib';
11
11
  import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
12
12
  import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
@@ -8487,21 +8487,25 @@ class CuiEditorComponent {
8487
8487
  this.editorService = inject(CuiEditorService);
8488
8488
  this.jTextService = inject(CUI_JTEXT_API_SERVICE);
8489
8489
  this.POOLING_DELAY = 100;
8490
- this.ELEMENT_SPACE_TO_BOTTOM = 150;
8491
- this.SCROLL_THROTTLE_TIME = 200;
8490
+ this.RETRY_DELAY = 3000;
8492
8491
  this.emptyQueue = new Subject();
8493
8492
  this.initChain = Promise.resolve();
8493
+ this.lazyLoadObserver = null;
8494
+ this.lazyLoadSubscription = null;
8494
8495
  this.isSkipCombinedBlockOnChange = [];
8495
8496
  this.isFirst = true;
8496
8497
  this.isChanging = false;
8497
8498
  this.isSkip = false;
8498
8499
  this.isRequested = false;
8499
8500
  this.isDestroyed = false;
8501
+ this.isPreloadFinished = false;
8502
+ this.hasEndLeftZone = false;
8500
8503
  // Нужен для соотношения локального ID и основного ID после создания элемента
8501
8504
  this.blockIdsMap = new Map();
8502
8505
  this.combinedBlocks = new Map();
8503
8506
  this.index = 0;
8504
8507
  this.page = 0;
8508
+ this.lazyLoadVersion = 0;
8505
8509
  this.addedBlocks = [];
8506
8510
  this.updatedBlocks = [];
8507
8511
  this.removedBlocksIds = [];
@@ -8510,6 +8514,7 @@ class CuiEditorComponent {
8510
8514
  this.editorId = this.cuiIdService.generate();
8511
8515
  this.isReadonly = computed(() => this.config()?.readOnly);
8512
8516
  this.requestOptions = computed(() => this.config()?.requestOptions);
8517
+ this.editorEndRef = viewChild.required('editorEnd');
8513
8518
  this.editorRef = viewChild.required('editor');
8514
8519
  this.editorApiId = input.required();
8515
8520
  this.config = input(DEFAULT_CONFIG);
@@ -8521,25 +8526,67 @@ class CuiEditorComponent {
8521
8526
  this.isDestroyed = true;
8522
8527
  this.enqueueInit(() => this.teardownEditor());
8523
8528
  }
8524
- onScrollEvent(element) {
8525
- const overallHeight = element.scrollHeight - this.ELEMENT_SPACE_TO_BOTTOM;
8526
- const currentHeight = element.scrollTop + element.clientHeight;
8527
- if (currentHeight < overallHeight || this.isRequested) {
8528
- return;
8529
- }
8529
+ loadPage() {
8530
8530
  this.isRequested = true;
8531
+ const version = this.lazyLoadVersion;
8531
8532
  const size = this.requestSize();
8532
8533
  let blocksCount = 0;
8533
- this.getBlocks(this.page, size)
8534
- .pipe(tap((blocks) => (blocksCount = blocks.length)), finalize(() => {
8535
- this.isRequested = false;
8536
- if (blocksCount >= size) {
8537
- return;
8538
- }
8539
- this.scrollSubscription.unsubscribe();
8540
- }))
8534
+ let isFailed = false;
8535
+ this.lazyLoadSubscription = this.getBlocks(this.page, size)
8536
+ .pipe(tap((blocks) => (blocksCount = blocks.length)), catchError(() => {
8537
+ isFailed = true;
8538
+ return EMPTY;
8539
+ }), finalize(() => this.finishPageLoad(blocksCount, size, version, isFailed)))
8541
8540
  .subscribe();
8541
+ }
8542
+ finishPageLoad(blocksCount, size, version, isFailed) {
8543
+ this.isRequested = false;
8544
+ if (this.isDestroyed || version !== this.lazyLoadVersion) {
8545
+ return;
8546
+ }
8547
+ if (isFailed) {
8548
+ this.retryPageLoad(version);
8549
+ return;
8550
+ }
8542
8551
  this.page++;
8552
+ this.scheduleNextPage(blocksCount, size, version);
8553
+ }
8554
+ retryPageLoad(version) {
8555
+ this.isRequested = true;
8556
+ timer(this.RETRY_DELAY)
8557
+ .pipe(takeUntilDestroyed(this.destroy))
8558
+ .subscribe(() => {
8559
+ if (this.isDestroyed || version !== this.lazyLoadVersion) {
8560
+ return;
8561
+ }
8562
+ this.loadPage();
8563
+ });
8564
+ }
8565
+ scheduleNextPage(blocksCount, size, version) {
8566
+ if (blocksCount < size) {
8567
+ this.lazyLoadObserver?.disconnect();
8568
+ this.finishPreload();
8569
+ return;
8570
+ }
8571
+ timer(this.POOLING_DELAY)
8572
+ .pipe(takeUntilDestroyed(this.destroy))
8573
+ .subscribe(() => this.continueLazyLoad(version));
8574
+ }
8575
+ continueLazyLoad(version) {
8576
+ if (this.isDestroyed || version !== this.lazyLoadVersion) {
8577
+ return;
8578
+ }
8579
+ if (this.config()?.withoutPreload) {
8580
+ this.finishPreload();
8581
+ }
8582
+ this.observeEditorEnd();
8583
+ }
8584
+ finishPreload() {
8585
+ if (this.isPreloadFinished) {
8586
+ return;
8587
+ }
8588
+ this.isPreloadFinished = true;
8589
+ this.setStartBlock();
8543
8590
  }
8544
8591
  onEditorChange(_, event) {
8545
8592
  if (this.isReadonly() || this.isDestroyed) {
@@ -8577,6 +8624,30 @@ class CuiEditorComponent {
8577
8624
  }
8578
8625
  this.recalculateAllBlocksAfterRemoval(blockIds);
8579
8626
  }
8627
+ onEditorEndMove(entry) {
8628
+ if (this.isRequested) {
8629
+ return;
8630
+ }
8631
+ if (!entry.isIntersecting) {
8632
+ this.hasEndLeftZone = true;
8633
+ this.finishPreload();
8634
+ return;
8635
+ }
8636
+ if (this.config()?.withoutPreload && !this.hasEndLeftZone) {
8637
+ return;
8638
+ }
8639
+ this.loadPage();
8640
+ }
8641
+ initEditorEffect() {
8642
+ effect(() => {
8643
+ if (this.editorApiId() || this.config()) {
8644
+ this.initEditorChanges();
8645
+ }
8646
+ }, { allowSignalWrites: true });
8647
+ }
8648
+ initEditorChanges() {
8649
+ this.enqueueInit(() => this.runEditorInit());
8650
+ }
8580
8651
  recalculateAllBlocksAfterRemoval(blockIds) {
8581
8652
  const remainingRemovedBlockIds = new Set(blockIds);
8582
8653
  this.updatedBlocks = this.updatedBlocks.filter((updatedBlock) => !remainingRemovedBlockIds.has(updatedBlock.id ?? ''));
@@ -8589,25 +8660,19 @@ class CuiEditorComponent {
8589
8660
  });
8590
8661
  this.removedBlocksIds.push(...remainingRemovedBlockIds.values());
8591
8662
  }
8592
- initEditorEffect() {
8593
- effect(() => {
8594
- if (this.editorApiId() || this.config()) {
8595
- this.initEditorChanges();
8596
- }
8597
- }, { allowSignalWrites: true });
8663
+ observeEditorEnd() {
8664
+ const editorEndElement = this.editorEndRef().nativeElement;
8665
+ this.lazyLoadObserver ??= this.createLazyLoadObserver();
8666
+ this.lazyLoadObserver.unobserve(editorEndElement);
8667
+ this.lazyLoadObserver.observe(editorEndElement);
8598
8668
  }
8599
- initEditorChanges() {
8600
- this.enqueueInit(() => this.runEditorInit());
8669
+ createLazyLoadObserver() {
8670
+ return new IntersectionObserver((entries) => this.onEditorEndMove(entries[entries.length - 1]), {
8671
+ root: this.getViewportElement()
8672
+ });
8601
8673
  }
8602
- initScrollObserver() {
8603
- const element = this.config()?.element ?? this.editorElement;
8604
- const scrollObserver = fromEvent(element, 'scroll');
8605
- this.scrollSubscription = scrollObserver
8606
- .pipe(takeUntilDestroyed(this.destroy), throttleTime(this.SCROLL_THROTTLE_TIME, undefined, {
8607
- leading: true,
8608
- trailing: true
8609
- }), map(() => this.onScrollEvent(element)))
8610
- .subscribe();
8674
+ getViewportElement() {
8675
+ return this.config()?.element ?? this.editorElement;
8611
8676
  }
8612
8677
  initEditorEvents(element) {
8613
8678
  const readOnly = this.isReadonly();
@@ -8616,20 +8681,6 @@ class CuiEditorComponent {
8616
8681
  }
8617
8682
  setEditorEvents(element, this.abortController.signal);
8618
8683
  }
8619
- startPooling(size) {
8620
- const scrollElement = this.config()?.element ?? this.editorElement;
8621
- const withoutPreload = this.config()?.withoutPreload;
8622
- this.poolingSubscription = timer(0, this.POOLING_DELAY)
8623
- .pipe(concatMap(() => this.getBlocks(this.page, size).pipe(delay(this.POOLING_DELAY))), tap(() => this.page++), takeWhile((blocks) => !withoutPreload &&
8624
- scrollElement.scrollHeight <= scrollElement.clientHeight &&
8625
- blocks.length >= size), finalize(() => {
8626
- if (this.isDestroyed) {
8627
- return;
8628
- }
8629
- this.setStartBlock();
8630
- }))
8631
- .subscribe();
8632
- }
8633
8684
  teardownEditor() {
8634
8685
  this.abortController.abort();
8635
8686
  this.resetData();
@@ -8659,8 +8710,7 @@ class CuiEditorComponent {
8659
8710
  wireEditor() {
8660
8711
  this.editorElement = this.editorRef().nativeElement;
8661
8712
  this.initEditorEvents(this.editorElement);
8662
- this.initScrollObserver();
8663
- this.startPooling(this.requestSize());
8713
+ this.loadPage();
8664
8714
  this.setListenersOnCustomBlockChanges();
8665
8715
  }
8666
8716
  setListenersOnCustomBlockChanges() {
@@ -8764,6 +8814,9 @@ class CuiEditorComponent {
8764
8814
  if (typeof block.type !== 'string') {
8765
8815
  return;
8766
8816
  }
8817
+ if (this.blockIdsMap.has(block.id)) {
8818
+ return;
8819
+ }
8767
8820
  this.blockIdsMap.set(block.id, block.id);
8768
8821
  this.insert(block);
8769
8822
  }
@@ -8793,6 +8846,9 @@ class CuiEditorComponent {
8793
8846
  setCombinedBlock(block) {
8794
8847
  const combinedBlockData = block.data;
8795
8848
  const parent = this.combinedBlocks.get(combinedBlockData.parentId);
8849
+ if (parent && this.blockIdsMap.has(block.id)) {
8850
+ return parent;
8851
+ }
8796
8852
  this.blockIdsMap.set(block.id, block.id);
8797
8853
  if (parent) {
8798
8854
  const parentData = parent.data;
@@ -8862,23 +8918,31 @@ class CuiEditorComponent {
8862
8918
  return !redactorTextContent;
8863
8919
  }
8864
8920
  resetData() {
8865
- this.scrollSubscription?.unsubscribe();
8866
- this.poolingSubscription?.unsubscribe();
8921
+ this.resetLazyLoad();
8867
8922
  this.isSkipCombinedBlockOnChange = [];
8868
8923
  this.isFirst = true;
8869
8924
  this.isChanging = false;
8870
8925
  this.isSkip = false;
8871
- this.isRequested = false;
8872
8926
  this.blockIdsMap = new Map();
8873
8927
  this.combinedBlocks = new Map();
8874
8928
  this.index = 0;
8875
- this.page = 0;
8876
8929
  this.addedBlocks = [];
8877
8930
  this.updatedBlocks = [];
8878
8931
  this.removedBlocksIds = [];
8879
8932
  this.changesQueue = [];
8880
8933
  this.abortController = new AbortController();
8881
8934
  }
8935
+ resetLazyLoad() {
8936
+ this.lazyLoadVersion++;
8937
+ this.lazyLoadObserver?.disconnect();
8938
+ this.lazyLoadObserver = null;
8939
+ this.lazyLoadSubscription?.unsubscribe();
8940
+ this.lazyLoadSubscription = null;
8941
+ this.isRequested = false;
8942
+ this.isPreloadFinished = false;
8943
+ this.hasEndLeftZone = false;
8944
+ this.page = 0;
8945
+ }
8882
8946
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8883
8947
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: { classPropertyName: "editorApiId", publicName: "editorApiId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, requestSize: { classPropertyName: "requestSize", publicName: "requestSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, providers: [
8884
8948
  CuiEditorService,
@@ -8886,7 +8950,7 @@ class CuiEditorComponent {
8886
8950
  provide: CUI_JTEXT_API_SERVICE,
8887
8951
  useFactory: () => inject(CUI_JTEXT_API_SERVICE, { optional: true, skipSelf: true }) ?? new CuiJTextApiService()
8888
8952
  }
8889
- ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #editor\n [id]=\"editorId\"\n data-editor\n [class._readonly]=\"config().readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8953
+ ], viewQueries: [{ propertyName: "editorEndRef", first: true, predicate: ["editorEnd"], descendants: true, isSignal: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #editor\n data-editor\n [class._readonly]=\"config().readOnly\"\n>\n <div [id]=\"editorId\"></div>\n <div\n #editorEnd\n class=\"editor-end\"\n ></div>\n</div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:var(--cui-warning)}:host ::ng-deep .role-marker{color:var(--cui-info)}.editor-end{margin-top:-150px;height:150px;pointer-events:none}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8890
8954
  }
8891
8955
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, decorators: [{
8892
8956
  type: Component,
@@ -8896,7 +8960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
8896
8960
  provide: CUI_JTEXT_API_SERVICE,
8897
8961
  useFactory: () => inject(CUI_JTEXT_API_SERVICE, { optional: true, skipSelf: true }) ?? new CuiJTextApiService()
8898
8962
  }
8899
- ], template: "<div\n #editor\n [id]=\"editorId\"\n data-editor\n [class._readonly]=\"config().readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
8963
+ ], template: "<div\n #editor\n data-editor\n [class._readonly]=\"config().readOnly\"\n>\n <div [id]=\"editorId\"></div>\n <div\n #editorEnd\n class=\"editor-end\"\n ></div>\n</div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:var(--cui-warning)}:host ::ng-deep .role-marker{color:var(--cui-info)}.editor-end{margin-top:-150px;height:150px;pointer-events:none}.form{height:100%}\n"] }]
8900
8964
  }], ctorParameters: () => [] });
8901
8965
 
8902
8966
  class EditorResizeObserverDirective {