@atlaskit/editor-plugin-highlight 5.3.0 → 5.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-highlight
 
+## 5.3.2
+
+### Patch Changes
+
+- [`6af30673f7cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6af30673f7cee) -
+  [ux] Adding padding to the left and right side of highlighted text
+- Updated dependencies
+
+## 5.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/cjs/highlightPlugin.js

@@ -8,8 +8,10 @@ exports.highlightPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _changeColor = require("./editor-commands/change-color");
+var _highlightPadding = require("./pm-plugins/highlight-padding");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarHighlightColor = require("./ui/FloatingToolbarHighlightColor");
@@ -65,7 +67,7 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       changeColor: (0, _changeColor.changeColor)(editorAnalyticsAPI)
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'highlight',
         plugin: function plugin() {
           return (0, _main.createPlugin)({
@@ -80,6 +82,15 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
           });
         }
       }];
+      if ((0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+        plugins.push({
+          name: 'highlightPadding',
+          plugin: function plugin() {
+            return (0, _highlightPadding.createHighlightPaddingPlugin)();
+          }
+        });
+      }
+      return plugins;
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/cjs/pm-plugins/highlight-padding/add-padding-decorations.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addPaddingDecorations = void 0;
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _utils = require("./utils");
+var createPaddingDecoration = function createPaddingDecoration(_ref) {
+  var pos = _ref.pos,
+    node = _ref.node,
+    padLeft = _ref.padLeft,
+    padRight = _ref.padRight;
+  var classes = [];
+  var baseClass = 'background-color';
+  var padLeftClass = "".concat(baseClass, "-padding-left");
+  var padRightClass = "".concat(baseClass, "-padding-right");
+  if (padLeft) {
+    classes.push(padLeftClass);
+  }
+  if (padRight) {
+    classes.push(padRightClass);
+  }
+  return _view.Decoration.inline(pos, pos + node.nodeSize, {
+    class: classes.join(' ')
+  });
+};
+/**
+ * Adds padding decorations to highlighted text
+ * within the specified range.
+ */
+var addPaddingDecorations = exports.addPaddingDecorations = function addPaddingDecorations(_ref2) {
+  var decorationSet = _ref2.decorationSet,
+    state = _ref2.state,
+    from = _ref2.from,
+    to = _ref2.to;
+  var newDecorationSet = decorationSet;
+  state.doc.nodesBetween(from, to, function (node, pos) {
+    if (!(0, _utils.isHighlightedTextNode)(node)) {
+      return;
+    }
+    var nodeStart = pos;
+    var nodeEnd = pos + node.nodeSize;
+    var padLeft = (0, _utils.shouldPadLeft)({
+      state: state,
+      nodeStart: nodeStart
+    });
+    var padRight = (0, _utils.shouldPadRight)({
+      state: state,
+      nodeEnd: nodeEnd
+    });
+    if (padLeft && padRight) {
+      var newDecoration = createPaddingDecoration({
+        pos: nodeStart,
+        node: node,
+        padLeft: padLeft,
+        padRight: padRight
+      });
+      newDecorationSet = newDecorationSet.add(state.doc, [newDecoration]);
+    }
+  });
+  return newDecorationSet;
+};

package/dist/cjs/pm-plugins/highlight-padding/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightPaddingPluginKey = exports.createHighlightPaddingPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _addPaddingDecorations = require("./add-padding-decorations");
+var _updatePaddingDecorations = require("./update-padding-decorations");
+var highlightPaddingPluginKey = exports.highlightPaddingPluginKey = new _state.PluginKey('highlightPaddingPluginKey');
+
+/**
+ * Plugin to add padding decorations around highlighted text.
+ *
+ * Padding is added to the left and/or right of highlighted text
+ * only when it is at the start or end of a block, or when it is adjacent
+ * to whitespace.
+ */
+var createHighlightPaddingPlugin = exports.createHighlightPaddingPlugin = function createHighlightPaddingPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: highlightPaddingPluginKey,
+    state: {
+      init: function init(_, state) {
+        // Initially scan the entire doc to create all highlight padding decorations
+        // after which updates will only apply to changed ranges
+        var initialDecorationSet = _view.DecorationSet.empty;
+        var decorationSet = (0, _addPaddingDecorations.addPaddingDecorations)({
+          decorationSet: initialDecorationSet,
+          state: state,
+          from: 0,
+          to: state.doc.content.size
+        });
+        return {
+          decorationSet: decorationSet
+        };
+      },
+      apply: function apply(tr, pluginState, _oldState, state) {
+        if (!tr.docChanged) {
+          return pluginState;
+        }
+        var decorationSet = pluginState.decorationSet.map(tr.mapping, tr.doc);
+        tr.mapping.maps.forEach(function (stepMap) {
+          stepMap.forEach(function (_oldStart, _oldEnd, start, end) {
+            decorationSet = (0, _updatePaddingDecorations.updatePaddingDecorations)({
+              decorationSet: decorationSet,
+              state: state,
+              start: start,
+              end: end
+            });
+          });
+        });
+        return {
+          decorationSet: decorationSet
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return highlightPaddingPluginKey.getState(state).decorationSet;
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/highlight-padding/update-padding-decorations.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updatePaddingDecorations = void 0;
+var _addPaddingDecorations = require("./add-padding-decorations");
+/**
+ * Updates padding decorations in the specified range.
+ */
+var updatePaddingDecorations = exports.updatePaddingDecorations = function updatePaddingDecorations(_ref) {
+  var prevDecorationSet = _ref.decorationSet,
+    state = _ref.state,
+    start = _ref.start,
+    end = _ref.end;
+  // First remove any decorations within the range
+  // Note that it finds all decorations in the set which touch the given range (including decorations that start or end directly at the boundaries)
+  var toRemove = prevDecorationSet.find(start, end);
+  var decorationSet = prevDecorationSet.remove(toRemove);
+
+  // Expand the range by 1 on each side to catch adjacent text nodes
+  // that may need padding decorations added/removed
+  var from = Math.max(0, start - 1);
+  var to = Math.min(state.doc.content.size, end + 1);
+  return (0, _addPaddingDecorations.addPaddingDecorations)({
+    decorationSet: decorationSet,
+    state: state,
+    from: from,
+    to: to
+  });
+};

package/dist/cjs/pm-plugins/highlight-padding/utils.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldPadRight = exports.shouldPadLeft = exports.isHighlightedTextNode = void 0;
+var isHighlightedTextNode = exports.isHighlightedTextNode = function isHighlightedTextNode(node) {
+  return node.isText && node.marks.some(function (mark) {
+    return mark.type.name === 'backgroundColor';
+  });
+};
+var shouldPadLeft = exports.shouldPadLeft = function shouldPadLeft(_ref) {
+  var state = _ref.state,
+    nodeStart = _ref.nodeStart;
+  var $pos = state.doc.resolve(nodeStart);
+  var isAtBlockStart = $pos.parentOffset === 0;
+  if (isAtBlockStart) {
+    return true;
+  }
+  var isAtDocStart = nodeStart === 0;
+  if (isAtDocStart) {
+    return true;
+  }
+  var isPrevCharSpace = state.doc.textBetween(nodeStart - 1, nodeStart) === ' ';
+  if (isPrevCharSpace) {
+    return true;
+  }
+  return false;
+};
+var shouldPadRight = exports.shouldPadRight = function shouldPadRight(_ref2) {
+  var state = _ref2.state,
+    nodeEnd = _ref2.nodeEnd;
+  var $pos = state.doc.resolve(nodeEnd);
+  var isAtBlockEnd = $pos.parentOffset === $pos.parent.content.size;
+  if (isAtBlockEnd) {
+    return true;
+  }
+  var isAtDocEnd = nodeEnd === state.doc.content.size;
+  if (isAtDocEnd) {
+    return true;
+  }
+  var isNextCharSpace = state.doc.textBetween(nodeEnd, nodeEnd + 1) === ' ';
+  if (isNextCharSpace) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/ui/HighlightColorMenuItem.js

@@ -1,4 +1,4 @@
-/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/highlightPlugin.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor } from './editor-commands/change-color';
+import { createHighlightPaddingPlugin } from './pm-plugins/highlight-padding';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
 import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
@@ -59,17 +61,26 @@ export const highlightPlugin = ({
     commands: {
       changeColor: changeColor(editorAnalyticsAPI)
     },
-    pmPlugins: () => [{
-      name: 'highlight',
-      plugin: () => createPlugin({
-        api
-      })
-    }, {
-      name: 'highlightKeymap',
-      plugin: () => keymapPlugin({
-        api
-      })
-    }],
+    pmPlugins: () => {
+      const plugins = [{
+        name: 'highlight',
+        plugin: () => createPlugin({
+          api
+        })
+      }, {
+        name: 'highlightKeymap',
+        plugin: () => keymapPlugin({
+          api
+        })
+      }];
+      if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+        plugins.push({
+          name: 'highlightPadding',
+          plugin: () => createHighlightPaddingPlugin()
+        });
+      }
+      return plugins;
+    },
     getSharedState(editorState) {
       if (!editorState) {
         return;

package/dist/es2019/pm-plugins/highlight-padding/add-padding-decorations.js

@@ -0,0 +1,59 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isHighlightedTextNode, shouldPadLeft, shouldPadRight } from './utils';
+const createPaddingDecoration = ({
+  pos,
+  node,
+  padLeft,
+  padRight
+}) => {
+  const classes = [];
+  const baseClass = 'background-color';
+  const padLeftClass = `${baseClass}-padding-left`;
+  const padRightClass = `${baseClass}-padding-right`;
+  if (padLeft) {
+    classes.push(padLeftClass);
+  }
+  if (padRight) {
+    classes.push(padRightClass);
+  }
+  return Decoration.inline(pos, pos + node.nodeSize, {
+    class: classes.join(' ')
+  });
+};
+/**
+ * Adds padding decorations to highlighted text
+ * within the specified range.
+ */
+export const addPaddingDecorations = ({
+  decorationSet,
+  state,
+  from,
+  to
+}) => {
+  let newDecorationSet = decorationSet;
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    if (!isHighlightedTextNode(node)) {
+      return;
+    }
+    const nodeStart = pos;
+    const nodeEnd = pos + node.nodeSize;
+    const padLeft = shouldPadLeft({
+      state,
+      nodeStart
+    });
+    const padRight = shouldPadRight({
+      state,
+      nodeEnd
+    });
+    if (padLeft && padRight) {
+      const newDecoration = createPaddingDecoration({
+        pos: nodeStart,
+        node,
+        padLeft,
+        padRight
+      });
+      newDecorationSet = newDecorationSet.add(state.doc, [newDecoration]);
+    }
+  });
+  return newDecorationSet;
+};

package/dist/es2019/pm-plugins/highlight-padding/index.js

@@ -0,0 +1,59 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { addPaddingDecorations } from './add-padding-decorations';
+import { updatePaddingDecorations } from './update-padding-decorations';
+export const highlightPaddingPluginKey = new PluginKey('highlightPaddingPluginKey');
+
+/**
+ * Plugin to add padding decorations around highlighted text.
+ *
+ * Padding is added to the left and/or right of highlighted text
+ * only when it is at the start or end of a block, or when it is adjacent
+ * to whitespace.
+ */
+export const createHighlightPaddingPlugin = () => {
+  return new SafePlugin({
+    key: highlightPaddingPluginKey,
+    state: {
+      init: (_, state) => {
+        // Initially scan the entire doc to create all highlight padding decorations
+        // after which updates will only apply to changed ranges
+        const initialDecorationSet = DecorationSet.empty;
+        const decorationSet = addPaddingDecorations({
+          decorationSet: initialDecorationSet,
+          state,
+          from: 0,
+          to: state.doc.content.size
+        });
+        return {
+          decorationSet
+        };
+      },
+      apply: (tr, pluginState, _oldState, state) => {
+        if (!tr.docChanged) {
+          return pluginState;
+        }
+        let decorationSet = pluginState.decorationSet.map(tr.mapping, tr.doc);
+        tr.mapping.maps.forEach(stepMap => {
+          stepMap.forEach((_oldStart, _oldEnd, start, end) => {
+            decorationSet = updatePaddingDecorations({
+              decorationSet,
+              state,
+              start,
+              end
+            });
+          });
+        });
+        return {
+          decorationSet
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        return highlightPaddingPluginKey.getState(state).decorationSet;
+      }
+    }
+  });
+};

package/dist/es2019/pm-plugins/highlight-padding/update-padding-decorations.js

@@ -0,0 +1,26 @@
+import { addPaddingDecorations } from './add-padding-decorations';
+/**
+ * Updates padding decorations in the specified range.
+ */
+export const updatePaddingDecorations = ({
+  decorationSet: prevDecorationSet,
+  state,
+  start,
+  end
+}) => {
+  // First remove any decorations within the range
+  // Note that it finds all decorations in the set which touch the given range (including decorations that start or end directly at the boundaries)
+  const toRemove = prevDecorationSet.find(start, end);
+  const decorationSet = prevDecorationSet.remove(toRemove);
+
+  // Expand the range by 1 on each side to catch adjacent text nodes
+  // that may need padding decorations added/removed
+  const from = Math.max(0, start - 1);
+  const to = Math.min(state.doc.content.size, end + 1);
+  return addPaddingDecorations({
+    decorationSet,
+    state,
+    from,
+    to
+  });
+};

package/dist/es2019/pm-plugins/highlight-padding/utils.js

@@ -0,0 +1,41 @@
+export const isHighlightedTextNode = node => {
+  return node.isText && node.marks.some(mark => mark.type.name === 'backgroundColor');
+};
+export const shouldPadLeft = ({
+  state,
+  nodeStart
+}) => {
+  const $pos = state.doc.resolve(nodeStart);
+  const isAtBlockStart = $pos.parentOffset === 0;
+  if (isAtBlockStart) {
+    return true;
+  }
+  const isAtDocStart = nodeStart === 0;
+  if (isAtDocStart) {
+    return true;
+  }
+  const isPrevCharSpace = state.doc.textBetween(nodeStart - 1, nodeStart) === ' ';
+  if (isPrevCharSpace) {
+    return true;
+  }
+  return false;
+};
+export const shouldPadRight = ({
+  state,
+  nodeEnd
+}) => {
+  const $pos = state.doc.resolve(nodeEnd);
+  const isAtBlockEnd = $pos.parentOffset === $pos.parent.content.size;
+  if (isAtBlockEnd) {
+    return true;
+  }
+  const isAtDocEnd = nodeEnd === state.doc.content.size;
+  if (isAtDocEnd) {
+    return true;
+  }
+  const isNextCharSpace = state.doc.textBetween(nodeEnd, nodeEnd + 1) === ' ';
+  if (isNextCharSpace) {
+    return true;
+  }
+  return false;
+};

package/dist/es2019/ui/HighlightColorMenuItem.js

@@ -1,4 +1,4 @@
-/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./HighlightColorMenuItem.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/highlightPlugin.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor } from './editor-commands/change-color';
+import { createHighlightPaddingPlugin } from './pm-plugins/highlight-padding';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
 import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
@@ -58,7 +60,7 @@ export var highlightPlugin = function highlightPlugin(_ref) {
       changeColor: changeColor(editorAnalyticsAPI)
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'highlight',
         plugin: function plugin() {
           return createPlugin({
@@ -73,6 +75,15 @@ export var highlightPlugin = function highlightPlugin(_ref) {
           });
         }
       }];
+      if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+        plugins.push({
+          name: 'highlightPadding',
+          plugin: function plugin() {
+            return createHighlightPaddingPlugin();
+          }
+        });
+      }
+      return plugins;
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/esm/pm-plugins/highlight-padding/add-padding-decorations.js

@@ -0,0 +1,57 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isHighlightedTextNode, shouldPadLeft, shouldPadRight } from './utils';
+var createPaddingDecoration = function createPaddingDecoration(_ref) {
+  var pos = _ref.pos,
+    node = _ref.node,
+    padLeft = _ref.padLeft,
+    padRight = _ref.padRight;
+  var classes = [];
+  var baseClass = 'background-color';
+  var padLeftClass = "".concat(baseClass, "-padding-left");
+  var padRightClass = "".concat(baseClass, "-padding-right");
+  if (padLeft) {
+    classes.push(padLeftClass);
+  }
+  if (padRight) {
+    classes.push(padRightClass);
+  }
+  return Decoration.inline(pos, pos + node.nodeSize, {
+    class: classes.join(' ')
+  });
+};
+/**
+ * Adds padding decorations to highlighted text
+ * within the specified range.
+ */
+export var addPaddingDecorations = function addPaddingDecorations(_ref2) {
+  var decorationSet = _ref2.decorationSet,
+    state = _ref2.state,
+    from = _ref2.from,
+    to = _ref2.to;
+  var newDecorationSet = decorationSet;
+  state.doc.nodesBetween(from, to, function (node, pos) {
+    if (!isHighlightedTextNode(node)) {
+      return;
+    }
+    var nodeStart = pos;
+    var nodeEnd = pos + node.nodeSize;
+    var padLeft = shouldPadLeft({
+      state: state,
+      nodeStart: nodeStart
+    });
+    var padRight = shouldPadRight({
+      state: state,
+      nodeEnd: nodeEnd
+    });
+    if (padLeft && padRight) {
+      var newDecoration = createPaddingDecoration({
+        pos: nodeStart,
+        node: node,
+        padLeft: padLeft,
+        padRight: padRight
+      });
+      newDecorationSet = newDecorationSet.add(state.doc, [newDecoration]);
+    }
+  });
+  return newDecorationSet;
+};

package/dist/esm/pm-plugins/highlight-padding/index.js

@@ -0,0 +1,59 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { addPaddingDecorations } from './add-padding-decorations';
+import { updatePaddingDecorations } from './update-padding-decorations';
+export var highlightPaddingPluginKey = new PluginKey('highlightPaddingPluginKey');
+
+/**
+ * Plugin to add padding decorations around highlighted text.
+ *
+ * Padding is added to the left and/or right of highlighted text
+ * only when it is at the start or end of a block, or when it is adjacent
+ * to whitespace.
+ */
+export var createHighlightPaddingPlugin = function createHighlightPaddingPlugin() {
+  return new SafePlugin({
+    key: highlightPaddingPluginKey,
+    state: {
+      init: function init(_, state) {
+        // Initially scan the entire doc to create all highlight padding decorations
+        // after which updates will only apply to changed ranges
+        var initialDecorationSet = DecorationSet.empty;
+        var decorationSet = addPaddingDecorations({
+          decorationSet: initialDecorationSet,
+          state: state,
+          from: 0,
+          to: state.doc.content.size
+        });
+        return {
+          decorationSet: decorationSet
+        };
+      },
+      apply: function apply(tr, pluginState, _oldState, state) {
+        if (!tr.docChanged) {
+          return pluginState;
+        }
+        var decorationSet = pluginState.decorationSet.map(tr.mapping, tr.doc);
+        tr.mapping.maps.forEach(function (stepMap) {
+          stepMap.forEach(function (_oldStart, _oldEnd, start, end) {
+            decorationSet = updatePaddingDecorations({
+              decorationSet: decorationSet,
+              state: state,
+              start: start,
+              end: end
+            });
+          });
+        });
+        return {
+          decorationSet: decorationSet
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return highlightPaddingPluginKey.getState(state).decorationSet;
+      }
+    }
+  });
+};

package/dist/esm/pm-plugins/highlight-padding/update-padding-decorations.js

@@ -0,0 +1,25 @@
+import { addPaddingDecorations } from './add-padding-decorations';
+/**
+ * Updates padding decorations in the specified range.
+ */
+export var updatePaddingDecorations = function updatePaddingDecorations(_ref) {
+  var prevDecorationSet = _ref.decorationSet,
+    state = _ref.state,
+    start = _ref.start,
+    end = _ref.end;
+  // First remove any decorations within the range
+  // Note that it finds all decorations in the set which touch the given range (including decorations that start or end directly at the boundaries)
+  var toRemove = prevDecorationSet.find(start, end);
+  var decorationSet = prevDecorationSet.remove(toRemove);
+
+  // Expand the range by 1 on each side to catch adjacent text nodes
+  // that may need padding decorations added/removed
+  var from = Math.max(0, start - 1);
+  var to = Math.min(state.doc.content.size, end + 1);
+  return addPaddingDecorations({
+    decorationSet: decorationSet,
+    state: state,
+    from: from,
+    to: to
+  });
+};

package/dist/esm/pm-plugins/highlight-padding/utils.js

@@ -0,0 +1,41 @@
+export var isHighlightedTextNode = function isHighlightedTextNode(node) {
+  return node.isText && node.marks.some(function (mark) {
+    return mark.type.name === 'backgroundColor';
+  });
+};
+export var shouldPadLeft = function shouldPadLeft(_ref) {
+  var state = _ref.state,
+    nodeStart = _ref.nodeStart;
+  var $pos = state.doc.resolve(nodeStart);
+  var isAtBlockStart = $pos.parentOffset === 0;
+  if (isAtBlockStart) {
+    return true;
+  }
+  var isAtDocStart = nodeStart === 0;
+  if (isAtDocStart) {
+    return true;
+  }
+  var isPrevCharSpace = state.doc.textBetween(nodeStart - 1, nodeStart) === ' ';
+  if (isPrevCharSpace) {
+    return true;
+  }
+  return false;
+};
+export var shouldPadRight = function shouldPadRight(_ref2) {
+  var state = _ref2.state,
+    nodeEnd = _ref2.nodeEnd;
+  var $pos = state.doc.resolve(nodeEnd);
+  var isAtBlockEnd = $pos.parentOffset === $pos.parent.content.size;
+  if (isAtBlockEnd) {
+    return true;
+  }
+  var isAtDocEnd = nodeEnd === state.doc.content.size;
+  if (isAtDocEnd) {
+    return true;
+  }
+  var isNextCharSpace = state.doc.textBetween(nodeEnd, nodeEnd + 1) === ' ';
+  if (isNextCharSpace) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/ui/HighlightColorMenuItem.js

@@ -1,4 +1,4 @@
-/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./HighlightColorMenuItem.compiled.css";
 import * as React from 'react';

package/dist/types/pm-plugins/highlight-padding/add-padding-decorations.d.ts

@@ -0,0 +1,14 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type AddPaddingDecorationsOptions = {
+    decorationSet: DecorationSet;
+    from: number;
+    state: EditorState;
+    to: number;
+};
+/**
+ * Adds padding decorations to highlighted text
+ * within the specified range.
+ */
+export declare const addPaddingDecorations: ({ decorationSet, state, from, to, }: AddPaddingDecorationsOptions) => DecorationSet;
+export {};

package/dist/types/pm-plugins/highlight-padding/index.d.ts

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type HighlightPaddingPluginState = {
+    decorationSet: DecorationSet;
+};
+export declare const highlightPaddingPluginKey: PluginKey<any>;
+/**
+ * Plugin to add padding decorations around highlighted text.
+ *
+ * Padding is added to the left and/or right of highlighted text
+ * only when it is at the start or end of a block, or when it is adjacent
+ * to whitespace.
+ */
+export declare const createHighlightPaddingPlugin: () => SafePlugin<HighlightPaddingPluginState>;
+export {};

package/dist/types/pm-plugins/highlight-padding/update-padding-decorations.d.ts

@@ -0,0 +1,13 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type UpdatePaddingDecorationsOptions = {
+    decorationSet: DecorationSet;
+    end: number;
+    start: number;
+    state: EditorState;
+};
+/**
+ * Updates padding decorations in the specified range.
+ */
+export declare const updatePaddingDecorations: ({ decorationSet: prevDecorationSet, state, start, end, }: UpdatePaddingDecorationsOptions) => DecorationSet;
+export {};

package/dist/types/pm-plugins/highlight-padding/utils.d.ts

@@ -0,0 +1,14 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const isHighlightedTextNode: (node: PMNode) => boolean;
+type ShouldPadLeftOptions = {
+    nodeStart: number;
+    state: EditorState;
+};
+export declare const shouldPadLeft: ({ state, nodeStart }: ShouldPadLeftOptions) => boolean;
+type ShouldPadRightOptions = {
+    nodeEnd: number;
+    state: EditorState;
+};
+export declare const shouldPadRight: ({ state, nodeEnd }: ShouldPadRightOptions) => boolean;
+export {};

package/dist/types-ts4.5/pm-plugins/highlight-padding/add-padding-decorations.d.ts

@@ -0,0 +1,14 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type AddPaddingDecorationsOptions = {
+    decorationSet: DecorationSet;
+    from: number;
+    state: EditorState;
+    to: number;
+};
+/**
+ * Adds padding decorations to highlighted text
+ * within the specified range.
+ */
+export declare const addPaddingDecorations: ({ decorationSet, state, from, to, }: AddPaddingDecorationsOptions) => DecorationSet;
+export {};

package/dist/types-ts4.5/pm-plugins/highlight-padding/index.d.ts

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type HighlightPaddingPluginState = {
+    decorationSet: DecorationSet;
+};
+export declare const highlightPaddingPluginKey: PluginKey<any>;
+/**
+ * Plugin to add padding decorations around highlighted text.
+ *
+ * Padding is added to the left and/or right of highlighted text
+ * only when it is at the start or end of a block, or when it is adjacent
+ * to whitespace.
+ */
+export declare const createHighlightPaddingPlugin: () => SafePlugin<HighlightPaddingPluginState>;
+export {};

package/dist/types-ts4.5/pm-plugins/highlight-padding/update-padding-decorations.d.ts

@@ -0,0 +1,13 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type UpdatePaddingDecorationsOptions = {
+    decorationSet: DecorationSet;
+    end: number;
+    start: number;
+    state: EditorState;
+};
+/**
+ * Updates padding decorations in the specified range.
+ */
+export declare const updatePaddingDecorations: ({ decorationSet: prevDecorationSet, state, start, end, }: UpdatePaddingDecorationsOptions) => DecorationSet;
+export {};

package/dist/types-ts4.5/pm-plugins/highlight-padding/utils.d.ts

@@ -0,0 +1,14 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const isHighlightedTextNode: (node: PMNode) => boolean;
+type ShouldPadLeftOptions = {
+    nodeStart: number;
+    state: EditorState;
+};
+export declare const shouldPadLeft: ({ state, nodeStart }: ShouldPadLeftOptions) => boolean;
+type ShouldPadRightOptions = {
+    nodeEnd: number;
+    state: EditorState;
+};
+export declare const shouldPadRight: ({ state, nodeEnd }: ShouldPadRightOptions) => boolean;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "5.3.0",
+	"version": "5.3.2",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,19 +44,19 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.8.0",
+		"@atlaskit/editor-toolbar": "^0.9.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/tmp-editor-statsig": "^12.18.0",
+		"@atlaskit/primitives": "^14.15.0",
+		"@atlaskit/tmp-editor-statsig": "^12.28.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.5.0",
+		"@atlaskit/editor-common": "^109.11.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},