8000 Make code examples focusable (#711) · nsavas2000/python-editor-v3@55c280e · GitHub
[go: up one dir, main page]
Skip to content

Commit 55c280e

Browse files
microbit-robertmicrobit-robert
authored
Make code examples focusable (microbit-foundation#711)
1 parent c69b53b commit 55c280e

File tree

4 files changed

+66
-9
lines changed
< 8000 /div>

4 files changed

+66
-9
lines changed

‎src/documentation/api/ApiNode.test.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { render } from "@testing-library/react";
77
import { ApiDocsEntry } from "../../language-server/apidocs";
88
import NullLoggingProvider from "../../logging/NullLoggingProvider";
9+
import { ActiveEditorProvider } from "../../editor/active-editor-hooks";
910
import FixedTranslationProvider from "../../messages/FixedTranslationProvider";
1011
import ScrollablePanel from "../../common/ScrollablePanel";
1112
import ApiNode, { getDragContext, classToInstanceMap } from "./ApiNode";
@@ -43,9 +44,11 @@ describe("ApiNode", () => {
4344
render(
4445
<FixedTranslationProvider>
4546
<NullLoggingProvider>
46-
<ScrollablePanel>
47-
<ApiNode docs={node} />
48-
</ScrollablePanel>
47+
<ActiveEditorProvider>
48+
<ScrollablePanel>
49+
<ApiNode docs={node} />
50+
</ScrollablePanel>
51+
</ActiveEditorProvider>
4952
</NullLoggingProvider>
5053
</FixedTranslationProvider>
5154
);

‎src/documentation/api/ApiNode.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Collapse, useDisclosure } from "@chakra-ui/react";
88
import { default as React, ReactNode, useCallback, useMemo } from "react";
99
import { FormattedMessage, IntlShape, useIntl } from "react-intl";
1010
import { pythonSnippetMediaType } from "../../common/mediaTypes";
11+
import { useActiveEditorActions } from "../../editor/active-editor-hooks";
1112
import {
1213
debug as dndDebug,
1314
DragContext,
@@ -367,6 +368,28 @@ const DraggableSignature = ({
367368
}, []);
368369

369370
const highlight = useDisclosure();
371+
372+
const actions = useActiveEditorActions();
373+
const handleInsertCode = useCallback(() => {
374+
const { code, id } = getDragContext(fullName, kind);
375+
actions?.insertCode(code, kind === "function" ? "call" : "example", id);
376+
}, [actions, fullName, kind]);
377+
const isMac = /Mac/.test(navigator.platform);
378+
const handleKeyDown = useCallback(
379+
async (e: React.KeyboardEvent<HTMLDivElement>) => {
380+
if (e.key === "Enter") {
381+
e.preventDefault();
382+
handleInsertCode();
383+
}
384+
if ((e.key === "c" || e.key === "C") && (isMac ? e.metaKey : e.ctrlKey)) {
385+
e.preventDefault();
386+
await navigator.clipboard.writeText(
387+
`${formatName(kind, fullName, name)}${signature ? signature : ""}`
388+
);
389+
}
390+
},
391+
[fullName, handleInsertCode, isMac, kind, name, signature]
392+
);
370393
return (
371394
<HStack
372395
draggable
@@ -380,6 +403,14 @@ const DraggableSignature = ({
380403
borderRadius="lg"
381404
onMouseEnter={highlight.onOpen}
382405
onMouseLeave={highlight.onClose}
406+
tabIndex={0}
407+
_focus={{
408+
boxShadow: "var(--chakra-shadows-outline);",
409+
}}
410+
_focusVisible={{
411+
outline: "none",
412+
}}
413+
onKeyDown={handleKeyDown}
383414
{...props}
384415
cursor="grab"
385416
>

‎src/documentation/common/CodeEmbed.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const CodeEmbed = ({ code: codeWithImports, parentSlug }: CodeEmbedProps) => {
7171

7272
const actions = useActiveEditorActions();
7373
const handleInsertCode = useCallback(
74-
() => actions?.insertCode(codeWithImports, parentSlug),
74+
() => actions?.insertCode(codeWithImports, "example", parentSlug),
7575
[actions, codeWithImports, parentSlug]
7676
);
7777

@@ -95,7 +95,20 @@ const CodeEmbed = ({ code: codeWithImports, parentSlug }: CodeEmbedProps) => {
9595
const textHeight = lineCount * 1.375 + "em";
9696
const codeHeight = `calc(${textHeight} + var(--chakra-space-2) + var(--chakra-space-2))`;
9797
const codePopUpHeight = `calc(${codeHeight} + 2px)`; // Account for border.
98-
98+
const isMac = /Mac/.test(navigator.platform);
99+
const handleKeyDown = useCallback(
100+
async (e: React.KeyboardEvent<HTMLDivElement>) => {
101+
if (e.key === "Enter") {
102+
e.preventDefault();
103+
handleInsertCode();
104+
}
105+
if ((e.key === "c" || e.key === "C") && (isMac ? e.metaKey : e.ctrlKey)) {
106+
e.preventDefault();
107+
await navigator.clipboard.writeText(code);
108+
}
109+
},
110+
[code, handleInsertCode, isMac]
111+
);
99112
return (
100113
<Box>
101114
<Box height={codeHeight} fontSize="md">
@@ -109,6 +122,15 @@ const CodeEmbed = ({ code: codeWithImports, parentSlug }: CodeEmbedProps) => {
109122
ref={codeRef}
110123
background={state === "default" ? "white" : "blimpTeal.50"}
111124
highlightDragHandle={state === "raised"}
125+
tabIndex={0}
126+
_focus={{
127+
boxShadow: "var(--chakra-shadows-outline);",
128+
}}
129+
_focusVisible={{
130+
outline: "none",
131+
}}
132+
onKeyDown={handleKeyDown}
133+
zIndex={1}
112134
/>
113135
{state === "raised" && (
114136
<CodePopUp

‎src/editor/active-editor-hooks.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*
66
* SPDX-License-Identifier: MIT
77
*/
8+
import { redo, undo } from "@codemirror/history";
89
import { EditorView } from "@codemirror/view";
910
import React, {
1011
Dispatch,
@@ -13,9 +14,9 @@ import React, {
1314
useContext,
1415
useState,
1516
} from "react";
16-
import { undo, redo } from "@codemirror/history";
17-
import { calculateChanges } from "./codemirror/edits";
1817
import { Logging } from "../logging/logging";
18+
import { CodeInsertType } from "./codemirror/dnd";
19+
import { calculateChanges } from "./codemirror/edits";
1920

2021
/**
2122
* Actions that operate on a CM editor.
@@ -28,12 +29,12 @@ export class EditorActions {
2829
*
2930
* @param code The code with any required imports.
3031
*/
31-
insertCode = (code: string, id?: string): void => {
32+
insertCode = (code: string, type: CodeInsertType, id?: string): void => {
3233
this.logging.event({
3334
type: "code-insert",
3435
message: id,
3536
});
36-
this.view.dispatch(calculateChanges(this.view.state, code, "example"));
37+
this.view.dispatch(calculateChanges(this.view.state, code, type));
3738
this.view.focus();
3839
};
3940
undo = (): void => {

0 commit comments

Comments
 (0)
0