feat: 去除单元格内标签或属性文本

feat #6
etchnight · Mar 5, 2024 · 843def5 · 843def5
1 parent 4706f14
commit 843def5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@
   - 属性标识
     - 指定标签所在块，如含有`#作者#`的块
     - 概念标签的子标签所在块，如含有`#书籍/作者#`的块
-    - 含有指定分隔符号所在块，如以`作者：：`开头的块
+    - 含有指定分隔符号所在块，如以`作者：：`开头的块 ⚠️ 分隔符号不能是`/`
   - ⚠️ 支持多级表头，如`概念1/属性1/子属性2`，但是并不推荐这么做，因为非叶子节点（如`概念1/属性1`）所属内容将不会在表格中渲染
   - ⚠️ 属性所在块应为`概念`所在块的后代块
   - ⚠️ 不在代码块、数学公式块等非段落块搜寻属性标识，请作为容器块的子块

diff --git a/lib/js-utility-function b/lib/js-utility-function
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -26,10 +26,18 @@ export interface Data {
   children?: Data[]; //
   [prop: string]: string | Data[];
 }
+/**
+ * - value 用来跟body部分进行匹配
+ * - label 显示的名称
+ * - children
+ * - path
+ * - splitFlag 分隔符号，后序处理用
+ */
 export interface Head {
   value: string; //用来跟body部分进行匹配
   label: string; //显示的名称
   children: Head[];
   path: string[];
+  splitFlag: string; 
 }
 </script>
diff --git a/src/components/TableColumn.vue b/src/components/TableColumn.vue
@@ -6,14 +6,18 @@
     header-align="center"
     v-if="props.child.children.length == 0"
   >
+    <!--单元格内容-->
     <template #default="scope">
       <div v-if="scope.row[props.child.value]">
         <el-link
           type="info"
           :href="`siyuan://blocks/` + scope.row[props.child.value]"
           :icon="Link"
         />
-        <protyle :id="scope.row[props.child.value]"></protyle>
+        <protyle
+          :id="scope.row[props.child.value]"
+          :removeContent="props.child"
+        ></protyle>
       </div>
     </template>
   </el-table-column>
@@ -24,6 +28,7 @@
     resizable="true"
     header-align="center"
   >
+    <!--树形结构-->
     <TableColumn
       v-for="descendant of props.child.children"
       :child="descendant"
@@ -32,6 +37,8 @@
 </template>
 <script lang="ts" setup>
 import protyle from "./protyle.vue";
+//import { ref } from "vue";
+//import { TreeTools } from "../../lib/js-utility-function/src/tree";
 import { Link } from "@element-plus/icons-vue";
 import { Head } from "./Table.vue";
 const props = defineProps<{

diff --git a/src/components/TableData.vue b/src/components/TableData.vue
@@ -38,6 +38,7 @@ const tableHeadRef = ref<Head>({
   label: "",
   children: [],
   path: [],
+  splitFlag: "",
 });
 const treeTools = new TreeTools({
   id: "id",
@@ -67,6 +68,7 @@ const buildPropNameTree = (parent: Head, list: { value: string }[]) => {
       label: itemPath[itemPath.length - 1],
       children: [],
       path: itemPath,
+      splitFlag: "/",
     });
   }
   for (let child of parent.children) {
@@ -99,6 +101,7 @@ const buildHead = (props: TagSelectedItem[], splitFlag?: string) => {
       value: item.tag.value,
       label: item.tag.value,
       path: item.tag.value.split(splitFlag),
+      splitFlag: splitFlag,
     };
     buildPropNameTree(head, item.children);
     tableHeadRef.value.children.push(head);
@@ -254,12 +257,14 @@ const desBlockTree2TDataAndHead = (
   for (let block of blockTree.children) {
     const reg = new RegExp(`(${props.splitFlag}).*`);
     let prop = block.nameBlock.content.replace(reg, "");
+    prop = prop.startsWith(" ") ? prop.replace(" ", "") : prop;
     let propValue = parentHead.value + prop + props.splitFlag;
     let child: Head = {
       value: propValue,
       label: prop,
       path: parentHead.path.concat(prop),
       children: [],
+      splitFlag: props.splitFlag,
     };
     if (
       !parentHead.children.find((e) => {
@@ -324,6 +329,7 @@ const submit = async () => {
     label: "",
     children: [],
     path: [],
+    splitFlag: "",
   };
   tableDataRef.value = [];
 
@@ -356,6 +362,7 @@ const submit = async () => {
     label: "",
     path: [],
     children: [],
+    splitFlag: "",
   };
   for (const nameBlockObj of nameAndChildBlocks) {
     let data: Data = {
@@ -382,7 +389,6 @@ const submit = async () => {
         children: [],
       };
       buildDescendantBlockTree(childBlocks, blockRoot, props.splitFlag);
-      console.log(blockRoot);
       desBlockTree2TDataAndHead(blockRoot, propRoot, data);
     }
 

diff --git a/src/components/protyle.vue b/src/components/protyle.vue
@@ -4,9 +4,12 @@
 <script lang="ts" setup>
 import { onUnmounted, ref } from "vue";
 import { Protyle } from "siyuan";
+import { TreeTools } from "../../lib/js-utility-function/src/tree";
+import { Head } from "./Table.vue";
 
 const props = defineProps<{
   id: string;
+  removeContent: Head;
 }>();
 const html = ref("");
 let protyle: Protyle;
@@ -22,18 +25,47 @@ const buildHtml = (blockId: string) => {
       breadcrumbDocName: false,
     },
     after: async (protyle) => {
-      //禁止编辑
-      let blockEles = protyle.protyle.contentElement?.querySelectorAll(
-        "[contenteditable='true']"
-      );
+      const content = protyle.protyle.contentElement.cloneNode(
+        true
+      ) as HTMLElement;
+      if (!content) {
+        return;
+      }
+      let blockEles = content.querySelectorAll("[contenteditable='true']");
+      /*禁止编辑
       if (blockEles) {
         for (let ele of blockEles) {
           ele.setAttribute("contenteditable", "false");
         }
-      }
+      }*/
       //按道理讲 protyle 已经加载完成，但是加载符号仍然存在，这里等待一点时间
       await sleep(500);
-      html.value = protyle.protyle.element.outerHTML;
+      //删除属性标志文本
+      const treeTools = new TreeTools();
+      if (props.removeContent.splitFlag === "/") {
+        const matchReg = props.removeContent.value;
+        treeTools.forEach([...blockEles], (e) => {
+          if (
+            e.getAttribute("data-type") === "tag" &&
+            e.textContent.match(matchReg)
+          ) {
+            e.remove();
+          }
+        });
+      } else {
+        const tempList = props.removeContent.value.split(
+          props.removeContent.splitFlag
+        );
+        const matchReg =
+          tempList[tempList.length - 2] + props.removeContent.splitFlag;
+        treeTools.forEach([...blockEles], (e) => {
+          if (e.childElementCount === 0) {
+            e.textContent = e.textContent.replace(matchReg, "");
+          }
+        });
+      }
+
+      html.value = content.outerHTML;
     },
   });
 };