diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
index bc759eddd..59096517b 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
@@ -31,6 +31,22 @@ test.describe('Doc Create', () => {
await expect(docsGrid.getByText(docTitle)).toBeVisible();
});
+ test('it creates a sub doc from the submenu "New" button', async ({
+ page,
+ browserName,
+ }) => {
+ await createDoc(page, 'my-new-button-sub-doc', browserName, 1);
+
+ await page.getByLabel('Open new document options').click();
+ await page.getByRole('menuitem', { name: 'New sub-doc' }).click();
+
+ const input = page.getByRole('textbox', { name: 'Document title' });
+ await expect(input).toHaveText('', { timeout: 10000 });
+ await expect(
+ page.locator('.c__tree-view--row-content').getByText('Untitled document'),
+ ).toBeVisible();
+ });
+
test('it creates a sub doc from slash menu editor', async ({
page,
browserName,
diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg
new file mode 100644
index 000000000..6cc7f8b4a
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx
index fc593a49a..f8d685428 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx
@@ -7,10 +7,13 @@ import { useTranslation } from 'react-i18next';
import { Text } from '@/components';
import { useConfig } from '@/core/config/api/useConfig';
import ArrowDownIcon from '@/icons/arrow-drop-down.svg';
+import SubDocIcon from '@/icons/doc-new-subdoc.svg';
import PlusIcon from '@/icons/doc-plus.svg';
import UploadIcon from '@/icons/upload-arrow.svg';
+import { useCreateChildDoc } from '../api/useCreateChildDoc';
import { useImport } from '../hooks/useImport';
+import { useDocStore } from '../stores/useDocStore';
interface NewDocButtonProps {
onClose?: () => void;
@@ -55,6 +58,7 @@ export const NewDocButton = ({ onClose }: NewDocButtonProps) => {
export function DropdownArrow() {
const router = useRouter();
const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const { currentDoc } = useDocStore();
const { t } = useTranslation();
const {
getInputProps,
@@ -66,6 +70,11 @@ export function DropdownArrow() {
void router.push(`/docs/${doc.id}/`);
},
});
+ const { mutate: createChildDoc } = useCreateChildDoc({
+ onSuccess: (newDoc) => {
+ void router.push(`/docs/${newDoc.id}`);
+ },
+ });
const toggleMenu = useCallback(() => {
setIsMenuOpen((open) => !open);
@@ -73,6 +82,18 @@ export function DropdownArrow() {
const options = useMemo(
() => [
+ {
+ label: t('New sub-doc'),
+ icon: ,
+ callback: () => {
+ if (currentDoc) {
+ createChildDoc({
+ parentId: currentDoc.id,
+ });
+ }
+ },
+ isHidden: !currentDoc,
+ },
{
label: t('Import a document'),
icon: ,
@@ -80,7 +101,7 @@ export function DropdownArrow() {
isHidden: !isImportEnabled,
},
],
- [t, openImport, isImportEnabled],
+ [t, openImport, currentDoc, createChildDoc, isImportEnabled],
);
return (