Skip to content

Commit bea59fe

Browse files
gjulivangjulivan
committed
chore: fix keyboard shortcuts
1 parent bc374b4 commit bea59fe

File tree

7 files changed

+75
-62
lines changed

7 files changed

+75
-62
lines changed

‎packages/pluggableWidgets/rich-text-web/src/RichText.xml‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -216,22 +216,6 @@
216216
<enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
217217
</enumerationValues>
218218
</property>
219-
<property key="tabAction" type="enumeration" defaultValue="changeFocus">
220-
<caption>Tab key behavior</caption>
221-
<description>Press 'Tab' to indent text or to move focus to the next element.</description>
222-
<enumerationValues>
223-
<enumerationValue key="indent">Indent</enumerationValue>
224-
<enumerationValue key="changeFocus">Focus next</enumerationValue>
225-
</enumerationValues>
226-
</property>
227-
<property key="ctrlTabAction" type="enumeration" defaultValue="indent">
228-
<caption>Ctrl+Tab key behavior</caption>
229-
<description>Press 'Ctrl+Tab' to indent text or to move focus to the next element.</description>
230-
<enumerationValues>
231-
<enumerationValue key="indent">Indent</enumerationValue>
232-
<enumerationValue key="changeFocus">Focus next</enumerationValue>
233-
</enumerationValues>
234-
</property>
235219
</propertyGroup>
236220
</propertyGroup>
237221
<propertyGroup caption="Custom toolbar">

‎packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx‎

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,14 @@ import { SET_FULLSCREEN_ACTION } from "../store/store";
1717
import "../utils/customPluginRegisters";
1818
import { FontStyleAttributor, formatCustomFonts } from "../utils/formats/fonts";
1919
import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss";
20-
import QuillTableBetter from "../utils/formats/quill-table-better/quill-table-better";
21-
import { RESIZE_MODULE_CONFIG } from "../utils/formats/resizeModuleConfig";
20+
import { getResizeModuleConfig } from "../utils/formats/resizeModuleConfig";
2221
import { ACTION_DISPATCHER } from "../utils/helpers";
22+
import { getKeyboardBindings } from "../utils/modules/keyboard";
23+
import { getIndentHandler } from "../utils/modules/toolbarHandlers";
24+
import MxUploader from "../utils/modules/uploader";
2325
import MxQuill from "../utils/MxQuill";
24-
import {
25-
enterKeyKeyboardHandler,
26-
exitFullscreenKeyboardHandler,
27-
getIndentHandler,
28-
gotoStatusBarKeyboardHandler,
29-
gotoToolbarKeyboardHandler
30-
} from "./CustomToolbars/toolbarHandlers";
3126
import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
3227
import Dialog from "./ModalDialog/Dialog";
33-
import MxUploader from "../utils/modules/uploader";
3428

3529
export interface EditorProps
3630
extends Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload"> {
@@ -116,41 +110,20 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
116110
theme,
117111
modules: {
118112
keyboard: {
119-
bindings: {
120-
enter: {
121-
key: "Enter",
122-
handler: enterKeyKeyboardHandler
123-
},
124-
focusTab: {
125-
key: "F10",
126-
altKey: true,
127-
handler: gotoToolbarKeyboardHandler
128-
},
129-
tab: {
130-
key: "Tab",
131-
handler: gotoStatusBarKeyboardHandler
132-
},
133-
escape: {
134-
key: "Escape",
135-
handler: exitFullscreenKeyboardHandler
136-
},
137-
...QuillTableBetter.keyboardBindings
138-
}
113+
bindings: getKeyboardBindings()
139114
},
140115
table: false,
141116
"table-better": {
142117
language: "en_US",
143118
menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete", "grid"],
144119
toolbarTable: !readOnly
145120
},
146-
toolbar
121+
toolbar,
122+
...getResizeModuleConfig(readOnly)
147123
},
148124
readOnly
149125
};
150126

151-
if (!readOnly && options.modules) {
152-
options.modules.resize = RESIZE_MODULE_CONFIG;
153-
}
154127
const quill = new MxQuill(editorContainer, options);
155128
ref.current = quill;
156129

‎packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
201201
}
202202
toolbarId={shouldHideToolbar ? undefined : toolbarOptions ? toolbarOptions : toolbarId}
203203
onTextChange={onTextChange}
204-
// onSelectionChange={onSelectionChange}
205204
className={"widget-rich-text-container"}
206205
readOnly={stringAttribute.readOnly}
207206
key={`${toolbarId}_${stringAttribute.readOnly}`}

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,10 @@ export const RESIZE_MODULE_CONFIG = {
6262
}
6363
}
6464
};
65+
66+
export function getResizeModuleConfig(isReadOnly?: boolean): Record<string, unknown> | undefined {
67+
if (isReadOnly) {
68+
return {};
69+
}
70+
return { resize: RESIZE_MODULE_CONFIG };
71+
}

