diff --git a/README.md b/README.md index 835ba187..72fbc4dc 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
Table of Contents
    +
  1. Markdown features
  2. The panel
  3. Custom actions
  4. Create articles from templates
    5. @@ -45,6 +46,20 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
+## Markdown features + +The Front Matter extension tries to make it easy to manage your Markdown pages/content. Within a Markdown page, we allow you to fold the file's Front Matter to be less distracting when writing. Also, do we highlight the Front Matter content to create a visual difference between content and metadata. + +### Front Matter folding + +![](./assets/v2.4.0/folding.png) + +### Front Matter highlighting + +![](./assets/v2.4.0/fm-highlight.png) + +> ** + ## The panel The Front Matter panel allows you to perform most of the extension actions by just a click on the button and it shows the SEO statuses of your title, description, and more. diff --git a/assets/icons/close-dark.svg b/assets/icons/close-dark.svg index 78205361..9c5818f2 100644 --- a/assets/icons/close-dark.svg +++ b/assets/icons/close-dark.svg @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/assets/icons/close-light.svg b/assets/icons/close-light.svg index d56e3091..65e4e669 100644 --- a/assets/icons/close-light.svg +++ b/assets/icons/close-light.svg @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/assets/v2.4.0/fm-highlight.png b/assets/v2.4.0/fm-highlight.png new file mode 100644 index 00000000..eb5f5a12 Binary files /dev/null and b/assets/v2.4.0/fm-highlight.png differ diff --git a/assets/v2.4.0/folding.png b/assets/v2.4.0/folding.png new file mode 100644 index 00000000..5ab89e6f Binary files /dev/null and b/assets/v2.4.0/folding.png differ diff --git a/package.json b/package.json index 3ec9767b..ad285cb1 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,31 @@ "configuration": { "title": "Front Matter: Configuration", "properties": { + "frontMatter.content.autoUpdateDate": { + "type": "boolean", + "default": false, + "description": "Specify if you want to automatically update the modified date of your article/page." + }, + "frontMatter.content.fmHighlight": { + "type": "boolean", + "default": true, + "description": "Specify if you want to highlight the Front Matter in the Markdown file." + }, + "frontMatter.content.folders": { + "type": "array", + "default": [], + "markdownDescription": "This array of folders defines where the extension can easily create new content by running the create article command." + }, + "frontMatter.custom.scripts": { + "type": "array", + "default": [], + "markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument." + }, + "frontMatter.panel.freeform": { + "type": "boolean", + "default": true, + "markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true." + }, "frontMatter.taxonomy.dateField": { "type": "string", "default": "date", @@ -95,11 +120,6 @@ "default": "lastmod", "description": "Specifies the modified date field name to use in your Front Matter" }, - "frontMatter.content.autoUpdateDate": { - "type": "boolean", - "default": false, - "description": "Specify if you want to automatically update the modified date of your article/page." - }, "frontMatter.taxonomy.tags": { "type": "array", "description": "Specifies the tags which can be used in the Front Matter" @@ -176,21 +196,6 @@ "type": "string", "default": "yyyy-MM-dd", "description": "Specify the prefix you want to add for your new article filenames." - }, - "frontMatter.panel.freeform": { - "type": "boolean", - "default": true, - "markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true." - }, - "frontMatter.custom.scripts": { - "type": "array", - "default": [], - "markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument." - }, - "frontMatter.content.folders": { - "type": "array", - "default": [], - "markdownDescription": "This array of folders defines where the extension can easily create new content by running the create article command." } } }, diff --git a/src/constants/settings.ts b/src/constants/settings.ts index ad75786c..fd3e36d8 100644 --- a/src/constants/settings.ts +++ b/src/constants/settings.ts @@ -7,7 +7,6 @@ export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories"; export const SETTING_DATE_FORMAT = "taxonomy.dateFormat"; export const SETTING_DATE_FIELD = "taxonomy.dateField"; export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField"; -export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate"; export const SETTING_SLUG_PREFIX = "taxonomy.slugPrefix"; export const SETTING_SLUG_SUFFIX = "taxonomy.slugSuffix"; @@ -30,4 +29,6 @@ export const SETTING_PANEL_FREEFORM = "panel.freeform"; export const SETTING_CUSTOM_SCRIPTS = "custom.scripts"; -export const SETTINGS_CONTENT_FOLDERS = "content.folders"; \ No newline at end of file +export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate"; +export const SETTINGS_CONTENT_FOLDERS = "content.folders"; +export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight"; \ No newline at end of file diff --git a/src/extension.ts b/src/extension.ts index f9ca56ad..2b0af088 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -125,6 +125,11 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension editDebounce = debounceCallback(); subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange)); + // Listener for setting changes + subscriptions.push(vscode.workspace.onDidChangeConfiguration(() => { + MarkdownFoldingProvider.triggerHighlighting(); + })); + // Subscribe all commands subscriptions.push( insertTags, diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index 0d13f0ed..0f09daf5 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -10,6 +10,7 @@ export interface PanelSettings { modifiedDateUpdate: boolean; contentInfo: FolderInfo[] | null; writingSettingsEnabled: boolean; + fmHighlighting: boolean; } export interface SEO { diff --git a/src/providers/MarkdownFoldingProvider.ts b/src/providers/MarkdownFoldingProvider.ts index ee87c042..f0056202 100644 --- a/src/providers/MarkdownFoldingProvider.ts +++ b/src/providers/MarkdownFoldingProvider.ts @@ -1,7 +1,12 @@ -import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, TextEditorDecorationType, Position } from 'vscode'; +import { workspace } from 'vscode'; +import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, Position } from 'vscode'; +import { CONFIG_KEY, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT } from '../constants'; import { FrontMatterDecorationProvider } from './FrontMatterDecorationProvider'; export class MarkdownFoldingProvider implements FoldingRangeProvider { + private static start: number | null = null; + private static end: number | null = null; + private static endLine: number | null = null; public async provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): Promise { const ranges: FoldingRange[] = []; @@ -10,17 +15,22 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider { let start: number | null = null; let end: number | null = null; + MarkdownFoldingProvider.start = null; + MarkdownFoldingProvider.end = null; + MarkdownFoldingProvider.endLine = null; + for (let i = 0; i < lines.length; i++) { const line = lines[i]; if (line.startsWith('---')) { if (i === 0 && start === null) { start = i; + MarkdownFoldingProvider.start = start; } else if (start !== null && end === null) { end = i; + MarkdownFoldingProvider.end = end; + MarkdownFoldingProvider.endLine = line.length; - const range = new Range(new Position(start, 0), new Position(end, line.length)); - const decoration = new FrontMatterDecorationProvider().get(); - window.activeTextEditor?.setDecorations(decoration, [range]); + MarkdownFoldingProvider.triggerHighlighting(); ranges.push(new FoldingRange(start, end, FoldingRangeKind.Region)); return ranges; @@ -30,4 +40,17 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider { return ranges; } + + public static triggerHighlighting() { + const config = workspace.getConfiguration(CONFIG_KEY); + const fmHighlight = config.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT); + const decoration = new FrontMatterDecorationProvider().get(); + + if (fmHighlight && MarkdownFoldingProvider.start !== null && MarkdownFoldingProvider.end !== null && MarkdownFoldingProvider.endLine !== null) { + const range = new Range(new Position(MarkdownFoldingProvider.start, 0), new Position(MarkdownFoldingProvider.end, MarkdownFoldingProvider.endLine)); + window.activeTextEditor?.setDecorations(decoration, [range]); + } else { + window.activeTextEditor?.setDecorations(decoration, []); + } + } } \ No newline at end of file diff --git a/src/viewpanel/CommandToCode.ts b/src/viewpanel/CommandToCode.ts index aba7eeea..b133ecf6 100644 --- a/src/viewpanel/CommandToCode.ts +++ b/src/viewpanel/CommandToCode.ts @@ -16,6 +16,7 @@ export enum CommandToCode { initProject = "init-project", createContent = "create-content", updateModifiedUpdating = "update-modified-updates", + updateFmHighlight = "update-fm-highlight", createTemplate = "create-template", toggleCenterMode = "toggle-center-mode", toggleWritingSettings = "toggle-writing-settings", diff --git a/src/viewpanel/components/GlobalSettings.tsx b/src/viewpanel/components/GlobalSettings.tsx index 1cf1c94e..cecbf9c6 100644 --- a/src/viewpanel/components/GlobalSettings.tsx +++ b/src/viewpanel/components/GlobalSettings.tsx @@ -11,17 +11,24 @@ export interface IGlobalSettingsProps { } export const GlobalSettings: React.FunctionComponent = ({settings, isBase}: React.PropsWithChildren) => { - const { modifiedDateUpdate } = settings || {}; + const { modifiedDateUpdate, fmHighlighting } = settings || {}; - const onCheck = () => { + const onDateCheck = () => { MessageHelper.sendMessage(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate); }; + + const onHighlightCheck = () => { + MessageHelper.sendMessage(CommandToCode.updateFmHighlight, !fmHighlighting); + }; return ( <>
- + +
+
+
diff --git a/src/webview/ExplorerView.ts b/src/webview/ExplorerView.ts index 84f562da..da669c1a 100644 --- a/src/webview/ExplorerView.ts +++ b/src/webview/ExplorerView.ts @@ -1,5 +1,5 @@ import { Template } from './../commands/Template'; -import { SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings'; +import { SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings'; import * as os from 'os'; import { PanelSettings, CustomScript } from './../models/PanelSettings'; import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode"; @@ -155,6 +155,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable { case CommandToCode.toggleWritingSettings: this.toggleWritingSettings(); break; + case CommandToCode.updateFmHighlight: + this.updateFmHighlight((msg.data !== null && msg.data !== undefined) ? msg.data : false); + break; case CommandToCode.toggleCenterMode: await commands.executeCommand(`workbench.action.toggleCenteredLayout`); break; @@ -283,7 +286,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable { isInitialized: await Template.isInitialized(), contentInfo: await Folders.getInfo() || null, modifiedDateUpdate: config.get(SETTING_AUTO_UPDATE_DATE) || false, - writingSettingsEnabled: this.isWritingSettingsEnabled() || false + writingSettingsEnabled: this.isWritingSettingsEnabled() || false, + fmHighlighting: config.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT), } as PanelSettings }); } @@ -431,6 +435,15 @@ export class ExplorerView implements WebviewViewProvider, Disposable { return fontSize && lineHeight && wordWrap && wordWrapColumn && lineNumbers && quickSuggestions !== undefined; } + /** + * Toggle the Front Matter highlighting + */ + private async updateFmHighlight(autoUpdate: boolean) { + const config = workspace.getConfiguration(CONFIG_KEY); + await config.update(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, autoUpdate); + this.getSettings(); + } + /** * Toggle the modified auto-update setting */