feat: update clickable icon style on hover

oeyoews · Oct 16, 2024 · e6b12e1 · e6b12e1
1 parent cd4875f
commit e6b12e1
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 <h2>V3</h2>
 
+* `3.5.2`: update clickable icon style on hover
 * `3.5.1`: tag completion better for http link
 * `3.5.1`: update setting page modal by command
 * `3.5.0`: move codemirror config page to tiddlywiki settings tab

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "license": "MIT",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "packageManager": "pnpm@9.0.6",
   "scripts": {
     "update:config": " pnpm ts-node scripts/generateConfig.ts",

diff --git a/packages/lang-tiddlywiki/package.json b/packages/lang-tiddlywiki/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lang-tiddlywiki",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "",
   "scripts": {
     "build": "cm-buildhelper src/tiddlywiki.ts"

diff --git a/src/tiddlywiki-codemirror-6/modules/extensions/tidExt.ts b/src/tiddlywiki-codemirror-6/modules/extensions/tidExt.ts
@@ -9,6 +9,7 @@ import cm6 from '@/cm6/config';
 import createViewPlugin from '@/cm6/utils/createViewPlugin';
 import { useSound } from '@/cm6/utils/capitalize';
 
+// add clickable icon
 class CustomLink extends WidgetType {
   constructor(state) {
     super();
@@ -26,9 +27,7 @@ class CustomLink extends WidgetType {
     const wrapper = document.createElement('a');
     const title = this.state.title;
     wrapper.textContent = cm6['clickable-icon']() || ' 🔗';
-    wrapper.className = 'cm-link';
-    wrapper.style.cursor = 'pointer';
-    wrapper.style.userSelect = 'none';
+    wrapper.className = 'cm-tiddler-link';
     wrapper.title = title;
     wrapper.onclick = (e: MouseEvent) => {
       e.preventDefault();
@@ -62,4 +61,20 @@ const customLinkDecorator = new MatchDecorator({
   }
 });
 
-export const tidExt = createViewPlugin(customLinkDecorator);
+export const tidExt = [
+  createViewPlugin(customLinkDecorator),
+
+  EditorView.baseTheme({
+    '.cm-tiddler-link': {
+      cursor: 'pointer',
+      'user-select': 'none',
+      'text-decoration': 'none',
+      transition: 'all 0.2s ease',
+      scale: '0.8',
+      display: 'line-block'
+    },
+    '.cm-tiddler-link:hover': {
+      scale: '1'
+    }
+  })
+];
diff --git a/src/tiddlywiki-codemirror-6/plugin.info b/src/tiddlywiki-codemirror-6/plugin.info
@@ -2,7 +2,7 @@
   "title": "$:/plugins/oeyoews/tiddlywiki-codemirror-6",
   "name": "CodeMirror6",
   "description": "CodeMirror 6 editor",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "core-version": ">=5.3.4",
   "list": "readme settings changelog ",
   "stability": "STABILITY_2_STABLE"