@atlaskit/editor-plugin-code-block-advanced 1.0.0

package/dist/es2019/ui/syntaxHighlightingTheme.js

@@ -0,0 +1,70 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
+export const highlightStyle = HighlightStyle.define([{
+  tag: tags.meta,
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: tags.link,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  textDecoration: 'underline',
+  // Custom syntax styling to match existing styling
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: "var(--ds-font-weight-bold, 700)"
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strong,
+  // Custom syntax styling to match existing styling
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: "var(--ds-font-weight-bold, 700)"
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.keyword,
+  color: "var(--ds-text-accent-blue, #0055CC)",
+  // Custom syntax styling to match existing styling
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: "var(--ds-font-weight-bold, 700)"
+}, {
+  tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+  color: "var(--ds-text-accent-blue, #0055CC)"
+}, {
+  tag: [tags.literal, tags.inserted],
+  color: "var(--ds-text-accent-blue, #0055CC)"
+}, {
+  tag: [tags.string, tags.deleted],
+  color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: tags.definition(tags.variableName),
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: tags.local(tags.variableName),
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: [tags.typeName, tags.namespace],
+  color: "var(--ds-text-accent-blue, #0055CC)"
+}, {
+  tag: tags.className,
+  color: "var(--ds-text-accent-purple, #5E4DB2)"
+}, {
+  tag: [tags.special(tags.variableName), tags.macroName],
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: tags.definition(tags.propertyName),
+  color: "var(--ds-text, #172B4D)"
+}, {
+  tag: tags.comment,
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontStyle: 'italic'
+}, {
+  tag: tags.invalid,
+  color: "var(--ds-text, #172B4D)"
+}]);

package/dist/es2019/ui/theme.js

@@ -0,0 +1,49 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+export const cmTheme = CodeMirror.theme({
+  '&': {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    padding: '0',
+    marginTop: "var(--ds-space-100, 8px)",
+    marginBottom: "var(--ds-space-100, 8px)",
+    borderRadius: "var(--ds-border-radius, 4px)",
+    fontSize: '0.875rem',
+    // Custom syntax styling to match existing styling
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.5rem'
+  },
+  '&.cm-focused': {
+    outline: 'none'
+  },
+  '.cm-line': {
+    padding: '0'
+  },
+  '&.cm-editor.code-block.danger': {
+    backgroundColor: "var(--ds-background-danger, #FFECEB)"
+  },
+  '.cm-content': {
+    cursor: 'text',
+    caretColor: "var(--ds-text, #172B4D)",
+    margin: "var(--ds-space-100, 8px)",
+    padding: "var(--ds-space-0, 0px)"
+  },
+  '.cm-scroller': {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    // Custom syntax styling to match existing styling
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 'unset',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  },
+  '&.cm-focused .cm-cursor': {
+    borderLeftColor: "var(--ds-text, #172B4D)"
+  },
+  '.cm-gutters': {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    border: 'none',
+    padding: "var(--ds-space-100, 8px)"
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    paddingLeft: "var(--ds-space-0, 0px)",
+    paddingRight: "var(--ds-space-0, 0px)",
+    minWidth: 'unset'
+  }
+});

package/dist/esm/codeBlockAdvancedPlugin.js

@@ -0,0 +1,27 @@
+import { codeBlockNodeWithFixedToDOM } from './nodeviews/codeBlockNodeWithToDOMFixed';
+import { createPlugin } from './pm-plugins/main';
+export var codeBlockAdvancedPlugin = function codeBlockAdvancedPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  return {
+    name: 'codeBlockAdvanced',
+    nodes: function nodes() {
+      return [{
+        name: 'codeBlock',
+        node: codeBlockNodeWithFixedToDOM()
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'codeBlockAdvancedPlugin',
+        plugin: function plugin() {
+          var _config$extensions;
+          return createPlugin({
+            api: api,
+            extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : []
+          });
+        }
+      }];
+    }
+  };
+};

