Editor improvements (#191)

* Add tooltips to floating menu

* Add noWrap in small editor

public/locales/en/translation.json

@@ -3,6 +3,8 @@
   "About myself": "About myself",
   "About the project": "About the project",
   "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title",
+  "Add a link or click plus to embed media": "Add a link or click plus to embed media",
+  "Add an embed widget": "Add an embed widget",
   "Add another image": "Add another image",
   "Add audio": "Add audio",
   "Add blockquote": "Add blockquote",
@@ -12,6 +14,7 @@
   "Add images": "Add images",
   "Add intro": "Add intro",
   "Add link": "Add link",
+  "Add rule": "Add rule",
   "Add signature": "Add signature",
   "Add subtitle": "Add subtitle",
   "Add url": "Add url",
@@ -260,7 +263,6 @@
   "Send link again": "Send link again",
   "Settings": "Settings",
   "Share": "Share",
-  "Short opening": "Short opening",
   "Show": "Show",
   "Show lyrics": "Show lyrics",
   "Slug": "Slug",

public/locales/ru/translation.json

@@ -5,6 +5,8 @@
   "About the project": "О проекте",
   "Accomplices": "Соучастники",
   "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти его на страницах интересных ему тем. Темы можно менять местами, первая тема становится заглавной",
+  "Add a link or click plus to embed media": "Добавьте ссылку или нажмите плюс для вставки медиа",
+  "Add an embed widget": "Добавить embed-виджет",
   "Add another image": "Добавить другое изображение",
   "Add audio": "Добавить аудио",
   "Add blockquote": "Добавить цитату",
@@ -14,6 +16,7 @@
   "Add images": "Добавить изображения",
   "Add intro": "Добавить вступление",
   "Add link": "Добавить ссылку",
+  "Add rule": "Добавить разделитель",
   "Add signature": "Добавить подпись",
   "Add subtitle": "Добавить подзаголовок",
   "Add to bookmarks": "Добавить в закладки",

src/components/Editor/Editor.tsx

@@ -159,7 +159,7 @@ export const Editor = (props: Props) => {
         }
       }),
       Placeholder.configure({
-        placeholder: t('Short opening')
+        placeholder: t('Add a link or click plus to embed media')
       }),
       Focus,
       Gapcursor,

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

@@ -1,5 +1,7 @@
 import styles from './Menu.module.scss'
 import { Icon } from '../../../_shared/Icon'
+import { Popover } from '../../../_shared/Popover'
+import { useLocalize } from '../../../../context/localize'
 
 export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
 
@@ -8,21 +10,34 @@ type Props = {
 }
 
 export const Menu = (props: Props) => {
+  const { t } = useLocalize()
   const setSelectedMenuItem = (value: MenuItem) => {
     props.selectedItem(value)
   }
 
   return (
     <div class={styles.Menu}>
-      <button type="button" onClick={() => setSelectedMenuItem('image')}>
-        <Icon class={styles.icon} name="editor-image" />
-      </button>
-      <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>
+      <Popover content={t('Add image')}>
+        {(triggerRef: (el) => void) => (
+          <button ref={triggerRef} type="button" onClick={() => setSelectedMenuItem('image')}>
+            <Icon class={styles.icon} name="editor-image" />
+          </button>
+        )}
+      </Popover>
+      <Popover content={t('Add an embed widget')}>
+        {(triggerRef: (el) => void) => (
+          <button ref={triggerRef} type="button" onClick={() => setSelectedMenuItem('embed')}>
+            <Icon class={styles.icon} name="editor-embed" />
+          </button>
+        )}
+      </Popover>
+      <Popover content={t('Add rule')}>
+        {(triggerRef: (el) => void) => (
+          <button ref={triggerRef} type="button" onClick={() => setSelectedMenuItem('horizontal-rule')}>
+            <Icon class={styles.icon} name="editor-horizontal-rule" />
+          </button>
+        )}
+      </Popover>
     </div>
   )
 }

src/components/Editor/Prosemirror.scss

@@ -9,14 +9,10 @@
   float: left;
   height: 0;
   pointer-events: none;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 30px;
   opacity: 0.3;
 }
 
 // Keeping the cursor active when moving outside the editable area
-
 .articleEditor p,
 .articleEditor ul,
 .articleEditor h4,
@@ -25,16 +21,17 @@
   flex: 0 0 auto;
 
   @media (width >= 768px) {
-    padding-left: calc(21.9% + 3px);
+    padding-left: calc(21.9%);
     max-width: 72.7%;
   }
 
   @media (width >= 1200px) {
-    padding-left: calc(21.5% + 3px);
+    padding-left: calc(21.5% + 1px);
     max-width: 64.9%;
   }
 }
 
+.articleEditor hr,
 .articleEditor blockquote,
 .articleEditor figure,
 .articleEditor article[data-type='incut'] {

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

@@ -86,4 +86,8 @@
     height: 0;
     color: transparent;
   }
+
+  .noWrap {
+    white-space: nowrap;
+  }
 }

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -252,7 +252,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
               </Popover>
               <div class={styles.delimiter} />
             </Show>
-            <Popover content={t('Add url')}>
+            <Popover content={<div class={styles.noWrap}>{t('Add url')}</div>}>
               {(triggerRef: (el) => void) => (
                 <button
                   ref={triggerRef}

src/components/_shared/Popover/Popover.tsx

@@ -4,7 +4,7 @@ import styles from './Popover.module.scss'
 
 type Props = {
   children: (setTooltipEl: (el: HTMLElement | null) => void) => JSX.Element
-  content: string
+  content: string | JSX.Element
   disabled?: boolean
 }