🔥(frontend) hide markdown button if not text
If we are selected a block that is not a text block, we hide the markdown button.
This commit is contained in:
@@ -11,9 +11,10 @@ import {
|
|||||||
UnnestBlockButton,
|
UnnestBlockButton,
|
||||||
useBlockNoteEditor,
|
useBlockNoteEditor,
|
||||||
useComponentsContext,
|
useComponentsContext,
|
||||||
|
useSelectedBlocks,
|
||||||
} from '@blocknote/react';
|
} from '@blocknote/react';
|
||||||
import { forEach, isArray } from 'lodash';
|
import { forEach, isArray } from 'lodash';
|
||||||
import React from 'react';
|
import React, { useMemo } from 'react';
|
||||||
|
|
||||||
export const BlockNoteToolbar = () => {
|
export const BlockNoteToolbar = () => {
|
||||||
return (
|
return (
|
||||||
@@ -91,6 +92,7 @@ const recursiveContent = (content: Block[], base: string = '') => {
|
|||||||
export function MarkdownButton() {
|
export function MarkdownButton() {
|
||||||
const editor = useBlockNoteEditor();
|
const editor = useBlockNoteEditor();
|
||||||
const Components = useComponentsContext();
|
const Components = useComponentsContext();
|
||||||
|
const selectedBlocks = useSelectedBlocks(editor);
|
||||||
|
|
||||||
const handleConvertMarkdown = () => {
|
const handleConvertMarkdown = () => {
|
||||||
const blocks = editor.getSelection()?.blocks;
|
const blocks = editor.getSelection()?.blocks;
|
||||||
@@ -114,7 +116,11 @@ export function MarkdownButton() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!Components) {
|
const show = useMemo(() => {
|
||||||
|
return !!selectedBlocks.find((block) => block.content !== undefined);
|
||||||
|
}, [selectedBlocks]);
|
||||||
|
|
||||||
|
if (!show || !editor.isEditable || !Components) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user