diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 161f956d..6b035a8b 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -1,6 +1,6 @@ import { HocuspocusProvider } from '@hocuspocus/provider' import { UploadFile } from '@solid-primitives/upload' -import { Editor, EditorOptions, isTextSelection } from '@tiptap/core' +import { Editor, EditorOptions } from '@tiptap/core' import { BubbleMenu } from '@tiptap/extension-bubble-menu' import { CharacterCount } from '@tiptap/extension-character-count' import { Collaboration } from '@tiptap/extension-collaboration' @@ -42,18 +42,18 @@ export const EditorComponent = (props: EditorComponentProps) => { const { session, requireAuthentication } = useSession() const author = createMemo(() => session()?.user?.app_data?.profile as Author) const [isCommonMarkup, setIsCommonMarkup] = createSignal(false) - const [shouldShowTextBubbleMenu, setShouldShowTextBubbleMenu] = createSignal(false) const { showSnackbar } = useSnackbar() const { countWords, setEditing, isCollabMode } = useEditorContext() const [editorOptions, setEditorOptions] = createSignal>({}) const [editorElRef, setEditorElRef] = createSignal() - const [textBubbleMenuRef, setTextBubbleMenuRef] = createSignal() const [incutBubbleMenuRef, setIncutBubbleMenuRef] = createSignal() const [figureBubbleMenuRef, setFigureBubbleMenuRef] = createSignal() const [blockquoteBubbleMenuRef, setBlockquoteBubbleMenuRef] = createSignal() const [floatingMenuRef, setFloatingMenuRef] = createSignal() + const [fullBubbleMenuRef, setFullBubbleMenuRef] = createSignal() const [editor, setEditor] = createSignal(null) const [menusInitialized, setMenusInitialized] = createSignal(false) + const [shouldShowFullBubbleMenu, setShouldShowFullBubbleMenu] = createSignal(false) // store tiptap editor in context provider's signal to use it in Panel createEffect(() => setEditing(editor() || undefined)) @@ -173,35 +173,29 @@ export const EditorComponent = (props: EditorComponentProps) => { const initializeMenus = () => { if (menusInitialized() || !editor()) return - if (blockquoteBubbleMenuRef() && figureBubbleMenuRef() && incutBubbleMenuRef() && floatingMenuRef()) { + if ( + blockquoteBubbleMenuRef() && + figureBubbleMenuRef() && + incutBubbleMenuRef() && + floatingMenuRef() && + fullBubbleMenuRef() + ) { console.log('stage 3: initialize menus when editor instance is ready') const menus = [ BubbleMenu.configure({ - pluginKey: 'textBubbleMenu', - element: textBubbleMenuRef()!, - shouldShow: ({ editor: e, state: { doc, selection }, from, to }) => { - const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection) - if (isEmptyTextBlock) { - e?.chain().focus().removeTextWrap({ class: 'highlight-fake-selection' }).run() - return false - } - const hasSelection = !selection.empty && from !== to - const isFootnoteOrFigcaption = - e.isActive('footnote') || (e.isActive('figcaption') && hasSelection) - - const result = - e.view.hasFocus() && - hasSelection && - !e.isActive('image') && - !e.isActive('figure') && - (isFootnoteOrFigcaption || !e.isActive('figcaption')) - - setShouldShowTextBubbleMenu(result) - return result + element: fullBubbleMenuRef()!, + pluginKey: 'fullBubbleMenu', + shouldShow: ({ editor: e, state: { selection } }) => { + const { empty, from, to } = selection + const hasSelection = !empty && from !== to + const shouldShow = + e.view.hasFocus() && hasSelection && !e.isActive('image') && !e.isActive('figure') + setShouldShowFullBubbleMenu(shouldShow) + return shouldShow }, tippyOptions: { - sticky: true - // onHide: () => { editor()?.commands.focus() } + duration: 200, + placement: 'top' } }), BubbleMenu.configure({ @@ -351,10 +345,10 @@ export const EditorComponent = (props: EditorComponentProps) => { } - ref={setTextBubbleMenuRef} + ref={setFullBubbleMenuRef} + shouldShow={shouldShowFullBubbleMenu} + isCommonMarkup={isCommonMarkup()} /> diff --git a/src/components/Editor/Toolbar/EditorFloatingMenu.module.scss b/src/components/Editor/Toolbar/EditorFloatingMenu.module.scss index 439df3d7..738573cc 100644 --- a/src/components/Editor/Toolbar/EditorFloatingMenu.module.scss +++ b/src/components/Editor/Toolbar/EditorFloatingMenu.module.scss @@ -35,8 +35,4 @@ } } -} - -:global(.tippy-box) { - line-height: 1.3; } \ No newline at end of file diff --git a/src/components/Inbox/CreateModalContent.module.scss b/src/components/Inbox/CreateModalContent.module.scss index 8052fd24..9f65c42e 100644 --- a/src/components/Inbox/CreateModalContent.module.scss +++ b/src/components/Inbox/CreateModalContent.module.scss @@ -9,7 +9,7 @@ .chatTitleInput { width: 100%; padding: 0.5rem 1rem; - font-size: 1.25rem; // Эквивалент fs-3 + font-size: 1.25rem; line-height: 1.5; border: 1px solid #ced4da; border-radius: 0.3rem; diff --git a/src/components/Inbox/CreateModalContent.tsx b/src/components/Inbox/CreateModalContent.tsx index 6ecdebfa..5d4765d2 100644 --- a/src/components/Inbox/CreateModalContent.tsx +++ b/src/components/Inbox/CreateModalContent.tsx @@ -77,8 +77,6 @@ const CreateModalContent = (props: Props) => { type="text" required={true} class={styles.chatTitleInput} - // TODO: Удалите эти классы, если они не нужны - // class="form-control form-control-lg fs-3" placeholder={t('Chat Title')} /> )} diff --git a/src/styles/app.scss b/src/styles/app.scss index 646174a4..d990f9f7 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -198,143 +198,6 @@ button { } } -.button--subscribe { - background: var(--background-color); - color: var(--default-color); - border: 2px solid var(--black-100); - font-size: 1.5rem; - justify-content: center; - padding: 0.6rem 1.2rem; - transition: background-color 0.2s; - - img { - height: auto; - transition: filter 0.2s; - } - - &:hover { - background: var(--background-color-invert); - color: var(--default-color-invert); - - img { - filter: invert(1); - } - } -} - -.button--light { - font-size:1.5rem; - background-color: var(--black-100); - border-radius: 0.8rem; - color: var(--default-color); - font-weight: 500; - height: auto; - padding: 0.6rem 1.2rem 0.6rem 1rem; - - &:hover { - background: var(--black-300); - } -} - -.button--subscribe-topic { - background: var(--background-color); - color: var(--default-color); - border: 2px solid var(--default-color); - border-radius: 0.8rem; - font-size: 1.4rem; - line-height: 2.8rem; - height: 3.2rem; - padding: 0 1rem; - - &:hover { - background: var(--background-color-invert); - color: var(--default-color-invert); - opacity: 1; - - .icon { - filter: invert(1); - } - } - - &[disabled]:hover { - background: var(--background-color); - color: var(--default-color); - } - - .icon { - display: inline-block; - margin-right: 0.3em; - vertical-align: text-bottom; - width: 1.4em; - } -} - -.button--content-index { - @include media-breakpoint-up(md) { - margin-top: -0.5rem; - position: sticky; - top: 135px; - } - - @include media-breakpoint-up(sm) { - right: $container-padding-x; - } - - background: none; - border: 2px solid var(--white-500); - height: 3.2rem; - float: right; - padding: 0; - position: absolute; - right: $container-padding-x * 0.5; - top: -0.5rem; - width: 3.2rem; - z-index: 1; - - .icon { - background: #fff; - transition: filter 0.3s; - } - - .icon, - img { - height: 100%; - vertical-align: middle; - width: auto; - } - - &:hover { - .icon { - filter: invert(1); - } - } - - .expanded { - border-radius: 100%; - overflow: hidden; - - img { - height: auto; - margin-top: 0.8rem; - } - } -} - -.button--submit, -.button--outline { - font-size:2rem; - padding: 1.6rem 2rem; -} - -.button--outline { - background: none; - box-shadow: inset 0 0 0 2px #000; - color: #000; - - &:hover { - box-shadow: inset 0 0 0 2px var(--black-300); - } -} form { input[type='text'], @@ -955,4 +818,12 @@ iframe { svg { filter: invert(1); } +} + +.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1030; } \ No newline at end of file diff --git a/src/styles/views/AllAuthors.module.scss b/src/styles/views/AllAuthors.module.scss index b53e92ec..9da077c7 100644 --- a/src/styles/views/AllAuthors.module.scss +++ b/src/styles/views/AllAuthors.module.scss @@ -29,20 +29,6 @@ } } -.loadMoreContainer { - margin-top: 48px; - text-align: center; - - .loadMoreButton { - @include media-breakpoint-up(sm) { - width: auto; - } - - padding: 0.6em 3em; - width: 100%; - } -} - .alphabet { font-size:1.5rem; color: rgba(0 0 0 / 20%); diff --git a/src/styles/views/AllTopics.module.scss b/src/styles/views/AllTopics.module.scss index 85091b68..9bf704ac 100644 --- a/src/styles/views/AllTopics.module.scss +++ b/src/styles/views/AllTopics.module.scss @@ -29,21 +29,6 @@ } } - -.loadMoreContainer { - margin-top: 48px; - text-align: center; - - .loadMoreButton { - @include media-breakpoint-up(sm) { - width: auto; - } - - padding: 0.6em 3em; - width: 100%; - } -} - .alphabet { font-size:1.5rem; color: rgba(0 0 0 / 20%);