#55 #56 #57 #58 #59 - multiple enhancements that are linked

CHANGELOG.md

@@ -3,6 +3,11 @@
 ## [2.4.0] - 2020-08-xx
 
 - [#21](https://github.com/estruyf/vscode-front-matter/issues/21): Folding provider for Front Matter implemented
+- [#55](https://github.com/estruyf/vscode-front-matter/issues/55): Highlight Front Matter in Markdown files
+- [#56](https://github.com/estruyf/vscode-front-matter/issues/56): Action to collapse all Front Matter panel sections at once
+- [#57](https://github.com/estruyf/vscode-front-matter/issues/57): New action added to provide better writing settings (only for Markdown files)
+- [#58](https://github.com/estruyf/vscode-front-matter/issues/58): Sections remember their previous state (folded/unfolded)
+- [#59](https://github.com/estruyf/vscode-front-matter/issues/59): Center layout view toggle action added
 
 ## [2.3.0] - 2020-08-10
 

assets/media/styles.css

@@ -278,10 +278,21 @@
 .ext_link_block {
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .ext_link_block svg {
   margin-right: .5rem;
+  display: block;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+}
+
+.ext_link_block button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ext_link_block button,
@@ -301,6 +312,16 @@
   user-select: none;
   text-decoration: none;
   width: 100%;
+  white-space: nowrap;
+}
+
+.ext_link_block button.active {
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+.ext_link_block button.active:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
 }
 
 .ext_link_block a:hover, 

package.json

@@ -57,6 +57,7 @@
 		"onCommand:frontMatter.unregisterFolder",
 		"onCommand:frontMatter.createContent",
 		"onCommand:frontMatter.init",
+		"onCommand:frontMatter.collapseSections",
 		"onView:frontMatter.explorer"
 	],
 	"main": "./dist/extension",
@@ -268,6 +269,15 @@
 				"command": "frontMatter.createTemplate",
 				"title": "Create a template from current file",
 				"category": "Front matter"
+			},
+			{
+				"command": "frontMatter.collapseSections",
+				"title": "Collapse sections",
+				"category": "Front matter",
+				"icon": {
+					"light": "assets/icons/close-light.svg",
+					"dark": "assets/icons/close-dark.svg"
+				}
 			}
 		],
 		"menus": {
@@ -296,8 +306,16 @@
 				{
 					"command": "frontMatter.createTemplate",
 					"when": "!frontMatterCanInit"
+				},
+				{
+					"command": "frontMatter.collapseSections",
+					"when": "false"
 				}
-			]
+			],
+			"view/title": [{
+				"command": "frontMatter.collapseSections",
+				"group": "navigation"
+			}]
 		},
 		"grammars": [
 			{

src/constants/Extension.ts

@@ -20,5 +20,6 @@ export const COMMAND_NAME = {
   registerFolder: getCommandName("registerFolder"),
   unregisterFolder: getCommandName("unregisterFolder"),
   createContent: getCommandName("createContent"),
-  createTemplate: getCommandName("createTemplate")
+  createTemplate: getCommandName("createTemplate"),
+  collapseSections: getCommandName("collapseSections"),
 };

src/extension.ts

@@ -26,6 +26,7 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension
 		}
 	});
 
+	// Folding the front matter of markdown files
 	vscode.languages.registerFoldingRangeProvider(mdSelector, new MarkdownFoldingProvider());
 
 	let insertTags = vscode.commands.registerCommand(COMMAND_NAME.insertTags, async () => {
@@ -73,7 +74,7 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension
     if (folderPath) {
       Template.create(folderPath);
     }
-	});
+	}); 
 
 	let createTemplate = vscode.commands.registerCommand(COMMAND_NAME.createTemplate, Template.generate);
 
@@ -96,6 +97,11 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension
 	Template.init();
 	const projectInit = vscode.commands.registerCommand(COMMAND_NAME.init, Project.init);
 
