Add clear formatting button to the toolbar. (#246)

CHANGELOG.md

@@ -4,8 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [6.3.0](https://github.com/eea/volto-slate/compare/6.2.2...6.3.0)
+
+- Add clear formatting button to the toolbar. [`#246`](https://github.com/eea/volto-slate/pull/246)
+- Release 6.3.0 [`b00265f`](https://github.com/eea/volto-slate/commit/b00265fae96cb9dd81e9cb1fbbd2ec11493a623b)
+
 #### [6.2.2](https://github.com/eea/volto-slate/compare/6.2.1...6.2.2)
 
+> 30 June 2022
+
 
 #### [6.2.1](https://github.com/eea/volto-slate/compare/6.2.0...6.2.1)
 

Jenkinsfile

@@ -6,7 +6,7 @@ pipeline {
         NAMESPACE = ""
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu"
         DEPENDENCIES = "volto-slate:asCypressDefault"
-        VOLTO = "alpha"
+        VOLTO = "16.0.0-alpha.14"
     }
 
   stages {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "volto-slate",
-  "version": "6.2.2",
+  "version": "6.3.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/editor/config.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import boldIcon from '@plone/volto/icons/bold.svg';
 import codeIcon from '@plone/volto/icons/code.svg';
+import formatClearIcon from '@plone/volto/icons/format-clear.svg';
 import headingIcon from '@plone/volto/icons/heading.svg';
 import italicIcon from '@plone/volto/icons/italic.svg';
 import listBulletIcon from '@plone/volto/icons/list-bullet.svg';
@@ -19,6 +20,7 @@ import {
   MarkButton,
   MarkElementButton,
   BlockButton,
+  ClearFormattingButton,
   Separator,
   Expando,
 } from './ui';
@@ -107,6 +109,9 @@ export const buttons = {
   'heading-four': (props) => (
     <BlockButton title="Heading 4" format="h4" icon={subTextIcon} {...props} />
   ),
+  clearformatting: (props) => (
+    <ClearFormattingButton title="Clear formatting" icon={formatClearIcon} />
+  ),
   'numbered-list': (props) => (
     <BlockButton
       title="Numbered list"
@@ -132,6 +137,8 @@ export const defaultToolbarButtons = [
   'heading-three',
   'heading-four',
   'separator',
+  'clearformatting',
+  'separator',
   'sub',
   'sup',
   'separator',

src/editor/ui/ClearFormattingButton.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { clearFormatting } from 'volto-slate/utils';
+
+import ToolbarButton from './ToolbarButton';
+
+const ClearFormattingButton = ({ icon, ...props }) => {
+  const editor = useSlate();
+
+  const handleMouseDown = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      clearFormatting(editor);
+    },
+    [editor],
+  );
+
+  return <ToolbarButton {...props} onMouseDown={handleMouseDown} icon={icon} />;
+};
+
+export default ClearFormattingButton;

src/editor/ui/index.js

@@ -1,5 +1,6 @@
 export BasicToolbar from './BasicToolbar';
 export BlockButton from './BlockButton';
+export ClearFormattingButton from './ClearFormattingButton';
 export ExpandedToolbar from './ExpandedToolbar';
 export Expando from './Expando';
 export MarkButton from './MarkButton';

src/utils/blocks.js

@@ -306,3 +306,15 @@ export const getAllBlocks = (properties, blocks) => {
   }
   return blocks;
 };
+
+export const clearFormatting = (editor) => {
+  const { slate } = config.settings;
+  Transforms.setNodes(editor, {
+    type: slate.defaultBlockType,
+  });
+  Transforms.unwrapNodes(editor, {
+    match: (n) => n.type && n.type !== slate.defaultBlockType,
+    mode: 'all',
+    split: false,
+  });
+};