From bb45d206e1c6a29da28b9b71515cd94d2e1df892 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Mon, 29 May 2023 20:14:58 +0300 Subject: [PATCH] Add popover helpers in Editor (#105) --- public/locales/en/translation.json | 47 ++- public/locales/ru/translation.json | 47 ++- .../BubbleMenu/BlockquoteBubbleMenu.tsx | 67 ++-- ...enu.module.scss => BubbleMenu.module.scss} | 2 +- .../Editor/BubbleMenu/FigureBubbleMenu.tsx | 73 ++-- .../Editor/BubbleMenu/IncutBubbleMenu.tsx | 4 +- src/components/Editor/Editor.tsx | 21 +- .../Editor/InlineForm/InlineForm.tsx | 28 +- .../Editor/TextBubbleMenu/TextBubbleMenu.tsx | 335 +++++++++++------- 9 files changed, 386 insertions(+), 238 deletions(-) rename src/components/Editor/BubbleMenu/{FigureBubbleMenu.module.scss => BubbleMenu.module.scss} (99%) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5175fa79..3050281b 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -5,7 +5,13 @@ "Add another image": "Add another image", "Add comment": "Comment", "Add image": "Add image", + "Add link": "Add link", + "Add signature": "Add signature", + "Add url": "Add url", "Address on Discourse": "Address on Discourse", + "Alignment center": "Alignment center", + "Alignment left": "Alignment left", + "Alignment right": "Alignment right", "All": "All", "All authors": "All authors", "All posts": "All posts", @@ -18,8 +24,10 @@ "Autotypograph": "Autotypograph", "Back to main page": "Back to main page", "Become an author": "Become an author", + "Bold": "Bold", "Bookmarked": "Saved", "Bookmarks": "Bookmarks", + "Bullet list": "Bullet list", "By alphabet": "By alphabet", "By authors": "By authors", "By name": "By name", @@ -85,10 +93,14 @@ "Go to main page": "Go to main page", "Group Chat": "Group Chat", "Groups": "Groups", + "Header 1": "Header 1", + "Header 2": "Header 2", + "Header 3": "Header 3", "Headers": "Headers", "Help": "Помощь", "Help to edit": "Help to edit", "Here you can customize your profile the way you want.": "Here you can customize your profile the way you want.", + "Highlight": "Highlight", "Hooray! Welcome!": "Hooray! Welcome!", "Horizontal collaborative journalistic platform": "Horizontal collaborative journalism platform", "Hotkeys": "Горячие клавиши", @@ -100,7 +112,9 @@ "I have no account yet": "I don't have an account yet", "I know the password": "I know the password", "Image format not supported": "Image format not supported", + "Incut": "Incut", "Independant magazine with an open horizontal cooperation about culture, science and society": "Independant magazine with an open horizontal cooperation about culture, science and society", + "Insert footnote": "Insert footnote", "Introduce": "Introduction", "Invalid email": "Check if your email is correct", "Invalid image URL": "Invalid image URL", @@ -108,6 +122,7 @@ "Invite co-authors": "Invite co-authors", "Invite to collab": "Invite to Collab", "It does not look like url": "It doesn't look like a link", + "Italic": "Italic", "Join": "Join", "Join our maillist": "To receive the best postings, just enter your email", "Join the community": "Join the community", @@ -139,6 +154,7 @@ "Nothing is here": "There is nothing here", "Or continue with social network": "Or continue with social network", "Or paste a link to an image": "Or paste a link to an image", + "Ordered list": "Ordered list", "Our regular contributor": "Our regular contributor", "Paragraphs": "Абзацев", "Participating": "Participating", @@ -166,7 +182,9 @@ "Profile settings": "Profile settings", "Publications": "Publications", "Publish Settings": "Publish Settings", + "Punchline": "Punchline", "Quit": "Quit", + "Quote": "Quote", "Quotes": "Quotes", "Reason uknown": "Reason unknown", "Recent": "Fresh", @@ -202,6 +220,7 @@ "Subscribe who you like to tune your personal feed": "Subscribe to authors you're interested in to customize your personal feed and get instant updates on new posts and discussions", "Subscription": "Subscription", "Subscriptions": "Subscriptions", + "Substrate": "Substrate", "Successfully authorized": "Authorization successful", "Suggest an idea": "Suggest an idea", "Support us": "Help the magazine", @@ -255,13 +274,18 @@ "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Your name will appear on your profile page and as your signature in publications, comments and responses", "accomplices": "accomplices", "actions": "actions", + "add link": "add link", "all topics": "all topics", "author": "author", "authors": "authors", + "back to menu": "back to menu", + "bold": "bold", "bookmarks": "bookmarks", "cancel": "Cancel", + "cancel_low_caps": "cancel", "collections": "collections", "community": "community", + "delimiter": "delimiter", "discussion": "discourse", "discussions": "discussions", "drafts": "drafts", @@ -270,12 +294,19 @@ "feed": "feed", "follower": "follower", "general feed": "general tape", + "header 1": "header 1", + "header 2": "header 2", + "header 3": "header 3", "invalid password": "invalid password", + "italic": "italic", + "marker list": "marker list", "my feed": "my ribbon", "notifications": "notifications", + "number list": "number list", "personal data usage and email notifications": "to process personal data and receive email notifications", "post": "post", "register": "register", + "repeat": "repeat", "shout": "post", "sign up or sign in": "sign up or sign in", "slug is used by another user": "Slug is already taken by another user", @@ -283,19 +314,5 @@ "topics": "topics", "user already exist": "user already exists", "view": "view", - "zine": "zine", - "back to menu": "back to menu", - "bold": "bold", - "italic": "italic", - "add link": "add link", - "header 1": "header 1", - "header 2": "header 2", - "header 3": "header 3", - "marker list": "marker list", - "number list": "number list", - "delimiter": "delimiter", - "cancel_low_caps": "cancel", - "repeat": "repeat", - "Add signature": "Add signature", - "Substrate": "Substrate" + "zine": "zine" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 862c6e7f..f07db3e2 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -6,8 +6,14 @@ "Add another image": "Добавить другое изображение", "Add comment": "Комментировать", "Add image": "Добавить изображение", + "Add link": "Добавить ссылку", + "Add signature": "Добавить подпись", "Add to bookmarks": "Добавить в закладки", + "Add url": "Добавить ссылку", "Address on Discourse": "Адрес на Дискурсе", + "Alignment center": "По центру", + "Alignment left": "По левому краю", + "Alignment right": "По правому краю", "All": "Все", "All authors": "Все авторы", "All posts": "Все публикации", @@ -20,8 +26,10 @@ "Autotypograph": "Автотипограф", "Back to main page": "Вернуться на главную", "Become an author": "Стать автором", + "Bold": "Жирный", "Bookmarked": "Сохранено", "Bookmarks": "Закладки", + "Bullet list": "Маркированный список", "By alphabet": "По алфавиту", "By authors": "По авторам", "By name": "По имени", @@ -90,10 +98,14 @@ "Group Chat": "Общий чат", "Groups": "Группы", "Header": "Заголовок", + "Header 1": "Заголовок 1", + "Header 2": "Заголовок 2", + "Header 3": "Заголовок 3", "Headers": "Заголовки", "Help": "Помощь", "Help to edit": "Помочь редактировать", "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.", + "Highlight": "Подсветка", "Hooray! Welcome!": "Ура! Добро пожаловать!", "Horizontal collaborative journalistic platform": "Горизонтальная платформа для коллаборативной журналистики", "Hotkeys": "Горячие клавиши", @@ -105,7 +117,9 @@ "I have no account yet": "У меня еще нет аккаунта", "I know the password": "Я знаю пароль!", "Image format not supported": "Тип изображения не поддерживается", + "Incut": "Подверстка", "Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе", + "Insert footnote": "Вставить сноску", "Introduce": "Представление", "Invalid email": "Проверьте правильность ввода почты", "Invalid image URL": "Некорректная ссылка на изображение", @@ -114,6 +128,7 @@ "Invite experts": "Пригласить экспертов", "Invite to collab": "Пригласить к участию", "It does not look like url": "Это не похоже на ссылку", + "Italic": "Курсив", "Join": "Присоединиться", "Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту", "Join the community": "Присоединиться к сообществу", @@ -146,6 +161,7 @@ "Nothing is here": "Здесь ничего нет", "Or continue with social network": "Или войдите через соцсеть", "Or paste a link to an image": "Или вставьте ссылку на изображение", + "Ordered list": "Нумерованный список", "Our regular contributor": "Наш постоянный автор", "Paragraphs": "Абзацев", "Participating": "Участвовать", @@ -177,7 +193,9 @@ "Publications": "Публикации", "Publish": "Опубликовать", "Publish Settings": "Настройки публикации", + "Punchline": "Панчлайн", "Quit": "Выйти", + "Quote": "Цитата", "Quotes": "Цитаты", "Reason uknown": "Причина неизвестна", "Recent": "Свежее", @@ -215,6 +233,7 @@ "Subscribe who you like to tune your personal feed": "Подпишитесь на интересующих вас авторов, чтобы настроить вашу персональную ленту и моментально узнавать о новых публикациях и обсуждениях", "Subscription": "Подписка", "Subscriptions": "Подписки", + "Substrate": "Подложка", "Successfully authorized": "Авторизация успешна", "Suggest an idea": "Предложить идею", "Support us": "Помочь журналу", @@ -270,15 +289,20 @@ "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах", "accomplices": "соучастники", "actions": "действия", + "add link": "добавить ссылку", "all topics": "все темы", "author": "автор", "authors": "авторы", + "back to menu": "назад в меню", + "bold": "жирный", "bookmarks": "закладки", "cancel": "Отмена", + "cancel_low_caps": "отменить", "collections": "коллекции", "community": "сообщество", "create_chat": "Создать чат", "create_group": "Создать группу", + "delimiter": "разделитель", "discourse_theme": "Тема дискурса", "discussion": "дискурс", "discussions": "дискуссии", @@ -288,13 +312,20 @@ "feed": "лента", "follower": "подписчик", "general feed": "общая лента", + "header 1": "заголовок 1", + "header 2": "заголовок 2", + "header 3": "заголовок 3", "invalid password": "некорректный пароль", + "italic": "курсив", + "marker list": "маркир. список", "my feed": "моя лента", "notifications": "уведомления", + "number list": "нумер. список", "or": "или", "personal data usage and email notifications": "на обработку персональных данных и на получение почтовых уведомлений", "post": "пост", "register": "зарегистрируйтесь", + "repeat": "повторить", "shout": "пост", "sign in": "войти", "sign up": "зарегистрироваться", @@ -305,19 +336,5 @@ "topics": "темы", "user already exist": "пользователь уже существует", "view": "просмотр", - "zine": "журнал", - "back to menu": "назад в меню", - "bold": "жирный", - "italic": "курсив", - "add link": "добавить ссылку", - "header 1": "заголовок 1", - "header 2": "заголовок 2", - "header 3": "заголовок 3", - "marker list": "маркир. список", - "number list": "нумер. список", - "delimiter": "разделитель", - "cancel_low_caps": "отменить", - "repeat": "повторить", - "Add signature": "Добавить подпись", - "Substrate": "Подложка" + "zine": "журнал" } diff --git a/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx b/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx index 796a8d97..e9fa8609 100644 --- a/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx +++ b/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx @@ -1,8 +1,9 @@ import type { Editor } from '@tiptap/core' -import styles from './FigureBubbleMenu.module.scss' +import styles from './BubbleMenu.module.scss' import { clsx } from 'clsx' import { Icon } from '../../_shared/Icon' import { useLocalize } from '../../../context/localize' +import { Popover } from '../../_shared/Popover' type Props = { editor: Editor @@ -10,31 +11,47 @@ type Props = { } export const BlockquoteBubbleMenu = (props: Props) => { + const { t } = useLocalize() return ( -
- - - +
+ + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +
) } diff --git a/src/components/Editor/BubbleMenu/FigureBubbleMenu.module.scss b/src/components/Editor/BubbleMenu/BubbleMenu.module.scss similarity index 99% rename from src/components/Editor/BubbleMenu/FigureBubbleMenu.module.scss rename to src/components/Editor/BubbleMenu/BubbleMenu.module.scss index 3cad51d7..0d90afad 100644 --- a/src/components/Editor/BubbleMenu/FigureBubbleMenu.module.scss +++ b/src/components/Editor/BubbleMenu/BubbleMenu.module.scss @@ -1,4 +1,4 @@ -.FigureBubbleMenu { +.BubbleMenu { background: #000; display: flex; flex-direction: row; diff --git a/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx b/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx index 4ae20add..bab11e08 100644 --- a/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx +++ b/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx @@ -1,8 +1,9 @@ import type { Editor } from '@tiptap/core' -import styles from './FigureBubbleMenu.module.scss' +import styles from './BubbleMenu.module.scss' import { clsx } from 'clsx' import { Icon } from '../../_shared/Icon' import { useLocalize } from '../../../context/localize' +import { Popover } from '../../_shared/Popover' type Props = { editor: Editor @@ -12,29 +13,43 @@ type Props = { export const FigureBubbleMenu = (props: Props) => { const { t } = useLocalize() return ( -
- - - - +
+ + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +
- + + {(triggerRef: (el) => void) => ( + + )} +
) } diff --git a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx index 3a8e059c..de76fd33 100644 --- a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx +++ b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx @@ -1,6 +1,6 @@ import { createSignal, Show, For } from 'solid-js' import type { Editor } from '@tiptap/core' -import styles from './FigureBubbleMenu.module.scss' +import styles from './BubbleMenu.module.scss' import { clsx } from 'clsx' import { Icon } from '../../_shared/Icon' import { useLocalize } from '../../../context/localize' @@ -16,7 +16,7 @@ export const IncutBubbleMenu = (props: Props) => { const { t } = useLocalize() const [substratBubbleOpen, setSubstratBubbleOpen] = createSignal(false) return ( -
+
- + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx index 0e000843..71a2900e 100644 --- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx +++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx @@ -7,6 +7,7 @@ import { createEditorTransaction } from 'solid-tiptap' import { useLocalize } from '../../../context/localize' import { InlineForm } from '../InlineForm' import { validateUrl } from '../../../utils/validateUrl' +import { Popover } from '../../_shared/Popover' type BubbleMenuProps = { editor: Editor @@ -107,84 +108,114 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
{t('Headers')}
- - - + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +
{t('Quotes')}
- - + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +
{t('squib')}
- + + {(triggerRef: (el) => void) => ( + + )} +
@@ -192,51 +223,75 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
- - + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + - + + {(triggerRef: (el) => void) => ( + + )} +
- + + {(triggerRef: (el) => void) => ( + + )} + <> - + + {(triggerRef: (el) => void) => ( + + )} +
- + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} +