Add image borders (#2472)

* Add image borders

* Fix prettier

* Fix spelling

* Fix spelling

* Finish feature

* Update demo

* Try and fix demo 14

src/file/drawing/effect-extent/effect-extent-attributes.ts

@@ -1,15 +0,0 @@
-import { XmlAttributeComponent } from "@file/xml-components";
-
-export class EffectExtentAttributes extends XmlAttributeComponent<{
-    readonly b?: number;
-    readonly l?: number;
-    readonly r?: number;
-    readonly t?: number;
-}> {
-    protected readonly xmlKeys = {
-        b: "b",
-        l: "l",
-        r: "r",
-        t: "t",
-    };
-}

src/file/drawing/effect-extent/effect-extent.ts

@@ -1,17 +1,31 @@
-import { XmlComponent } from "@file/xml-components";
-import { EffectExtentAttributes } from "./effect-extent-attributes";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-export class EffectExtent extends XmlComponent {
-    public constructor() {
-        super("wp:effectExtent");
+export type EffectExtentAttributes = {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+};
 
-        this.root.push(
-            new EffectExtentAttributes({
-                b: 0,
-                l: 0,
-                r: 0,
-                t: 0,
-            }),
-        );
-    }
-}
+export const createEffectExtent = ({ top, right, bottom, left }: EffectExtentAttributes): XmlComponent =>
+    new BuilderElement<EffectExtentAttributes>({
+        name: "wp:effectExtent",
+        attributes: {
+            top: {
+                key: "t",
+                value: top,
+            },
+            right: {
+                key: "r",
+                value: right,
+            },
+            bottom: {
+                key: "b",
+                value: bottom,
+            },
+            left: {
+                key: "l",
+                value: left,
+            },
+        },
+    });