perf: update tiddler hover popup

oeyoews · Sep 25, 2024 · e36cb3d · e36cb3d
1 parent a9bc998
commit e36cb3d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## Changelog
 
+* `1.8.7`: 优化tiddler 弹窗预览样式
 * `1.8.6`: 修复tiddler 跳转弹窗问题
 * `1.8.5`: 支持中文`【【` 触发
 * `1.8.4`: 修复嵌入标题含有特殊引号的问题

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "license": "MIT",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "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": "1.8.6",
+  "version": "1.8.7",
   "description": "",
   "scripts": {
     "build": "cm-buildhelper src/tiddlywiki.ts"

diff --git a/src/tiddlywiki-codemirror-6/modules/extensions/wordhover.ts b/src/tiddlywiki-codemirror-6/modules/extensions/wordhover.ts
@@ -34,29 +34,29 @@ export const wordHover: Extension = hoverTooltip(
     if (!$tw.wiki.getTiddlerText(title)) return null;
     // if (title.startsWith('$:/')) return null;
 
-    let previewNode = document.createElement('div');
-    previewNode.className = 'cm-link-preview';
+    let dom = document.createElement('div');
+    dom.className = 'cm-link-preview';
     try {
       if (!$tw.wiki.getTiddlerText(title)) {
-        previewNode.textContent = 'Nothing ...';
+        dom.textContent = 'Nothing ...';
       } else {
         const innerHTML = $tw.wiki.renderTiddler('text/html', title);
-        previewNode.innerHTML = innerHTML;
+        dom.innerHTML = innerHTML;
       }
-      previewNode.addEventListener('pointermove', (e: PointerEvent) => {
+      dom.addEventListener('pointermove', (e: PointerEvent) => {
         let setCursor = false;
         if (e.ctrlKey && !setCursor) {
-          previewNode.style.cursor = 'pointer';
+          dom.style.cursor = 'pointer';
           setCursor = true;
         } else if (!e.ctrlKey) {
-          previewNode.style.cursor = 'text';
+          dom.style.cursor = 'text';
           setCursor = false;
         }
       });
-      previewNode.addEventListener('click', (e: MouseEvent) => {
+      dom.addEventListener('click', (e: MouseEvent) => {
         e.preventDefault();
         if (e.ctrlKey) {
-          previewNode.hidden = true; // 隐藏弹窗
+          dom.hidden = true; // 隐藏弹窗
           new $tw.Story().navigateTiddler(title);
         }
       });
@@ -68,10 +68,10 @@ export const wordHover: Extension = hoverTooltip(
       pos: start,
       end,
       strictSide: true,
-      // arrow: true,
+      arrow: true,
       above: true,
       create(view: EditorView) {
-        return { dom: previewNode };
+        return { dom };
       }
     };
   },
@@ -83,18 +83,26 @@ export const wordHover: Extension = hoverTooltip(
 
 const linkpreviewStyle = EditorView.baseTheme({
   '.cm-link-preview': {
-    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)',
     // cursor: 'pointer',
     overflow: 'auto',
+    minWidth: '200px',
     maxWidth: '400px',
     maxHeight: '400px',
     padding: '6px',
-    borderRadius: '8px',
+    // margin: '6px',
     zIndex: '1001 !important' // not work
   },
   '.cm-tooltip': {
-    border: 'none !important'
+    border: 'none !important',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)',
+    borderRadius: '5px'
   }
+  // '.cm-tooltip-arrow:before': {
+  //   borderTopColor: '#66b'
+  // },
+  // '.cm-tooltip-arrow:after': {
+  //   borderTopColor: 'transparent'
+  // }
 });
 
 export const linkHoverPreview: Extension[] = [wordHover, linkpreviewStyle];
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": "1.8.6",
+  "version": "1.8.7",
   "core-version": ">=5.3.3",
   "list": "readme usage"
 }