@atlaskit/editor-plugin-code-block 0.1.0

package/dist/cjs/nodeviews/code-block.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockNodeView = exports.CodeBlockView = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _actions = require("../actions");
+var _mainState = require("../pm-plugins/main-state");
+var _classNames = require("../ui/class-names");
+var MATCH_NEWLINES = new RegExp('\n', 'g');
+var toDOM = function toDOM(node) {
+  return ['div', {
+    class: 'code-block'
+  }, ['div', {
+    class: _classNames.codeBlockClassNames.start,
+    contenteditable: 'false'
+  }], ['div', {
+    class: _classNames.codeBlockClassNames.contentWrapper
+  }, ['div', {
+    class: _classNames.codeBlockClassNames.gutter,
+    contenteditable: 'false'
+  }], ['div', {
+    class: _classNames.codeBlockClassNames.content
+  }, ['code', {
+    'data-language': node.attrs.language || '',
+    spellcheck: 'false',
+    contenteditable: 'true',
+    'data-testid': 'code-block--code'
+  }, 0]]], ['div', {
+    class: _classNames.codeBlockClassNames.end,
+    contenteditable: 'false'
+  }]];
+};
+var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
+  function CodeBlockView(_node, view, getPos) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, CodeBlockView);
+    (0, _defineProperty2.default)(this, "ensureLineNumbers", (0, _rafSchd.default)(function () {
+      var lines = 1;
+      _this.node.forEach(function (node) {
+        var text = node.text;
+        if (text) {
+          lines += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      while (_this.lineNumberGutter.childElementCount < lines) {
+        _this.lineNumberGutter.appendChild(document.createElement('span'));
+      }
+      while (_this.lineNumberGutter.childElementCount > lines) {
+        _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
+      }
+    }));
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.getPos = getPos;
+    this.view = view;
+    this.node = _node;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.lineNumberGutter = this.dom.querySelector(".".concat(_classNames.codeBlockClassNames.gutter));
+    this.ensureLineNumbers();
+  }
+  (0, _createClass2.default)(CodeBlockView, [{
+    key: "updateDOMAndSelection",
+    value: function updateDOMAndSelection(savedInnerHTML, newCursorPosition) {
+      var _this$dom;
+      if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
+        var _contentView$childNod;
+        var contentWrapper = this.dom.childNodes[1];
+        var contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
+        if ((contentView === null || contentView === void 0 || (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
+          var codeElement = contentView.firstChild;
+          codeElement.innerHTML = savedInnerHTML;
+
+          // We need to set cursor for the DOM update
+          var textElement = (0, _toConsumableArray2.default)(codeElement.childNodes).find(function (child) {
+            return child.nodeName === '#text';
+          });
+          var sel = window.getSelection();
+          var range = document.createRange();
+          range.setStart(textElement, newCursorPosition);
+          range.collapse(true);
+          sel === null || sel === void 0 || sel.removeAllRanges();
+          sel === null || sel === void 0 || sel.addRange(range);
+        }
+      }
+    }
+  }, {
+    key: "coalesceDOMElements",
+    value: function coalesceDOMElements() {
+      var _this$dom2;
+      if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
+        var contentWrapper = this.dom.childNodes[1];
+        var contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
+        if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
+          var savedInnerHTML = '';
+          while (contentView.childNodes.length > 1) {
+            var lastChild = contentView.lastChild;
+            savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
+            contentView.removeChild(lastChild);
+          }
+          var firstChild = contentView.firstChild;
+          savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
+          var newCursorPosition = firstChild.innerHTML.length + 1;
+          setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
+        }
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (node.type !== this.node.type) {
+        return false;
+      }
+      if (node !== this.node) {
+        if (node.attrs.language !== this.node.attrs.language) {
+          this.contentDOM.setAttribute('data-language', node.attrs.language || '');
+        }
+        this.node = node;
+        this.ensureLineNumbers();
+        if (_utils.browser.android) {
+          this.coalesceDOMElements();
+          (0, _actions.resetShouldIgnoreFollowingMutations)(this.view.state, this.view.dispatch);
+        }
+      }
+      return true;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(record) {
+      var pluginState = (0, _mainState.getPluginState)(this.view.state);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.shouldIgnoreFollowingMutations) {
+        return true;
+      }
+
+      // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+      return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
+    }
+  }]);
+  return CodeBlockView;
+}();
+var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos) {
+  return new CodeBlockView(node, view, getPos);
+};

package/dist/cjs/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('codeBlockPlugin');

