@atlaskit/editor-plugin-code-block-advanced 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,12 +33,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^99.4.0",
-		"@atlaskit/editor-plugin-code-block": "^3.5.0",
+		"@atlaskit/editor-common": "^99.5.0",
+		"@atlaskit/editor-plugin-code-block": "^3.6.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
+		"@atlaskit/editor-plugin-find-replace": "^1.7.0",
 		"@atlaskit/editor-plugin-selection": "^1.6.0",
+		"@atlaskit/editor-plugin-selection-marker": "^1.6.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/tokens": "^3.1.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",

package/src/codeBlockAdvancedPluginType.ts

@@ -3,12 +3,20 @@ import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 
 export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 	'codeBlockAdvanced',
 	{
-		dependencies: [CodeBlockPlugin, SelectionPlugin, OptionalPlugin<EditorDisabledPlugin>];
+		dependencies: [
+			CodeBlockPlugin,
+			SelectionPlugin,
+			OptionalPlugin<EditorDisabledPlugin>,
+			OptionalPlugin<SelectionMarkerPlugin>,
+			OptionalPlugin<FindReplacePlugin>,
+		];
 		pluginConfiguration:
 			| {
 					extensions?: Extension[];

package/src/nodeviews/codeBlockAdvanced.ts

@@ -1,6 +1,6 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-import { syntaxHighlighting } from '@codemirror/language';
-import { Compartment, Extension, EditorSelection } from '@codemirror/state';
+import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
+import { Compartment, Extension, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -13,7 +13,12 @@ import type {
 import { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type {
+	Decoration,
+	DecorationSource,
+	EditorView,
+	NodeView,
+} from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -21,8 +26,9 @@ 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 { manageSelectionMarker } from './extensions/manageSelectionMarker';
+import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
 import { LanguageLoader } from './languages/loader';
 
 interface ConfigProps {
@@ -38,6 +44,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private lineWrappingCompartment = new Compartment();
 	private languageCompartment = new Compartment();
 	private readOnlyCompartment = new Compartment();
+	private pmDecorationsCompartment = new Compartment();
 	private node: PMNode;
 	private getPos: getPosHandlerNode;
 	private cm: CodeMirror;
@@ -45,8 +52,8 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private maybeTryingToReachNodeSelection = false;
 	private cleanupDisabledState: (() => void) | undefined;
 	private languageLoader: LanguageLoader;
+	private pmFacet = Facet.define<DecorationSource>();
 
-	// eslint-disable-next-line @typescript-eslint/max-params
 	constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps) {
 		this.node = node;
 		this.view = view;
@@ -71,15 +78,18 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				...config.extensions,
 				this.lineWrappingCompartment.of([]),
 				this.languageCompartment.of([]),
+				this.pmDecorationsCompartment.of([]),
 				keymapExtension({
 					view,
 					getPos,
 					getNode,
 					selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
 					onMaybeNodeSelection,
+					customFindReplace: Boolean(config.api?.findReplace),
 				}),
 				cmTheme,
 				syntaxHighlighting(highlightStyle),
+				bracketMatching(),
 				lineNumbers(),
 				// Explicitly disable "sticky" positioning on line numbers to match
 				// Renderer behaviour
@@ -88,7 +98,8 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)),
 				closeBrackets(),
 				CodeMirror.editorAttributes.of({ class: 'code-block' }),
-				bidiCharWarningExtension,
+				manageSelectionMarker(config.api),
+				prosemirrorDecorationPlugin(this.pmFacet, view, getPos),
 			],
 		});
 
@@ -166,7 +177,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		}
 	}
 
-	update(node: PMNode) {
+	update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource) {
 		this.maybeTryingToReachNodeSelection = false;
 
 		if (node.type !== this.node.type) {
@@ -185,9 +196,24 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			this.cm.dispatch(tr);
 			this.updating = false;
 		});
+		this.updateProseMirrorDecorations(innerDecorations);
 		return true;
 	}
 
