0.9.7 (#348)

* fix: Removed one github-dark background css attribute * fix: Disabled code block data-source-line insertion * fix: Added .emf image so not embedded as binary * Revert "fix: Disabled code block data-source-line insertion" This reverts commit 4fb10bb. * feat: Added enablePreviewZenMode option * feat: Updated the right click context menu * fix: Fixed rendering vega-lite in Reveal.js slide * doc: Updated the CHANGELOG.md * refactor: Improved the performance a bit while enabled zen mode * doc: Updated CHANGELOG.md
shd101wyy · Dec 10, 2023 · b64a355 · b64a355
1 parent d16c031
commit b64a355
Show file tree

Hide file tree

Showing 12 changed files with 330 additions and 284 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,19 @@ Please visit https://github.com/shd101wyy/vscode-markdown-preview-enhanced/relea
 
 ## [Unreleased]
 
+## [0.9.7] - 2023-12-10
+
+### New features
+
+- Added `enablePreviewZenMode` option and reorganized the right-click context menu.
+
+  ![image](https://github.com/shd101wyy/crossnote/assets/1908863/26e2237e-c6e2-433e-a063-6de2c01a64bb)
+
+### Bug fixes
+
+- Fixed rendering `vega-lite` in `Reveal.js` slide: https://github.com/shd101wyy/vscode-markdown-preview-enhanced/issues/1880
+- Removed one github-dark background css attribute: https://github.com/shd101wyy/crossnote/issues/344
+
 ## [0.9.6] - 2023-10-24
 
 ### Changes

diff --git a/README.md b/README.md
@@ -92,6 +92,10 @@ const config = {
   // In Markdown, a single newline character doesn't cause a line break in the generated HTML. In GitHub Flavored Markdown, that is not true. Enable this config option to insert line breaks in rendered HTML for single newlines in Markdown source.
   breakOnSingleNewLine: true,
 
+  // Whether to enable preview zen mode.
+  // Enable this option will hide unnecessary UI elements in preview unless your mouse is over it.
+  enablePreviewZenMode: boolean;
+
   // Enable smartypants and other sweet transforms.
   enableTypographer: false,
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crossnote",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "A powerful markdown notebook tool",
   "keywords": [
     "markdown"

diff --git a/src/markdown-engine/index.ts b/src/markdown-engine/index.ts
@@ -360,6 +360,9 @@ if (typeof(window['Reveal']) !== 'undefined') {
       }
       for (var i = 0; i < vegaEls.length; i++) {
         const vegaEl = vegaEls[i]
+        if (vegaEl.hasAttribute("data-processed")) {
+          continue;
+        }
         try {
           var spec = JSON.parse(vegaEl.textContent);
           vegaEmbed(vegaEl, spec, { actions: false, renderer: 'svg' })

diff --git a/src/markdown-engine/transformer.ts b/src/markdown-engine/transformer.ts
@@ -693,7 +693,7 @@ export async function transformMarkdown(
         }
         // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#common_image_file_types
         else if (
-          extname.match(/^\.(apng|avif|gif|jpeg|jpg|png|svg|bmp|webp)/) ||
+          extname.match(/^\.(apng|avif|gif|jpeg|jpg|png|svg|bmp|webp|emf)/) ||
           extname === '' // NOTE: For example, for github image like: ![Screenshot from 2023-10-15 15-34-27](https://github.com/shd101wyy/crossnote/assets/1908863/ede91390-3cca-4b83-8e30-33027bf0a363)
         ) {
           if (importMatch || wikilinkImportMatch) {

diff --git a/src/notebook/types.ts b/src/notebook/types.ts
@@ -193,6 +193,12 @@ export interface NotebookConfig {
    */
   parserConfig: ParserConfig;
 
+  /**
+   * Whether to enable preview zen mode.
+   * Enable this option will hide unnecessary UI elements in preview unless your mouse is over it.
+   */
+  enablePreviewZenMode: boolean;
+
   /**
    * Whether to break on single new line.
    *
@@ -534,6 +540,7 @@ export function getDefaultNotebookConfig(): NotebookConfig {
     mathjaxConfig: getDefaultMathjaxConfig(),
     katexConfig: getDefaultKatexConfig(),
     parserConfig: getDefaultParserConfig(),
+    enablePreviewZenMode: false,
     usePandocParser: false,
     breakOnSingleNewLine: true,
     enableTypographer: false,

diff --git a/src/webview/components/ContextMenu.tsx b/src/webview/components/ContextMenu.tsx
@@ -1,6 +1,5 @@
 import {
   mdiCancel,
-  mdiExport,
   mdiExportVariant,
   mdiImageOutline,
   mdiInformationOutline,
@@ -9,9 +8,11 @@ import {
   mdiOpenInNew,
   mdiPaletteOutline,
   mdiPencil,
+  mdiSpaOutline,
   mdiSync,
 } from '@mdi/js';
 import Icon from '@mdi/react';
+import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import { Item, ItemParams, Menu, Separator, Submenu } from 'react-contexify';
 import 'react-contexify/ReactContexify.css';
@@ -32,6 +33,7 @@ export default function ContextMenu() {
     sourceUri,
     theme,
     isPresentationMode,
+    enablePreviewZenMode,
   } = PreviewContainer.useContainer();
 
   const handleItemClick = useCallback(
@@ -89,6 +91,10 @@ export default function ContextMenu() {
           postMessage('markdownExport', [sourceUri.current]);
           break;
         }
+        case 'toggle-zen-mode': {
+          postMessage('togglePreviewZenMode', [sourceUri.current]);
+          break;
+        }
         case 'open-image-helper': {
           setShowImageHelper(true);
           break;
@@ -215,105 +221,72 @@ export default function ContextMenu() {
                   size={0.8}
                   className="mr-2"
                 ></Icon>
-                HTML
+                Export
               </span>
             }
           >
-            <Item id="export-html-offline" onClick={handleItemClick}>
-              {'HTML (offline)'}
-            </Item>
-            <Item id="export-html-cdn" onClick={handleItemClick}>
-              {'HTML (cdn hosted)'}
-            </Item>
-          </Submenu>
-        )}
-        {!isVSCodeWebExtension && (
-          <Submenu
-            label={
+            <Submenu
+              label={
+                <span className="inline-flex flex-row items-center">HTML</span>
+              }
+            >
+              <Item id="export-html-offline" onClick={handleItemClick}>
+                {'HTML (offline)'}
+              </Item>
+              <Item id="export-html-cdn" onClick={handleItemClick}>
+                {'HTML (cdn hosted)'}
+              </Item>
+            </Submenu>
+            <Submenu
+              label={
+                <span className="inline-flex flex-row items-center">
+                  Chrome (Puppeteer)
+                </span>
+              }
+            >
+              <Item id="export-chrome-pdf" onClick={handleItemClick}>
+                PDF
+              </Item>
+              <Item id="export-chrome-png" onClick={handleItemClick}>
+                PNG
+              </Item>
+              <Item id="export-chrome-jpeg" onClick={handleItemClick}>
+                JPEG
+              </Item>
+            </Submenu>
+            <Item id="export-prince" onClick={handleItemClick}>
               <span className="inline-flex flex-row items-center">
-                <Icon
-                  path={mdiExport}
-                  size={0.8}
-                  className="mr-2 invisible"
-                ></Icon>
-                Chrome (Puppeteer)
+                PDF (Prince)
               </span>
-            }
-          >
-            <Item id="export-chrome-pdf" onClick={handleItemClick}>
-              PDF
             </Item>
-            <Item id="export-chrome-png" onClick={handleItemClick}>
-              PNG
-            </Item>
-            <Item id="export-chrome-jpeg" onClick={handleItemClick}>
-              JPEG
+            <Submenu
+              label={
+                <span className="inline-flex flex-row items-center">eBook</span>
+              }
+            >
+              <Item id="export-ebook-epub" onClick={handleItemClick}>
+                ePub
+              </Item>
+              <Item id="export-ebook-mobi" onClick={handleItemClick}>
+                Mobi
+              </Item>
+              <Item id="export-ebook-pdf" onClick={handleItemClick}>
+                PDF
+              </Item>
+              <Item id="export-ebook-html" onClick={handleItemClick}>
+                HTML
+              </Item>
+            </Submenu>
+            <Item id="export-pandoc" onClick={handleItemClick}>
+              <span className="inline-flex flex-row items-center">Pandoc</span>
             </Item>
-          </Submenu>
-        )}
-        {!isVSCodeWebExtension && (
-          <Item id="export-prince" onClick={handleItemClick}>
-            <span className="inline-flex flex-row items-center">
-              <Icon
-                path={mdiExportVariant}
-                size={0.8}
-                className="mr-2 invisible"
-              ></Icon>
-              PDF (Prince)
-            </span>
-          </Item>
-        )}
-        {!isVSCodeWebExtension && (
-          <Submenu
-            label={
+            <Item id="export-markdown" onClick={handleItemClick}>
               <span className="inline-flex flex-row items-center">
-                <Icon
-                  path={mdiExport}
-                  size={0.8}
-                  className="mr-2 invisible"
-                ></Icon>
-                eBook
+                Save as Markdown
               </span>
-            }
-          >
-            <Item id="export-ebook-epub" onClick={handleItemClick}>
-              ePub
-            </Item>
-            <Item id="export-ebook-mobi" onClick={handleItemClick}>
-              Mobi
-            </Item>
-            <Item id="export-ebook-pdf" onClick={handleItemClick}>
-              PDF
-            </Item>
-            <Item id="export-ebook-html" onClick={handleItemClick}>
-              HTML
             </Item>
           </Submenu>
         )}
-        {!isVSCodeWebExtension && (
-          <Item id="export-pandoc" onClick={handleItemClick}>
-            <span className="inline-flex flex-row items-center">
-              <Icon
-                path={mdiExportVariant}
-                size={0.8}
-                className="mr-2 invisible"
-              ></Icon>
-              Pandoc
-            </span>
-          </Item>
-        )}
-        {!isVSCodeWebExtension && (
-          <Item id="export-markdown" onClick={handleItemClick}>
-            <span className="inline-flex flex-row items-center">
-              <Icon
-                path={mdiExportVariant}
-                size={0.8}
-                className="mr-2 invisible"
-              ></Icon>
-              Save as Markdown
-            </span>
-          </Item>
-        )}
         {!isVSCodeWebExtension && <Separator></Separator>}
         <Submenu
           label={
@@ -356,9 +329,21 @@ export default function ContextMenu() {
             </Item>
           )}
         </Submenu>
+        <Separator></Separator>
+        <Item id="toggle-zen-mode" onClick={handleItemClick}>
+          <span
+            className={classNames(
+              'inline-flex flex-row items-center',
+              enablePreviewZenMode ? 'text-primary font-bold' : '',
+            )}
+          >
+            <Icon path={mdiSpaOutline} size={0.8} className="mr-2"></Icon>
+            Zen Mode
+          </span>
+        </Item>
+        <Separator></Separator>
         {!isVSCodeWebExtension && (
           <>
-            <Separator></Separator>
             <Item id="open-image-helper" onClick={handleItemClick}>
               <span className="inline-flex flex-row items-center">
                 <Icon path={mdiImageOutline} size={0.8} className="mr-2"></Icon>

diff --git a/src/webview/components/Footer.tsx b/src/webview/components/Footer.tsx
@@ -15,6 +15,7 @@ export default function Footer() {
     showBacklinks,
     theme,
     markdown,
+    enablePreviewZenMode,
   } = PreviewContainer.useContainer();
   const [readingTimeEstimation, setReadingTimeEstimation] = useState<
     | {
@@ -39,12 +40,15 @@ export default function Footer() {
       data-theme={theme}
     >
       <div
-        className="w-full flex flex-row justify-between items-center backdrop-blur-xl"
+        className={
+          'w-full flex flex-row items-center backdrop-blur-xl ' +
+          (enablePreviewZenMode ? 'justify-end' : 'justify-between')
+        }
         style={{
           backgroundColor: getElementBackgroundColor(document.body),
         }}
       >
-        {readingTimeEstimation && (
+        {!enablePreviewZenMode && readingTimeEstimation && (
           <div className={classNames('p-1 ml-2 text-xs')}>
             {readingTimeEstimation.text}
           </div>

diff --git a/src/webview/components/Preview.tsx b/src/webview/components/Preview.tsx
@@ -14,6 +14,7 @@ import { Topbar } from './Topbar';
 
 export default function Preview() {
   const {
+    enablePreviewZenMode,
     hiddenPreviewElement,
     isPresentationMode,
     isLoadingPreview,
@@ -80,9 +81,11 @@ export default function Preview() {
       {/** Context menu */}
       <ContextMenu></ContextMenu>
       {/** Floating Actions */}
-      <FloatingActions></FloatingActions>
+      {!enablePreviewZenMode && <FloatingActions></FloatingActions>}
       {/** Markdown Editor */}
-      {highlightElementBeingEdited && <MarkdownEditor></MarkdownEditor>}
+      {!enablePreviewZenMode && highlightElementBeingEdited && (
+        <MarkdownEditor></MarkdownEditor>
+      )}
     </div>
   );
 }