package/dist/cjs/plugin.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _actions = require("./actions");
+var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelectionPlugin");
+var _ideUx = _interopRequireDefault(require("./pm-plugins/ide-ux"));
+var _inputRule = require("./pm-plugins/input-rule");
+var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
+var _main = require("./pm-plugins/main");
+var _refreshBrowserSelection = _interopRequireDefault(require("./refresh-browser-selection"));
+var _toolbar = require("./toolbar");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var codeBlockPlugin = function codeBlockPlugin(_ref) {
+  var options = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'codeBlock',
+    nodes: function nodes() {
+      return [{
+        name: 'codeBlock',
+        node: _adfSchema.codeBlock
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'codeBlock',
+        plugin: function plugin(_ref2) {
+          var _options$appearance;
+          var getIntl = _ref2.getIntl;
+          return (0, _main.createPlugin)(_objectSpread(_objectSpread({}, options), {}, {
+            getIntl: getIntl,
+            appearance: (_options$appearance = options === null || options === void 0 ? void 0 : options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : 'comment'
+          }));
+        }
+      }, {
+        name: 'codeBlockInputRule',
+        plugin: function plugin(_ref3) {
+          var _api$analytics;
+          var schema = _ref3.schema;
+          return (0, _inputRule.createCodeBlockInputRule)(schema, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
+      }, {
+        name: 'codeBlockIDEKeyBindings',
+        plugin: function plugin() {
+          return (0, _ideUx.default)(api);
+        }
+      }, {
+        name: 'codeBlockKeyMap',
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema;
+          return (0, _keymaps.default)(schema);
+        }
+      }, {
+        name: 'codeBlockCopySelection',
+        plugin: function plugin() {
+          return (0, _codeBlockCopySelectionPlugin.codeBlockCopySelectionPlugin)();
+        }
+      }];
+    },
+    // Workaround for a firefox issue where dom selection is off sync
+    // https://product-fabric.atlassian.net/browse/ED-12442
+    onEditorViewStateUpdated: function onEditorViewStateUpdated(props) {
+      (0, _refreshBrowserSelection.default)(props.originalTransaction, props.newEditorState);
+    },
+    actions: {
+      /*
+       * Function will insert code block at current selection if block is empty or below current selection and set focus on it.
+       */
+      insertCodeBlock: function insertCodeBlock(inputMethod) {
+        var _api$analytics2;
+        return (0, _actions.insertCodeBlockWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+      }
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref5) {
+        var formatMessage = _ref5.formatMessage;
+        return [{
+          id: 'codeblock',
+          title: formatMessage(_messages.blockTypeMessages.codeblock),
+          description: formatMessage(_messages.blockTypeMessages.codeblockDescription),
+          keywords: ['code block'],
+          priority: 700,
+          keyshortcut: '```',
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCode, null);
+          },
+          action: function action(_insert, state) {
+            var _api$analytics3;
+            var tr = (0, _actions.createInsertCodeBlockTransaction)({
+              state: state
+            });
+            api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      },
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api)
+    }
+  };
+};
+var _default = exports.default = codeBlockPlugin;

package/dist/cjs/pm-plugins/actions.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTIONS = void 0;
+var ACTIONS = exports.ACTIONS = {
+  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
+};

package/dist/cjs/pm-plugins/codeBlockCopySelectionPlugin.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockCopySelectionPlugin = codeBlockCopySelectionPlugin;
+exports.copySelectionPluginKey = void 0;
+exports.provideVisualFeedbackForCopyButton = provideVisualFeedbackForCopyButton;
+exports.removeVisualFeedbackForCopyButton = removeVisualFeedbackForCopyButton;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var copySelectionPluginKey = exports.copySelectionPluginKey = new _state.PluginKey('codeBlockCopySelectionPlugin');
+function getSelectionDecorationStartAndEnd(_ref) {
+  var state = _ref.state,
+    transaction = _ref.transaction;
+  var codeBlockNode = (0, _copyButton.getSelectedNodeOrNodeParentByNodeType)({
+    nodeType: state.schema.nodes.codeBlock,
+    selection: transaction.selection
+  });
+  if (!codeBlockNode) {
+    return {
+      decorationStartAndEnd: undefined
+    };
+  }
+  var decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
+  return {
+    decorationStartAndEnd: decorationStartAndEnd
+  };
+}
+function codeBlockCopySelectionPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: copySelectionPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorationStartAndEnd: undefined
+        };
+      },
+      apply: function apply(transaction, currentCodeBlockCopySelectionPluginState, _oldState, newState) {
+        switch (transaction.getMeta(copySelectionPluginKey)) {
+          case 'show-selection':
+            {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction: transaction
+              });
+            }
+          case 'remove-selection':
+            return {
+              decorationStartAndEnd: undefined
+            };
+          default:
+            // The contents of the code block can change while the selection is being shown
+            // (either from collab edits -- or from the user continuing to type while hovering
+            // the mouse over the copy button).
+            // This ensures the selection is updated in these cases.
+            if (currentCodeBlockCopySelectionPluginState.decorationStartAndEnd !== undefined) {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction: transaction
+              });
+            }
+            return currentCodeBlockCopySelectionPluginState;
+        }
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        if (copySelectionPluginKey.getState(state).decorationStartAndEnd) {
+          var _copySelectionPluginK = (0, _slicedToArray2.default)(copySelectionPluginKey.getState(state).decorationStartAndEnd, 2),
+            _start = _copySelectionPluginK[0],
+            _end = _copySelectionPluginK[1];
+          return _view.DecorationSet.create(state.doc, [_view.Decoration.inline(_start, _end, {
+            class: 'ProseMirror-fake-text-selection'
+          })]);
+        }
+        return _view.DecorationSet.empty;
+      }
+    }
+  });
+}
+function provideVisualFeedbackForCopyButton(state, dispatch) {
+  var tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'show-selection');
+
+  // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+}
+function removeVisualFeedbackForCopyButton(state, dispatch) {
+  var tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'remove-selection');
+
+  // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+}

