Add popover helpers in Editor (#105)
This commit is contained in:
Ilya Y
GitHub
parent
5a1699aa87
commit
bb45d206e1
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": "журнал"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,9 +11,13 @@ type Props = {
|
|||
}
|
||||
|
||||
export const BlockquoteBubbleMenu = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
return (
|
||||
<div ref={props.ref} class={styles.FigureBubbleMenu}>
|
||||
<div ref={props.ref} class={styles.BubbleMenu}>
|
||||
<Popover content={t('Alignment left')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => {
|
||||
|
|
@ -21,20 +26,32 @@ export const BlockquoteBubbleMenu = (props: Props) => {
|
|||
>
|
||||
<Icon name="editor-image-align-left" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Alignment center')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => props.editor.chain().focus().setBlockQuoteFloat(null).run()}
|
||||
>
|
||||
<Icon name="editor-image-align-center" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Alignment center')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => props.editor.chain().focus().setBlockQuoteFloat('right').run()}
|
||||
>
|
||||
<Icon name="editor-image-align-right" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.FigureBubbleMenu {
|
||||
.BubbleMenu {
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -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 (
|
||||
<div ref={props.ref} class={styles.FigureBubbleMenu}>
|
||||
<div ref={props.ref} class={styles.BubbleMenu}>
|
||||
<Popover content={t('Alignment left')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => props.editor.chain().focus().setImageFloat('left').run()}
|
||||
>
|
||||
<Icon name="editor-image-align-left" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Alignment center')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => props.editor.chain().focus().setImageFloat(null).run()}
|
||||
>
|
||||
<Icon name="editor-image-align-center" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Alignment right')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
onClick={() => props.editor.chain().focus().setImageFloat('right').run()}
|
||||
>
|
||||
<Icon name="editor-image-align-right" />
|
||||
</button>
|
||||
|
||||
)}
|
||||
</Popover>
|
||||
<div class={styles.delimiter} />
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -46,9 +61,13 @@ export const FigureBubbleMenu = (props: Props) => {
|
|||
<span style={{ color: 'white' }}>{t('Add signature')}</span>
|
||||
</button>
|
||||
<div class={styles.delimiter} />
|
||||
<button type="button" class={clsx(styles.bubbleMenuButton)}>
|
||||
<Popover content={t('Add image')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button type="button" ref={triggerRef} class={clsx(styles.bubbleMenuButton)}>
|
||||
<Icon name="editor-image-add" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div ref={props.ref} class={styles.FigureBubbleMenu}>
|
||||
<div ref={props.ref} class={styles.BubbleMenu}>
|
||||
<button
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton)}
|
||||
|
|
|
|||
|
|
@ -177,28 +177,25 @@ export const Editor = (props: EditorProps) => {
|
|||
const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
|
||||
|
||||
setIsCommonMarkup(e.isActive('figure'))
|
||||
return (
|
||||
view.hasFocus() &&
|
||||
!empty &&
|
||||
!isEmptyTextBlock &&
|
||||
!e.isActive('image') &&
|
||||
!e.isActive('blockquote') &&
|
||||
!e.isActive('article')
|
||||
)
|
||||
return view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image')
|
||||
}
|
||||
}),
|
||||
BubbleMenu.configure({
|
||||
pluginKey: 'blockquoteBubbleMenu',
|
||||
element: blockquoteBubbleMenuRef.current,
|
||||
shouldShow: ({ editor: e, view }) => {
|
||||
return view.hasFocus() && e.isActive('blockquote')
|
||||
shouldShow: ({ editor: e, state }) => {
|
||||
const { selection } = state
|
||||
const { empty } = selection
|
||||
return empty && e.isActive('blockquote')
|
||||
}
|
||||
}),
|
||||
BubbleMenu.configure({
|
||||
pluginKey: 'incutBubbleMenu',
|
||||
element: incutBubbleMenuRef.current,
|
||||
shouldShow: ({ editor: e, view }) => {
|
||||
return view.hasFocus() && e.isActive('article')
|
||||
shouldShow: ({ editor: e, state }) => {
|
||||
const { selection } = state
|
||||
const { empty } = selection
|
||||
return empty && e.isActive('article')
|
||||
}
|
||||
}),
|
||||
BubbleMenu.configure({
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import styles from './InlineForm.module.scss'
|
|||
import { Icon } from '../../_shared/Icon'
|
||||
import { createSignal } from 'solid-js'
|
||||
import { clsx } from 'clsx'
|
||||
import { Popover } from '../../_shared/Popover'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
|
|
@ -15,6 +17,7 @@ type Props = {
|
|||
}
|
||||
|
||||
export const InlineForm = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
const [formValue, setFormValue] = createSignal(props.initialValue || '')
|
||||
const [formValueError, setFormValueError] = createSignal<string | undefined>()
|
||||
|
||||
|
|
@ -61,12 +64,25 @@ export const InlineForm = (props: Props) => {
|
|||
onKeyDown={handleKeyDown}
|
||||
onInput={handleFormInput}
|
||||
/>
|
||||
<button type="button" onClick={handleSaveButtonClick} disabled={Boolean(formValueError())}>
|
||||
<Popover content={t('Add link')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={handleSaveButtonClick}
|
||||
disabled={Boolean(formValueError())}
|
||||
>
|
||||
<Icon name="status-done" />
|
||||
</button>
|
||||
<button type="button" onClick={props.onClear}>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={props.initialValue ? t('Unlink') : t('Cancel')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button ref={triggerRef} type="button" onClick={props.onClear}>
|
||||
{props.initialValue ? <Icon name="editor-unlink" /> : <Icon name="status-cancel" />}
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div class={clsx(styles.linkError, { [styles.visible]: Boolean(formValueError()) })}>
|
||||
|
|
|
|||
|
|
@ -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,7 +108,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
<div class={styles.dropDown}>
|
||||
<header>{t('Headers')}</header>
|
||||
<div class={styles.actions}>
|
||||
<Popover content={t('Header 1')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH1()
|
||||
|
|
@ -119,7 +123,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-h1" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Header 2')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH2()
|
||||
|
|
@ -131,7 +140,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-h2" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Header 3')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isH3()
|
||||
|
|
@ -143,10 +157,15 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-h3" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
<header>{t('Quotes')}</header>
|
||||
<div class={styles.actions}>
|
||||
<Popover content={t('Quote')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
|
|
@ -158,7 +177,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-blockquote" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Punchline')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
|
|
@ -170,10 +194,15 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-quote" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
<header>{t('squib')}</header>
|
||||
<div class={styles.actions}>
|
||||
<Popover content={t('Incut')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBlockQuote()
|
||||
|
|
@ -185,6 +214,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-squib" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
|
@ -192,7 +223,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
<div class={styles.delimiter} />
|
||||
</>
|
||||
</Show>
|
||||
<Popover content={t('Bold')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBold()
|
||||
|
|
@ -201,7 +235,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-bold" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Italic')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isItalic()
|
||||
|
|
@ -210,9 +249,14 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-italic" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
|
||||
<Show when={!props.isCommonMarkup}>
|
||||
<Popover content={t('Highlight')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isHighlight()
|
||||
|
|
@ -221,9 +265,14 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<div class={styles.toggleHighlight} />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</Show>
|
||||
<div class={styles.delimiter} />
|
||||
<Popover content={t('Add url')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={toggleLinkForm}
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
|
|
@ -232,11 +281,17 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-link" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Show when={!props.isCommonMarkup}>
|
||||
<>
|
||||
<button type="button" class={styles.bubbleMenuButton}>
|
||||
<Popover content={t('Insert footnote')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button ref={triggerRef} type="button" class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-footnote" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<div class={styles.delimiter} />
|
||||
<div class={styles.dropDownHolder}>
|
||||
<button
|
||||
|
|
@ -253,7 +308,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
<div class={styles.dropDown}>
|
||||
<header>{t('Lists')}</header>
|
||||
<div class={styles.actions}>
|
||||
<Popover content={t('Bullet list')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBulletList()
|
||||
|
|
@ -265,7 +323,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover content={t('Ordered list')}>
|
||||
{(triggerRef: (el) => void) => (
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isOrderedList()
|
||||
|
|
@ -277,6 +340,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
|
|||
>
|
||||
<Icon name="editor-ol" />
|
||||
</button>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user