‎packages/pluggableWidgets/rich-text-web/src/utils/modules/keyboard.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
addIndentText,
3+
enterKeyKeyboardHandler,
4+
exitFullscreenKeyboardHandler,
5+
gotoStatusBarKeyboardHandler,
6+
gotoToolbarKeyboardHandler
7+
} from "./toolbarHandlers";
8+
import QuillTableBetter from "../formats/quill-table-better/quill-table-better";
9+
10+
export function getKeyboardBindings(): Record<string, unknown> {
11+
const defaultBindings: Record<string, unknown> = {
12+
enter: {
13+
key: "Enter",
14+
handler: enterKeyKeyboardHandler
15+
},
16+
focusTab: {
17+
key: "F10",
18+
altKey: true,
19+
handler: gotoToolbarKeyboardHandler
20+
},
21+
shiftTab: {
22+
key: "Tab",
23+
shiftKey: true,
24+
handler: gotoToolbarKeyboardHandler
25+
},
26+
nextFocusTab: {
27+
key: "F11",
28+
altKey: true,
29+
handler: gotoStatusBarKeyboardHandler
30+
},
31+
escape: {
32+
key: "Escape",
33+
handler: exitFullscreenKeyboardHandler
34+
},
35+
tab: {
36+
key: "Tab",
37+
handler: addIndentText
38+
},
39+
...QuillTableBetter.keyboardBindings
40+
};
41+
return defaultBindings;
42+
}

‎packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/toolbarHandlers.ts‎ renamed to ‎packages/pluggableWidgets/rich-text-web/src/utils/modules/toolbarHandlers.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { MutableRefObject } from "react";
44
import { Range } from "quill/core/selection";
55
import Keyboard, { Context } from "quill/modules/keyboard";
66
import { Scope } from "parchment";
7-
import { ACTION_DISPATCHER } from "../../utils/helpers";
7+
import { ACTION_DISPATCHER } from "../helpers";
88
import { SET_FULLSCREEN_ACTION } from "../../store/store";
99

1010
/**
@@ -76,12 +76,11 @@ export function gotoToolbarKeyboardHandler(this: Keyboard, _range: Range, _conte
7676
(toolbar?.querySelector(".ql-formats button") as HTMLElement)?.focus();
7777
}
7878

79-
// focus to status bar button (exit editor)
79+
// move to next element focus : status bar button (exit editor)
8080
export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, context: Context): boolean | void {
8181
if (context.format.table) {
8282
return true;
8383
}
84-
8584
const statusBar = this.quill.container.parentElement?.parentElement?.nextElementSibling;
8685
if (statusBar) {
8786
(statusBar as HTMLElement)?.focus();
@@ -90,6 +89,23 @@ export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, cont
9089
}
9190
}
9291

92+
// default quill tab handler
93+
// https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L412
94+
// but modified to add stopPropagation and preventDefault
95+
export function addIndentText(this: Keyboard, range: Range, context: Context): boolean | void {
96+
if (context.format.table) {
97+
return true;
98+
}
99+
this.quill.history.cutoff();
100+
const delta = new Delta().retain(range.index).delete(range.length).insert("\t");
101+
this.quill.updateContents(delta, Quill.sources.USER);
102+
this.quill.history.cutoff();
103+
this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
104+
context.event.stopPropagation();
105+
context.event.preventDefault();
106+
return false;
107+
}
108+
93109
/**
94110
* Keyboard handler for exiting fullscreen mode when the Escape key is pressed
95111
*/

‎packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ export interface CustomFontsType {
3333

3434
export type StatusBarContentEnum = "wordCount" | "characterCount" | "characterCountHtml";
3535

36-
export type TabActionEnum = "indent" | "changeFocus";
37-
38-
export type CtrlTabActionEnum = "indent" | "changeFocus";
39-
4036
export type ToolbarConfigEnum = "basic" | "advanced";
4137

4238
export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "align" | "centerAlign" | "rightAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter";
@@ -86,8 +82,6 @@ export interface RichTextContainerProps {
8682
imageSourceContent?: ReactNode;
8783
enableDefaultUpload: boolean;
8884
statusBarContent: StatusBarContentEnum;
89-
tabAction: TabActionEnum;
90-
ctrlTabAction: CtrlTabActionEnum;
9185
toolbarConfig: ToolbarConfigEnum;
9286
history: boolean;
9387
fontStyle: boolean;
@@ -137,8 +131,6 @@ export interface RichTextPreviewProps {
137131
imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
138132
enableDefaultUpload: boolean;
139133
statusBarContent: StatusBarContentEnum;
140-
tabAction: TabActionEnum;
141-
ctrlTabAction: CtrlTabActionEnum;
142134
toolbarConfig: ToolbarConfigEnum;
143135
history: boolean;
144136
fontStyle: boolean;

0 commit comments

Comments
 (0)