@atlaskit/editor-common 76.34.0 → 76.36.0

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -0,0 +1,257 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2;
+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; }
+/** @jsx jsx */
+
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { createDispatch } from '../../event-dispatcher';
+import { useSharedPluginState } from '../../hooks';
+import { analyticsEventKey, calculateBreakoutStyles } from '../../utils';
+import { WithPluginState } from '../../with-plugin-state';
+var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node,
+    eventDispatcher = _ref.eventDispatcher;
+  var actions = React.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        var updateActiveChildResult = updateActiveChild(index);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.CHANGE_ACTIVE, node, eventDispatcher);
+        }
+        return updateActiveChildResult;
+      },
+      addChild: function addChild() {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        if (node.content.childCount >= node.attrs.maxFrames) {
+          throw new Error("Cannot add more than ".concat(node.attrs.maxFrames, " frames"));
+        }
+        var p = state.schema.nodes.paragraph.createAndFill({});
+        if (!p) {
+          throw new Error('Could not create paragraph');
+        }
+        var frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
+        var pos = getPos();
+        if (typeof pos !== 'number' || !frame) {
+          throw new Error('Could not create frame or position not valid');
+        }
+        var insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
+        dispatch(state.tr.insert(insertAt, frame));
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.ADD_CHILD, node, eventDispatcher);
+        }
+        return true;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return node.content.childCount;
+      },
+      removeChild: function removeChild(index) {
+        var pos = getPos();
+        // TODO: Add child index validation here, don't trust this data
+        if (typeof pos !== 'number' || typeof index !== 'number') {
+          throw new Error('Position or index not valid');
+        }
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        if (node.content.childCount === 1) {
+          var _tr = state.tr;
+          _tr.deleteRange(pos, pos + node.content.size);
+          dispatch(_tr);
+          return true;
+        }
+        var $pos = state.doc.resolve(pos);
+        var $startNodePos = state.doc.resolve($pos.start($pos.depth + 1));
+        var startFramePosition = $startNodePos.posAtIndex(index);
+        var maybeFrameNode = state.doc.nodeAt(startFramePosition);
+        if (!maybeFrameNode) {
+          throw new Error('Could not find frame node');
+        }
+        var endFramePosition = maybeFrameNode.content.size + startFramePosition;
+        var tr = state.tr;
+        tr.deleteRange(startFramePosition, endFramePosition);
+        dispatch(tr);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.REMOVE_CHILD, node, eventDispatcher);
+        }
+        return true;
+      },
+      updateParameters: function updateParameters(parameters) {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          throw new Error('Position not valid');
+        }
+        var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
+            macroParams: parameters
+          })
+        }));
+        dispatch(tr);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.UPDATE_PARAMETERS, node, eventDispatcher);
+        }
+        return true;
+      },
+      getChildren: function getChildren() {
+        var _state$doc$nodeAt;
+        var state = editorView.state;
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return [];
+        }
+        var children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDERN, node, eventDispatcher);
+        }
+        return children ? children.toJSON() : [];
+      }
+    };
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  return actions;
+};
+var navigationCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n"])), "var(--ds-border, ".concat(N40, ")"));
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
+  var node = _ref2.node,
+    handleContentDOMRef = _ref2.handleContentDOMRef,
+    getPos = _ref2.getPos,
+    tryExtensionHandler = _ref2.tryExtensionHandler,
+    editorView = _ref2.editorView,
+    eventDispatcher = _ref2.eventDispatcher,
+    widthState = _ref2.widthState,
+    editorAppearance = _ref2.editorAppearance;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  // Adding to avoid aliasing `this` for the callbacks
+  var updateActiveChild = React.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      setActiveChildIndex(0);
+      throw new Error('Index is not valid');
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    editorView: editorView,
+    getPos: getPos,
+    eventDispatcher: eventDispatcher,
+    node: node
+  });
+  var extensionHandlerResult = React.useMemo(function () {
+    return tryExtensionHandler(actions);
+  }, [tryExtensionHandler, actions]);
+  var articleRef = React.useCallback(function (node) {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  var mbeContainerStyles = {};
+  if (shouldBreakout) {
+    var _calculateBreakoutSty = calculateBreakoutStyles({
+        mode: node.attrs.layout,
+        widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+        widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+      }),
+      breakoutStyles = _extends({}, (_objectDestructuringEmpty(_calculateBreakoutSty), _calculateBreakoutSty));
+    mbeContainerStyles = breakoutStyles;
+  }
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
+  }, jsx("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, extensionHandlerResult), jsx("article", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  }));
+};
+var sendMBEAnalyticsEvent = function sendMBEAnalyticsEvent(action, node, eventDispatcher) {
+  var analyticsDispatch = createDispatch(eventDispatcher);
+  analyticsDispatch(analyticsEventKey, {
+    payload: {
+      action: action,
+      actionSubject: ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionType: node.attrs.extensionType,
+        extensionKey: node.attrs.extensionKey,
+        localId: node.attrs.localId,
+        maxFramesCount: node.attrs.maxFrames,
+        currentFramesCount: node.content.childCount
+      }
+    }
+  });
+};
+var MultiBodiedExtensionWithSharedState = function MultiBodiedExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return jsx(MultiBodiedExtensionWithWidth, _extends({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? jsx(MultiBodiedExtensionDeprecated, props) : jsx(MultiBodiedExtensionWithSharedState, props);
+};
+
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
+  return jsx(WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: function render(_ref3) {
+      var widthState = _ref3.widthState;
+      return jsx(MultiBodiedExtensionWithWidth, _extends({
+        widthState: widthState
+      }, props));
+    }
+  });
+};
+/**
+ * End workaround
+ */
+
+export default MultiBodiedExtension;

