@ni/ok-components 0.2.13 → 0.2.15

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.
@@ -42644,6 +42644,9 @@ so this becomes the fallback color for the slot */ ''}
42644
42644
  keepOnSplit: true,
42645
42645
  isRequired: false
42646
42646
  };
42647
+ const nodeExtensionTypes = nodeExtensions.filter((ext) => ext.name !== "text").map((ext) => ext.name);
42648
+ const markExtensionTypes = markExtensions.map((ext) => ext.name);
42649
+ const allExtensionTypes = [...nodeExtensionTypes, ...markExtensionTypes];
42647
42650
  extensions.forEach((extension) => {
42648
42651
  const context = {
42649
42652
  name: extension.name,
@@ -42661,7 +42664,19 @@ so this becomes the fallback color for the slot */ ''}
42661
42664
  }
42662
42665
  const globalAttributes = addGlobalAttributes();
42663
42666
  globalAttributes.forEach((globalAttribute) => {
42664
- globalAttribute.types.forEach((type) => {
42667
+ let resolvedTypes;
42668
+ if (Array.isArray(globalAttribute.types)) {
42669
+ resolvedTypes = globalAttribute.types;
42670
+ } else if (globalAttribute.types === "*") {
42671
+ resolvedTypes = allExtensionTypes;
42672
+ } else if (globalAttribute.types === "nodes") {
42673
+ resolvedTypes = nodeExtensionTypes;
42674
+ } else if (globalAttribute.types === "marks") {
42675
+ resolvedTypes = markExtensionTypes;
42676
+ } else {
42677
+ resolvedTypes = [];
42678
+ }
42679
+ resolvedTypes.forEach((type) => {
42665
42680
  Object.entries(globalAttribute.attributes).forEach(([name, attribute]) => {
42666
42681
  extensionAttributes.push({
42667
42682
  type,
@@ -43201,6 +43216,9 @@ so this becomes the fallback color for the slot */ ''}
43201
43216
  const from = $from.pos;
43202
43217
  const to = $to.pos;
43203
43218
  state.doc.nodesBetween(from, to, (node, pos) => {
43219
+ if (type && node.inlineContent && !node.type.allowsMarkType(type)) {
43220
+ return false;
43221
+ }
43204
43222
  if (!node.isText && !node.marks.length) {
43205
43223
  return;
43206
43224
  }
@@ -44761,6 +44779,39 @@ so this becomes the fallback color for the slot */ ''}
44761
44779
  };
44762
44780
  }, baseDispatch);
44763
44781
  }
44782
+ /**
44783
+ * Get the composed transformPastedHTML function from all extensions.
44784
+ * @param baseTransform The base transform function (e.g. from the editor props)
44785
+ * @returns A composed transform function that chains all extension transforms
44786
+ */
44787
+ transformPastedHTML(baseTransform) {
44788
+ const { editor } = this;
44789
+ const extensions = sortExtensions([...this.extensions]);
44790
+ return extensions.reduce(
44791
+ (transform, extension) => {
44792
+ const context = {
44793
+ name: extension.name,
44794
+ options: extension.options,
44795
+ storage: this.editor.extensionStorage[extension.name],
44796
+ editor,
44797
+ type: getSchemaTypeByName(extension.name, this.schema)
44798
+ };
44799
+ const extensionTransform = getExtensionField(
44800
+ extension,
44801
+ "transformPastedHTML",
44802
+ context
44803
+ );
44804
+ if (!extensionTransform) {
44805
+ return transform;
44806
+ }
44807
+ return (html, view) => {
44808
+ const transformedHtml = transform(html, view);
44809
+ return extensionTransform.call(context, transformedHtml);
44810
+ };
44811
+ },
44812
+ baseTransform || ((html) => html)
44813
+ );
44814
+ }
44764
44815
  get markViews() {
44765
44816
  const { editor } = this;
44766
44817
  const { markExtensions } = splitExtensions(this.extensions);
@@ -45756,7 +45807,7 @@ img.ProseMirror-separator {
45756
45807
  return this.options.editable && this.view && this.view.editable;
45757
45808
  }
45758
45809
  /**
45759
- * Returns the editor state.
45810
+ * Returns the editor view.
45760
45811
  */
45761
45812
  get view() {
45762
45813
  if (this.editorView) {
@@ -45924,6 +45975,8 @@ img.ProseMirror-separator {
45924
45975
  const { editorProps, enableExtensionDispatchTransaction } = this.options;
45925
45976
  const baseDispatch = editorProps.dispatchTransaction || this.dispatchTransaction.bind(this);
45926
45977
  const dispatch = enableExtensionDispatchTransaction ? this.extensionManager.dispatchTransaction(baseDispatch) : baseDispatch;
45978
+ const baseTransformPastedHTML = editorProps.transformPastedHTML;
45979
+ const transformPastedHTML = this.extensionManager.transformPastedHTML(baseTransformPastedHTML);
45927
45980
  this.editorView = new EditorView(element, {
45928
45981
  ...editorProps,
45929
45982
  attributes: {
@@ -45932,6 +45985,7 @@ img.ProseMirror-separator {
45932
45985
  ...editorProps == null ? void 0 : editorProps.attributes
45933
45986
  },
45934
45987
  dispatchTransaction: dispatch,
45988
+ transformPastedHTML,
45935
45989
  state: this.editorState,
45936
45990
  markViews: this.extensionManager.markViews,
45937
45991
  nodeViews: this.extensionManager.nodeViews
@@ -52695,7 +52749,14 @@ ${renderedContent}
52695
52749
  if (url.length <= proto.length) return false
52696
52750
 
52697
52751
  // disallow '*' at the end of the link (conflicts with emphasis)
52698
- url = url.replace(/\*+$/, '');
52752
+ // do manual backsearch to avoid perf issues with regex /\*+$/ on "****...****a".
52753
+ let urlEnd = url.length;
52754
+ while (urlEnd > 0 && url.charCodeAt(urlEnd - 1) === 0x2A/* * */) {
52755
+ urlEnd--;
52756
+ }
52757
+ if (urlEnd !== url.length) {
52758
+ url = url.slice(0, urlEnd);
52759
+ }
52699
52760
 
52700
52761
  const fullUrl = state.md.normalizeLink(url);
52701
52762
  if (!state.md.validateLink(fullUrl)) return false
@@ -71899,6 +71960,7 @@ focus outline in that case.
71899
71960
  const [offset, align] = offsetInfo;
71900
71961
  this._scrollToOffset(offset, { adjustments: void 0, behavior });
71901
71962
  this.targetWindow.requestAnimationFrame(() => {
71963
+ if (!this.targetWindow) return;
71902
71964
  const verify = () => {
71903
71965
  if (this.currentScrollToIndex !== index) return;
71904
71966
  const currentOffset = this.getScrollOffset();
@@ -73304,25 +73366,32 @@ focus outline in that case.
73304
73366
  this.columnIndex = -1;
73305
73367
  this.focusWithinTable = false;
73306
73368
  this.isCurrentlyFocusingElement = false;
73369
+ this.focusedViaPointer = false;
73307
73370
  this.visibleRowNotifiers = [];
73308
73371
  this.onTableFocusIn = (event) => {
73309
73372
  this.focusWithinTable = true;
73310
- this.updateFocusStateFromActiveElement(false);
73373
+ this.updateFocusStateFromActiveElement();
73311
73374
  // Sets initial focus on the appropriate table content
73312
73375
  const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
73313
- if ((event.target === this.table
73314
- || this.focusType === TableFocusType.none)
73315
- && !actionMenuOpen) {
73316
- let focusHeader = true;
73317
- if (this.hasRowOrCellFocusType()
73318
- && this.scrollToAndFocusRow(this.rowIndex)) {
73319
- focusHeader = false;
73376
+ if (!actionMenuOpen) {
73377
+ if (this.focusType === TableFocusType.none) {
73378
+ this.focusSomethingOtherThanTheTable();
73320
73379
  }
73321
- if (focusHeader && !this.setFocusOnHeader()) {
73322
- // nothing to focus
73323
- this.table.blur();
73380
+ else if (event.target === this.table) {
73381
+ // restore focus to last focused element
73382
+ if (this.hasRowOrCellFocusType() && this.rowIndexIsValid(this.rowIndex)) {
73383
+ this.scrollToAndFocusRow(this.rowIndex);
73384
+ }
73385
+ else if (this.hasHeaderFocusType()) {
73386
+ this.focusHeaderElement();
73387
+ }
73388
+ else {
73389
+ // should only get here if focusType was row/cell, but rowIndex was invalid
73390
+ this.focusSomethingOtherThanTheTable();
73391
+ }
73324
73392
  }
73325
73393
  }
73394
+ this.focusedViaPointer = false;
73326
73395
  };
73327
73396
  this.onTableFocusOut = () => {
73328
73397
  this.focusWithinTable = false;
@@ -73337,12 +73406,18 @@ focus outline in that case.
73337
73406
  };
73338
73407
  this.onCellViewFocusIn = (event) => {
73339
73408
  event.stopPropagation();
73340
- this.updateFocusStateFromActiveElement(false);
73409
+ this.updateFocusStateFromActiveElement();
73341
73410
  };
73342
73411
  this.onCellFocusIn = (event) => {
73343
73412
  event.stopPropagation();
73344
73413
  const cell = event.detail;
73345
- this.updateFocusStateFromActiveElement(true);
73414
+ const row = this.updateFocusStateFromActiveElement();
73415
+ if (row) {
73416
+ if (this.hasRowOrCellFocusType()
73417
+ && this.rowIndex !== row.resolvedRowIndex) {
73418
+ this.setRowFocusState(row.resolvedRowIndex);
73419
+ }
73420
+ }
73346
73421
  // Currently, clicking a non-interactive cell only updates the focus state to that row, it
73347
73422
  // doesn't focus the cell. If we revisit this, we most likely need to set the cells to tabindex=-1
73348
73423
  // upfront too, so their focusing behavior is consistent whether they've been previously keyboard
@@ -73413,6 +73488,12 @@ focus outline in that case.
73413
73488
  }
73414
73489
  }
73415
73490
  };
73491
+ this.onPointerDown = () => {
73492
+ this.focusedViaPointer = true;
73493
+ };
73494
+ this.onPointerUpOrCancel = () => {
73495
+ this.focusedViaPointer = false;
73496
+ };
73416
73497
  this.onViewportKeyDown = (event) => {
73417
73498
  let handleEvent = !this.inNavigationMode
73418
73499
  && (event.key === keyArrowUp || event.key === keyArrowDown);
@@ -73448,6 +73529,9 @@ focus outline in that case.
73448
73529
  connect() {
73449
73530
  this.table.addEventListener('keydown', this.onCaptureKeyDown, { capture: true });
73450
73531
  this.table.addEventListener('keydown', this.onKeyDown);
73532
+ this.table.addEventListener('pointerdown', this.onPointerDown);
73533
+ this.table.addEventListener('pointerup', this.onPointerUpOrCancel);
73534
+ this.table.addEventListener('pointercancel', this.onPointerUpOrCancel);
73451
73535
  this.table.addEventListener('focusin', this.onTableFocusIn);
73452
73536
  this.table.addEventListener('focusout', this.onTableFocusOut);
73453
73537
  this.table.viewport.addEventListener('keydown', this.onViewportKeyDown);
@@ -73459,6 +73543,9 @@ focus outline in that case.
73459
73543
  disconnect() {
73460
73544
  this.table.removeEventListener('keydown', this.onCaptureKeyDown, { capture: true });
73461
73545
  this.table.removeEventListener('keydown', this.onKeyDown);
73546
+ this.table.removeEventListener('pointerdown', this.onPointerDown);
73547
+ this.table.removeEventListener('pointerup', this.onPointerUpOrCancel);
73548
+ this.table.removeEventListener('pointercancel', this.onPointerUpOrCancel);
73462
73549
  this.table.removeEventListener('focusin', this.onTableFocusIn);
73463
73550
  this.table.removeEventListener('focusout', this.onTableFocusOut);
73464
73551
  this.table.viewport.removeEventListener('keydown', this.onViewportKeyDown);
@@ -73550,6 +73637,13 @@ focus outline in that case.
73550
73637
  this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
73551
73638
  }
73552
73639
  }
73640
+ focusSomethingOtherThanTheTable() {
73641
+ this.setDefaultFocus();
73642
+ if (this.focusType === TableFocusType.none) {
73643
+ // nothing within the table to focus
73644
+ this.table.blur();
73645
+ }
73646
+ }
73553
73647
  onEnterPressed(ctrlKey) {
73554
73648
  let row;
73555
73649
  let rowElements;
@@ -73721,7 +73815,7 @@ focus outline in that case.
73721
73815
  this.headerActionIndex = nextFocusState.headerActionIndex ?? this.headerActionIndex;
73722
73816
  this.cellContentIndex = nextFocusState.cellContentIndex ?? this.cellContentIndex;
73723
73817
  if (this.hasRowOrCellFocusType()) {
73724
- this.focusCurrentRow(false);
73818
+ this.focusCurrentRow(!this.focusedViaPointer);
73725
73819
  }
73726
73820
  else {
73727
73821
  this.focusHeaderElement();
@@ -73893,35 +73987,39 @@ focus outline in that case.
73893
73987
  }
73894
73988
  return false;
73895
73989
  }
73896
- updateFocusStateFromActiveElement(setRowFocus) {
73990
+ updateFocusStateFromActiveElement() {
73897
73991
  // If the user is interacting with the table with non-keyboard methods (like mouse), we need to
73898
73992
  // update our focus state based on the current active/focused element
73899
- const activeElement = this.getActiveElement();
73900
- if (activeElement) {
73901
- const row = this.getContainingRow(activeElement);
73902
- if (row) {
73903
- if (!(row instanceof TableGroupRow)) {
73904
- const cell = this.getContainingCell(activeElement);
73905
- if (cell) {
73906
- const columnIndex = this.table.visibleColumns.indexOf(cell.column);
73907
- if (cell.actionMenuButton === activeElement) {
73908
- this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
73909
- return;
73910
- }
73911
- const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
73912
- if (contentIndex > -1) {
73913
- this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
73914
- return;
73915
- }
73916
- }
73917
- }
73918
- if (setRowFocus
73919
- && this.hasRowOrCellFocusType()
73920
- && this.rowIndex !== row.resolvedRowIndex) {
73921
- this.setRowFocusState(row.resolvedRowIndex);
73922
- }
73993
+ const { activeElement, row, cell } = this.getActiveElementCellAndRow();
73994
+ if (!cell) {
73995
+ return row;
73996
+ }
73997
+ const columnIndex = this.table.visibleColumns.indexOf(cell.column);
73998
+ if (cell.actionMenuButton === activeElement) {
73999
+ this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
74000
+ }
74001
+ else {
74002
+ const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
74003
+ if (contentIndex > -1) {
74004
+ this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
73923
74005
  }
73924
74006
  }
74007
+ return row;
74008
+ }
74009
+ getActiveElementCellAndRow() {
74010
+ const activeElement = this.getActiveElement();
74011
+ if (!activeElement) {
74012
+ return {};
74013
+ }
74014
+ const row = this.getContainingRow(activeElement);
74015
+ if (!row) {
74016
+ return { activeElement };
74017
+ }
74018
+ if (row instanceof TableGroupRow) {
74019
+ return { activeElement, row };
74020
+ }
74021
+ const cell = this.getContainingCell(activeElement);
74022
+ return { activeElement, row, cell };
73925
74023
  }
73926
74024
  focusElement(element, focusOptions) {
73927
74025
  const previousActiveElement = this.getActiveElement();
@@ -73952,13 +74050,6 @@ focus outline in that case.
73952
74050
  menuButton.classList.remove('cell-action-menu-focused');
73953
74051
  }
73954
74052
  }
73955
- setFocusOnHeader() {
73956
- if (this.hasHeaderFocusType()) {
73957
- return this.focusHeaderElement();
73958
- }
73959
- this.setDefaultFocus();
73960
- return this.focusType !== TableFocusType.none;
73961
- }
73962
74053
  setDefaultFocus() {
73963
74054
  const headerElements = this.getTableHeaderFocusableElements();
73964
74055
  if (!this.trySetHeaderActionFocus(headerElements, 0)
@@ -73968,20 +74059,19 @@ focus outline in that case.
73968
74059
  }
73969
74060
  }
73970
74061
  scrollToAndFocusRow(totalRowIndex, scrollOptions) {
73971
- if (totalRowIndex >= 0 && totalRowIndex < this.table.tableData.length) {
73972
- switch (this.focusType) {
73973
- case TableFocusType.none:
73974
- case TableFocusType.headerActions:
73975
- case TableFocusType.columnHeader:
73976
- this.setRowFocusState(totalRowIndex);
73977
- break;
73978
- }
73979
- this.rowIndex = totalRowIndex;
73980
- this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
73981
- this.focusCurrentRow(true);
73982
- return true;
74062
+ if (!this.rowIndexIsValid(totalRowIndex)) {
74063
+ return false;
73983
74064
  }
73984
- return false;
74065
+ if (!this.hasRowOrCellFocusType()) {
74066
+ this.setRowFocusState();
74067
+ }
74068
+ this.rowIndex = totalRowIndex;
74069
+ this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
74070
+ this.focusCurrentRow(!this.focusedViaPointer);
74071
+ return true;
74072
+ }
74073
+ rowIndexIsValid(rowIndex) {
74074
+ return rowIndex >= 0 && rowIndex < this.table.tableData.length;
73985
74075
  }
73986
74076
  focusCurrentRow(allowScroll) {
73987
74077
  const visibleRowIndex = this.getCurrentRowVisibleIndex();
@@ -74049,7 +74139,7 @@ focus outline in that case.
74049
74139
  break;
74050
74140
  }
74051
74141
  if (focusableElement) {
74052
- this.focusElement(focusableElement);
74142
+ this.focusElement(focusableElement, { preventScroll: this.focusedViaPointer });
74053
74143
  return true;
74054
74144
  }
74055
74145
  return false;
@@ -74170,7 +74260,7 @@ focus outline in that case.
74170
74260
  trySetRowSelectionCheckboxFocus(rowElements) {
74171
74261
  if (rowElements?.selectionCheckbox) {
74172
74262
  this.focusType = TableFocusType.rowSelectionCheckbox;
74173
- this.focusCurrentRow(true);
74263
+ this.focusCurrentRow(!this.focusedViaPointer);
74174
74264
  return true;
74175
74265
  }
74176
74266
  return false;
@@ -74259,7 +74349,7 @@ focus outline in that case.
74259
74349
  this.rowIndex = rowIndex;
74260
74350
  this.columnIndex = columnIndex;
74261
74351
  if (focusElement) {
74262
- this.focusCurrentRow(true);
74352
+ this.focusCurrentRow(!this.focusedViaPointer);
74263
74353
  }
74264
74354
  }
74265
74355
  isResolvedRowType(row) {