Process data from image node settings dialog

ccm-cms/src/main/typescript/content-sections/article-text-step.ts

@@ -23,6 +23,24 @@ document.addEventListener("DOMContentLoaded", event => {
             variantUrl
         );
 
-        builder.buildEditor();
+        builder
+            .buildEditor()
+            .then(editor => {
+                    // Temporary for development
+                    const submitButton = document.querySelector(".cms-editor-save-button");
+
+                    if (submitButton) {
+                        submitButton.addEventListener("click", (event) => {
+                            event.preventDefault();
+
+                            console.log("HTML output of editor: ");
+                            console.log(editor.getEditor().getHTML());
+                        });
+                    }
+                }
+            );
     }
+
+    
+
 });

ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts

@@ -158,15 +158,25 @@ export const ImageNode = Node.create({
                 const settingDialogLabels =
                     settingsDialogElem.querySelectorAll("*[for]");
                 for (let i = 0; i < settingDialogLabels.length; i++) {
-                    const label = settingDialogLabels.item(i);
+                    const label = settingDialogLabels.item(
-                    label.id = `${label.id}-${dialogIdNr}`;
+                        i
+                    ) as HTMLLabelElement;
+                    label.setAttribute(
+                        "for",
+                        `${label.getAttribute("for")}-${dialogIdNr}`
+                    );
                 }
                 const describedElems = settingsDialogElem.querySelectorAll(
                     "*[aria-describedby]"
                 );
                 for (let i = 0; i < describedElems.length; i++) {
                     const describedElem = describedElems.item(i);
-                    describedElem.id = `${describedElem.id}-${dialogIdNr}`;
+                    describedElem.setAttribute(
+                        "aria-describedby",
+                        `${describedElem.getAttribute(
+                            "aria-describedby"
+                        )}-${dialogIdNr}`
+                    );
                 }
 
                 const submitButton = settingsDialogElem.querySelector(
@@ -177,15 +187,100 @@ export const ImageNode = Node.create({
                     `input#alttext-${dialogIdNr}`
                 );
                 const alignSelect = settingsDialogElem.querySelector(
-                    `input#align-${dialogIdNr}`
+                    `select#align-${dialogIdNr}`
                 );
 
-                // ToDo: Init inputs
+                const sizeSelect = settingsDialogElem.querySelector(
+                    `select#size-${dialogIdNr}`
+                );
+
+                const fullSizeOverlayInput = settingsDialogElem.querySelector(
+                    `input#fullsizeoverlay-${dialogIdNr}`
+                );
+
+                if (altTextInput) {
+                    (altTextInput as HTMLInputElement).value =
+                        node.attrs.altText;
+                } else {
+                    console.warn("Input for alt text not found.");
+                }
+
+                if (alignSelect) {
+                    const optionElems = alignSelect.querySelectorAll("option");
+                    for (let i = 0; i < optionElems.length; i++) {
+                        const optionElem = optionElems.item(
+                            i
+                        ) as HTMLOptionElement;
+                        if (optionElem.value === node.attrs.align) {
+                            optionElem.selected = true;
+                        }
+                    }
+                } else {
+                    console.warn("Select for image alignment not found.");
+                }
+
+                if (sizeSelect) {
+                    const optionElems = sizeSelect.querySelectorAll("option");
+                    for (let i = 0; i < optionElems.length; i++) {
+                        const optionElem = optionElems.item(
+                            i
+                        ) as HTMLOptionElement;
+                        if (optionElem.value === node.attrs.size) {
+                            optionElem.selected = true;
+                        }
+                    }
+                } else {
+                    console.warn("Select for image size not found.");
+                }
+
+                if (fullSizeOverlayInput) {
+                    (fullSizeOverlayInput as HTMLInputElement).checked =
+                        node.attrs.fullSizeOverlay;
+                } else {
+                    console.warn("Input for fullSizeOverlay not found.");
+                }
 
                 if (submitButton) {
                     submitButton.addEventListener("click", (event) => {
-                        // ToDo: Read values from inputs and update node.attrs
+                        const inputElem = altTextInput as HTMLInputElement;
+                        if (altTextInput) {
+                            node.attrs.altText = inputElem.value;
+                        } else {
+                            console.warn("Input for alt text not found.");
+                        }
+
+                        if (alignSelect) {
+                            const selectElem = alignSelect as HTMLSelectElement;
+                            node.attrs.align =
+                                selectElem.selectedOptions.item(0)?.value;
+                        } else {
+                            console.warn(
+                                "Select for image alignment not found."
+                            );
+                        }
+
+                        if (sizeSelect) {
+                            const selectElem = sizeSelect as HTMLSelectElement;
+                            node.attrs.size =
+                                selectElem.selectedOptions.item(0)?.value;
+                        } else {
+                            console.warn("Select for image size not found.");
+                        }
+
+                        if (fullSizeOverlayInput) {
+                            const inputElem =
+                                fullSizeOverlayInput as HTMLInputElement;
+                            node.attrs.fullSizeOverlay = inputElem.checked;
+                        } else {
+                            console.warn(
+                                "Input for fullSizeOverlay not found."
+                            );
+                        }
                     });
+                } else {
+                    console.warn(
+                        "Submit button for image settings dialog not found."
+                    );
                 }
             }