+	// Collapse all sections in the webview
+	const collapseAll = vscode.commands.registerCommand(COMMAND_NAME.collapseSections, () => {
+		ExplorerView.getInstance()?.collapseAll();
+	});
+
 	// Things to do when configuration changes
 	vscode.workspace.onDidChangeConfiguration(() => {
 		Template.init();
@@ -137,7 +143,8 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension
 		registerFolder,
 		unregisterFolder,
 		createContent,
-		projectInit
+		projectInit,
+		collapseAll
 	);
 }
 

src/models/PanelSettings.ts

@@ -9,6 +9,7 @@ export interface PanelSettings {
   isInitialized: boolean;
   modifiedDateUpdate: boolean;
   contentInfo: FolderInfo[] | null;
+  writingSettingsEnabled: boolean;
 }
 
 export interface SEO {

src/providers/FrontMatterDecorationProvider.ts

@@ -0,0 +1,14 @@
+import { TextEditorDecorationType, window, ColorThemeKind } from "vscode";
+
+
+export class FrontMatterDecorationProvider {
+
+  get(): TextEditorDecorationType {
+    const colorThemeKind = window.activeColorTheme.kind;
+
+    return window.createTextEditorDecorationType({
+      backgroundColor: colorThemeKind === ColorThemeKind.Dark ? "#ffffff14" : "#00000014",
+      isWholeLine: true,
+    });
+  }
+}

src/providers/MarkdownFoldingProvider.ts

@@ -1,4 +1,5 @@
-import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, TextDocument } from 'vscode';
+import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, TextEditorDecorationType, Position } from 'vscode';
+import { FrontMatterDecorationProvider } from './FrontMatterDecorationProvider';
 
 export class MarkdownFoldingProvider implements FoldingRangeProvider {
 
@@ -16,11 +17,17 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
           start = i;
         } else if (start !== null && end === null) {
           end = i;
+
+          const range = new Range(new Position(start, 0), new Position(end, line.length));
+          const decoration = new FrontMatterDecorationProvider().get();
+          window.activeTextEditor?.setDecorations(decoration, [range]);
+
           ranges.push(new FoldingRange(start, end, FoldingRangeKind.Region));
           return ranges;
         }
       }
     }
+
     return ranges;
   }
 }

src/viewpanel/Command.ts

@@ -3,5 +3,6 @@ export enum Command {
   metadata = "metadata",
   settings = "settings",
   focusOnTags = "focusOnTags",
-  focusOnCategories = "focusOnCategories"
+  focusOnCategories = "focusOnCategories",
+  closeSections = "closeSections",
 }

src/viewpanel/CommandToCode.ts

@@ -17,4 +17,6 @@ export enum CommandToCode {
   createContent = "create-content",
   updateModifiedUpdating = "update-modified-updates",
   createTemplate = "create-template",
+  toggleCenterMode = "toggle-center-mode",
+  toggleWritingSettings = "toggle-writing-settings",
 }

src/viewpanel/ViewPanel.tsx

@@ -43,7 +43,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           settings && metadata && <Actions metadata={metadata} settings={settings} />
         }
 
-        <Collapsible title="Metadata" className={`inherit z-20`}>
+        <Collapsible id={`tags`} title="Metadata" className={`inherit z-20`}>
           {
             <TagPicker type={TagType.keywords} 
                        icon={<SymbolKeywordIcon />}
@@ -78,7 +78,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           }
         </Collapsible>
 
-        <OtherActions isFile={true} />
+        <OtherActions settings={settings} isFile={true} />
       </div>
     </div>
   );

src/viewpanel/components/ActionButton.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface IActionButtonProps {
+  title: string;
+  className?: string;
+  disabled?: boolean;
+  onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+}
+
+export const ActionButton: React.FunctionComponent<IActionButtonProps> = ({className, onClick, disabled,title}: React.PropsWithChildren<IActionButtonProps>) => {
+  return (
+    <div className={`article__action`}>
+      <button onClick={onClick} className={className || ""} disabled={disabled}>{title}</button>
+    </div>
+  );
+};