package/dist/cjs/pm-plugins/ide-ux.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _bracketHandling = require("../ide-ux/bracket-handling");
+var _commands = require("../ide-ux/commands");
+var _lineHandling = require("../ide-ux/line-handling");
+var _pairedCharacterHandling = require("../ide-ux/paired-character-handling");
+var _quoteHandling = require("../ide-ux/quote-handling");
+var _utils3 = require("../utils");
+var ideUX = function ideUX(pluginInjectionApi) {
+  var _pluginInjectionApi$a;
+  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  return new _safePlugin.SafePlugin({
+    props: {
+      handleTextInput: function handleTextInput(view, from, to, text) {
+        var _pluginInjectionApi$c;
+        var state = view.state,
+          dispatch = view.dispatch;
+        var compositionPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.composition) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.sharedState.currentState();
+        if ((0, _lineHandling.isCursorInsideCodeBlock)(state) && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing)) {
+          var beforeText = (0, _lineHandling.getStartOfCurrentLine)(state).text;
+          var afterText = (0, _lineHandling.getEndOfCurrentLine)(state).text;
+
+          // If text is a closing bracket/quote and we've already inserted it, move the selection after
+          if ((0, _pairedCharacterHandling.isCursorBeforeClosingCharacter)(afterText) && (0, _pairedCharacterHandling.isClosingCharacter)(text) && afterText.startsWith(text)) {
+            dispatch((0, _utils2.setTextSelection)(to + text.length)(state.tr));
+            return true;
+          }
+
+          // Automatically add right-hand side bracket when user types the left bracket
+          if ((0, _bracketHandling.shouldAutoCloseBracket)(beforeText, afterText)) {
+            var _getAutoClosingBracke = (0, _bracketHandling.getAutoClosingBracketInfo)(beforeText + text, afterText),
+              left = _getAutoClosingBracke.left,
+              right = _getAutoClosingBracke.right;
+            if (left && right) {
+              var bracketPair = state.schema.text(text + right);
+              var tr = state.tr.replaceWith(from, to, bracketPair);
+              dispatch((0, _utils2.setTextSelection)(from + text.length)(tr));
+              return true;
+            }
+          }
+
+          // Automatically add closing quote when user types a starting quote
+          if ((0, _quoteHandling.shouldAutoCloseQuote)(beforeText, afterText)) {
+            var _getAutoClosingQuoteI = (0, _quoteHandling.getAutoClosingQuoteInfo)(beforeText + text, afterText),
+              leftQuote = _getAutoClosingQuoteI.left,
+              rightQuote = _getAutoClosingQuoteI.right;
+            if (leftQuote && rightQuote) {
+              var quotePair = state.schema.text(text + rightQuote);
+              var _tr = state.tr.replaceWith(from, to, quotePair);
+              dispatch((0, _utils2.setTextSelection)(from + text.length)(_tr));
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+      handleKeyDown: (0, _keymap.keydownHandler)({
+        Backspace: function Backspace(state, dispatch) {
+          if ((0, _lineHandling.isCursorInsideCodeBlock)(state)) {
+            var $cursor = (0, _utils3.getCursor)(state.selection);
+            var beforeText = (0, _lineHandling.getStartOfCurrentLine)(state).text;
+            var afterText = (0, _lineHandling.getEndOfCurrentLine)(state).text;
+            var _getAutoClosingBracke2 = (0, _bracketHandling.getAutoClosingBracketInfo)(beforeText, afterText),
+              leftBracket = _getAutoClosingBracke2.left,
+              rightBracket = _getAutoClosingBracke2.right,
+              hasTrailingMatchingBracket = _getAutoClosingBracke2.hasTrailingMatchingBracket;
+            if (leftBracket && rightBracket && hasTrailingMatchingBracket && dispatch) {
+              dispatch(state.tr.delete($cursor.pos - leftBracket.length, $cursor.pos + rightBracket.length));
+              return true;
+            }
+            var _getAutoClosingQuoteI2 = (0, _quoteHandling.getAutoClosingQuoteInfo)(beforeText, afterText),
+              leftQuote = _getAutoClosingQuoteI2.left,
+              rightQuote = _getAutoClosingQuoteI2.right,
+              hasTrailingMatchingQuote = _getAutoClosingQuoteI2.hasTrailingMatchingQuote;
+            if (leftQuote && rightQuote && hasTrailingMatchingQuote && dispatch) {
+              dispatch(state.tr.delete($cursor.pos - leftQuote.length, $cursor.pos + rightQuote.length));
+              return true;
+            }
+            var _getLineInfo = (0, _lineHandling.getLineInfo)(beforeText),
+              _getLineInfo$indentTo = _getLineInfo.indentToken,
+              size = _getLineInfo$indentTo.size,
+              token = _getLineInfo$indentTo.token,
+              indentText = _getLineInfo.indentText;
+            if (beforeText === indentText) {
+              if (indentText.endsWith(token.repeat(size)) && dispatch) {
+                dispatch(state.tr.delete($cursor.pos - (size - indentText.length % size || size), $cursor.pos));
+                return true;
+              }
+            }
+          }
+          return false;
+        },
+        Enter: (0, _utils.filterCommand)(_lineHandling.isSelectionEntirelyInsideCodeBlock, _commands.insertNewlineWithIndent),
+        'Mod-]': (0, _utils.filterCommand)(_lineHandling.isSelectionEntirelyInsideCodeBlock, (0, _commands.indent)(editorAnalyticsAPI)),
+        'Mod-[': (0, _utils.filterCommand)(_lineHandling.isSelectionEntirelyInsideCodeBlock, (0, _commands.outdent)(editorAnalyticsAPI)),
+        Tab: (0, _utils.filterCommand)(_lineHandling.isSelectionEntirelyInsideCodeBlock, function (state, dispatch) {
+          if (!dispatch) {
+            return false;
+          }
+          if ((0, _lineHandling.isCursorInsideCodeBlock)(state)) {
+            return (0, _commands.insertIndent)(state, dispatch);
+          }
+          return (0, _commands.indent)(editorAnalyticsAPI)(state, dispatch);
+        }),
+        'Shift-Tab': (0, _utils.filterCommand)(_lineHandling.isSelectionEntirelyInsideCodeBlock, (0, _commands.outdent)(editorAnalyticsAPI)),
+        'Mod-a': function ModA(state, dispatch) {
+          if ((0, _lineHandling.isSelectionEntirelyInsideCodeBlock)(state)) {
+            var _state$selection = state.selection,
+              $from = _state$selection.$from,
+              $to = _state$selection.$to;
+            var isFullCodeBlockSelection = $from.parentOffset === 0 && $to.parentOffset === $to.parent.nodeSize - 2;
+            if (!isFullCodeBlockSelection && dispatch) {
+              dispatch(state.tr.setSelection(_state.TextSelection.create(state.doc, $from.start(), $to.end())));
+              return true;
+            }
+          }
+          return false;
+        }
+      })
+    }
+  });
+};
+var _default = exports.default = ideUX;

package/dist/cjs/pm-plugins/input-rule.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCodeBlockInputRule = createCodeBlockInputRule;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _commands = require("@atlaskit/editor-common/commands");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
+var _transformToCodeBlock = require("../transform-to-code-block");
+function createCodeBlockInputRule(schema, editorAnalyticsAPI) {
+  var rules = getCodeBlockRules(editorAnalyticsAPI, schema);
+  return (0, _prosemirrorInputRules.createPlugin)('code-block-input-rule', rules, {
+    isBlockNodeRule: true
+  });
+}
+
+/**
+ * Get all code block input rules
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWithHandler[]}
+ */
+function getCodeBlockRules(editorAnalyticsAPI, schema) {
+  var ruleAnalytics = (0, _utils.inputRuleWithAnalytics)({
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod: _analytics.INPUT_METHOD.FORMATTING
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  }, editorAnalyticsAPI);
+  var validMatchLength = function validMatchLength(match) {
+    return match.length > 0 && match[0].length === 3;
+  };
+  var threeTildeRule = (0, _prosemirrorInputRules.createRule)(/(?!\s)(`{3,})$/, function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+    var attributes = {};
+    if (match[4]) {
+      attributes.language = match[4];
+    }
+    if ((0, _transformToCodeBlock.isConvertableToCodeBlock)(state)) {
+      return (0, _transformToCodeBlock.transformToCodeBlockAction)(state, start, attributes);
+    }
+    var tr = state.tr;
+    tr.delete(start, end);
+    var codeBlock = tr.doc.type.schema.nodes.codeBlock.createChecked();
+    (0, _utils2.safeInsert)(codeBlock)(tr);
+    return tr;
+  });
+  var leftNodeReplacementThreeTildeRule = (0, _prosemirrorInputRules.createRule)(new RegExp("((".concat(_prosemirrorInputRules.leafNodeReplacementCharacter, "`{3,})|^\\s(`{3,}))(\\S*)$")), function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+    var attributes = {};
+    if (match[4]) {
+      attributes.language = match[4];
+    }
+    var inlineStart = Math.max(match.index + state.selection.$from.start(), 1);
+    return (0, _commands.insertBlock)(state, schema.nodes.codeBlock, inlineStart, end, attributes);
+  });
+  return [ruleAnalytics(threeTildeRule), ruleAnalytics(leftNodeReplacementThreeTildeRule)];
+}

package/dist/cjs/pm-plugins/keymaps.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.keymapPlugin = keymapPlugin;
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("../utils");
+var deleteCurrentItem = function deleteCurrentItem($from) {
+  return function (tr) {
+    return tr.delete($from.before($from.depth), $from.after($from.depth));
+  };
+};
+var setTextSelection = function setTextSelection(pos) {
+  return function (tr) {
+    var newSelection = _state.Selection.findFrom(tr.doc.resolve(pos), -1, true);
+    if (newSelection) {
+      tr.setSelection(newSelection);
+    }
+    return tr;
+  };
+};
+function keymapPlugin(schema) {
+  return (0, _keymap.keymap)({
+    Backspace: function Backspace(state, dispatch) {
+      var $cursor = (0, _utils3.getCursor)(state.selection);
+      var _state$schema$nodes = state.schema.nodes,
+        paragraph = _state$schema$nodes.paragraph,
+        codeBlock = _state$schema$nodes.codeBlock,
+        listItem = _state$schema$nodes.listItem,
+        table = _state$schema$nodes.table,
+        layoutColumn = _state$schema$nodes.layoutColumn;
+      if (!$cursor || $cursor.parent.type !== codeBlock || !dispatch) {
+        return false;
+      }
+      if ($cursor.pos === 1 || (0, _utils2.hasParentNodeOfType)(listItem)(state.selection) && $cursor.parentOffset === 0) {
+        var node = (0, _utils2.findParentNodeOfTypeClosestToPos)($cursor, codeBlock);
+        if (!node) {
+          return false;
+        }
+        dispatch(state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, []).setBlockType($cursor.pos, $cursor.pos, paragraph));
+        return true;
+      }
+      if ($cursor.node && (0, _utils.isEmptyNode)(schema)($cursor.node()) && ((0, _utils2.hasParentNodeOfType)(layoutColumn)(state.selection) || (0, _utils2.hasParentNodeOfType)(table)(state.selection))) {
+        var tr = state.tr;
+        var insertPos = $cursor.pos;
+        deleteCurrentItem($cursor)(tr);
+        setTextSelection(insertPos)(tr);
+        dispatch(tr.scrollIntoView());
+        return true;
+      }
+
+      // Handle not nested empty code block
+      if ((0, _utils.isEmptyNode)(schema)($cursor.node())) {
+        dispatch(deleteCurrentItem($cursor)(state === null || state === void 0 ? void 0 : state.tr));
+        return true;
+      }
+      return false;
+    }
+  });
+}
+var _default = exports.default = keymapPlugin;