package/dist/esm/codeBlockAdvancedPluginType.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
+export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -0,0 +1,205 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { closeBrackets } from '@codemirror/autocomplete';
+import { syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorSelection } from '@codemirror/state';
+import { EditorView as CodeMirror, lineNumbers } from '@codemirror/view';
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { highlightStyle } from '../ui/syntaxHighlightingTheme';
+import { cmTheme } from '../ui/theme';
+import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
+import { updateCMSelection } from './codemirrorSync/updateCMSelection';
+import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
+import { keymapExtension } from './extensions/keymap';
+import { LanguageLoader } from './languages/loader';
+// Based on: https://prosemirror.net/examples/codemirror/
+var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
+  // eslint-disable-next-line @typescript-eslint/max-params
+  function CodeBlockAdvancedNodeView(node, view, getPos, config) {
+    var _config$api,
+      _this = this,
+      _config$api2;
+    _classCallCheck(this, CodeBlockAdvancedNodeView);
+    _defineProperty(this, "lineWrappingCompartment", new Compartment());
+    _defineProperty(this, "languageCompartment", new Compartment());
+    _defineProperty(this, "readOnlyCompartment", new Compartment());
+    _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "wordWrappingEnabled", false);
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.selectionAPI = (_config$api = config.api) === null || _config$api === void 0 || (_config$api = _config$api.selection) === null || _config$api === void 0 ? void 0 : _config$api.actions;
+    var getNode = function getNode() {
+      return _this.node;
+    };
+    var onMaybeNodeSelection = function onMaybeNodeSelection() {
+      return _this.maybeTryingToReachNodeSelection = true;
+    };
+    this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.editorDisabled) === null || _config$api2 === void 0 ? void 0 : _config$api2.sharedState.onChange(function () {
+      _this.updateReadonlyState();
+    });
+    this.languageLoader = new LanguageLoader(function (lang) {
+      _this.updating = true;
+      _this.cm.dispatch({
+        effects: _this.languageCompartment.reconfigure(lang)
+      });
+      _this.updating = false;
+    });
+    this.cm = new CodeMirror({
+      doc: this.node.textContent,
+      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), keymapExtension({
+        view: view,
+        getPos: getPos,
+        getNode: getNode,
+        selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
+        onMaybeNodeSelection: onMaybeNodeSelection
+      }), cmTheme, syntaxHighlighting(highlightStyle), lineNumbers(), CodeMirror.updateListener.of(function (update) {
+        return _this.forwardUpdate(update);
+      }), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+        class: 'code-block'
+      }), bidiCharWarningExtension])
+    });
+
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+
+    // This flag is used to avoid an update loop between the outer and
+    // inner editor
+    this.updating = false;
+    this.updateLanguage();
+  }
+  return _createClass(CodeBlockAdvancedNodeView, [{
+    key: "destroy",
+    value: function destroy() {
+      var _this$cleanupDisabled;
+      (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
+    }
+  }, {
+    key: "forwardUpdate",
+    value: function forwardUpdate(update) {
+      var _this$getPos, _this$getPos2;
+      if (this.updating || !this.cm.hasFocus) {
+        return;
+      }
+      var offset = ((_this$getPos = (_this$getPos2 = this.getPos) === null || _this$getPos2 === void 0 ? void 0 : _this$getPos2.call(this)) !== null && _this$getPos !== void 0 ? _this$getPos : 0) + 1;
+      syncCMWithPM({
+        view: this.view,
+        update: update,
+        offset: offset
+      });
+    }
+  }, {
+    key: "setSelection",
+    value: function setSelection(anchor, head) {
+      if (!this.maybeTryingToReachNodeSelection) {
+        this.cm.focus();
+      }
+      this.updating = true;
+      this.cm.dispatch({
+        selection: {
+          anchor: anchor,
+          head: head
+        }
+      });
+      this.updating = false;
+    }
+  }, {
+    key: "updateReadonlyState",
+    value: function updateReadonlyState() {
+      this.updating = true;
+      this.cm.dispatch({
+        effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable))
+      });
+      this.updating = false;
+    }
+  }, {
+    key: "updateLanguage",
+    value: function updateLanguage() {
+      this.languageLoader.updateLanguage(this.node.attrs.language);
+    }
+  }, {
+    key: "selectCodeBlockNode",
+    value: function selectCodeBlockNode(relativeSelectionPos) {
+      var _this$selectionAPI, _this$getPos3, _this$getPos4;
+      var tr = (_this$selectionAPI = this.selectionAPI) === null || _this$selectionAPI === void 0 ? void 0 : _this$selectionAPI.selectNearNode({
+        selectionRelativeToNode: relativeSelectionPos,
+        selection: NodeSelection.create(this.view.state.doc, (_this$getPos3 = (_this$getPos4 = this.getPos) === null || _this$getPos4 === void 0 ? void 0 : _this$getPos4.call(this)) !== null && _this$getPos3 !== void 0 ? _this$getPos3 : 0)
+      })(this.view.state);
+      if (tr) {
+        this.view.dispatch(tr);
+      }
+    }
+  }, {
+    key: "updateWordWrap",
+    value: function updateWordWrap(node) {
+      if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
+        this.updating = true;
+        this.cm.dispatch({
+          effects: [this.lineWrappingCompartment.reconfigure(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [])]
+        });
+        this.updating = false;
+        this.wordWrappingEnabled = !this.wordWrappingEnabled;
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      var _this2 = this;
+      this.maybeTryingToReachNodeSelection = false;
+      if (node.type !== this.node.type) {
+        return false;
+      }
+      this.updateWordWrap(node);
+      this.node = node;
+      if (this.updating) {
+        return true;
+      }
+      this.updateLanguage();
+      var newText = node.textContent,
+        curText = this.cm.state.doc.toString();
+      updateCMSelection(curText, newText, function (tr) {
+        _this2.updating = true;
+        _this2.cm.dispatch(tr);
+        _this2.updating = false;
+      });
+      return true;
+    }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(e) {
+      var _this3 = this,
+        _this$getPos5;
+      if (e instanceof MouseEvent && e.type === 'mousedown') {
+        // !Warning: Side effect!
+        // CodeMirror on blur updates the dom observer with a `setTimeout(..., 10);`
+        // We need to select the nodeview after this has taken place to ensure
+        // ProseMirror takes over
+        // https://github.com/codemirror/view/commit/70a9a253df04a57004247b9463198c17832f92f4#diff-cb8cbffa623ff0975389e7e8c315e69d5e10345239ffe2c9b4b7986a56ad95efR720
+        setTimeout(function () {
+          // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
+          // cause funky behaviour
+          _this3.updating = true;
+          _this3.cm.dispatch({
+            selection: EditorSelection.create([EditorSelection.cursor(0)], 0)
+          });
+          _this3.updating = false;
+          _this3.selectCodeBlockNode(undefined);
+          _this3.view.focus();
+        }, 20);
+      }
+      // If we have selected the node we should not stop these events
+      if (e instanceof KeyboardEvent && this.view.state.selection instanceof NodeSelection && this.view.state.selection.from === ((_this$getPos5 = this.getPos) === null || _this$getPos5 === void 0 ? void 0 : _this$getPos5.call(this))) {
+        return false;
+      }
+      return true;
+    }
+  }]);
+}();
+export var getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
+  return function (node, view, getPos) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  };
+};

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { codeBlock } from '@atlaskit/adf-schema';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+var codeBlockClassNames = {
+  container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
+  start: CodeBlockSharedCssClassName.CODEBLOCK_START,
+  end: CodeBlockSharedCssClassName.CODEBLOCK_END,
+  contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
+  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+  gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+  lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
+};
+
+// From: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
+var _toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
+  return ['div', {
+    class: codeBlockClassNames.container
+  }, ['div', {
+    class: codeBlockClassNames.start,
+    contenteditable: 'false'
+  }], ['div', {
+    class: codeBlockClassNames.contentWrapper
+  }, ['div', {
+    class: codeBlockClassNames.gutter,
+    contenteditable: 'false'
+  }], ['div', {
+    class: codeBlockClassNames.content
+  }, ['code', {
+    'data-language': node.attrs.language || '',
+    spellcheck: 'false',
+    contenteditable: contentEditable ? 'true' : 'false',
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
+  }, 0]]], ['div', {
+    class: codeBlockClassNames.end,
+    contenteditable: 'false'
+  }]];
+};
+export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
+  return _objectSpread(_objectSpread({}, codeBlock), {}, {
+    toDOM: function toDOM(node) {
+      return _toDOM(node, false, '');
+    }
+  });
+};

