Added user-defined classes to remaining nodes

TypeCellOS · Aug 11, 2023 · 0b68085 · 0b68085
1 parent 69f52b3
commit 0b68085
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git a/.../core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts b/.../core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts
@@ -1,6 +1,7 @@
 import { InputRule, mergeAttributes } from "@tiptap/core";
 import { createTipTapBlock } from "../../../api/block";
 import styles from "../../Block.module.css";
+import { mergeCSSClasses } from "../../../../../shared/utils";
 
 export const HeadingBlockContent = createTipTapBlock<"heading">({
   name: "heading",
@@ -64,13 +65,30 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
   },
 
   renderHTML({ node, HTMLAttributes }) {
+    const blockContentDOMAttributes =
+      this.options.domAttributes?.blockContent || {};
+    const inlineContentDOMAttributes =
+      this.options.domAttributes?.inlineContent || {};
+
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
-        class: styles.blockContent,
+        class: mergeCSSClasses(
+          styles.blockContent,
+          blockContentDOMAttributes.class
+        ),
         "data-content-type": this.name,
       }),
-      ["h" + node.attrs.level, { class: styles.inlineContent }, 0],
+      [
+        "h" + node.attrs.level,
+        {
+          class: mergeCSSClasses(
+            styles.inlineContent,
+            inlineContentDOMAttributes.class
+          ),
+        },
+        0,
+      ],
     ];
   },
 });
diff --git a/...lockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts b/...lockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts
@@ -2,6 +2,7 @@ import { InputRule, mergeAttributes } from "@tiptap/core";
 import { createTipTapBlock } from "../../../../api/block";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import styles from "../../../Block.module.css";
+import { mergeCSSClasses } from "../../../../../../shared/utils";
 
 export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
   name: "bulletListItem",
@@ -82,13 +83,30 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
   },
 
   renderHTML({ HTMLAttributes }) {
+    const blockContentDOMAttributes =
+      this.options.domAttributes?.blockContent || {};
+    const inlineContentDOMAttributes =
+      this.options.domAttributes?.inlineContent || {};
+
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
-        class: styles.blockContent,
+        class: mergeCSSClasses(
+          styles.blockContent,
+          blockContentDOMAttributes.class
+        ),
         "data-content-type": this.name,
       }),
-      ["p", { class: styles.inlineContent }, 0],
+      [
+        "p",
+        {
+          class: mergeCSSClasses(
+            styles.inlineContent,
+            inlineContentDOMAttributes.class
+          ),
+        },
+        0,
+      ],
     ];
   },
 });
diff --git a/...Content/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts b/...Content/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts
@@ -3,6 +3,7 @@ import { createTipTapBlock } from "../../../../api/block";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
 import styles from "../../../Block.module.css";
+import { mergeCSSClasses } from "../../../../../../shared/utils";
 
 export const NumberedListItemBlockContent =
   createTipTapBlock<"numberedListItem">({
@@ -106,15 +107,32 @@ export const NumberedListItemBlockContent =
     },
 
     renderHTML({ HTMLAttributes }) {
+      const blockContentDOMAttributes =
+        this.options.domAttributes?.blockContent || {};
+      const inlineContentDOMAttributes =
+        this.options.domAttributes?.inlineContent || {};
+
       return [
         "div",
         mergeAttributes(HTMLAttributes, {
-          class: styles.blockContent,
+          class: mergeCSSClasses(
+            styles.blockContent,
+            blockContentDOMAttributes.class
+          ),
           "data-content-type": this.name,
         }),
         // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
         // which would be quite cumbersome
-        ["p", { class: styles.inlineContent }, 0],
+        [
+          "p",
+          {
+            class: mergeCSSClasses(
+              styles.inlineContent,
+              inlineContentDOMAttributes.class
+            ),
+          },
+          0,
+        ],
       ];
     },
   });