[Feature] ABC Notation Extension #1354
Conversation
flxwu
changed the title
|
@benweet Are you reviewing this? 😃 |
| @@ -0,0 +1,23 @@ | |||
| import abcjs from 'abcjs'; | |||
There was a problem hiding this comment.
Please rename the file to abcExtension.js.
src/data/presets.js
Outdated
| @@ -89,5 +97,8 @@ export default { | |||
| mermaid: { | |||
| enabled: true, | |||
| }, | |||
| abc: { | |||
| enabled: false, | |||
There was a problem hiding this comment.
I think we can enable the extension by default.
| if (document.querySelector('#abcSheetPaper') != null && abc != null) { | ||
| abcjs.renderAbc('abcSheetPaper', abc, {}); | ||
| } | ||
| }); |
There was a problem hiding this comment.
No need to do all of this. No need to have a markdown-it plugin. Please have a look at the mermaid extension. You only need to do this:
extensionSvc.onGetOptions((options, properties) => {
options.abc = properties.extensions.abc.enabled;
});
extensionSvc.onSectionPreview((elt) => {
elt.querySelectorAll('.prism.language-abc')
.cl_each(diagramElt => render(diagramElt.parentNode));
});
|
done @benweet |
src/data/presets.js
Outdated
| See https://abcjs.net/ | ||
| */ | ||
| abc: { | ||
| enabled: true, |
There was a problem hiding this comment.
In the zero preset, it should be off.
| @@ -25,6 +25,7 @@ | |||
| }, | |||
| "dependencies": { | |||
| "@vue/test-utils": "^1.0.0-beta.16", | |||
| "abcjs": "git+https://[email protected]/flxwu/abcjs.git", | |||
There was a problem hiding this comment.
Should point to an actual version. Why not use the official one ?
There was a problem hiding this comment.
Because we have to modify a css property in the abcjs svg generator to generate overflow:scroll instead of hidden
There was a problem hiding this comment.
Why not override the css property in StackEdit? (with an !important rule I suggest)
There was a problem hiding this comment.
That's what I initially thought would work as well but abcjs overwrites the parent div's style property entirely
src/extensions/abcExtension.js
Outdated
| const render = (elt) => { | ||
| const abcContent = elt.textContent; | ||
| elt.parentNode.parentNode.id = 'abcSheetPaper'; | ||
| abcjs.renderAbc('abcSheetPaper', abcContent, {}); |
There was a problem hiding this comment.
No need to use an id, you can pass the element itself.
For users to be able to document their music note sheets live in StackEdit, I implemented an extension that parses an
```abcblock an renders an svg using abcjs.Resolves #1339.
Screenshot:
