Add Horizontal Rule action

public/icons/editor-horizontal-rule.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 11.01L1 11V13H23V11.01Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 3H5V9H19V3ZM17 5H7V7H17V5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 15H5V21H19V15ZM17 17H7V19H17V17Z" fill="currentColor"/>
+</svg>

src/components/Editor/Editor.tsx

@@ -151,11 +151,7 @@ export const Editor = (props: EditorProps) => {
 
           const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
 
-          if (!view.hasFocus() || empty || isEmptyTextBlock || e.isActive('image')) {
+          return !(!view.hasFocus() || empty || isEmptyTextBlock || e.isActive('image'))
-            return false
-          }
-
-          return true
         }
       }),
       BubbleMenu.configure({

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss

@@ -12,10 +12,10 @@
       opacity: 1;
     }
   }
+
   .menuHolder {
     background: #fff;
     left: calc(100% + 1rem);
-    box-shadow: 0 4px 10px rgba(#000, 0.25);
     position: absolute;
     top: -0.8rem;
     min-width: 64vw;

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -7,6 +7,7 @@ import HTMLParser from 'html-to-json-parser'
 import { useLocalize } from '../../../context/localize'
 import { Modal } from '../../Nav/Modal'
 import { Menu } from './Menu'
+import type { MenuItem } from './Menu/Menu'
 import { showModal } from '../../../stores/ui'
 import { UploadModalContent } from '../UploadModal'
 
@@ -31,7 +32,7 @@ const validateEmbed = async (value) => {
 
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const { t } = useLocalize()
-  const [selectedMenuItem, setSelectedMenuItem] = createSignal<string | null>(null)
+  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | null>(null)
   const [menuOpen, setMenuOpen] = createSignal<boolean>(false)
   const handleEmbedFormSubmit = async (value: string) => {
     // TODO: add support instagram embed (blockquote)
@@ -40,8 +41,15 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   }
 
   createEffect(() => {
-    if (selectedMenuItem() === 'image') {
+    switch (selectedMenuItem()) {
-      showModal('uploadImage')
+      case 'image': {
+        showModal('uploadImage')
+        return
+      }
+      case 'horizontal-rule': {
+        props.editor.chain().focus().setHorizontalRule().run()
+        return
+      }
     }
   })
   const closeUploadModalHandler = () => {
@@ -58,7 +66,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
         <Show when={menuOpen()}>
           <div class={styles.menuHolder}>
             <Show when={!selectedMenuItem()}>
-              <Menu selectedItem={(value) => setSelectedMenuItem(value)} />
+              <Menu selectedItem={(value: MenuItem) => setSelectedMenuItem(value)} />
             </Show>
             <Show when={selectedMenuItem() === 'embed'}>
               <InlineForm

src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx

@@ -1,19 +1,27 @@
 import styles from './Menu.module.scss'
 import { Icon } from '../../../_shared/Icon'
 
+export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
 type Props = {
   selectedItem: (value: string) => void
 }
 
 export const Menu = (props: Props) => {
+  const setSelectedMenuItem = (value: MenuItem) => {
+    props.selectedItem(value)
+  }
+
   return (
     <div class={styles.Menu}>
-      <button type="button" onClick={() => props.selectedItem('image')}>
+      <button type="button" onClick={() => setSelectedMenuItem('image')}>
         <Icon class={styles.icon} name="editor-image" />
       </button>
-      <button type="button" onClick={() => props.selectedItem('embed')}>
+      <button type="button" onClick={() => setSelectedMenuItem('embed')}>
         <Icon class={styles.icon} name="editor-embed" />
       </button>
+      <button type="button" onClick={() => setSelectedMenuItem('horizontal-rule')}>
+        <Icon class={styles.icon} name="editor-horizontal-rule" />
+      </button>
     </div>
   )
 }

src/components/Editor/Prosemirror.scss

@@ -68,3 +68,7 @@
   display: block;
   width: unset !important;
 }
+
+.horizontalRule {
+  border-top: 2px solid #000;
+}

src/components/Editor/UploadModal/UploadModalContent.tsx

@@ -11,6 +11,7 @@ import { useLocalize } from '../../../context/localize'
 import { Editor } from '@tiptap/core'
 import { Loading } from '../../_shared/Loading'
 import { verifyImg } from '../../../utils/verifyImg'
+import { imageProxy } from '../../../utils/imageProxy'
 
 type Props = {
   editor: Editor
@@ -29,7 +30,7 @@ export const UploadModalContent = (props: Props) => {
       .chain()
       .focus()
       .extendMarkRange('link')
-      .setImage({ src: `/api/image?url=${src}` })
+      .setImage({ src: imageProxy(src) })
       .run()
     hideModal()
   }

src/components/_shared/Image/Image.tsx

@@ -1,8 +1,9 @@
 import { splitProps } from 'solid-js'
 import type { JSX } from 'solid-js'
+import { imageProxy } from '../../../utils/imageProxy'
 
 export const Image = (props: JSX.ImgHTMLAttributes<HTMLImageElement>) => {
   const [local, others] = splitProps(props, ['src'])
 
-  return <img src={`/api/image?url=${encodeURI(local.src)}`} {...others} />
+  return <img src={imageProxy(local.src)} {...others} />
 }

src/styles/app.scss

@@ -677,7 +677,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
-  min-height: 300px;
+  min-height: 90vh;
   padding-top: 120px;
   position: relative;
 }

src/utils/imageProxy.ts

@@ -0,0 +1,4 @@
+import { isDev } from './config'
+export const imageProxy = (url: string) => {
+  return `${isDev ? 'https://new.discours.io' : ''}/api/image?url=${encodeURI(url)}`
+}