package/dist/esm/nodeviews/codemirrorSync/syncCMWithPM.js

@@ -0,0 +1,32 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+/**
+ *
+ * Synchronises the CodeMirror update changes with the Prosemirror editor
+ *
+ * @param props.view EditorView - Prosemirror EditorView
+ * @param props.update ViewUpdate - CodeMirror ViewUpdate
+ * @param props.offset number - position where the code block starts in prosemirror
+ */
+export var syncCMWithPM = function syncCMWithPM(_ref) {
+  var view = _ref.view,
+    update = _ref.update,
+    offset = _ref.offset;
+  var main = update.state.selection.main;
+  var selFrom = offset + main.from;
+  var selTo = offset + main.to;
+  var pmSel = view.state.selection;
+  if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
+    var tr = view.state.tr;
+    // eslint-disable-next-line @typescript-eslint/max-params
+    update.changes.iterChanges(function (fromA, toA, fromB, toB, text) {
+      if (text.length) {
+        tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));
+      } else {
+        tr.delete(offset + fromA, offset + toA);
+      }
+      offset += toB - fromB - (toA - fromA);
+    });
+    tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
+    view.dispatch(tr);
+  }
+};

package/dist/esm/nodeviews/codemirrorSync/updateCMSelection.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * Compares the updated text with the current to determine the transaction to fire
+ * in the CodeMirror editor.
+ *
+ * @param curText string - the current CodeMirror text
+ * @param newText string - the new CodeMirror text
+ * @param updateCallback Callback to process the CodeMirror transaction
+ */
+export var updateCMSelection = function updateCMSelection(curText, newText, updateCallback) {
+  if (newText !== curText) {
+    var start = 0,
+      curEnd = curText.length,
+      newEnd = newText.length;
+    while (start < curEnd && curText.charCodeAt(start) === newText.charCodeAt(start)) {
+      ++start;
+    }
+    while (curEnd > start && newEnd > start && curText.charCodeAt(curEnd - 1) === newText.charCodeAt(newEnd - 1)) {
+      curEnd--;
+      newEnd--;
+    }
+    updateCallback({
+      changes: {
+        from: start,
+        to: curEnd,
+        insert: newText.slice(start, newEnd)
+      }
+    });
+  }
+};

