@ni/nimble-components 20.1.10 → 20.1.12
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 +16199 -527
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4777 -2673
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/all-components.d.ts +1 -0
- package/dist/esm/all-components.js +1 -0
- package/dist/esm/all-components.js.map +1 -1
- package/dist/esm/rich-text-editor/index.d.ts +84 -0
- package/dist/esm/rich-text-editor/index.js +170 -0
- package/dist/esm/rich-text-editor/index.js.map +1 -1
- package/dist/esm/rich-text-editor/styles.js +142 -2
- package/dist/esm/rich-text-editor/styles.js.map +1 -1
- package/dist/esm/rich-text-editor/template.js +77 -2
- package/dist/esm/rich-text-editor/template.js.map +1 -1
- package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.d.ts +47 -0
- package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.js +143 -0
- package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.js.map +1 -0
- package/dist/esm/rich-text-editor/testing/types.d.ts +7 -0
- package/dist/esm/rich-text-editor/testing/types.js +7 -0
- package/dist/esm/rich-text-editor/testing/types.js.map +1 -0
- package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.d.ts +4 -0
- package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.js +19 -0
- package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.js.map +1 -1
- package/dist/esm/src/all-components.d.ts +1 -0
- package/dist/esm/src/rich-text-editor/index.d.ts +84 -0
- package/dist/esm/src/rich-text-editor/testing/rich-text-editor.pageobject.d.ts +47 -0
- package/dist/esm/src/rich-text-editor/testing/types.d.ts +7 -0
- package/dist/esm/src/rich-text-viewer/testing/rich-text-viewer.pageobject.d.ts +4 -0
- package/package.json +11 -1
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { keySpace, keyEnter, keyTab } from '@microsoft/fast-web-utilities';
|
|
2
|
+
import { waitForUpdatesAsync } from '../../testing/async-helpers';
|
|
3
|
+
/**
|
|
4
|
+
* Page object for the `nimble-rich-text-editor` component.
|
|
5
|
+
*/
|
|
6
|
+
export class RichTextEditorPageObject {
|
|
7
|
+
constructor(richTextEditorElement) {
|
|
8
|
+
this.richTextEditorElement = richTextEditorElement;
|
|
9
|
+
}
|
|
10
|
+
editorSectionHasChildNodes() {
|
|
11
|
+
const editorSection = this.getEditorSection();
|
|
12
|
+
return editorSection.hasChildNodes();
|
|
13
|
+
}
|
|
14
|
+
getEditorSectionFirstElementChildClassName() {
|
|
15
|
+
const editorSection = this.getEditorSection();
|
|
16
|
+
return editorSection.firstElementChild.className;
|
|
17
|
+
}
|
|
18
|
+
async clickEditorShortcutKeys(shortcutKey, isShiftKey) {
|
|
19
|
+
const editor = this.getTiptapEditor();
|
|
20
|
+
const event = new KeyboardEvent('keydown', {
|
|
21
|
+
key: shortcutKey,
|
|
22
|
+
ctrlKey: true,
|
|
23
|
+
shiftKey: isShiftKey,
|
|
24
|
+
bubbles: true,
|
|
25
|
+
cancelable: true
|
|
26
|
+
});
|
|
27
|
+
editor.dispatchEvent(event);
|
|
28
|
+
await waitForUpdatesAsync();
|
|
29
|
+
}
|
|
30
|
+
async pressEnterKeyInEditor() {
|
|
31
|
+
const editor = this.getTiptapEditor();
|
|
32
|
+
const event = new KeyboardEvent('keydown', {
|
|
33
|
+
key: keyEnter,
|
|
34
|
+
bubbles: true,
|
|
35
|
+
cancelable: true
|
|
36
|
+
});
|
|
37
|
+
editor.dispatchEvent(event);
|
|
38
|
+
await waitForUpdatesAsync();
|
|
39
|
+
}
|
|
40
|
+
async pressTabKeyInEditor() {
|
|
41
|
+
const editor = this.getTiptapEditor();
|
|
42
|
+
const event = new KeyboardEvent('keydown', {
|
|
43
|
+
key: keyTab,
|
|
44
|
+
bubbles: true,
|
|
45
|
+
cancelable: true
|
|
46
|
+
});
|
|
47
|
+
editor.dispatchEvent(event);
|
|
48
|
+
await waitForUpdatesAsync();
|
|
49
|
+
}
|
|
50
|
+
async pressShiftTabKeysInEditor() {
|
|
51
|
+
const editor = this.getTiptapEditor();
|
|
52
|
+
const shiftTabEvent = new KeyboardEvent('keydown', {
|
|
53
|
+
key: keyTab,
|
|
54
|
+
shiftKey: true,
|
|
55
|
+
bubbles: true,
|
|
56
|
+
cancelable: true
|
|
57
|
+
});
|
|
58
|
+
editor.dispatchEvent(shiftTabEvent);
|
|
59
|
+
await waitForUpdatesAsync();
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* To click a formatting button in the footer section, pass its position value as an index (starting from '0')
|
|
63
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
64
|
+
*/
|
|
65
|
+
async clickFooterButton(buttonIndex) {
|
|
66
|
+
const button = this.getFormattingButton(buttonIndex);
|
|
67
|
+
button.click();
|
|
68
|
+
await waitForUpdatesAsync();
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* To retrieve the checked state of the button, provide its position value as an index (starting from '0')
|
|
72
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
73
|
+
*/
|
|
74
|
+
getButtonCheckedState(buttonIndex) {
|
|
75
|
+
const button = this.getFormattingButton(buttonIndex);
|
|
76
|
+
return button.checked;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* To retrieve the tab index of the button, provide its position value as an index (starting from '0')
|
|
80
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
81
|
+
*/
|
|
82
|
+
getButtonTabIndex(buttonIndex) {
|
|
83
|
+
const button = this.getFormattingButton(buttonIndex);
|
|
84
|
+
return button.tabIndex;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* To trigger a space key press for the button, provide its position value as an index (starting from '0')
|
|
88
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
89
|
+
*/
|
|
90
|
+
spaceKeyActivatesButton(buttonIndex) {
|
|
91
|
+
const button = this.getFormattingButton(buttonIndex);
|
|
92
|
+
const event = new KeyboardEvent('keypress', {
|
|
93
|
+
key: keySpace
|
|
94
|
+
});
|
|
95
|
+
button.control.dispatchEvent(event);
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* To trigger a enter key press for the button, provide its position value as an index (starting from '0')
|
|
99
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
100
|
+
*/
|
|
101
|
+
enterKeyActivatesButton(buttonIndex) {
|
|
102
|
+
const button = this.getFormattingButton(buttonIndex);
|
|
103
|
+
const event = new KeyboardEvent('keypress', {
|
|
104
|
+
key: keyEnter
|
|
105
|
+
});
|
|
106
|
+
button.control.dispatchEvent(event);
|
|
107
|
+
}
|
|
108
|
+
async setEditorTextContent(value) {
|
|
109
|
+
let lastElement = this.getTiptapEditor()?.lastElementChild;
|
|
110
|
+
while (lastElement?.lastElementChild) {
|
|
111
|
+
lastElement = lastElement?.lastElementChild;
|
|
112
|
+
}
|
|
113
|
+
lastElement.parentElement.textContent = value;
|
|
114
|
+
await waitForUpdatesAsync();
|
|
115
|
+
}
|
|
116
|
+
getEditorFirstChildTagName() {
|
|
117
|
+
return this.getTiptapEditor()?.firstElementChild?.tagName ?? '';
|
|
118
|
+
}
|
|
119
|
+
getEditorFirstChildTextContent() {
|
|
120
|
+
return this.getTiptapEditor()?.firstElementChild?.textContent ?? '';
|
|
121
|
+
}
|
|
122
|
+
getEditorTagNames() {
|
|
123
|
+
return Array.from(this.getTiptapEditor().querySelectorAll('*')).map(el => el.tagName);
|
|
124
|
+
}
|
|
125
|
+
getEditorLeafContents() {
|
|
126
|
+
return Array.from(this.getTiptapEditor().querySelectorAll('*'))
|
|
127
|
+
.filter((el, _) => {
|
|
128
|
+
return el.children.length === 0;
|
|
129
|
+
})
|
|
130
|
+
.map(el => el.textContent || '');
|
|
131
|
+
}
|
|
132
|
+
getEditorSection() {
|
|
133
|
+
return this.richTextEditorElement.shadowRoot?.querySelector('.editor');
|
|
134
|
+
}
|
|
135
|
+
getTiptapEditor() {
|
|
136
|
+
return this.richTextEditorElement.shadowRoot?.querySelector('.ProseMirror');
|
|
137
|
+
}
|
|
138
|
+
getFormattingButton(index) {
|
|
139
|
+
const buttons = this.richTextEditorElement.shadowRoot.querySelectorAll('nimble-toggle-button');
|
|
140
|
+
return buttons[index];
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
//# sourceMappingURL=rich-text-editor.pageobject.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rich-text-editor.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-editor/testing/rich-text-editor.pageobject.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/rich-text-editor/testing/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,IAAI,EAAE,CAAC;IACP,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,CAAC;IACb,YAAY,EAAE,CAAC;CACT,CAAC"}
|
|
@@ -12,6 +12,10 @@ export declare class RichTextViewerPageObject {
|
|
|
12
12
|
* @returns An array of tag names in document order
|
|
13
13
|
*/
|
|
14
14
|
getRenderedMarkdownTagNames(): string[];
|
|
15
|
+
/**
|
|
16
|
+
* @returns An array of tag names with the closing tags (eg: '/P') in a document order
|
|
17
|
+
*/
|
|
18
|
+
getRenderedMarkdownTagNamesWithClosingTags(): string[];
|
|
15
19
|
/**
|
|
16
20
|
* Retrieves text contents for the rendered markdown content in document order
|
|
17
21
|
* @returns An array of text contents of last elements in a tree
|
|
@@ -18,6 +18,25 @@ export class RichTextViewerPageObject {
|
|
|
18
18
|
getRenderedMarkdownTagNames() {
|
|
19
19
|
return Array.from(this.getMarkdownRenderedElement().querySelectorAll('*')).map(el => el.tagName);
|
|
20
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* @returns An array of tag names with the closing tags (eg: '/P') in a document order
|
|
23
|
+
*/
|
|
24
|
+
getRenderedMarkdownTagNamesWithClosingTags() {
|
|
25
|
+
const tagNames = [];
|
|
26
|
+
const renderedElement = this.getMarkdownRenderedElement();
|
|
27
|
+
const processNode = (node) => {
|
|
28
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
29
|
+
const el = node;
|
|
30
|
+
tagNames.push(el.tagName);
|
|
31
|
+
el.childNodes.forEach(processNode);
|
|
32
|
+
tagNames.push(`/${el.tagName}`);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
if (renderedElement) {
|
|
36
|
+
processNode(renderedElement);
|
|
37
|
+
}
|
|
38
|
+
return tagNames.slice(1, -1);
|
|
39
|
+
}
|
|
21
40
|
/**
|
|
22
41
|
* Retrieves text contents for the rendered markdown content in document order
|
|
23
42
|
* @returns An array of text contents of last elements in a tree
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text-viewer.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-viewer/testing/rich-text-viewer.pageobject.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,wBAAwB;IACjC,YACqB,qBAAqC;QAArC,0BAAqB,GAArB,qBAAqB,CAAgB;IACvD,CAAC;IAEG,oCAAoC;QACvC,OAAO,IAAI,CAAC,mCAAmC,EAAE,EAAE,WAAW,IAAI,EAAE,CAAC;IACzE,CAAC;IAEM,qCAAqC,CAAC,SAAiB;QAC1D,OAAO,CACH,IAAI,CAAC,mCAAmC,EAAE,EAAE,YAAY,CACpD,SAAS,CACZ,IAAI,EAAE,CACV,CAAC;IACN,CAAC;IAED;;;OAGG;IACI,2BAA2B;QAC9B,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACI,+BAA+B;QAClC,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D;aACI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACd,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;aACD,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,0BAA0B;QAC9B,OAAO,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAC3E,CAAC;IAEO,mCAAmC;QACvC,IAAI,WAAW,GAAG,IAAI,CAAC,0BAA0B,EAAE,EAAE,gBAAgB,CAAC;QAEtE,OAAO,WAAW,EAAE,gBAAgB,EAAE;YAClC,WAAW,GAAG,WAAW,EAAE,gBAAgB,CAAC;SAC/C;QACD,OAAO,WAAW,CAAC;IACvB,CAAC;CACJ"}
|
|
1
|
+
{"version":3,"file":"rich-text-viewer.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-viewer/testing/rich-text-viewer.pageobject.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,wBAAwB;IACjC,YACqB,qBAAqC;QAArC,0BAAqB,GAArB,qBAAqB,CAAgB;IACvD,CAAC;IAEG,oCAAoC;QACvC,OAAO,IAAI,CAAC,mCAAmC,EAAE,EAAE,WAAW,IAAI,EAAE,CAAC;IACzE,CAAC;IAEM,qCAAqC,CAAC,SAAiB;QAC1D,OAAO,CACH,IAAI,CAAC,mCAAmC,EAAE,EAAE,YAAY,CACpD,SAAS,CACZ,IAAI,EAAE,CACV,CAAC;IACN,CAAC;IAED;;;OAGG;IACI,2BAA2B;QAC9B,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,0CAA0C;QAC7C,MAAM,QAAQ,GAAa,EAAE,CAAC;QAC9B,MAAM,eAAe,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAE1D,MAAM,WAAW,GAAG,CAAC,IAAU,EAAQ,EAAE;YACrC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACrC,MAAM,EAAE,GAAG,IAAe,CAAC;gBAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;gBAE1B,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;gBAEnC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;aACnC;QACL,CAAC,CAAC;QAEF,IAAI,eAAe,EAAE;YACjB,WAAW,CAAC,eAAe,CAAC,CAAC;SAChC;QAED,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,+BAA+B;QAClC,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D;aACI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACd,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;aACD,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,0BAA0B;QAC9B,OAAO,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAC3E,CAAC;IAEO,mCAAmC;QACvC,IAAI,WAAW,GAAG,IAAI,CAAC,0BAA0B,EAAE,EAAE,gBAAgB,CAAC;QAEtE,OAAO,WAAW,EAAE,gBAAgB,EAAE;YAClC,WAAW,GAAG,WAAW,EAAE,gBAAgB,CAAC;SAC/C;QACD,OAAO,WAAW,CAAC;IACvB,CAAC;CACJ"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import type { ToggleButton } from '../toggle-button';
|
|
2
3
|
declare global {
|
|
3
4
|
interface HTMLElementTagNameMap {
|
|
4
5
|
'nimble-rich-text-editor': RichTextEditor;
|
|
@@ -8,5 +9,88 @@ declare global {
|
|
|
8
9
|
* A nimble styled rich text editor
|
|
9
10
|
*/
|
|
10
11
|
export declare class RichTextEditor extends FoundationElement {
|
|
12
|
+
/**
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
boldButton: ToggleButton;
|
|
16
|
+
/**
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
italicsButton: ToggleButton;
|
|
20
|
+
/**
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
23
|
+
bulletListButton: ToggleButton;
|
|
24
|
+
/**
|
|
25
|
+
* @internal
|
|
26
|
+
*/
|
|
27
|
+
numberedListButton: ToggleButton;
|
|
28
|
+
/**
|
|
29
|
+
* @internal
|
|
30
|
+
*/
|
|
31
|
+
editor: HTMLDivElement;
|
|
32
|
+
private tiptapEditor;
|
|
33
|
+
/**
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
36
|
+
connectedCallback(): void;
|
|
37
|
+
/**
|
|
38
|
+
* @internal
|
|
39
|
+
*/
|
|
40
|
+
disconnectedCallback(): void;
|
|
41
|
+
/**
|
|
42
|
+
* Toggle the bold mark and focus back to the editor
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
boldButtonClick(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Toggle the bold mark and focus back to the editor
|
|
48
|
+
* @internal
|
|
49
|
+
*/
|
|
50
|
+
boldButtonKeyDown(event: KeyboardEvent): boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Toggle the italics mark and focus back to the editor
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
italicsButtonClick(): void;
|
|
56
|
+
/**
|
|
57
|
+
* Toggle the italics mark and focus back to the editor
|
|
58
|
+
* @internal
|
|
59
|
+
*/
|
|
60
|
+
italicsButtonKeyDown(event: KeyboardEvent): boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Toggle the unordered list node and focus back to the editor
|
|
63
|
+
* @internal
|
|
64
|
+
*/
|
|
65
|
+
bulletListButtonClick(): void;
|
|
66
|
+
/**
|
|
67
|
+
* Toggle the unordered list node and focus back to the editor
|
|
68
|
+
* @internal
|
|
69
|
+
*/
|
|
70
|
+
bulletListButtonKeyDown(event: KeyboardEvent): boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Toggle the ordered list node and focus back to the editor
|
|
73
|
+
* @internal
|
|
74
|
+
*/
|
|
75
|
+
numberedListButtonClick(): void;
|
|
76
|
+
/**
|
|
77
|
+
* Toggle the ordered list node and focus back to the editor
|
|
78
|
+
* @internal
|
|
79
|
+
*/
|
|
80
|
+
numberedListButtonKeyDown(event: KeyboardEvent): boolean;
|
|
81
|
+
/**
|
|
82
|
+
* @internal
|
|
83
|
+
*/
|
|
84
|
+
stopEventPropagation(event: Event): boolean;
|
|
85
|
+
private initializeEditor;
|
|
86
|
+
/**
|
|
87
|
+
* Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to
|
|
88
|
+
* various actions such as mouse events, keyboard events, changes in the editor content etc,.
|
|
89
|
+
* https://tiptap.dev/api/events#transaction
|
|
90
|
+
*/
|
|
91
|
+
private bindEditorTransactionEvent;
|
|
92
|
+
private unbindEditorTransactionEvent;
|
|
93
|
+
private updateEditorButtonsState;
|
|
94
|
+
private keyActivatesButton;
|
|
11
95
|
}
|
|
12
96
|
export declare const richTextEditorTag: string;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { RichTextEditor } from '..';
|
|
2
|
+
/**
|
|
3
|
+
* Page object for the `nimble-rich-text-editor` component.
|
|
4
|
+
*/
|
|
5
|
+
export declare class RichTextEditorPageObject {
|
|
6
|
+
private readonly richTextEditorElement;
|
|
7
|
+
constructor(richTextEditorElement: RichTextEditor);
|
|
8
|
+
editorSectionHasChildNodes(): boolean;
|
|
9
|
+
getEditorSectionFirstElementChildClassName(): string;
|
|
10
|
+
clickEditorShortcutKeys(shortcutKey: string, isShiftKey: boolean): Promise<void>;
|
|
11
|
+
pressEnterKeyInEditor(): Promise<void>;
|
|
12
|
+
pressTabKeyInEditor(): Promise<void>;
|
|
13
|
+
pressShiftTabKeysInEditor(): Promise<void>;
|
|
14
|
+
/**
|
|
15
|
+
* To click a formatting button in the footer section, pass its position value as an index (starting from '0')
|
|
16
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
17
|
+
*/
|
|
18
|
+
clickFooterButton(buttonIndex: number): Promise<void>;
|
|
19
|
+
/**
|
|
20
|
+
* To retrieve the checked state of the button, provide its position value as an index (starting from '0')
|
|
21
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
22
|
+
*/
|
|
23
|
+
getButtonCheckedState(buttonIndex: number): boolean;
|
|
24
|
+
/**
|
|
25
|
+
* To retrieve the tab index of the button, provide its position value as an index (starting from '0')
|
|
26
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
27
|
+
*/
|
|
28
|
+
getButtonTabIndex(buttonIndex: number): number;
|
|
29
|
+
/**
|
|
30
|
+
* To trigger a space key press for the button, provide its position value as an index (starting from '0')
|
|
31
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
32
|
+
*/
|
|
33
|
+
spaceKeyActivatesButton(buttonIndex: number): void;
|
|
34
|
+
/**
|
|
35
|
+
* To trigger a enter key press for the button, provide its position value as an index (starting from '0')
|
|
36
|
+
* @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
|
|
37
|
+
*/
|
|
38
|
+
enterKeyActivatesButton(buttonIndex: number): void;
|
|
39
|
+
setEditorTextContent(value: string): Promise<void>;
|
|
40
|
+
getEditorFirstChildTagName(): string;
|
|
41
|
+
getEditorFirstChildTextContent(): string;
|
|
42
|
+
getEditorTagNames(): string[];
|
|
43
|
+
getEditorLeafContents(): string[];
|
|
44
|
+
private getEditorSection;
|
|
45
|
+
private getTiptapEditor;
|
|
46
|
+
private getFormattingButton;
|
|
47
|
+
}
|
|
@@ -12,6 +12,10 @@ export declare class RichTextViewerPageObject {
|
|
|
12
12
|
* @returns An array of tag names in document order
|
|
13
13
|
*/
|
|
14
14
|
getRenderedMarkdownTagNames(): string[];
|
|
15
|
+
/**
|
|
16
|
+
* @returns An array of tag names with the closing tags (eg: '/P') in a document order
|
|
17
|
+
*/
|
|
18
|
+
getRenderedMarkdownTagNamesWithClosingTags(): string[];
|
|
15
19
|
/**
|
|
16
20
|
* Retrieves text contents for the rendered markdown content in document order
|
|
17
21
|
* @returns An array of text contents of last elements in a tree
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "20.1.
|
|
3
|
+
"version": "20.1.12",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -64,6 +64,16 @@
|
|
|
64
64
|
"@ni/nimble-tokens": "^6.3.0",
|
|
65
65
|
"@tanstack/table-core": "^8.9.3",
|
|
66
66
|
"@tanstack/virtual-core": "^3.0.0-beta.44",
|
|
67
|
+
"@tiptap/core": "^2.0.4",
|
|
68
|
+
"@tiptap/extension-bold": "^2.0.4",
|
|
69
|
+
"@tiptap/extension-bullet-list": "^2.0.4",
|
|
70
|
+
"@tiptap/extension-document": "^2.0.4",
|
|
71
|
+
"@tiptap/extension-history": "^2.0.4",
|
|
72
|
+
"@tiptap/extension-italic": "^2.0.4",
|
|
73
|
+
"@tiptap/extension-list-item": "^2.0.4",
|
|
74
|
+
"@tiptap/extension-ordered-list": "^2.0.4",
|
|
75
|
+
"@tiptap/extension-paragraph": "^2.0.4",
|
|
76
|
+
"@tiptap/extension-text": "^2.0.4",
|
|
67
77
|
"@types/d3-array": "^3.0.4",
|
|
68
78
|
"@types/d3-random": "^3.0.1",
|
|
69
79
|
"@types/d3-scale": "^4.0.2",
|