feat: set post title separately on post-configuration panel (#136)

laggage · web-flow · commit 9cafe1da4aad · 2023-04-27T18:50:55.000+08:00
diff --git a/src/commands/posts-list/save-post.ts b/src/commands/posts-list/save-post.ts
@@ -97,6 +97,7 @@ export const saveLocalDraftToCnblogs = async (localDraft: LocalDraft) => {
     post.categoryIds ??= [];
     void postConfigurationPanel.open({
         panelTitle: '',
+        localFileUri: localDraft.filePathUri,
         breadcrumbs: ['新建博文', '博文设置', post.title],
         post,
         successCallback: async savedPost => {
@@ -145,7 +146,6 @@ export const savePostToCnblogs = async (input: Post | PostTreeItem | PostEditDto
 
     await saveFilePendingChanges(localFilePath);
     post.postBody = (await workspace.fs.readFile(Uri.file(localFilePath))).toString();
-    post.title = await PostTitleSanitizer.unSanitize(post);
     post.isMarkdown = path.extname(localFilePath).endsWith('md') || post.isMarkdown;
 
     if (!validatePost(post)) return false;
diff --git a/src/models/webview-commands.ts b/src/models/webview-commands.ts
@@ -12,6 +12,7 @@ export namespace webviewCommands {
         savePost = 'savePost',
         disposePanel = 'disposePanel',
         uploadImage = 'uploadImage',
+        refreshPost = 'refreshPost',
     }
 
     export namespace ingCommands {
diff --git a/src/models/webview-message.ts b/src/models/webview-message.ts
@@ -19,6 +19,7 @@ export namespace webviewMessage {
         siteCategories: SiteCategories;
         tags: PostTags;
         breadcrumbs?: string[];
+        fileName: string;
     }
 
     export interface SavePostMessage extends Message {
diff --git a/src/services/post-configuration-panel.service.ts b/src/services/post-configuration-panel.service.ts
@@ -13,6 +13,7 @@ import { uploadImage } from '../commands/upload-image/upload-image';
 import { ImageUploadStatusId } from '../models/image-upload-status';
 import { openPostFile } from '../commands/posts-list/open-post-file';
 import { parseWebviewHtml } from 'src/services/parse-webview-html';
+import path from 'path';
 
 const panels: Map<string, vscode.WebviewPanel> = new Map();
 
@@ -35,7 +36,7 @@ export namespace postConfigurationPanel {
     export const buildPanelId = (postId: number, postTitle: string): string => `${postId}-${postTitle}`;
     export const findPanelById = (panelId: string) => panels.get(panelId);
     export const open = async (option: PostConfigurationPanelOpenOption) => {
-        const { post, breadcrumbs } = option;
+        const { post, breadcrumbs, localFileUri } = option;
         const panelTitle = option.panelTitle ? option.panelTitle : `博文设置 - ${post.title}`;
         await openPostFile(post, {
             viewColumn: vscode.ViewColumn.One,
@@ -47,22 +48,28 @@ export namespace postConfigurationPanel {
         const disposables: (vscode.Disposable | undefined)[] = [];
         panel = await createPanel(panelTitle, post);
         const { webview } = panel;
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        webview.postMessage({
-            command: webviewCommands.UiCommands.setFluentIconBaseUrl,
-            baseUrl: webview.asWebviewUri(Uri.joinPath(resourceRootUri(), 'fonts')).toString() + '/',
-        } as webviewMessage.SetFluentIconBaseUrlMessage);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        webview.postMessage({
-            command: webviewCommands.UiCommands.editPostConfiguration,
-            post: cloneDeep(post),
-            activeTheme: vscode.window.activeColorTheme.kind,
-            personalCategories: cloneDeep(await postCategoryService.fetchCategories()),
-            siteCategories: cloneDeep(await siteCategoryService.fetchAll()),
-            tags: cloneDeep(await postTagService.fetchTags()),
-            breadcrumbs,
-        } as webviewMessage.EditPostConfigurationMessage);
+
         disposables.push(
+            webview.onDidReceiveMessage(async ({ command }: webviewMessage.Message) => {
+                if (command === webviewCommands.ExtensionCommands.refreshPost) {
+                    await webview.postMessage({
+                        command: webviewCommands.UiCommands.setFluentIconBaseUrl,
+                        baseUrl: webview.asWebviewUri(Uri.joinPath(resourceRootUri(), 'fonts')).toString() + '/',
+                    } as webviewMessage.SetFluentIconBaseUrlMessage);
+                    await webview.postMessage({
+                        command: webviewCommands.UiCommands.editPostConfiguration,
+                        post: cloneDeep(post),
+                        activeTheme: vscode.window.activeColorTheme.kind,
+                        personalCategories: cloneDeep(await postCategoryService.fetchCategories()),
+                        siteCategories: cloneDeep(await siteCategoryService.fetchAll()),
+                        tags: cloneDeep(await postTagService.fetchTags()),
+                        breadcrumbs,
+                        fileName: localFileUri
+                            ? path.basename(localFileUri.fsPath, path.extname(localFileUri?.fsPath))
+                            : '',
+                    } as webviewMessage.EditPostConfigurationMessage);
+                }
+            }),
             observeWebviewMessages(panel, option),
             observeActiveColorSchemaChange(panel),
             observerPanelDisposeEvent(panel, disposables)
diff --git a/ui/post-configuration/App.tsx b/ui/post-configuration/App.tsx
@@ -11,30 +11,46 @@ import { webviewCommands } from '@models/webview-commands';
 import { PostFormContextProvider } from './components/PostFormContextProvider';
 import { activeThemeProvider } from 'share/active-theme-provider';
 import { darkTheme, lightTheme } from 'share/theme';
+import { vsCodeApi } from 'share/vscode-api';
 
 interface AppState {
     post?: Post;
     theme?: Theme | PartialTheme;
     breadcrumbs?: string[];
+    fileName: string;
 }
 
 export interface AppProps extends Record<string, never> {}
 
 class App extends Component<AppProps, AppState> {
     constructor(props: AppProps) {
         super(props);
-        this.state = { theme: activeThemeProvider.activeTheme() };
+        this.state = { theme: activeThemeProvider.activeTheme(), fileName: '' };
         this.observerMessages();
+        vsCodeApi.getInstance().postMessage({ command: webviewCommands.ExtensionCommands.refreshPost });
     }
 
     render() {
-        const isReady = !!this.state.post;
+        const { post, fileName } = this.state;
+        const isReady = post != null;
         const content = (
             <>
                 {this.renderBreadcrumbs()}
                 <Stack tokens={{ padding: '8px 10px 16px 10px' }}>
                     <PostFormContextProvider>
-                        <PostForm post={this.state.post} />
+                        <PostForm
+                            post={this.state.post}
+                            onTitleChange={title =>
+                                this.state.breadcrumbs && this.state.breadcrumbs.length > 1
+                                    ? this.setState({
+                                          breadcrumbs: this.state.breadcrumbs
+                                              .slice(0, this.state.breadcrumbs.length - 1)
+                                              .concat(title),
+                                      })
+                                    : undefined
+                            }
+                            fileName={fileName}
+                        />
                     </PostFormContextProvider>
                 </Stack>
             </>
@@ -68,16 +84,17 @@ class App extends Component<AppProps, AppState> {
             const message: webviewMessage.Message = ev.data ?? {};
             const { command } = message;
             if (command === webviewCommands.UiCommands.editPostConfiguration) {
-                const { post, activeTheme, personalCategories, siteCategories, tags, breadcrumbs } =
+                const { post, activeTheme, personalCategories, siteCategories, tags, breadcrumbs, fileName } =
                     message as webviewMessage.EditPostConfigurationMessage;
                 personalCategoriesStore.set(personalCategories);
                 siteCategoriesStore.set(siteCategories);
                 tagsStore.set(tags);
 
                 this.setState({
                     theme: activeTheme === 2 ? darkTheme : lightTheme,
-                    post: post,
+                    post,
                     breadcrumbs,
+                    fileName,
                 });
             } else if (command === webviewCommands.UiCommands.updateBreadcrumbs) {
                 const { breadcrumbs } = message as webviewMessage.UpdateBreadcrumbsMessage;
diff --git a/ui/post-configuration/components/PostForm.tsx b/ui/post-configuration/components/PostForm.tsx
@@ -18,10 +18,13 @@ import { webviewMessage } from '@models/webview-message';
 import { InputSummary } from './InputSummary';
 import { IPostFormContext, PostFormContext } from './PostFormContext';
 import PostEntryNameInput from './PostEntryNameInput';
+import PostTitleInput from 'post-configuration/components/PostTitleInput';
 
 export interface IPostFormProps {
     post?: Post;
+    fileName?: string;
     onConfirm?: (postConfiguration: PostConfiguration) => void;
+    onTitleChange?: (title: string) => void;
 }
 
 export interface IPostFormState extends PostConfiguration {}
@@ -42,6 +45,14 @@ export class PostForm extends React.Component<IPostFormProps, IPostFormState> {
         return (
             <form>
                 <Stack tokens={{ childrenGap: 16 }}>
+                    <PostTitleInput
+                        value={this.state.title ?? ''}
+                        fileName={this.props.fileName ?? ''}
+                        onChange={v => {
+                            this.setState({ title: v ?? '' });
+                            this.props.onTitleChange?.(v ?? '');
+                        }}
+                    ></PostTitleInput>
                     <Stack tokens={{ childrenGap: 8 }}>
                         <Label>个人分类</Label>
                         <Stack>
diff --git a/ui/post-configuration/components/PostTitleInput.tsx b/ui/post-configuration/components/PostTitleInput.tsx
@@ -0,0 +1,57 @@
+import { ActionButton, Label, Stack, Text, TextField } from '@fluentui/react';
+import React from 'react';
+
+export interface IPostTitleInputProps {
+    value: string;
+    fileName: string;
+    onChange: (value: string | null | undefined) => unknown;
+}
+
+export interface IPostTitleInputState {
+    value: IPostTitleInputProps['value'];
+}
+
+export default class PostTitleInput extends React.Component<IPostTitleInputProps, IPostTitleInputState> {
+    constructor(props: IPostTitleInputProps) {
+        super(props);
+        this.state = {
+            value: props.value,
+        };
+    }
+
+    render() {
+        return (
+            <Stack tokens={{ childrenGap: 8 }}>
+                <Stack horizontal tokens={{ childrenGap: 8 }} wrap>
+                    <Label styles={{ root: { whiteSpace: 'nowrap' } }}>博文标题</Label>
+                    {this.props.fileName && this.props.fileName !== this.state.value ? (
+                        <ActionButton
+                            onClick={() => {
+                                this.setState({ value: this.props.fileName });
+                                this.props.onChange(this.state.value);
+                            }}
+                            styles={{ root: { height: 'auto', whiteSpace: 'nowrap' } }}
+                            secondaryText={this.props.fileName}
+                        >
+                            使用本地文件名:&nbsp;
+                            <code>
+                                <Text>"{this.props.fileName}"</Text>
+                            </code>
+                        </ActionButton>
+                    ) : (
+                        <></>
+                    )}
+                </Stack>
+                <Stack>
+                    <TextField
+                        value={this.state.value}
+                        onChange={(_, v) => {
+                            this.setState({ value: v ?? '' });
+                            this.props.onChange(v);
+                        }}
+                    ></TextField>
+                </Stack>
+            </Stack>
+        );
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export namespace webviewCommands {`
`12`	`12`	`savePost = 'savePost',`
`13`	`13`	`disposePanel = 'disposePanel',`
`14`	`14`	`uploadImage = 'uploadImage',`
	`15`	`+ refreshPost = 'refreshPost',`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`export namespace ingCommands {`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export namespace webviewMessage {`
`19`	`19`	`siteCategories: SiteCategories;`
`20`	`20`	`tags: PostTags;`
`21`	`21`	`breadcrumbs?: string[];`
	`22`	`+ fileName: string;`
`22`	`23`	`}`
`23`	`24`
`24`	`25`	`export interface SavePostMessage extends Message {`