package/dist/esm/extensibility/extensionNodeView.js

@@ -0,0 +1,83 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React from 'react';
+import ReactNodeView from '../react-node-view';
+import { Extension } from './Extension';
+import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
+// getInlineNodeViewProducer is a new api to use instead of ReactNodeView
+// when creating inline node views, however, it is difficult to test the impact
+// on selections when migrating inlineExtension to use the new api.
+// The ReactNodeView api will be visited in the second phase of the selections
+// project whilst investigating block nodes. We will revisit the Extension node view there too.
+export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(ExtensionNode, _ReactNodeView);
+  var _super = _createSuper(ExtensionNode);
+  function ExtensionNode() {
+    _classCallCheck(this, ExtensionNode);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ExtensionNode, [{
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      // Extensions can perform async operations that will change the DOM.
+      // To avoid having their tree rebuilt, we need to ignore the mutation
+      // for atom based extensions if its not a layout, we need to give
+      // children a chance to recalc
+      return this.node.type.isAtom || mutation.type !== 'selection' && mutation.attributeName !== 'data-layout';
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      if (this.node.isInline) {
+        return;
+      }
+      var dom = document.createElement('div');
+      dom.className = "".concat(this.node.type.name, "-content-dom-wrapper");
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      var _props$extensionNodeV;
+      return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
+        nodeType: this.node.type.name
+      }, /*#__PURE__*/React.createElement(Extension, {
+        editorView: this.view,
+        node: this.node,
+        eventDispatcher: this.eventDispatcher
+        // The getPos arg is always a function when used with nodes
+        // the version of the types we use has a union with the type
+        // for marks.
+        // This has been fixed in later versions of the definitly typed
+        // types (and also in prosmirror-views inbuilt types).
+        // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57384
+        ,
+        getPos: this.getPos,
+        providerFactory: props.providerFactory,
+        handleContentDOMRef: forwardRef,
+        extensionHandlers: props.extensionHandlers,
+        editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
+        pluginInjectionApi: props.pluginInjectionApi
+      }));
+    }
+  }]);
+  return ExtensionNode;
+}(ReactNodeView);
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory,
+      extensionHandlers: extensionHandlers,
+      extensionNodeViewOptions: extensionNodeViewOptions,
+      pluginInjectionApi: pluginInjectionApi
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
+}

package/dist/esm/extensibility/index.js

@@ -0,0 +1,4 @@
+export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
+export { Extension } from './Extension';
+export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
+export { ExtensionComponent } from './ExtensionComponent';

package/dist/esm/extensibility/types.js

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

