@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.
- package/dist/all-components-bundle.js +155 -65
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +6113 -6108
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +121 -0
- package/dist/custom-elements.md +25 -0
- package/package.json +12 -5
|
@@ -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
|
-
|
|
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
|
|
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
|
-
|
|
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(
|
|
73373
|
+
this.updateFocusStateFromActiveElement();
|
|
73311
73374
|
// Sets initial focus on the appropriate table content
|
|
73312
73375
|
const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
|
|
73313
|
-
if (
|
|
73314
|
-
|
|
73315
|
-
|
|
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 (
|
|
73322
|
-
//
|
|
73323
|
-
this.
|
|
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(
|
|
73409
|
+
this.updateFocusStateFromActiveElement();
|
|
73341
73410
|
};
|
|
73342
73411
|
this.onCellFocusIn = (event) => {
|
|
73343
73412
|
event.stopPropagation();
|
|
73344
73413
|
const cell = event.detail;
|
|
73345
|
-
this.updateFocusStateFromActiveElement(
|
|
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(
|
|
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(
|
|
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.
|
|
73900
|
-
if (
|
|
73901
|
-
|
|
73902
|
-
|
|
73903
|
-
|
|
73904
|
-
|
|
73905
|
-
|
|
73906
|
-
|
|
73907
|
-
|
|
73908
|
-
|
|
73909
|
-
|
|
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 (
|
|
73972
|
-
|
|
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
|
-
|
|
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(
|
|
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(
|
|
74352
|
+
this.focusCurrentRow(!this.focusedViaPointer);
|
|
74263
74353
|
}
|
|
74264
74354
|
}
|
|
74265
74355
|
isResolvedRowType(row) {
|