feat(video): add alignment options for video elements

Author: zeeshan-ahmad-hdw

src/components/menus/bubble.ts

@@ -4,7 +4,7 @@ import type { Editor } from '@tiptap/react';
 import { ActionButton } from '@/components';
 import { BUBBLE_TEXT_LIST, IMAGE_SIZE, VIDEO_SIZE } from '@/constants';
 import { localeActions } from '@/locales';
-import type { ButtonViewParams, ButtonViewReturn, ExtensionNameKeys } from '@/types';
+import type { ButtonViewParams, ButtonViewReturn, ExtensionNameKeys,VideoAlignment } from '@/types';
 
 /** Represents the size types for bubble images or videos */
 type BubbleImageOrVideoSizeType = 'size-small' | 'size-medium' | 'size-large';
@@ -189,6 +189,28 @@ function imageDrawerAlignMenus(editor: Editor): BubbleMenuItem[] {
     },
   }));
 }
+function videoAlignMenus(editor: Editor): BubbleMenuItem[] {
+  const alignments: {
+    type: VideoAlignment;
+    icon: string;
+    tooltip: string;
+  }[] = [
+    { type: 'flex-start', icon: 'AlignLeft', tooltip: 'Align left' },
+    { type: 'center', icon: 'AlignCenter', tooltip: 'Align center' },
+    { type: 'flex-end', icon: 'AlignRight', tooltip: 'Align right' },
+  ];
+
+  return alignments.map((align) => ({
+    type: `video-align-${align.type}`,
+    component: ActionButton,
+    componentProps: {
+      tooltip: align.tooltip,
+      icon: align.icon,
+      action: () => editor.commands.updateVideo({ align: align.type }),
+      isActive: () => editor.getAttributes('video').align === align.type,
+    },
+  }));
+}
 
 function videoSizeMenus(editor: Editor): BubbleMenuItem[] {
   const types: BubbleImageOrVideoSizeType[] = ['size-small', 'size-medium', 'size-large'];
@@ -356,6 +378,7 @@ export function getBubbleDrawer(editor: Editor): BubbleMenuItem[] {
 export function getBubbleVideo(editor: Editor): BubbleMenuItem[] {
   return [
     ...videoSizeMenus(editor),
+    ...videoAlignMenus(editor),
     {
       type: 'remove',
       component: ActionButton,

src/extensions/Video/Video.ts

@@ -2,7 +2,8 @@ import { Node } from '@tiptap/core';
 
 import { VIDEO_SIZE } from '@/constants';
 import ActionVideoButton from '@/extensions/Video/components/ActiveVideoButton';
-import type { GeneralOptions } from '@/types';
+import type { GeneralOptions,VideoAlignment } from '@/types';
+
 import { getCssUnitWithDefault } from '@/utils/utils';
 
 /**
@@ -54,6 +55,8 @@ interface SetVideoOptions {
   src: string
   /** The width of the video */
   width: string | number
+  
+  align: VideoAlignment;
 }
 
 declare module '@tiptap/core' {
@@ -113,7 +116,7 @@ export const Video = /* @__PURE__ */ Node.create<VideoOptions>({
       width: VIDEO_SIZE['size-medium'],
       HTMLAttributes: {
         class: 'iframe-wrapper',
-        style: 'display: flex;justify-content: center;',
+        // style: 'display: flex;justify-content: center;',
       },
       button: ({ editor, t }: any) => {
         return {
@@ -157,6 +160,12 @@ export const Video = /* @__PURE__ */ Node.create<VideoOptions>({
         default: this.options.allowFullscreen,
         parseHTML: () => this.options.allowFullscreen,
       },
+      align: {
+        default: 'center', // Default alignment
+        renderHTML: ({ align }) => ({
+          align: align, 
+        }),
+      },
     };
   },
 
@@ -169,27 +178,35 @@ export const Video = /* @__PURE__ */ Node.create<VideoOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const { width = '100%' } = HTMLAttributes ?? {};
+    const { width = '100%' ,align = 'center' } = HTMLAttributes ?? {};
 
-    const iframeHTMLAttributes = {
+    const iframeHTMLAttributes = { 
       ...HTMLAttributes,
       width: '100%',
       height: '100%',
     };
 
     const responsiveStyle = `position: relative;overflow: hidden;display: flex;flex: 1;max-width: ${width};`;
     const responsiveSizesStyle = `flex: 1;padding-bottom: ${(9 / 16) * 100}%;`;
+    const positionStyle = `display: flex; justify-content: ${align};`;
 
     const iframeDOM = ['iframe', iframeHTMLAttributes];
     const sizesDOM = ['div', { style: responsiveSizesStyle }];
-    const responsiveDOM = ['div', { style: responsiveStyle }, sizesDOM, iframeDOM];
+    const responsiveDOM = [
+      'div',
+      { style: responsiveStyle },
+      sizesDOM,
+      iframeDOM,
+    ];
+    const positionDiv = ['div', { style: positionStyle }, responsiveDOM];
 
     const divAttrs = {
       ...this.options.HTMLAttributes,
+      class: 'iframe-wrapper',
       'data-video': '',
     };
 
-    return ['div', divAttrs, responsiveDOM];
+    return ['div', divAttrs, positionDiv];
   },
 
   addCommands() {

src/types.ts

@@ -262,3 +262,5 @@ export interface NameValueOption<T = string> {
   name: string
   value: T
 }
+
+export type VideoAlignment = 'flex-start' | 'center' | 'flex-end';