Add hint preview, fix hint logic

Gk0Wk · Sep 4, 2021 · 6341596 · 6341596
1 parent 260a5c7
commit 6341596
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 61 deletions.
diff --git a/.github/workflows/tiddlywiki-plugin-build.yml b/.github/workflows/tiddlywiki-plugin-build.yml
@@ -45,10 +45,9 @@ jobs:
 
       - name: Upload to Release
         uses: svenstaro/upload-release-action@v2
-        if: startsWith(github.ref, 'refs/tags/')
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: dist/*
           tag: ${{ github.ref }}
           overwrite: true
-          file_glob: true
+          file_glob: true
diff --git a/README.md b/README.md
@@ -2,15 +2,15 @@
 
 Adds Syntax Highlighting for TiddlyWiki5 tiddlers (`text/vnd.tiddlywiki`) to the CodeMirror, along with some other useful editor addon (wikilink hint, macro hint, etc.). Now is under development.
 
-为 TiddlyWiki 的 CodeMirror 编辑器添加 TiddlyWiki5(`text/vnd.tiddlywiki`)语法高亮，同时还有其他有用的编辑器插件(如 Wiki 链接自动提示、宏提示等)，以及可以打开的链接。现在正在开发中。
+为 TiddlyWiki 的 CodeMirror 编辑器添加 TiddlyWiki5(`text/vnd.tiddlywiki`)语法高亮，同时还有其他有用的编辑器扩展(如 Wiki 链接自动提示、宏提示等)，以及可以打开的链接。现在正在开发中。
 
 [> English Readme <](https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/blob/main/README_en.md)
 
 ---
 
 ## 插件说明
 
-增加 [CodeMirror](http://codemirror.net) 对 TiddlyWiki5 语法高亮的支持，所有 MIME 类型留空或者为`text/vnd.tiddlywiki`的 tiddler 都会有高亮。同时支持像`VSCode`那样在打字时实时进行代码补全提示(目前仅实现了 WikiLink 补全)，且**不需要**用`Ctrl+Space`激活。
+增加 [CodeMirror](http://codemirror.net) 对 TiddlyWiki5 语法高亮的支持，所有 MIME 类型留空或者为`text/vnd.tiddlywiki`的 tiddler 都会有高亮。同时支持像`VSCode`那样在打字时实时进行代码补全提示+预览(目前仅实现了 WikiLink 补全)，且**不需要**用<kbd>Ctrl</kbd>+<kbd>Space</kbd>激活。
 
 插件还在开发中，如有任何建议或者 bug 请直接提 Issue。
 
@@ -43,19 +43,23 @@ TiddlyWiki:
 注意：这些主题有些是我自己装的，如感兴趣换主题，请阅读 TiddlyWiki 的 CodeMirror 的 README。
 
 <details>
-<summary>WikiLink自动补全提示</summary>
+<summary>WikiLink实时补全提示+预览</summary>
 
 ![wikilink-hint](media/wikilink-hint.gif)
 
+在预览打开的情况下：
+
+![hint-preview](media/hint-preview.jpg)
+
 </details>
 
 <details>
 <summary>可点击的链接</summary>
 
 ![wikilink-hint](media/clickable-link.gif)
 
-- 对于 macOS 用户，`cmd` + `鼠标左键` 可以打开 tiddler 或者外部 url。
-- 对于非 macOS 用户，`ctrl` + `鼠标左键` 可以打开 tiddler 或者外部 url。
+- 对于 macOS 用户，<kbd>cmd</kbd> + <kbd>鼠标左键</kbd> 可以打开 tiddler 或者外部 url。
+- 对于非 macOS 用户，<kbd>ctrl</kbd> + <kbd>鼠标左键</kbd> 可以打开 tiddler 或者外部 url。
 
 </details>
 
@@ -74,6 +78,8 @@ TiddlyWiki:
 - [x] 代码块内的语法高亮与缩进。
 - [x] LaTeX 公式高亮与缩进。
 - [x] 自动补全内部链接的 tiddler 名称。
+- [x] 可点击的URL与WikiLink。
+- [x] 补全提示的预览框。
 - [ ] 其他代码提示。
 - [ ] 代码错误检查。
 - [ ] 鼠标悬在 LaTeX 代码上方能够进行公式预览。
diff --git a/README_en.md b/README_en.md
@@ -8,7 +8,7 @@ Adds Syntax Highlighting for TiddlyWiki5 tiddlers (`text/vnd.tiddlywiki`) to the
 
 ## Plugin description
 
-Add [CodeMirror](http://codemirror.net) support for TiddlyWiki5 syntax highlighting, all tiddlers with MIME type left blank or `text/vnd.tiddlywiki` will be highlighted. Also supports real-time code completion hints like `VSCode` while typing (currently only WikiLink completion is implemented) and **no need** to activate with `Ctrl+Space`.
+Add [CodeMirror](http://codemirror.net) support for TiddlyWiki5 syntax highlighting, all tiddlers with MIME type left blank or `text/vnd.tiddlywiki` will be highlighted. Also supports real-time code completion hints + preview like `VSCode` while typing (currently only WikiLink completion is implemented) and **no need** to activate with <kbd>Ctrl</kbd>+<kbd>Space</kbd>.
 
 Plugin is still under development, if you have any suggestions or bugs, please directly mention Issues.
 
@@ -41,19 +41,23 @@ TiddlyWiki:
 Note: Some of these themes are installed by myself, if you are interested in changing the theme, please read TiddlyWiki's CodeMirror's README.
 
 <details>
-<summary>WikiLink Auto Hint</summary>
+<summary>WikiLink Realtime Hint+Preview</summary>
 
 ![wikilink-hint](media/wikilink-hint.gif)
 
+With hint-preview opened：
+
+![hint-preview](media/hint-preview.jpg)
+
 </details>
 
 <details>
 <summary>Clickable links</summary>
 
 ![wikilink-hint](media/clickable-link.gif)
 
-- For macOS users，`cmd` + `LeftClick` to open tiddler or external url.
-- For other users，`ctrl` + `LeftClick` to open tiddler or external url.
+- For macOS users，<kbd>cmd</kbd> + <kbd>LeftClick</kbd> to open tiddler or external url.
+- For other users，<kbd>ctrl</kbd> + <kbd>LeftClick</kbd> to open tiddler or external url.
 
 </details>
 
@@ -72,6 +76,8 @@ This plugin is also based on [TW5-CodeMirror-Plus](https://github.com/adithya-ba
 - [x] Syntax highlighting and indentation within code blocks.
 - [x] LaTeX formula highlighting and indentation.
 - [x] WikiLink AutoHint.
+- [x] Clickable URLs and WikiLinks.
+- [x] Preview for hint.
 - [ ] Other code hints.
 - [ ] Code error checking.
 - [ ] Mouse hovering over LaTeX code enables formula preview.
diff --git a/build.json b/build.json
@@ -1,12 +1,12 @@
 {
     "plugin.info": {
-        "version": "0.0.5",
+        "version": "0.0.6",
         "type": "application/json",
         "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5",
         "plugin-type": "plugin",
         "parent-plugin": "$:/plugins/tiddlywiki/codemirror",
         "name": "CodeMirror Mode TiddlyWiki5",
-        "list": "readme",
+        "list": "readme ControlPanel",
         "description": "TiddlyWiki5 highlighting mode for CodeMirror",
         "dependents": ["$:/plugins/tiddlywiki/codemirror-autocomplete"]
     },
@@ -60,6 +60,30 @@
                 "title": "$:/plugins/tiddlywiki/codemirror/addon/other/clickable-link.js",
                 "module-type": "codemirror"
             }
+        },
+        {
+            "src": "ControlPanel.tw5",
+            "fields": {
+                "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/ControlPanel"
+            }
+        },
+        {
+            "text": "true",
+            "fields": {
+                "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/hint-preview"
+            }
+        },
+        {
+            "text": "true",
+            "fields": {
+                "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/clickable-link"
+            }
+        },
+        {
+            "text": "true",
+            "fields": {
+                "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/realtime-hint"
+            }
         }
     ]
 }
diff --git a/build.py b/build.py
@@ -25,8 +25,9 @@ def gen_plugin_name(build_info):
     :return: Output name of plugin
     :rtype: str
     """
-    return re.sub('[^A-Za-z0-9_]', '', build_info[PLUGIN_INFO_KEY]
-                  ['name']) + '-' + build_info[PLUGIN_INFO_KEY]['version']
+    return re.sub('[^A-Za-z0-9_-]+', '-',
+                  build_info[PLUGIN_INFO_KEY]['title'].split(
+                      '/')[-1]) + '-' + build_info[PLUGIN_INFO_KEY]['version']
 
 
 def minify_source_code(build_info):
@@ -38,6 +39,8 @@ def minify_source_code(build_info):
     :rtype: string of updated build.json
     """
     for tiddler in build_info['tiddlers']:
+        if 'src' not in tiddler:
+            continue
         snamepath, type_ = os.path.splitext(tiddler['src'])
         spath, sname = os.path.split(snamepath)
         type_ = type_.lower()
@@ -72,12 +75,15 @@ def build_json_plugin(build_info):
     tiddlers = {}
     for tiddler_ in build_info['tiddlers']:
         tiddler = tiddler_['fields']
-        file_path = os.path.join(SRC_DIR, tiddler_['src'])
-        if os.path.exists(file_path) and os.path.isfile(file_path):
-            with open(file_path, 'r') as ffp:
-                tiddler['text'] = ffp.read()
+        if 'src' in tiddler_:
+            file_path = os.path.join(SRC_DIR, tiddler_['src'])
+            if os.path.exists(file_path) and os.path.isfile(file_path):
+                with open(file_path, 'r') as ffp:
+                    tiddler['text'] = ffp.read()
+            else:
+                tiddler['text'] = ''
         else:
-            tiddler['text'] = ''
+            tiddler['text'] = tiddler_['text'] if 'text' in tiddler_ else ''
         tiddlers[tiddler['title']] = tiddler
     plugin = build_info[PLUGIN_INFO_KEY]
     plugin['text'] = json.dumps({'tiddlers': tiddlers})
@@ -93,28 +99,42 @@ def build_node_plugin(build_info):
     :param build_info: JSON object of build.json
     :type build_info: object
     """
-    os.makedirs(os.path.join(DIST_DIR, 'node'), exist_ok=True)
-    with open(os.path.join(DIST_DIR, 'node', PLUGIN_INFO_KEY), 'w') as ffp:
+    NODE_DIST = os.path.join(
+        DIST_DIR, 'node',
+        re.sub(
+            '[^A-Za-z0-9_-]+',
+            '-',
+            build_info[PLUGIN_INFO_KEY]['title'].split('/')[-2],
+        ), build_info[PLUGIN_INFO_KEY]['title'].split('/')[-1])
+
+    os.makedirs(NODE_DIST, exist_ok=True)
+    with open(os.path.join(NODE_DIST, 'plugin.info'), 'w') as ffp:
         ffp.write(json.dumps(build_info[PLUGIN_INFO_KEY], indent=4))
     for tiddler in build_info['tiddlers']:
-        src_path = os.path.join(SRC_DIR, tiddler['src'])
-        if not os.path.exists(src_path) or not os.path.isfile(src_path):
-            continue
         sub_dist_path = tiddler['dist'] if 'dist' in tiddler else tiddler[
             'fields']['title'].split('/', 4)[-1]
-        dist_path = os.path.join(DIST_DIR, 'node', sub_dist_path)
+        dist_path = os.path.join(NODE_DIST, sub_dist_path)
         os.makedirs(os.path.split(dist_path)[0], exist_ok=True)
-        shutil.copyfile(src_path, dist_path)
-        del tiddler['src']
+
+        if 'src' in tiddler:
+            src_path = os.path.join(SRC_DIR, tiddler['src'])
+            if not os.path.exists(src_path) or not os.path.isfile(src_path):
+                with open(dist_path, 'w') as ffp:
+                    ffp.write('')
+            shutil.copyfile(src_path, dist_path)
+            del tiddler['src']
+        else:
+            with open(dist_path, 'w') as ffp:
+                ffp.write(tiddler['text'] if 'text' in tiddler else '')
+            if 'text' in tiddler:
+                del tiddler['text']
+
         if 'dist' in tiddler:
             del tiddler['dist']
         tiddler['file'] = sub_dist_path
-    with open(os.path.join(DIST_DIR, 'node', 'tiddlywiki.files'), 'w') as ffp:
+    with open(os.path.join(NODE_DIST, 'tiddlywiki.files'), 'w') as ffp:
         ffp.write(json.dumps({'tiddlers': build_info['tiddlers']}, indent=4))
-    shutil.make_archive(os.path.join(
-        DIST_DIR,
-        gen_plugin_name(build_info),
-    ),
+    shutil.make_archive(os.path.join(DIST_DIR, gen_plugin_name(build_info)),
                         format="zip",
                         root_dir=os.path.join(DIST_DIR, 'node'))
     shutil.rmtree(os.path.join(DIST_DIR, 'node'))

diff --git a/media/hint-preview.jpg b/media/hint-preview.jpg
diff --git a/src/ControlPanel.tw5 b/src/ControlPanel.tw5
@@ -0,0 +1,27 @@
+!! Realtime-hint when typing | 实时代码补全
+
+Real-time code completion hints like VSCode while typing (currently only ~WikiLink completion is implemented) and no need to activate with <kbd>Ctrl</kbd>+<kbd>Space</kbd>.
+
+无需<kbd>Ctrl</kbd>+<kbd>Space</kbd>，像VSCode一样，在输入时实时进行补全提示(现只支持~WikiLink)。
+
+: <$checkbox tiddler="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/realtime-hint" field="text" checked="true" unchecked="false" default="true"> <$reveal type="match" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/realtime-hint" text="true">Realtime-hint is on | 实时代码补全已开启</$reveal><$reveal type="nomatch" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/realtime-hint" text="true">Realtime-hint is off | 实时代码补全已关闭</$reveal></$checkbox>
+
+---
+
+!! Clickable links | 可点击的链接
+
+Whethere ~WikiLinks and URLs are clickable.
+
+~WikiLinks和URL是否可以点击。
+
+: <$checkbox tiddler="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/clickable-link" field="text" checked="true" unchecked="false" default="true"> <$reveal type="match" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/clickable-link" text="true">Clickable links is on | 可点击链接已开启</$reveal><$reveal type="nomatch" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/clickable-link" text="true">Clickable links is off | 可点击链接已关闭</$reveal></$checkbox>
+
+---
+
+!! Hint preview | 补全时预览
+
+When auto-completion is performed, a small document/preview box pops up to the right of the completion box based on the selected suggestion entry.
+
+自动补全时，根据所选建议条目，在补全框右侧弹出小的文档/预览框。
+
+: <$checkbox tiddler="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/hint-preview" field="text" checked="true" unchecked="false" default="true"> <$reveal type="match" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/hint-preview" text="true">Hint preview is on | 补全时预览已开启</$reveal><$reveal type="nomatch" state="$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/hint-preview" text="true">Hint preview is off | 补全时预览已关闭</$reveal></$checkbox>
diff --git a/src/clickable-link.js b/src/clickable-link.js
@@ -12,9 +12,10 @@
     var functionKey = /macintosh|mac os x/i.test(navigator.userAgent) ? 'metaKey' : 'ctrlKey';
     // 有新的editor实例创建，就Hook一下
     CodeMirror.defineInitHook(function(editor) {
-        // 当光标移动(输入、删除、光标移动)时进行补全
         editor.on("mousedown", function(cm, event) {
             if (event[functionKey]) {
+                if ($tw.wiki.getTiddlerText('$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/config/clickable-link').toLowerCase() !== "true")
+                    return;
                 if (event.target.classList.contains("cm-externallink")) {
                     window.open(event.target.innerText);
                 } else if (event.target.classList.contains("cm-internallink")) {

diff --git a/src/style.css b/src/style.css
@@ -3,6 +3,17 @@
     z-index: 800 !important;
 }
 
+.CodeMirror-hint {
+    width: 400px !important;
+}
+
+.CodeMirror-hints-append {
+    max-height: 20em !important;
+    width: 300px !important;
+    color: black;
+    resize: both;
+}
+
 span.cm-underlined {
     text-decoration-line: underline;
 }
@@ -64,10 +75,15 @@ span.cm-h6 {
 }
 
 span.cm-link {
-    font-weight: 600;
     cursor: pointer;
 }
 
+span.cm-internallink,
+span.cm-externallink {
+    cursor: pointer;
+    font-weight: 800;
+}
+
 span.cm-internallink {
     text-decoration: none;
 }