>({})
@@ -180,14 +175,8 @@ export const EditorComponent = (props: EditorComponentProps) => {
requireAuthentication(() => {
setTimeout(() => {
setupEditor()
-
- // Создаем экземпляр редактора после монтирования
createEditorInstance(editorOptions())
-
- // Инициализируем меню после создания редактора
- if (editor()) {
- initializeMenus()
- }
+ initializeMenus()
}, 1200)
}, 'edit')
})
@@ -196,30 +185,80 @@ export const EditorComponent = (props: EditorComponentProps) => {
if (menusInitialized() || !editor()) return
if (blockquoteBubbleMenuRef() && figureBubbleMenuRef() && incutBubbleMenuRef() && floatingMenuRef()) {
console.log('stage 3: initialize menus when editor instance is ready')
- const menuConfigs = [
- { key: 'textBubbleMenu', ref: textBubbleMenuRef, shouldShow: shouldShowTextBubbleMenu },
- {
- key: 'blockquoteBubbleMenu',
- ref: blockquoteBubbleMenuRef,
- shouldShow: shouldShowBlockquoteBubbleMenu
- },
- { key: 'figureBubbleMenu', ref: figureBubbleMenuRef, shouldShow: shouldShowFigureBubbleMenu },
- { key: 'incutBubbleMenu', ref: incutBubbleMenuRef, shouldShow: shouldShowIncutBubbleMenu },
- { key: 'floatingMenu', ref: floatingMenuRef, shouldShow: shouldShowFloatingMenu, isFloating: true }
+ const menus = [
+ BubbleMenu.configure({
+ pluginKey: 'textBubbleMenu',
+ element: textBubbleMenuRef()!,
+ shouldShow: ({ editor: e, view, 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()
+ }
+ const hasSelection = !selection.empty && from !== to
+ const isFootnoteOrFigcaption = e.isActive('footnote') || (e.isActive('figcaption') && hasSelection)
+
+ setIsCommonMarkup(e?.isActive('figcaption'))
+
+ const result = view.hasFocus() &&
+ hasSelection &&
+ !e.isActive('image') &&
+ !e.isActive('figure') &&
+ (isFootnoteOrFigcaption || !e.isActive('figcaption'))
+
+ setShouldShowTextBubbleMenu(result)
+ return result
+ },
+ tippyOptions: {
+ sticky: true,
+ // onHide: () => { editor()?.commands.focus() }
+ }
+ }),
+ BubbleMenu.configure({
+ pluginKey: 'blockquoteBubbleMenu',
+ element: blockquoteBubbleMenuRef()!,
+ shouldShow: ({ editor: e, state: { selection } }) => e.isFocused && !selection.empty && e.isActive('blockquote'),
+ tippyOptions: {
+ offset: [0, 0],
+ placement: 'top',
+ getReferenceClientRect: () => {
+ const selectedElement = editor()?.view.dom.querySelector('.has-focus')
+ return selectedElement?.getBoundingClientRect() || new DOMRect()
+ }
+ }
+ }),
+ BubbleMenu.configure({
+ pluginKey: 'figureBubbleMenu',
+ element: figureBubbleMenuRef()!,
+ shouldShow: ({ editor: e, view }) => view.hasFocus() && e.isActive('figure')
+ }),
+ BubbleMenu.configure({
+ pluginKey: 'incutBubbleMenu',
+ element: incutBubbleMenuRef()!,
+ shouldShow: ({ editor: e, state: { selection } }) => e.isFocused && !selection.empty && e.isActive('figcaption'),
+ tippyOptions: {
+ offset: [0, -16],
+ placement: 'top',
+ getReferenceClientRect: () => {
+ const selectedElement = editor()?.view.dom.querySelector('.has-focus')
+ return selectedElement?.getBoundingClientRect() || new DOMRect()
+ },
+ },
+ }),
+ FloatingMenu.configure({
+ element: floatingMenuRef()!,
+ pluginKey: 'floatingMenu',
+ shouldShow: ({ editor: e, state: { selection } }) => {
+ const { $anchor, empty } = selection
+ const isRootDepth = $anchor.depth === 1
+ if (!(isRootDepth && empty)) return false
+ return !(e.isActive('codeBlock') || e.isActive('heading'))
+ },
+ tippyOptions: {
+ placement: 'left',
+ }
+ })
]
- const menus = menuConfigs.map((config) =>
- config.isFloating
- ? FloatingMenu.configure({
- pluginKey: config.key,
- element: config.ref(),
- shouldShow: config.shouldShow
- })
- : BubbleMenu.configure({
- pluginKey: config.key,
- element: config.ref(),
- shouldShow: config.shouldShow
- })
- )
setEditorOptions((prev) => ({ ...prev, extensions: [...(prev.extensions || []), ...menus] }))
setMenusInitialized(true)
} else {
@@ -311,12 +350,12 @@ export const EditorComponent = (props: EditorComponentProps) => {
{(ed: Editor) => (
<>
-
)
-}
+}
\ No newline at end of file
diff --git a/src/components/Editor/MiniEditor.tsx b/src/components/Editor/MiniEditor.tsx
index 6fe5d0aa..35a19ad7 100644
--- a/src/components/Editor/MiniEditor.tsx
+++ b/src/components/Editor/MiniEditor.tsx
@@ -162,11 +162,14 @@ export function MiniEditor(props: MiniEditorProps): JSX.Element {
editor()?.commands.clearContent()}
+ onClick={() => {
+ editor()?.commands.clearContent()
+ props.onCancel?.()
+ }
+ }
/>
-
0}>
diff --git a/src/components/Editor/Toolbar/TextBubbleMenu.tsx b/src/components/Editor/Toolbar/TextBubbleMenu.tsx
index 188de1e3..6fa0c596 100644
--- a/src/components/Editor/Toolbar/TextBubbleMenu.tsx
+++ b/src/components/Editor/Toolbar/TextBubbleMenu.tsx
@@ -16,11 +16,10 @@ import { Icon } from '~/components/_shared/Icon'
import { Popover } from '~/components/_shared/Popover'
import { useLocalize } from '~/context/localize'
import { InsertLinkForm } from './InsertLinkForm'
+import { MiniEditor } from '../MiniEditor'
import styles from './TextBubbleMenu.module.scss'
-const MiniEditor = lazy(() => import('../MiniEditor'))
-
type BubbleMenuProps = {
editor: Editor
isCommonMarkup: boolean
diff --git a/src/components/Inbox/DialogCard.module.scss b/src/components/Inbox/DialogCard.module.scss
index 447f4cee..38c8fff0 100644
--- a/src/components/Inbox/DialogCard.module.scss
+++ b/src/components/Inbox/DialogCard.module.scss
@@ -77,7 +77,7 @@
.name,
.message,
.time {
- color: #fff !important;
+ color: var(--default-color-invert) !important;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/components/_shared/LoadMoreWrapper.module.scss b/src/components/_shared/LoadMoreWrapper.module.scss
new file mode 100644
index 00000000..00524916
--- /dev/null
+++ b/src/components/_shared/LoadMoreWrapper.module.scss
@@ -0,0 +1,8 @@
+
+.loadMoreWrapper {
+ text-align: center;
+
+ button {
+ padding: 0.6em 1.5em;
+ }
+ }
\ No newline at end of file
diff --git a/src/components/_shared/LoadMoreWrapper.tsx b/src/components/_shared/LoadMoreWrapper.tsx
index 5625e077..5f69aa72 100644
--- a/src/components/_shared/LoadMoreWrapper.tsx
+++ b/src/components/_shared/LoadMoreWrapper.tsx
@@ -6,6 +6,8 @@ import { SortFunction } from '~/types/common'
import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
import { byCreated } from '~/utils/sort'
+import styles from './LoadMoreWrapper.module.scss'
+
export type LoadMoreItems = Shout[] | Author[] | Reaction[]
type LoadMoreProps = {
@@ -58,7 +60,7 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
{props.children}