@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/esm/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -0,0 +1,146 @@
+/**
+ * This plugin ensures that certain nodes (such as tables, and various extension ones)
+ * have a unique `localId` attribute value for `fragment` marks.
+ * It also ensures the preservation of these IDs when nodes are being cut-and-pasted
+ * around the document.
+ *
+ * The implementation has been _heavily_ borrowed from
+ * - packages/editor/editor-core/src/plugins/table/pm-plugins/table-local-id.ts
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { uuid } from '@atlaskit/adf-schema';
+import { stepAddsOneOf } from '../../../utils/step';
+var pluginKey = new PluginKey('fragmentMarkConsistencyPlugin');
+/**
+ * Traverses a transaction's steps to see if we're inserting a node which supports a fragment mark
+ */
+
+var checkIsAddingSupportedNode = function checkIsAddingSupportedNode(schema, transaction) {
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  return transaction.steps.some(function (step) {
+    return nodesSupportingFragmentMark.some(function (nodeType) {
+      return stepAddsOneOf(step, new Set([nodeType]));
+    });
+  });
+};
+
+var getNodesSupportingFragmentMark = function getNodesSupportingFragmentMark(schema) {
+  var _schema$nodes = schema.nodes,
+      table = _schema$nodes.table,
+      extension = _schema$nodes.extension,
+      bodiedExtension = _schema$nodes.bodiedExtension,
+      inlineExtension = _schema$nodes.inlineExtension;
+  return [table, extension, bodiedExtension, inlineExtension];
+};
+
+var regenerateFragmentIdIfNeeded = function regenerateFragmentIdIfNeeded(_ref) {
+  var transaction = _ref.transaction,
+      schema = _ref.schema,
+      doc = _ref.doc,
+      shouldRegenerateLocalId = _ref.shouldRegenerateLocalId;
+  var fragment = schema.marks.fragment;
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  var transactionChanged = false;
+  doc.descendants(function (node, pos) {
+    var isSupportedNode = nodesSupportingFragmentMark.some(function (supportedNode) {
+      return node.type === supportedNode;
+    });
+
+    if (!isSupportedNode) {
+      // continue traversing
+      return true;
+    }
+
+    var existingFragmentMark = node.marks.find(function (mark) {
+      return mark.type === fragment;
+    });
+
+    if (!existingFragmentMark) {
+      // continue traversing
+      return true;
+    }
+
+    if (shouldRegenerateLocalId(existingFragmentMark.attrs.localId)) {
+      transactionChanged = true;
+      transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(function (mark) {
+        if (mark.type === fragment) {
+          mark.attrs.localId = uuid.generate();
+        }
+
+        return mark;
+      }));
+    }
+    /**
+     * Continue traversing, as we can encounter inline extension nodes pretty much anywhere
+     */
+
+
+    return true;
+  });
+  return {
+    transactionChanged: transactionChanged
+  };
+};
+/**
+ * Ensures presence of `fragment` mark on certain node types and the uniqueness of their `localId` attributes
+ */
+
+
+export var createPlugin = function createPlugin(dispatch) {
+  return new SafePlugin({
+    key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var modified = false;
+      var tr = newState.tr;
+      transactions.forEach(function (transaction) {
+        var fragmentLocalIdsObserved = new Set();
+
+        if (!transaction.docChanged) {
+          return;
+        } // Don't interfere with cut as it clashes with fixTables & we don't need
+        // to handle any extra cut cases in this plugin
+
+
+        var uiEvent = transaction.getMeta('uiEvent');
+
+        if (uiEvent === 'cut') {
+          return;
+        }
+        /** Check if we're actually inserting a supported node, otherwise we can ignore this tr */
+
+
+        var isAddingSupportedNode = checkIsAddingSupportedNode(newState.schema, transaction);
+
+        if (!isAddingSupportedNode) {
+          return;
+        }
+
+        var _regenerateFragmentId = regenerateFragmentIdIfNeeded({
+          doc: newState.doc,
+          schema: newState.schema,
+          transaction: tr,
+          shouldRegenerateLocalId: function shouldRegenerateLocalId(localId) {
+            if (fragmentLocalIdsObserved.has(localId)) {
+              return true;
+            }
+
+            fragmentLocalIdsObserved.add(localId);
+            return false;
+          }
+        }),
+            transactionChanged = _regenerateFragmentId.transactionChanged;
+
+        if (transactionChanged) {
+          modified = true;
+        }
+      });
+
+      if (modified) {
+        return tr;
+      }
+
+      return;
+    }
+  });
+};

package/dist/esm/plugins/help-dialog/index.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { keymap } from 'prosemirror-keymap';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import * as keymaps from '../../keymaps';
 import { openHelp, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
@@ -18,7 +18,7 @@ import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openHelpCommand } from './commands';
 import { pluginKey } from './plugin-key';
 export function createPlugin(dispatch, imageEnabled) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

package/dist/esm/plugins/help-dialog/ui/index.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
@@ -25,6 +25,7 @@ import { messages as listMessages } from '../../list/messages';
 import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
 import { messages as blockTypeMessages } from '../../block-type/messages';
 import { messages as undoRedoMessages } from '../../undo-redo/messages';
+import { alignmentMessages } from '../../../ui/Alignment/messages';
 import { closeHelpCommand } from '../commands';
 import { annotationMessages } from '../../annotation/toolbar';
 var messages = defineMessages({
@@ -105,6 +106,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"));
     }
+  }, {
+    name: formatMessage(toolbarMessages.subscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSubscript;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.superscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSuperscript;
+    }
   }, {
     name: formatMessage(blockTypeMessages.heading1),
     type: 'heading',
@@ -249,6 +262,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"));
     }
+  }, {
+    name: formatMessage(alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignLeft;
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignRight),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignRight;
+    }
   }];
 };
 var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
