Skip to content

Commit c6f53bc

Browse files
TechQueryTechQuery
committed
[refactor] simplify Tool updating of React editor based on MobX-React-helper 0.4
[optimize] non-DOM JS runtime compatibility of Heading tools [optimize] upgrade Upstream packages
1 parent 7e819ee commit c6f53bc

File tree

7 files changed

+1476
-2088
lines changed

7 files changed

+1476
-2088
lines changed

‎React/package.json‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-bootstrap-editor",
3-
"version": "2.0.7",
3+
"version": "2.1.0",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"contributors": [
@@ -24,23 +24,24 @@
2424
"types": "dist/index.d.ts",
2525
"dependencies": {
2626
"@swc/helpers": "^0.5.17",
27-
"edkit": "^1.2.2",
27+
"edkit": "^1.2.3",
2828
"mobx": "^6.13.7",
2929
"mobx-react": "^9.2.0",
30+
"mobx-react-helper": "^0.4.0",
3031
"web-utility": "^4.4.3"
3132
},
3233
"peerDependencies": {
3334
"react": ">=16",
3435
"react-dom": ">=16"
3536
},
3637
"devDependencies": {
37-
"@parcel/config-default": "~2.14.4",
38-
"@parcel/packager-ts": "~2.14.4",
39-
"@parcel/transformer-typescript-tsc": "~2.14.4",
40-
"@parcel/transformer-typescript-types": "~2.14.4",
41-
"@types/react": "^19.1.2",
42-
"@types/react-dom": "^19.1.2",
43-
"parcel": "~2.14.4",
38+
"@parcel/config-default": "~2.15.0",
39+
"@parcel/packager-ts": "~2.15.0",
40+
"@parcel/transformer-typescript-tsc": "~2.15.0",
41+
"@parcel/transformer-typescript-types": "~2.15.0",
42+
"@types/react": "^19.1.4",
43+
"@types/react-dom": "^19.1.5",
44+
"parcel": "~2.15.0",
4445
"process": "^0.11.10",
4546
"react": "^19.1.0",
4647
"react-dom": "^19.1.0",

‎React/pnpm-lock.yaml‎

Lines changed: 693 additions & 938 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎React/source/Editor.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
11
import { EditorComponent, ImageTool, Tool, editor } from 'edkit';
22
import { computed, observable } from 'mobx';
33
import { observer } from 'mobx-react';
4-
import { InputHTMLAttributes, Component, createRef } from 'react';
4+
import { FormComponent, FormComponentProps } from 'mobx-react-helper';
5+
import { createRef } from 'react';
56
import { Constructor, parseDOM } from 'web-utility';
67

78
import { AudioTool, DefaultTools, VideoTool } from './tools';
89

9-
export interface EditorProps
10-
extends Pick<
11-
InputHTMLAttributes<HTMLInputElement>,
12-
'name' | 'defaultValue'
13-
> {
10+
export interface EditorProps extends FormComponentProps {
1411
tools?: Constructor<Tool>[];
15-
onChange?: (value: string) => any;
1612
}
1713

1814
export interface Editor extends EditorComponent {}
1915

2016
@observer
2117
@editor
22-
export class Editor extends Component<EditorProps> implements EditorComponent {
18+
export class Editor
19+
extends FormComponent<EditorProps>
20+
implements EditorComponent
21+
{
2322
static displayName = 'Editor';
2423

2524
box = createRef<HTMLDivElement>();
2625

2726
@observable
28-
accessor toolList: Tool[] = [];
27+
accessor cursorPoint = '';
28+
29+
@computed
30+
get toolList(): Tool[] {
31+
return (this.observedProps.tools || DefaultTools).map(
32+
ToolButton => new ToolButton()
33+
);
34+
}
2935

3036
@computed
3137
get imageTool() {
@@ -48,47 +54,41 @@ export class Editor extends Component<EditorProps> implements EditorComponent {
4854
) as VideoTool;
4955
}
5056

51-
defaultValue = this.props.defaultValue;
52-
53-
@observable
54-
accessor innerValue = this.defaultValue;
55-
5657
componentDidMount() {
57-
this.bootTools();
58+
super.componentDidMount();
5859

59-
if (this.defaultValue != null)
60-
this.box.current.append(...parseDOM(this.defaultValue + ''));
60+
const { defaultValue } = this.props;
6161

62-
document.addEventListener('selectionchange', this.updateTools);
63-
}
62+
if (defaultValue != null)
63+
this.box.current.append(...parseDOM(defaultValue + ''));
6464

65-
componentDidUpdate({ tools }: Readonly<EditorProps>) {
66-
if (tools !== this.props.tools) this.bootTools();
65+
document.addEventListener('selectionchange', this.updateTools);
6766
}
6867

6968
componentWillUnmount() {
69+
super.componentWillUnmount();
70+
7071
document.removeEventListener('selectionchange', this.updateTools);
7172
}
7273

73-
bootTools() {
74-
const { tools = DefaultTools } = this.props;
74+
updateTools = () => {
75+
if (this.box.current !== document.activeElement) return;
7576

76-
this.toolList = tools.map(ToolButton => new ToolButton());
77-
}
77+
const { endContainer } = getSelection().getRangeAt(0) || {};
78+
const { x, y } =
79+
(endContainer instanceof Element
80+
? endContainer
81+
: endContainer.parentElement
82+
)?.getBoundingClientRect() || {};
7883

79-
updateTools = () => {
80-
if (this.box.current === document.activeElement)
81-
this.toolList = [...this.toolList];
84+
this.cursorPoint = [x, y] + '';
8285
};
8386

84-
updateValue(markup: string) {
85-
this.innerValue = markup = markup.trim();
86-
87-
this.props.onChange?.(markup);
88-
}
87+
updateValue = (markup: string) => (this.innerValue = markup.trim());
8988

9089
render() {
91-
const { toolList, innerValue } = this,
90+
// Don't remove unused variable `cursorPoint`, which is used for triggering updates
91+
const { cursorPoint, toolList, innerValue } = this,
9292
{ name } = this.props;
9393

9494
return (

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "edkit",
3-
"version": "1.2.3",
3+
"version": "1.2.4",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"contributors": [
@@ -28,23 +28,23 @@
2828
"dependencies": {
2929
"@swc/helpers": "^0.5.17",
3030
"@types/turndown": "^5.0.5",
31-
"browser-fs-access": "^0.35.0",
32-
"marked": "^15.0.8",
31+
"browser-fs-access": "^0.37.0",
32+
"marked": "^15.0.11",
3333
"regenerator-runtime": "^0.14.1",
3434
"turndown": "^7.2.0",
3535
"turndown-plugin-gfm": "^1.0.2",
3636
"web-utility": "^4.4.3"
3737
},
3838
"devDependencies": {
39-
"@parcel/packager-ts": "~2.14.4",
40-
"@parcel/transformer-typescript-types": "~2.14.4",
39+
"@parcel/packager-ts": "~2.15.0",
40+
"@parcel/transformer-typescript-types": "~2.15.0",
4141
"husky": "^9.1.7",
42-
"lint-staged": "^15.5.1",
42+
"lint-staged": "^16.0.0",
4343
"open-cli": "^8.0.0",
44-
"parcel": "~2.14.4",
44+
"parcel": "~2.15.0",
4545
"prettier": "^3.5.3",
46-
"typedoc": "^0.28.2",
47-
"typedoc-plugin-mdn-links": "^5.0.1",
46+
"typedoc": "^0.28.4",
47+
"typedoc-plugin-mdn-links": "^5.0.2",
4848
"typescript": "~5.8.3"
4949
},
5050
"pnpm": {

0 commit comments

Comments
 (0)