feat: Added image alignment options and preference in Super notes (#2903)

Author: amanharwara

packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts

@@ -43,6 +43,7 @@ export const PrefDefaults = {
   [PrefKey.SuperNoteExportEmbedBehavior]: 'reference',
   [PrefKey.SuperNoteExportUseMDFrontmatter]: true,
   [PrefKey.SuperNoteExportPDFPageSize]: 'A4',
+  [PrefKey.SuperNoteImageAlignment]: 'left',
   [PrefKey.SystemViewPreferences]: {},
   [PrefKey.AuthenticatorNames]: '',
   [PrefKey.ComponentPreferences]: {},

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -36,6 +36,7 @@ export enum PrefKey {
   SuperNoteExportEmbedBehavior = 'superNoteExportEmbedBehavior',
   SuperNoteExportUseMDFrontmatter = 'superNoteExportUseMDFrontmatter',
   SuperNoteExportPDFPageSize = 'superNoteExportPDFPageSize',
+  SuperNoteImageAlignment = 'superNoteImageAlignment',
   AuthenticatorNames = 'authenticatorNames',
   PaneGesturesEnabled = 'paneGesturesEnabled',
   ComponentPreferences = 'componentPreferences',
@@ -101,4 +102,5 @@ export type PrefValue = {
   [PrefKey.AddImportsToTag]: boolean
   [PrefKey.AlwaysCreateNewTagForImports]: boolean
   [PrefKey.ExistingTagForImports]: string | undefined
+  [PrefKey.SuperNoteImageAlignment]: 'left' | 'center' | 'right'
 }

packages/web/src/javascripts/Components/Button/IconButton.tsx

@@ -1,8 +1,8 @@
-import { FunctionComponent, MouseEventHandler } from 'react'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
 
-type Props = {
+interface Props extends ComponentPropsWithoutRef<'button'> {
   onClick: MouseEventHandler<HTMLButtonElement>
   className?: string
   icon: IconType
@@ -12,32 +12,31 @@ type Props = {
   disabled?: boolean
 }
 
-const IconButton: FunctionComponent<Props> = ({
-  onClick,
-  className = '',
-  icon,
-  title,
-  focusable,
-  iconClassName = '',
-  disabled = false,
-}) => {
-  const click: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault()
-    onClick(e)
-  }
-  const focusableClass = focusable ? '' : 'focus:shadow-none'
-  return (
-    <button
-      type="button"
-      title={title}
-      className={`no-border flex cursor-pointer flex-row items-center bg-transparent ${focusableClass} ${className}`}
-      onClick={click}
-      disabled={disabled}
-      aria-label={title}
-    >
-      <Icon type={icon} className={iconClassName} />
-    </button>
-  )
-}
+const IconButton = forwardRef(
+  (
+    { onClick, className = '', icon, title, focusable, iconClassName = '', disabled = false, ...rest }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    const click: MouseEventHandler<HTMLButtonElement> = (e) => {
+      e.preventDefault()
+      onClick(e)
+    }
+    const focusableClass = focusable ? '' : 'focus:shadow-none'
+    return (
+      <button
+        {...rest}
+        type="button"
+        title={title}
+        className={`no-border flex cursor-pointer flex-row items-center bg-transparent ${focusableClass} ${className}`}
+        onClick={click}
+        disabled={disabled}
+        aria-label={title}
+        ref={ref}
+      >
+        <Icon type={icon} className={iconClassName} />
+      </button>
+    )
+  },
+)
 
 export default IconButton

packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx

@@ -13,15 +13,23 @@ import { isFileTypePreviewable } from './isFilePreviewable'
 import PreviewComponent from './PreviewComponent'
 import Button from '../Button/Button'
 import { ProtectedIllustration } from '@standardnotes/icons'
-import { ImageZoomLevelProps } from './ImageZoomLevelProps'
+import { OptionalSuperEmbeddedImageProps } from './OptionalSuperEmbeddedImageProps'
 
 type Props = {
   application: WebApplication
   file: FileItem
   isEmbeddedInSuper?: boolean
-} & ImageZoomLevelProps
-
-const FilePreview = ({ file, application, isEmbeddedInSuper = false, imageZoomLevel, setImageZoomLevel }: Props) => {
+} & OptionalSuperEmbeddedImageProps
+
+const FilePreview = ({
+  file,
+  application,
+  isEmbeddedInSuper = false,
+  imageZoomLevel,
+  setImageZoomLevel,
+  alignment,
+  changeAlignment,
+}: Props) => {
   const [isAuthorized, setIsAuthorized] = useState(application.isAuthorizedToRenderItem(file))
 
   const isFilePreviewable = useMemo(() => {
@@ -137,6 +145,8 @@ const FilePreview = ({ file, application, isEmbeddedInSuper = false, imageZoomLe
       isEmbeddedInSuper={isEmbeddedInSuper}
       imageZoomLevel={imageZoomLevel}
       setImageZoomLevel={setImageZoomLevel}
+      alignment={alignment}
+      changeAlignment={changeAlignment}
     />
   ) : (
     <FilePreviewError

packages/web/src/javascripts/Components/FilePreview/ImageAlignmentOptions.tsx

@@ -0,0 +1,64 @@
+import { classNames, IconType } from '@standardnotes/snjs'
+import IconButton from '@/Components/Button/IconButton'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
+import { ElementFormatType } from 'lexical'
+
+export function getCSSValueFromAlignment(format: ElementFormatType) {
+  switch (format) {
+    case 'start':
+    case 'left':
+      return 'start'
+    case 'right':
+    case 'end':
+      return 'end'
+    default:
+      return 'center'
+  }
+}
+
+const Options = [
+  {
+    alignment: 'left',
+    label: 'Left align',
+  },
+  {
+    alignment: 'center',
+    label: 'Center align',
+  },
+  {
+    alignment: 'right',
+    label: 'Right align',
+  },
+]
+
+export function ImageAlignmentOptions({
+  alignment: currentAlignment,
+  changeAlignment,
+}: {
+  alignment: ElementFormatType
+  changeAlignment: (format: ElementFormatType) => void
+}) {
+  return Options.map(({ alignment, label }) => (
+    <StyledTooltip label={label} key={alignment}>
+      <IconButton
+        className={classNames(
+          alignment === currentAlignment && '!bg-info text-info-contrast',
+          'rounded p-1 hover:bg-contrast',
+        )}
+        icon={`format-align-${alignment}` as IconType}
+        title={label}
+        focusable={true}
+        onClick={(e) => {
+          // the preventDefault and stopPropagation for these events are required
+          // so that the keyboard doesn't jump when you select another option
+          e.preventDefault()
+          e.stopPropagation()
+          changeAlignment(alignment as ElementFormatType)
+        }}
+        onMouseDown={(e) => {
+          e.preventDefault()
+        }}
+      />
+    </StyledTooltip>
+  ))
+}