Progress for image node for TipTap: UI and dialog for image settings

ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml

@@ -657,10 +657,59 @@
                 </div>
                 <template id="librecms-image-node-view">
                     <figure>
-                        <img src="#{request.contextPath}/assets/remixicon/image-line.svg" />
+                        <!--img src="#{request.contextPath}/assets/remixicon/image-line.svg" />-->
-                        <button class="select-image-button">
+                        <img alt="#{CmsAdminMessages['cms_editor.image_node_view.image.none']}" 
-                            #{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}
+                             src=""
-                        </button>
+                             style="min-height: 4em;" />
+                        <div class="border-light librecms-image-node-view-buttons">
+                            <button class="btn btn-outline-dark select-image-button">
+                                <librecms:remixSvgIcon icon="ri-image-edit-line" />
+                                <span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span>
+                            </button>
+                            <button class="btn btn-outline-dark image-settings-button"
+                                    data-toggle="modal"
+                                    data-target="#librecms-image-node-view-settings-dialog-">
+                                <librecms:remixSvgIcon icon="ri-settings-2-line" />
+                                <span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span>
+                            </button>
+                            <div aria-hidden="true"
+                                 aria-labelledby="librecms-image-node-view-settings-dialog-title-"
+                                 class="modal fade image-settings-dialog"
+                                 id="librecms-image-node-view-settings-dialog-"
+                                 tabindex="-1">
+                                <div class="modal-dialog">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h3 class="modal-title"
+                                                id="librecms-image-node-view-settings-dialog-title-">
+                                                #{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.title']}
+                                            </h3>
+                                            <button aria-label="#{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.close']}"
+                                                    class="close"
+                                                    data-dismiss="modal"
+                                                    type="button">
+                                                <bootstrap:svgIcon icon="x-circle" />
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            Image Node View Settings Dialog
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button class="btn btn-warning"
+                                                    data-dismiss="modal"
+                                                    type="button">
+                                                #{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.close']}
+                                            </button>
+                                            <button class="btn btn-primary"
+                                                    data-dismiss="modal"
+                                                    type="button">
+                                                #{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.save']}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <figcaption aria-label="#{CmsAdminMessages['cms_editor.image_node_view.figcaption.label']}"
                                     contenteditable="true">
                             #{CmsAdminMessages['cms_editor.image_node_view.figcaption.placeholder']}

ccm-cms/src/main/scss/content-sections/_custom.scss

@@ -132,3 +132,21 @@ table.wor{
     }
 }
 
+.cms-tiptap-editor-canvas {
+    max-height: 75vh;
+    overflow: scroll;
+}
+
+
+
+.librecms-image-node-view {
+    background-color: #ededed;
+    position: relative;
+
+    .librecms-image-node-view-buttons {    
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 3em;
+    }
+}

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

@@ -465,6 +465,31 @@ const ImageNode = Node.create({
 
   defining: true,
 
+  addAttributes() {
+    return {
+      altText: {
+        parseHTML: (element) => {
+          const imgElem = element.querySelector("img");
+          if (imgElem) {
+            return imgElem.alt;
+          } else {
+            return "";
+          }
+        },
+      },
+      figCaption: {
+        parseHTML: (element) => {
+          const figCaptionElem = element.querySelector("figcaption");
+          if (figCaptionElem) {
+            return figCaptionElem.innerHTML;
+          } else {
+            return "";
+          }
+        },
+      },
+    };
+  },
+
   addCommands() {
     return {
       setLibreCmsImage:
@@ -476,26 +501,77 @@ const ImageNode = Node.create({
   },
 
   addNodeView() {
-    return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
+    return ({
-        const templateNode = document.querySelector("#librecms-image-node-view");
+      editor,
-        if (!templateNode) {
+      node,
-            const errorMsg = document.createElement("div");
+      getPos,
-            errorMsg.classList.add("alert");
+      HTMLAttributes,
-            errorMsg.classList.add("alert-danger");
+      decorations,
-            errorMsg.textContent = "Failed to create image node view.";
+      extension,
-            
+    }) => {
-            return errorMsg;
+      const templateNode = document.querySelector("#librecms-image-node-view");
-        }
+      if (!templateNode) {
+        const errorMsg = document.createElement("div");
+        errorMsg.classList.add("alert");
+        errorMsg.classList.add("alert-danger");
+        errorMsg.textContent = "Failed to create image node view.";
 
-        const template = templateNode as HTMLTemplateElement;
+        return errorMsg;
-        const nodeView = template.content.cloneNode(true);
+      }
-        const dom = document.createElement("div");
-        dom.appendChild(nodeView);
 
-        return {
+      console.log("Node: ");
-            dom,
+      console.dir(node);
+
+      console.log(`getPos =`);
+      console.dir(getPos);
+
+      console.log(`HTMLAttributes =`);
+      console.dir(HTMLAttributes);
+
+      console.log(`decorations = ${decorations}`);
+      console.dir(decorations);
+
+      console.log(`extension = ${extension}`);
+      console.dir(extension);
+
+      const template = templateNode as HTMLTemplateElement;
+      const nodeView = template.content.cloneNode(true) as HTMLElement;
+      const dialogId = `librecms-image-node-view-settings-dialog-${Math.floor(
+        Math.random() * 1000000000
+      )}`;
+      const dialogTitleId = `${dialogId}-title`;
+      const settingsButtonElem = nodeView.querySelector(
+        ".image-settings-button"
+      );
+      if (settingsButtonElem) {
+        settingsButtonElem.setAttribute("data-target", `#${dialogId}`);
+      }
+      const settingsDialogElem = nodeView.querySelector(
+        ".modal.image-settings-dialog"
+      );
+      if (settingsDialogElem) {
+        settingsDialogElem.id = dialogId;
+        settingsDialogElem.setAttribute("aria-labelledby", dialogTitleId);
+
+        const settingsDialogTitleElem =
+          settingsDialogElem.querySelector(".modal-title");
+        if (settingsDialogTitleElem) {
+          settingsDialogTitleElem.id = dialogTitleId;
         }
       }
+
+      const figCaptionElem = nodeView.querySelector("figcaption");
+      if (node.attrs.figCaption !== "" && figCaptionElem) {
+        figCaptionElem.innerHTML = node.attrs.figCaption;
+      }
+      const dom = document.createElement("div");
+      dom.classList.add("librecms-image-node-view", "p-2");
+      dom.appendChild(nodeView);
+
+      return {
+        dom,
+      };
+    };
   },
 
   parseHTML() {
@@ -510,7 +586,7 @@ const ImageNode = Node.create({
     return [
       "figure",
       mergeAttributes(HTMLAttributes, { "data-type": "librecms-image-node" }),
-      ["img", {"src": "/assets/remixicon/image-line.svg"}],
+      ["img", { src: "/assets/remixicon/image-line.svg" }],
       ["figcaption"],
     ];
   },