src/viewpanel/components/Actions.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { PanelSettings } from '../../models/PanelSettings';
+import { CommandToCode } from '../CommandToCode';
+import { MessageHelper } from '../helper/MessageHelper';
+import { ActionButton } from './ActionButton';
 import { Collapsible } from './Collapsible';
 import { CustomScript } from './CustomScript';
 import { DateAction } from './DateAction';
@@ -19,8 +22,11 @@ export const Actions: React.FunctionComponent<IActionsProps> = (props: React.Pro
   }
 
   return (
-    <Collapsible title="Actions">
+    <Collapsible id={`actions`} title="Actions">
       <div className={`article__actions`}>
+
+        <ActionButton onClick={() => MessageHelper.sendMessage(CommandToCode.toggleCenterMode)} title={`Toggle center mode`} />
+
         { metadata && metadata.title && <SlugAction value={metadata.title} crntValue={metadata.slug} slugOpts={settings.slug} /> }
 
         <DateAction />

src/viewpanel/components/BaseView.tsx

@@ -23,9 +23,9 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings}: Re
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
-        <GlobalSettings settings={settings} />
+        <GlobalSettings settings={settings} isBase />
 
-        <Collapsible title="Actions">
+        <Collapsible id={`base_actions`} title="Actions">
           <div className={`base__actions`}>
             <button onClick={initProject} disabled={settings?.isInitialized}>Initialize project</button>
             <button onClick={createContent} disabled={!settings?.isInitialized}>Create new content</button>
@@ -34,7 +34,7 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings}: Re
 
         {
           settings?.contentInfo && (
-            <Collapsible title="Content information">
+            <Collapsible id={`base_content`} title="Content information">
               <div className="base__information">
                 {
                   settings.contentInfo.map(folder => (
@@ -48,7 +48,7 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings}: Re
           )
         }
 
-        <OtherActions isFile={false} />
+        <OtherActions settings={settings} isFile={false} isBase />
       </div>
     </div>
   );

src/viewpanel/components/Collapsible.tsx

@@ -1,14 +1,22 @@
 import * as React from 'react';
+import { useEffect } from 'react';
+import { Command } from '../Command';
 import { VsCollapsible } from './VscodeComponents';
 
 export interface ICollapsibleProps {
+  id: string;
   title: string;
   className?: string;
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
-  const [ isOpen, setIsOpen ] = React.useState(true);
+export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  const collapseKey = `collapse-${id}`;
+
+  const updateStorage = (value: boolean) => {
+    window.localStorage.setItem(collapseKey, value.toString());
+  }
 
   // This is a work around for a lit-element issue of duplicate slot names
   const triggerClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -17,11 +25,29 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({childre
         if (sendUpdate) {
           sendUpdate(!prev);
         }
+
+        updateStorage(!prev);
         return !prev;
       }); 
     }
   }
 
+  useEffect(() => {
+    const collapsed = window.localStorage.getItem(collapseKey);
+    if (collapsed === null || collapsed === 'true') {
+      setIsOpen(true);
+      updateStorage(true);
+    }
+
+    window.addEventListener('message', event => {
+      const message = event.data;
+      if (message.command === Command.closeSections) {
+        setIsOpen(false);
+        updateStorage(false);
+      }
+    });
+  }, ['']);
+
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
       <div className={`section collapsible__body ${className || ""}`} slot="body">

src/viewpanel/components/CustomScript.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../helper/MessageHelper';
+import { ActionButton } from './ActionButton';
 
 export interface ICustomScriptProps {
   title: string;
@@ -14,8 +15,6 @@ export const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title
   };
 
   return (
-    <div className={`article__action`}>
-      <button onClick={runCustomScript}>{title}</button>
-    </div>
+    <ActionButton onClick={runCustomScript} title={title} />
   );
 };