From b8a92325b0152a8973f584666899f552bb4bf7dc Mon Sep 17 00:00:00 2001 From: dkoo Date: Tue, 3 Sep 2024 15:02:29 -0600 Subject: [PATCH] perf: remove CodeMirror to reduce bundle size & speed --- package-lock.json | 45 ------------------------ package.json | 2 -- src/newsletter-editor/styling/index.js | 34 +++--------------- src/newsletter-editor/styling/style.scss | 24 +++++++++++-- 4 files changed, 27 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd199d02a..ad55e6268 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,7 @@ "version": "3.1.0", "license": "GPL-2.0-or-later", "dependencies": { - "@uiw/react-codemirror": "^3.2.10", "classnames": "^2.5.1", - "csslint": "^1.0.5", "mjml-browser": "^4.15.3", "newspack-components": "^3.0.0", "qs": "^6.13.0" @@ -5733,20 +5731,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@uiw/react-codemirror": { - "version": "3.2.10", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.18.9", - "codemirror": "^5.65.8" - }, - "peerDependencies": { - "@babel/runtime": ">=7.11.0", - "codemirror": ">=5.49.2", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "dev": true, @@ -9102,13 +9086,6 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, - "node_modules/clone": { - "version": "2.1.2", - "license": "MIT", - "engines": { - "node": ">=0.8" - } - }, "node_modules/clone-deep": { "version": "0.2.4", "dev": true, @@ -9163,10 +9140,6 @@ "node": ">= 0.12.0" } }, - "node_modules/codemirror": { - "version": "5.65.16", - "license": "MIT" - }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "dev": true, @@ -9838,20 +9811,6 @@ "node": ">=4" } }, - "node_modules/csslint": { - "version": "1.0.5", - "license": "MIT", - "dependencies": { - "clone": "~2.1.0", - "parserlib": "~1.1.1" - }, - "bin": { - "csslint": "dist/cli.js" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/cssnano": { "version": "6.1.2", "dev": true, @@ -20955,10 +20914,6 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, - "node_modules/parserlib": { - "version": "1.1.1", - "license": "MIT" - }, "node_modules/parseurl": { "version": "1.3.3", "dev": true, diff --git a/package.json b/package.json index af6a29f45..72417cd68 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,7 @@ "url": "https://github.com/Automattic/newspack-newsletters/issues" }, "dependencies": { - "@uiw/react-codemirror": "^3.2.10", "classnames": "^2.5.1", - "csslint": "^1.0.5", "mjml-browser": "^4.15.3", "newspack-components": "^3.0.0", "qs": "^6.13.0" diff --git a/src/newsletter-editor/styling/index.js b/src/newsletter-editor/styling/index.js index e17faf97a..6e9a5a9d5 100644 --- a/src/newsletter-editor/styling/index.js +++ b/src/newsletter-editor/styling/index.js @@ -3,6 +3,7 @@ /** * WordPress dependencies */ +import { PlainText } from '@wordpress/block-editor'; import { compose, useInstanceId } from '@wordpress/compose'; import { ColorPicker, BaseControl, Panel, PanelBody, PanelRow } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -10,30 +11,11 @@ import { useSelect, withDispatch, withSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; import SelectControlWithOptGroup from '../../components/select-control-with-optgroup/'; -/** - * External dependencies - */ -import { CSSLint } from 'csslint'; -import CodeMirror from '@uiw/react-codemirror'; -// eslint-disable-next-line import/no-extraneous-dependencies -import 'codemirror/mode/css/css'; -// eslint-disable-next-line import/no-extraneous-dependencies -import 'codemirror/addon/lint/lint'; -// eslint-disable-next-line import/no-extraneous-dependencies -import 'codemirror/addon/lint/lint.css'; -// eslint-disable-next-line import/no-extraneous-dependencies -import 'codemirror/addon/lint/css-lint'; - /** * Internal dependencies */ import './style.scss'; -/** - * Add CSSLint to global scope for CodeMirror. - */ -window.CSSLint = window.CSSLint || CSSLint; - const fontOptgroups = [ { label: __( 'Sans Serif', 'newspack-newsletters' ), @@ -264,18 +246,12 @@ export const Styling = compose( [ ) } hideLabelFromVision > - editPost( { meta: { custom_css: instance.getValue() } } ) } - options={ { - gutters: [ 'CodeMirror-lint-markers' ], - height: 'auto', - indentWithTabs: true, - mode: 'css', - lint: true, - } } + onChange={ content => editPost( { meta: { custom_css: content } } ) } + aria-label={ __( 'Custom CSS', 'newspack-newsletters' ) } + placeholder={ __( 'Write custom CSS…', 'newspack-newsletters' ) } /> diff --git a/src/newsletter-editor/styling/style.scss b/src/newsletter-editor/styling/style.scss index 06da1b24d..c721f80fb 100644 --- a/src/newsletter-editor/styling/style.scss +++ b/src/newsletter-editor/styling/style.scss @@ -26,8 +26,28 @@ .components-base-control { max-width: 100%; } - .CodeMirror { - border: 1px solid wp-colors.$gray-700; + .block-editor-plain-text { + background: #fff !important; + border: 1px solid #1e1e1e !important; + border-radius: 2px !important; + box-shadow: none !important; + box-sizing: border-box; + color: #1e1e1e !important; + direction: ltr; + font-family: Menlo, Consolas, monaco, monospace !important; + font-size: 16px !important; + max-height: 250px; + padding: 12px !important; + } + @media (min-width: 600px) { + .block-editor-plain-text { + font-size: 13px !important; + } + } + .block-editor-plain-text:focus { + border-color: var(--wp-admin-theme-color) !important; + box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important; + outline: 2px solid #0000 !important; } } }