WIP

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

@@ -39,7 +39,6 @@ import { TextBubbleMenu } from './TextBubbleMenu'
 import { ImageBubbleMenu } from './ImageBubbleMenu'
 import { EditorFloatingMenu } from './EditorFloatingMenu'
 import { useEditorContext } from '../../context/editor'
-import { isTextSelection } from '@tiptap/core'
 
 type EditorProps = {
   shoutId: number
@@ -105,7 +104,11 @@ export const Editor = (props: EditorProps) => {
       Bold,
       Italic,
       Strike,
-      HorizontalRule,
+      HorizontalRule.configure({
+        HTMLAttributes: {
+          class: 'horizontalRule'
+        }
+      }),
       Underline,
       Link.configure({
         openOnClick: false
@@ -144,25 +147,17 @@ export const Editor = (props: EditorProps) => {
       CharacterCount,
       BubbleMenu.configure({
         pluginKey: 'textBubbleMenu',
-        element: textBubbleMenuRef.current,
-        shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
-          const { doc, selection } = state
-          const { empty } = selection
-
-          const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
-
-          if (!view.hasFocus() || empty || isEmptyTextBlock || e.isActive('image')) {
-            return false
-          }
-
-          return true
-        }
+        element: textBubbleMenuRef.current
+        // shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
+        //   console.log('!!! e:', view)
+        //   return !e.isActive('image')
+        // }
       }),
       BubbleMenu.configure({
         pluginKey: 'imageBubbleMenu',
         element: imageBubbleMenuRef.current,
         shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
-          return view.hasFocus() && e.isActive('image')
+          return e.isFocused && e.isActive('image')
         }
       }),
       FloatingMenu.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') {
-      showModal('uploadImage')
+    switch (selectedMenuItem()) {
+      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

@@ -29,7 +29,7 @@ export const UploadModalContent = (props: Props) => {
       .chain()
       .focus()
       .extendMarkRange('link')
-      .setImage({ src: `/api/image?url=${src}` })
+      .setImage({ src: `https://new.discours.io/api/image?url=${src}` })
       .run()
     hideModal()
   }

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;
 }