feat: flip image

docs/guide/bubble-menu.md

@@ -30,6 +30,7 @@ The system provides the following default bubble menus:
 |   ContentMenu   | Provides general content-related operations like copy, paste, delete, etc.                   | floatingMenuConfig  |
 |   BubbleMenuImageGif   | Provides general content-related operations like copy, paste, delete, image gif etc.                   | imageGifConfig  |
 |   BubbleMenuMermaid   | Provides general content-related operations like copy, paste, delete, mermaid  etc.                   | mermaidConfig  |
+|   BubbleMenuTwitter   | Provides general content-related operations like copy, paste, delete, twitter  etc.                   | twitterConfig  |
 
 ## Disabling the Bubble Menu
 

package.json

@@ -201,7 +201,7 @@
   "homepage": "https://reactjs-tiptap-editor.vercel.app/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/hunghg255/reactjs-tiptap-editor.git"
+    "url": "git+https://github.com/hunghg255/reactjs-tiptap-editor.git"
   },
   "bugs": "https://github.com/hunghg255/reactjs-tiptap-editor/issues"
 }

playground/src/App.tsx

@@ -177,7 +177,7 @@ const extensions = [
   Twitter,
 ]
 
-const DEFAULT = ``
+const DEFAULT = `<p dir="auto"></p><p dir="auto"></p><p dir="auto"></p><p dir="auto"><div style="text-align: center;" class="image"><img height="auto" style="transform: rotateX(0deg) rotateY(180deg);" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1729198819038/684c0adb-b189-4af8-b9d8-d26e4097ce27.png?auto=compress,format&amp;format=webp" flipx="false" flipy="true" align="center" inline="false"></div></p><p dir="auto"></p><p dir="auto"></p><p dir="auto"></p>`
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout

src/components/icons/icons.ts