package/dist/esm/nodeviews/extensions/bidiCharWarning.js

@@ -0,0 +1,77 @@
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/**
+ * Code based on warning from @atlaskit/code
+ */
+import { EditorView as CodeMirror, ViewPlugin, Decoration, MatchDecorator, WidgetType } from '@codemirror/view';
+var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+var placeholderMatcher = new MatchDecorator({
+  regexp: bidiCharacterRegex,
+  decoration: function decoration(match) {
+    return Decoration.replace({
+      widget: new PlaceholderWidget(match[0])
+    });
+  }
+});
+export var bidiCharWarningExtension = ViewPlugin.fromClass( /*#__PURE__*/function () {
+  function _class(view) {
+    _classCallCheck(this, _class);
+    this.placeholders = placeholderMatcher.createDeco(view);
+  }
+  return _createClass(_class, [{
+    key: "update",
+    value: function update(_update) {
+      this.placeholders = placeholderMatcher.updateDeco(_update, this.placeholders);
+    }
+  }]);
+}(), {
+  decorations: function decorations(instance) {
+    return instance.placeholders;
+  },
+  provide: function provide(plugin) {
+    return CodeMirror.atomicRanges.of(function (view) {
+      var _view$plugin;
+      return ((_view$plugin = view.plugin(plugin)) === null || _view$plugin === void 0 ? void 0 : _view$plugin.placeholders) || Decoration.none;
+    });
+  }
+});
+function getBidiCharacterCode(bidiCharacter) {
+  var _bidiCharacter$codePo;
+  var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
+  return "U+".concat(bidiCharacterCode);
+}
+var PlaceholderWidget = /*#__PURE__*/function (_WidgetType) {
+  function PlaceholderWidget(name) {
+    var _this;
+    _classCallCheck(this, PlaceholderWidget);
+    _this = _callSuper(this, PlaceholderWidget);
+    _this.name = name;
+    return _this;
+  }
+  _inherits(PlaceholderWidget, _WidgetType);
+  return _createClass(PlaceholderWidget, [{
+    key: "eq",
+    value: function eq(other) {
+      return this.name === other.name;
+    }
+  }, {
+    key: "toDOM",
+    value: function toDOM() {
+      var elt = document.createElement('span');
+      elt.setAttribute('data-bidi-character-code', this.name);
+      elt.style.cssText = "\n      padding: 0 3px;\n      color: ".concat("var(--ds-text-warning, #A54800)", ";\n\t\t\tbackground: ", "var(--ds-background-warning, #FFF7D6)", ";\n\t\t\taria-hidden=\"true\"");
+      elt.textContent = "<".concat(getBidiCharacterCode(this.name), ">");
+      return elt;
+    }
+  }, {
+    key: "ignoreEvent",
+    value: function ignoreEvent() {
+      return false;
+    }
+  }]);
+}(WidgetType);

package/dist/esm/nodeviews/extensions/keymap/backspace.js

@@ -0,0 +1,27 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var backspaceKeymap = function backspaceKeymap(_ref) {
+  var _getPos;
+  var cm = _ref.cm,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    getNode = _ref.getNode;
+  var ranges = cm.state.selection.ranges;
+  if (ranges.length > 1) {
+    return false;
+  }
+  var selection = ranges[0];
+  if (selection && (!selection.empty || selection.anchor > 0)) {
+    return false;
+  }
+  if (cm.state.doc.lines >= 2) {
+    return false;
+  }
+  var state = view.state;
+  var pos = (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : 0;
+  var node = getNode();
+  var tr = state.tr.replaceWith(pos, pos + node.nodeSize, state.schema.nodes.paragraph.createChecked({}, node.content));
+  tr.setSelection(TextSelection.near(tr.doc.resolve(pos)));
+  view.dispatch(tr);
+  view.focus();
+  return true;
+};