remove-unused-styles

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<Author>(() => 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<Partial<EditorOptions>>({})
   const [editorElRef, setEditorElRef] = createSignal<HTMLElement | undefined>()
-  const [textBubbleMenuRef, setTextBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
   const [incutBubbleMenuRef, setIncutBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
   const [figureBubbleMenuRef, setFigureBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
   const [blockquoteBubbleMenuRef, setBlockquoteBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
   const [floatingMenuRef, setFloatingMenuRef] = createSignal<HTMLDivElement | undefined>()
+  const [fullBubbleMenuRef, setFullBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
   const [editor, setEditor] = createSignal<Editor | null>(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) => {
       </div>
 
       <FullBubbleMenu
-        shouldShow={shouldShowTextBubbleMenu}
-        isCommonMarkup={isCommonMarkup()}
         editor={editor as Accessor<Editor | undefined>}
-        ref={setTextBubbleMenuRef}
+        ref={setFullBubbleMenuRef}
+        shouldShow={shouldShowFullBubbleMenu}
+        isCommonMarkup={isCommonMarkup()}
       />
       <BlockquoteBubbleMenu editor={editor() as Editor} ref={setBlockquoteBubbleMenuRef} />
       <FigureBubbleMenu editor={editor() as Editor} ref={setFigureBubbleMenuRef} />

src/components/Editor/Toolbar/EditorFloatingMenu.module.scss

@@ -35,8 +35,4 @@
     }
   }
 
-}
-
-:global(.tippy-box) {
-  line-height: 1.3;
 }

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;

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')}
         />
       )}

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;
 }

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%);

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%);