diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
index 785f84c27..d7deeee2c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
@@ -9,12 +9,10 @@ import {
NestBlockButton,
TextAlignButton,
UnnestBlockButton,
- useBlockNoteEditor,
- useComponentsContext,
- useSelectedBlocks,
} from '@blocknote/react';
-import { forEach, isArray } from 'lodash';
-import React, { useMemo } from 'react';
+import React from 'react';
+
+import { MarkdownButton } from './MarkdownButton';
export const BlockNoteToolbar = () => {
return (
@@ -57,79 +55,3 @@ export const BlockNoteToolbar = () => {
/>
);
};
-
-type Block = {
- type: string;
- text: string;
- content: Block[];
-};
-
-function isBlock(block: Block): block is Block {
- return (
- block.content &&
- isArray(block.content) &&
- block.content.length > 0 &&
- typeof block.type !== 'undefined'
- );
-}
-
-const recursiveContent = (content: Block[], base: string = '') => {
- let fullContent = base;
- for (const innerContent of content) {
- if (innerContent.type === 'text') {
- fullContent += innerContent.text;
- } else if (isBlock(innerContent)) {
- fullContent = recursiveContent(innerContent.content, fullContent);
- }
- }
-
- return fullContent;
-};
-
-/**
- * Custom Formatting Toolbar Button to convert markdown to json.
- */
-export function MarkdownButton() {
- const editor = useBlockNoteEditor();
- const Components = useComponentsContext();
- const selectedBlocks = useSelectedBlocks(editor);
-
- const handleConvertMarkdown = () => {
- const blocks = editor.getSelection()?.blocks;
-
- forEach(blocks, async (block) => {
- if (!isBlock(block as unknown as Block)) {
- return;
- }
-
- try {
- const fullContent = recursiveContent(
- block.content as unknown as Block[],
- );
-
- const blockMarkdown =
- await editor.tryParseMarkdownToBlocks(fullContent);
- editor.replaceBlocks([block.id], blockMarkdown);
- } catch (error) {
- console.error('Error parsing Markdown:', error);
- }
- });
- };
-
- const show = useMemo(() => {
- return !!selectedBlocks.find((block) => block.content !== undefined);
- }, [selectedBlocks]);
-
- if (!show || !editor.isEditable || !Components) {
- return null;
- }
-
- return (
-
- M
-
- );
-}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/MarkdownButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/MarkdownButton.tsx
new file mode 100644
index 000000000..967e15af5
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/MarkdownButton.tsx
@@ -0,0 +1,84 @@
+import '@blocknote/mantine/style.css';
+import {
+ useBlockNoteEditor,
+ useComponentsContext,
+ useSelectedBlocks,
+} from '@blocknote/react';
+import { forEach, isArray } from 'lodash';
+import React, { useMemo } from 'react';
+
+type Block = {
+ type: string;
+ text: string;
+ content: Block[];
+};
+
+function isBlock(block: Block): block is Block {
+ return (
+ block.content &&
+ isArray(block.content) &&
+ block.content.length > 0 &&
+ typeof block.type !== 'undefined'
+ );
+}
+
+const recursiveContent = (content: Block[], base: string = '') => {
+ let fullContent = base;
+ for (const innerContent of content) {
+ if (innerContent.type === 'text') {
+ fullContent += innerContent.text;
+ } else if (isBlock(innerContent)) {
+ fullContent = recursiveContent(innerContent.content, fullContent);
+ }
+ }
+
+ return fullContent;
+};
+
+/**
+ * Custom Formatting Toolbar Button to convert markdown to json.
+ */
+export function MarkdownButton() {
+ const editor = useBlockNoteEditor();
+ const Components = useComponentsContext();
+ const selectedBlocks = useSelectedBlocks(editor);
+
+ const handleConvertMarkdown = () => {
+ const blocks = editor.getSelection()?.blocks;
+
+ forEach(blocks, async (block) => {
+ if (!isBlock(block as unknown as Block)) {
+ return;
+ }
+
+ try {
+ const fullContent = recursiveContent(
+ block.content as unknown as Block[],
+ );
+
+ const blockMarkdown =
+ await editor.tryParseMarkdownToBlocks(fullContent);
+ editor.replaceBlocks([block.id], blockMarkdown);
+ } catch (error) {
+ console.error('Error parsing Markdown:', error);
+ }
+ });
+ };
+
+ const show = useMemo(() => {
+ return !!selectedBlocks.find((block) => block.content !== undefined);
+ }, [selectedBlocks]);
+
+ if (!show || !editor.isEditable || !Components) {
+ return null;
+ }
+
+ return (
+
+ M
+
+ );
+}