Merge pull request #618 from terwer/dev

feat: support fold blocks - heading

Author: terwer

apps/app/assets/css/fold.styl

@@ -1,3 +1,12 @@
+.fold-block-wrapper
+  display: flex
+  align-items baseline
+.fold-inner
+  flex-basis: 100%  // 强制折叠内容占满一行
+  flex-shrink: 0    // 防止被压缩
+  margin-top: 10px  // 可选，增加上方间距
+  display: block    // 确保折叠内容作为块级元素显示
+
 /* 按钮样式 */
 .fold-block-toggle-button
   display inline-block
@@ -14,4 +23,7 @@
   &:hover
     color #666               /* 悬停时文字颜色变深 */
   &:active
-    color #444               /* 点击时文字颜色进一步变深 */
+    color #444               /* 点击时文字颜色进一步变深 */
+
+.protyle-wysiwyg div[fold="1"][data-type=NodeHeading]::before
+  display none

apps/app/components/static/content/Main.vue

@@ -49,6 +49,7 @@ const VNode = () =>
         :data-page-id="props.post.postid"
         :data-dataviews="JSON.stringify(props.post.dataViews)"
         :data-embedblocks="JSON.stringify(props.post.embedBlocks)"
+        :data-foldblocks="JSON.stringify(props.post.foldBlocks)"
       >
         <VNode />
       </div>

apps/app/plugins/011.fold.client.ts

@@ -7,38 +7,95 @@
  *  of this license document, but changing it is not allowed.
  */
 
