diff --git a/public/locales/en/setting-modal.json b/public/locales/en/setting-modal.json index 516cdf9..a471ceb 100644 --- a/public/locales/en/setting-modal.json +++ b/public/locales/en/setting-modal.json @@ -1,24 +1,18 @@ { - "documentFormat": { - "name": "HTML Math Display", - "block": "block", - "inline": "inline" - }, - "latexDelimiter": { - "name": "LaTeX delimiter", - "bracket": "bracket", - "dollar": "dollar" - }, "documentColor": { - "name": "Color Scheme", + "name": "File Display", "light": "Light Mode", "dark": "Dark Mode" }, "cancel": "Cancel", - "submit": "Export File", - "title": "Setting", - "exportType": "Export Type", + "submit": "Export", + "title": "Export File", + "exportType": "File Format", "a8m": "a8m", "zip": "zip", + "documentTitle": "Document Title", + "documentTitlePlaceholder": "Enter a name that summarizes the content of this document", + "fileName": "File Name", + "fileNamePlaceholder": "Enter a file name", "untitledDocument": "Untitled document" } diff --git a/public/locales/zh-TW/setting-modal.json b/public/locales/zh-TW/setting-modal.json index 4060a1b..875dba2 100644 --- a/public/locales/zh-TW/setting-modal.json +++ b/public/locales/zh-TW/setting-modal.json @@ -1,24 +1,18 @@ { - "documentFormat": { - "name": "版面格式", - "block": "塊級", - "inline": "行間" - }, - "latexDelimiter": { - "name": "LaTeX 分隔符", - "bracket": "括號", - "dollar": "錢號" - }, "documentColor": { - "name": "文件顏色", + "name": "檔案顯示", "light": "白底黑字", "dark": "黑底白字" }, "submit": "匯出", "title": "匯出檔案", "cancel": "取消", - "exportType": "輸出格式", + "exportType": "檔案格式", "a8m": "a8m", "zip": "zip", + "documentTitle": "文件標題", + "documentTitlePlaceholder": "請輸入可以總結此文件內容的名稱", + "fileName": "檔案名稱", + "fileNamePlaceholder": "請輸入檔案名稱", "untitledDocument": "未命名文件" } diff --git a/src/components/home/setting-modal/helpers.js b/src/components/home/setting-modal/helpers.js index 6ea0191..1768ff6 100644 --- a/src/components/home/setting-modal/helpers.js +++ b/src/components/home/setting-modal/helpers.js @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; export const useForm = ({ config, isOpen }) => { const [localConfig, setLocalConfig] = useState(config); @@ -15,53 +15,3 @@ export const useForm = ({ config, isOpen }) => { return { localConfig, updateLocalConfig }; }; - -// TODO: add change layout color -export const useOptionGroup = (t) => { - return useMemo(() => { - return [ - { - configName: 'documentFormat', - configLabel: t('documentFormat.name'), - options: [ - { - value: 'block', - label: t('documentFormat.block'), - }, - { - value: 'inline', - label: t('documentFormat.inline'), - }, - ], - }, - { - configName: 'latexDelimiter', - configLabel: t('latexDelimiter.name'), - options: [ - { - value: 'bracket', - label: t('latexDelimiter.bracket'), - }, - { - value: 'dollar', - label: t('latexDelimiter.dollar'), - }, - ], - }, - { - configName: 'documentColor', - configLabel: t('documentColor.name'), - options: [ - { - value: 'light', - label: t('documentColor.light'), - }, - { - value: 'dark', - label: t('documentColor.dark'), - }, - ], - }, - ]; - }, [t]); -}; diff --git a/src/components/home/setting-modal/index.js b/src/components/home/setting-modal/index.js index 4e1e374..7f04330 100644 --- a/src/components/home/setting-modal/index.js +++ b/src/components/home/setting-modal/index.js @@ -1,25 +1,33 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from '@/lib/i18n'; import BasicModal from '@/components/core/modal/basic-modal'; +import TextInput from '@/components/core/text-input'; +import RadioGroup from '@/components/core/radio-group'; -import { useOptionGroup, useForm } from './helpers'; +import { useForm } from './helpers'; const SettingModal = ({ isOpen, onClose, onSubmit, displayConfig, exportType, setExportType }) => { const t = useTranslation('setting-modal'); - const optionGroup = useOptionGroup(t); - const { localConfig, updateLocalConfig } = useForm({ isOpen, config: displayConfig, }); + const [fileName, setFileName] = useState(''); + + useEffect(() => { + if (isOpen) { + setFileName(''); + } + }, [isOpen]); + const onConfirm = useCallback(() => { - onSubmit(localConfig, exportType); + onSubmit(localConfig, exportType, fileName); onClose(); - }, [onSubmit, onClose, localConfig, exportType]); + }, [onSubmit, onClose, localConfig, exportType, fileName]); return ( -
- {optionGroup.map(({ configName, configLabel, options }) => { - return ( -
- -
- {configLabel} - -
-
- ); - })} -
- -
- {t('exportType')} - -
-
-
+
+ updateLocalConfig('title', val)} + placeholder={t('documentTitlePlaceholder')} + /> + + + updateLocalConfig('documentColor', val)} + /> +
); }; @@ -88,11 +85,14 @@ SettingModal.propTypes = { onClose: PropTypes.func, onSubmit: PropTypes.func, displayConfig: PropTypes.shape({ + title: PropTypes.string, documentFormat: PropTypes.string, latexDelimiter: PropTypes.string, exportType: PropTypes.string, documentColor: PropTypes.string, }), + exportType: PropTypes.string, + setExportType: PropTypes.func, }; export default SettingModal; diff --git a/src/lib/file.js b/src/lib/file.js index 85fc989..9a21796 100644 --- a/src/lib/file.js +++ b/src/lib/file.js @@ -128,7 +128,12 @@ const extractEntryData = ({ config, contents }) => { const genConfigJs = (raw) => `window.contentConfig = ${raw}`; -export const saveContentAsWebsite = (sourceText, configInput = {}, imagesToExport = {}) => { +export const saveContentAsWebsite = ( + sourceText, + configInput = {}, + imagesToExport = {}, + fileName = '' +) => { const config = { ...configInput, sourceText, @@ -153,14 +158,22 @@ export const saveContentAsWebsite = (sourceText, configInput = {}, imagesToExpor imagesFolder.file(fileName, imageBlob); } + const saveName = + fileName.trim() || config.title || i18n.t('untitledDocument', { ns: 'setting-modal' }); + zip.generateAsync({ type: 'blob' }).then((newZipData) => { - saveAs(newZipData, `${config.title}.zip`); + saveAs(newZipData, `${saveName}.zip`); }); }); }); }; -export const saveContentAsOriginalFile = async (sourceText, config, imagesToExport) => { +export const saveContentAsOriginalFile = async ( + sourceText, + config, + imagesToExport, + fileName = '' +) => { const { entry } = config; const images = Object.entries(imagesToExport).reduce((acc, [fileId, { fileName }]) => { const key = fileId; @@ -191,12 +204,11 @@ export const saveContentAsOriginalFile = async (sourceText, config, imagesToExpo zip.file(CONFIG_JSON_FILE_NAME, configBlob); zip.file(entry, markdownBlob); + + const saveName = + fileName.trim() || config.title || i18n.t('untitledDocument', { ns: 'setting-modal' }); + zip.generateAsync({ type: 'blob' }).then((newZipData) => { - saveAs( - newZipData, - `${ - config.title || i18n.t('untitledDocument', { ns: 'setting-modal' }) - }.${ORIGINAL_FILE_EXTENSION}` - ); + saveAs(newZipData, `${saveName}.${ORIGINAL_FILE_EXTENSION}`); }); }; diff --git a/src/pages/home/home.js b/src/pages/home/home.js index bd9bb67..f8f5d6d 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -276,17 +276,17 @@ export default function Home() { ); const exportFileAction = useCallback( - (updatedConfig, exportType) => { + (updatedConfig, exportType, fileName) => { setDisplayConfig(updatedConfig); // FIXME: get back the cleaning feature const cleanedImages = imagesToExportRef.current; switch (exportType) { case ExportType.ZIP: - saveContentAsWebsite(data, asConfigData(updatedConfig), cleanedImages); + saveContentAsWebsite(data, asConfigData(updatedConfig), cleanedImages, fileName); break; case ExportType.A8M: - saveContentAsOriginalFile(data, asConfigData(updatedConfig), cleanedImages); + saveContentAsOriginalFile(data, asConfigData(updatedConfig), cleanedImages, fileName); break; default: console.error('Unsupported export type');