crib/counterplugin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix counter increment logic and improve button styling

Browse Source 
- Store currentValue in mutable variable to track state properly
- Counter now increments/decrements correctly beyond 1/-1
- Reduce button size from 24px to 16px
- Reduce font size and spacing for more compact appearance
- Improve vertical alignment with inline text
- Fix regex in updateSource to match new pattern

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sayuop
2025-11-26 10:38:35 +01:00
parent 634f219376
commit 0790105aeb
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
main.ts
View File

@@ -85,13 +85,15 @@ export default class CounterPlugin extends Plugin {
} }
createCounterElement( createCounterElement(
value: number, initialValue: number,
label: string, label: string,
context: MarkdownPostProcessorContext context: MarkdownPostProcessorContext
): HTMLElement { ): HTMLElement {
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'counter-container'; container.className = 'counter-container';
let currentValue = initialValue;
const minusButton = document.createElement('button'); const minusButton = document.createElement('button');
minusButton.className = 'counter-button counter-minus'; minusButton.className = 'counter-button counter-minus';
minusButton.textContent = '−'; minusButton.textContent = '−';
@@ -99,7 +101,7 @@ export default class CounterPlugin extends Plugin {
const counterDisplay = document.createElement('span'); const counterDisplay = document.createElement('span');
counterDisplay.className = 'counter-display'; counterDisplay.className = 'counter-display';
counterDisplay.textContent = value.toString(); counterDisplay.textContent = currentValue.toString();
const plusButton = document.createElement('button'); const plusButton = document.createElement('button');
plusButton.className = 'counter-button counter-plus'; plusButton.className = 'counter-button counter-plus';
@@ -116,7 +118,7 @@ export default class CounterPlugin extends Plugin {
const editor = view.editor; const editor = view.editor;
const content = editor.getValue(); const content = editor.getValue();
const counterRegex = /^~\s*\(\s*\d*\s*\)\s*(.*)$/gm; const counterRegex = /~\s*\(\s*\d*\s*\)\s*(.+)/gm;
let matchIndex = 0; let matchIndex = 0;
const newContent = content.replace(counterRegex, (match, capturedLabel) => { const newContent = content.replace(counterRegex, (match, capturedLabel) => {
@@ -134,15 +136,15 @@ export default class CounterPlugin extends Plugin {
}; };
minusButton.addEventListener('click', () => { minusButton.addEventListener('click', () => {
const newValue = value - 1; currentValue = currentValue - 1;
counterDisplay.textContent = newValue.toString(); counterDisplay.textContent = currentValue.toString();
updateSource(newValue); updateSource(currentValue);
}); });
plusButton.addEventListener('click', () => { plusButton.addEventListener('click', () => {
const newValue = value + 1; currentValue = currentValue + 1;
counterDisplay.textContent = newValue.toString(); counterDisplay.textContent = currentValue.toString();
updateSource(newValue); updateSource(currentValue);
}); });
container.appendChild(minusButton); container.appendChild(minusButton);

30
styles.css
View File

@@ -1,29 +1,31 @@
.counter-container { .counter-container {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 4px;
padding: 4px 8px; padding: 2px 6px;
background-color: var(--background-secondary); background-color: var(--background-secondary);
border-radius: 6px; border-radius: 4px;
margin: 4px 0; margin: 2px 0;
font-family: var(--font-interface); font-family: var(--font-interface);
vertical-align: middle;
} }
.counter-button { .counter-button {
width: 24px; width: 16px;
height: 24px; height: 16px;
padding: 0; padding: 0;
border: 1px solid var(--background-modifier-border); border: 1px solid var(--background-modifier-border);
background-color: var(--interactive-normal); background-color: var(--interactive-normal);
color: var(--text-normal); color: var(--text-normal);
border-radius: 4px; border-radius: 3px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 12px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease; transition: all 0.15s ease;
line-height: 1;
} }
.counter-button:hover { .counter-button:hover {
@@ -34,21 +36,21 @@
.counter-button:active { .counter-button:active {
background-color: var(--interactive-accent); background-color: var(--interactive-accent);
color: var(--text-on-accent); color: var(--text-on-accent);
transform: scale(0.95); transform: scale(0.9);
} }
.counter-display { .counter-display {
min-width: 32px; min-width: 20px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 13px;
color: var(--text-normal); color: var(--text-normal);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.counter-label { .counter-label {
margin-left: 4px; margin-left: 2px;
color: var(--text-muted); color: var(--text-normal);
font-size: 14px; font-size: 14px;
} }