feat: suport fold code in codemirror

README.md

@@ -1,3 +1,20 @@
-# Typora Plugin Example
+# Typora Plugin Code Folding
 
-This a plugin based on [typora-community-plugin](https://github.com/typora-community-plugin/typora-community-plugin) for [Typora](https://typora.io).
+English | [简体中文](./README.zh-CN.md)
+
+This a plugin based on [typora-community-plugin][core] for [Typora](https://typora.io).
+
+Make your codes foldable.
+
+## Preview
+
+![](./docs/assets/base.gif)
+
+## Install
+
+1. Install [typora-community-plugin][core]
+2. Open "Settings -> Plugin Marketplace" search "Code Folding" then install it.
+
+
+
+[core]: https://github.com/typora-community-plugin/typora-community-plugin

README.zh-CN.md

@@ -0,0 +1,20 @@
+# Typora Plugin Code Folding
+
+[English](./README.md) | 简体中文
+
+这是一个基于 [typora-community-plugin][core] 开发的，适用于 [Typora](https://typora.io) 的插件。
+
+令代码块中的代码可折叠。
+
+## 预览
+
+![](./docs/assets/base.gif)
+
+## 安装
+
+1. 安装 [typora-community-plugin][core]
+2. 在 “设置 -> 插件市场” 中搜索 “Code Folding” 并安装
+
+
+
+[core]: https://github.com/typora-community-plugin/typora-community-plugin

build.js

@@ -10,6 +10,8 @@ const IS_PROD = args.includes('--prod')
 const IS_DEV = !IS_PROD
 
 await fs.rm('./dist', { recursive: true, force: true })
+await fs.mkdir('./dist/addon/fold', { recursive: true })
+await fs.cp('./node_modules/codemirror/addon/fold', './dist/addon/fold', { recursive: true })
 
 await esbuild.build({
   entryPoints: ['src/main.ts'],

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "typora-plugin-example",
+  "name": "typora-community-plugin.code-folding",
   "version": "",
   "description": "",
   "type": "module",
@@ -23,9 +23,10 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@rollup/plugin-virtual": "^3.0.2",
+    "@types/codemirror": "^5",
     "@types/jquery": "3.3.1",
     "@types/node": "16.18.0",
-    "@types/typora": "npm:@typora-community-plugin/typora-types@^1.0.6",
+    "@types/typora": "npm:@typora-community-plugin/typora-types@^1.0.8",
     "@typora-community-plugin/core": "^2.0.0",
     "archiver": "^5.3.2",
     "esbuild": "^0.19.2",
@@ -37,5 +38,8 @@
     "sass": "^1.69.5",
     "tslib": "^2.6.2",
     "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "codemirror": "^5"
   }
 }

rollup.config.js

@@ -25,6 +25,8 @@ const overrided = {
 
 await fs.rm('./dist', { recursive: true, force: true })
 await fs.mkdir('./dist')
+await fs.mkdir('./dist/addon/fold', { recursive: true })
+await fs.cp('./node_modules/codemirror/addon/fold', './dist/addon/fold', { recursive: true })
 
 export default defineConfig({
   input: 'src/main.ts',

src/main.ts

@@ -1,14 +1,38 @@
-import './style.scss'
-import { Plugin } from '@typora-community-plugin/core'
+import 'codemirror/addon/fold/foldgutter.css'
+import { Plugin, decorate, path } from '@typora-community-plugin/core'
+import { editor } from 'typora'
 
 
 export default class extends Plugin {
 
   onload() {
-    alert('hello, typora')
+    this.registerScript('./addon/fold/foldcode.js')
+    this.registerScript('./addon/fold/foldgutter.js')
+    this.registerScript('./addon/fold/brace-fold.js')
+    this.registerScript('./addon/fold/xml-fold.js')
+    this.registerScript('./addon/fold/markdown-fold.js')
+    this.registerScript('./addon/fold/comment-fold.js')
+    this.registerScript('./addon/fold/indent-fold.js')
+
+    this.register(
+      decorate.returnValue(editor.fences, 'addCodeBlock', (_, cm) => {
+        const gutters = cm.getOption('gutters') ?? []
+        // @ts-ignore
+        cm.setOption('foldGutter', true)
+        cm.setOption('gutters', [...gutters, 'CodeMirror-foldgutter'])
+        return cm
+      }))
+  }
+
+  registerScript(url: string) {
+    this.register(this.importScript(url))
   }
 
-  onunload() {
-    // dispose resources, like events, processes...
+  importScript(url: string) {
+    const script = document.createElement('script')
+    script.dataset.by = this.manifest.id
+    script.src = path.join(this.manifest.dir!, url)
+    document.head.appendChild(script)
+    return () => script.remove()
   }
 }

src/manifest.json

@@ -1,11 +1,11 @@
 {
-  "id": "typora-community-plugin.example",
-  "name": "Example",
-  "description": "Example plugin for typora.",
+  "id": "typora-community-plugin.code-folding",
+  "name": "Code Folding",
+  "description": "Make your codes foldable.",
   "author": "plylrnsdy",
   "authorUrl": "https://github.com/plylrnsdy",
-  "repo": "typora-community-plugin/typora-plugin-example",
-  "version": "1.0.1",
+  "repo": "typora-community-plugin/typora-plugin-code-folding",
+  "version": "1.0.0",
   "minAppVersion": "1.5.0",
   "minCoreVersion": "2.0.0-beta.36",
   "platforms": ["win32", "linux", "darwin"]

test/vault/.typora/plugins.json

@@ -1,3 +1,3 @@
 {
-  "typora-community-plugin.example": true
+  "typora-community-plugin.code-folding": true
 }

test/vault/doc.md

@@ -1,4 +1,11 @@
-# Title
+# Code fold
+
+```javascript
+function add(a, b) {
+  if (typeof a !== 'number' || typeof b !== 'number') {
+    throw new TypeError()
+  }
+  return a + b
+}
+```
 
-Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-Adipisci nesciunt dolorem, blanditiis ea facilis, omnis dignissimos, eligendi architecto ducimus veniam necessitatibus illum assumenda id culpa officiis explicabo delectus sequi! Quas.

test/vault/doc2.md

@@ -0,0 +1,10 @@
+# doc2
+
+```javascript
+function add(a, b) {
+  if (typeof a !== 'number' || typeof b !== 'number') {
+    throw new TypeError()
+  }
+  return a + b
+}
+```