@@ -18,6 +18,8 @@ import {
   CropIcon,
   Eraser,
   Eye,
+  FlipHorizontal,
+  FlipVertical,
   Frame,
   GripVertical,
   Heading1,
@@ -201,4 +203,6 @@ export const icons = {
   Crop: CropIcon,
   Mermaid,
   Twitter,
+  FlipX: FlipVertical,
+  FlipY: FlipHorizontal,
 } as any

src/components/menus/bubble.ts

@@ -106,7 +106,6 @@ function imageGifSizeMenus(editor: Editor): BubbleMenuItem[] {
     componentProps: {
       tooltip: localeActions.t(`editor.${size.replace('-', '.')}.tooltip` as any),
       icon: icons[i],
-      // @ts-expect-error
       action: () => editor.commands.updateImageGif({ width: IMAGE_SIZE[size] }),
       isActive: () => editor.isActive('image', { width: IMAGE_SIZE[size] }),
     },
@@ -146,7 +145,6 @@ function imageGifAlignMenus(editor: Editor): BubbleMenuItem[] {
     componentProps: {
       tooltip: localeActions.t(`editor.textalign.${k}.tooltip`),
       icon: iconMap[k],
-      // @ts-expect-error
       action: () => editor.commands?.setAlignImageGif?.(k),
       isActive: () => editor.isActive({ align: k }) || false,
       disabled: false,
@@ -195,6 +193,46 @@ function videoSizeMenus(editor: Editor): BubbleMenuItem[] {
 }
 export function getBubbleImage(editor: Editor): BubbleMenuItem[] {
   return [
+    {
+      type: 'flipX',
+      component: ActionButton,
+      componentProps: {
+        editor,
+        tooltip: localeActions.t('editor.tooltip.flipX'),
+        icon: 'FlipX',
+        action: () => {
+          const image = editor.getAttributes('image')
+          const { flipX } = image as any
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .updateImage({
+              flipX: !flipX,
+            })
+            .run()
+        },
+      },
+    },
+    {
+      type: 'flipY',
+      component: ActionButton,
+      componentProps: {
+        editor,
+        tooltip: localeActions.t('editor.tooltip.flipY'),
+        icon: 'FlipY',
+        action: () => {
+          const image = editor.getAttributes('image')
+          const { flipY } = image as any
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .updateImage({
+              flipY: !flipY,
+            })
+            .run()
+        },
+      },
+    },
     ...imageSizeMenus(editor),
     ...imageAlignMenus(editor),
     {

src/extensions/Image/Image.ts

@@ -19,8 +19,12 @@ export interface SetImageAttrsOptions {
   width?: number | string | null
   /** The alignment of the image. */
   align?: 'left' | 'center' | 'right'
-
+  /** Whether the image is inline. */
   inline?: boolean
+  /** image FlipX */
+  flipX?: boolean
+  /** image FlipY */
+  flipY?: boolean
 }
 
 const DEFAULT_OPTIONS: any = {
@@ -94,6 +98,12 @@ export const Image = TiptapImage.extend<IImageOptions>({
   addAttributes() {
     return {
       ...this.parent?.(),
+      flipX: {
+        default: false,
+      },
+      flipY: {
+        default: false,
+      },
       width: {
         default: null,
         parseHTML: (element) => {
@@ -152,22 +162,25 @@ export const Image = TiptapImage.extend<IImageOptions>({
     }
   },
   renderHTML({ HTMLAttributes }) {
-    const { align, inline } = HTMLAttributes
+    const { flipX, flipY, align, inline } = HTMLAttributes
+
+    const transformStyle
+      = flipX || flipY ? `transform: rotateX(${flipX ? '180' : '0'}deg) rotateY(${flipY ? '180' : '0'}deg);` : ''
 
-    const style = align ? `text-align: ${align};` : ''
+    const textAlignStyle = align ? `text-align: ${align};` : ''
 
     return [
-      inline ? 'span' : 'div', // Parent element
+      inline ? 'span' : 'div',
       {
-        style,
+        style: textAlignStyle,
         class: 'image',
       },
       [
         'img',
         mergeAttributes(
-          // Always render the `height="auto"`
           {
             height: 'auto',
+            style: transformStyle,
           },
           this.options.HTMLAttributes,
           HTMLAttributes,
@@ -184,13 +197,18 @@ export const Image = TiptapImage.extend<IImageOptions>({
 
           const width = img?.getAttribute('width')
 
+          const flipX = img?.getAttribute('flipx') || false
+          const flipY = img?.getAttribute('flipy') || false
+
           return {
             src: img?.getAttribute('src'),
             alt: img?.getAttribute('alt'),
             caption: img?.getAttribute('caption'),
             width: width ? Number.parseInt(width as string, 10) : null,
             align: img?.getAttribute('align') || element?.style?.textAlign || null,
             inline: img?.getAttribute('inline') || false,
+            flipX: flipX === 'true',
+            flipY: flipY === 'true',
           }
         },
       },
@@ -200,6 +218,8 @@ export const Image = TiptapImage.extend<IImageOptions>({
           const img = element.querySelector('img')
 
           const width = img?.getAttribute('width')
+          const flipX = img?.getAttribute('flipx') || false
+          const flipY = img?.getAttribute('flipy') || false
 
           return {
             src: img?.getAttribute('src'),
@@ -208,6 +228,8 @@ export const Image = TiptapImage.extend<IImageOptions>({
             width: width ? Number.parseInt(width as string, 10) : null,
             align: img?.getAttribute('align') || element.style.textAlign || null,
             inline: img?.getAttribute('inline') || false,
+            flipX: flipX === 'true',
+            flipY: flipY === 'true',
           }
         },
       },

src/extensions/Image/components/ImageView.tsx

@@ -49,16 +49,25 @@ function ImageView(props: any) {
   const { align, inline } = props?.node?.attrs
 
   const imgAttrs = useMemo(() => {
-    const { src, alt, width: w, height: h } = props?.node?.attrs
+    const { src, alt, width: w, height: h, flipX, flipY } = props?.node?.attrs
 
     const width = isNumber(w) ? `${w}px` : w
     const height = isNumber(h) ? `${h}px` : h
+    const transformStyles: any = []
+
+    if (flipX)
+      transformStyles.push('rotateX(180deg)')
+    if (flipY)
+      transformStyles.push('rotateY(180deg)')
+    const transform = transformStyles.join(' ')
+
     return {
       src: src || undefined,
       alt: alt || undefined,
       style: {
         width: width || undefined,
         height: height || undefined,
+        transform: transform || 'none',
       },
     }
   }, [props?.node?.attrs])

src/locales/en.ts

@@ -163,6 +163,8 @@ const locale = {
   'editor.replace.caseSensitive': 'Case Sensitive',
   'editor.mermaid.tooltip': 'Mermaid',
   'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': 'Flip Horizontal',
+  'editor.tooltip.flipY': 'Flip Vertical',
 }
 
 export default locale

src/locales/pt-br.ts

@@ -164,6 +164,8 @@ const locale = {
   'editor.replace.caseSensitive': 'Sensível a maiúsculas e minúsculas',
   'editor.mermaid.tooltip': 'Mermaid',
   'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': 'Inverter Horizontal',
+  'editor.tooltip.flipY': 'Inverter Vertical',
 }
 
 export default locale

src/locales/vi.ts

@@ -164,6 +164,8 @@ const locale = {
   'editor.replace.caseSensitive': 'Phân biệt chữ hoa chữ thường',
   'editor.mermaid.tooltip': 'Mermaid',
   'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': 'Lật Ngang',
+  'editor.tooltip.flipY': 'Lật Dọc',
 }
 
 export default locale

src/locales/zh-cn.ts

@@ -164,6 +164,8 @@ const locale = {
   'editor.replace.caseSensitive': '区分大小写',
   'editor.mermaid.tooltip': 'Mermaid',
   'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': '水平翻转',
+  'editor.tooltip.flipY': '垂直翻转',
 }
 
 export default locale

src/styles/editor.scss

@@ -146,7 +146,7 @@
 
         &--focused:hover,
         &--resizing:hover {
-          outline-color: transparent;
+          outline-color: hsl(var(--primary));
         }
 
         &__placeholder {
@@ -164,13 +164,16 @@
         }
       }
 
+      .image-view__body--focused {
+        outline-color: hsl(var(--primary)) !important;
+      }
+
       &.focus {
         img {
           @apply richtext-outline-primary richtext-outline-2 richtext-outline;
         }
       }
 
-
       img {
         display: inline;
         vertical-align: baseline;
@@ -188,7 +191,7 @@
       height: 100%;
       @apply richtext-border !important;
       @apply richtext-border-border !important;
-      border-style: dashed;
+
 
       &__handler {
         position: absolute;
@@ -199,7 +202,7 @@
         height: 12px;
         border: 1px solid #fff;
         border-radius: 2px;
-        @apply richtext-bg-blue-500;
+        background-color: hsl(var(--primary));
 
         &--tl {
           top: -6px;