@ovnonvo/abc-editor 0.1.3 → 0.1.4
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/dist/abc-editor.cjs.js
CHANGED
|
@@ -12,6 +12,6 @@ K:C
|
|
|
12
12
|
`),d=o[o.length-1];if(d.startsWith("/"))return{fieldKey:null,inputValue:d,line:d,lineStartPos:i-d.length,isCommand:!0};const h=d.match(N);if(h){const[,T,m]=h;return{fieldKey:T,inputValue:m,line:d,lineStartPos:i-d.length,isCommand:!1}}return null},[e,t]),a=b.useCallback(()=>{if(!t.current)return{top:0,left:0};const i=t.current,o=i.selectionStart,h=e.substring(0,o).split(`
|
|
13
13
|
`).length-1,T=parseFloat(getComputedStyle(i).lineHeight)||24;return{top:(parseFloat(getComputedStyle(i).paddingTop)||16)+(h+1)*T-i.scrollTop,left:60}},[e,t]);b.useEffect(()=>{const i=s();if(!i){l(d=>({...d,isOpen:!1}));return}let o=[];if(i.isCommand?o=xe(i.inputValue):i.fieldKey&&(o=Te(i.fieldKey).filter(h=>h.value.toLowerCase().startsWith(i.inputValue.toLowerCase()))),o.length>0){const d=a();l({isOpen:!0,suggestions:o,selectedIndex:0,position:d,fieldKey:i.fieldKey,inputValue:i.inputValue,isCommand:i.isCommand})}else l(d=>({...d,isOpen:!1}))},[e,s,a]);const c=b.useCallback(i=>{if(!t.current)return;const o=t.current.selectionStart,d=e.substring(0,o).split(`
|
|
14
14
|
`),h=d[d.length-1];let T,m;if(r.isCommand&&i.template){const g=e.substring(0,o-h.length),x=e.substring(o);T=g+i.template+x,m=g.length+i.template.length}else if(r.fieldKey){const g=r.fieldKey+i.value,x=e.substring(0,o-h.length),A=e.substring(o);T=x+g+A,m=x.length+g.length}else return;n(T),setTimeout(()=>{t.current&&(t.current.selectionStart=m,t.current.selectionEnd=m,t.current.focus())},0),l(g=>({...g,isOpen:!1}))},[t,r.fieldKey,r.isCommand,e,n]),v=b.useCallback(i=>{if(r.isOpen)switch(i.key){case"ArrowDown":i.preventDefault(),l(o=>({...o,selectedIndex:Math.min(o.selectedIndex+1,o.suggestions.length-1)}));break;case"ArrowUp":i.preventDefault(),l(o=>({...o,selectedIndex:Math.max(o.selectedIndex-1,0)}));break;case"Enter":r.suggestions.length>0&&(i.preventDefault(),c(r.suggestions[r.selectedIndex]));break;case"Escape":i.preventDefault(),l(o=>({...o,isOpen:!1}));break}},[r.isOpen,r.suggestions,r.selectedIndex,c]),f=b.useCallback(i=>{l(o=>({...o,selectedIndex:i}))},[]);return{isOpen:r.isOpen,suggestions:r.suggestions,selectedIndex:r.selectedIndex,position:r.position,handleKeyDown:v,selectSuggestion:c,handleMouseEnter:f}},J=({suggestions:e,selectedIndex:t,position:n,onSelect:r,onMouseEnter:l})=>{const s=b.useRef(null);return b.useEffect(()=>{s.current?.scrollIntoView({block:"nearest",behavior:"smooth"})},[t]),e.length===0?null:u.jsx("div",{className:"absolute z-50 bg-slate-800 border border-slate-600 rounded-md shadow-lg overflow-hidden",style:{top:`${n.top}px`,left:`${n.left}px`,minWidth:"200px",maxWidth:"400px",maxHeight:"300px",overflowY:"auto"},children:e.map((a,c)=>u.jsxs("div",{ref:c===t?s:null,className:`px-3 py-2 cursor-pointer ${c===t?"bg-blue-600 text-white":"text-slate-200 hover:bg-slate-700"}`,onClick:()=>r(a),onMouseEnter:()=>l(c),children:[u.jsx("div",{className:"font-mono text-sm",children:a.value}),a.description&&u.jsx("div",{className:"text-xs opacity-75 mt-1",children:a.description})]},`${a.value}-${c}`))})},Ne=e=>{const t=e.trim();if(t==="C")return{beatsPerMeasure:4,beatUnit:4};if(t==="C|")return{beatsPerMeasure:2,beatUnit:2};const n=t.match(/^(\d+)\/(\d+)$/);return n?{beatsPerMeasure:parseInt(n[1],10),beatUnit:parseInt(n[2],10)}:{beatsPerMeasure:4,beatUnit:4}},Ce=e=>{const n=e.trim().match(/^(\d+)\/(\d+)$/);return n?parseInt(n[1],10)/parseInt(n[2],10):1/8},Ee=e=>{const t=e.split(`
|
|
15
|
-
`);let n={beatsPerMeasure:4,beatUnit:4},r=1/8;for(const l of t){const s=l.match(N);if(s){const[,a,c]=s;a==="M:"?n=Ne(c):a==="L:"&&(r=Ce(c))}}return{meter:n,unitNoteLength:r}},
|
|
16
|
-
`),r=Ee(e);return n.forEach((l,s)=>{if(!(l.trim().startsWith("%")||N.test(l))&&l.includes("|")){let a=0;const c=l.split("|");let v=0;c.forEach((f,i)=>{if(i===c.length-1&&f.trim()==="")return;const o=f.trim();if(o.startsWith(":")||o.startsWith("[")||o===""){a+=f.length+1;return}const d=_e(o,r),h=r.meter.beatsPerMeasure;if(Math.abs(d-h)>.01){const m=l.indexOf(o,a),g=m+o.length;t.push({line:s,measureIndex:v,startCol:m,endCol:g,expected:h,actual:d,message:`Expected ${h} beats, got ${d.toFixed(2)}`})}v++,a+=f.length+1})}}),t},Be=({value:e,onChange:t})=>{const n=b.useRef(null),r=b.useRef(null),l=b.useRef(null),[s,a]=b.useState(null),c=L(e),v=I(e),f=b.useMemo(()=>X(e),[e]),{isOpen:i,suggestions:o,selectedIndex:d,position:h,handleKeyDown:T,selectSuggestion:m,handleMouseEnter:g}=q({value:e,textareaRef:n,onChange:t}),x=()=>{n.current&&r.current&&l.current&&(r.current.scrollTop=n.current.scrollTop,l.current.scrollTop=n.current.scrollTop)};return u.jsx("div",{className:"w-full
|
|
17
|
-
`),Z=(A[s.line]||"").substring(s.startCol,s.endCol),ee=I(Z);return u.jsx("div",{className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"transparent"},children:u.jsx("pre",{className:"m-0",children:A.map((E,_)=>{if(_===s.line){const te=E.substring(0,s.startCol),se=E.substring(s.endCol);return u.jsxs("div",{children:[u.jsx("span",{style:{opacity:0},children:te}),u.jsx("span",{className:"bg-amber-500/20 px-1 rounded",dangerouslySetInnerHTML:{__html:ee}}),u.jsx("span",{style:{opacity:0},children:se})]},_)}return u.jsx("div",{style:{opacity:0},children:E},_)})})})})(),u.jsx("textarea",{ref:n,className:"absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",style:{backgroundColor:"transparent",color:"transparent",caretColor:"#fff"},value:e,onChange:A=>t(A.target.value),onScroll:x,onKeyDown:T,spellCheck:!1,placeholder:"Type /header to insert template..."}),i&&u.jsx(J,{suggestions:o,selectedIndex:d,position:h,onSelect:m,onMouseEnter:g})]})]}),f.length>0&&u.jsxs("div",{className:"border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",style:{backgroundColor:"#0f0f0f",maxHeight:"8rem"},children:[u.jsxs("div",{className:"text-slate-500 mb-2 text-[10px] uppercase tracking-wide",children:["Validation Errors (",f.length,")"]}),f.map((A,
|
|
15
|
+
`);let n={beatsPerMeasure:4,beatUnit:4},r=1/8;for(const l of t){const s=l.match(N);if(s){const[,a,c]=s;a==="M:"?n=Ne(c):a==="L:"&&(r=Ce(c))}}return{meter:n,unitNoteLength:r}},w=e=>{if(!e)return 1;if(e.startsWith("/"))return 1/parseInt(e.substring(1),10);if(e.includes("/")){const[t,n]=e.split("/");return parseInt(t,10)/parseInt(n,10)}return parseInt(e,10)},_e=(e,t)=>{let n=0,r=0;for(;r<e.length;){const l=e[r];if(C.test(l)||y.test(l)){let s=r+1;for(;s<e.length&&(e[s]==="'"||e[s]===",");)s++;let a="";if(s<e.length&&(e[s]==="/"||/\d/.test(e[s]))){const o=s;for(e[s]==="/"&&s++;s<e.length&&/\d/.test(e[s]);)s++;if(s<e.length&&e[s]==="/")for(s++;s<e.length&&/\d/.test(e[s]);)s++;a=e.substring(o,s)}const c=w(a),v=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=v/f;n+=i,r=s}else if(l==="["){let s=r+1;for(;s<e.length&&e[s]!=="]";){const a=e[s];if(C.test(a)){let c=s+1;for(;c<e.length&&(e[c]==="'"||e[c]===",");)c++;s=c}else s++}if(s<e.length&&e[s]==="]"){s++;let a="";if(s<e.length&&(e[s]==="/"||/\d/.test(e[s]))){const o=s;for(e[s]==="/"&&s++;s<e.length&&/\d/.test(e[s]);)s++;if(s<e.length&&e[s]==="/")for(s++;s<e.length&&/\d/.test(e[s]);)s++;a=e.substring(o,s)}const c=w(a),v=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=v/f;n+=i}r=s}else r++}return n},X=e=>{const t=[],n=e.split(`
|
|
16
|
+
`),r=Ee(e);return n.forEach((l,s)=>{if(!(l.trim().startsWith("%")||N.test(l))&&l.includes("|")){let a=0;const c=l.split("|");let v=0;c.forEach((f,i)=>{if(i===c.length-1&&f.trim()==="")return;const o=f.trim();if(o.startsWith(":")||o.startsWith("[")||o===""){a+=f.length+1;return}const d=_e(o,r),h=r.meter.beatsPerMeasure;if(Math.abs(d-h)>.01){const m=l.indexOf(o,a),g=m+o.length;t.push({line:s,measureIndex:v,startCol:m,endCol:g,expected:h,actual:d,message:`Expected ${h} beats, got ${d.toFixed(2)}`})}v++,a+=f.length+1})}}),t},Be=({value:e,onChange:t})=>{const n=b.useRef(null),r=b.useRef(null),l=b.useRef(null),[s,a]=b.useState(null),c=L(e),v=I(e),f=b.useMemo(()=>X(e),[e]),{isOpen:i,suggestions:o,selectedIndex:d,position:h,handleKeyDown:T,selectSuggestion:m,handleMouseEnter:g}=q({value:e,textareaRef:n,onChange:t}),x=()=>{n.current&&r.current&&l.current&&(r.current.scrollTop=n.current.scrollTop,l.current.scrollTop=n.current.scrollTop)};return u.jsx("div",{className:"w-full h-full flex flex-col p-4",style:{backgroundColor:"#161616"},children:u.jsxs("div",{className:"w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden",style:{backgroundColor:"#1a1a1a"},children:[u.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[u.jsx("div",{ref:r,className:"overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",style:{backgroundColor:"#0f0f0f",minWidth:"2.5rem"},children:u.jsx("pre",{className:"m-0 pl-1 pr-3 py-4",children:c})}),u.jsxs("div",{className:"flex-1 relative",children:[u.jsx("div",{ref:l,className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"#1a1a1a",opacity:s?.3:1,transition:"opacity 0.2s"},children:u.jsx("pre",{className:"m-0",dangerouslySetInnerHTML:{__html:v}})}),s&&(()=>{const A=e.split(`
|
|
17
|
+
`),Z=(A[s.line]||"").substring(s.startCol,s.endCol),ee=I(Z);return u.jsx("div",{className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"transparent"},children:u.jsx("pre",{className:"m-0",children:A.map((E,_)=>{if(_===s.line){const te=E.substring(0,s.startCol),se=E.substring(s.endCol);return u.jsxs("div",{children:[u.jsx("span",{style:{opacity:0},children:te}),u.jsx("span",{className:"bg-amber-500/20 px-1 rounded",dangerouslySetInnerHTML:{__html:ee}}),u.jsx("span",{style:{opacity:0},children:se})]},_)}return u.jsx("div",{style:{opacity:0},children:E},_)})})})})(),u.jsx("textarea",{ref:n,className:"absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",style:{backgroundColor:"transparent",color:"transparent",caretColor:"#fff"},value:e,onChange:A=>t(A.target.value),onScroll:x,onKeyDown:T,spellCheck:!1,placeholder:"Type /header to insert template..."}),i&&u.jsx(J,{suggestions:o,selectedIndex:d,position:h,onSelect:m,onMouseEnter:g})]})]}),f.length>0&&u.jsxs("div",{className:"border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",style:{backgroundColor:"#0f0f0f",maxHeight:"8rem"},children:[u.jsxs("div",{className:"text-slate-500 mb-2 text-[10px] uppercase tracking-wide",children:["Validation Errors (",f.length,")"]}),f.map((A,S)=>u.jsxs("div",{className:"flex items-start gap-3 mb-2 last:mb-0 hover:bg-slate-800/30 px-2 py-1 rounded transition-colors cursor-pointer",onMouseEnter:()=>a(A),onMouseLeave:()=>a(null),children:[u.jsx("span",{className:"text-amber-500 shrink-0 mt-0.5",children:"⚠️"}),u.jsxs("div",{className:"flex-1 flex gap-2",children:[u.jsxs("span",{className:"text-cyan-400 shrink-0",children:["Ln ",A.line+1,", M",A.measureIndex+1,":"]}),u.jsx("span",{className:"text-amber-300",children:A.message})]})]},S))]})]})})},Ie=({value:e})=>{const t=b.useRef(null);return b.useEffect(()=>{t.current&&ne.renderAbc(t.current,e,{responsive:"resize",foregroundColor:"#ffffff",format:{titlefont:"serif 20"}})},[e]),u.jsx("div",{ref:t,className:"w-full abc-preview"})};exports.ABC_ACCIDENTAL_PATTERN=O;exports.ABC_ANNOTATION_PATTERN=P;exports.ABC_BAR_PATTERN=$;exports.ABC_BROKEN_RHYTHM_PATTERN=G;exports.ABC_CHORD_BRACKET_PATTERN=k;exports.ABC_CHORD_SYMBOL_PATTERN=H;exports.ABC_COMMANDS=Y;exports.ABC_COMMENT_PATTERN=Q;exports.ABC_DECORATION_PATTERN=K;exports.ABC_DURATION_PATTERN=R;exports.ABC_FIELD_PATTERN=N;exports.ABC_GRACE_NOTE_PATTERN=W;exports.ABC_INLINE_FIELD_PATTERN=V;exports.ABC_NOTE_PATTERN=C;exports.ABC_OCTAVE_PATTERN=M;exports.ABC_ORNAMENT_PATTERN=U;exports.ABC_REST_PATTERN=y;exports.ABC_SLUR_PATTERN=j;exports.ABC_SUGGESTIONS=z;exports.ABC_TIE_PATTERN=B;exports.ABC_TUPLET_PATTERN=D;exports.ABC_VOLTA_BRACKET_PATTERN=F;exports.AbcEditor=Be;exports.AbcPreview=Ie;exports.SuggestionList=J;exports.highlightAbc=I;exports.useAbcAutoComplete=q;exports.useLineNumbers=L;exports.validateAbc=X;
|
package/dist/abc-editor.es.js
CHANGED
|
@@ -758,7 +758,7 @@ K:C
|
|
|
758
758
|
} = yt({ value: t, textareaRef: s, onChange: e }), A = () => {
|
|
759
759
|
s.current && r.current && l.current && (r.current.scrollTop = s.current.scrollTop, l.current.scrollTop = s.current.scrollTop);
|
|
760
760
|
};
|
|
761
|
-
return /* @__PURE__ */ h("div", { className: "w-full
|
|
761
|
+
return /* @__PURE__ */ h("div", { className: "w-full h-full flex flex-col p-4", style: { backgroundColor: "#161616" }, children: /* @__PURE__ */ T("div", { className: "w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden", style: { backgroundColor: "#1a1a1a" }, children: [
|
|
762
762
|
/* @__PURE__ */ T("div", { className: "flex-1 flex overflow-hidden", children: [
|
|
763
763
|
/* @__PURE__ */ h(
|
|
764
764
|
"div",
|
|
@@ -880,7 +880,7 @@ K:C
|
|
|
880
880
|
}
|
|
881
881
|
)
|
|
882
882
|
] }) });
|
|
883
|
-
}, kt = ({
|
|
883
|
+
}, kt = ({ value: t }) => {
|
|
884
884
|
const e = I(null);
|
|
885
885
|
return B(() => {
|
|
886
886
|
e.current && K.renderAbc(e.current, t, {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
1
|
+
interface AbcPreviewProps {
|
|
2
|
+
value: string;
|
|
3
|
+
}
|
|
4
|
+
export declare const AbcPreview: ({ value }: AbcPreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
4
6
|
//# sourceMappingURL=AbcPreview.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AbcPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AbcPreview.tsx"],"names":[],"mappings":"AAGA,
|
|
1
|
+
{"version":3,"file":"AbcPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AbcPreview.tsx"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,GAAI,WAAW,eAAe,4CAgBpD,CAAC"}
|
package/package.json
CHANGED