@atlaskit/editor-core 181.0.0 → 182.0.0

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -5,7 +5,6 @@ import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
 import { INPUT_METHOD } from '../../../analytics/types';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';
-import { getFeatureFlags } from '../../../feature-flags-context';
 import { EditorLinkPicker } from '../EditorLinkPicker';
 /**
  * Wraps around the editor's onSubmit handler so that the plugin can interface with the link picker
@@ -29,7 +28,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
       providerFactory,
       view,
       onCancel,
-      invokeMethod
+      invokeMethod,
+      featureFlags
     } = this.props;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['activityProvider', 'searchProvider'],
@@ -47,7 +47,7 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
         }) => {
           const {
             lpLinkPicker
-          } = getFeatureFlags(view.state);
+          } = featureFlags;
           if (lpLinkPicker) {
             return /*#__PURE__*/React.createElement(EditorLinkPicker, _extends({
               view: view,

package/dist/es2019/plugins/index.js

@@ -64,4 +64,5 @@ export { default as avatarGroupPlugin } from './avatar-group';
 export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
 export { default as beforePrimaryToolbarPlugin } from './before-primaryToolbar';
 export { default as codeBidiWarningPlugin } from './code-bidi-warning';
-export { default as copyButtonPlugin } from './copy-button';
+export { default as copyButtonPlugin } from './copy-button';
+export { default as borderPlugin } from './border';

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -470,7 +470,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       offset: [0, 3],
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
-      scrollableElement: popupsScrollableElement
+      scrollableElement: popupsScrollableElement,
+      focusTrap: true
     }, jsx(EmojiPickerWithListeners, {
       emojiProvider: emojiProvider,
       onSelection: this.handleSelectedEmoji,

package/dist/es2019/plugins/list/actions/outdent-list-items-selected.js

@@ -6,10 +6,9 @@ import { isListNode, isListItemNode, joinSiblingLists, JoinDirection } from '../
 import { findFirstParentListItemNode, findRootParentListNode } from '../utils/find';
 import { normalizeListItemsSelection, createListNodeRange } from '../utils/selection';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
-import { getFeatureFlags } from '../../feature-flags-context';
 import { storeRestartListsAttributes, getRestartListsAttributes } from '../utils/analytics';
 import { OUTDENT_SCENARIOS } from '@atlaskit/editor-common/analytics';
-export const outdentListItemsSelected = (tr, state) => {
+export const outdentListItemsSelected = (tr, state, featureFlags) => {
   const originalSelection = tr.selection;
   const normalizedSelection = normalizeListItemsSelection({
     selection: tr.selection,
@@ -46,7 +45,8 @@ export const outdentListItemsSelected = (tr, state) => {
       extractListItemsRangeFromList({
         tr,
         range: mappedRange,
-        state
+        state,
+        featureFlags
       });
       hasNormalizedToPositionLiftedOut = hasNormalizedToPositionLiftedOut || oldTo >= range.from && oldTo < range.to;
       hasNormalizedFromPositionLiftedOut = hasNormalizedFromPositionLiftedOut || oldFrom >= range.from && oldFrom < range.to;
@@ -177,7 +177,8 @@ const outdentRangeToParentList = ({
 const extractListItemsRangeFromList = ({
   tr,
   range,
-  state
+  state,
+  featureFlags
 }) => {
   const list = range.parent;
   const $start = tr.doc.resolve(range.start);
@@ -200,7 +201,6 @@ const extractListItemsRangeFromList = ({
     }
   }
   let nextList = list.copy(Fragment.empty);
-  const featureFlags = getFeatureFlags(state);
   let nextListStartNumber;
   if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
     // if splitting a numbered list, keep the splitted item

package/dist/es2019/plugins/list/commands/index.js

@@ -18,7 +18,7 @@ import { outdentList } from './outdent-list';
 import { indentList } from './indent-list';
 import { moveTargetIntoList } from '../utils/replace-content';
 export { outdentList, indentList };
-export const enterKeyCommand = (state, dispatch) => {
+export const enterKeyCommand = featureFlags => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -35,7 +35,7 @@ export const enterKeyCommand = (state, dispatch) => {
       /** Check if the wrapper has any visible content */
       const wrapperHasContent = hasVisibleContent(wrapper);
       if (!wrapperHasContent) {
-        return outdentList(INPUT_METHOD.KEYBOARD)(state, dispatch);
+        return outdentList(INPUT_METHOD.KEYBOARD, featureFlags)(state, dispatch);
       } else if (!hasParentNodeOfType(codeBlock)(selection)) {
         return splitListItem(listItem)(state, dispatch);
       }
@@ -43,13 +43,13 @@ export const enterKeyCommand = (state, dispatch) => {
   }
   return false;
 };
-export const backspaceKeyCommand = (state, dispatch) => {
+export const backspaceKeyCommand = featureFlags => (state, dispatch) => {
   return baseCommand.chainCommands(listBackspace,
   // if we're at the start of a list item, we need to either backspace
   // directly to an empty list item above, or outdent this node
   filter([isEmptySelectionAtStart,
   // list items might have multiple paragraphs; only do this at the first one
-  isFirstChildOfParent, isInsideListItem], baseCommand.chainCommands(deletePreviousEmptyListItem, outdentList(INPUT_METHOD.KEYBOARD))),
+  isFirstChildOfParent, isInsideListItem], baseCommand.chainCommands(deletePreviousEmptyListItem, outdentList(INPUT_METHOD.KEYBOARD, featureFlags))),
   // if we're just inside a paragraph node (or gapcursor is shown) and backspace, then try to join
   // the text to the previous list item, if one exists
   filter([isEmptySelectionAtStart, canJoinToPreviousListItem], joinToPreviousListItem))(state, dispatch);

package/dist/es2019/plugins/list/commands/outdent-list.js

@@ -6,8 +6,7 @@ import { findFirstParentListNode } from '../utils/find';
 import { getCommonListAnalyticsAttributes, getRestartListsAttributes } from '../utils/analytics';
 import { outdentListItemsSelected as outdentListAction } from '../actions/outdent-list-items-selected';
 import { closeHistory } from 'prosemirror-history';
-import { getFeatureFlags } from '../../feature-flags-context';
-export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
+export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD, featureFlags) {
   return function (state, dispatch) {
     if (!isInsideListItem(state)) {
       return false;
@@ -25,13 +24,12 @@ export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
     closeHistory(state.tr);
     const actionSubjectId = isBulletList(parentListNode.node) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     let customTr = state.tr;
-    outdentListAction(customTr, state);
+    outdentListAction(customTr, state, featureFlags);
     if (!customTr || !customTr.docChanged) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
       // If inside table cell and can't outdent list, then let it handle by table keymap
       return !isInsideTableCell(state);
     }
-    const featureFlags = getFeatureFlags(state);
     const restartListsAttributes = {};
     if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
       const {

package/dist/es2019/plugins/list/index.js

@@ -11,81 +11,84 @@ import { IconList, IconListNumber } from '../quick-insert/assets';
   Toolbar buttons to bullet and ordered list can be found in
   packages/editor/editor-core/src/plugins/toolbar-lists-indentation/ui/Toolbar.tsx
  */
-const listPlugin = options => ({
-  name: 'list',
-  nodes() {
-    return [{
-      name: 'bulletList',
-      node: bulletList
-    }, {
-      name: 'orderedList',
-      node: options !== null && options !== void 0 && options.restartNumberedLists ? orderedListWithOrder : orderedList
-    }, {
-      name: 'listItem',
-      node: listItem
-    }];
-  },
-  pmPlugins() {
-    return [{
-      name: 'list',
-      plugin: ({
-        dispatch
-      }) => createPlugin(dispatch)
-    }, {
-      name: 'listInputRule',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => inputRulePlugin(schema, featureFlags)
-    }, {
-      name: 'listKeymap',
-      plugin: () => keymapPlugin()
-    }];
-  },
-  pluginsOptions: {
-    quickInsert: ({
-      formatMessage
-    }) => [{
-      id: 'unorderedList',
-      title: formatMessage(messages.unorderedList),
-      description: formatMessage(messages.unorderedListDescription),
-      keywords: ['ul', 'unordered'],
-      priority: 1100,
-      keyshortcut: tooltip(toggleBulletList),
-      icon: () => /*#__PURE__*/React.createElement(IconList, null),
-      action(insert, state) {
-        const tr = insert(state.schema.nodes.bulletList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
-        return addAnalytics(state, tr, {
-          action: ACTION.INSERTED,
-          actionSubject: ACTION_SUBJECT.LIST,
-          actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_BULLET,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            inputMethod: INPUT_METHOD.QUICK_INSERT
-          }
-        });
-      }
-    }, {
-      id: 'orderedList',
-      title: formatMessage(messages.orderedList),
-      description: formatMessage(messages.orderedListDescription),
-      keywords: ['ol', 'ordered'],
-      priority: 1200,
-      keyshortcut: tooltip(toggleOrderedList),
-      icon: () => /*#__PURE__*/React.createElement(IconListNumber, null),
-      action(insert, state) {
-        const tr = insert(state.schema.nodes.orderedList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
-        return addAnalytics(state, tr, {
-          action: ACTION.INSERTED,
-          actionSubject: ACTION_SUBJECT.LIST,
-          actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            inputMethod: INPUT_METHOD.QUICK_INSERT
-          }
-        });
-      }
-    }]
-  }
-});
+const listPlugin = (options, api) => {
+  const featureFlags = (api === null || api === void 0 ? void 0 : api.dependencies.featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'list',
+    nodes() {
+      return [{
+        name: 'bulletList',
+        node: bulletList
+      }, {
+        name: 'orderedList',
+        node: options !== null && options !== void 0 && options.restartNumberedLists ? orderedListWithOrder : orderedList
+      }, {
+        name: 'listItem',
+        node: listItem
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'list',
+        plugin: ({
+          dispatch
+        }) => createPlugin(dispatch, featureFlags)
+      }, {
+        name: 'listInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => inputRulePlugin(schema, featureFlags)
+      }, {
+        name: 'listKeymap',
+        plugin: () => keymapPlugin(featureFlags)
+      }];
+    },
+    pluginsOptions: {
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'unorderedList',
+        title: formatMessage(messages.unorderedList),
+        description: formatMessage(messages.unorderedListDescription),
+        keywords: ['ul', 'unordered'],
+        priority: 1100,
+        keyshortcut: tooltip(toggleBulletList),
+        icon: () => /*#__PURE__*/React.createElement(IconList, null),
+        action(insert, state) {
+          const tr = insert(state.schema.nodes.bulletList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
+          return addAnalytics(state, tr, {
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.LIST,
+            actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_BULLET,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            }
+          });
+        }
+      }, {
+        id: 'orderedList',
+        title: formatMessage(messages.orderedList),
+        description: formatMessage(messages.orderedListDescription),
+        keywords: ['ol', 'ordered'],
+        priority: 1200,
+        keyshortcut: tooltip(toggleOrderedList),
+        icon: () => /*#__PURE__*/React.createElement(IconListNumber, null),
+        action(insert, state) {
+          const tr = insert(state.schema.nodes.orderedList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
+          return addAnalytics(state, tr, {
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.LIST,
+            actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            }
+          });
+        }
+      }]
+    }
+  };
+};
 export default listPlugin;

package/dist/es2019/plugins/list/pm-plugins/input-rules/create-list-input-rule.js

@@ -1,4 +1,5 @@
-import { ruleWithAnalytics, createWrappingJoinRule } from '../../../../utils/input-rules';
+import { ruleWithAnalytics } from '../../../../utils/input-rules';
+import { createWrappingJoinRule } from './wrapping-join-rule';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
 import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '@atlaskit/editor-common/analytics';
 const getOrder = matchResult => Number(matchResult[1]);
@@ -44,6 +45,7 @@ export function createRuleForListType({
     };
   }
   const inputRule = createWrappingJoinRule({
+    featureFlags,
     match: expression,
     nodeType: listType,
     getAttrs,

package/dist/es2019/plugins/list/pm-plugins/input-rules/index.js

@@ -14,7 +14,8 @@ export default function inputRulePlugin(schema, featureFlags) {
       // because of issue where product converted the
       // character into an escaped version.
       expression: /^\s*([\*\-\u2022]) $/,
-      listType: bulletList
+      listType: bulletList,
+      featureFlags
     }));
   }
   const expression = featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists ? /((^[1-9]{1}[0-9]{0,2})|^(0))[\.\)] $/ : /^(1)[\.\)] $/;

package/dist/es2019/plugins/list/pm-plugins/input-rules/wrapping-join-rule.js

@@ -0,0 +1,52 @@
+import { canJoin, findWrapping } from 'prosemirror-transform';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '@atlaskit/editor-common/analytics';
+import { createRule } from '../../../../utils/input-rules';
+export const createWrappingJoinRule = ({
+  match,
+  nodeType,
+  getAttrs,
+  joinPredicate,
+  featureFlags
+}) => {
+  const handler = (state, match, start, end) => {
+    const attrs = (getAttrs instanceof Function ? getAttrs(match) : getAttrs) || {};
+    const tr = state.tr;
+    const fixedStart = Math.max(start, 1);
+    tr.delete(fixedStart, end);
+    const $start = tr.doc.resolve(fixedStart);
+    const range = $start.blockRange();
+    const wrapping = range && findWrapping(range, nodeType, attrs);
+    if (!wrapping || !range) {
+      return null;
+    }
+    const parentNodePosMapped = tr.mapping.map(range.start);
+    const parentNode = tr.doc.nodeAt(parentNodePosMapped);
+    const lastWrap = wrapping[wrapping.length - 1];
+    if (parentNode && lastWrap) {
+      const allowedMarks = lastWrap.type.allowedMarks(parentNode.marks) || [];
+      tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
+    }
+    tr.wrap(range, wrapping);
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      const $end = tr.doc.resolve(tr.mapping.map(end));
+      const node = findParentNodeOfTypeClosestToPos($end, nodeType);
+      if (node) {
+        const nodeEnd = node.pos + node.node.nodeSize;
+        const after = tr.doc.resolve(nodeEnd).nodeAfter;
+        if (after && after.type === nodeType && canJoin(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_BELOW))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+    const before = tr.doc.resolve(fixedStart - 1).nodeBefore;
+    if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
+      tr.join(fixedStart - 1);
+    }
+    return tr;
+  };
+  return createRule(match, handler);
+};

package/dist/es2019/plugins/list/pm-plugins/keymap.js

@@ -3,14 +3,14 @@ import * as keymaps from '../../../keymaps';
 import { indentList, enterKeyCommand, toggleList, backspaceKeyCommand, deleteKeyCommand } from '../commands';
 import { outdentList } from '../commands/outdent-list';
 import { INPUT_METHOD } from '../../analytics';
-export function keymapPlugin() {
+export function keymapPlugin(featureFlags) {
   const list = {};
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleOrderedList), toggleList(INPUT_METHOD.KEYBOARD, 'orderedList'), list);
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBulletList), toggleList(INPUT_METHOD.KEYBOARD, 'bulletList'), list);
   keymaps.bindKeymapWithCommand(keymaps.indentList.common, indentList(INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, outdentList(INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.enter.common, enterKeyCommand, list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspaceKeyCommand, list);
+  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, outdentList(INPUT_METHOD.KEYBOARD, featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.enter.common, enterKeyCommand(featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspaceKeyCommand(featureFlags), list);
   keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, deleteKeyCommand, list);
 
   // This shortcut is Mac only

package/dist/es2019/plugins/list/pm-plugins/main.js

@@ -9,7 +9,6 @@ import { setGapCursorSelection } from '../../../utils';
 import { Side } from '../../selection/gap-cursor-selection';
 import { listItemCounterPadding, CodeBlockSharedCssClassName, getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
 import { getItemCounterDigitsSize } from '@atlaskit/editor-common/utils';
-import { getFeatureFlags } from '../../feature-flags-context';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
 const initialState = {
@@ -19,9 +18,8 @@ const initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
-export const getDecorations = (doc, state) => {
+export const getDecorations = (doc, state, featureFlags) => {
   const decorations = [];
-  const featureFlags = getFeatureFlags(state);
 
   // this stack keeps track of each (nested) list to calculate the indentation level
   const processedListsStack = [];
@@ -74,9 +72,9 @@ export const getDecorations = (doc, state) => {
   });
   return DecorationSet.empty.add(doc, decorations);
 };
-const handleDocChanged = (tr, pluginState, editorState) => {
+const handleDocChanged = featureFlags => (tr, pluginState, editorState) => {
   const nextPluginState = handleSelectionChanged(tr, pluginState);
-  const decorationSet = getDecorations(tr.doc, editorState);
+  const decorationSet = getDecorations(tr.doc, editorState, featureFlags);
   return {
     ...nextPluginState,
     decorationSet
@@ -107,53 +105,55 @@ const handleSelectionChanged = (tr, pluginState) => {
 const reducer = () => state => {
   return state;
 };
-const {
-  getPluginState,
-  createPluginState
-} = pluginFactory(listPluginKey, reducer(), {
-  onDocChanged: handleDocChanged,
-  onSelectionChanged: handleSelectionChanged
-});
-const createInitialState = state => {
+const createInitialState = featureFlags => state => {
   return {
     ...initialState,
-    decorationSet: getDecorations(state.doc, state)
+    decorationSet: getDecorations(state.doc, state, featureFlags)
   };
 };
-export const createPlugin = eventDispatch => new SafePlugin({
-  state: createPluginState(eventDispatch, createInitialState),
-  key: listPluginKey,
-  props: {
-    decorations(state) {
-      const {
-        decorationSet
-      } = getPluginState(state);
-      return decorationSet;
-    },
-    handleClick: (view, pos, event) => {
-      const {
-        state
-      } = view;
-      if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
-        var _nodeAtPos$firstChild;
-        const nodeAtPos = state.tr.doc.nodeAt(pos);
+export const createPlugin = (eventDispatch, featureFlags) => {
+  const {
+    getPluginState,
+    createPluginState
+  } = pluginFactory(listPluginKey, reducer(), {
+    onDocChanged: handleDocChanged(featureFlags),
+    onSelectionChanged: handleSelectionChanged
+  });
+  return new SafePlugin({
+    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
+    key: listPluginKey,
+    props: {
+      decorations(state) {
+        const {
+          decorationSet
+        } = getPluginState(state);
+        return decorationSet;
+      },
+      handleClick: (view, pos, event) => {
         const {
-          listItem,
-          codeBlock
-        } = view.state.schema.nodes;
-        if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
-          var _document, _document$elementFrom;
-          const bufferPx = 50;
-          const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
-          if (isCodeBlockNextToListMarker) {
-            // +1 needed to put cursor inside li
-            // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
-            setGapCursorSelection(view, pos + 1, Side.LEFT);
-            return true;
+          state
+        } = view;
+        if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
+          var _nodeAtPos$firstChild;
+          const nodeAtPos = state.tr.doc.nodeAt(pos);
+          const {
+            listItem,
+            codeBlock
+          } = view.state.schema.nodes;
+          if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
+            var _document, _document$elementFrom;
+            const bufferPx = 50;
+            const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
+            if (isCodeBlockNextToListMarker) {
+              // +1 needed to put cursor inside li
+              // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
+              setGapCursorSelection(view, pos + 1, Side.LEFT);
+              return true;
+            }
           }
         }
+        return false;
       }
-      return false;
     }
-  }
-});
+  });
+};

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -103,6 +103,7 @@ export class MediaNode extends Component {
       maxDimensions,
       mediaOptions
     } = this.props;
+    const borderMark = node.marks.find(m => m.type.name === 'border');
     const {
       viewMediaClientConfig,
       contextIdentifierProvider
@@ -138,7 +139,9 @@ export class MediaNode extends Component {
     };
     return /*#__PURE__*/React.createElement(MediaCardWrapper, {
       dimensions: originalDimensions,
-      onContextMenu: this.selectMediaSingle
+      onContextMenu: this.selectMediaSingle,
+      borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+      selected: selected
     }, /*#__PURE__*/React.createElement(Card, {
       mediaClientConfig: mediaClientConfig,
       resizeMode: "stretchy-fit",

package/dist/es2019/plugins/media/nodeviews/styles.js

@@ -18,9 +18,20 @@ const forcedDimensions = css`
 export const MediaCardWrapper = ({
   dimensions,
   children,
+  selected,
+  borderWidth = 0,
   onContextMenu
 }) => {
+  const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
+    "data-testid": "media-card-wrapper",
+    style: {
+      borderColor: `var(--custom-palette-color)`,
+      borderWidth: `${calculatedBorderWidth}px`,
+      borderStyle: 'solid',
+      borderRadius: `${calculatedBorderWidth * 2}px`
+    }
+  }, jsx("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: `${dimensions.height / dimensions.width * 100}%`
@@ -28,5 +39,5 @@ export const MediaCardWrapper = ({
     onContextMenuCapture: onContextMenu
   }, jsx("div", {
     css: absoluteDiv
-  }, children));
+  }, children)));
 };