From 4d7bd53231c79de165fa41548cd2097af67e178f Mon Sep 17 00:00:00 2001
From: David Sehnal <dsehnal@users.noreply.github.com>
Date: Tue, 26 Aug 2025 06:58:40 +0200
Subject: [PATCH] Additional markdown commands (#1630)

---
 .../plugin/managers/markdown-extensions.md    |  2 ++
 src/examples/mvs-stories/stories/animation.ts |  7 +++++--
 .../manager/markdown-extensions.ts            | 20 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/docs/docs/plugin/managers/markdown-extensions.md b/docs/docs/plugin/managers/markdown-extensions.md
index f307f7df8..8eac7dc23 100644
--- a/docs/docs/plugin/managers/markdown-extensions.md
+++ b/docs/docs/plugin/managers/markdown-extensions.md
@@ -20,8 +20,10 @@ Generally, the command should be URL encoded, e.g., `a b` => `a%20b` (in JS, `en
 
 - `center-camera` - Centers the camera
 - `apply-snapshot=key` - Loads snapshots with the provided key
+- `next-snapshot[=-1|1]` - Loads next/previous snapshot, the direction is optional and default to `1`
 - `play-snapshots` - Starts playback of state snapshots
 - `play-transition` - Plays an animation associated with the given snapshot
+- `stop-animation` - Stops currently playing animation
 - `focus-refs=ref1,ref2,...` - On click, focuses nodes with the provided refs
 - `highlight-refs=ref1,ref2,...` - On mouse over, highlights the provided refs
 - `query=...&lang=...&action=highlight,focus&focus-radius=...`
diff --git a/src/examples/mvs-stories/stories/animation.ts b/src/examples/mvs-stories/stories/animation.ts
index c749e9fed..c795a4261 100644
--- a/src/examples/mvs-stories/stories/animation.ts
+++ b/src/examples/mvs-stories/stories/animation.ts
@@ -24,8 +24,11 @@ const Steps = [
         description: `### Molecular Animation
 A story showcasing MolViewSpec animation capabilities.
 
-[🔄 Replay Intro](!play-transition)
-[⏵ Play Snapshots](!play-snapshots)
+[\[**🔄 Replay Intro**\]](!play-transition)
+[\[**⏵ Play Snapshots**\]](!play-snapshots)
+[\[**⏹ Stop Animation**\]](!stop-animation)
+
+[\[**➡️ Next Snapshot**\]](!next-snapshot)
 
 `,
         linger_duration_ms: 2000,
diff --git a/src/mol-plugin-state/manager/markdown-extensions.ts b/src/mol-plugin-state/manager/markdown-extensions.ts
index fa50562e6..6e0948f2d 100644
--- a/src/mol-plugin-state/manager/markdown-extensions.ts
+++ b/src/mol-plugin-state/manager/markdown-extensions.ts
@@ -47,6 +47,17 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
             manager.plugin.managers.snapshot.applyKey(key);
         }
     },
+    {
+        name: 'next-snapshot',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('next-snapshot' in args)) return;
+            let dir: -1 | 1 = (+args['next-snapshot'] || 1) as -1 | 1;
+            if (!dir) return;
+            if (dir < 0) dir = -1;
+            else dir = 1;
+            manager.plugin.managers.snapshot.applyNext(dir);
+        }
+    },
     {
         name: 'focus-refs',
         execute: ({ event, args, manager }) => {
@@ -206,7 +217,14 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
             if (event !== 'click' || !('play-snapshots' in args)) return;
             manager.plugin.managers.snapshot.play({ restart: true });
         }
-    }
+    },
+    {
+        name: 'stop-animation',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('stop-animation' in args)) return;
+            manager.plugin.managers.snapshot.stop();
+        }
+    },
 ];
 
 export class MarkdownExtensionManager {