package/dist/esm/i18n/cs.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Aktuální úkol',
   'fabric.editor.action.description': 'Vytvořit a přiřadit aktuální úkol',
+  'fabric.editor.addColumn': 'Přidat sloupec vpravo',
   'fabric.editor.addMediaFiles': 'Přidat obrázek, video nebo soubor',
+  'fabric.editor.addRow': 'Přidat řádek pod',
   'fabric.editor.alignCenter': 'Zarovnat na střed',
   'fabric.editor.alignImageCenter': 'Zarovnat na střed',
   'fabric.editor.alignImageLeft': 'Zarovnat vlevo',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Zarovnat vlevo',
   'fabric.editor.alignRight': 'Zarovnat vpravo',
   'fabric.editor.annotationToolbar': 'Panel nástrojů poznámek',
+  'fabric.editor.backgroundColor': 'Barva pozadí',
   'fabric.editor.blockCardUnavailable': 'Vložený odkaz je uvnitř uzlu {node} a jeho zobrazení nelze změnit',
   'fabric.editor.blockDescription': 'Zobrazit další informace o odkazu, včetně souhrnu a akcí',
   'fabric.editor.blockTitle': 'Karta',
@@ -138,7 +141,6 @@ export default {
   'fabric.editor.infoPanel': 'Informační panel',
   'fabric.editor.infoPanel.description': 'Zvýraznit informace v barevném panelu',
   'fabric.editor.inlineDescription': 'Zobrazit odkaz jako vložený text',
-  'fabric.editor.inlineOverlay': 'Změnit zobrazení',
   'fabric.editor.inlineTitle': 'Vložený',
   'fabric.editor.insertColumn': 'Vložit sloupec napravo',
   'fabric.editor.insertColumnDrag': 'Vložit sloupec',
@@ -211,7 +213,8 @@ export default {
   'fabric.editor.table': 'Tabulka',
   'fabric.editor.table.description': 'Vložit tabulku',
   'fabric.editor.tableOptions': 'Možnosti tabulky',
-  'fabric.editor.tableResizeScreenReaderInformation': '{newWidth, plural, one {Šířka tabulky byla snížena na {newWidth,number} pixel.} few {Šířka tabulky byla snížena na {newWidth,number} pixely.} many {Šířka tabulky byla snížena na {newWidth,number} pixelu.} other {Šířka tabulky byla snížena na {newWidth,number} pixelů.}}',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {Šířka tabulky byla snížena na {newWidth,number} pixel.} few {Šířka tabulky byla snížena na {newWidth,number} pixely.} many {Šířka tabulky byla snížena na {newWidth,number} pixelu.} other {Šířka tabulky byla snížena na {newWidth,number} pixelů.}}',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {Šířka tabulky byla zvýšena na {newWidth,number} pixel.} few {Šířka tabulky byla zvýšena na {newWidth,number} pixely.} many {Šířka tabulky byla zvýšena na {newWidth,number} pixelu.} other {Šířka tabulky byla zvýšena na {newWidth,number} pixelů.}}',
   'fabric.editor.tables.adjustColumn': 'Upravit sloupec',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Odstranění uzlu {nodeName} způsobí, že všechny k němu připojené položky přestanou fungovat.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Odstranit',

package/dist/esm/i18n/da.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Handlingsgenstand',
   'fabric.editor.action.description': 'Opret og tildel handlingsgenstande',
+  'fabric.editor.addColumn': 'Tilføj kolonne til højre',
   'fabric.editor.addMediaFiles': 'Tilføj billede, video eller fil',
+  'fabric.editor.addRow': 'Tilføj række nedenfor',
   'fabric.editor.alignCenter': 'Centrér',
   'fabric.editor.alignImageCenter': 'Centrér',
   'fabric.editor.alignImageLeft': 'Venstrejustér',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Venstrejustér',
   'fabric.editor.alignRight': 'Højrejustér',
   'fabric.editor.annotationToolbar': 'Værktøjslinje til annotationer',
+  'fabric.editor.backgroundColor': 'Baggrundsfarve',
   'fabric.editor.blockCardUnavailable': 'Det indbyggede link er inden i {node}, og dets visning kan ikke ændres',
   'fabric.editor.blockDescription': 'Vis flere oplysninger om et link, inklusive sammendrag og handlinger',
   'fabric.editor.blockTitle': 'Kort',
@@ -138,7 +141,6 @@ export default {
   'fabric.editor.infoPanel': 'Informationspanel',
   'fabric.editor.infoPanel.description': 'Fremhæv information i et farvet panel',
   'fabric.editor.inlineDescription': 'Vis link som indbygget tekst',
-  'fabric.editor.inlineOverlay': 'Skift visning',
   'fabric.editor.inlineTitle': 'Indbyg',
   'fabric.editor.insertColumn': 'Indsæt kolonne til højre',
   'fabric.editor.insertColumnDrag': 'Indsæt kolonne',
@@ -211,7 +213,8 @@ export default {
   'fabric.editor.table': 'Tabel',
   'fabric.editor.table.description': 'Indsæt en tabel',
   'fabric.editor.tableOptions': 'Egenskaber for tabel',
-  'fabric.editor.tableResizeScreenReaderInformation': '{newWidth, plural, one {Tabelbredde reduceret til {newWidth,number} pixel.} other {Tabelbredde reduceret til {newWidth,number} pixel.}}',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {Tabelbredde reduceret til {newWidth,number} pixel.} other {Tabelbredde reduceret til {newWidth,number} pixel.}}',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {Tabelbredde øget til {newWidth,number} pixel.} other {Tabelbredde øget til {newWidth,number} pixels.}}',
   'fabric.editor.tables.adjustColumn': 'Tilpas kolonne',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Hvis du sletter {nodeName}, brydes forbindelsen til alt, der er forbundet til den.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Slet',

package/dist/esm/i18n/de.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Aufgabe',
   'fabric.editor.action.description': 'Aufgaben erstellen und zuweisen',
+  'fabric.editor.addColumn': 'Spalte rechts hinzufügen',
   'fabric.editor.addMediaFiles': 'Bild, Video oder Datei hinzufügen',
+  'fabric.editor.addRow': 'Zeile unterhalb hinzufügen',
   'fabric.editor.alignCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageLeft': 'Links ausrichten',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Links ausrichten',
   'fabric.editor.alignRight': 'Rechts ausrichten',
   'fabric.editor.annotationToolbar': 'Symbolleiste für Anmerkungen',
+  'fabric.editor.backgroundColor': 'Hintergrundfarbe',
   'fabric.editor.blockCardUnavailable': 'Die Ansicht des Inline-Links kann nicht geändert werden, da sich der Link innerhalb von {node} befindet.',
   'fabric.editor.blockDescription': 'Weitere Informationen zu einem Link anzeigen, darunter eine Zusammenfassung und Aktionen',
   'fabric.editor.blockTitle': 'Karte',
@@ -138,7 +141,6 @@ export default {
   'fabric.editor.infoPanel': 'Info-Panel',
   'fabric.editor.infoPanel.description': 'Informationen in einem farbigen Panel hervorheben',
   'fabric.editor.inlineDescription': 'Link als Inline-Text anzeigen',
-  'fabric.editor.inlineOverlay': 'Ansicht wechseln',
   'fabric.editor.inlineTitle': 'Inline',
   'fabric.editor.insertColumn': 'Spalte rechts einfügen',
   'fabric.editor.insertColumnDrag': 'Spalte einfügen',
@@ -211,7 +213,8 @@ export default {
   'fabric.editor.table': 'Tabelle',
   'fabric.editor.table.description': 'Tabelle einfügen',
   'fabric.editor.tableOptions': 'Tabellenoptionen',
-  'fabric.editor.tableResizeScreenReaderInformation': '{newWidth, plural, one {Die Tabellenbreite wurde auf {newWidth,number} Pixel verringert.} other {Die Tabellenbreite wurde auf {newWidth,number} Pixel verringert.}}',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {Die Tabellenbreite wurde auf {newWidth,number} Pixel verringert.} other {Die Tabellenbreite wurde auf {newWidth,number} Pixel verringert.}}',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {Die Tabellenbreite wurde auf {newWidth,number} Pixel erhöht.} other {Die Tabellenbreite wurde auf {newWidth,number} Pixel erhöht.}}',
   'fabric.editor.tables.adjustColumn': 'Spalte anpassen',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Durch das Löschen von {nodeName} werden alle damit verbundenen Elemente unbrauchbar.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Löschen',

package/dist/esm/i18n/en.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Action item',
   'fabric.editor.action.description': 'Create and assign action items',
+  'fabric.editor.addColumn': 'Add column right',
   'fabric.editor.addMediaFiles': 'Add image, video, or file',
+  'fabric.editor.addRow': 'Add row below',
   'fabric.editor.alignCenter': 'Align center',
   'fabric.editor.alignImageCenter': 'Align center',
   'fabric.editor.alignImageLeft': 'Align left',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Align left',
   'fabric.editor.alignRight': 'Align right',
   'fabric.editor.annotationToolbar': 'Annotation toolbar',
+  'fabric.editor.backgroundColor': 'Background Color',
   'fabric.editor.blockCardUnavailable': 'The inline link is inside {node} and cannot have its view changed',
   'fabric.editor.blockDescription': 'Display more information about a link, including a summary and actions',
   'fabric.editor.blockTitle': 'Card',
@@ -211,7 +214,10 @@ export default {
   'fabric.editor.table': 'Table',
   'fabric.editor.table.description': 'Insert a table',
   'fabric.editor.tableOptions': 'Table options',
-  'fabric.editor.tableResizeScreenReaderInformation': 'Table width decreased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': 'Table width decreased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': 'Table width increased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableSelector': 'Table size',
+  'fabric.editor.tableSelector.description': 'Add a table using popup to select a custom size',
   'fabric.editor.tables.adjustColumn': 'Adjust column',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Delete',

package/dist/esm/i18n/en_GB.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Action item',
   'fabric.editor.action.description': 'Create and assign action items',
+  'fabric.editor.addColumn': 'Add column right',
   'fabric.editor.addMediaFiles': 'Add image, video, or file',
+  'fabric.editor.addRow': 'Add row below',
   'fabric.editor.alignCenter': 'Align center',
   'fabric.editor.alignImageCenter': 'Align center',
   'fabric.editor.alignImageLeft': 'Align left',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Align left',
   'fabric.editor.alignRight': 'Align right',
   'fabric.editor.annotationToolbar': 'Annotation toolbar',
+  'fabric.editor.backgroundColor': 'Background Colour',
   'fabric.editor.blockCardUnavailable': 'The inline link is inside {node} and cannot have its view changed',
   'fabric.editor.blockDescription': 'Display more information about a link, including a summary and actions',
   'fabric.editor.blockTitle': 'Card',
@@ -138,7 +141,7 @@ export default {
   'fabric.editor.infoPanel': 'Info panel',
   'fabric.editor.infoPanel.description': 'Highlight information in a coloured panel',
   'fabric.editor.inlineDescription': 'Display link as inline text',
-  'fabric.editor.inlineOverlay': 'Change view',
+  'fabric.editor.inlineOverlay': 'Configure',
   'fabric.editor.inlineTitle': 'Inline',
   'fabric.editor.insertColumn': 'Insert column right',
   'fabric.editor.insertColumnDrag': 'Insert column',
@@ -211,7 +214,10 @@ export default {
   'fabric.editor.table': 'Table',
   'fabric.editor.table.description': 'Insert a table',
   'fabric.editor.tableOptions': 'Table options',
-  'fabric.editor.tableResizeScreenReaderInformation': 'Table width decreased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': 'Table width decreased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': 'Table width increased to {newWidth, plural, one {# pixel} other {# pixels}}.',
+  'fabric.editor.tableSelector': 'Table size',
+  'fabric.editor.tableSelector.description': 'Add a table using popup to select a custom size',
   'fabric.editor.tables.adjustColumn': 'Adjust column',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Delete',

package/dist/esm/i18n/en_ZZ.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': '⁣⁢Action item؜‍⁠⁠؜⁡‌‍⁡‍‌⁣⁤',
   'fabric.editor.action.description': '⁣⁢Create and assign action items‌‌⁡‌⁡‌؜⁠⁡⁣⁤',
+  'fabric.editor.addColumn': '⁣⁢Add column right⁠⁠‌⁠‍⁠⁡⁡⁠⁠؜⁣⁤',
   'fabric.editor.addMediaFiles': '⁣⁢Add image, video, or file‌‍؜؜‍‍؜‍؜؜‍⁣⁤',
+  'fabric.editor.addRow': '⁣⁢Add row below؜⁡⁡⁠‍‍‍‍⁡؜؜⁣⁤',
   'fabric.editor.alignCenter': '⁣⁢Align center؜⁡‍⁠⁡⁠‍⁡‌‍⁣⁤',
   'fabric.editor.alignImageCenter': '⁣⁢Align center⁡⁡‍⁠‌⁡⁠⁡⁡‌⁡⁣⁤',
   'fabric.editor.alignImageLeft': '⁣⁢Align left⁠⁠‍؜⁡⁡⁠⁡⁠‍؜‌⁡⁣⁤',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': '⁣⁢Align left؜⁠‌‍‌‍⁠؜⁠⁣⁤',
   'fabric.editor.alignRight': '⁣⁢Align right⁡‌‌‌‍‌‍‍⁡⁣⁤',
   'fabric.editor.annotationToolbar': '⁣⁢Annotation toolbar؜‌⁠‍⁡⁠⁠⁡‌⁠‌⁣⁤',
+  'fabric.editor.backgroundColor': '⁣⁢Background Color⁡‌⁡⁠⁠⁠‌‌؜‍⁡⁡‍‍⁣⁤',
   'fabric.editor.blockCardUnavailable': '⁣⁢The inline link is inside {node} and cannot have its view changed‌⁠‌⁠‍⁠⁣⁤',
   'fabric.editor.blockDescription': '⁣⁢Display more information about a link, including a summary and actions‍⁠⁡⁣⁤',
   'fabric.editor.blockTitle': '⁣⁢Card‍‌‌؜‌؜⁡‍‍‌‌؜‍؜⁠⁡⁣⁤',
@@ -138,7 +141,7 @@ export default {
   'fabric.editor.infoPanel': '⁣⁢Info panel⁡؜‍⁠‍⁡‌‍؜‍⁠؜⁣⁤',
   'fabric.editor.infoPanel.description': '⁣⁢Highlight information in a colored panel⁡⁠⁡؜‍⁣⁤',
   'fabric.editor.inlineDescription': '⁣⁢Display link as inline text‍⁠⁡‌‍⁡؜‌⁣⁤',
-  'fabric.editor.inlineOverlay': '⁣⁢Change view⁠⁠‍‌‌⁡⁡؜⁡⁣⁤',
+  'fabric.editor.inlineOverlay': '⁣⁢Configure‌‍‍؜⁡‍⁡‌؜‍‍‍؜‌⁣⁤',
   'fabric.editor.inlineTitle': '⁣⁢Inline؜؜‌‌⁠‌‌⁡‌‌⁡⁡⁠⁣⁤',
   'fabric.editor.insertColumn': '⁣⁢Insert column right⁡‍‌‌‍⁠؜‌‌‍⁡⁡؜⁠‍⁣⁤',
   'fabric.editor.insertColumnDrag': '⁣⁢Insert column؜‌‌⁠⁡⁡‍⁡؜‌⁡‌⁣⁤',
@@ -211,7 +214,10 @@ export default {
   'fabric.editor.table': '⁣⁢Table‌‌‍⁠‍‍‌⁡؜؜⁠؜؜⁣⁤',
   'fabric.editor.table.description': '⁣⁢Insert a table⁠⁠‌‍‍؜‌⁠‍⁡‌⁣⁤',
   'fabric.editor.tableOptions': '⁣⁢Table options‍⁠⁡‌‍‍⁠⁡⁣⁤',
-  'fabric.editor.tableResizeScreenReaderInformation': '{newWidth, plural, one {⁣⁢Table width decreased to {newWidth,number} pixel.؜؜⁡؜‌‍⁠⁡⁠⁣⁤} other {⁣⁢Table width decreased to {newWidth,number} pixels.؜؜⁡؜‌‍⁠⁡⁠⁣⁤}}',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {⁣⁢Table width decreased to {newWidth,number} pixel.؜‌‍‍⁠⁠⁠⁡‍⁣⁤} other {⁣⁢Table width decreased to {newWidth,number} pixels.؜‌‍‍⁠⁠⁠⁡‍⁣⁤}}',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {⁣⁢Table width increased to {newWidth,number} pixel.⁡‌‍‌؜⁡؜⁣⁤} other {⁣⁢Table width increased to {newWidth,number} pixels.⁡‌‍‌؜⁡؜⁣⁤}}',
+  'fabric.editor.tableSelector': '⁣⁢Table size⁠؜؜؜‍‍⁣⁤',
+  'fabric.editor.tableSelector.description': '⁣⁢Add a table using popup to select a custom size‌⁠‌؜‍⁠‍‌؜⁠⁣⁤',
   'fabric.editor.tables.adjustColumn': '⁣⁢Adjust column؜⁡‌؜‍⁠؜‍‌‌⁣⁤',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': '⁣⁢Deleting {nodeName} will break anything connected to it.؜‍⁡؜⁠‌؜؜‍⁣⁤',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': '⁣⁢Delete⁠؜⁡؜⁡؜⁡‍؜‌⁠‍‌⁣⁤',

package/dist/esm/i18n/es.js

@@ -9,7 +9,9 @@
 export default {
   'fabric.editor.action': 'Elemento de acción',
   'fabric.editor.action.description': 'Crear y asignar elementos de acción',
+  'fabric.editor.addColumn': 'Añadir columna a la derecha',
   'fabric.editor.addMediaFiles': 'Añadir imagen, vídeo o archivo',
+  'fabric.editor.addRow': 'Añadir fila abajo',
   'fabric.editor.alignCenter': 'Centrar',
   'fabric.editor.alignImageCenter': 'Centrar',
   'fabric.editor.alignImageLeft': 'Alinear a la izquierda',
@@ -17,6 +19,7 @@ export default {
   'fabric.editor.alignLeft': 'Alinear a la izquierda',
   'fabric.editor.alignRight': 'Alinear a la derecha',
   'fabric.editor.annotationToolbar': 'Barra de herramientas de anotaciones',
+  'fabric.editor.backgroundColor': 'Color de fondo',
   'fabric.editor.blockCardUnavailable': 'El enlace insertado está dentro de {node} y no puede cambiar de vista',
   'fabric.editor.blockDescription': 'Mostrar más información sobre un enlace, incluido un resumen y acciones',
   'fabric.editor.blockTitle': 'Tarjeta',
@@ -138,7 +141,6 @@ export default {
   'fabric.editor.infoPanel': 'Panel de información',
   'fabric.editor.infoPanel.description': 'Destacar información en un panel de color',
   'fabric.editor.inlineDescription': 'Mostrar enlace como texto insertado',
-  'fabric.editor.inlineOverlay': 'Cambiar vista',
   'fabric.editor.inlineTitle': 'Insertado',
   'fabric.editor.insertColumn': 'Insertar columna a la derecha',
   'fabric.editor.insertColumnDrag': 'Insertar columna',
@@ -211,7 +213,8 @@ export default {
   'fabric.editor.table': 'Tabla',
   'fabric.editor.table.description': 'Insertar una tabla',
   'fabric.editor.tableOptions': 'Opciones de tabla',
-  'fabric.editor.tableResizeScreenReaderInformation': '{newWidth, plural, one {Ancho de la tabla reducido a {newWidth,number} píxel.} other {Ancho de la tabla reducido a {newWidth,number} píxeles.}}',
+  'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {Ancho de la tabla reducido a {newWidth,number} píxel.} other {Ancho de la tabla reducido a {newWidth,number} píxeles.}}',
+  'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {Ancho de la tabla aumentado a {newWidth,number} píxel.} other {Ancho de la tabla aumentado a {newWidth,number} píxeles.}}',
   'fabric.editor.tables.adjustColumn': 'Ajustar columna',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Al eliminar la extensión {nodeName}, se interrumpirá todo lo que se haya conectado a ella.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Eliminar',