Bullet and Numeric list

public/icons/editor-ol.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00002 4.00003H1.00001V1.00001H0V0H2.00002V4.00003ZM2.00002 13.5V13H0V12H3.00003V16H0V15H2.00002V14.5H1.00001V13.5H2.00002ZM0 6.99998H1.80002L0 9.1V10H3.00003V9H1.20001L3.00003 6.89998V5.99998H0V6.99998ZM4.9987 2.99967V0.999648H18.9988V2.99967H4.9987ZM4.9987 15.0001H18.9988V13.0001H4.9987V15.0001ZM18.9988 8.99987H4.9987V6.99986H18.9988V8.99987Z" fill="currentColor"/>
+</svg>

public/locales/en/translation.json

@@ -237,5 +237,6 @@
   "Enter URL address": "Enter URL address",
   "Invalid url format": "Invalid url format",
   "Headers": "Headers",
-  "Quotes": "Quotes"
+  "Quotes": "Quotes",
+  "Lists": "Lists"
 }

public/locales/ru/translation.json

@@ -255,5 +255,6 @@
   "Enter URL address": "Введите адрес ссылки",
   "Invalid url format": "Неверный формат ссылки",
   "Headers": "Заголовки",
-  "Quotes": "Цитаты"
+  "Quotes": "Цитаты",
+  "Lists": "Списки"
 }

src/components/Editor/EditorBubbleMenu.module.scss

@@ -9,6 +9,10 @@
     flex-wrap: nowrap;
     opacity: 0.5;
     padding: 1rem;
+
+    .triangle {
+      margin-left: 4px;
+    }
   }
 
   &:hover,
@@ -80,10 +84,14 @@
       .actions {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: flex-start;
         gap: 12px;
         flex-wrap: nowrap;
-        margin-bottom: 16px;
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
 
         .bubbleMenuButton {
           min-width: 40px;

src/components/Editor/EditorBubbleMenu.tsx

@@ -6,6 +6,7 @@ import { clsx } from 'clsx'
 import { createEditorTransaction } from 'solid-tiptap'
 import { useLocalize } from '../../context/localize'
 import validateUrl from '../../utils/validateUrl'
+import list from '../Feed/List'
 
 type BubbleMenuProps = {
   editor: Editor
@@ -15,6 +16,7 @@ type BubbleMenuProps = {
 export const EditorBubbleMenu = (props: BubbleMenuProps) => {
   const { t } = useLocalize()
   const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal<boolean>(false)
+  const [listBubbleOpen, setListBubbleOpen] = createSignal<boolean>(false)
   const [linkEditorOpen, setLinkEditorOpen] = createSignal<boolean>(false)
   const [url, setUrl] = createSignal<string>('')
   const [prevUrl, setPrevUrl] = createSignal<string | null>(null)
@@ -46,6 +48,15 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
     () => props.editor,
     (editor) => editor && editor.isActive('blockquote')
   )
+  const isOrderedList = createEditorTransaction(
+    () => props.editor,
+    (editor) => editor && editor.isActive('isOrderedList')
+  )
+  const isBulletList = createEditorTransaction(
+    () => props.editor,
+    (editor) => editor && editor.isActive('isBulletList')
+  )
+
   const isLink = createEditorTransaction(
     () => props.editor,
     (editor) => {
@@ -75,6 +86,15 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
     }
   }
 
+  const toggleTextSizePopup = () => {
+    if (listBubbleOpen()) setListBubbleOpen(false)
+    setTextSizeBubbleOpen((prev) => !prev)
+  }
+  const toggleListPopup = () => {
+    if (textSizeBubbleOpen()) setTextSizeBubbleOpen(false)
+    setListBubbleOpen((prev) => !prev)
+  }
+
   return (
     <>
       <div ref={props.ref} class={styles.bubbleMenu}>
@@ -105,10 +125,10 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
                 class={clsx(styles.bubbleMenuButton, {
                   [styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
                 })}
-                onClick={() => setTextSizeBubbleOpen(!textSizeBubbleOpen())}
+                onClick={toggleTextSizePopup}
               >
                 <Icon name="editor-text-size" />
-                <Icon name="down-triangle" />
+                <Icon name="down-triangle" class={styles.triangle} />
               </button>
               <Show when={textSizeBubbleOpen()}>
                 <div class={styles.dropDown}>
@@ -192,9 +212,41 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
               <Icon name="editor-footnote" />
             </button>
             <div class={styles.delimiter} />
-            <button type="button" class={styles.bubbleMenuButton}>
+            <div class={styles.dropDownHolder}>
+              <button
+                type="button"
+                class={clsx(styles.bubbleMenuButton, { [styles.bubbleMenuButtonActive]: listBubbleOpen() })}
+                onClick={toggleListPopup}
+              >
+                <Icon name="editor-ul" />
+                <Icon name="down-triangle" class={styles.triangle} />
+              </button>
+              <Show when={listBubbleOpen()}>
+                <div class={styles.dropDown}>
+                  <header>{t('Lists')}</header>
+                  <div class={styles.actions}>
+                    <button
+                      type="button"
+                      class={clsx(styles.bubbleMenuButton, {
+                        [styles.bubbleMenuButtonActive]: isBulletList()
+                      })}
+                      onClick={() => props.editor.commands.toggleBulletList()}
+                    >
                       <Icon name="editor-ul" />
                     </button>
+                    <button
+                      type="button"
+                      class={clsx(styles.bubbleMenuButton, {
+                        [styles.bubbleMenuButtonActive]: isOrderedList()
+                      })}
+                      onClick={() => props.editor.commands.toggleOrderedList()}
+                    >
+                      <Icon name="editor-ol" />
+                    </button>
+                  </div>
+                </div>
+              </Show>
+            </div>
           </>
         )}
       </div>