@contentful/field-editor-rich-text 3.1.11 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.1.12...@contentful/field-editor-rich-text@3.2.0) (2022-11-16)
+
+### Features
+
+- superscipt and subscript support to rich text editor [TOL-30] ([#1280](https://github.com/contentful/field-editors/issues/1280)) ([3c50f07](https://github.com/contentful/field-editors/commit/3c50f0770f95e7c11c12411e3c33c9d3593b19a7))
+
+## [3.1.12](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.1.11...@contentful/field-editor-rich-text@3.1.12) (2022-11-07)
+
+**Note:** Version bump only for package @contentful/field-editor-rich-text
+
 ## [3.1.11](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.1.10...@contentful/field-editor-rich-text@3.1.11) (2022-11-07)
 
 **Note:** Version bump only for package @contentful/field-editor-rich-text

package/dist/field-editor-rich-text.cjs.development.js

@@ -5096,6 +5096,30 @@ function ToolbarListButton(props) {
   }, /*#__PURE__*/React.createElement(f36Icons.ListNumberedIcon, null)));
 }
 
+var toggleMarkAndDeactivateConflictingMarks = function toggleMarkAndDeactivateConflictingMarks(editor, mark) {
+  var subs = [Contentful.MARKS.SUPERSCRIPT, Contentful.MARKS.SUBSCRIPT];
+  var clear = subs.includes(mark) ? subs : [];
+  plateCore.toggleMark(editor, {
+    key: mark,
+    clear: clear
+  });
+};
+var buildMarkEventHandler = function buildMarkEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        event.preventDefault();
+        var isActive = plateCore.isMarkActive(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+          markType: type
+        });
+        toggleMarkAndDeactivateConflictingMarks(editor, type);
+      }
+    };
+  };
+};
+
 var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
   var mark = _ref.mark,
       title = _ref.title,
@@ -5110,9 +5134,7 @@ var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
       editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
         markType: mark
       });
-      plateCore.toggleMark(editor, {
-        key: mark
-      });
+      toggleMarkAndDeactivateConflictingMarks(editor, mark);
       focus(editor);
     }, [editor]);
     if (!editor) return null;
@@ -5129,24 +5151,6 @@ var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
   return Mark;
 };
 
-var buildMarkEventHandler = function buildMarkEventHandler(type) {
-  return function (editor, _ref) {
-    var hotkey = _ref.options.hotkey;
-    return function (event) {
-      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
-        event.preventDefault();
-        var isActive = plateCore.isMarkActive(editor, type);
-        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
-          markType: type
-        });
-        plateCore.toggleMark(editor, {
-          key: type
-        });
-      }
-    };
-  };
-};
-
 var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
   title: 'Bold',
   mark: Contentful.MARKS.BOLD,
@@ -5309,10 +5313,58 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
   });
 };
 
+var ToolbarSuperscriptButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Superscript',
+  mark: Contentful.MARKS.SUPERSCRIPT,
+  icon: /*#__PURE__*/React.createElement(f36Icons.SuperscriptIcon, null)
+});
+function Superscript(props) {
+  return /*#__PURE__*/React.createElement("sup", _extends({}, props.attributes), props.children);
+}
+var createSuperscriptPlugin = function createSuperscriptPlugin() {
+  return plateBasicMarks.createSuperscriptPlugin({
+    type: Contentful.MARKS.SUPERSCRIPT,
+    component: Superscript,
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.SUPERSCRIPT)
+    },
+    deserializeHtml: {
+      rules: [{
+        validNodeName: ['SUP']
+      }]
+    }
+  });
+};
+
+var ToolbarSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Subscript',
+  mark: Contentful.MARKS.SUBSCRIPT,
+  icon: /*#__PURE__*/React.createElement(f36Icons.SubscriptIcon, {
+    viewBox: "0 0 23 18"
+  })
+});
+function Subscript(props) {
+  return /*#__PURE__*/React.createElement("sub", _extends({}, props.attributes), props.children);
+}
+var createSubscriptPlugin = function createSubscriptPlugin() {
+  return plateBasicMarks.createSubscriptPlugin({
+    type: Contentful.MARKS.SUBSCRIPT,
+    component: Subscript,
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.SUBSCRIPT)
+    },
+    deserializeHtml: {
+      rules: [{
+        validNodeName: ['SUB']
+      }]
+    }
+  });
+};
+
 var createMarksPlugin = function createMarksPlugin() {
   return {
     key: 'Marks',
-    plugins: [createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin()]
+    plugins: [createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin(), createSuperscriptPlugin(), createSubscriptPlugin()]
   };
 };
 
@@ -7358,6 +7410,10 @@ var Toolbar = function Toolbar(_ref) {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, Contentful.MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
     isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, Contentful.MARKS.SUPERSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSuperscriptButton, {
+    isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, Contentful.MARKS.SUBSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSubscriptButton, {
+    isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, Contentful.MARKS.UNDERLINE) && /*#__PURE__*/React__default.createElement(ToolbarUnderlineButton, {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {