@atlaskit/editor-core 189.1.10 → 189.1.12

package/dist/cjs/plugins/layout/toolbar.js

@@ -1,116 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.layoutToolbarTitle = exports.buildToolbar = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _layoutSingle = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-single"));
-var _layoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-equal"));
-var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
-var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-left-sidebar"));
-var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
-var _layoutThreeWithSidebars = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-with-sidebars"));
-var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
-var _toolbarMessages = require("./toolbar-messages");
-var _messages = _interopRequireDefault(require("../../messages"));
-var _actions = require("./actions");
-var LAYOUT_TYPES = [{
-  id: 'editor.layout.twoEquals',
-  type: 'two_equal',
-  title: _toolbarMessages.toolbarMessages.twoColumns,
-  icon: _layoutTwoEqual.default
-}, {
-  id: 'editor.layout.threeEquals',
-  type: 'three_equal',
-  title: _toolbarMessages.toolbarMessages.threeColumns,
-  icon: _layoutThreeEqual.default
-}];
-var LAYOUT_TYPES_WITH_SINGLE_COL = [{
-  id: 'editor.layout.singeLayout',
-  type: 'single',
-  title: _toolbarMessages.toolbarMessages.singleColumn,
-  icon: _layoutSingle.default
-}].concat(LAYOUT_TYPES);
-var SIDEBAR_LAYOUT_TYPES = [{
-  id: 'editor.layout.twoRightSidebar',
-  type: 'two_right_sidebar',
-  title: _toolbarMessages.toolbarMessages.rightSidebar,
-  icon: _layoutTwoRightSidebar.default
-}, {
-  id: 'editor.layout.twoLeftSidebar',
-  type: 'two_left_sidebar',
-  title: _toolbarMessages.toolbarMessages.leftSidebar,
-  icon: _layoutTwoLeftSidebar.default
-}, {
-  id: 'editor.layout.threeWithSidebars',
-  type: 'three_with_sidebars',
-  title: _toolbarMessages.toolbarMessages.threeColumnsWithSidebars,
-  icon: _layoutThreeWithSidebars.default
-}];
-var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
-  return {
-    id: item.id,
-    type: 'button',
-    icon: item.icon,
-    testId: item.title.id,
-    title: intl.formatMessage(item.title),
-    onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)(item.type),
-    selected: !!currentLayout && currentLayout === item.type,
-    tabIndex: null
-  };
-};
-var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
-var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
-  var _api$decorations$acti, _api$decorations, _api$analytics;
-  var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
-    hoverDecoration = _ref.hoverDecoration;
-  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  var node = state.doc.nodeAt(pos);
-  if (node) {
-    var currentLayout = (0, _actions.getPresetLayout)(node);
-    var separator = {
-      type: 'separator'
-    };
-    var nodeType = state.schema.nodes.layoutSection;
-    var deleteButton = {
-      id: 'editor.layout.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: _remove.default,
-      testId: _messages.default.remove.id,
-      title: intl.formatMessage(_messages.default.remove),
-      onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI),
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      tabIndex: null
-    };
-    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
-    return {
-      title: layoutToolbarTitle,
-      getDomRef: function getDomRef(view) {
-        return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
-      },
-      nodeType: nodeType,
-      items: [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
-        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
-        return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-      }) : []), [{
-        type: 'copy-button',
-        items: [separator, {
-          state: state,
-          formatMessage: intl.formatMessage,
-          nodeType: nodeType
-        }]
-      }, separator, deleteButton]),
-      scrollable: true
-    };
-  }
-  return;
-};

package/dist/cjs/plugins/layout/types.js

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

package/dist/cjs/plugins/layout/utils.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "removeLayoutFromFirstChild", {
-  enumerable: true,
-  get: function get() {
-    return _transforms.removeLayoutFromFirstChild;
-  }
-});
-Object.defineProperty(exports, "removeLayoutFromLastChild", {
-  enumerable: true,
-  get: function get() {
-    return _transforms.removeLayoutFromLastChild;
-  }
-});
-Object.defineProperty(exports, "transformSliceToRemoveOpenLayoutNodes", {
-  enumerable: true,
-  get: function get() {
-    return _transforms.transformSliceToRemoveOpenLayoutNodes;
-  }
-});
-Object.defineProperty(exports, "unwrapContentFromLayout", {
-  enumerable: true,
-  get: function get() {
-    return _transforms.unwrapContentFromLayout;
-  }
-});
-var _transforms = require("@atlaskit/editor-common/transforms");

