feat: interactive hex color pills and DD-MM-YYYY date support

Author: VariableThe

README.md

@@ -14,7 +14,7 @@ Summon it with a hotkey. Jot. Dismiss. It stays out of your way until you need i
 - **Lives in the background** — no dock icon, no window chrome. Press your hotkey, it appears on whatever screen your mouse is on. Click away, it vanishes.
 - **Reactive math & variables** — define `/var x = 10`, write `x * 3 =`, get `30`. Change the variable, everything updates. Works across notes with `/globvar`.
 - **Inline AI** — type `/ai <prompt>`, press enter, get the answer inserted directly into your note. No sidebar, no context switch.
-- **Auto-highlights hex colors, dates, and times** — `#D97757` renders as a color pill. `2024-05-31` gets highlighted. Useful at a glance.
+- **Auto-highlights hex colors, dates, and times** — `#D97757` renders as a color pill. `31-05-2024` gets highlighted. Useful at a glance.
 - **Interactive Checkboxes** — Type `/check` to create an interactive checkbox that strikes through text when clicked.
 - **Tasks & Reminders** — Type `/task` followed by `@ 1d2h` to set a due date. Press `Cmd+T` to open a unified Tasks view that tracks all your pending items and due times.
 - **Tags & folders** — `!tagname` for tags, `/` in note titles for folders. Simple conventions, no UI overhead.

electron/main.ts

@@ -137,13 +137,13 @@ fs.writeFileSync(
 PaperCache automatically recognizes and highlights common formats so you can easily spot them in your notes.
 
 ## Colors
-Type any hex color, and it will be highlighted with a matching pill!
+Type any hex color, and it will be highlighted with a matching pill! You can click the small colored circle inside the pill to quickly copy the hex code to your clipboard.
 *Example use:* #D97757 or #3B82F6 or #10B981
 
 ## Dates & Times
 Dates and times are also highlighted to help you keep track of your schedule.
 *Example use:* 
-Meeting on 2024-05-31 at 14:30.
+Meeting on 31-05-2024 at 14:30.
 
 Next: [Tags](/file commands/tags.md)
 `,
@@ -177,7 +177,7 @@ If you want to set a deadline, just type \` @ \` followed by a time shorthand af
 *Example use:*
 /task Buy groceries @ 2h
 
-PaperCache understands shorthands like \`2d\`, \`3h45m\`, \`tmrw\`, or even exact dates like \`2024-12-31 15:00\`.
+PaperCache understands shorthands like \`2d\`, \`3h45m\`, \`tmrw\`, or even exact dates like \`31-12-2024 15:00\`.
 Once you set a task, press \`Cmd+T\` (or \`Ctrl+T\`) to open the Tasks Page and see everything that's due!
 Overdue tasks will automatically highlight in red.
 

src/App.css

@@ -516,7 +516,8 @@ body {
 
 /* Format Pills */
 .cm-color-pill {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   background-color: color-mix(in srgb, var(--pill-color) 15%, transparent);
   color: color-mix(in srgb, var(--pill-color) 80%, black);
   padding: 0px 6px;
@@ -528,6 +529,23 @@ body {
   border: 1px solid color-mix(in srgb, var(--pill-color) 30%, transparent);
 }
 
+@keyframes color-pill-flash {
+  0% {
+    background-color: var(--pill-color);
+    color: #fff;
+    border-color: var(--pill-color);
+  }
+  100% {
+    background-color: color-mix(in srgb, var(--pill-color) 15%, transparent);
+    color: color-mix(in srgb, var(--pill-color) 80%, black);
+    border-color: color-mix(in srgb, var(--pill-color) 30%, transparent);
+  }
+}
+
+.cm-color-pill.flash {
+  animation: color-pill-flash 0.5s ease-out;
+}
+
 .cm-color-highlight {
   color: color-mix(in srgb, var(--pill-color) 80%, black);
   background-color: color-mix(in srgb, var(--pill-color) 10%, transparent);

src/lib/editor/plugins.ts

@@ -8,6 +8,7 @@ import {
   VariableWidget,
   ReminderWidget,
   ContextWidget,
+  ColorWidget,
 } from './widgets'
 
 export const numberPlugin = ViewPlugin.fromClass(
@@ -244,10 +245,7 @@ export const hideMarkdownPlugin = ViewPlugin.fromClass(
             decos.push({
               from: start,
               to: end,
-              deco: Decoration.mark({
-                class: 'cm-color-pill',
-                attributes: { style: `--pill-color: ${match[0]}` },
-              }),
+              deco: Decoration.replace({ widget: new ColorWidget(match[0]) }),
             })
           } else {
             decos.push({
@@ -261,8 +259,8 @@ export const hideMarkdownPlugin = ViewPlugin.fromClass(
           }
         }
 
-        // Date Formats (YYYY-MM-DD)
-        const reDate = /\b\d{4}-\d{2}-\d{2}\b/g
+        // Date Formats (YYYY-MM-DD or DD-MM-YYYY)
+        const reDate = /\b(?:\d{4}-\d{2}-\d{2}|\d{2}-\d{2}-\d{4})\b/g
         while ((match = reDate.exec(text)) !== null) {
           const start = from + match.index
           const end = start + match[0].length

src/lib/editor/widgets.ts

@@ -104,6 +104,54 @@ export class VariableWidget extends WidgetType {
   }
 }
 
+export class ColorWidget extends WidgetType {
+  color: string
+  constructor(color: string) {
+    super()
+    this.color = color
+  }
+  eq(other: ColorWidget) {
+    return other.color === this.color
+  }
+  toDOM() {
+    const span = document.createElement('span')
+    span.className = 'cm-color-pill'
+    span.style.setProperty('--pill-color', this.color)
+
+    const circle = document.createElement('span')
+    circle.className = 'cm-color-circle'
+    circle.style.backgroundColor = this.color
+    circle.style.width = '10px'
+    circle.style.height = '10px'
+    circle.style.borderRadius = '50%'
+    circle.style.display = 'inline-block'
+    circle.style.marginRight = '4px'
+    circle.style.cursor = 'pointer'
+    circle.title = 'Copy hex code'
+
+    circle.onclick = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      navigator.clipboard.writeText(this.color)
+
+      span.classList.remove('flash')
+      void span.offsetWidth // Trigger reflow to restart animation if clicked quickly
+      span.classList.add('flash')
+
+      setTimeout(() => {
+        span.classList.remove('flash')
+      }, 500)
+    }
+
+    const text = document.createTextNode(this.color)
+
+    span.appendChild(circle)
+    span.appendChild(text)
+
+    return span
+  }
+}
+
 export class ReminderWidget extends WidgetType {
   checked: boolean
   overdue: boolean