+import { JsonUtil, StrUtil } from "zhi-common"
+
+const getFoldInner = (foldBlocksDatas: any, foldEl: any) => {
+  const foldBlockId = foldEl.getAttribute("data-node-id")
+
+  if (!foldBlockId || !foldBlocksDatas) {
+    return null
+  }
+
+  const foldBlock = foldBlocksDatas.foldBlockMap[foldBlockId]
+
+  if (!foldBlock) {
+    return null
+  }
+
+  return foldBlock
+}
+
 const addToggleFoldButton = (el: HTMLElement) => {
-  // 获取所有具有 fold="1" 属性的 div 元素
-  const divs = el.querySelectorAll("div[fold='1']")
+  // 从data-foldblocks取数据
+  const foldBlocksStr = el.getAttribute("data-foldblocks")
+  const foldBlocksDatas = JsonUtil.safeParse<any>(foldBlocksStr, {} as any)
 
+  // 获取所有具有 fold="1" 属性的 div 元素
+  const foldBlocks = el.querySelectorAll("div[fold='1']")
   // 遍历每个 div 元素，添加按钮并设置事件监听器
-  divs.forEach((div) => {
-    // 创建 div 元素作为按钮
+  foldBlocks.forEach((foldEl) => {
+    const foldBlockId = foldEl.getAttribute("data-node-id")
+
+    // 创建切换按钮
     const toggleButton = document.createElement("div")
     toggleButton.textContent = "+展开" // 默认文本为 +展开
     toggleButton.classList.add("fold-block-toggle-button") // 使用 fold-block- 前缀
 
     // 获取 div 的父元素
-    const parent = div.parentNode
-    if (!parent) { return }
+    const parent = foldEl.parentNode
+    if (!parent) {
+      return
+    }
 
     // 创建一个容器包裹按钮和原始元素，避免破坏 DOM 结构
     const wrapper = document.createElement("div")
-    wrapper.style.display = "flex" // 横向排列
-    wrapper.style.alignItems = "baseline"
-    parent.insertBefore(wrapper, div)
+    wrapper.classList.add("fold-block-wrapper")
+    // 标题不能 flex
+    if (foldEl.getAttribute("data-type") === "NodeHeading") {
+      wrapper.style.display = "block"
+    }
+
+    // 插入按钮和原始元素
+    parent.insertBefore(wrapper, foldEl)
     wrapper.appendChild(toggleButton)
-    wrapper.appendChild(div)
+    wrapper.appendChild(foldEl)
 
     // 为按钮添加点击事件
     toggleButton.addEventListener("click", () => {
-      // 如果 fold 属性是 "1"，则更改为 "0"
-      if (div.getAttribute("fold") === "1") {
-        div.setAttribute("fold", "0")
+      const isFolded = foldEl.getAttribute("fold") === "1"
+
+      // 如果当前是折叠状态
+      if (isFolded) {
+        foldEl.setAttribute("fold", "0")
         toggleButton.textContent = "-收起" // 切换按钮为 -收起
+
+        // 获取需要追加的 HTML 内容，可能为空
+        const newContent = getFoldInner(foldBlocksDatas, foldEl)
+        // 如果 newContent 有值，动态创建并插入内容
+        if (!StrUtil.isEmptyString(newContent)) {
+          // 用于存储动态追加的内容
+          const foldInner: HTMLElement | null = document.createElement("div")
+          foldInner.id = "fold-inner-" + foldBlockId
+          foldInner.innerHTML = newContent || "" // 即使是空内容，也插入空元素
+          foldInner.classList.add("fold-inner") // 为追加的内容添加特定的类名
+
+          // 获取 foldEl 的父元素
+          const parent = foldEl.parentNode
+          if (parent) {
+            // 将 foldInner 插入到 foldEl 的下一个兄弟元素位置
+            parent.insertBefore(foldInner, foldEl.nextSibling)
+          }
+        }
       } else {
-        div.setAttribute("fold", "1")
+        // 当前是展开状态
+        foldEl.setAttribute("fold", "1")
         toggleButton.textContent = "+展开" // 切换按钮为 +展开
+
+        // 展开状态时，删除动态追加的内容
+        const foldInner = foldEl.parentNode?.querySelector(`#fold-inner-${foldBlockId}`)
+        if (foldInner) {
+          foldEl.parentNode?.removeChild(foldInner)
+        }
       }
     })
   })
@@ -59,7 +116,6 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.directive("fold", {
     mounted (el, binding) {
       addToggleFoldButton(el)
-      logger.info("fold directive mounted")
     }
   })
 })

apps/siyuan/src/composables/useEmbedBlock.ts

@@ -25,6 +25,7 @@ const useEmbedBlock = () => {
 
   /**
    * 获取嵌入块的内容并返回结果对象
+   *
    * @param editorDom 编辑器的 DOM 字符串
    * @param parentDocId 父文档 ID
    * @returns 包含嵌入块数据的结果对象
@@ -58,7 +59,6 @@ const useEmbedBlock = () => {
             breadcrumb: false,
           })
 
-          debugger
           const resBlocks = res.blocks || []
           const content = resBlocks.map((block: { block: { content: string } }) => block.block.content).join("")
 

apps/siyuan/src/composables/useFold.ts

@@ -0,0 +1,97 @@
+/*
+ *            GNU GENERAL PUBLIC LICENSE
+ *               Version 3, 29 June 2007
+ *
+ *  Copyright (C) 2025 Terwer, Inc. <https://terwer.space/>
+ *  Everyone is permitted to copy and distribute verbatim copies
+ *  of this license document, but changing it is not allowed.
+ */
+
+import * as cheerio from "cheerio"
+import {createAppLogger} from "../utils/appLogger.ts"
+import {useSiyuanApi} from "./useSiyuanApi.ts"
+
+/**
+ * 获取折叠块的内容
+ *
+ * @author
+ * @since 6.1.0
+ * @returns 折叠块相关内容
+ */
+const useFold = () => {
+  const logger = createAppLogger("use-fold")
+  const {kernelApi} = useSiyuanApi()
+
+  /**
+   * 获取折叠块的内容并返回结果对象
+   *
+   * @param editorDom 编辑器的 DOM 字符串
+   * @returns 包含折叠块数据的结果对象
+   */
+  const getFoldBlocks = async (editorDom: string) => {
+    const $ = cheerio.load(editorDom)
+    const foldBlocks = $("div[fold='1']")
+
+    const results = {
+      foldBlockMap: {} as Record<string, string>, // 折叠块内容映射
+      order: [] as string[], // 折叠块的顺序
+    }
+
+    await Promise.all(
+      foldBlocks.map(async (_, foldBlock) => {
+        const foldBlockId = $(foldBlock).attr("data-node-id")
+
+        if (!foldBlockId || $(foldBlock).attr("data-type") !== "NodeHeading") {
+          logger.warn("折叠块缺少必要的属性或不是 NodeHeading 类型")
+          return
+        }
+
+        // 从 document 中读取 session
+        const protyleElement = document.querySelector("div.protyle")
+        const session = protyleElement?.getAttribute("data-id")
+        const app = Math.random().toString(36).substring(8)
+
+        if (!session) {
+          logger.error("未找到有效的 session 数据")
+          return null
+        }
+
+        // 请求折叠块
+        try {
+          const res = await kernelApi.siyuanRequest("/api/transactions", {
+            session,
+            app,
+            transactions: [
+              {
+                doOperations: [{action: "unfoldHeading", id: foldBlockId}],
+                undoOperations: [{action: "foldHeading", id: foldBlockId}],
+              },
+            ],
+            reqId: Date.now(),
+          })
+
+          // 提取 doOperations 的 retData
+          if (Array.isArray(res) && res.length > 0) {
+            const doOperations = res[0].doOperations || []
+            const operation = doOperations.find((op: any) => op.retData)
+            if (operation && operation.retData) {
+              results.foldBlockMap[foldBlockId] = operation.retData
+              results.order.push(foldBlockId)
+            }
+          }
+        } catch (error) {
+          logger.error(`请求折叠块失败，ID: ${foldBlockId}`, error)
+        }
+      }).get() // 转换为数组
+    )
+
+    logger.debug("get fold blocks success=>", results)
+    return results
+  }
+
+  return {
+    getFoldBlocks,
+  }
+}
+
+export {useFold}