diff --git a/src/_node/file/apis.ts b/src/_node/file/apis.ts index 84416e46..80b93646 100644 --- a/src/_node/file/apis.ts +++ b/src/_node/file/apis.ts @@ -61,28 +61,33 @@ export const initIDBProject = async (projectPath: string): Promise => { } }); }; +export const getIndexHtmlContent = () => { + const htmlElementsReferenceData: THtmlElementsReferenceData = {}; + htmlRefElements.map((htmlRefElement: THtmlElementsReference) => { + const pureTag = + htmlRefElement["Name"] === "Comment" + ? "comment" + : htmlRefElement["Tag"]?.slice(1, htmlRefElement["Tag"].length - 1); + htmlElementsReferenceData[pureTag] = htmlRefElement; + }); + + const doctype = "\n"; + const html = htmlElementsReferenceData["html"].Content + ? `\n` + htmlElementsReferenceData["html"].Content + `\n` + : `Untitled

Heading 1

`; + const indexHtmlContent = doctype + html; + return indexHtmlContent; +}; + export const createIDBProject = async (projectPath: string): Promise => { return new Promise(async (resolve, reject) => { try { - const htmlElementsReferenceData: THtmlElementsReferenceData = {}; - htmlRefElements.map((htmlRefElement: THtmlElementsReference) => { - const pureTag = - htmlRefElement["Name"] === "Comment" - ? "comment" - : htmlRefElement["Tag"]?.slice(1, htmlRefElement["Tag"].length - 1); - htmlElementsReferenceData[pureTag] = htmlRefElement; - }); - // create project directory await _createIDBDirectory(projectPath); // create index.html const indexHtmlPath = `${projectPath}/index.html`; - const doctype = "\n"; - const html = htmlElementsReferenceData["html"].Content - ? `\n` + htmlElementsReferenceData["html"].Content + `\n` - : `Untitled

Heading 1

`; - const indexHtmlContent = doctype + html; + const indexHtmlContent = getIndexHtmlContent(); await _writeIDBFile(indexHtmlPath, indexHtmlContent); resolve(); diff --git a/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx b/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx index 5f98eea9..1c84d165 100644 --- a/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx +++ b/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx @@ -33,6 +33,7 @@ import { useTemporaryNodes, } from "./hooks"; import { Container, ItemArrow } from "./workSpaceTreeComponents"; +import { useDefaultFileCreate } from "./hooks/useDefaultFile"; const AutoExpandDelayOnDnD = 1 * 1000; export default function WorkspaceTreeView() { @@ -113,7 +114,7 @@ export default function WorkspaceTreeView() { removeTemporaryNodes, openFileUid, }); - + useDefaultFileCreate(); useEffect(() => { if (!didUndo && !didRedo) return; diff --git a/src/components/main/actionsPanel/workspaceTreeView/helpers/createDefaultFile.ts b/src/components/main/actionsPanel/workspaceTreeView/helpers/createDefaultFile.ts new file mode 100644 index 00000000..55173bfe --- /dev/null +++ b/src/components/main/actionsPanel/workspaceTreeView/helpers/createDefaultFile.ts @@ -0,0 +1,16 @@ +import { RootNodeUid } from "@_constants/index"; +import { TFileHandlerCollection, getIndexHtmlContent } from "@_node/index"; + +export const createDefaultFile = async ( + fileHandlers: TFileHandlerCollection, +) => { + const indexHtmlContent = getIndexHtmlContent(); + const newFile = await ( + fileHandlers[RootNodeUid] as FileSystemDirectoryHandle + ).getFileHandle("index.html", { + create: true, + }); + const writableStream = await newFile.createWritable(); + await writableStream.write(indexHtmlContent); + await writableStream.close(); +}; diff --git a/src/components/main/actionsPanel/workspaceTreeView/hooks/useDefaultFile.tsx b/src/components/main/actionsPanel/workspaceTreeView/hooks/useDefaultFile.tsx new file mode 100644 index 00000000..aea1c6d2 --- /dev/null +++ b/src/components/main/actionsPanel/workspaceTreeView/hooks/useDefaultFile.tsx @@ -0,0 +1,26 @@ +import { RootNodeUid } from "@_constants/main"; +import { MainContext } from "@_redux/main"; +import { setShowActionsPanel } from "@_redux/main/processor"; +import { useAppState } from "@_redux/useAppState"; +import { useContext, useEffect } from "react"; +import { useDispatch } from "react-redux"; +import { createDefaultFile } from "../helpers/createDefaultFile"; + +export const useDefaultFileCreate = () => { + const { fileTree } = useAppState(); + const { fileHandlers, reloadCurrentProject, currentProjectFileHandle } = + useContext(MainContext); + + const dispatch = useDispatch(); + + useEffect(() => { + if ( + fileTree[RootNodeUid]?.children?.length === 0 && + fileHandlers[RootNodeUid] + ) { + createDefaultFile(fileHandlers); + reloadCurrentProject(fileTree, currentProjectFileHandle); + dispatch(setShowActionsPanel(true)); + } + }, [fileTree[RootNodeUid]?.children, fileHandlers[RootNodeUid]]); +};