react: add staccato toggle

Author: fa-sharp

packages/react/src/components/editor/EditorControls.tsx

@@ -1,4 +1,4 @@
-import { Accidental, Rhythm } from "@abc-editor/core";
+import { Accidental, Decoration, Rhythm } from "@abc-editor/core";
 import clsx from "clsx";
 import { useEditorContext } from "../../context/EditorContext";
 import EditorControlIcon from "./EditorControlIcon";
@@ -14,6 +14,7 @@ export default function EditorControls() {
     onNewLine,
     onChangeAccidental,
     onToggleBeaming,
+    onToggleDecoration,
     onToggleTie,
     history,
     onUndo,
@@ -279,6 +280,22 @@ export default function EditorControls() {
         >
           <EditorControlIcon icon="natural" size={iconSize} />
         </button>
+        <button
+          role="switch"
+          title="Toggle staccato"
+          aria-checked={selectedNote?.data?.decorations?.includes(
+            Decoration.Staccato,
+          )}
+          className={clsx(styles.iconButton, {
+            [styles.selected]: selectedNote?.data?.decorations?.includes(
+              Decoration.Staccato,
+            ),
+          })}
+          disabled={!selectedNote?.data || selectedNote.data.rest}
+          onClick={() => onToggleDecoration(Decoration.Staccato)}
+        >
+          <EditorControlIcon icon="dot" size={iconSize} />
+        </button>
         <button
           title="Toggle tied note"
           role="switch"

packages/react/src/context/EditorContext.ts

@@ -1,24 +1,25 @@
 import {
-    Accidental,
-    EditorCommandState,
-    EditorState,
-    Rhythm,
-    type SelectionState,
-    editorCommandReducer,
-    setupKeyboardListener,
-    setupMIDIListener,
-    setupStaffMouseListeners,
+  Accidental,
+  Decoration,
+  EditorCommandState,
+  EditorState,
+  Rhythm,
+  type SelectionState,
+  editorCommandReducer,
+  setupKeyboardListener,
+  setupMIDIListener,
+  setupStaffMouseListeners,
 } from "@abc-editor/core";
 import type { AbcVisualParams, TuneObject } from "abcjs";
 import { renderAbc } from "abcjs";
 import { createProvider } from "puro";
 import {
-    useCallback,
-    useContext,
-    useEffect,
-    useReducer,
-    useRef,
-    useState,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
 } from "react";
 import { EditorProps } from "../components/editor/Editor";
 
@@ -215,6 +216,11 @@ const useEditor = ({
     setAbc(editorState.current.abc);
   }, []);
 
+  const onToggleDecoration = useCallback((decoration: Decoration) => {
+    editorState.current.toggleDecoration(decoration);
+    setAbc(editorState.current.abc);
+  }, []);
+
   const onToggleTie = useCallback(() => {
     editorState.current.toggleTie();
     setAbc(editorState.current.abc);
@@ -318,6 +324,7 @@ const useEditor = ({
     onNewLine,
     onChangeAccidental,
     onToggleBeaming,
+    onToggleDecoration,
     onToggleTie,
     onUndo,
     onRedo,