fix: errors with dom manipulation on tags page (#156)

* Replace "knowledge base" references

* Safer way to remove blog tags from tag overview page

* Add `maxDepth` to recursive function

Author: iPurpl3x

js/src/admin/index.js

@@ -39,7 +39,7 @@ app.initializers.add('v17development-flarum-blog', () => {
 
   // Add addPermissions
   extend(PermissionGrid.prototype, 'permissionItems', function (items) {
-    // Add knowledge base permissions
+    // Add blog permissions
     items.add(
       'blog',
       {

js/src/forum/pages/BlogComposer.js

@@ -256,12 +256,12 @@ export default class BlogComposer extends Page {
       return;
     }
 
-    // Find knowledge base tags
+    // Find blog tags
     const findblogTags = this.tags.filter((tag) => {
       return blogTags.indexOf(tag.id()) >= 0;
     });
 
-    // No knowledge base tags selected
+    // No blog tags selected
     if (findblogTags.length === 0) {
       alert(app.translator.trans('v17development-flarum-blog.forum.composer.no_blog_tags_selected'));
       return;

js/src/forum/utils/extendTagOverview.js

@@ -11,15 +11,17 @@ export default function extendTagOverview() {
 
     if (app.forum.attribute('blogHideTags') == false) return markup;
 
-    // Get knowledge base tag ID's
-    const knowledgeBaseTags = app.forum.attribute('blogTags') || [];
+    // Get blog tag ID's
+    const blogTags = app.forum.attribute('blogTags') || [];
+
+    const tag_tiles_parent = findChild(markup, 'TagsPage-content', true);
+    const tag_tiles = tag_tiles_parent?.children[0];
 
-    // Get tiles
-    let tag_tiles = markup.children[1].children[1].children[0].children;
+    if (!tag_tiles_parent || !tag_tiles) return markup;
 
-    // Map through the tiles and remove tiles that are part of the knowledge base
-    markup.children[1].children[1].children[0].children = tag_tiles.map((tile, i) => {
-      return knowledgeBaseTags.indexOf(this.tags[i].id()) >= 0 ? null : tile;
+    // Map through the tiles and remove tiles that are part of the blog
+    tag_tiles.children = tag_tiles.children.map((tile, i) => {
+      return blogTags.indexOf(this.tags[i].id()) >= 0 ? null : tile;
     });
 
     return markup;
@@ -37,3 +39,39 @@ export default function extendTagOverview() {
     return items;
   });
 }
+
+function findChild(parent, childClass, recursive = false, maxDepth = 50, depth = 0) {
+  const children = getChildren(parent);
+  let child = null;
+
+  for (let i = 0; i < children.length; i++) {
+    const childClassName = children[i]?.attrs?.className || '';
+    if (childClassName.includes(childClass)) {
+      child = children[i];
+      break;
+    }
+  }
+
+  // Recursive search
+  if (recursive && !child && depth < maxDepth) {
+    for (let subParent of children) {
+      const subChild = findChild(subParent, childClass, true, maxDepth, depth + 1);
+      if (subChild) {
+        return subChild;
+      }
+    }
+  }
+
+  return child;
+}
+
+function getChildren(parent) {
+  if (Array.isArray(parent)) {
+    return parent;
+  }
+  const children = parent?.children || [];
+  if (!Array.isArray(children)) {
+    return [];
+  }
+  return children;
+}