diff --git a/CHANGELOG.md b/CHANGELOG.md index 92316673..db4a2d42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## [7.2.0] - 2022-04-xx + +### 🎨 Enhancements + +- [#263](https://github.com/estruyf/vscode-front-matter/issues/263): WYSIWYG string field option +- [#314](https://github.com/estruyf/vscode-front-matter/issues/314): New preview actions to open the page in the browser and refresh the preview +- [#322](https://github.com/estruyf/vscode-front-matter/issues/322): Show parent folder name when file is an index page (`index.md` / `_index.md`) + +### ⚡️ Optimizations + +- [#316](https://github.com/estruyf/vscode-front-matter/issues/316): Surpress file parsing errors when closing the dashboard + ## [7.1.2] - 2022-04-11 ### 🐞 Fixes diff --git a/package-lock.json b/package-lock.json index 6fbc58bb..d6f37ca6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vscode-front-matter-beta", - "version": "7.1.2", + "version": "7.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -642,6 +642,15 @@ "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "dev": true }, + "@types/quill": { + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz", + "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==", + "dev": true, + "requires": { + "parchment": "^1.1.2" + } + }, "@types/range-parser": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", @@ -1432,6 +1441,12 @@ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true }, + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", + "dev": true + }, "clone-deep": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", @@ -2286,6 +2301,12 @@ } } }, + "extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", @@ -2301,6 +2322,12 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==", + "dev": true + }, "fast-glob": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", @@ -4224,6 +4251,12 @@ "tslib": "^1.10.0" } }, + "parchment": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==", + "dev": true + }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -4606,6 +4639,39 @@ "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", "dev": true }, + "quill": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "dev": true, + "requires": { + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" + }, + "dependencies": { + "eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=", + "dev": true + } + } + }, + "quill-delta": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "dev": true, + "requires": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + } + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -4707,6 +4773,17 @@ "warning": "^4.0.2" } }, + "react-quill": { + "version": "2.0.0-beta.4", + "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0-beta.4.tgz", + "integrity": "sha512-KyAHvAlPjP4xLElKZJefMth91Z6FbbXRvq9OSu6xN3KBaoasLP9p+3dcxg4Ywr4tBlpMGXcPszYSAgd5CpJ45Q==", + "dev": true, + "requires": { + "@types/quill": "^1.3.10", + "lodash": "^4.17.4", + "quill": "^1.3.7" + } + }, "react-sortable-hoc": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz", diff --git a/package.json b/package.json index 267f48a4..a706be5d 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": "7.1.2", + "version": "7.2.0", "preview": false, "publisher": "eliostruyf", "galleryBanner": { @@ -802,6 +802,11 @@ "default": false, "description": "Is a single line field" }, + "wysiwyg": { + "type": "boolean", + "default": false, + "description": "Is a WYSIWYG field (HTML output)" + }, "multiple": { "type": "boolean", "default": false, @@ -1802,6 +1807,7 @@ "react-datepicker": "4.2.1", "react-dom": "17.0.1", "react-dropzone": "^11.3.4", + "react-quill": "^2.0.0-beta.4", "react-sortable-hoc": "^2.0.0", "react-toastify": "^8.1.0", "recoil": "^0.4.1", diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts index 90c063e3..8dc3298f 100644 --- a/src/commands/Preview.ts +++ b/src/commands/Preview.ts @@ -1,14 +1,15 @@ import { Telemetry } from './../helpers/Telemetry'; -import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent } from './../constants'; +import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent, PreviewCommands } from './../constants'; import { ArticleHelper } from './../helpers/ArticleHelper'; import { join } from "path"; import { commands, env, Uri, ViewColumn, window } from "vscode"; -import { Settings } from '../helpers'; +import { Extension, Settings } from '../helpers'; import { PreviewSettings } from '../models'; import { format } from 'date-fns'; import { DateHelper } from '../helpers/DateHelper'; import { Article } from '.'; import { urlJoin } from 'url-join-ts'; +import { WebviewHelper } from '@estruyf/vscode'; export class Preview { @@ -81,59 +82,62 @@ export class Preview { const cspSource = webView.webview.cspSource; - webView.webview.html = ` - - - - - -
- -
- + + ); +}; \ No newline at end of file diff --git a/src/dashboardWebView/components/Preview/index.ts b/src/dashboardWebView/components/Preview/index.ts new file mode 100644 index 00000000..7d1d8598 --- /dev/null +++ b/src/dashboardWebView/components/Preview/index.ts @@ -0,0 +1 @@ +export * from './Preview'; diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx index bc5605d3..89803e6d 100644 --- a/src/dashboardWebView/index.tsx +++ b/src/dashboardWebView/index.tsx @@ -6,6 +6,7 @@ import * as Sentry from "@sentry/react"; import { Integrations } from "@sentry/tracing"; import { SENTRY_LINK } from "../constants"; import './styles.css'; +import { Preview } from "./components/Preview"; declare const acquireVsCodeApi: () => { getState: () => T; @@ -19,6 +20,8 @@ if (elm) { const version = elm?.getAttribute("data-version"); const environment = elm?.getAttribute("data-environment"); const isProd = elm?.getAttribute("data-isProd"); + const type = elm?.getAttribute("data-type"); + const url = elm?.getAttribute("data-url"); if (isProd === "true") { Sentry.init({ @@ -31,7 +34,11 @@ if (elm) { }); } - render(, elm); + if (type === "preview") { + render(, elm); + } else { + render(, elm); + } } // Webpack HMR diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts index ad9f23be..42994f99 100644 --- a/src/listeners/dashboard/PagesListener.ts +++ b/src/listeners/dashboard/PagesListener.ts @@ -174,6 +174,10 @@ export class PagesListener extends BaseListener { } } catch (error: any) { + if ((error as Error)?.message.toLowerCase() === "webview is disposed") { + continue; + } + Logger.error(`PagesListener::getPagesData: ${file.filePath} - ${error.message}`); Notifications.error(`File error: ${file.filePath} - ${error?.message || error}`); } diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index 565c93e4..77696342 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -56,6 +56,7 @@ export interface Field { type: FieldType; choices?: string[] | Choice[]; single?: boolean; + wysiwyg?: boolean; multiple?: boolean; isPreviewImage?: boolean; hidden?: boolean; diff --git a/src/panelWebView/components/Fields/TextField.tsx b/src/panelWebView/components/Fields/TextField.tsx index a8ce763f..d73af348 100644 --- a/src/panelWebView/components/Fields/TextField.tsx +++ b/src/panelWebView/components/Fields/TextField.tsx @@ -6,12 +6,15 @@ export interface ITextFieldProps { label: string; value: string | null; singleLine: boolean | undefined; + wysiwyg: boolean | undefined; limit: number | undefined; rows?: number; onChange: (txtValue: string) => void; } -export const TextField: React.FunctionComponent = ({singleLine, limit, label, value, rows, onChange}: React.PropsWithChildren) => { +const WysiwygField = React.lazy(() => import('./WysiwygField')); + +export const TextField: React.FunctionComponent = ({singleLine, wysiwyg, limit, label, value, rows, onChange}: React.PropsWithChildren) => { const [ text, setText ] = React.useState(value); React.useEffect(() => { @@ -37,25 +40,31 @@ export const TextField: React.FunctionComponent = ({singleLine, {label} - + { - singleLine ? ( - onTextChange(e.currentTarget.value)} - style={{ - border: isValid ? "1px solid var(--vscode-inputValidation-infoBorder)" : "1px solid var(--vscode-inputValidation-warningBorder)" - }} /> + wysiwyg ? ( + Loading field)}> + + ) : ( -