From 11e09de5cdb34ce23f158a07b16044706a5c15c3 Mon Sep 17 00:00:00 2001
From: bokuweb <bokuweb12@gmail.com>
Date: Fri, 22 Nov 2024 10:58:49 +0900
Subject: [PATCH] Add toc ppr (#785)

* feat: add ppr in toc

* feat: add frame property

* fix: add rpr

* fix: add toc paragraphProperty

* support toc paragraph property

* fix: some properties

* 0.4.18-rc20

* fix: toc style

* chore: rc21

* fix

* fix: toc structure

* fix: toc styles
---
 .../documents/elements/paragraph_property.rs  |   5 +
 .../elements/paragraph_property_default.rs    |   2 +-
 .../src/documents/elements/run_property.rs    |   5 +
 .../documents/elements/table_of_contents.rs   |   9 +
 docx-core/src/documents/mod.rs                |  23 +-
 docx-core/src/documents/paragraph_id.rs       |   3 +-
 docx-core/src/documents/styles.rs             |   4 +-
 docx-wasm/js/builder.ts                       |  16 +-
 docx-wasm/js/doc-defaults.ts                  |  19 +-
 docx-wasm/js/index.ts                         |  41 +-
 docx-wasm/js/json/run.ts                      |   2 +-
 docx-wasm/js/level.ts                         |  26 +-
 docx-wasm/js/paragraph-property.ts            | 331 +++++++++++++--
 docx-wasm/js/paragraph.ts                     |  39 +-
 docx-wasm/js/run-property.ts                  | 383 ++++++++++++++++++
 docx-wasm/js/run.ts                           | 296 ++------------
 docx-wasm/js/style.ts                         |  94 ++---
 docx-wasm/js/styles.ts                        |   2 +-
 docx-wasm/js/table-cell.ts                    |   2 +-
 docx-wasm/js/table-of-contents.ts             |  16 +
 docx-wasm/package.json                        |   2 +-
 docx-wasm/src/frame_property.rs               |  79 ++++
 docx-wasm/src/lib.rs                          |   6 +
 docx-wasm/src/paragraph.rs                    |  65 +--
 docx-wasm/src/paragraph_property.rs           | 183 +++++++++
 docx-wasm/src/run_property.rs                 | 114 ++++++
 docx-wasm/src/style.rs                        |  18 +-
 docx-wasm/src/table_of_contents.rs            |   5 +
 .../test/__snapshots__/index.test.js.snap     |   8 +
 docx-wasm/test/index.test.js                  |  74 ++++
 30 files changed, 1380 insertions(+), 492 deletions(-)
 create mode 100644 docx-wasm/js/run-property.ts
 create mode 100644 docx-wasm/src/frame_property.rs
 create mode 100644 docx-wasm/src/paragraph_property.rs
 create mode 100644 docx-wasm/src/run_property.rs

diff --git a/docx-core/src/documents/elements/paragraph_property.rs b/docx-core/src/documents/elements/paragraph_property.rs
index ed1792e4a..c07d28cc3 100644
--- a/docx-core/src/documents/elements/paragraph_property.rs
+++ b/docx-core/src/documents/elements/paragraph_property.rs
@@ -157,6 +157,11 @@ impl ParagraphProperty {
         self
     }
 
+    pub fn run_property(mut self, s: RunProperty) -> Self {
+        self.run_property = s;
+        self
+    }
+
     pub fn text_alignment(mut self, s: TextAlignmentType) -> Self {
         self.text_alignment = Some(TextAlignment::new(s));
         self
diff --git a/docx-core/src/documents/elements/paragraph_property_default.rs b/docx-core/src/documents/elements/paragraph_property_default.rs
index 5f7dce48d..294b464c9 100644
--- a/docx-core/src/documents/elements/paragraph_property_default.rs
+++ b/docx-core/src/documents/elements/paragraph_property_default.rs
@@ -21,7 +21,7 @@ impl ParagraphPropertyDefault {
         self
     }
 
-    pub(crate) fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
+    pub fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
         self.paragraph_property = p;
         self
     }
diff --git a/docx-core/src/documents/elements/run_property.rs b/docx-core/src/documents/elements/run_property.rs
index a8ccc95b7..e6200d173 100644
--- a/docx-core/src/documents/elements/run_property.rs
+++ b/docx-core/src/documents/elements/run_property.rs
@@ -145,6 +145,11 @@ impl RunProperty {
         self
     }
 
+    pub fn character_spacing(mut self, v: i32) -> RunProperty {
+        self.character_spacing = Some(CharacterSpacing::new(v));
+        self
+    }
+
     pub fn text_border(mut self, b: TextBorder) -> Self {
         self.text_border = Some(b);
         self
diff --git a/docx-core/src/documents/elements/table_of_contents.rs b/docx-core/src/documents/elements/table_of_contents.rs
index 2e5e341ec..c403f245f 100644
--- a/docx-core/src/documents/elements/table_of_contents.rs
+++ b/docx-core/src/documents/elements/table_of_contents.rs
@@ -61,6 +61,8 @@ pub struct TableOfContents {
     pub after_contents: Vec<TocContent>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub delete: Option<TableOfContentsReviewData>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub paragraph_property: Option<ParagraphProperty>,
 }
 
 impl TableOfContents {
@@ -149,6 +151,11 @@ impl TableOfContents {
         self.without_sdt = true;
         self
     }
+
+    pub fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
+        self.paragraph_property = Some(p);
+        self
+    }
 }
 
 impl BuildXML for TableOfContents {
@@ -199,9 +206,11 @@ impl BuildXML for TableOfContents {
                         .add_field_char(FieldCharType::Separate, false),
                 )
             };
+
             b = b.add_child(&p1)?;
 
             let p2 = Paragraph::new().add_run(Run::new().add_field_char(FieldCharType::End, false));
+
             if self.after_contents.is_empty() {
                 b = b.add_child(&p2)?;
             } else {
diff --git a/docx-core/src/documents/mod.rs b/docx-core/src/documents/mod.rs
index 7be938e69..5644f3828 100644
--- a/docx-core/src/documents/mod.rs
+++ b/docx-core/src/documents/mod.rs
@@ -541,13 +541,7 @@ impl Docx {
             })
             .collect();
 
-        if !tocs.is_empty() {
-            for i in 1..=9 {
-                self.styles = self
-                    .styles
-                    .add_style(crate::documents::preset_styles::toc(i));
-            }
-        }
+        let has_toc = !tocs.is_empty();
 
         for (i, toc) in tocs {
             if toc.items.is_empty() && toc.auto {
@@ -611,6 +605,21 @@ impl Docx {
             self.document_rels.has_footnotes = true;
         }
 
+        if has_toc {
+            for i in 1..=9 {
+                if !self
+                    .styles
+                    .styles
+                    .iter()
+                    .any(|s| s.name == Name::new(format!("toc {}", i)))
+                {
+                    self.styles = self
+                        .styles
+                        .add_style(crate::documents::preset_styles::toc(i));
+                }
+            }
+        }
+
         XMLDocx {
             content_type: self.content_type.build(),
             rels: self.rels.build(),
diff --git a/docx-core/src/documents/paragraph_id.rs b/docx-core/src/documents/paragraph_id.rs
index 5ec3152eb..1571c8106 100644
--- a/docx-core/src/documents/paragraph_id.rs
+++ b/docx-core/src/documents/paragraph_id.rs
@@ -7,8 +7,7 @@ static PARA_ID: AtomicUsize = AtomicUsize::new(1);
 pub fn generate_para_id() -> String {
     use std::sync::atomic::Ordering;
 
-    let id = PARA_ID.load(Ordering::Relaxed);
-    PARA_ID.store(id.wrapping_add(1), Ordering::Relaxed);
+    let id = PARA_ID.fetch_add(1, Ordering::Relaxed);
     format!("{:08x}", id)
 }
 
diff --git a/docx-core/src/documents/styles.rs b/docx-core/src/documents/styles.rs
index ee496b0f2..1f6d730b4 100644
--- a/docx-core/src/documents/styles.rs
+++ b/docx-core/src/documents/styles.rs
@@ -9,8 +9,8 @@ use crate::xml_builder::*;
 #[derive(Debug, Clone, PartialEq, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct Styles {
-    doc_defaults: DocDefaults,
-    styles: Vec<Style>,
+    pub doc_defaults: DocDefaults,
+    pub styles: Vec<Style>,
 }
 
 impl Styles {
diff --git a/docx-wasm/js/builder.ts b/docx-wasm/js/builder.ts
index 618f79b92..cbd2f2f7c 100644
--- a/docx-wasm/js/builder.ts
+++ b/docx-wasm/js/builder.ts
@@ -79,23 +79,23 @@ function buildParagraph(child: Paragraph) {
     paragraph = paragraph.style(child.property.styleId);
   }
 
-  if (child.property.runProperty.del) {
+  if (child.property.runProperty._del) {
     paragraph = paragraph.delete(
-      child.property.runProperty.del.author,
-      child.property.runProperty.del.date
+      child.property.runProperty._del.author,
+      child.property.runProperty._del.date
     );
   }
 
-  if (child.property.runProperty.ins) {
+  if (child.property.runProperty._ins) {
     paragraph = paragraph.insert(
-      child.property.runProperty.ins.author,
-      child.property.runProperty.ins.date
+      child.property.runProperty._ins.author,
+      child.property.runProperty._ins.date
     );
   }
 
-  if (child.property.runProperty.characterSpacing != null) {
+  if (child.property.runProperty._characterSpacing != null) {
     paragraph = paragraph.character_spacing(
-      child.property.runProperty.characterSpacing
+      child.property.runProperty._characterSpacing
     );
   }
 
diff --git a/docx-wasm/js/doc-defaults.ts b/docx-wasm/js/doc-defaults.ts
index 7cfc490c9..443b4f191 100644
--- a/docx-wasm/js/doc-defaults.ts
+++ b/docx-wasm/js/doc-defaults.ts
@@ -1,27 +1,34 @@
 import { LineSpacing, ParagraphProperty } from "./paragraph-property";
-import { RunProperty, RunFonts } from "./run";
+import {
+  RunProperty,
+  RunFonts,
+  createDefaultRunProperty,
+} from "./run-property";
 
 export class DocDefaults {
   runProperty: RunProperty;
-  paragraphProperty: ParagraphProperty;
+  paragraphProperty: ParagraphProperty = new ParagraphProperty();
 
   size(size: number) {
-    this.runProperty = { ...this.runProperty, size };
+    this.runProperty ??= createDefaultRunProperty();
+    this.runProperty.size(size);
     return this;
   }
 
   fonts(fonts: RunFonts) {
-    this.runProperty = { ...this.runProperty, fonts };
+    this.runProperty ??= createDefaultRunProperty();
+    this.runProperty.fonts(fonts);
     return this;
   }
 
   characterSpacing(characterSpacing: number) {
-    this.runProperty = { ...this.runProperty, characterSpacing };
+    this.runProperty ??= createDefaultRunProperty();
+    this.runProperty.spacing(characterSpacing);
     return this;
   }
 
   lineSpacing(lineSpacing: LineSpacing) {
-    this.paragraphProperty = { ...this.paragraphProperty, lineSpacing };
+    this.paragraphProperty.lineSpacing = lineSpacing;
     return this;
   }
 }
diff --git a/docx-wasm/js/index.ts b/docx-wasm/js/index.ts
index e021899d1..6b1e72921 100644
--- a/docx-wasm/js/index.ts
+++ b/docx-wasm/js/index.ts
@@ -2,7 +2,7 @@ import { Paragraph } from "./paragraph";
 import { LineSpacing, ParagraphProperty } from "./paragraph-property";
 import { Table } from "./table";
 import { TableOfContents } from "./table-of-contents";
-import { RunFonts } from "./run";
+import { RunFonts } from "./run-property";
 import { AbstractNumbering } from "./abstract-numbering";
 import { Numbering } from "./numbering";
 import { BookmarkStart } from "./bookmark-start";
@@ -290,31 +290,31 @@ export class Docx {
       level = level.suffix(wasm.LevelSuffixType.Tab);
     }
 
-    if (l.runProperty.bold) {
+    if (l.runProperty._bold) {
       level = level.bold();
     }
 
-    if (l.runProperty.italic) {
+    if (l.runProperty._italic) {
       level = level.italic();
     }
 
-    if (l.runProperty.size) {
-      level = level.size(l.runProperty.size);
+    if (l.runProperty._size) {
+      level = level.size(l.runProperty._size);
     }
 
-    if (l.runProperty.fonts) {
+    if (l.runProperty._fonts) {
       let f = wasm.createRunFonts();
-      if (l.runProperty.fonts._ascii) {
-        f = f.ascii(l.runProperty.fonts._ascii);
+      if (l.runProperty._fonts._ascii) {
+        f = f.ascii(l.runProperty._fonts._ascii);
       }
-      if (l.runProperty.fonts._hiAnsi) {
-        f = f.hi_ansi(l.runProperty.fonts._hiAnsi);
+      if (l.runProperty._fonts._hiAnsi) {
+        f = f.hi_ansi(l.runProperty._fonts._hiAnsi);
       }
-      if (l.runProperty.fonts._cs) {
-        f = f.cs(l.runProperty.fonts._cs);
+      if (l.runProperty._fonts._cs) {
+        f = f.cs(l.runProperty._fonts._cs);
       }
-      if (l.runProperty.fonts._eastAsia) {
-        f = f.east_asia(l.runProperty.fonts._eastAsia);
+      if (l.runProperty._fonts._eastAsia) {
+        f = f.east_asia(l.runProperty._fonts._eastAsia);
       }
       level = level.fonts(f);
     }
@@ -548,20 +548,20 @@ export class Docx {
 
     if (this.styles?.docDefaults) {
       if (this.styles.docDefaults.runProperty) {
-        if (this.styles.docDefaults.runProperty.fonts) {
+        if (this.styles.docDefaults.runProperty._fonts) {
           const fonts = this.buildRunFonts(
-            this.styles.docDefaults.runProperty.fonts
+            this.styles.docDefaults.runProperty._fonts
           );
           docx = docx.default_fonts(fonts);
         }
 
-        if (this.styles.docDefaults.runProperty.size) {
-          docx = docx.default_size(this.styles.docDefaults.runProperty.size);
+        if (this.styles.docDefaults.runProperty._size) {
+          docx = docx.default_size(this.styles.docDefaults.runProperty._size);
         }
 
-        if (this.styles.docDefaults.runProperty.characterSpacing) {
+        if (this.styles.docDefaults.runProperty._characterSpacing) {
           docx = docx.default_spacing(
-            this.styles.docDefaults.runProperty.characterSpacing
+            this.styles.docDefaults.runProperty._characterSpacing
           );
         }
       }
@@ -658,6 +658,7 @@ export * from "./table-of-contents";
 export * from "./table-of-contents-item";
 export * from "./table-row";
 export * from "./run";
+export * from "./run-property";
 export * from "./text";
 export * from "./style";
 export * from "./styles";
diff --git a/docx-wasm/js/json/run.ts b/docx-wasm/js/json/run.ts
index 0d5a57390..7aac85fb4 100644
--- a/docx-wasm/js/json/run.ts
+++ b/docx-wasm/js/json/run.ts
@@ -7,7 +7,7 @@ import {
   DeleteJSONData,
 } from "..";
 import { BorderType } from "../border";
-import { VertAlignType } from "../run";
+import { VertAlignType } from "../run-property";
 import { FieldChar } from "./bindings/FieldChar";
 import { InstrHyperlink } from "./bindings/InstrHyperlink";
 import { InstrToC } from "./bindings/InstrToC";
diff --git a/docx-wasm/js/level.ts b/docx-wasm/js/level.ts
index 99a85be59..c50ca7f6a 100644
--- a/docx-wasm/js/level.ts
+++ b/docx-wasm/js/level.ts
@@ -4,7 +4,11 @@ import {
   ParagraphProperty,
   SpecialIndentKind,
 } from "./paragraph-property";
-import { RunFonts, RunProperty } from "./run";
+import {
+  createDefaultRunProperty,
+  RunFonts,
+  RunProperty,
+} from "./run-property";
 
 export type LevelSuffixType = "nothing" | "tab" | "space";
 
@@ -15,7 +19,7 @@ export class Level {
   text: string;
   jc: string;
   paragraphProperty: ParagraphProperty = createDefaultParagraphProperty();
-  runProperty: RunProperty = {};
+  runProperty: RunProperty = createDefaultRunProperty();
   levelSuffix: LevelSuffixType;
 
   constructor(
@@ -52,47 +56,47 @@ export class Level {
   }
 
   size(size: number) {
-    this.runProperty = { ...this.runProperty, size };
+    this.runProperty.size(size);
     return this;
   }
 
   color(color: string) {
-    this.runProperty = { ...this.runProperty, color };
+    this.runProperty.color(color);
     return this;
   }
 
   highlight(color: string) {
-    this.runProperty = { ...this.runProperty, highlight: color };
+    this.runProperty.highlight(color);
     return this;
   }
 
   bold() {
-    this.runProperty = { ...this.runProperty, bold: true };
+    this.runProperty.bold();
     return this;
   }
 
   italic() {
-    this.runProperty = { ...this.runProperty, italic: true };
+    this.runProperty.italic();
     return this;
   }
 
   underline(type: string) {
-    this.runProperty = { ...this.runProperty, underline: type };
+    this.runProperty.underline(type);
     return this;
   }
 
   vanish() {
-    this.runProperty = { ...this.runProperty, vanish: true };
+    this.runProperty.vanish();
     return this;
   }
 
   fonts(fonts: RunFonts) {
-    this.runProperty = { ...this.runProperty, fonts };
+    this.runProperty.fonts(fonts);
     return this;
   }
 
   characterSpacing(characterSpacing: number) {
-    this.runProperty = { ...this.runProperty, characterSpacing };
+    this.runProperty.spacing(characterSpacing);
     return this;
   }
 }
diff --git a/docx-wasm/js/paragraph-property.ts b/docx-wasm/js/paragraph-property.ts
index 46a4435b7..614097da5 100644
--- a/docx-wasm/js/paragraph-property.ts
+++ b/docx-wasm/js/paragraph-property.ts
@@ -1,9 +1,11 @@
-import { RunProperty, createDefaultRunProperty } from "./run";
+import { RunProperty, createDefaultRunProperty } from "./run-property";
 
 import * as wasm from "./pkg";
 import { TextAlignmentType } from "./json/bindings/TextAlignmentType";
 import { Tab } from "./json/bindings/Tab";
 import { AlignmentType } from "./json/bindings/AlignmentType";
+import { TabValueType } from "./json/bindings/TabValueType";
+import { TabLeaderType } from "./json/bindings/TabLeaderType";
 
 export { AlignmentType } from "./json/bindings/AlignmentType";
 
@@ -60,9 +62,9 @@ export class LineSpacing {
   }
 }
 
-export type ParagraphProperty = {
-  align?: AlignmentType;
-  textAlignment?: TextAlignmentType;
+export class ParagraphProperty {
+  _align?: AlignmentType;
+  _textAlignment?: TextAlignmentType;
   styleId?: string;
   indent?: {
     left: number;
@@ -75,7 +77,7 @@ export type ParagraphProperty = {
     level: number;
   };
   lineSpacing?: LineSpacing;
-  runProperty: RunProperty;
+  runProperty: RunProperty = createDefaultRunProperty();
   keepNext: boolean;
   keepLines: boolean;
   pageBreakBefore: boolean;
@@ -83,19 +85,52 @@ export type ParagraphProperty = {
   paragraphPropertyChange?: ParagraphPropertyChange;
   outlineLvl?: number | null;
   snapToGrid?: boolean;
-  adjustRightInd?: number;
-  tabs?: Tab[];
+  _adjustRightInd?: number;
+  _tabs?: Tab[];
   frameProperty?: FrameProperty;
-};
+
+  constructor() {}
+
+  tabs(
+    tabs: {
+      val: TabValueType | null;
+      leader: TabLeaderType | null;
+      pos: number | null;
+    }[]
+  ) {
+    this._tabs = tabs;
+    return this;
+  }
+
+  align(type: AlignmentType) {
+    this._align = type;
+    return this;
+  }
+
+  textAlignment(type: TextAlignmentType) {
+    this._textAlignment = type;
+    return this;
+  }
+
+  adjustRightInd(v: number) {
+    this._adjustRightInd = v;
+    return this;
+  }
+
+  style(id: string) {
+    this.styleId = id;
+    return this;
+  }
+}
 
 export const createDefaultParagraphProperty = (): ParagraphProperty => {
-  return {
-    runProperty: createDefaultRunProperty(),
-    keepNext: false,
-    keepLines: false,
-    pageBreakBefore: false,
-    widowControl: false,
-  };
+  let p = new ParagraphProperty();
+  p.runProperty = createDefaultRunProperty();
+  p.keepNext = false;
+  p.keepLines = false;
+  p.pageBreakBefore = false;
+  p.widowControl = false;
+  return p;
 };
 
 export const createParagraphAlignment = (
@@ -170,17 +205,17 @@ export class ParagraphPropertyChange {
   }
 
   align(type: AlignmentType) {
-    this._property.align = type;
+    this._property._align = type;
     return this;
   }
 
   textAlignment(type: TextAlignmentType) {
-    this._property.textAlignment = type;
+    this._property._textAlignment = type;
     return this;
   }
 
   adjustRightInd(v: number) {
-    this._property.adjustRightInd = v;
+    this._property._adjustRightInd = v;
     return this;
   }
 
@@ -251,22 +286,23 @@ export const buildLineSpacing = (
   return spacing;
 };
 
+// @deprecated
 export const setParagraphProperty = <T extends wasm.Paragraph | wasm.Style>(
   target: T,
   property: ParagraphProperty
 ): T => {
-  const alignment = createParagraphAlignment(property.align);
+  const alignment = createParagraphAlignment(property._align);
   if (alignment != null) {
     target = target.align(alignment) as T;
   }
 
-  const textAlignment = createParagraphTextAlignment(property.textAlignment);
+  const textAlignment = createParagraphTextAlignment(property._textAlignment);
   if (textAlignment != null) {
     target = target.text_alignment(textAlignment) as T;
   }
 
-  if (property.adjustRightInd != null) {
-    target = target.adjust_right_ind(property.adjustRightInd) as T;
+  if (property._adjustRightInd != null) {
+    target = target.adjust_right_ind(property._adjustRightInd) as T;
   }
 
   if (typeof property.indent !== "undefined") {
@@ -295,12 +331,12 @@ export const setParagraphProperty = <T extends wasm.Paragraph | wasm.Style>(
     target = target.numbering(numbering.id, numbering.level) as T;
   }
 
-  if (property.runProperty.bold) {
+  if (property.runProperty._bold) {
     target = target.bold() as T;
   }
 
-  if (property.runProperty.color) {
-    target = target.color(property.runProperty.color) as T;
+  if (property.runProperty._color) {
+    target = target.color(property.runProperty._color) as T;
   }
 
   if (typeof property.lineSpacing !== "undefined") {
@@ -310,27 +346,27 @@ export const setParagraphProperty = <T extends wasm.Paragraph | wasm.Style>(
     }
   }
 
-  if (property.runProperty.italic) {
+  if (property.runProperty._italic) {
     target = target.italic() as T;
   }
 
-  if (property.runProperty.size) {
-    target = target.size(property.runProperty.size) as T;
+  if (property.runProperty._size) {
+    target = target.size(property.runProperty._size) as T;
   }
 
-  if (property.runProperty.fonts) {
+  if (property.runProperty._fonts) {
     let f = wasm.createRunFonts();
-    if (property.runProperty.fonts._ascii) {
-      f = f.ascii(property.runProperty.fonts._ascii);
+    if (property.runProperty._fonts._ascii) {
+      f = f.ascii(property.runProperty._fonts._ascii);
     }
-    if (property.runProperty.fonts._hiAnsi) {
-      f = f.hi_ansi(property.runProperty.fonts._hiAnsi);
+    if (property.runProperty._fonts._hiAnsi) {
+      f = f.hi_ansi(property.runProperty._fonts._hiAnsi);
     }
-    if (property.runProperty.fonts._cs) {
-      f = f.cs(property.runProperty.fonts._cs);
+    if (property.runProperty._fonts._cs) {
+      f = f.cs(property.runProperty._fonts._cs);
     }
-    if (property.runProperty.fonts._eastAsia) {
-      f = f.east_asia(property.runProperty.fonts._eastAsia);
+    if (property.runProperty._fonts._eastAsia) {
+      f = f.east_asia(property.runProperty._fonts._eastAsia);
     }
     target = target.fonts(f) as T;
   }
@@ -359,8 +395,8 @@ export const setParagraphProperty = <T extends wasm.Paragraph | wasm.Style>(
     target = target.outline_lvl(property.outlineLvl) as T;
   }
 
-  if (property.tabs) {
-    for (const tab of property.tabs) {
+  if (property._tabs) {
+    for (const tab of property._tabs) {
       let val: wasm.TabValueType | undefined;
       let leader: wasm.TabLeaderType | undefined;
       switch (tab.val) {
@@ -461,3 +497,220 @@ export const setParagraphProperty = <T extends wasm.Paragraph | wasm.Style>(
 
   return target;
 };
+
+export const createParagraphProperty = (
+  property: ParagraphProperty
+): wasm.ParagraphProperty => {
+  let p = wasm.createParagraphProperty();
+  const alignment = createParagraphAlignment(property._align);
+  if (alignment != null) {
+    p = p.align(alignment);
+  }
+
+  const textAlignment = createParagraphTextAlignment(property._textAlignment);
+  if (textAlignment != null) {
+    p = p.text_alignment(textAlignment);
+  }
+
+  if (property._adjustRightInd != null) {
+    p = p.adjust_right_ind(property._adjustRightInd);
+  }
+
+  if (typeof property.indent !== "undefined") {
+    const { indent } = property;
+    let kind;
+    switch (property.indent.specialIndentKind) {
+      case "firstLine": {
+        kind = wasm.SpecialIndentKind.FirstLine;
+        break;
+      }
+      case "hanging": {
+        kind = wasm.SpecialIndentKind.Hanging;
+        break;
+      }
+    }
+    p = p.indent(indent.left, kind, indent.specialIndentSize, indent.right);
+  }
+
+  if (typeof property.lineSpacing !== "undefined") {
+    const spacing = buildLineSpacing(property);
+    if (spacing) {
+      p = p.line_spacing(spacing);
+    }
+  }
+
+  if (typeof property.numbering !== "undefined") {
+    const { numbering } = property;
+    p = p.numbering(numbering.id, numbering.level);
+  }
+
+  let runProperty = wasm.createRunProperty();
+  if (property.runProperty._bold) {
+    runProperty = runProperty.bold();
+  }
+
+  if (property.runProperty._color) {
+    runProperty = runProperty.color(property.runProperty._color);
+  }
+
+  if (property.runProperty._italic) {
+    runProperty = runProperty.italic();
+  }
+
+  if (property.runProperty._size) {
+    runProperty = runProperty.size(property.runProperty._size);
+  }
+
+  if (property.runProperty._fonts) {
+    let f = wasm.createRunFonts();
+    if (property.runProperty._fonts._ascii) {
+      f = f.ascii(property.runProperty._fonts._ascii);
+    }
+    if (property.runProperty._fonts._hiAnsi) {
+      f = f.hi_ansi(property.runProperty._fonts._hiAnsi);
+    }
+    if (property.runProperty._fonts._cs) {
+      f = f.cs(property.runProperty._fonts._cs);
+    }
+    if (property.runProperty._fonts._eastAsia) {
+      f = f.east_asia(property.runProperty._fonts._eastAsia);
+    }
+    runProperty = runProperty.fonts(f);
+  }
+
+  if (property.runProperty) {
+    p = p.run_property(runProperty);
+  }
+
+  if (property.keepLines) {
+    p = p.keep_lines(true);
+  }
+
+  if (property.snapToGrid != null) {
+    p = p.snap_to_grid(!!property.snapToGrid);
+  }
+
+  if (property.keepNext) {
+    p = p.keep_next(true);
+  }
+
+  if (property.pageBreakBefore) {
+    p = p.page_break_before(true);
+  }
+
+  if (property.widowControl) {
+    p = p.widow_control(true);
+  }
+
+  if (property.outlineLvl != null) {
+    p = p.outline_lvl(property.outlineLvl);
+  }
+
+  if (property.styleId) {
+    p = p.style(property.styleId);
+  }
+
+  if (property._tabs) {
+    for (const tab of property._tabs) {
+      let val: wasm.TabValueType | undefined;
+      let leader: wasm.TabLeaderType | undefined;
+      switch (tab.val) {
+        case "bar":
+          val = wasm.TabValueType.Bar;
+          break;
+        case "bar":
+          val = wasm.TabValueType.Bar;
+          break;
+        case "center":
+          val = wasm.TabValueType.Center;
+          break;
+        case "clear":
+          val = wasm.TabValueType.Clear;
+          break;
+        case "decimal":
+          val = wasm.TabValueType.Decimal;
+          break;
+        case "end":
+          val = wasm.TabValueType.End;
+          break;
+        case "right":
+          val = wasm.TabValueType.Right;
+          break;
+        case "num":
+          val = wasm.TabValueType.Num;
+          break;
+        case "start":
+          val = wasm.TabValueType.Start;
+          break;
+        case "left":
+          val = wasm.TabValueType.Left;
+          break;
+      }
+
+      switch (tab.leader) {
+        case "dot":
+          leader = wasm.TabLeaderType.Dot;
+          break;
+        case "heavy":
+          leader = wasm.TabLeaderType.Heavy;
+          break;
+        case "hyphen":
+          leader = wasm.TabLeaderType.Hyphen;
+          break;
+        case "middleDot":
+          leader = wasm.TabLeaderType.MiddleDot;
+          break;
+        case "none":
+          leader = wasm.TabLeaderType.None;
+          break;
+        case "underscore":
+          leader = wasm.TabLeaderType.None;
+          break;
+      }
+      p = p.add_tab(val, leader, tab.pos ?? undefined);
+    }
+  }
+
+  if (property.frameProperty) {
+    let frameProperty = wasm.createFrameProperty();
+    if (property.frameProperty?.h != null) {
+      frameProperty = frameProperty.height(property.frameProperty.h);
+    }
+    if (property.frameProperty?.hRule != null) {
+      frameProperty = frameProperty.h_rule(property.frameProperty.hRule);
+    }
+    if (property.frameProperty?.hAnchor != null) {
+      frameProperty = frameProperty.h_anchor(property.frameProperty.hAnchor);
+    }
+    if (property.frameProperty?.hSpace != null) {
+      frameProperty = frameProperty.h_space(property.frameProperty.hSpace);
+    }
+    if (property.frameProperty?.vAnchor != null) {
+      frameProperty = frameProperty.v_anchor(property.frameProperty.vAnchor);
+    }
+    if (property.frameProperty?.vSpace != null) {
+      frameProperty = frameProperty.v_space(property.frameProperty.vSpace);
+    }
+    if (property.frameProperty?.w != null) {
+      frameProperty = frameProperty.width(property.frameProperty.w);
+    }
+    if (property.frameProperty?.wrap != null) {
+      frameProperty = frameProperty.wrap(property.frameProperty.wrap);
+    }
+    if (property.frameProperty?.x != null) {
+      frameProperty = frameProperty.x(property.frameProperty.x);
+    }
+    if (property.frameProperty?.xAlign != null) {
+      frameProperty = frameProperty.x_align(property.frameProperty.xAlign);
+    }
+    if (property.frameProperty?.y != null) {
+      frameProperty = frameProperty.y(property.frameProperty.y);
+    }
+    if (property.frameProperty?.yAlign != null) {
+      frameProperty = frameProperty.y_align(property.frameProperty.yAlign);
+    }
+    p = p.frame_property(frameProperty);
+  }
+
+  return p;
+};
diff --git a/docx-wasm/js/paragraph.ts b/docx-wasm/js/paragraph.ts
index 2aa93e8de..5af0c2e90 100644
--- a/docx-wasm/js/paragraph.ts
+++ b/docx-wasm/js/paragraph.ts
@@ -1,4 +1,5 @@
-import { Run, RunFonts } from "./run";
+import { Run } from "./run";
+import { RunFonts } from "./run-property";
 import {
   createDefaultParagraphProperty,
   ParagraphProperty,
@@ -94,22 +95,22 @@ export class Paragraph {
       pos: number | null;
     }[]
   ) {
-    this.property.tabs = tabs;
+    this.property._tabs = tabs;
     return this;
   }
 
   align(type: AlignmentType) {
-    this.property.align = type;
+    this.property._align = type;
     return this;
   }
 
   textAlignment(type: TextAlignmentType) {
-    this.property.textAlignment = type;
+    this.property._textAlignment = type;
     return this;
   }
 
   adjustRightInd(v: number) {
-    this.property.adjustRightInd = v;
+    this.property._adjustRightInd = v;
     return this;
   }
 
@@ -145,73 +146,73 @@ export class Paragraph {
   }
 
   characterSpacing(spacing: number) {
-    this.property.runProperty.characterSpacing = spacing;
+    this.property.runProperty.spacing(spacing);
     return this;
   }
 
   snapToGrid(v: boolean) {
-    this.property = { ...this.property, snapToGrid: v };
+    this.property.snapToGrid = v;
     return this;
   }
 
   keepNext(v: boolean) {
-    this.property = { ...this.property, keepNext: v };
+    this.property.keepNext = v;
     return this;
   }
 
   keepLines(v: boolean) {
-    this.property = { ...this.property, keepLines: v };
+    this.property.keepLines = v;
     return this;
   }
 
   pageBreakBefore(v: boolean) {
-    this.property = { ...this.property, pageBreakBefore: v };
+    this.property.pageBreakBefore = v;
     return this;
   }
 
   widowControl(v: boolean) {
-    this.property = { ...this.property, widowControl: v };
+    this.property.widowControl = v;
     return this;
   }
 
   // run property
   size(size: number) {
-    this.property.runProperty = { ...this.property.runProperty, size };
+    this.property.runProperty.size(size);
     return this;
   }
 
   color(color: string) {
-    this.property.runProperty = { ...this.property.runProperty, color };
+    this.property.runProperty.color(color);
     return this;
   }
 
   bold() {
-    this.property.runProperty = { ...this.property.runProperty, bold: true };
+    this.property.runProperty.bold();
     return this;
   }
 
   italic() {
-    this.property.runProperty = { ...this.property.runProperty, italic: true };
+    this.property.runProperty.italic();
     return this;
   }
 
   fonts(fonts: RunFonts) {
-    this.property.runProperty = { ...this.property.runProperty, fonts };
+    this.property.runProperty.fonts(fonts);
     return this;
   }
 
   delete(author: string, date: string) {
-    this.property.runProperty.del = { author, date };
+    this.property.runProperty.delete(author, date);
     return this;
   }
 
   insert(author: string, date: string) {
-    this.property.runProperty.ins = { author, date };
+    this.property.runProperty.insert(author, date);
     return this;
   }
 
   outlineLevel(v: number) {
-    this.property = { ...this.property, outlineLvl: v };
+    this.property.outlineLvl = v;
     return this;
   }
 
diff --git a/docx-wasm/js/run-property.ts b/docx-wasm/js/run-property.ts
new file mode 100644
index 000000000..a0d8aca89
--- /dev/null
+++ b/docx-wasm/js/run-property.ts
@@ -0,0 +1,383 @@
+import * as wasm from "./pkg/docx_wasm";
+
+import { BorderType } from "./border";
+
+export type TextBorder = {
+  borderType: BorderType;
+  color: string;
+  space: number;
+  size: number;
+};
+
+export type VertAlignType = "baseline" | "superscript" | "subscript";
+
+export type RunPropertyDel = {
+  author: string;
+  date: string;
+};
+
+export type RunPropertyIns = {
+  author: string;
+  date: string;
+};
+
+export class RunProperty {
+  _style?: string;
+  _size?: number;
+  _color?: string;
+  _highlight?: string;
+  _vertAlign?: VertAlignType;
+  _bold?: boolean;
+  _italic?: boolean;
+  _strike?: boolean;
+  _underline?: string;
+  _vanish?: boolean;
+  _fonts?: RunFonts;
+  _characterSpacing?: number;
+  _textBorder?: TextBorder;
+  _ins?: RunPropertyIns;
+  _del?: RunPropertyDel;
+
+  style(style: string) {
+    this._style = style;
+    return this;
+  }
+
+  size(size: number) {
+    this._size = size;
+    return this;
+  }
+
+  color(color: string) {
+    this._color = color;
+    return this;
+  }
+
+  highlight(color: string) {
+    this._highlight = color;
+    return this;
+  }
+
+  vertAlign(vertAlign: VertAlignType) {
+    this._vertAlign = vertAlign;
+    return this;
+  }
+
+  bold() {
+    this._bold = true;
+    return this;
+  }
+
+  strike() {
+    this._strike = true;
+    return this;
+  }
+
+  italic() {
+    this._italic = true;
+    return this;
+  }
+
+  underline(type: string) {
+    this._underline = type;
+    return this;
+  }
+
+  vanish() {
+    this._vanish = true;
+    return this;
+  }
+
+  fonts(fonts: RunFonts) {
+    this._fonts = fonts;
+    return this;
+  }
+
+  spacing(characterSpacing: number) {
+    this._characterSpacing = characterSpacing;
+    return this;
+  }
+
+  delete(author: string, date: string) {
+    this._del = { author, date };
+    return this;
+  }
+
+  insert(author: string, date: string) {
+    this._ins = { author, date };
+    return this;
+  }
+
+  textBorder(type: BorderType, size: number, space: number, color: string) {
+    this._textBorder = {
+      borderType: type,
+      size,
+      space,
+      color,
+    };
+    return this;
+  }
+}
+
+export const convertBorderType = (t: BorderType) => {
+  switch (t) {
+    case "nil":
+      return wasm.BorderType.Nil;
+    case "none":
+      return wasm.BorderType.None;
+    case "single":
+      return wasm.BorderType.Single;
+    case "thick":
+      return wasm.BorderType.Thick;
+    case "double":
+      return wasm.BorderType.Double;
+    case "dotted":
+      return wasm.BorderType.Dotted;
+    case "dashed":
+      return wasm.BorderType.Dashed;
+    case "dotDash":
+      return wasm.BorderType.DotDash;
+    case "dotDotDash":
+      return wasm.BorderType.DotDotDash;
+    case "triple":
+      return wasm.BorderType.Triple;
+    default:
+      return wasm.BorderType.Single;
+  }
+};
+
+export const createDefaultRunProperty = (): RunProperty => {
+  return new RunProperty();
+};
+
+export class RunFonts {
+  _ascii?: string;
+  _hiAnsi?: string;
+  _eastAsia?: string;
+  _cs?: string;
+  _asciiTheme?: string;
+  _hiAnsiTheme?: string;
+  _eastAsiaTheme?: string;
+  _csTheme?: string;
+  _hint?: string;
+
+  ascii(f: string) {
+    this._ascii = f;
+    return this;
+  }
+
+  hiAnsi(f: string) {
+    this._hiAnsi = f;
+    return this;
+  }
+
+  cs(f: string) {
+    this._cs = f;
+    return this;
+  }
+
+  eastAsia(f: string) {
+    this._eastAsia = f;
+    return this;
+  }
+
+  asciiTheme(f: string) {
+    this._asciiTheme = f;
+    return this;
+  }
+
+  hiAnsiTheme(f: string) {
+    this._hiAnsiTheme = f;
+    return this;
+  }
+
+  csTheme(f: string) {
+    this._csTheme = f;
+    return this;
+  }
+
+  eastAsiaTheme(f: string) {
+    this._eastAsia = f;
+    return this;
+  }
+
+  hint(f: string) {
+    this._hint = f;
+    return this;
+  }
+
+  buildWasmObject = () => {
+    let f = wasm.createRunFonts();
+    if (this?._ascii) {
+      f = f.ascii(this._ascii);
+    }
+    if (this?._hiAnsi) {
+      f = f.hi_ansi(this._hiAnsi);
+    }
+    if (this?._cs) {
+      f = f.cs(this._cs);
+    }
+    if (this?._eastAsia) {
+      f = f.east_asia(this._eastAsia);
+    }
+
+    // theme
+    if (this?._asciiTheme) {
+      f = f.ascii_theme(this._asciiTheme);
+    }
+    if (this?._hiAnsiTheme) {
+      f = f.hi_ansi_theme(this._hiAnsiTheme);
+    }
+    if (this?._csTheme) {
+      f = f.cs_theme(this._csTheme);
+    }
+    if (this?._eastAsiaTheme) {
+      f = f.east_asia_theme(this._eastAsiaTheme);
+    }
+
+    if (this?._hint) {
+      f = f.hint(this._hint);
+    }
+    return f;
+  };
+}
+
+// @deprecated
+export const setRunProperty = <T extends wasm.Run | wasm.Style>(
+  target: T,
+  property: RunProperty
+): T => {
+  if (property._style && target instanceof wasm.Run) {
+    target = target.style(property._style) as T;
+  }
+
+  if (typeof property._size !== "undefined") {
+    target = target.size(property._size) as T;
+  }
+
+  if (property._color) {
+    target = target.color(property._color) as T;
+  }
+
+  if (property._highlight) {
+    target = target.highlight(property._highlight) as T;
+  }
+
+  if (property._vertAlign) {
+    if (property._vertAlign === "superscript") {
+      target = target.vert_align(wasm.VertAlignType.SuperScript) as T;
+    } else if (property._vertAlign === "subscript") {
+      target = target.vert_align(wasm.VertAlignType.SubScript) as T;
+    }
+  }
+
+  if (property._bold) {
+    target = target.bold() as T;
+  }
+
+  if (property._italic) {
+    target = target.italic() as T;
+  }
+
+  if (property._strike) {
+    target = target.strike() as T;
+  }
+
+  if (property._underline) {
+    target = target.underline(property._underline) as T;
+  }
+
+  if (property._vanish) {
+    target = target.vanish() as T;
+  }
+
+  if (property._characterSpacing != null) {
+    target = target.character_spacing(property._characterSpacing) as T;
+  }
+
+  if (property._textBorder) {
+    const { borderType, color, space, size } = property._textBorder;
+    target = target.text_border(
+      convertBorderType(borderType),
+      size,
+      space,
+      color
+    ) as T;
+  }
+
+  if (property._fonts) {
+    const fonts = property._fonts.buildWasmObject();
+    target = target.fonts(fonts) as T;
+  }
+
+  return target;
+};
+
+// @deprecated
+export const createRunProperty = (property: RunProperty): wasm.RunProperty => {
+  let target = wasm.createRunProperty();
+  if (property._style) {
+    target = target.style(property._style);
+  }
+
+  if (typeof property._size !== "undefined") {
+    target = target.size(property._size);
+  }
+
+  if (property._color) {
+    target = target.color(property._color);
+  }
+
+  if (property._highlight) {
+    target = target.highlight(property._highlight);
+  }
+
+  if (property._vertAlign) {
+    if (property._vertAlign === "superscript") {
+      target = target.vert_align(wasm.VertAlignType.SuperScript);
+    } else if (property._vertAlign === "subscript") {
+      target = target.vert_align(wasm.VertAlignType.SubScript);
+    }
+  }
+
+  if (property._bold) {
+    target = target.bold();
+  }
+
+  if (property._italic) {
+    target = target.italic();
+  }
+
+  if (property._strike) {
+    target = target.strike();
+  }
+
+  if (property._underline) {
+    target = target.underline(property._underline);
+  }
+
+  if (property._vanish) {
+    target = target.vanish();
+  }
+
+  if (property._characterSpacing != null) {
+    target = target.character_spacing(property._characterSpacing);
+  }
+
+  if (property._textBorder) {
+    const { borderType, color, space, size } = property._textBorder;
+    target = target.text_border(
+      convertBorderType(borderType),
+      size,
+      space,
+      color
+    );
+  }
+
+  if (property._fonts) {
+    const fonts = property._fonts.buildWasmObject();
+    target = target.fonts(fonts);
+  }
+
+  return target;
+};
diff --git a/docx-wasm/js/run.ts b/docx-wasm/js/run.ts
index a279a113a..76e833a32 100644
--- a/docx-wasm/js/run.ts
+++ b/docx-wasm/js/run.ts
@@ -7,172 +7,19 @@ import { Break, BreakType } from "./break";
 import { BorderType } from "./border";
 import { Image } from "./image";
 import { PositionalTab } from "./positional-tab";
+import {
+  createDefaultRunProperty,
+  RunFonts,
+  RunProperty,
+  setRunProperty,
+  VertAlignType,
+} from "./run-property";
 
 export type RunChild = Text | DeleteText | Tab | Break | Image | PositionalTab;
 
-export type TextBorder = {
-  borderType: BorderType;
-  color: string;
-  space: number;
-  size: number;
-};
-
-export type VertAlignType = "baseline" | "superscript" | "subscript";
-
-export type RunPropertyDel = {
-  author: string;
-  date: string;
-};
-
-export type RunPropertyIns = {
-  author: string;
-  date: string;
-};
-
-export type RunProperty = {
-  style?: string;
-  size?: number;
-  color?: string;
-  highlight?: string;
-  vertAlign?: VertAlignType;
-  bold?: boolean;
-  italic?: boolean;
-  strike?: boolean;
-  underline?: string;
-  vanish?: boolean;
-  fonts?: RunFonts;
-  characterSpacing?: number;
-  textBorder?: TextBorder;
-  ins?: RunPropertyIns;
-  del?: RunPropertyDel;
-};
-
-export const convertBorderType = (t: BorderType) => {
-  switch (t) {
-    case "nil":
-      return wasm.BorderType.Nil;
-    case "none":
-      return wasm.BorderType.None;
-    case "single":
-      return wasm.BorderType.Single;
-    case "thick":
-      return wasm.BorderType.Thick;
-    case "double":
-      return wasm.BorderType.Double;
-    case "dotted":
-      return wasm.BorderType.Dotted;
-    case "dashed":
-      return wasm.BorderType.Dashed;
-    case "dotDash":
-      return wasm.BorderType.DotDash;
-    case "dotDotDash":
-      return wasm.BorderType.DotDotDash;
-    case "triple":
-      return wasm.BorderType.Triple;
-    default:
-      return wasm.BorderType.Single;
-  }
-};
-
-export const createDefaultRunProperty = (): RunProperty => {
-  return {};
-};
-
-export class RunFonts {
-  _ascii?: string;
-  _hiAnsi?: string;
-  _eastAsia?: string;
-  _cs?: string;
-  _asciiTheme?: string;
-  _hiAnsiTheme?: string;
-  _eastAsiaTheme?: string;
-  _csTheme?: string;
-  _hint?: string;
-
-  ascii(f: string) {
-    this._ascii = f;
-    return this;
-  }
-
-  hiAnsi(f: string) {
-    this._hiAnsi = f;
-    return this;
-  }
-
-  cs(f: string) {
-    this._cs = f;
-    return this;
-  }
-
-  eastAsia(f: string) {
-    this._eastAsia = f;
-    return this;
-  }
-
-  asciiTheme(f: string) {
-    this._asciiTheme = f;
-    return this;
-  }
-
-  hiAnsiTheme(f: string) {
-    this._hiAnsiTheme = f;
-    return this;
-  }
-
-  csTheme(f: string) {
-    this._csTheme = f;
-    return this;
-  }
-
-  eastAsiaTheme(f: string) {
-    this._eastAsia = f;
-    return this;
-  }
-
-  hint(f: string) {
-    this._hint = f;
-    return this;
-  }
-
-  buildWasmObject = () => {
-    let f = wasm.createRunFonts();
-    if (this?._ascii) {
-      f = f.ascii(this._ascii);
-    }
-    if (this?._hiAnsi) {
-      f = f.hi_ansi(this._hiAnsi);
-    }
-    if (this?._cs) {
-      f = f.cs(this._cs);
-    }
-    if (this?._eastAsia) {
-      f = f.east_asia(this._eastAsia);
-    }
-
-    // theme
-    if (this?._asciiTheme) {
-      f = f.ascii_theme(this._asciiTheme);
-    }
-    if (this?._hiAnsiTheme) {
-      f = f.hi_ansi_theme(this._hiAnsiTheme);
-    }
-    if (this?._csTheme) {
-      f = f.cs_theme(this._csTheme);
-    }
-    if (this?._eastAsiaTheme) {
-      f = f.east_asia_theme(this._eastAsiaTheme);
-    }
-
-    if (this?._hint) {
-      f = f.hint(this._hint);
-    }
-    return f;
-  };
-}
-
 export class Run {
   children: RunChild[] = [];
-  property: RunProperty = {};
+  property: RunProperty;
 
   addText(text: string) {
     this.children.push(new Text(text));
@@ -205,85 +52,92 @@ export class Run {
   }
 
   style(style: string) {
-    this.property = { ...this.property, style };
+    this.property ??= createDefaultRunProperty();
+    this.property.style(style);
     return this;
   }
 
   size(size: number) {
-    this.property = { ...this.property, size };
+    this.property ??= createDefaultRunProperty();
+    this.property.size(size);
     return this;
   }
 
   color(color: string) {
-    this.property = { ...this.property, color };
+    this.property ??= createDefaultRunProperty();
+    this.property.color(color);
     return this;
   }
 
   highlight(color: string) {
-    this.property = { ...this.property, highlight: color };
+    this.property ??= createDefaultRunProperty();
+    this.property.highlight(color);
     return this;
   }
 
   vertAlign(vertAlign: VertAlignType) {
-    this.property = { ...this.property, vertAlign };
+    this.property ??= createDefaultRunProperty();
+    this.property.vertAlign(vertAlign);
     return this;
   }
 
   bold() {
-    this.property = { ...this.property, bold: true };
+    this.property ??= createDefaultRunProperty();
+    this.property.bold();
     return this;
   }
 
   strike() {
-    this.property = { ...this.property, strike: true };
+    this.property ??= createDefaultRunProperty();
+    this.property.strike();
     return this;
   }
 
   italic() {
-    this.property = { ...this.property, italic: true };
+    this.property ??= createDefaultRunProperty();
+    this.property.italic();
     return this;
   }
 
   underline(type: string) {
-    this.property = { ...this.property, underline: type };
+    this.property ??= createDefaultRunProperty();
+    this.property.underline(type);
     return this;
   }
 
   vanish() {
-    this.property = { ...this.property, vanish: true };
+    this.property ??= createDefaultRunProperty();
+    this.property.vanish();
     return this;
   }
 
   fonts(fonts: RunFonts) {
-    this.property = { ...this.property, fonts };
+    this.property ??= createDefaultRunProperty();
+    this.property.fonts(fonts);
     return this;
   }
 
   spacing(characterSpacing: number) {
-    this.property = { ...this.property, characterSpacing };
+    this.property ??= createDefaultRunProperty();
+    this.property.spacing(characterSpacing);
     return this;
   }
 
   delete(author: string, date: string) {
-    this.property = { ...this.property, del: { author, date } };
+    this.property ??= createDefaultRunProperty();
+    this.property.delete(author, date);
     return this;
   }
 
   insert(author: string, date: string) {
-    this.property = { ...this.property, ins: { author, date } };
+    this.property ??= createDefaultRunProperty();
+    this.property.delete(author, date);
     return this;
   }
 
   textBorder(type: BorderType, size: number, space: number, color: string) {
-    this.property = {
-      ...this.property,
-      textBorder: {
-        borderType: type,
-        size,
-        space,
-        color,
-      },
-    };
+    this.property ??= createDefaultRunProperty();
+    this.property.textBorder(type, size, space, color);
     return this;
   }
 
@@ -327,78 +181,10 @@ export class Run {
       }
     });
 
-    run = setRunProperty(run, this.property) as wasm.Run;
+    if (this.property) {
+      run = setRunProperty(run, this.property) as wasm.Run;
+    }
 
     return run;
   }
 }
-
-export const setRunProperty = <T extends wasm.Run | wasm.Style>(
-  target: T,
-  property: RunProperty
-): T => {
-  if (property.style && target instanceof wasm.Run) {
-    target = target.style(property.style) as T;
-  }
-
-  if (typeof property.size !== "undefined") {
-    target = target.size(property.size) as T;
-  }
-
-  if (property.color) {
-    target = target.color(property.color) as T;
-  }
-
-  if (property.highlight) {
-    target = target.highlight(property.highlight) as T;
-  }
-
-  if (property.vertAlign) {
-    if (property.vertAlign === "superscript") {
-      target = target.vert_align(wasm.VertAlignType.SuperScript) as T;
-    } else if (property.vertAlign === "subscript") {
-      target = target.vert_align(wasm.VertAlignType.SubScript) as T;
-    }
-  }
-
-  if (property.bold) {
-    target = target.bold() as T;
-  }
-
-  if (property.italic) {
-    target = target.italic() as T;
-  }
-
-  if (property.strike) {
-    target = target.strike() as T;
-  }
-
-  if (property.underline) {
-    target = target.underline(property.underline) as T;
-  }
-
-  if (property.vanish) {
-    target = target.vanish() as T;
-  }
-
-  if (property.characterSpacing != null) {
-    target = target.character_spacing(property.characterSpacing) as T;
-  }
-
-  if (property.textBorder) {
-    const { borderType, color, space, size } = property.textBorder;
-    target = target.text_border(
-      convertBorderType(borderType),
-      size,
-      space,
-      color
-    ) as T;
-  }
-
-  if (property.fonts) {
-    const fonts = property.fonts.buildWasmObject();
-    target = target.fonts(fonts) as T;
-  }
-
-  return target;
-};
diff --git a/docx-wasm/js/style.ts b/docx-wasm/js/style.ts
index 796f41b95..86c3d7258 100644
--- a/docx-wasm/js/style.ts
+++ b/docx-wasm/js/style.ts
@@ -13,13 +13,13 @@ import {
   VertAlignType,
   RunFonts,
   setRunProperty,
-} from "./run";
+} from "./run-property";
 import {
   AlignmentType,
   createDefaultParagraphProperty,
+  createParagraphProperty,
   LineSpacing,
   ParagraphProperty,
-  setParagraphProperty,
   SpecialIndentKind,
 } from "./paragraph-property";
 import { BorderType } from "./border";
@@ -41,7 +41,7 @@ export class Style {
     this._styleId = id;
     this._styleType = type;
     this._name = "";
-    this._runProperty = {};
+    this._runProperty;
     this._tableProperty = { cellMargins: createDefaultTableCellMargins() };
     this._runProperty = createDefaultRunProperty();
     this._paragraphProperty = createDefaultParagraphProperty();
@@ -64,105 +64,95 @@ export class Style {
     return this;
   };
 
-  // TODO:
-  // runProperty = (n: RunProperty) => {
-  //   this._runProperty = n;
-  //   return this;
-  // };
-
   // run property
   style(style: string) {
-    this._runProperty = { ...this._runProperty, style };
+    this._runProperty.style(style);
     return this;
   }
 
   size(size: number) {
-    this._runProperty = { ...this._runProperty, size };
+    this._runProperty.size(size);
     return this;
   }
 
   color(color: string) {
-    this._runProperty = { ...this._runProperty, color };
+    this._runProperty.color(color);
     return this;
   }
 
   highlight(color: string) {
-    this._runProperty = { ...this._runProperty, highlight: color };
+    this._runProperty.highlight(color);
     return this;
   }
 
   vertAlign(vertAlign: VertAlignType) {
-    this._runProperty = { ...this._runProperty, vertAlign };
+    this._runProperty.vertAlign(vertAlign);
     return this;
   }
 
   bold() {
-    this._runProperty = { ...this._runProperty, bold: true };
+    this._runProperty.bold();
     return this;
   }
 
   strike() {
-    this._runProperty = { ...this._runProperty, strike: true };
+    this._runProperty.strike();
     return this;
   }
 
   italic() {
-    this._runProperty = { ...this._runProperty, italic: true };
+    this._runProperty.italic();
     return this;
   }
 
   underline(type: string) {
-    this._runProperty = { ...this._runProperty, underline: type };
+    this._runProperty.underline(type);
     return this;
   }
 
   vanish() {
-    this._runProperty = { ...this._runProperty, vanish: true };
+    this._runProperty.vanish();
     return this;
   }
 
   fonts(fonts: RunFonts) {
-    this._runProperty = { ...this._runProperty, fonts };
+    this._runProperty.fonts(fonts);
     return this;
   }
 
   characterSpacing(characterSpacing: number) {
-    this._runProperty = { ...this._runProperty, characterSpacing };
+    this._runProperty.spacing(characterSpacing);
     return this;
   }
 
   delete(author: string, date: string) {
-    this._runProperty = { ...this._runProperty, del: { author, date } };
+    this._runProperty.delete(author, date);
     return this;
   }
 
   insert(author: string, date: string) {
-    this._runProperty = { ...this._runProperty, ins: { author, date } };
+    this._runProperty.insert(author, date);
     return this;
   }
 
   textBorder(type: BorderType, size: number, space: number, color: string) {
-    this._runProperty = {
-      ...this._runProperty,
-      textBorder: {
-        borderType: type,
-        size,
-        space,
-        color,
-      },
-    };
+    this._runProperty.textBorder(type, size, space, color);
     return this;
   }
 
-  // TODO:
-  // paragraphProperty = (n: ParagraphProperty) => {
-  //   this._paragraphProperty = n;
-  //   return this;
-  // };
+  paragraphProperty = (p: ParagraphProperty) => {
+    this._paragraphProperty = p;
+    return this;
+  };
+
+  runProperty = (p: RunProperty) => {
+    this._runProperty = p;
+    return this;
+  };
 
   // paragraph property
   align(type: AlignmentType) {
-    this._paragraphProperty.align = type;
+    this._paragraphProperty._align = type;
     return this;
   }
 
@@ -190,33 +180,31 @@ export class Style {
   }
 
   keepNext(v: boolean) {
-    this._paragraphProperty = { ...this._paragraphProperty, keepNext: v };
+    this._paragraphProperty.keepNext = v;
     return this;
   }
 
   keepLines(v: boolean) {
-    this._paragraphProperty = { ...this._paragraphProperty, keepLines: v };
+    this._paragraphProperty.keepLines = v;
     return this;
   }
 
   pageBreakBefore(v: boolean) {
-    this._paragraphProperty = {
-      ...this._paragraphProperty,
-      pageBreakBefore: v,
-    };
+    this._paragraphProperty.pageBreakBefore = v;
     return this;
   }
 
   widowControl(v: boolean) {
-    this._paragraphProperty = { ...this._paragraphProperty, widowControl: v };
+    this._paragraphProperty.widowControl = v;
     return this;
   }
 
   outlineLevel(v: number) {
-    this._paragraphProperty = { ...this._paragraphProperty, outlineLvl: v };
+    this._paragraphProperty.outlineLvl = v;
     return this;
   }
 
+  // TODO:
   // tableProperty = (n: TableProperty) => {
   //   this._tableProperty = n;
   //   return this;
@@ -304,11 +292,19 @@ export class Style {
       s = s.link(this._link);
     }
 
-    s = setRunProperty(s, this._runProperty);
+    if (this._runProperty) {
+      s = setRunProperty(s, this._runProperty);
+    }
 
-    s = setParagraphProperty(s, this._paragraphProperty);
+    if (this._paragraphProperty) {
+      s = s.paragraph_property(
+        createParagraphProperty(this._paragraphProperty)
+      );
+    }
 
-    s = setTableProperty(s, this._tableProperty);
+    if (this._tableProperty) {
+      s = setTableProperty(s, this._tableProperty);
+    }
 
     return s;
   };
diff --git a/docx-wasm/js/styles.ts b/docx-wasm/js/styles.ts
index e2d701650..1c10c7c82 100644
--- a/docx-wasm/js/styles.ts
+++ b/docx-wasm/js/styles.ts
@@ -1,6 +1,6 @@
 import { Style } from "./style";
 import { DocDefaults } from "./doc-defaults";
-import { RunFonts } from "./run";
+import { RunFonts } from "./run-property";
 import { LineSpacing } from "./paragraph-property";
 
 export class Styles {
diff --git a/docx-wasm/js/table-cell.ts b/docx-wasm/js/table-cell.ts
index 8553bcd4d..061dbccc1 100644
--- a/docx-wasm/js/table-cell.ts
+++ b/docx-wasm/js/table-cell.ts
@@ -4,7 +4,7 @@ import { Shading } from "./shading";
 import { TableCellBorders, PositionKeys } from "./table-cell-borders";
 import { TableCellBorderPosition, TableCellBorder } from "./table-cell-border";
 import * as wasm from "./pkg";
-import { convertBorderType } from "./run";
+import { convertBorderType } from "./run-property";
 import { TableOfContents } from "./table-of-contents";
 import { build } from "./builder";
 import { WidthType } from ".";
diff --git a/docx-wasm/js/table-of-contents.ts b/docx-wasm/js/table-of-contents.ts
index 947f45d95..de77cb8d7 100644
--- a/docx-wasm/js/table-of-contents.ts
+++ b/docx-wasm/js/table-of-contents.ts
@@ -3,6 +3,10 @@ import * as wasm from "./pkg";
 import { Table } from "./table";
 import { TableOfContentsItem } from "./table-of-contents-item";
 import { build } from "./builder";
+import {
+  createParagraphProperty,
+  ParagraphProperty,
+} from "./paragraph-property";
 
 export class TableOfContents {
   _instrText?: string;
@@ -18,6 +22,7 @@ export class TableOfContents {
   _beforeContents: (Paragraph | Table)[] = [];
   _afterContents: (Paragraph | Table)[] = [];
   _delete: { author: string; date: string } | null = null;
+  _paragraphProperty: ParagraphProperty | null = null;
 
   constructor(instrText?: string) {
     this._instrText = instrText;
@@ -93,6 +98,11 @@ export class TableOfContents {
     return this;
   };
 
+  paragraphProperty(p: ParagraphProperty) {
+    this._paragraphProperty = p;
+    return this;
+  }
+
   buildWasmObject = () => {
     let toc = this._instrText
       ? wasm.createTableOfContentsWithInstrText(this._instrText)
@@ -156,6 +166,12 @@ export class TableOfContents {
       }
     }
 
+    if (this._paragraphProperty) {
+      toc = toc.paragraph_property(
+        createParagraphProperty(this._paragraphProperty)
+      );
+    }
+
     return toc;
   };
 }
diff --git a/docx-wasm/package.json b/docx-wasm/package.json
index b97603109..55793b99b 100644
--- a/docx-wasm/package.json
+++ b/docx-wasm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docx-wasm",
-  "version": "0.4.18-rc19",
+  "version": "0.4.18-rc26",
   "main": "dist/node/index.js",
   "browser": "dist/web/index.js",
   "author": "bokuweb <bokuweb12@gmail.com>",
diff --git a/docx-wasm/src/frame_property.rs b/docx-wasm/src/frame_property.rs
new file mode 100644
index 000000000..c897b5e5d
--- /dev/null
+++ b/docx-wasm/src/frame_property.rs
@@ -0,0 +1,79 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub struct FrameProperty(docx_rs::FrameProperty);
+
+#[wasm_bindgen(js_name = createFrameProperty)]
+pub fn create_frame_property() -> FrameProperty {
+    FrameProperty(docx_rs::FrameProperty::new())
+}
+
+#[wasm_bindgen]
+impl FrameProperty {
+    // frame property
+    pub fn wrap(mut self, wrap: &str) -> Self {
+        self.0 = self.0.wrap(wrap);
+        self
+    }
+
+    pub fn v_anchor(mut self, anchor: &str) -> Self {
+        self.0 = self.0.v_anchor(anchor);
+        self
+    }
+
+    pub fn h_anchor(mut self, anchor: &str) -> Self {
+        self.0 = self.0.h_anchor(anchor);
+        self
+    }
+
+    pub fn h_rule(mut self, r: &str) -> Self {
+        self.0 = self.0.h_rule(r);
+        self
+    }
+
+    pub fn x_align(mut self, align: &str) -> Self {
+        self.0 = self.0.x_align(align);
+        self
+    }
+
+    pub fn y_align(mut self, align: &str) -> Self {
+        self.0 = self.0.y_align(align);
+        self
+    }
+
+    pub fn h_space(mut self, x: i32) -> Self {
+        self.0 = self.0.h_space(x);
+        self
+    }
+
+    pub fn v_space(mut self, x: i32) -> Self {
+        self.0 = self.0.v_space(x);
+        self
+    }
+
+    pub fn x(mut self, x: i32) -> Self {
+        self.0 = self.0.x(x);
+        self
+    }
+
+    pub fn y(mut self, y: i32) -> Self {
+        self.0 = self.0.y(y);
+        self
+    }
+
+    pub fn width(mut self, n: u32) -> Self {
+        self.0 = self.0.width(n);
+        self
+    }
+
+    pub fn height(mut self, n: u32) -> Self {
+        self.0 = self.0.height(n);
+        self
+    }
+}
+
+impl FrameProperty {
+    pub fn take(self) -> docx_rs::FrameProperty {
+        self.0
+    }
+}
diff --git a/docx-wasm/src/lib.rs b/docx-wasm/src/lib.rs
index 8457e7489..406328ab7 100644
--- a/docx-wasm/src/lib.rs
+++ b/docx-wasm/src/lib.rs
@@ -4,6 +4,7 @@ mod comment;
 mod delete;
 mod doc;
 mod footer;
+mod frame_property;
 mod header;
 mod hyperlink;
 mod insert;
@@ -16,11 +17,13 @@ mod page_margin;
 mod page_num;
 mod page_num_type;
 mod paragraph;
+mod paragraph_property;
 mod pic;
 mod positional_tab;
 mod reader;
 mod run;
 mod run_fonts;
+mod run_property;
 mod style;
 mod table;
 mod table_cell;
@@ -37,6 +40,7 @@ pub use comment::*;
 pub use delete::*;
 pub use doc::*;
 pub use footer::*;
+pub use frame_property::*;
 pub use header::*;
 pub use hyperlink::*;
 pub use insert::*;
@@ -49,11 +53,13 @@ pub use page_margin::*;
 pub use page_num::*;
 pub use page_num_type::*;
 pub use paragraph::*;
+pub use paragraph_property::*;
 pub use pic::*;
 pub use positional_tab::*;
 pub use reader::*;
 pub use run::*;
 pub use run_fonts::*;
+pub use run_property::*;
 pub use style::*;
 pub use table::*;
 pub use table_cell::*;
diff --git a/docx-wasm/src/paragraph.rs b/docx-wasm/src/paragraph.rs
index 8249c969d..03c71129b 100644
--- a/docx-wasm/src/paragraph.rs
+++ b/docx-wasm/src/paragraph.rs
@@ -1,66 +1,6 @@
 use super::*;
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen]
-pub struct ParagraphPropertyChange(docx_rs::ParagraphPropertyChange);
-
-#[wasm_bindgen(js_name = createParagraphPropertyChange)]
-pub fn create_paragraph_property_change() -> ParagraphPropertyChange {
-    ParagraphPropertyChange(docx_rs::ParagraphPropertyChange::new())
-}
-
-#[wasm_bindgen]
-impl ParagraphPropertyChange {
-    pub fn author(mut self, author: &str) -> Self {
-        self.0 = self.0.author(author);
-        self
-    }
-
-    pub fn date(mut self, date: &str) -> Self {
-        self.0 = self.0.date(date);
-        self
-    }
-
-    // TODO: For now only numbering supported.
-    pub fn numbering(mut self, id: usize, level: usize) -> Self {
-        let id = docx_rs::NumberingId::new(id);
-        let level = docx_rs::IndentLevel::new(level);
-        self.0.property = Box::new(self.0.property.numbering(id, level));
-        self
-    }
-
-    pub fn align(mut self, alignment_type: docx_rs::AlignmentType) -> Self {
-        self.0.property = Box::new(self.0.property.align(alignment_type));
-        self
-    }
-
-    pub fn style(mut self, style_id: &str) -> Self {
-        self.0.property = Box::new(self.0.property.style(style_id));
-        self
-    }
-
-    pub fn indent(
-        mut self,
-        left: i32,
-        special_indent_kind: Option<docx_rs::SpecialIndentKind>,
-        special_indent_size: Option<i32>,
-    ) -> Self {
-        let special_indent = create_special_indent(special_indent_kind, special_indent_size);
-        self.0.property = Box::new(
-            self.0
-                .property
-                .indent(Some(left), special_indent, None, None),
-        );
-        self
-    }
-}
-
-impl ParagraphPropertyChange {
-    pub fn take(self) -> docx_rs::ParagraphPropertyChange {
-        self.0
-    }
-}
-
 #[wasm_bindgen]
 #[derive(Debug)]
 pub struct Paragraph(docx_rs::Paragraph);
@@ -328,6 +268,11 @@ impl Paragraph {
         self.0 = self.0.frame_height(n);
         self
     }
+
+    pub fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
+        self.0.property = p.take();
+        self
+    }
 }
 
 impl Paragraph {
diff --git a/docx-wasm/src/paragraph_property.rs b/docx-wasm/src/paragraph_property.rs
new file mode 100644
index 000000000..450270cba
--- /dev/null
+++ b/docx-wasm/src/paragraph_property.rs
@@ -0,0 +1,183 @@
+use super::*;
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub struct ParagraphPropertyChange(docx_rs::ParagraphPropertyChange);
+
+#[wasm_bindgen(js_name = createParagraphPropertyChange)]
+pub fn create_paragraph_property_change() -> ParagraphPropertyChange {
+    ParagraphPropertyChange(docx_rs::ParagraphPropertyChange::new())
+}
+
+#[wasm_bindgen]
+pub struct ParagraphProperty(docx_rs::ParagraphProperty);
+
+#[wasm_bindgen(js_name = createParagraphProperty)]
+pub fn create_paragraph_property() -> ParagraphProperty {
+    ParagraphProperty(docx_rs::ParagraphProperty::new())
+}
+
+#[wasm_bindgen]
+impl ParagraphProperty {
+    pub fn align(mut self, alignment_type: docx_rs::AlignmentType) -> Self {
+        self.0 = self.0.align(alignment_type);
+        self
+    }
+
+    pub fn text_alignment(mut self, alignment_type: docx_rs::TextAlignmentType) -> Self {
+        self.0 = self.0.text_alignment(alignment_type);
+        self
+    }
+
+    pub fn adjust_right_ind(mut self, v: isize) -> Self {
+        self.0 = self.0.adjust_right_ind(v);
+        self
+    }
+
+    pub fn outline_lvl(mut self, level: usize) -> Self {
+        self.0 = self.0.outline_lvl(level);
+        self
+    }
+
+    pub fn style(mut self, style_id: &str) -> Self {
+        self.0 = self.0.style(style_id);
+        self
+    }
+
+    pub fn indent(
+        mut self,
+        left: i32,
+        special_indent_kind: Option<docx_rs::SpecialIndentKind>,
+        special_indent_size: Option<i32>,
+        right: Option<i32>,
+    ) -> Self {
+        let special_indent = create_special_indent(special_indent_kind, special_indent_size);
+        self.0 = self.0.indent(Some(left), special_indent, right, None);
+        self
+    }
+
+    pub fn numbering(mut self, id: usize, level: usize) -> Self {
+        let id = docx_rs::NumberingId::new(id);
+        let level = docx_rs::IndentLevel::new(level);
+        self.0 = self.0.numbering(id, level);
+        self
+    }
+
+    pub fn line_spacing(mut self, spacing: LineSpacing) -> Self {
+        self.0 = self.0.line_spacing(spacing.take());
+        self
+    }
+
+    pub fn character_spacing(mut self, spacing: i32) -> Self {
+        self.0 = self.0.character_spacing(spacing);
+        self
+    }
+
+    pub fn keep_next(mut self, v: bool) -> Self {
+        self.0 = self.0.keep_next(v);
+        self
+    }
+
+    pub fn snap_to_grid(mut self, v: bool) -> Self {
+        self.0 = self.0.snap_to_grid(v);
+        self
+    }
+
+    pub fn keep_lines(mut self, v: bool) -> Self {
+        self.0 = self.0.keep_lines(v);
+        self
+    }
+
+    pub fn page_break_before(mut self, v: bool) -> Self {
+        self.0 = self.0.page_break_before(v);
+        self
+    }
+
+    pub fn widow_control(mut self, v: bool) -> Self {
+        self.0 = self.0.widow_control(v);
+        self
+    }
+
+    pub fn add_tab(
+        mut self,
+        val: Option<docx_rs::TabValueType>,
+        leader: Option<docx_rs::TabLeaderType>,
+        pos: Option<usize>,
+    ) -> Self {
+        self.0 = self.0.add_tab(docx_rs::Tab { val, leader, pos });
+        self
+    }
+
+    pub fn paragraph_property_change(mut self, p: ParagraphPropertyChange) -> Self {
+        self.0 = self.0.paragraph_property_change(p.take());
+        self
+    }
+
+    pub fn frame_property(mut self, p: FrameProperty) -> Self {
+        self.0 = self.0.frame_property(p.take());
+        self
+    }
+
+    pub fn run_property(mut self, p: RunProperty) -> Self {
+        self.0 = self.0.run_property(p.take());
+        self
+    }
+}
+
+impl ParagraphProperty {
+    pub fn take(self) -> docx_rs::ParagraphProperty {
+        self.0
+    }
+}
+
+#[wasm_bindgen]
+impl ParagraphPropertyChange {
+    pub fn author(mut self, author: &str) -> Self {
+        self.0 = self.0.author(author);
+        self
+    }
+
+    pub fn date(mut self, date: &str) -> Self {
+        self.0 = self.0.date(date);
+        self
+    }
+
+    // TODO: For now only numbering supported.
+    pub fn numbering(mut self, id: usize, level: usize) -> Self {
+        let id = docx_rs::NumberingId::new(id);
+        let level = docx_rs::IndentLevel::new(level);
+        self.0.property = Box::new(self.0.property.numbering(id, level));
+        self
+    }
+
+    pub fn align(mut self, alignment_type: docx_rs::AlignmentType) -> Self {
+        self.0.property = Box::new(self.0.property.align(alignment_type));
+        self
+    }
+
+    pub fn style(mut self, style_id: &str) -> Self {
+        self.0.property = Box::new(self.0.property.style(style_id));
+        self
+    }
+
+    pub fn indent(
+        mut self,
+        left: i32,
+        special_indent_kind: Option<docx_rs::SpecialIndentKind>,
+        special_indent_size: Option<i32>,
+    ) -> Self {
+        let special_indent = create_special_indent(special_indent_kind, special_indent_size);
+        self.0.property = Box::new(
+            self.0
+                .property
+                .indent(Some(left), special_indent, None, None),
+        );
+        self
+    }
+}
+
+impl ParagraphPropertyChange {
+    pub fn take(self) -> docx_rs::ParagraphPropertyChange {
+        self.0
+    }
+}
diff --git a/docx-wasm/src/run_property.rs b/docx-wasm/src/run_property.rs
new file mode 100644
index 000000000..16ad1ba04
--- /dev/null
+++ b/docx-wasm/src/run_property.rs
@@ -0,0 +1,114 @@
+use super::*;
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub struct RunProperty(docx_rs::RunProperty);
+
+#[wasm_bindgen(js_name = createRunProperty)]
+pub fn create_run_property() -> RunProperty {
+    RunProperty(docx_rs::RunProperty::new())
+}
+
+#[wasm_bindgen]
+impl RunProperty {
+    pub fn size(mut self, size: usize) -> Self {
+        self.0 = self.0.size(size);
+        self
+    }
+
+    pub fn color(mut self, c: &str) -> Self {
+        self.0 = self.0.color(c);
+        self
+    }
+
+    pub fn bold(mut self) -> Self {
+        self.0 = self.0.bold();
+        self
+    }
+
+    pub fn italic(mut self) -> Self {
+        self.0 = self.0.italic();
+        self
+    }
+
+    pub fn strike(mut self) -> Self {
+        self.0 = self.0.strike();
+        self
+    }
+
+    pub fn fonts(mut self, f: RunFonts) -> Self {
+        self.0 = self.0.fonts(f.take());
+        self
+    }
+
+    pub fn underline(mut self, line_type: &str) -> Self {
+        self.0 = self.0.underline(line_type);
+        self
+    }
+
+    pub fn vanish(mut self) -> Self {
+        self.0 = self.0.vanish();
+        self
+    }
+
+    pub fn spec_vanish(mut self) -> Self {
+        self.0 = self.0.spec_vanish();
+        self
+    }
+
+    pub fn character_spacing(mut self, spacing: i32) -> Self {
+        self.0 = self.0.character_spacing(spacing);
+        self
+    }
+
+    pub fn vert_align(mut self, a: docx_rs::VertAlignType) -> Self {
+        self.0 = self.0.vert_align(a);
+        self
+    }
+
+    pub fn delete(mut self, author: &str, date: &str) -> Self {
+        self.0 = self
+            .0
+            .delete(docx_rs::Delete::new().author(author).date(date));
+        self
+    }
+
+    pub fn insert(mut self, author: &str, date: &str) -> Self {
+        self.0 = self
+            .0
+            .insert(docx_rs::Insert::new_with_empty().author(author).date(date));
+        self
+    }
+
+    pub fn style(mut self, style_id: &str) -> Self {
+        self.0 = self.0.style(style_id);
+        self
+    }
+
+    pub fn highlight(mut self, color: &str) -> Self {
+        self.0 = self.0.highlight(color);
+        self
+    }
+
+    pub fn text_border(
+        mut self,
+        border_type: docx_rs::BorderType,
+        size: usize,
+        space: usize,
+        color: &str,
+    ) -> Self {
+        let border = docx_rs::TextBorder::new()
+            .border_type(border_type)
+            .size(size)
+            .space(space)
+            .color(color);
+        self.0 = self.0.text_border(border);
+        self
+    }
+}
+
+impl RunProperty {
+    pub fn take(self) -> docx_rs::RunProperty {
+        self.0
+    }
+}
diff --git a/docx-wasm/src/style.rs b/docx-wasm/src/style.rs
index b4d94ec9e..568366691 100644
--- a/docx-wasm/src/style.rs
+++ b/docx-wasm/src/style.rs
@@ -184,15 +184,15 @@ impl Style {
         self
     }
 
-    // pub fn run_property(mut self, p: docx_rs::RunProperty) -> Self {
-    //     self.0.run_property = p;
-    //     self
-    // }
-
-    // pub fn paragraph_property(mut self, p: docx_rs::ParagraphProperty) -> Self {
-    //     self.0.paragraph_property = p;
-    //     self
-    // }
+    pub fn run_property(mut self, p: RunProperty) -> Self {
+        self.0.run_property = p.take();
+        self
+    }
+
+    pub fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
+        self.0.paragraph_property = p.take();
+        self
+    }
 
     pub fn table_property(mut self, p: docx_rs::TableProperty) -> Self {
         self.0.table_property = p;
diff --git a/docx-wasm/src/table_of_contents.rs b/docx-wasm/src/table_of_contents.rs
index a4a59c1fe..035949092 100644
--- a/docx-wasm/src/table_of_contents.rs
+++ b/docx-wasm/src/table_of_contents.rs
@@ -96,4 +96,9 @@ impl TableOfContents {
         self.0 = self.0.add_after_table(t.take());
         self
     }
+
+    pub fn paragraph_property(mut self, p: ParagraphProperty) -> Self {
+        self.0.paragraph_property = Some(p.take());
+        self
+    }
 }
diff --git a/docx-wasm/test/__snapshots__/index.test.js.snap b/docx-wasm/test/__snapshots__/index.test.js.snap
index e02e17e17..2b9451f74 100644
--- a/docx-wasm/test/__snapshots__/index.test.js.snap
+++ b/docx-wasm/test/__snapshots__/index.test.js.snap
@@ -171041,6 +171041,14 @@ exports[`writer should write ToC with items 1`] = `"<?xml version=\\"1.0\\" enco
 
 exports[`writer should write ToC with items 2`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" standalone=\\"yes\\"?><w:document xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:r=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"http://schemas.openxmlformats.org/wordprocessingml/2006/main\\" xmlns:w10=\\"urn:schemas-microsoft-com:office:word\\" xmlns:wp=\\"http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing\\" xmlns:wps=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingShape\\" xmlns:wpg=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingGroup\\" xmlns:mc=\\"http://schemas.openxmlformats.org/markup-compatibility/2006\\" xmlns:wp14=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing\\" xmlns:w14=\\"http://schemas.microsoft.com/office/word/2010/wordml\\" xmlns:w15=\\"http://schemas.microsoft.com/office/word/2012/wordml\\" mc:Ignorable=\\"w14 wp14\\"><w:body><w:sdt><w:sdtPr><w:rPr /><w:alias w:val=\\"Table of contents\\" /></w:sdtPr><w:sdtContent><w:sdt><w:sdtPr /><w:sdtContent><w:p w14:paraId=\\"00000001\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"ToC1\\" /><w:tabs><w:tab w:val=\\"right\\" w:leader=\\"dot\\" w:pos=\\"80000\\" /></w:tabs></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"begin\\" w:dirty=\\"false\\" /><w:instrText>TOC</w:instrText><w:fldChar w:fldCharType=\\"separate\\" w:dirty=\\"false\\" /></w:r><w:r><w:rPr /><w:t xml:space=\\"preserve\\">Hello!!</w:t></w:r><w:r><w:rPr /><w:tab /></w:r><w:r><w:rPr /><w:fldChar w:fldCharType=\\"begin\\" w:dirty=\\"false\\" /><w:instrText>PAGEREF _Toc00000000 \\\\h</w:instrText><w:fldChar w:fldCharType=\\"separate\\" w:dirty=\\"false\\" /><w:t xml:space=\\"preserve\\">2</w:t><w:fldChar w:fldCharType=\\"end\\" w:dirty=\\"false\\" /></w:r></w:p><w:p w14:paraId=\\"00000002\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"ToC2\\" /><w:tabs><w:tab w:val=\\"right\\" w:leader=\\"dot\\" w:pos=\\"80000\\" /></w:tabs></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">World</w:t></w:r><w:r><w:rPr /><w:tab /></w:r><w:r><w:rPr /><w:fldChar w:fldCharType=\\"begin\\" w:dirty=\\"false\\" /><w:instrText>PAGEREF _Toc00000001 \\\\h</w:instrText><w:fldChar w:fldCharType=\\"separate\\" w:dirty=\\"false\\" /><w:t xml:space=\\"preserve\\">3</w:t><w:fldChar w:fldCharType=\\"end\\" w:dirty=\\"false\\" /></w:r></w:p><w:p w14:paraId=\\"00000003\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"ToC2\\" /></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"end\\" w:dirty=\\"false\\" /></w:r></w:p></w:sdtContent></w:sdt></w:sdtContent></w:sdt><w:p w14:paraId=\\"00000004\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading1\\" /><w:pageBreakBefore /></w:pPr><w:bookmarkStart w:id=\\"1\\" w:name=\\"_Toc00000000\\" /><w:r><w:rPr /><w:t xml:space=\\"preserve\\">Hello!!</w:t></w:r><w:bookmarkEnd w:id=\\"1\\" /></w:p><w:p w14:paraId=\\"00000005\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading2\\" /><w:pageBreakBefore /></w:pPr><w:bookmarkStart w:id=\\"2\\" w:name=\\"_Toc00000001\\" /><w:r><w:rPr /><w:t xml:space=\\"preserve\\">World</w:t></w:r><w:bookmarkEnd w:id=\\"2\\" /></w:p><w:sectPr><w:pgSz w:w=\\"11906\\" w:h=\\"16838\\" /><w:pgMar w:top=\\"1985\\" w:right=\\"1701\\" w:bottom=\\"1701\\" w:left=\\"1701\\" w:header=\\"851\\" w:footer=\\"992\\" w:gutter=\\"0\\" /><w:cols w:space=\\"425\\" w:num=\\"1\\" /></w:sectPr></w:body></w:document>"`;
 
+exports[`writer should write ToC with paragraphProperty 1`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?><Relationships xmlns=\\"http://schemas.openxmlformats.org/package/2006/relationships\\"><Relationship Id=\\"rId1\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\\" Target=\\"styles.xml\\" /><Relationship Id=\\"rId2\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable\\" Target=\\"fontTable.xml\\" /><Relationship Id=\\"rId3\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/settings\\" Target=\\"settings.xml\\" /><Relationship Id=\\"rId5\\" Type=\\"http://schemas.microsoft.com/office/2011/relationships/commentsExtended\\" Target=\\"commentsExtended.xml\\" /></Relationships>"`;
+
+exports[`writer should write ToC with paragraphProperty 2`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" standalone=\\"yes\\"?><w:document xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:r=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"http://schemas.openxmlformats.org/wordprocessingml/2006/main\\" xmlns:w10=\\"urn:schemas-microsoft-com:office:word\\" xmlns:wp=\\"http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing\\" xmlns:wps=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingShape\\" xmlns:wpg=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingGroup\\" xmlns:mc=\\"http://schemas.openxmlformats.org/markup-compatibility/2006\\" xmlns:wp14=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing\\" xmlns:w14=\\"http://schemas.microsoft.com/office/word/2010/wordml\\" xmlns:w15=\\"http://schemas.microsoft.com/office/word/2012/wordml\\" mc:Ignorable=\\"w14 wp14\\"><w:body><w:sdt><w:sdtPr><w:rPr /><w:alias w:val=\\"Table of contents\\" /></w:sdtPr><w:sdtContent><w:p w14:paraId=\\"00000001\\"><w:pPr><w:rPr /></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"begin\\" w:dirty=\\"true\\" /><w:instrText>TOC</w:instrText><w:fldChar w:fldCharType=\\"separate\\" w:dirty=\\"false\\" /></w:r></w:p><w:p w14:paraId=\\"00000002\\"><w:pPr><w:rPr /></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"end\\" w:dirty=\\"false\\" /></w:r></w:p></w:sdtContent></w:sdt><w:p w14:paraId=\\"00000001\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading1\\" /><w:pageBreakBefore /></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">Hello!!</w:t></w:r></w:p><w:p w14:paraId=\\"00000002\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading2\\" /><w:pageBreakBefore /></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">World</w:t></w:r></w:p><w:sectPr><w:pgSz w:w=\\"11906\\" w:h=\\"16838\\" /><w:pgMar w:top=\\"1985\\" w:right=\\"1701\\" w:bottom=\\"1701\\" w:left=\\"1701\\" w:header=\\"851\\" w:footer=\\"992\\" w:gutter=\\"0\\" /><w:cols w:space=\\"425\\" w:num=\\"1\\" /></w:sectPr></w:body></w:document>"`;
+
+exports[`writer should write ToC with paragraphProperty without sdt 1`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?><Relationships xmlns=\\"http://schemas.openxmlformats.org/package/2006/relationships\\"><Relationship Id=\\"rId1\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\\" Target=\\"styles.xml\\" /><Relationship Id=\\"rId2\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable\\" Target=\\"fontTable.xml\\" /><Relationship Id=\\"rId3\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/settings\\" Target=\\"settings.xml\\" /><Relationship Id=\\"rId5\\" Type=\\"http://schemas.microsoft.com/office/2011/relationships/commentsExtended\\" Target=\\"commentsExtended.xml\\" /></Relationships>"`;
+
+exports[`writer should write ToC with paragraphProperty without sdt 2`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" standalone=\\"yes\\"?><w:document xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:r=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"http://schemas.openxmlformats.org/wordprocessingml/2006/main\\" xmlns:w10=\\"urn:schemas-microsoft-com:office:word\\" xmlns:wp=\\"http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing\\" xmlns:wps=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingShape\\" xmlns:wpg=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingGroup\\" xmlns:mc=\\"http://schemas.openxmlformats.org/markup-compatibility/2006\\" xmlns:wp14=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing\\" xmlns:w14=\\"http://schemas.microsoft.com/office/word/2010/wordml\\" xmlns:w15=\\"http://schemas.microsoft.com/office/word/2012/wordml\\" mc:Ignorable=\\"w14 wp14\\"><w:body><w:p w14:paraId=\\"00000001\\"><w:pPr><w:rPr /></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"begin\\" w:dirty=\\"true\\" /><w:instrText>TOC</w:instrText><w:fldChar w:fldCharType=\\"separate\\" w:dirty=\\"false\\" /></w:r></w:p><w:p w14:paraId=\\"00000002\\"><w:pPr><w:rPr /></w:pPr><w:r><w:rPr /><w:fldChar w:fldCharType=\\"end\\" w:dirty=\\"false\\" /></w:r></w:p><w:p w14:paraId=\\"00000003\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading1\\" /><w:pageBreakBefore /></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">Hello!!</w:t></w:r></w:p><w:p w14:paraId=\\"00000004\\"><w:pPr><w:rPr /><w:pStyle w:val=\\"Heading2\\" /><w:pageBreakBefore /></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">World</w:t></w:r></w:p><w:sectPr><w:pgSz w:w=\\"11906\\" w:h=\\"16838\\" /><w:pgMar w:top=\\"1985\\" w:right=\\"1701\\" w:bottom=\\"1701\\" w:left=\\"1701\\" w:header=\\"851\\" w:footer=\\"992\\" w:gutter=\\"0\\" /><w:cols w:space=\\"425\\" w:num=\\"1\\" /></w:sectPr></w:body></w:document>"`;
+
 exports[`writer should write align 1`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?><Relationships xmlns=\\"http://schemas.openxmlformats.org/package/2006/relationships\\"><Relationship Id=\\"rId1\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles\\" Target=\\"styles.xml\\" /><Relationship Id=\\"rId2\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable\\" Target=\\"fontTable.xml\\" /><Relationship Id=\\"rId3\\" Type=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/settings\\" Target=\\"settings.xml\\" /><Relationship Id=\\"rId5\\" Type=\\"http://schemas.microsoft.com/office/2011/relationships/commentsExtended\\" Target=\\"commentsExtended.xml\\" /></Relationships>"`;
 
 exports[`writer should write align 2`] = `"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" standalone=\\"yes\\"?><w:document xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:r=\\"http://schemas.openxmlformats.org/officeDocument/2006/relationships\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"http://schemas.openxmlformats.org/wordprocessingml/2006/main\\" xmlns:w10=\\"urn:schemas-microsoft-com:office:word\\" xmlns:wp=\\"http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing\\" xmlns:wps=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingShape\\" xmlns:wpg=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingGroup\\" xmlns:mc=\\"http://schemas.openxmlformats.org/markup-compatibility/2006\\" xmlns:wp14=\\"http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing\\" xmlns:w14=\\"http://schemas.microsoft.com/office/word/2010/wordml\\" xmlns:w15=\\"http://schemas.microsoft.com/office/word/2012/wordml\\" mc:Ignorable=\\"w14 wp14\\"><w:body><w:p w14:paraId=\\"00000001\\"><w:pPr><w:rPr /><w:jc w:val=\\"both\\" /></w:pPr><w:r><w:rPr /><w:t xml:space=\\"preserve\\">Hello world!!</w:t></w:r></w:p><w:sectPr><w:pgSz w:w=\\"11906\\" w:h=\\"16838\\" /><w:pgMar w:top=\\"1985\\" w:right=\\"1701\\" w:bottom=\\"1701\\" w:left=\\"1701\\" w:header=\\"851\\" w:footer=\\"992\\" w:gutter=\\"0\\" /><w:cols w:space=\\"425\\" w:num=\\"1\\" /></w:sectPr></w:body></w:document>"`;
diff --git a/docx-wasm/test/index.test.js b/docx-wasm/test/index.test.js
index bf49fd0ba..34d7b77c6 100644
--- a/docx-wasm/test/index.test.js
+++ b/docx-wasm/test/index.test.js
@@ -1085,4 +1085,78 @@ describe("writer", () => {
     }
     writeFileSync("../output/js/ptab.docx", buffer);
   });
+
+  test("should write ToC with paragraphProperty", () => {
+    const p1 = new w.Paragraph()
+      .addRun(new w.Run().addText("Hello!!"))
+      .pageBreakBefore(true)
+      .style("Heading1");
+    const style1 = new w.Style("Heading1", "paragraph").name("Heading 1");
+    const p2 = new w.Paragraph()
+      .addRun(new w.Run().addText("World"))
+      .pageBreakBefore(true)
+      .style("Heading2");
+    const runProperty = new w.RunProperty().bold().color("red");
+    const style2 = new w.Style("Heading2", "paragraph")
+      .name("Heading 2")
+      .runProperty(runProperty);
+    const buffer = new w.Docx()
+      .addTableOfContents(
+        new w.TableOfContents()
+          .alias("Table of contents")
+          .dirty()
+          .paragraphProperty(new w.ParagraphProperty().style("11"))
+      )
+      .addParagraph(p1)
+      .addParagraph(p2)
+      .addStyle(style1)
+      .addStyle(style2)
+      .build();
+    writeFileSync("../output/js/toc_with_paragraph_property.docx", buffer);
+    const z = new Zip(Buffer.from(buffer));
+    for (const e of z.getEntries()) {
+      if (e.entryName.match(/document.xml/)) {
+        expect(z.readAsText(e)).toMatchSnapshot();
+      }
+    }
+  });
+
+  test("should write ToC with paragraphProperty without sdt", () => {
+    const p1 = new w.Paragraph()
+      .addRun(new w.Run().addText("Hello!!"))
+      .pageBreakBefore(true)
+      .style("Heading1");
+    const style1 = new w.Style("Heading1", "paragraph").name("Heading 1");
+    const p2 = new w.Paragraph()
+      .addRun(new w.Run().addText("World"))
+      .pageBreakBefore(true)
+      .style("Heading2");
+    const runProperty = new w.RunProperty().bold().color("red");
+    const style2 = new w.Style("Heading2", "paragraph")
+      .name("Heading 2")
+      .runProperty(runProperty);
+    const buffer = new w.Docx()
+      .addTableOfContents(
+        new w.TableOfContents()
+          .alias("Table of contents")
+          .withoutSdt()
+          .dirty()
+          .paragraphProperty(new w.ParagraphProperty().style("11"))
+      )
+      .addParagraph(p1)
+      .addParagraph(p2)
+      .addStyle(style1)
+      .addStyle(style2)
+      .build();
+    writeFileSync(
+      "../output/js/toc_with_paragraph_property_without_sdt.docx",
+      buffer
+    );
+    const z = new Zip(Buffer.from(buffer));
+    for (const e of z.getEntries()) {
+      if (e.entryName.match(/document.xml/)) {
+        expect(z.readAsText(e)).toMatchSnapshot();
+      }
+    }
+  });
 });