+	/**
+	 * Updates a facet which stores information on the prosemirror decorations
+	 *
+	 * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+	 */
+	private updateProseMirrorDecorations(decorationSource: DecorationSource) {
+		this.updating = true;
+		const computedFacet = this.pmFacet.compute([], () => decorationSource);
+		this.cm.dispatch({
+			effects: this.pmDecorationsCompartment.reconfigure(computedFacet),
+		});
+		this.updating = false;
+	}
+
 	stopEvent(e: Event) {
 		if (e instanceof MouseEvent && e.type === 'mousedown') {
 			// !Warning: Side effect!

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -69,6 +69,7 @@ const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
 							textAlign: 'right',
 							color: token('color.text.subtlest'),
 							fontFamily: token('font.family.code'),
+							whiteSpace: 'pre-wrap',
 						}),
 						'data-label': content,
 					},

package/src/nodeviews/codemirrorSync/syncCMWithPM.ts

@@ -25,7 +25,6 @@ export const syncCMWithPM = ({ view, update, offset }: Props): void => {
 	const pmSel = view.state.selection;
 	if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
 		const tr = view.state.tr;
-		// eslint-disable-next-line @typescript-eslint/max-params
 		update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
 			if (text.length) {
 				tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));

package/src/nodeviews/extensions/keymap/index.ts

@@ -2,6 +2,7 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { Extension } from '@codemirror/state';
 import { KeyBinding, keymap as cmKeymap } from '@codemirror/view';
 
+import { browser } from '@atlaskit/editor-common/browser';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
 import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import { exitCode } from '@atlaskit/editor-prosemirror/commands';