package/dist/es2019/plugins/layout/actions.js

@@ -1,329 +0,0 @@
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { flatmap, mapChildren } from '../../utils/slice';
-import { getStepRange, isEmptyDocument } from '@atlaskit/editor-common/utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
-import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
-import { pluginKey } from './pm-plugins/plugin-key';
-export const ONE_COL_LAYOUTS = ['single'];
-export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
-export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
-const getWidthsForPreset = presetLayout => {
-  switch (presetLayout) {
-    case 'single':
-      return [100];
-    case 'two_equal':
-      return [50, 50];
-    case 'three_equal':
-      return [33.33, 33.33, 33.33];
-    case 'two_left_sidebar':
-      return [33.33, 66.66];
-    case 'two_right_sidebar':
-      return [66.66, 33.33];
-    case 'three_with_sidebars':
-      return [25, 50, 25];
-  }
-};
-
-/**
- * Finds layout preset based on the width attrs of all the layoutColumn nodes
- * inside the layoutSection node
- */
-export const getPresetLayout = section => {
-  const widths = mapChildren(section, column => column.attrs.width).join(',');
-  switch (widths) {
-    case '100':
-      return 'single';
-    case '33.33,33.33,33.33':
-      return 'three_equal';
-    case '25,50,25':
-      return 'three_with_sidebars';
-    case '50,50':
-      return 'two_equal';
-    case '33.33,66.66':
-      return 'two_left_sidebar';
-    case '66.66,33.33':
-      return 'two_right_sidebar';
-  }
-  return;
-};
-export const getSelectedLayout = (maybeLayoutSection, current) => {
-  if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
-    return getPresetLayout(maybeLayoutSection) || current;
-  }
-  return current;
-};
-export const createDefaultLayoutSection = state => {
-  const {
-    layoutSection,
-    layoutColumn
-  } = state.schema.nodes;
-
-  // create a 50-50 layout by default
-  const columns = Fragment.fromArray([layoutColumn.createAndFill({
-    width: 50
-  }), layoutColumn.createAndFill({
-    width: 50
-  })]);
-  return layoutSection.createAndFill(undefined, columns);
-};
-export const insertLayoutColumns = (state, dispatch) => {
-  if (dispatch) {
-    dispatch(safeInsert(createDefaultLayoutSection(state))(state.tr));
-  }
-  return true;
-};
-export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMethod => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.INSERTED,
-  actionSubject: ACTION_SUBJECT.DOCUMENT,
-  actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
-  attributes: {
-    inputMethod
-  },
-  eventType: EVENT_TYPE.TRACK
-})(insertLayoutColumns);
-
-/**
- * Add a column to the right of existing layout
- */
-function addColumn(schema, pos) {
-  return tr => {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
-  };
-}
-function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
-  return tr => {
-    if (isEmptyDocument(column)) {
-      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), Slice.empty);
-    } else {
-      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), Slice.empty);
-    }
-  };
-}
-const fromTwoColsToThree = addColumn;
-const fromOneColToTwo = addColumn;
-const fromTwoColsToOne = removeLastColumnInLayout;
-const fromThreeColsToTwo = removeLastColumnInLayout;
-const fromOneColToThree = (schema, pos) => {
-  return tr => {
-    addColumn(schema, pos)(tr);
-    addColumn(schema, pos)(tr);
-  };
-};
-const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
-  const thirdColumn = node.content.child(2);
-  fromThreeColsToTwo(thirdColumn, insideRightEdgePos - thirdColumn.nodeSize, insideRightEdgePos)(tr);
-  const secondColumn = node.content.child(1);
-  fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
-};
-
-/**
- * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
- * Switching from 2 -> 3 just adds a new one at the end
- * Switching from 3 -> 2 moves all the content of the third col inside the second before
- * removing it
- */
-function forceColumnStructure(state, node, pos, presetLayout) {
-  const tr = state.tr;
-  const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
-  const numCols = node.childCount;
-
-  // 3 columns -> 2 columns
-  if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
-    const thirdColumn = node.content.child(2);
-    const columnPos = insideRightEdgeOfLayoutSection - thirdColumn.nodeSize;
-    fromThreeColsToTwo(thirdColumn, columnPos, insideRightEdgeOfLayoutSection)(tr);
-
-    // 2 columns -> 3 columns
-  } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
-
-    // 2 columns -> 1 column
-  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
-    const secondColumn = node.content.child(1);
-    const columnPos = insideRightEdgeOfLayoutSection - secondColumn.nodeSize;
-    fromTwoColsToOne(secondColumn, columnPos, insideRightEdgeOfLayoutSection)(tr);
-
-    // 3 columns -> 1 column
-  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
-    fromThreeColstoOne(node, tr, insideRightEdgeOfLayoutSection);
-
-    // 1 column -> 2 columns
-  } else if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
-    fromOneColToTwo(state.schema, insideRightEdgeOfLayoutSection)(tr);
-    // 1 column -> 3 columns
-  } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
-    fromOneColToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
-  }
-  return tr;
-}
-function columnWidth(node, schema, widths) {
-  const {
-    layoutColumn
-  } = schema.nodes;
-  const truncatedWidths = widths.map(w => Number(w.toFixed(2)));
-  return flatmap(node.content, (column, idx) => {
-    if (column.type === layoutColumn) {
-      return layoutColumn.create({
-        ...column.attrs,
-        width: truncatedWidths[idx]
-      }, column.content, column.marks);
-    } else {
-      return column;
-    }
-  });
-}
-function forceColumnWidths(state, tr, pos, presetLayout) {
-  const node = tr.doc.nodeAt(pos);
-  if (!node) {
-    return tr;
-  }
-  return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
-}
-export function forceSectionToPresetLayout(state, node, pos, presetLayout) {
-  let tr = forceColumnStructure(state, node, pos, presetLayout);
-
-  // save the selection here, since forcing column widths causes a change over the
-  // entire layoutSection, which remaps selection to the end. not remapping here
-  // is safe because the structure is no longer changing.
-  const selection = tr.selection;
-  tr = forceColumnWidths(state, tr, pos, presetLayout);
-  const selectionPos$ = tr.doc.resolve(selection.$from.pos);
-  return tr.setSelection(state.selection instanceof NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
-}
-export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch) => {
-  const {
-    pos,
-    selectedLayout
-  } = pluginKey.getState(state);
-  if (selectedLayout === layout || pos === null) {
-    return false;
-  }
-  const node = state.doc.nodeAt(pos);
-  if (!node) {
-    return false;
-  }
-  let tr = forceSectionToPresetLayout(state, node, pos, layout);
-  if (tr) {
-    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-      action: ACTION.CHANGED_LAYOUT,
-      actionSubject: ACTION_SUBJECT.LAYOUT,
-      attributes: {
-        previousLayout: formatLayoutName(selectedLayout),
-        newLayout: formatLayoutName(layout)
-      },
-      eventType: EVENT_TYPE.TRACK
-    })(tr);
-    tr.setMeta('scrollIntoView', false);
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  }
-  return false;
-};
-function layoutNeedChanges(node) {
-  return !getPresetLayout(node);
-}
-function getLayoutChange(node, pos, schema) {
-  if (node.type === schema.nodes.layoutSection) {
-    if (!layoutNeedChanges(node)) {
-      return;
-    }
-    const presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
-    const fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
-    return {
-      from: pos + 1,
-      to: pos + node.nodeSize - 1,
-      slice: new Slice(fixedColumns, 0, 0)
-    };
-  }
-}
-export const fixColumnSizes = (changedTr, state) => {
-  const {
-    layoutSection
-  } = state.schema.nodes;
-  let change;
-  const range = getStepRange(changedTr);
-  if (!range) {
-    return undefined;
-  }
-  changedTr.doc.nodesBetween(range.from, range.to, (node, pos) => {
-    if (node.type !== layoutSection) {
-      return true; // Check all internal nodes expect for layout section
-    }
-    // Node is a section
-    if (layoutNeedChanges(node)) {
-      change = getLayoutChange(node, pos, state.schema);
-    }
-    return false; // We dont go deep, We dont accept nested layouts
-  });
-
-  // Hack to prevent: https://product-fabric.atlassian.net/browse/ED-7523
-  // By default prosemirror try to recreate the node with the default attributes
-  // The default attribute is invalid adf though. when this happen the node after
-  // current position is a layout section
-  const $pos = changedTr.doc.resolve(range.to);
-  if ($pos.depth > 0) {
-    // 'range.to' position could resolve to doc, in this ResolvedPos.after will throws
-    const pos = $pos.after();
-    const node = changedTr.doc.nodeAt(pos);
-    if (node && node.type === layoutSection && layoutNeedChanges(node)) {
-      change = getLayoutChange(node, pos, state.schema);
-    }
-  }
-  return change;
-};
-export const fixColumnStructure = state => {
-  const {
-    pos,
-    selectedLayout
-  } = pluginKey.getState(state);
-  if (pos !== null && selectedLayout) {
-    const node = state.doc.nodeAt(pos);
-    if (node && node.childCount !== getWidthsForPreset(selectedLayout).length) {
-      return forceSectionToPresetLayout(state, node, pos, selectedLayout);
-    }
-  }
-  return;
-};
-export const deleteActiveLayoutNode = editorAnalyticsAPI => (state, dispatch) => {
-  const {
-    pos,
-    selectedLayout
-  } = pluginKey.getState(state);
-  if (pos !== null) {
-    const node = state.doc.nodeAt(pos);
-    if (dispatch) {
-      let tr = state.tr.delete(pos, pos + node.nodeSize);
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: ACTION.DELETED,
-        actionSubject: ACTION_SUBJECT.LAYOUT,
-        attributes: {
-          layout: formatLayoutName(selectedLayout)
-        },
-        eventType: EVENT_TYPE.TRACK
-      })(tr);
-      dispatch(tr);
-    }
-    return true;
-  }
-  return false;
-};
-const formatLayoutName = layout => {
-  switch (layout) {
-    case 'single':
-      return LAYOUT_TYPE.SINGLE_COL;
-    case 'two_equal':
-      return LAYOUT_TYPE.TWO_COLS_EQUAL;
-    case 'three_equal':
-      return LAYOUT_TYPE.THREE_COLS_EQUAL;
-    case 'two_left_sidebar':
-      return LAYOUT_TYPE.LEFT_SIDEBAR;
-    case 'two_right_sidebar':
-      return LAYOUT_TYPE.RIGHT_SIDEBAR;
-    case 'three_with_sidebars':
-      return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
-  }
-};

