diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a8e2c9d..1dc73ce0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +## [5.10.0] - 2022-01-10 + +### 🎨 Enhancements + +- [#218](https://github.com/estruyf/vscode-front-matter/issues/218): Add support for creating `mdx` files from templates and content types. This introduced a new setting: `frontMatter.content.defaultFileType`. +- [#220](https://github.com/estruyf/vscode-front-matter/issues/220): Add support DateTime updates in `mdx` files when the `mdx extension` is not installed. + +### 🐞 Fixes + +- [#221](https://github.com/estruyf/vscode-front-matter/issues/221): Automatic DateTime switch from on text change to on save to prevent multiple updates. + ## [5.9.0] - 2022-01-01 - 🎇🎆 ### 🎨 Enhancements diff --git a/package-lock.json b/package-lock.json index 69fedcb3..de56a859 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vscode-front-matter-beta", - "version": "5.9.0", + "version": "5.10.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vscode-front-matter-beta", - "version": "5.9.0", + "version": "5.10.0", "license": "MIT", "devDependencies": { "@bendera/vscode-webview-elements": "0.6.2", diff --git a/package.json b/package.json index a4be7d72..5da18629 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "displayName": "Front Matter", "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...", "icon": "assets/frontmatter-teal-128x128.png", - "version": "5.9.0", + "version": "5.10.0", "preview": false, "publisher": "eliostruyf", "galleryBanner": { @@ -97,6 +97,16 @@ "markdownDescription": "Specify if you want to automatically update the modified date of your article/page. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.autoupdatedate)", "scope": "Content" }, + "frontMatter.content.defaultFileType": { + "type": "string", + "default": "md", + "enum": [ + "md", + "mdx" + ], + "markdownDescription": "Specify the default file type for the content to create. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.defaultfiletype)", + "scope": "Content" + }, "frontMatter.content.defaultSorting": { "type": "string", "default": "", @@ -397,6 +407,15 @@ "type": "string", "description": "Define the type of field" }, + "fileType": { + "type": "string", + "default": "", + "enum": [ + "md", + "mdx" + ], + "description": "Specifies the type of content you want to create." + }, "fields": { "type": "array", "description": "Define the fields of the content type", diff --git a/src/commands/Article.ts b/src/commands/Article.ts index ccef34ae..5e4a228f 100644 --- a/src/commands/Article.ts +++ b/src/commands/Article.ts @@ -15,9 +15,6 @@ import { parseWinPath } from '../helpers/parseWinPath'; export class Article { - - private static prevContent = ""; - /** * Insert taxonomy * @@ -119,7 +116,37 @@ export class Article { return; } - const article = ArticleHelper.getFrontMatter(editor); + const updatedArticle = this.setLastModifiedDateInner(editor.document); + + if (typeof updatedArticle === "undefined") { + return; + } + + ArticleHelper.update( + editor, + updatedArticle as matter.GrayMatterFile + ); + } + + public static async setLastModifiedDateOnSave( + document: vscode.TextDocument + ): Promise { + const updatedArticle = this.setLastModifiedDateInner(document); + + if (typeof updatedArticle === "undefined") { + return []; + } + + const update = ArticleHelper.generateUpdate(document, updatedArticle); + + return [update]; + } + + private static setLastModifiedDateInner( + document: vscode.TextDocument + ): matter.GrayMatterFile | undefined { + const article = ArticleHelper.getFrontMatterFromDocument(document); + if (!article) { return; } @@ -128,8 +155,7 @@ export class Article { const dateField = Settings.get(SETTING_MODIFIED_FIELD) as string || DefaultFields.LastModified; try { cloneArticle.data[dateField] = Article.formatDate(new Date()); - - ArticleHelper.update(editor, cloneArticle); + return cloneArticle; } catch (e: any) { Notifications.error(`Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`); } @@ -238,30 +264,17 @@ export class Article { /** * Article auto updater - * @param fileChanges + * @param event */ - public static async autoUpdate(fileChanges: vscode.TextDocumentChangeEvent) { - const txtChanges = fileChanges.contentChanges.map(c => c.text); - const editor = vscode.window.activeTextEditor; - - if (txtChanges.length > 0 && editor && ArticleHelper.isMarkdownFile()) { - const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE); + public static async autoUpdate(event: vscode.TextDocumentWillSaveEvent) { + const document = event.document; + if (document && ArticleHelper.isMarkdownFile(document)) { + const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE); - if (autoUpdate) { - const article = ArticleHelper.getFrontMatter(editor); - if (!article) { - return; - } - - if (article.content === Article.prevContent) { - return; - } - - Article.prevContent = article.content; - - Article.setLastModifiedDate(); + if (autoUpdate) { + event.waitUntil(Article.setLastModifiedDateOnSave(document)); } - } + } } /** diff --git a/src/commands/Project.ts b/src/commands/Project.ts index d71d3ebf..f11d7f90 100644 --- a/src/commands/Project.ts +++ b/src/commands/Project.ts @@ -5,6 +5,7 @@ import { Notifications } from "../helpers/Notifications"; import { Template } from "./Template"; import { Folders } from "./Folders"; import { Settings } from "../helpers"; +import { SETTINGS_CONTENT_DEFAULT_FILETYPE } from "../constants"; export class Project { @@ -27,6 +28,7 @@ categories: [] public static async init(sampleTemplate: boolean = true) { try { Settings.createTeamSettings(); + const fileType = Settings.get(SETTINGS_CONTENT_DEFAULT_FILETYPE); const folder = Template.getSettings(); const templatePath = Project.templatePath(); @@ -35,7 +37,7 @@ categories: [] return; } - const article = Uri.file(join(templatePath.fsPath, "article.md")); + const article = Uri.file(join(templatePath.fsPath, `article.${fileType}`)); if (!fs.existsSync(templatePath.fsPath)) { await workspace.fs.createDirectory(templatePath); diff --git a/src/commands/Template.ts b/src/commands/Template.ts index 1bd112bc..d3e4ddc8 100644 --- a/src/commands/Template.ts +++ b/src/commands/Template.ts @@ -2,7 +2,7 @@ import { Questions } from './../helpers/Questions'; import * as vscode from 'vscode'; import * as path from 'path'; import * as fs from 'fs'; -import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants'; +import { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants'; import { ArticleHelper, Settings } from '../helpers'; import { Article } from '.'; import { Notifications } from '../helpers/Notifications'; @@ -12,6 +12,7 @@ import { Folders } from './Folders'; import { ContentType } from '../helpers/ContentType'; import { ContentType as IContentType } from '../models'; import { PagesListener } from '../listeners'; +import { extname } from 'path'; export class Template { @@ -50,6 +51,7 @@ export class Template { public static async generate() { const folder = Template.getSettings(); const editor = vscode.window.activeTextEditor; + const fileType = Settings.get(SETTINGS_CONTENT_DEFAULT_FILETYPE); if (folder && editor && ArticleHelper.isMarkdownFile()) { const article = ArticleHelper.getFrontMatter(editor); @@ -83,7 +85,7 @@ export class Template { if (templatePath) { let fileContents = ArticleHelper.stringifyFrontMatter(keepContents === "no" ? "" : clonedArticle.content, clonedArticle.data); - const templateFile = path.join(templatePath.fsPath, `${titleValue}.md`); + const templateFile = path.join(templatePath.fsPath, `${titleValue}.${fileType}`); fs.writeFileSync(templateFile, fileContents, { encoding: "utf-8" }); Notifications.info(`Template created and is now available in your ${folder} folder.`); @@ -140,7 +142,8 @@ export class Template { contentType = contentTypes?.find(t => t.name === templateData.data.type); } - let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue); + const fileExtension = extname(template.fsPath).replace(".", ""); + let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue, fileExtension); if (!newFilePath) { return; } diff --git a/src/constants/settings.ts b/src/constants/settings.ts index 52909c0a..3826ec3d 100644 --- a/src/constants/settings.ts +++ b/src/constants/settings.ts @@ -50,6 +50,8 @@ export const SETTINGS_CONTENT_WYSIWYG = "content.wysiwyg"; export const SETTINGS_CONTENT_SORTING_DEFAULT = "content.defaultSorting"; export const SETTINGS_MEDIA_SORTING_DEFAULT = "content.defaultSorting"; +export const SETTINGS_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType"; + export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart"; export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet"; diff --git a/src/extension.ts b/src/extension.ts index 3b9b3563..5b97b065 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -177,8 +177,7 @@ export async function activate(context: vscode.ExtensionContext) { triggerShowDraftStatus(); // Listener for file edit changes - editDebounce = debounceCallback(); - subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange)); + subscriptions.push(vscode.workspace.onWillSaveTextDocument(handleAutoDateUpdate)); // Listener for file saves subscriptions.push(vscode.workspace.onDidSaveTextDocument((doc: vscode.TextDocument) => { @@ -231,8 +230,8 @@ export async function activate(context: vscode.ExtensionContext) { export function deactivate() {} -const triggerFileChange = (e: vscode.TextDocumentChangeEvent) => { - editDebounce(() => Article.autoUpdate(e), 1000); +const handleAutoDateUpdate = (e: vscode.TextDocumentWillSaveEvent) => { + Article.autoUpdate(e); }; const triggerShowDraftStatus = () => { diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts index 1304218f..4a76af92 100644 --- a/src/helpers/ArticleHelper.ts +++ b/src/helpers/ArticleHelper.ts @@ -3,7 +3,7 @@ import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ import * as vscode from 'vscode'; import * as matter from "gray-matter"; import * as fs from "fs"; -import { DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants'; +import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants'; import { DumpOptions } from 'js-yaml'; import { TomlEngine, getFmLanguage, getFormatOpts } from './TomlEngine'; import { Extension, Settings } from '.'; @@ -27,8 +27,17 @@ export class ArticleHelper { * @param editor */ public static getFrontMatter(editor: vscode.TextEditor) { - const fileContents = editor.document.getText(); - return ArticleHelper.parseFile(fileContents, editor.document.fileName); + return ArticleHelper.getFrontMatterFromDocument(editor.document); + } + + /** + * Get the contents of the specified document + * + * @param document The document to parse. + */ + public static getFrontMatterFromDocument(document: vscode.TextDocument) { + const fileContents = document.getText(); + return ArticleHelper.parseFile(fileContents, document.fileName); } /** @@ -47,11 +56,37 @@ export class ArticleHelper { * @param article */ public static async update(editor: vscode.TextEditor, article: matter.GrayMatterFile) { + const update = this.generateUpdate(editor.document, article); + + await editor.edit(builder => builder.replace(update.range, update.newText)); + } + + /** + * Generate the update to be applied to the article. + * @param article + */ + public static generateUpdate(document: vscode.TextDocument, article: matter.GrayMatterFile): vscode.TextEdit { + const nrOfLines = document.lineCount as number; + const range = new vscode.Range(new vscode.Position(0, 0), new vscode.Position(nrOfLines, 0)); const removeQuotes = Settings.get(SETTING_REMOVE_QUOTES) as string[]; const commaSeparated = Settings.get(SETTING_COMMA_SEPARATED_FIELDS); + + // Check if there is a line ending + const lines = article.content.split("\n"); + const lastLine = lines.pop(); + const endsWithNewLine = lastLine !== undefined && lastLine.trim() === ""; let newMarkdown = this.stringifyFrontMatter(article.content, Object.assign({}, article.data)); + // Logic to not include a new line at the end of the file + if (!endsWithNewLine) { + const lines = newMarkdown.split("\n"); + const lastLine = lines.pop(); + if (lastLine !== undefined && lastLine?.trim() === "") { + newMarkdown = lines.join("\n"); + } + } + // Check for field where quotes need to be removed if (removeQuotes && removeQuotes.length) { for (const toRemove of removeQuotes) { @@ -68,8 +103,7 @@ export class ArticleHelper { } } - const nrOfLines = editor.document.lineCount as number; - await editor.edit(builder => builder.replace(new vscode.Range(new vscode.Position(0, 0), new vscode.Position(nrOfLines, 0)), newMarkdown)); + return vscode.TextEdit.replace(range, newMarkdown); } /** @@ -109,9 +143,25 @@ export class ArticleHelper { /** * Checks if the current file is a markdown file */ - public static isMarkdownFile() { - const editor = vscode.window.activeTextEditor; - return (editor && editor.document && (editor.document.languageId.toLowerCase() === "markdown" || editor.document.languageId.toLowerCase() === "mdx")); + public static isMarkdownFile(document: vscode.TextDocument | undefined | null = null) { + const supportedLanguages = ["markdown", "mdx"]; + const supportedFileExtensions = [".md", ".mdx"]; + const languageId = document?.languageId?.toLowerCase(); + const isSupportedLanguage = languageId && supportedLanguages.includes(languageId); + document ??= vscode.window.activeTextEditor?.document; + + /** + * It's possible that the file is a file type we support but the user hasn't installed + * language support for. In that case, we'll manually check the extension as a proxy + * for whether or not we support the file. + */ + if (!isSupportedLanguage) { + const fileName = document?.fileName?.toLowerCase(); + + return fileName && supportedFileExtensions.findIndex(fileExtension => fileName.endsWith(fileExtension)) > -1; + } + + return isSupportedLanguage; } /** @@ -188,8 +238,9 @@ export class ArticleHelper { * @param titleValue * @returns The new file path */ - public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string): string | undefined { + public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string, fileExtension?: string): string | undefined { const prefix = Settings.get(SETTING_TEMPLATES_PREFIX); + const fileType = Settings.get(SETTINGS_CONTENT_DEFAULT_FILETYPE); // Name of the file or folder to create const sanitizedName = ArticleHelper.sanitize(titleValue); @@ -203,10 +254,10 @@ export class ArticleHelper { return; } else { mkdirSync(newFolder); - newFilePath = join(newFolder, `index.md`); + newFilePath = join(newFolder, `index.${fileExtension || contentType.fileType || fileType}`); } } else { - let newFileName = `${sanitizedName}.md`; + let newFileName = `${sanitizedName}.${fileExtension || contentType?.fileType || fileType}`; if (prefix && typeof prefix === "string") { newFileName = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}-${newFileName}`; diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts index d942d818..a30d174c 100644 --- a/src/helpers/ContentType.ts +++ b/src/helpers/ContentType.ts @@ -91,6 +91,12 @@ export class ContentType { return Settings.get(SETTING_TAXONOMY_CONTENT_TYPES); } + /** + * Create a new file with the specified content type + * @param contentType + * @param folderPath + * @returns + */ private static async create(contentType: IContentType, folderPath: string) { const titleValue = await Questions.ContentTitle(); diff --git a/src/helpers/MediaHelpers.ts b/src/helpers/MediaHelpers.ts index a1d6815b..c0e69416 100644 --- a/src/helpers/MediaHelpers.ts +++ b/src/helpers/MediaHelpers.ts @@ -38,7 +38,7 @@ export class MediaHelpers { if (stateValue !== HOME_PAGE_NAVIGATION_ID) { // Support for page bundles - if (viewData?.data?.filePath && viewData?.data?.filePath.endsWith('index.md')) { + if (viewData?.data?.filePath && (viewData?.data?.filePath.endsWith('index.md') || viewData?.data?.filePath.endsWith('index.mdx'))) { const folderPath = parse(viewData.data.filePath).dir; selectedFolder = folderPath; } else if (stateValue && existsSync(stateValue)) { diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index f049d8fc..942ed702 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -26,6 +26,7 @@ export interface ContentType { name: string; fields: Field[]; + fileType?: "md" | "mdx"; previewPath?: string | null; pageBundle?: boolean; }