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

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @atlaskit/editor-plugin-code-block-advanced
+
+## 1.0.0
+
+### Major Changes
+
+- [#100411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100411)
+  [`14499ab145534`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14499ab145534) -
+  [ux] Introduces advanced code block as per:
+  https://hello.atlassian.net/wiki/spaces/EDITOR/pages/4632293323/Editor+RFC+063+Advanced+code+blocks.
+  This can be added to an existing editor preset to enrich the code block experience with syntax
+  highlighting and can be extended for other features via CodeMirror extensions (ie. autocompletion,
+  code folding etc.).

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1 @@
+# Editor plugin code block-advanced

package/afm-cc/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*",
+        "../src/**/examples.*"
+    ],
+    "references": [
+        {
+            "path": "../../editor-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-code-block/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-editor-disabled/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+        }
+    ]
+}

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "../tsconfig",
+	"compilerOptions": {
+		"target": "es5",
+		"paths": {}
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	]
+}

package/dist/cjs/codeBlockAdvancedPlugin.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockAdvancedPlugin = void 0;
+var _codeBlockNodeWithToDOMFixed = require("./nodeviews/codeBlockNodeWithToDOMFixed");
+var _main = require("./pm-plugins/main");
+var codeBlockAdvancedPlugin = exports.codeBlockAdvancedPlugin = function codeBlockAdvancedPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  return {
+    name: 'codeBlockAdvanced',
+    nodes: function nodes() {
+      return [{
+        name: 'codeBlock',
+        node: (0, _codeBlockNodeWithToDOMFixed.codeBlockNodeWithFixedToDOM)()
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'codeBlockAdvancedPlugin',
+        plugin: function plugin() {
+          var _config$extensions;
+          return (0, _main.createPlugin)({
+            api: api,
+            extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : []
+          });
+        }
+      }];
+    }
+  };
+};

package/dist/cjs/codeBlockAdvancedPluginType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "codeBlockAdvancedPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _codeBlockAdvancedPlugin.codeBlockAdvancedPlugin;
+  }
+});
+var _codeBlockAdvancedPlugin = require("./codeBlockAdvancedPlugin");

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCodeBlockAdvancedNodeView = 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 _autocomplete = require("@codemirror/autocomplete");
+var _language = require("@codemirror/language");
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
+var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
+var _theme = require("../ui/theme");
+var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
+var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
+var _bidiCharWarning = require("./extensions/bidiCharWarning");
+var _keymap = require("./extensions/keymap");
+var _loader = require("./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;
+    (0, _classCallCheck2.default)(this, CodeBlockAdvancedNodeView);
+    (0, _defineProperty2.default)(this, "lineWrappingCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "languageCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "readOnlyCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
+    (0, _defineProperty2.default)(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 _loader.LanguageLoader(function (lang) {
+      _this.updating = true;
+      _this.cm.dispatch({
+        effects: _this.languageCompartment.reconfigure(lang)
+      });
+      _this.updating = false;
+    });
+    this.cm = new _view.EditorView({
+      doc: this.node.textContent,
+      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), (0, _keymap.keymapExtension)({
+        view: view,
+        getPos: getPos,
+        getNode: getNode,
+        selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
+        onMaybeNodeSelection: onMaybeNodeSelection
+      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _view.lineNumbers)(), _view.EditorView.updateListener.of(function (update) {
+        return _this.forwardUpdate(update);
+      }), this.readOnlyCompartment.of(_view.EditorView.editable.of(this.view.editable)), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
+        class: 'code-block'
+      }), _bidiCharWarning.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 (0, _createClass2.default)(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;
+      (0, _syncCMWithPM.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(_view.EditorView.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: _state2.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 !== (0, _codeBlock.isCodeBlockWordWrapEnabled)(node)) {
+        this.updating = true;
+        this.cm.dispatch({
+          effects: [this.lineWrappingCompartment.reconfigure((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.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();
+      (0, _updateCMSelection.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: _state.EditorSelection.create([_state.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 _state2.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;
+    }
+  }]);
+}();
+var getCodeBlockAdvancedNodeView = exports.getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
+  return function (node, view, getPos) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  };
+};

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBlockNodeWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _styles = require("@atlaskit/editor-common/styles");
+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 codeBlockClassNames = {
+  container: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
+  start: _styles.CodeBlockSharedCssClassName.CODEBLOCK_START,
+  end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
+  contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
+  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+  gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+  content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+  lineNumberWidget: _styles.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'
+  }]];
+};
+var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
+  return _objectSpread(_objectSpread({}, _adfSchema.codeBlock), {}, {
+    toDOM: function toDOM(node) {
+      return _toDOM(node, false, '');
+    }
+  });
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.syncCMWithPM = void 0;
+var _state = require("@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
+ */
+var syncCMWithPM = exports.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(_state.TextSelection.create(tr.doc, selFrom, selTo));
+    view.dispatch(tr);
+  }
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateCMSelection = void 0;
+/**
+ *
+ * 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
+ */
+var updateCMSelection = exports.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/cjs/nodeviews/extensions/bidiCharWarning.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bidiCharWarningExtension = void 0;
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _view = require("@codemirror/view");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
+ */
+var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+var placeholderMatcher = new _view.MatchDecorator({
+  regexp: bidiCharacterRegex,
+  decoration: function decoration(match) {
+    return _view.Decoration.replace({
+      widget: new PlaceholderWidget(match[0])
+    });
+  }
+});
+var bidiCharWarningExtension = exports.bidiCharWarningExtension = _view.ViewPlugin.fromClass( /*#__PURE__*/function () {
+  function _class(view) {
+    (0, _classCallCheck2.default)(this, _class);
+    this.placeholders = placeholderMatcher.createDeco(view);
+  }
+  return (0, _createClass2.default)(_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 _view.EditorView.atomicRanges.of(function (view) {
+      var _view$plugin;
+      return ((_view$plugin = view.plugin(plugin)) === null || _view$plugin === void 0 ? void 0 : _view$plugin.placeholders) || _view.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;
+    (0, _classCallCheck2.default)(this, PlaceholderWidget);
+    _this = _callSuper(this, PlaceholderWidget);
+    _this.name = name;
+    return _this;
+  }
+  (0, _inherits2.default)(PlaceholderWidget, _WidgetType);
+  return (0, _createClass2.default)(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;
+    }
+  }]);
+}(_view.WidgetType);

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.backspaceKeymap = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var backspaceKeymap = exports.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(_state.TextSelection.near(tr.doc.resolve(pos)));
+  view.dispatch(tr);
+  view.focus();
+  return true;
+};