fix uploaded image link + editor image align menu

public/icons/editor-image-add.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0516 6.57895V10.5132C21.0516 10.5132 18.4332 10.5263 18.42 10.5132V6.57895H14.4727C14.4727 6.57895 14.4858 3.96053 14.4727 3.94737H18.42V0H21.0516V3.94737H24.999V6.57895H21.0516ZM17.1053 11.8421V7.89474H13.1579V3.94737H2.63158C1.18421 3.94737 0 5.13158 0 6.57895V22.3684C0 23.8158 1.18421 25 2.63158 25H18.4211C19.8684 25 21.0526 23.8158 21.0526 22.3684V11.8421H17.1053ZM6.58018 17.1053L2.63281 22.3685H18.4223L13.1591 15.7896L9.21176 21.0527L6.58018 17.1053Z" fill="#fff"/>
+</svg>

public/icons/editor-image-align-center.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.44444V0H22V2.44444H0ZM15 13H7V4H15V13ZM17 5H22V7H17V5ZM0 15H22V17H0V15ZM5 5H0V7H5V5ZM17 12H22V10H17V12ZM5 12H0V10H5V12ZM0 21.9999H22V19.5554H0V21.9999Z" fill="#fff"/>
+</svg>

public/icons/editor-image-align-left.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.44444V0H22V2.44444H0ZM0 13H6V4H0V13ZM8 5H22V7H8V5ZM0 15H22V17H0V15ZM22 12H8V10H22V12ZM0 21.9999H22V19.5554H0V21.9999Z" fill="#fff"/>
+</svg>

public/icons/editor-image-align-right.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 2.44444V0H0V2.44444H22ZM22 13H16V4H22V13ZM14 5H0V7H14V5ZM22 15H0V17H22V15ZM0 12H14V10H0V12ZM22 21.9999H0V19.5554H22V21.9999Z" fill="#fff"/>
+</svg>

src/components/Editor/Editor.tsx

@@ -145,7 +145,6 @@ export const Editor = (props: EditorProps) => {
         pluginKey: 'textBubbleMenu',
         element: textBubbleMenuRef.current,
         shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
-          console.log(view)
           return e.isFocused && !e.isActive('image')
         }
       }),

src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss

@@ -1,6 +1,8 @@
-.bubbleMenu {
-  background: #fff;
-  box-shadow: 0 4px 10px rgba(#000, 0.25);
+.ImageBubbleMenu {
+  background: #000;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   .bubbleMenuButton {
     display: inline-flex;
@@ -10,16 +12,8 @@
     opacity: 0.5;
     padding: 1rem;
 
-    .triangle {
-      margin-left: 4px;
-    }
-
-    .colorWheel {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: #f6e3a1;
+    img {
+      display: block;
     }
   }
 
@@ -28,58 +22,12 @@
   }
 
   .delimiter {
-    background: #999;
+    background: #fff;
+    opacity: 0.5;
     display: inline-block;
     height: 1.4em;
     margin: 0 0.2em;
     vertical-align: text-bottom;
     width: 1px;
   }
-
-  .dropDownHolder {
-    position: relative;
-    cursor: pointer;
-    display: inline-flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    .dropDown {
-      position: absolute;
-      padding: 6px;
-      top: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%);
-      box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
-      background: #fff;
-      color: #898c94;
-
-      & > header {
-        font-size: 10px;
-        border-bottom: 1px solid #898c94;
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 12px;
-        flex-wrap: nowrap;
-        margin-bottom: 8px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .bubbleMenuButton {
-          min-width: 40px;
-        }
-      }
-    }
-  }
-
-  .dropDownEnter,
-  .dropDownExit {
-    height: 0;
-    color: transparent;
-  }
 }

src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx

@@ -1,5 +1,7 @@
 import type { Editor } from '@tiptap/core'
 import styles from './ImageBubbleMenu.module.scss'
+import { clsx } from 'clsx'
+import { Icon } from '../../_shared/Icon'
 
 type BubbleMenuProps = {
   editor: Editor
@@ -8,8 +10,20 @@ type BubbleMenuProps = {
 
 export const ImageBubbleMenu = (props: BubbleMenuProps) => {
   return (
-    <div ref={props.ref} class={styles.bubbleMenu}>
-      test
+    <div ref={props.ref} class={styles.ImageBubbleMenu}>
+      <button type="button" class={clsx(styles.bubbleMenuButton)}>
+        <Icon name="editor-image-align-left" />
+      </button>
+      <button type="button" class={clsx(styles.bubbleMenuButton)}>
+        <Icon name="editor-image-align-center" />
+      </button>
+      <button type="button" class={clsx(styles.bubbleMenuButton)}>
+        <Icon name="editor-image-align-right" />
+      </button>
+      <div class={styles.delimiter} />
+      <button type="button" class={clsx(styles.bubbleMenuButton)}>
+        <Icon name="editor-image-align-add" />
+      </button>
     </div>
   )
 }

src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss

@@ -1,4 +1,4 @@
-.bubbleMenu {
+.TextBubbleMenu {
   background: #fff;
   box-shadow: 0 4px 10px rgba(#000, 0.25);
 

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -75,7 +75,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   }
 
   return (
-    <div ref={props.ref} class={styles.bubbleMenu}>
+    <div ref={props.ref} class={styles.TextBubbleMenu}>
       <Switch>
         <Match when={linkEditorOpen()}>
           <InlineForm

src/components/Editor/UploadModal/UploadModalContent.tsx

@@ -25,7 +25,12 @@ export const UploadModalContent = (props: Props) => {
   const [dragError, setDragError] = createSignal<string | undefined>()
 
   const renderImage = (src: string) => {
-    props.editor.chain().focus().extendMarkRange('link').setImage({ src: src }).run()
+    props.editor
+      .chain()
+      .focus()
+      .extendMarkRange('link')
+      .setImage({ src: `/api/image?url=${src}` })
+      .run()
     hideModal()
   }
   const handleImageFormSubmit = async (value: string) => {