@@ -18,6 +19,7 @@ interface KeymapProps {
 	getPos: getPosHandlerNode;
 	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
 	onMaybeNodeSelection: () => void;
+	customFindReplace: boolean;
 }
 
 export const keymapExtension = ({
@@ -26,9 +28,17 @@ export const keymapExtension = ({
 	getPos,
 	selectCodeBlockNode,
 	onMaybeNodeSelection,
+	customFindReplace,
 }: KeymapProps): Extension => {
 	return cmKeymap.of(
-		codeBlockKeymap({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection }),
+		codeBlockKeymap({
+			view,
+			getNode,
+			getPos,
+			selectCodeBlockNode,
+			onMaybeNodeSelection,
+			customFindReplace,
+		}),
 	);
 };
 
@@ -38,6 +48,7 @@ const codeBlockKeymap = ({
 	getPos,
 	selectCodeBlockNode,
 	onMaybeNodeSelection,
+	customFindReplace,
 }: KeymapProps): readonly KeyBinding[] => {
 	return [
 		{
@@ -96,6 +107,25 @@ const codeBlockKeymap = ({
 					onMaybeNodeSelection,
 				}),
 		},
+		{
+			key: 'Ctrl-f',
+			mac: 'Cmd-f',
+			run: () => {
+				// Pass synthetic event to prosemirror
+				if (customFindReplace) {
+					view.dispatchEvent(
+						new KeyboardEvent('keydown', {
+							key: 'f',
+							code: 'KeyF',
+							metaKey: browser.mac ? true : false,
+							ctrlKey: browser.mac ? false : true,
+						}),
+					);
+					return true;
+				}
+				return false;
+			},
+		},
 		{
 			key: 'Ctrl-Enter',
 			run: () => {

package/src/nodeviews/extensions/manageSelectionMarker.ts

@@ -0,0 +1,28 @@
+import { Extension } from '@codemirror/state';
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+export const manageSelectionMarker = (
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined,
+): Extension => {
+	let decoHide: (() => void) | undefined;
+	return CodeMirror.focusChangeEffect.of((_state, focusing) => {
+		if (focusing) {
+			api?.selectionMarker?.actions.queueHideDecoration((hideDecoration) => {
+				decoHide = hideDecoration;
+			});
+		} else {
+			decoHide?.();
+		}
+		return null;
+	});
+};

package/src/nodeviews/extensions/prosemirrorDecorations.ts

@@ -0,0 +1,156 @@
+import { Facet } from '@codemirror/state';
+import {
+	ViewPlugin,
+	WidgetType,
+	Decoration as CodeMirrorDecoration,
+	EditorView as CodeMirror,
+	DecorationSet,
+	ViewUpdate,
+} from '@codemirror/view';
+
+import type { EditorView, Decoration, DecorationSource } from '@atlaskit/editor-prosemirror/view';
+
+class PMWidget extends WidgetType {
+	constructor(readonly toDOMElement: HTMLElement) {
+		super();
+	}
+	toDOM() {
+		return this.toDOMElement;
+	}
+	ignoreEvent() {
+		return false;
+	}
+}
+
+// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+type WidgetConstructor = ((view: EditorView, getPos: () => number | undefined) => Node) | Node;
+
+// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+interface ExtendedProseMirrorDecoration extends Decoration {
+	inline: boolean;
+	widget: boolean;
+	type: {
+		attrs?: Record<string, string>;
+		toDOM?: WidgetConstructor;
+		side?: number;
+	};
+}
+
+// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+function isExtendedDecoration(decoration: Decoration): decoration is ExtendedProseMirrorDecoration {
+	return (
+		(decoration as ExtendedProseMirrorDecoration).inline !== undefined &&
+		(decoration as ExtendedProseMirrorDecoration).widget !== undefined &&
+		(decoration as ExtendedProseMirrorDecoration).type !== undefined
+	);
+}
+
+const getHTMLElement = (
+	toDOM: WidgetConstructor | undefined,
+	view: EditorView,
+	getPos: () => number | undefined,
+): HTMLElement | undefined => {
+	if (toDOM instanceof Function) {
+		const element = toDOM(view, getPos);
+		return element instanceof HTMLElement ? element : undefined;
+	} else if (toDOM instanceof HTMLElement) {
+		return toDOM;
+	}
+};
+
+const mapPMDecorationToCMDecoration = (
+	decoration: Decoration,
+	view: EditorView,
+	getPos: () => number | undefined,
+) => {
+	if (!isExtendedDecoration(decoration)) {
+		return undefined;
+	}
+	if (decoration.inline) {
+		const markDecoration = CodeMirrorDecoration.mark({
+			attributes: decoration.type.attrs,
+		});
+		return markDecoration.range(decoration.from, decoration.to);
+	} else if (decoration.widget) {
+		const toDOM = getHTMLElement(decoration?.type?.toDOM, view, getPos);
+		if (!toDOM) {
+			return undefined;
+		}
+
+		const widgetDecoration = CodeMirrorDecoration.widget({
+			widget: new PMWidget(toDOM),
+			side: decoration.type.side,
+		});
+		return widgetDecoration.range(decoration.from, decoration.to);
+	}
+};
+
+function isDefined<TValue>(value: TValue | undefined): value is TValue {
+	return value !== undefined;
+}
+
+/**
+ * Creates CodeMirror versions of the decorations provided by ProseMirror.
+ *
+ * Inline ProseMirror decorations -> Mark CodeMirror decorations
+ * Widget ProseMirror decorations -> Widget CodeMirror decorations
+ *
+ * This way any decorations applied in ProseMirror land should automatically be supported
+ * by the CodeMirror editor
+ *
+ * @param updateDecorationsEffect Facet for the prosemirror decorations
+ * @returns CodeMirror extension
+ */
+export const prosemirrorDecorationPlugin = (
+	updateDecorationsEffect: Facet<DecorationSource>,
+	editorView: EditorView,
+	getPos: () => number | undefined,
+) =>
+	ViewPlugin.fromClass(
+		class {
+			decorations: DecorationSet;
+
+			constructor(view: CodeMirror) {
+				this.decorations = this.updateDecorations(view);
+			}
+			updateDecorations(view: CodeMirror) {
+				const { from, to } = view.viewport;
+
+				const innnerDecorations = view.state.facet(updateDecorationsEffect);
+				const allDecorations: Decoration[] = [];
+				innnerDecorations?.map((source) => {
+					// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
+					// Once we do our prosemirror bump (very soon) we should remove this.
+					// https://product-fabric.atlassian.net/browse/ED-26398
+					// @ts-ignore
+					source?.forEachSet((set) => {
+						const decorations = set
+							.find(from, to)
+							// Do not render the code block line decorations
+							// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
+							// Once we do our prosemirror bump (very soon) we should remove this.
+							// https://product-fabric.atlassian.net/browse/ED-26398
+							// @ts-ignore
+							.filter((dec) => dec.spec.type !== 'decorationWidgetType');
+						allDecorations.push(...decorations);
+					});
+				});
+
+				const cmDecorations = allDecorations
+					.sort((a, b) => (a.from < b.from ? -1 : 1))
+					.map((decoration) => mapPMDecorationToCMDecoration(decoration, editorView, getPos))
+					.filter(isDefined);
+
+				return CodeMirrorDecoration.set(cmDecorations);
+			}
+			update(update: ViewUpdate) {
+				this.decorations = this.updateDecorations(update.view);
+			}
+		},
+		{
+			decorations: (v) => v.decorations,
+		},
+	);

package/tsconfig.app.json

@@ -43,9 +43,15 @@
 		{
 			"path": "../editor-plugin-editor-disabled/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-find-replace/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-selection/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-selection-marker/tsconfig.app.json"
+		},
 		{
 			"path": "../../design-system/tokens/tsconfig.app.json"
 		}

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

@@ -1,83 +0,0 @@
-"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/es2019/nodeviews/extensions/bidiCharWarning.js

@@ -1,53 +0,0 @@
-/**
- * Code based on warning from @atlaskit/code
- */
-import { EditorView as CodeMirror, ViewPlugin, Decoration, MatchDecorator, WidgetType } from '@codemirror/view';
-const bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/gu;
-const placeholderMatcher = new MatchDecorator({
-  regexp: bidiCharacterRegex,
-  decoration: match => Decoration.replace({
-    widget: new PlaceholderWidget(match[0])
-  })
-});
-export const bidiCharWarningExtension = ViewPlugin.fromClass(class {
-  constructor(view) {
-    this.placeholders = placeholderMatcher.createDeco(view);
-  }
-  update(update) {
-    this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
-  }
-}, {
-  decorations: instance => instance.placeholders,
-  provide: plugin => CodeMirror.atomicRanges.of(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;
-  const bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
-  return `U+${bidiCharacterCode}`;
-}
-class PlaceholderWidget extends WidgetType {
-  constructor(name) {
-    super();
-    this.name = name;
-  }
-  eq(other) {
-    return this.name === other.name;
-  }
-  toDOM() {
-    const elt = document.createElement('span');
-    elt.setAttribute('data-bidi-character-code', this.name);
-    elt.style.cssText = `
-      padding: 0 3px;
-      color: ${"var(--ds-text-warning, #A54800)"};
-			background: ${"var(--ds-background-warning, #FFF7D6)"};
-			aria-hidden="true"`;
-    elt.textContent = `<${getBidiCharacterCode(this.name)}>`;
-    return elt;
-  }
-  ignoreEvent() {
-    return false;
-  }
-}

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

@@ -1,77 +0,0 @@
-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/types/nodeviews/extensions/bidiCharWarning.d.ts

@@ -1,8 +0,0 @@
-/**
- * Code based on warning from @atlaskit/code
- */
-import { ViewPlugin, ViewUpdate, DecorationSet } from '@codemirror/view';
-export declare const bidiCharWarningExtension: ViewPlugin<{
-    placeholders: DecorationSet;
-    update(update: ViewUpdate): void;
-}>;