@ovnonvo/abc-editor 0.3.5 → 0.4.0
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/README.md +16 -11
- package/dist/abc-editor.cjs.js +11 -16
- package/dist/abc-editor.es.js +1104 -1120
- package/dist/src/components/AbcEditor.d.ts.map +1 -1
- package/dist/src/utils/chamberAbc.d.ts +3 -0
- package/dist/src/utils/chamberAbc.d.ts.map +1 -0
- package/dist/src/utils/highlightAbc.d.ts +1 -21
- package/dist/src/utils/highlightAbc.d.ts.map +1 -1
- package/dist/src/utils/validateAbc.d.ts +4 -4
- package/dist/src/utils/validateAbc.d.ts.map +1 -1
- package/package.json +7 -3
- package/dist/src/components/AbcPreview.d.ts +0 -8
- package/dist/src/components/AbcPreview.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ A React component for editing ABC music notation with syntax highlighting, autoc
|
|
|
4
4
|
|
|
5
5
|
## You can try it on web
|
|
6
6
|
|
|
7
|
-
[Here](https://
|
|
7
|
+
[Here](https://abce-demo.vercel.app/)
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -13,17 +13,9 @@ A React component for editing ABC music notation with syntax highlighting, autoc
|
|
|
13
13
|
- **Light & Dark Mode**: Built-in theme support with light mode as default
|
|
14
14
|
- **Syntax Highlighting**: Color-coded ABC notation elements optimized for both themes
|
|
15
15
|
- **Line Numbers**: Clear visual reference for navigation
|
|
16
|
-
<img width="739" height="282" alt="スクリーンショット 2025-11-23 14 46 26" src="https://github.com/user-attachments/assets/e69f6bf6-3ea8-45d9-b194-3d5a6e4c5385" />
|
|
17
|
-
|
|
18
16
|
- **Autocomplete**: Smart suggestions for ABC notation commands and fields
|
|
19
|
-
|
|
20
|
-
<img width="295" height="353" alt="スクリーンショット 2025-11-23 14 47 31" src="https://github.com/user-attachments/assets/625ae548-47ec-4c84-a984-9d9cd19f95c7" />
|
|
21
|
-
|
|
22
|
-
|
|
23
17
|
- **Real-time Validation**: Measure beat count validation with visual feedback
|
|
24
18
|
- **Error Highlighting**: Hover over validation errors to highlight the problematic measure
|
|
25
|
-
<img width="956" height="987" alt="スクリーンショット 2025-11-23 14 44 14" src="https://github.com/user-attachments/assets/50d7f3c4-5c7e-47df-8237-cdebb2ce086f" />
|
|
26
|
-
|
|
27
19
|
|
|
28
20
|
## Installation
|
|
29
21
|
|
|
@@ -44,14 +36,27 @@ This package requires the following peer dependencies:
|
|
|
44
36
|
```json
|
|
45
37
|
{
|
|
46
38
|
"react": "^18.0.0 || ^19.0.0",
|
|
47
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
39
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
40
|
+
"chamber-abc": "^0.2.0"
|
|
48
41
|
}
|
|
49
42
|
```
|
|
50
43
|
|
|
51
44
|
Install them if you haven't already:
|
|
52
45
|
|
|
53
46
|
```bash
|
|
54
|
-
npm install react react-dom
|
|
47
|
+
npm install react react-dom chamber-abc
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Next.js Usage
|
|
51
|
+
|
|
52
|
+
For Next.js projects, add the package to `transpilePackages` in your `next.config.mjs`:
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
const nextConfig = {
|
|
56
|
+
transpilePackages: ['@ovnonvo/abc-editor', 'chamber-abc'],
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default nextConfig;
|
|
55
60
|
```
|
|
56
61
|
|
|
57
62
|
## Usage
|