@@ -424,7 +449,8 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
       this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
       return /*#__PURE__*/React.createElement(ModalTransition, null, this.props.isVisible ? /*#__PURE__*/React.createElement(AkModalDialog, {
         width: "large",
-        onClose: this.closeDialog
+        onClose: this.closeDialog,
+        testId: "help-modal-dialog"
       }, /*#__PURE__*/React.createElement(ModalHeader, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];

package/dist/esm/plugins/history/index.js

@@ -1,5 +1,6 @@
 import { pluginFactory } from '../../utils/plugin-state-factory';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import reducer from './reducer';
 import { HistoryActionTypes } from './actions';
 import { getPmHistoryPluginState } from './utils';
@@ -25,7 +26,7 @@ var _pluginFactory = pluginFactory(historyPluginKey, reducer),
     getPluginState = _pluginFactory.getPluginState;
 
 var createPlugin = function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, getInitialState),
     key: historyPluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {

package/dist/esm/plugins/hyperlink/Toolbar.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { stateKey } from './pm-plugins/main';
@@ -77,7 +77,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
           });
           var link = linkMark[0] && linkMark[0].attrs.href;
           var isValidUrl = isSafeUrl(link);
-          var labelOpenLink = formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarCommonMessages.unableToOpenLink);
+          var labelOpenLink = formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarCommonMessages.unableToOpenLink); // TODO: ED-14403 investigate why these are not translating?
+
           var labelUnlink = formatMessage(linkToolbarCommonMessages.unlink);
           var editLink = formatMessage(linkToolbarCommonMessages.editLink);
           var metadata = {
@@ -128,7 +129,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
               title: labelOpenLink,
               icon: OpenIcon,
               className: 'hyperlink-open-link',
-              metadata: metadata
+              metadata: metadata,
+              tabIndex: null
             }, {
               type: 'separator'
             }, {
@@ -137,7 +139,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
               onClick: removeLink(pos),
               selected: false,
               title: labelUnlink,
-              icon: UnlinkIcon
+              icon: UnlinkIcon,
+              tabIndex: null
             }]
           });
         }

package/dist/esm/plugins/hyperlink/commands.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { normalizeUrl } from './utils';
 import { stateKey, LinkAction } from './pm-plugins/main';

package/dist/esm/plugins/hyperlink/pm-plugins/fake-cursor-for-toolbar.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { fakeCursorForToolbarPluginKey } from './fake-curor-for-toolbar-plugin-key';
 import { InsertStatus, stateKey as hyperlinkStateKey } from './main';
@@ -29,7 +29,7 @@ var getInsertLinkToolbarState = function getInsertLinkToolbarState(editorState)
   return undefined;
 };
 
-var fakeCursorToolbarPlugin = new Plugin({
+var fakeCursorToolbarPlugin = new SafePlugin({
   key: fakeCursorForToolbarPluginKey,
   state: {
     init: function init() {

package/dist/esm/plugins/hyperlink/pm-plugins/main.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, TextSelection } from 'prosemirror-state';
 import uuid from 'uuid';
 import { shallowEqual } from '../../../utils';
 export var LinkAction;
@@ -225,7 +226,7 @@ var getActiveText = function getActiveText(selection) {
 
 export var stateKey = new PluginKey('hyperlinkPlugin');
 export var plugin = function plugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init(_, state) {
         var canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
@@ -236,7 +237,7 @@ export var plugin = function plugin(dispatch) {
           activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state)
         };
       },
-      apply: function apply(tr, pluginState, _oldState, newState) {
+      apply: function apply(tr, pluginState, oldState, newState) {
         var state = pluginState;
         var action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
         var inputMethod = tr.getMeta(stateKey) && tr.getMeta(stateKey).inputMethod;
@@ -267,7 +268,9 @@ export var plugin = function plugin(dispatch) {
           }, stateForAnalytics);
         }
 
-        if (tr.selectionSet) {
+        var hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
+
+        if (tr.selectionSet && hasPositionChanged) {
           state = {
             activeText: getActiveText(newState.selection),
             canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
@@ -285,6 +288,46 @@ export var plugin = function plugin(dispatch) {
         return state;
       }
     },
-    key: stateKey
+    key: stateKey,
+    props: {
+      handleDOMEvents: {
+        mouseup: function mouseup(_, event) {
+          // this prevents redundant selection transaction when clicking on link
+          // link state will be update on slection change which happens on mousedown
+          if (isLinkDirectTarget(event)) {
+            event.preventDefault();
+            return true;
+          }
+
+          return false;
+        },
+        mousedown: function mousedown(view, event) {
+          // since link clicks are disallowed by browsers inside contenteditable
+          // so we need to handle shift+click selection ourselves in this case
+          if (!event.shiftKey || !isLinkDirectTarget(event)) {
+            return false;
+          }
+
+          var state = view.state;
+          var $anchor = state.selection.$anchor;
+          var newPosition = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+
+          if ((newPosition === null || newPosition === void 0 ? void 0 : newPosition.pos) != null && newPosition.pos !== $anchor.pos) {
+            var tr = state.tr.setSelection(TextSelection.create(state.doc, $anchor.pos, newPosition.pos));
+            view.dispatch(tr);
+            return true;
+          }
+
+          return false;
+        }
+      }
+    }
   });
-};
+};
+
+function isLinkDirectTarget(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}

package/dist/esm/plugins/hyperlink/styles.js

@@ -2,8 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
 import styled, { css } from 'styled-components';
-import { linkSharedStyle } from '@atlaskit/editor-common';
+import { linkSharedStyle } from '@atlaskit/editor-common/styles';
 export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n"])), linkSharedStyle);
 /**
  * Visible only to screenreaders. Use when there is a need