,
85 | mutability: DraftEntityMutability
86 | ) => {
87 | setState((currentState) => {
88 | const contentState = currentState.getCurrentContent();
89 | const contentStateWithEntity = contentState.createEntity(
90 | entityType,
91 | mutability,
92 | data
93 | );
94 | const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
95 | const newState = EditorState.set(currentState, {
96 | currentContent: contentStateWithEntity,
97 | });
98 | return RichUtils.toggleLink(
99 | newState,
100 | newState.getSelection(),
101 | entityKey
102 | );
103 | });
104 | },
105 | []
106 | );
107 |
108 | const addLink = React.useCallback(
109 | (url) => {
110 | addEntity(EntityType.link, { url }, "MUTABLE");
111 | },
112 | [addEntity]
113 | );
114 |
115 | const handleKeyCommand = React.useCallback(
116 | (command: KeyCommand, editorState: EditorState) => {
117 | if (command === "accent") {
118 | toggleInlineStyle(InlineStyle.ACCENT);
119 | return "handled";
120 | }
121 |
122 | const newState = RichUtils.handleKeyCommand(editorState, command);
123 |
124 | if (newState) {
125 | setState(newState);
126 | return "handled";
127 | }
128 |
129 | return "not-handled";
130 | },
131 | [toggleInlineStyle]
132 | );
133 |
134 | const handlerKeyBinding = React.useCallback((e: React.KeyboardEvent) => {
135 | if (e.keyCode === 81 && KeyBindingUtil.hasCommandModifier(e)) {
136 | return "accent";
137 | }
138 |
139 | return getDefaultKeyBinding(e);
140 | }, []);
141 |
142 | const toHtml = React.useCallback(
143 | () => stateToHTML(state.getCurrentContent()),
144 | [state]
145 | );
146 |
147 | return React.useMemo(
148 | () => ({
149 | state,
150 | onChange: setState,
151 | toggleBlockType,
152 | currentBlockType,
153 | toggleInlineStyle,
154 | hasInlineStyle,
155 | toHtml,
156 | addLink,
157 | setEntityData,
158 | handleKeyCommand,
159 | handlerKeyBinding,
160 | }),
161 | [
162 | state,
163 | toggleBlockType,
164 | currentBlockType,
165 | toggleInlineStyle,
166 | hasInlineStyle,
167 | toHtml,
168 | addLink,
169 | setEntityData,
170 | handleKeyCommand,
171 | handlerKeyBinding,
172 | ]
173 | );
174 | };
175 |
--------------------------------------------------------------------------------
/src/ToolPanel/ToolPanel.scss:
--------------------------------------------------------------------------------
1 | .tool-panel {
2 | display: flex;
3 | flex-wrap: wrap;
4 | align-items: center;
5 | margin-left: -5px;
6 | margin-right: -5px;
7 |
8 | &__item {
9 | flex-shrink: 0;
10 | margin: 0 5px 10px;
11 |
12 | &_active {
13 | color: red;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/ToolPanel/ToolPanel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useEditorApi } from "../TextEditor";
3 | import cn from "classnames";
4 | import { BlockType, InlineStyle } from "../TextEditor/config";
5 | import "./ToolPanel.scss";
6 |
7 | const ToolPanel: React.FC = () => {
8 | const {
9 | toHtml,
10 | addLink,
11 | toggleBlockType,
12 | currentBlockType,
13 | toggleInlineStyle,
14 | hasInlineStyle,
15 | } = useEditorApi();
16 |
17 | return (
18 |
19 |
31 |
43 |
55 |
67 |
68 | {Object.values(InlineStyle).map((v) => (
69 |
82 | ))}
83 |
84 |
95 |
96 |
104 |
105 | );
106 | };
107 |
108 | export default ToolPanel;
109 |
--------------------------------------------------------------------------------
/src/ToolPanel/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./ToolPanel";
2 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 10px;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | * {
12 | box-sizing: border-box;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById("root")
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from "web-vitals";
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom";
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------