allow to customize image size and alignment on post editor

Author: ceolinwill

src/components/ImageViewer.tsx

@@ -0,0 +1,36 @@
+import { theme } from '@zoonk/utils';
+
+interface ImageViewerProps {
+  src?: string;
+  height?: string;
+  width?: string;
+  align?: 'center' | 'left' | 'right';
+  alt?: string;
+  title?: string;
+}
+
+const ImageViewer = ({
+  src,
+  height,
+  width,
+  align,
+  alt,
+  title,
+}: ImageViewerProps) => {
+  const float = align === 'left' || align === 'right' ? align : 'none';
+
+  if (!src) return null;
+
+  return (
+    <div style={{ float, textAlign: align, margin: theme.spacing(0, 1) }}>
+      <img
+        src={src}
+        title={title}
+        alt={alt}
+        style={{ maxWidth: width || '100%', height: height || 'auto' }}
+      />
+    </div>
+  );
+};
+
+export default ImageViewer;

src/components/PostForm.tsx

@@ -90,7 +90,7 @@ const PostForm = ({
   // Append an image to the current content.
   const insertImage = useCallback(
     (url: string) => {
-      const img = `![post](${url} "")`;
+      const img = `[[ img src="${url}" align="center" alt="post" title="" ]]`;
       const newContent = `${content}\n${img}`;
       setContent(newContent);
     },

src/components/ShortcodeRenderer.tsx

@@ -1,15 +1,14 @@
 import dynamic from 'next/dynamic';
 
 const GoogleDriveViewer = dynamic(() => import('./GoogleDriveViewer'));
+const ImageViewer = dynamic(() => import('./ImageViewer'));
 const PDFViewer = dynamic(() => import('./PDFViewer'));
 const VimeoPlayer = dynamic(() => import('./VimeoPlayer'));
 const YoutubePlayer = dynamic(() => import('./YoutubePlayer'));
 
 interface ShortcodeRendererProps {
-  identifier: 'drive' | 'pdf' | 'vimeo' | 'youtube';
-  attributes: {
-    [key: string]: string;
-  };
+  identifier: 'drive' | 'img' | 'pdf' | 'vimeo' | 'youtube';
+  attributes: any;
 }
 
 /**
@@ -21,17 +20,17 @@ const ShortcodeRenderer = ({
   identifier,
   attributes,
 }: ShortcodeRendererProps) => {
-  const { id, url } = attributes;
-
   switch (identifier) {
     case 'drive':
-      return <GoogleDriveViewer id={id} />;
+      return <GoogleDriveViewer {...attributes} />;
+    case 'img':
+      return <ImageViewer {...attributes} />;
     case 'pdf':
-      return <PDFViewer url={url} />;
+      return <PDFViewer {...attributes} />;
     case 'vimeo':
-      return <VimeoPlayer id={id} />;
+      return <VimeoPlayer {...attributes} />;
     case 'youtube':
-      return <YoutubePlayer id={id} />;
+      return <YoutubePlayer {...attributes} />;
     default:
       return null;
   }

src/locale/en.ts

@@ -82,7 +82,8 @@ const translate: TranslationFn = (key, args) => {
     formatting_drive: 'Google Drive',
     formatting_header_example: '# Title',
     formatting_header: 'Header',
-    formatting_image_example: '![alt text](photo.png "photo title")',
+    formatting_image_example:
+      '[[ img src="photo.png" width="200px" height="200px" align="right" alt="text" title="title" ]]',
     formatting_image: 'Image',
     formatting_italic_example: '_italic text_',
     formatting_italic: 'Italic',

src/locale/pt.ts

@@ -85,7 +85,8 @@ const translate: TranslationFn = (key, args) => {
     formatting_drive: 'Google Drive',
     formatting_header_example: '# Título',
     formatting_header: 'Cabeçalho',
-    formatting_image_example: '![descrição](foto.png "título")',
+    formatting_image_example:
+      '[[ img src="foto.png" width="200px" align="right" alt="texto" title="título" ]]',
     formatting_image: 'Imagem',
     formatting_italic_example: '_texto em itálico_',
     formatting_italic: 'Itálico',