From 4e2f4f78cbfac098bcb2d2d4d625793e4b3bca91 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 23 Aug 2023 08:37:18 +0300
Subject: [PATCH] Editor improvements (#191)

* Add tooltips to floating menu

* Add noWrap in small editor
---
 public/locales/en/translation.json            |  4 ++-
 public/locales/ru/translation.json            |  3 ++
 src/components/Editor/Editor.tsx              |  2 +-
 .../Editor/EditorFloatingMenu/Menu/Menu.tsx   | 33 ++++++++++++++-----
 src/components/Editor/Prosemirror.scss        |  9 ++---
 .../TextBubbleMenu/TextBubbleMenu.module.scss |  4 +++
 .../Editor/TextBubbleMenu/TextBubbleMenu.tsx  |  2 +-
 src/components/_shared/Popover/Popover.tsx    |  2 +-
 8 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 7264dc15..6758ee6a 100644
--- a/public/locales/en/translation.json
+++ b/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",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 121fb672..9121034b 100644
--- a/public/locales/ru/translation.json
+++ b/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": "Добавить в закладки",
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 21e8beaa..102e599f 100644
--- a/src/components/Editor/Editor.tsx
+++ b/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,
diff --git a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
index 74b5c52b..f21d4048 100644
--- a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
+++ b/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>
   )
 }
diff --git a/src/components/Editor/Prosemirror.scss b/src/components/Editor/Prosemirror.scss
index 6c36272a..cee99424 100644
--- a/src/components/Editor/Prosemirror.scss
+++ b/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'] {
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
index f9f613e5..2845d6ca 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
@@ -86,4 +86,8 @@
     height: 0;
     color: transparent;
   }
+
+  .noWrap {
+    white-space: nowrap;
+  }
 }
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index eeb67c5c..147f5f3f 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/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}
diff --git a/src/components/_shared/Popover/Popover.tsx b/src/components/_shared/Popover/Popover.tsx
index 2ebb2bf2..4a937b1f 100644
--- a/src/components/_shared/Popover/Popover.tsx
+++ b/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
 }