From e098442eaaf05f6942564cc18914215382a717c0 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Mon, 7 Nov 2022 17:28:40 +0100 Subject: [PATCH] #412 - Allow title on snippets --- package.json | 4 + .../components/Contents/Item.tsx | 2 - .../components/SnippetsView/Item.tsx | 86 ++++++++++++------- .../components/SnippetsView/Snippets.tsx | 2 +- src/helpers/SettingsHelper.ts | 12 ++- src/listeners/dashboard/SnippetListener.ts | 11 ++- src/models/Snippets.ts | 2 + 7 files changed, 81 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 01c26b7f..4ed4c4e8 100644 --- a/package.json +++ b/package.json @@ -271,6 +271,10 @@ "type": "string" } }, + "title": { + "description": "The snippet title.", + "type": "string" + }, "description": { "description": "The snippet description.", "type": "string" diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index 20308edc..2b7f3d4a 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/src/dashboardWebView/components/Contents/Item.tsx @@ -65,8 +65,6 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti return []; }, [settings, pageData]); - console.log(pageData[PREVIEW_IMAGE_FIELD]) - if (view === DashboardViewType.Grid) { return (
  • diff --git a/src/dashboardWebView/components/SnippetsView/Item.tsx b/src/dashboardWebView/components/SnippetsView/Item.tsx index 498c1651..18832547 100644 --- a/src/dashboardWebView/components/SnippetsView/Item.tsx +++ b/src/dashboardWebView/components/SnippetsView/Item.tsx @@ -1,5 +1,5 @@ import { Messenger } from '@estruyf/vscode/dist/client'; -import { CodeIcon, DocumentTextIcon, DotsHorizontalIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline'; +import { CodeIcon, DocumentTextIcon, DotsHorizontalIcon, EyeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline'; import * as React from 'react'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useRecoilValue } from 'recoil'; @@ -16,11 +16,11 @@ import { NewForm } from './NewForm'; import SnippetForm, { SnippetFormHandle } from './SnippetForm'; export interface IItemProps { - title: string; + snippetKey: string; snippet: Snippet; } -export const Item: React.FunctionComponent = ({ title, snippet }: React.PropsWithChildren) => { +export const Item: React.FunctionComponent = ({ snippetKey, snippet }: React.PropsWithChildren) => { const viewData = useRecoilValue(ViewDataSelector); const settings = useRecoilValue(SettingsSelector); const mode = useRecoilValue(ModeAtom); @@ -50,13 +50,17 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re setMediaSnippet(false); }; + const showFile = useCallback(() => { + Messenger.send(DashboardMessage.openFile, snippet.sourcePath); + }, [ snippet ]); + const onOpenEdit = useCallback(() => { - setSnippetTitle(title); + setSnippetTitle(snippet.title || snippetKey); setSnippetDescription(snippet.description); setSnippetOriginalBody(typeof snippet.body === "string" ? snippet.body : snippet.body.join(`\n`)); setShowEditDialog(true); setMediaSnippet(!!snippet.isMediaSnippet); - }, [snippet]); + }, [snippet, snippetKey]); const onSnippetUpdate = useCallback(() => { if (!snippetTitle || !snippetOriginalBody) { @@ -64,10 +68,10 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re return; } - const snippets: Snippets = Object.assign({}, settings?.snippets || {}); + let snippets: Snippets = Object.assign({}, settings?.snippets || {}); const snippetLines = snippetOriginalBody.split("\n"); - const crntSnippet = Object.assign({}, snippets[title]); + const crntSnippet = Object.assign({}, snippets[snippetKey]); const fields = SnippetParser.getFields(snippetLines, crntSnippet.fields || [], crntSnippet?.openingTags, crntSnippet?.closingTags); @@ -83,27 +87,33 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re snippetContents.isMediaSnippet = true; } - // Check if new or update - if (title === snippetTitle) { - snippets[title] = snippetContents; + // Check if there is a title set in the snippet + if (snippet.title) { + snippetContents.title = snippetTitle; + snippets[snippetKey] = snippetContents; } else { - delete snippets[title]; - snippets[snippetTitle] = snippetContents; + // Check if new or update + if (snippetKey === snippetTitle) { + snippets[snippetKey] = snippetContents; + } else { + delete snippets[snippetKey]; + snippets[snippetTitle] = snippetContents; + } } Messenger.send(DashboardMessage.updateSnippet, { snippets }); reset(); - }, [settings?.snippets, title, snippetTitle, snippetDescription, snippetOriginalBody, mediaSnippet]); + }, [settings?.snippets, snippetKey, snippetTitle, snippetDescription, snippetOriginalBody, mediaSnippet]); const onDelete = useCallback(() => { const snippets = Object.assign({}, settings?.snippets || {}); - delete snippets[title]; + delete snippets[snippetKey]; Messenger.send(DashboardMessage.updateSnippet, { snippets }); setShowAlert(false); - }, [settings?.snippets, title]); + }, [settings?.snippets, snippetKey]); return ( <> @@ -115,7 +125,7 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re

    { snippet.isMediaSnippet ? : } - {title} + {snippet.title || snippetKey}

    = ({ title, snippet }: Re ) } - - + { + !snippet.sourcePath ? ( + <> + + - setShowAlert(true)}> - + setShowAlert(true)}> + + + ) : ( + + + ) + } @@ -182,8 +204,8 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re { showInsertDialog && ( setShowInsertDialog(false)} @@ -202,8 +224,8 @@ export const Item: React.FunctionComponent = ({ title, snippet }: Re { showEditDialog && ( = ({ title, snippet }: Re { showAlert && ( setShowAlert(false)} diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx index 89641114..371b2235 100644 --- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx +++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx @@ -120,7 +120,7 @@ export const Snippets: React.FunctionComponent = (props: React.P snippetKeys.map((snippetKey: any, index: number) => ( )) } diff --git a/src/helpers/SettingsHelper.ts b/src/helpers/SettingsHelper.ts index a714cba7..3aa17869 100644 --- a/src/helpers/SettingsHelper.ts +++ b/src/helpers/SettingsHelper.ts @@ -195,6 +195,9 @@ export class Settings { await Settings.update(name, undefined); } + // Make sure to reload the whole config + all the data files + await Settings.readConfig(); + return; } } else { @@ -516,7 +519,7 @@ export class Settings { } // Object settings else if (Settings.isEqualOrStartsWith(relSettingName, SETTING_CONTENT_SNIPPETS)) { - Settings.updateGlobalConfigObjectByNameSetting(SETTING_CONTENT_SNIPPETS, configFilePath, configJson); + Settings.updateGlobalConfigObjectByNameSetting(SETTING_CONTENT_SNIPPETS, configFilePath, configJson, filePath); } } catch (e) { Logger.error(`Error reading config file: ${configFile.fsPath}`); @@ -561,12 +564,17 @@ export class Settings { * @param fileNamepath * @param configJson */ - private static updateGlobalConfigObjectByNameSetting(settingName: string, fileNamepath: string, configJson: any): void { + private static updateGlobalConfigObjectByNameSetting(settingName: string, fileNamepath: string, configJson: any, absPath: string): void { const crntValue = Settings.globalConfig[`${CONFIG_KEY}.${settingName}`] || {}; // Filename is the key const fileName = parse(fileNamepath).name; + configJson = { + ...configJson, + sourcePath: absPath + }; + if (!crntValue[fileName]) { crntValue[fileName] = configJson; diff --git a/src/listeners/dashboard/SnippetListener.ts b/src/listeners/dashboard/SnippetListener.ts index f472f4cc..2effeaf4 100644 --- a/src/listeners/dashboard/SnippetListener.ts +++ b/src/listeners/dashboard/SnippetListener.ts @@ -4,6 +4,7 @@ import { Dashboard } from "../../commands/Dashboard"; import { SETTING_CONTENT_SNIPPETS, TelemetryEvent } from "../../constants"; import { DashboardMessage } from "../../dashboardWebView/DashboardMessage"; import { Notifications, Settings, Telemetry } from "../../helpers"; +import { Snippets } from "../../models"; import { BaseListener } from "./BaseListener"; import { SettingsListener } from "./SettingsListener"; @@ -68,7 +69,15 @@ export class SnippetListener extends BaseListener { return; } - await Settings.update(SETTING_CONTENT_SNIPPETS, snippets, true); + // Filter out external data snippets + const snippetsToStore = Object.keys(snippets).reduce((acc, key) => { + if (!snippets[key].sourcePath) { + acc[key] = snippets[key]; + } + return acc; + }, {} as Snippets); + + await Settings.update(SETTING_CONTENT_SNIPPETS, snippetsToStore, true); SettingsListener.getSettings(true); } diff --git a/src/models/Snippets.ts b/src/models/Snippets.ts index dac3fde4..f608c8a1 100644 --- a/src/models/Snippets.ts +++ b/src/models/Snippets.ts @@ -5,12 +5,14 @@ export interface Snippets { } export interface Snippet { + title?: string; description: string; body: string[] | string; fields: SnippetField[]; openingTags?: string; closingTags?: string; isMediaSnippet?: boolean; + sourcePath?: string; } export type SnippetSpecialPlaceholders = "FM_SELECTED_TEXT" | string;