package/dist/es2019/plugins/layout/index.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
-import { default as createLayoutPlugin } from './pm-plugins/main';
-import { buildToolbar } from './toolbar';
-import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
-import { IconLayout } from '@atlaskit/editor-common/quick-insert';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-import { pluginKey } from './pm-plugins/plugin-key';
-export { pluginKey };
-const layoutPlugin = ({
-  config: options = {},
-  api
-}) => {
-  var _api$analytics;
-  return {
-    name: 'layout',
-    nodes() {
-      return [{
-        name: 'layoutSection',
-        node: layoutSection
-      }, {
-        name: 'layoutColumn',
-        node: layoutColumn
-      }];
-    },
-    pmPlugins() {
-      return [{
-        name: 'layout',
-        plugin: () => createLayoutPlugin(options)
-      }];
-    },
-    actions: {
-      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
-    },
-    pluginsOptions: {
-      floatingToolbar(state, intl) {
-        const {
-          pos,
-          allowBreakout,
-          addSidebarLayouts,
-          allowSingleColumnLayout
-        } = pluginKey.getState(state);
-        if (pos !== null) {
-          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
-        }
-        return undefined;
-      },
-      quickInsert: ({
-        formatMessage
-      }) => [{
-        id: 'layout',
-        title: formatMessage(messages.columns),
-        description: formatMessage(messages.columnsDescription),
-        keywords: ['column', 'section'],
-        priority: 1100,
-        icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
-        action(insert, state) {
-          var _api$analytics2, _api$analytics2$actio;
-          const tr = insert(createDefaultLayoutSection(state));
-          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
-            attributes: {
-              inputMethod: INPUT_METHOD.QUICK_INSERT
-            },
-            eventType: EVENT_TYPE.TRACK
-          })(tr);
-          return tr;
-        }
-      }]
-    }
-  };
-};
-export default layoutPlugin;