From cc79a3b47fa5c46be755c537e97db6ef2fdfb4d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89rico=20Andrei?= Date: Sat, 24 Feb 2024 12:18:09 -0300 Subject: [PATCH 1/3] chore: Update linters --- Makefile | 109 +++++++++--------- jest-addon.config.js | 12 +- package.json | 84 +++++--------- src/components/Blocks/Code/DefaultView.jsx | 16 +-- .../Blocks/Code/DefaultView.stories.jsx | 6 +- src/components/Blocks/Code/Edit.jsx | 8 +- src/components/Blocks/Code/schema.js | 20 +--- src/components/Blocks/Mermaid/Edit.jsx | 8 +- src/components/Editor/Editor.tsx | 87 +++----------- src/index.js | 6 +- src/theme/main.less | 2 +- src/theme/theme-dark.less | 11 +- src/theme/theme-light.less | 4 +- 13 files changed, 122 insertions(+), 251 deletions(-) diff --git a/Makefile b/Makefile index bffc985..9b3481c 100644 --- a/Makefile +++ b/Makefile @@ -22,7 +22,7 @@ RESET=`tput sgr0` YELLOW=`tput setaf 3` PLONE_VERSION=6 -VOLTO_VERSION=16.26.0 +VOLTO_VERSION=17.15.2 ADDON_NAME='@plonegovbr/volto-code-block' ADDON_PATH='volto-code-block' @@ -32,45 +32,43 @@ CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${DEV_COMPOSE} ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE} +COMPOSE_FILE=dockerfiles/docker-compose.yml +ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml +CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} docker compose +DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${COMPOSE_FILE} +DEV_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE} +LIVE_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE} +ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE} + .PHONY: build-backend build-backend: ## Build @echo "$(GREEN)==> Build Backend Container $(RESET)" - ${DOCKER_COMPOSE} build backend + ${DEV_COMPOSE} build backend .PHONY: start-backend start-backend: ## Starts Docker backend @echo "$(GREEN)==> Start Docker-based Plone Backend $(RESET)" - ${DOCKER_COMPOSE} up backend -d + ${DEV_COMPOSE} up backend -d .PHONY: stop-backend stop-backend: ## Stop Docker backend @echo "$(GREEN)==> Stop Docker-based Plone Backend $(RESET)" - ${DOCKER_COMPOSE} stop backend + ${DEV_COMPOSE} stop backend + +.PHONY: build-live +build-live: ## Build Addon live + @echo "$(GREEN)==> Build Addon development container $(RESET)" + ${LIVE_COMPOSE} build addon-live .PHONY: build-addon build-addon: ## Build Addon dev @echo "$(GREEN)==> Build Addon development container $(RESET)" - ${DOCKER_COMPOSE} build addon-dev - ${DOCKER_COMPOSE} build addon-storybook + ${DEV_COMPOSE} build addon-dev .PHONY: start-dev start-dev: ## Starts Dev container @echo "$(GREEN)==> Start Addon Development container $(RESET)" - ${DOCKER_COMPOSE} up addon-dev - -.PHONY: start-storybook -start-storybook: ## Starts Storybook - @echo "$(GREEN)==> Start Storybook $(RESET)" - ${DOCKER_COMPOSE} up addon-storybook - -.PHONY: debug -debug: ## Starts Dev container - @echo "$(GREEN)==> Start Addon Development container $(RESET)" - ${DOCKER_COMPOSE} exec -it addon-dev bash - -.PHONY: debug-frontend -debug-frontend: ## Run bash in the Frontend container (for debug infrastructure purposes) - ${DOCKER_COMPOSE} run --entrypoint bash addon-dev + ${DEV_COMPOSE} up addon-dev backend .PHONY: dev dev: ## Develop the addon @@ -84,63 +82,54 @@ dev: ## Develop the addon help: ## Show this help. @echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)" +## Setup the local environment +.PHONY: install +install: ## Install the local environment, Cypress, build acceptance containers + yarn + make install-acceptance + # Dev Helpers .PHONY: i18n i18n: ## Sync i18n - ${DOCKER_COMPOSE} run addon-dev i18n - -.PHONY: build-storybook -build-storybook: ## Build storybook - @echo "$(GREEN)==> Build storybook $(RESET)" - if [ ! -d .storybook ]; then mkdir .storybook; fi - ${DOCKER_COMPOSE} run addon-storybook build-storybook - -.PHONY: release -release: ## Release package - yarn - npx release-it - -.PHONY: dry-run-release -dry-run-release: ## Dry Run Release package - yarn - npx release-it --dry-run + @echo "$(YELLOW)==> Do not forget to setup the local environment (make install) $(RESET)" + yarn i18n .PHONY: format format: ## Format codebase - ${DOCKER_COMPOSE} run addon-dev lint:fix - ${DOCKER_COMPOSE} run addon-dev prettier:fix - ${DOCKER_COMPOSE} run addon-dev stylelint:fix + ${DEV_COMPOSE} run --rm addon-dev lint:fix + ${DEV_COMPOSE} run --rm addon-dev prettier:fix + ${DEV_COMPOSE} run --rm addon-dev stylelint:fix .PHONY: lint lint: ## Lint Codebase - ${DOCKER_COMPOSE} run addon-dev lint - ${DOCKER_COMPOSE} run addon-dev prettier - ${DOCKER_COMPOSE} run addon-dev stylelint + ${DEV_COMPOSE} run --rm addon-dev lint + ${DEV_COMPOSE} run --rm addon-dev prettier + ${DEV_COMPOSE} run --rm addon-dev stylelint --allow-empty-input .PHONY: test test: ## Run unit tests - ${DOCKER_COMPOSE} run addon-dev test --watchAll + ${DEV_COMPOSE} run --rm addon-dev test --watchAll .PHONY: test-ci test-ci: ## Run unit tests in CI - ${DOCKER_COMPOSE} run -e CI=1 addon-dev test + ${DEV_COMPOSE} run -e CI=1 addon-dev test ## Acceptance .PHONY: install-acceptance -install-acceptance: ## Install Cypress, build containers +install-acceptance: ## Install Cypress, build acceptance containers (cd acceptance && yarn) ${ACCEPTANCE} --profile dev --profile prod build .PHONY: start-test-acceptance-server -start-test-acceptance-server: ## Start acceptance server - ${ACCEPTANCE} --profile dev up -d +start-test-acceptance-server: ## Start acceptance server (for use it in while developing) + ${ACCEPTANCE} --profile dev up .PHONY: start-test-acceptance-server-prod -start-test-acceptance-server-prod: ## Start acceptance server +start-test-acceptance-server-prod: ## Start acceptance server in prod (used by CI) ${ACCEPTANCE} --profile prod up -d .PHONY: test-acceptance -test-acceptance: ## Start Cypress +test-acceptance: ## Start Cypress (for use it while developing) (cd acceptance && ./node_modules/.bin/cypress open) .PHONY: test-acceptance-headless @@ -148,9 +137,21 @@ test-acceptance-headless: ## Run cypress tests in CI (cd acceptance && ./node_modules/.bin/cypress run) .PHONY: stop-test-acceptance-server -stop-test-acceptance-server: ## Stop acceptance server - ${ACCEPTANCE} down +stop-test-acceptance-server: ## Stop acceptance server (for use it while finished developing) + ${ACCEPTANCE} --profile dev down .PHONY: status-test-acceptance-server -status-test-acceptance-server: ## Status of Acceptance Server +status-test-acceptance-server: ## Status of Acceptance Server (for use it while developing) ${ACCEPTANCE} ps + +.PHONY: debug-frontend +debug-frontend: ## Run bash in the Frontend container (for debug infrastructure purposes) + ${DEV_COMPOSE} run --entrypoint bash addon-dev + +.PHONY: pull-backend-image +pull-backend-image: ## Pulls and updates the backend image (for use it while developing) + docker pull ghcr.io/voltointranet-trece:latest + +.PHONY: release +release: ## Release a version of the add-on + yarn release diff --git a/jest-addon.config.js b/jest-addon.config.js index 6f1ad9a..9fab0f3 100644 --- a/jest-addon.config.js +++ b/jest-addon.config.js @@ -1,9 +1,6 @@ module.exports = { testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'], - collectCoverageFrom: [ - 'src/addons/**/src/**/*.{js,jsx,ts,tsx}', - '!src/**/*.d.ts', - ], + collectCoverageFrom: ['src/addons/**/src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'], transformIgnorePatterns: ['node_modules/(?!(volto-slate|@plone/volto)/)'], moduleNameMapper: { '@plone/volto/cypress': '/node_modules/@plone/volto/cypress', @@ -12,14 +9,11 @@ module.exports = { '@package/(.*)$': '/src/$1', '@root/(.*)$': '/src/$1', '~/(.*)$': '/src/$1', - 'load-volto-addons': - '/node_modules/@plone/volto/jest-addons-loader.js', + 'load-volto-addons': '/node_modules/@plone/volto/jest-addons-loader.js', + '\\.(css|less|scss|sass)$': 'identity-obj-proxy', }, transform: { '^.+\\.js(x)?$': 'babel-jest', - '^.+\\.css$': 'jest-css-modules', - '^.+\\.less$': 'jest-css-modules', - '^.+\\.scss$': 'jest-css-modules', '^.+\\.(png)$': 'jest-file', '^.+\\.(jpg)$': 'jest-file', '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js', diff --git a/package.json b/package.json index f7fce36..0724430 100644 --- a/package.json +++ b/package.json @@ -22,73 +22,45 @@ "cypress:open": "NODE_ENV=production ../../../node_modules/cypress/bin/cypress open", "cypress:run": "NODE_ENV=test ../../../node_modules/cypress/bin/cypress run", "cypress:start-frontend": "cd ../../../ && RAZZLE_API_PATH=http://localhost:55001/plone yarn start", - "dry-release": "release-it --dry-run", "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon", - "prettier:fix": "./node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'", - "prettier": "./node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'", - "release-alpha": "release-it --preRelease=alpha", - "release-major-alpha": "release-it major --preRelease=alpha", + "dry-release": "release-it --dry-run", "release": "release-it", - "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix", - "stylelint:overrides": "./node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'", - "stylelint": "./node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'" + "release-major-alpha": "release-it major --preRelease=alpha", + "release-alpha": "release-it --preRelease=alpha", + "release-rc": "release-it --preRelease=rc" }, "peerDependencies": { - "@plone/volto": ">=15.12.0" + "@plone/volto": ">=17.0.0" }, "dependencies": { - "@plone/scripts": "*", - "prismjs": "*" + "prismjs": "1.29.0" }, "devDependencies": { - "@commitlint/cli": "^17.0.2", - "@commitlint/config-conventional": "^17.0.2", - "@release-it/conventional-changelog": "^5.0.0", - "@typescript-eslint/eslint-plugin": "*", - "prettier": "2.0.5", - "release-it": "*", - "stylelint": "13.3.3", - "stylelint-config-idiomatic-order": "8.1.0", - "stylelint-config-prettier": "8.0.1", - "stylelint-prettier": "1.1.2" + "@plone/scripts": "^3.0.0", + "@commitlint/cli": "^18.6.1", + "@commitlint/config-conventional": "^18.6.2", + "@release-it/conventional-changelog": "^8.0.1", + "@babel/eslint-parser": "7.22.15", + "eslint": "8.49.0", + "eslint-config-prettier": "9.0.0", + "eslint-config-react-app": "7.0.1", + "eslint-plugin-flowtype": "8.0.3", + "eslint-plugin-import": "2.28.1", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-prettier": "5.0.0", + "eslint-plugin-react": "7.33.2", + "eslint-plugin-react-hooks": "4.6.0", + "postcss-less": "6.0.0", + "postcss-scss": "4.0.8", + "prettier": "3.0.3", + "release-it": "^16.1.5", + "stylelint": "15.10.3", + "stylelint-config-idiomatic-order": "9.0.0", + "stylelint-config-sass-guidelines": "10.0.0", + "stylelint-prettier": "4.0.2" }, "repository": { "type": "git", "url": "git@github.com:plonegovbr/volto-code-block.git" - }, - "prettier": { - "trailingComma": "all", - "singleQuote": true, - "overrides": [ - { - "files": "*.overrides", - "options": { - "parser": "less" - } - } - ] - }, - "stylelint": { - "extends": [ - "stylelint-config-idiomatic-order" - ], - "plugins": [ - "stylelint-prettier" - ], - "rules": { - "prettier/prettier": true, - "rule-empty-line-before": [ - "always-multi-line", - { - "except": [ - "first-nested" - ], - "ignore": [ - "after-comment" - ] - } - ] - }, - "ignoreFiles": "theme/themes/default/**/*.overrides" } } diff --git a/src/components/Blocks/Code/DefaultView.jsx b/src/components/Blocks/Code/DefaultView.jsx index 5603737..98a82ca 100644 --- a/src/components/Blocks/Code/DefaultView.jsx +++ b/src/components/Blocks/Code/DefaultView.jsx @@ -3,14 +3,7 @@ import SyntaxHighlighter from '../../SyntaxHighlighter/SyntaxHighlighter'; const CodeView = (props) => { const { data } = props; - const { - code, - style, - language, - lineNbr, - showLineNumbers, - wrapLongLines, - } = data; + const { code, style, language, lineNbr, showLineNumbers, wrapLongLines } = data; const styleWrap = wrapLongLines ? 'wrapLongLines' : ''; const className = `code-block-wrapper ${style} ${styleWrap}`; @@ -19,12 +12,7 @@ const CodeView = (props) => { {data && (
- +
)} diff --git a/src/components/Blocks/Code/DefaultView.stories.jsx b/src/components/Blocks/Code/DefaultView.stories.jsx index 912561e..1aacca0 100644 --- a/src/components/Blocks/Code/DefaultView.stories.jsx +++ b/src/components/Blocks/Code/DefaultView.stories.jsx @@ -3,11 +3,9 @@ import React from 'react'; import CodeView from './DefaultView'; import Wrapper from '@plone/volto/storybook'; -const codePython = - 'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()'; +const codePython = 'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()'; -const codeLongLines = - '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)'; +const codeLongLines = '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)'; const StoryComponent = injectIntl(({ children, ...args }) => { const { language, style, code, showLineNumbers, wrapLongLines } = args; diff --git a/src/components/Blocks/Code/Edit.jsx b/src/components/Blocks/Code/Edit.jsx index 88ee552..d4eb628 100644 --- a/src/components/Blocks/Code/Edit.jsx +++ b/src/components/Blocks/Code/Edit.jsx @@ -28,13 +28,7 @@ const CodeBlockEdit = (props) => { return (
- handleChange(code)} - highlight={(code) => highlight(code, language)} - padding={10} - preClassName={`code-block-wrapper ${data.style} language-${data.language}`} - /> + handleChange(code)} highlight={(code) => highlight(code, language)} padding={10} preClassName={`code-block-wrapper ${data.style} language-${data.language}`} /> diff --git a/src/components/Blocks/Code/schema.js b/src/components/Blocks/Code/schema.js index 0cec14b..1c06138 100644 --- a/src/components/Blocks/Code/schema.js +++ b/src/components/Blocks/Code/schema.js @@ -30,18 +30,14 @@ const messages = defineMessages({ }); export const codeSchema = (props) => { - const defaultLanguage = - config.blocks?.blocksConfig?.codeBlock?.defaultLanguage; + const defaultLanguage = config.blocks?.blocksConfig?.codeBlock?.defaultLanguage; const defaultStyle = config.blocks?.blocksConfig?.codeBlock?.defaultStyle; const availableLanguages = () => { const allLanguages = config.settings.codeBlock.languages || {}; - const languages = Array.from( - Object.entries(allLanguages), - ([key, value]) => { - return [key, value.label]; - }, - ); + const languages = Array.from(Object.entries(allLanguages), ([key, value]) => { + return [key, value.label]; + }); return languages; }; @@ -55,13 +51,7 @@ export const codeSchema = (props) => { { id: 'default', title: 'Default', - fields: [ - 'language', - 'style', - 'showLineNumbers', - 'wrapLongLines', - 'lineNbr', - ], + fields: ['language', 'style', 'showLineNumbers', 'wrapLongLines', 'lineNbr'], }, ], diff --git a/src/components/Blocks/Mermaid/Edit.jsx b/src/components/Blocks/Mermaid/Edit.jsx index 1301b07..4f5242b 100644 --- a/src/components/Blocks/Mermaid/Edit.jsx +++ b/src/components/Blocks/Mermaid/Edit.jsx @@ -19,13 +19,7 @@ const MermaidBlockEdit = (props) => { return (
- handleChange(code)} - highlight={(code) => highlight(code, language)} - padding={10} - preClassName={`code-block-wrapper ${data.style} language-mermaid`} - /> + handleChange(code)} highlight={(code) => highlight(code, language)} padding={10} preClassName={`code-block-wrapper ${data.style} language-mermaid`} />
); diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 1e2f859..16223ce 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/no-autofocus */ import * as React from 'react'; type Padding = T | { top?: T; right?: T; bottom?: T; left?: T }; @@ -61,14 +62,8 @@ const KEYCODE_BACK_QUOTE = 192; const HISTORY_LIMIT = 100; const HISTORY_TIME_GAP = 3000; -const isWindows = - typeof window !== 'undefined' && - 'navigator' in window && - /Win/i.test(navigator.platform); -const isMacLike = - typeof window !== 'undefined' && - 'navigator' in window && - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); +const isWindows = typeof window !== 'undefined' && 'navigator' in window && /Win/i.test(navigator.platform); +const isMacLike = typeof window !== 'undefined' && 'navigator' in window && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); const className = 'npm__react-simple-code-editor__textarea'; @@ -129,8 +124,7 @@ export default class Editor extends React.Component { }); }; - private _getLines = (text: string, position: number) => - text.substring(0, position).split('\n'); + private _getLines = (text: string, position: number) => text.substring(0, position).split('\n'); private _recordChange = (record: Record, overwrite: boolean = false) => { const { stack, offset } = this._history; @@ -162,14 +156,10 @@ export default class Editor extends React.Component { const re = /[^a-z0-9]([a-z0-9]+)$/i; // Get the previous line - const previous = this._getLines(last.value, last.selectionStart) - .pop() - ?.match(re); + const previous = this._getLines(last.value, last.selectionStart).pop()?.match(re); // Get the current line - const current = this._getLines(record.value, record.selectionStart) - .pop() - ?.match(re); + const current = this._getLines(record.value, record.selectionStart).pop()?.match(re); if (previous?.[1] && current?.[1]?.startsWith(previous[1])) { // The last word of the previous line and current line match @@ -274,11 +264,7 @@ export default class Editor extends React.Component { const nextValue = value .split('\n') .map((line, i) => { - if ( - i >= startLine && - i <= endLine && - line.startsWith(tabCharacter) - ) { + if (i >= startLine && i <= endLine && line.startsWith(tabCharacter)) { return line.substring(tabCharacter.length); } @@ -293,9 +279,7 @@ export default class Editor extends React.Component { value: nextValue, // Move the start cursor if first line in selection was modified // It was modified only if it started with a tab - selectionStart: startLineText?.startsWith(tabCharacter) - ? selectionStart - tabCharacter.length - : selectionStart, + selectionStart: startLineText?.startsWith(tabCharacter) ? selectionStart - tabCharacter.length : selectionStart, // Move the end cursor by total number of characters removed selectionEnd: selectionEnd - (value.length - nextValue.length), }); @@ -320,23 +304,16 @@ export default class Editor extends React.Component { .join('\n'), // Move the start cursor by number of characters added in first line of selection // Don't move it if it there was no text before cursor - selectionStart: - startLineText && /\S/.test(startLineText) - ? selectionStart + tabCharacter.length - : selectionStart, + selectionStart: startLineText && /\S/.test(startLineText) ? selectionStart + tabCharacter.length : selectionStart, // Move the end cursor by total number of characters added - selectionEnd: - selectionEnd + tabCharacter.length * (endLine - startLine + 1), + selectionEnd: selectionEnd + tabCharacter.length * (endLine - startLine + 1), }); } else { const updatedSelection = selectionStart + tabCharacter.length; this._applyEdits({ // Insert tab character at caret - value: - value.substring(0, selectionStart) + - tabCharacter + - value.substring(selectionEnd), + value: value.substring(0, selectionStart) + tabCharacter + value.substring(selectionEnd), // Update caret position selectionStart: updatedSelection, selectionEnd: updatedSelection, @@ -354,9 +331,7 @@ export default class Editor extends React.Component { this._applyEdits({ // Remove tab character at caret - value: - value.substring(0, selectionStart - tabCharacter.length) + - value.substring(selectionEnd), + value: value.substring(0, selectionStart - tabCharacter.length) + value.substring(selectionEnd), // Update caret position selectionStart: updatedSelection, selectionEnd: updatedSelection, @@ -378,22 +353,14 @@ export default class Editor extends React.Component { this._applyEdits({ // Insert indentation character at caret - value: - value.substring(0, selectionStart) + - indent + - value.substring(selectionEnd), + value: value.substring(0, selectionStart) + indent + value.substring(selectionEnd), // Update caret position selectionStart: updatedSelection, selectionEnd: updatedSelection, }); } } - } else if ( - e.keyCode === KEYCODE_PARENS || - e.keyCode === KEYCODE_BRACKETS || - e.keyCode === KEYCODE_QUOTE || - e.keyCode === KEYCODE_BACK_QUOTE - ) { + } else if (e.keyCode === KEYCODE_PARENS || e.keyCode === KEYCODE_BRACKETS || e.keyCode === KEYCODE_QUOTE || e.keyCode === KEYCODE_BACK_QUOTE) { let chars; if (e.keyCode === KEYCODE_PARENS && e.shiftKey) { @@ -419,12 +386,7 @@ export default class Editor extends React.Component { e.preventDefault(); this._applyEdits({ - value: - value.substring(0, selectionStart) + - chars[0] + - value.substring(selectionStart, selectionEnd) + - chars[1] + - value.substring(selectionEnd), + value: value.substring(0, selectionStart) + chars[0] + value.substring(selectionStart, selectionEnd) + chars[1] + value.substring(selectionEnd), // Update caret position selectionStart, selectionEnd: selectionEnd + 2, @@ -456,11 +418,7 @@ export default class Editor extends React.Component { e.preventDefault(); this._redoEdit(); - } else if ( - e.keyCode === KEYCODE_M && - e.ctrlKey && - (isMacLike ? e.shiftKey : true) - ) { + } else if (e.keyCode === KEYCODE_M && e.ctrlKey && (isMacLike ? e.shiftKey : true)) { e.preventDefault(); // Toggle capturing tab key so users can focus away @@ -545,14 +503,7 @@ export default class Editor extends React.Component { return (
-