Integrated audio node and video node into editor.

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

@@ -879,7 +879,7 @@
                             <button class="btn btn-outline-dark select-video-button"
                                     data-toggle="modal"
                                     data-target="#librecms-video-node-select-video-dialog-">
-                                <librecms:remixSvgIcon icon="ri-video-edit-line" />
+                                <librecms:remixSvgIcon icon="ri-video-line" />
                                 <span class="sr-only">#{CmsAdminMessages['cms_editor.video_node_view.select_video.label']}</span>
                             </button>
                             <div aria-hidden="true"

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

@@ -139,12 +139,15 @@ table.wor{
 }
 
 
-
+.librecms-audio-node-view,
-.librecms-image-node-view {
+.librecms-image-node-view,
+.librecms-video-node-view {
     background-color: #ededed;
     position: relative;
 
-    .librecms-image-node-view-buttons {    
+    .librecms-audio-node-view-buttons,
+    .librecms-image-node-view-buttons,
+    .librecms-video-node-view-buttons {    
         background-color: rgba(255,255,255,0.5);
 
         position: absolute;
@@ -158,48 +161,68 @@ table.wor{
         }
     }
 
-    &.librecms-image-node-width-25 {
+    &.librecms-audio-node-width-25,
+    &.librecms-image-node-width-25,
+    &.librecms-video-node-width-25 {
         width: 25%;
     }
 
-    &.librecms-image-node-width-33 {
+    &.librecms-audio-node-width-33,
+    &.librecms-image-node-width-33,
+    &.librecms-video-node-width-33 {
         width: 33%;
     }
 
-    &.librecms-image-node-width-50 {
+    &.librecms-audio-node-width-50,
+    &.librecms-image-node-width-50,
+    &.librecms-video-node-width-50 {
         width: 50%;
     }
 
-    &.librecms-image-node-width-66 {
+    &.librecms-audio-node-width-66,
+    &.librecms-image-node-width-66,
+    &.librecms-video-node-width-66 {
         width: 66%;
     }
 
-    &.librecms-image-node-width-75 {
+    &.librecms-audio-node-width-75,
+    &.librecms-image-node-width-75,
+    &.librecms-video-node-width-75 {
         width: 75%;
     }
 
-    &.librecms-image-node-width-100 {
+    &.librecms-audio-node-width-100,
+    &.librecms-image-node-width-100,
+    &.librecms-video-node-width-100 {
         width: 100%;
     }
 
-    &.librecms-image-node-align-floatleft {
+    &.librecms-audio-node-align-floatleft,
+    &.librecms-image-node-align-floatleft,
+    &.librecms-video-node-align-floatleft {
         float: left;
     }
 
-    &.librecms-image-node-align-center {
+    &.librecms-audio-node-align-center,
+    &.librecms-image-node-align-center,
+    &.librecms-video-node-align-center {
         margin-left: auto;
         margin-right: auto;
     }
 
-    &.librecms-image-node-align-floatright {
+    &.librecms-audio-node-align-floatright,
+    &.librecms-image-node-align-floatright,
+    &.librecms-video-node-align-floatright {
         float: right;
     }
 
-    figure img {
+    figure audio, figure img, figure video {
         max-width: 100%;
     }
 
-    .select-image-dialog {
+    .select-audio-dialog,
+    .select-image-dialog,
+    .select-video-dialog {
         table {
             border: none;
             width: 100%;

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

@@ -10,7 +10,9 @@ import TableRow from "@tiptap/extension-table-row";
 import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
 
+import AudioNode from "./cms-editor/audio-node";
 import ImageNode from "./cms-editor/image-node";
+import VideoNode from "./cms-editor/video-node";
 
 const BUTTONS: CmsEditorButton[] = [
     {
@@ -547,6 +549,27 @@ const BUTTONS: CmsEditorButton[] = [
                 .run();
         },
     },
+    {
+        selector: ".tiptap-insert-audio",
+        command: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .chain()
+                .focus()
+                .setLibreCmsAudio()
+                .insertContent("<p></p>")
+                .run();
+        },
+        can: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .can()
+                .chain()
+                .focus()
+                .setLibreCmsAudio()
+                .run();
+        },
+    },
     {
         selector: ".tiptap-insert-image",
         command: (cmsEditor) => {
@@ -568,6 +591,27 @@ const BUTTONS: CmsEditorButton[] = [
                 .run();
         },
     },
+    {
+        selector: ".tiptap-insert-video",
+        command: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .chain()
+                .focus()
+                .setLibreCmsVideo()
+                .insertContent("<p></p>")
+                .run();
+        },
+        can: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .can()
+                .chain()
+                .focus()
+                .setLibreCmsVideo()
+                .run();
+        },
+    },
     // {
     //     selector: "",
     //     command: cmsEditor => {},
@@ -732,6 +776,7 @@ class CmsEditorBuilder {
         const editor: Editor = new Editor({
             element: canvasElement,
             extensions: [
+                AudioNode,
                 Gapcursor,
                 ImageNode,
                 StarterKit,
@@ -746,6 +791,7 @@ class CmsEditorBuilder {
                 TableRow,
                 TableHeader,
                 TableCell,
+                VideoNode,
             ],
             content: variant,
         });

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

@@ -415,12 +415,12 @@ function loadAudioAssets(
                                     "click",
                                     (event) => {
                                         const audioUrl = `/content-sections/info/audio/uuid-${audioAsset["uuid"]}`;
-                                        node.attrs.imgSrc = audioUrl;
+                                        node.attrs.audioSrc = audioUrl;
                                         if (audioElem) {
                                             audioElem.src = audioUrl;
                                         } else {
                                             console.error(
-                                                "img element not found."
+                                                "audio element not found."
                                             );
                                         }
                                     }