diff --git a/src/editor-extension/RatingWidget/applySymbolState.ts b/src/editor-extension/RatingWidget/applySymbolState.ts
new file mode 100644
index 0000000..4039f3d
--- /dev/null
+++ b/src/editor-extension/RatingWidget/applySymbolState.ts
@@ -0,0 +1,10 @@
+/**
+ * Apply the appropriate CSS class to a symbol based on its state
+ */
+export function applySymbolState(span: HTMLElement, state: 'rated' | 'unrated' | 'normal'): void {
+  // Remove all state classes
+  span.classList.remove('interactive-rating-symbol--rated', 'interactive-rating-symbol--unrated', 'interactive-rating-symbol--normal');
+  
+  // Add the appropriate state class
+  span.classList.add(`interactive-rating-symbol--${state}`);
+}
\ No newline at end of file