@atlaskit/editor-core 190.2.3 → 191.0.0

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -1,154 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { overflowShadow } from '@atlaskit/editor-common/ui';
-import { calculateBreakoutStyles } from '@atlaskit/editor-common/utils';
-import { wrapperStyle, header, content, contentWrapper, widerLayoutClassName } from './styles';
-import { overlay } from '../styles';
-import ExtensionLozenge from '../Lozenge';
-import classnames from 'classnames';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-function ExtensionWithPluginState(props) {
-  const {
-    node,
-    handleContentDOMRef,
-    children,
-    widthState = {
-      width: 0
-    },
-    handleRef,
-    shadowClassNames,
-    hideFrame,
-    editorAppearance
-  } = props;
-  const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
-  const isMobile = editorAppearance === 'mobile';
-  const hasChildren = !!children;
-  const removeBorder = hideFrame && !isMobile && !hasBody || false;
-  const {
-    getPos,
-    view
-  } = props;
-  const isTopLevelNode = React.useMemo(() => {
-    const pos = typeof getPos === 'function' ? getPos() : undefined;
-    return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
-    return false;
-  }, [view, getPos]);
-  const 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 only be respected for top level nodes.
-  isTopLevelNode &&
-  // Extension breakout state should not be respected when the editor appearance is full-width mode
-  editorAppearance !== 'full-width';
-  const classNames = classnames('extension-container', 'block', shadowClassNames, {
-    'with-overlay': !hasBody,
-    'without-frame': removeBorder,
-    [widerLayoutClassName]: shouldBreakout
-  });
-  const headerClassNames = classnames({
-    'with-children': hasChildren,
-    'without-frame': removeBorder
-  });
-  let customContainerStyles = {
-    width: '100%'
-  };
-  let newContentStyles = {};
-  if (shouldBreakout) {
-    const {
-      type,
-      ...breakoutStyles
-    } = calculateBreakoutStyles({
-      mode: node.attrs.layout,
-      widthStateWidth: widthState.width,
-      widthStateLineLength: widthState.lineLength
-    });
-    newContentStyles = {
-      ...breakoutStyles
-    };
-    customContainerStyles = breakoutStyles;
-  }
-  newContentStyles = {
-    ...newContentStyles,
-    ...contentWrapper
-  };
-  return jsx("div", {
-    ref: handleRef,
-    "data-layout": node.attrs.layout,
-    className: classNames,
-    css: wrapperStyle,
-    style: customContainerStyles
-  }, jsx("div", {
-    className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
-  }, jsx("div", {
-    css: overlay,
-    className: "extension-overlay"
-  }), jsx("div", {
-    css: header,
-    contentEditable: false,
-    className: headerClassNames
-  }, !removeBorder && jsx(ExtensionLozenge, {
-    node: node
-  }), children), hasBody && jsx("div", {
-    css: newContentStyles
-  }, jsx("div", {
-    css: content,
-    ref: handleContentDOMRef,
-    className: "extension-content block"
-  }))));
-}
-const Extension = 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.
-  const {
-    pluginInjectionApi
-  } = props;
-  return pluginInjectionApi === undefined ? jsx(ExtensionDeprecated, props) : jsx(ExtensionWithSharedState, props);
-};
-const ExtensionWithSharedState = props => {
-  const {
-    pluginInjectionApi
-  } = props;
-  const {
-    widthState
-  } = useSharedPluginState(pluginInjectionApi, ['width']);
-  return jsx(ExtensionWithPluginState, _extends({
-    widthState: widthState
-  }, props));
-};
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-// 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
-const widthPluginKey = {
-  key: 'widthPlugin$',
-  getState: state => {
-    return state['widthPlugin$'];
-  }
-};
-const ExtensionDeprecated = props => {
-  return jsx(WithPluginState, {
-    editorView: props.view,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: ({
-      widthState
-    }) => jsx(ExtensionWithPluginState, _extends({
-      widthState: widthState
-    }, props))
-  });
-};
-/**
- * End workaround
- */
-
-export default overflowShadow(Extension, {
-  overflowSelector: '.extension-overflow-wrapper'
-});

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -1,42 +0,0 @@
-import { css } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
-import { wrapperDefault, padding } from '../styles';
-export const widerLayoutClassName = 'wider-layout';
-export const wrapperStyle = css`
-  ${wrapperDefault}
-
-  &.without-frame {
-    background: transparent;
-  }
-  cursor: pointer;
-  width: 100%;
-
-  .extension-overflow-wrapper:not(.with-body) {
-    overflow-x: auto;
-  }
-`;
-export const header = css`
-  padding: ${padding / 2}px ${padding / 2}px 0px;
-  vertical-align: middle;
-
-  &.with-children:not(.without-frame) {
-    padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}
-      ${"var(--ds-space-100, 8px)"};
-  }
-  &.without-frame {
-    padding: 0;
-  }
-`;
-export const content = css`
-  padding: ${padding}px;
-  background: ${"var(--ds-surface, white)"};
-  border: 1px solid ${`var(--ds-border, ${N30})`};
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  cursor: initial;
-  width: 100%;
-`;
-export const contentWrapper = css`
-  padding: 0 ${padding}px ${padding}px;
-  display: flex;
-  justify-content: center;
-`;

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -1,204 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import { getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/editor-common/extensions';
-import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
-import Extension from './Extension';
-import InlineExtension from './InlineExtension';
-import MultiBodiedExtension from './MultiBodiedExtension';
-export default class ExtensionComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "privatePropsParsed", false);
-    _defineProperty(this, "state", {});
-    _defineProperty(this, "mounted", false);
-    // memoized to avoid rerender on extension state changes
-    _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(this, "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
-    _defineProperty(this, "setStateFromPromise", (stateKey, promise) => {
-      promise && promise.then(p => {
-        if (!this.mounted) {
-          return;
-        }
-        this.setState({
-          [stateKey]: p
-        });
-      });
-    });
-    /**
-     * Parses any private nodes once an extension provider is available.
-     *
-     * We do this separately from resolving a node renderer component since the
-     * private props come from extension provider, rather than an extension
-     * handler which only handles `render`/component concerns.
-     */
-    _defineProperty(this, "parsePrivateNodePropsIfNeeded", async () => {
-      if (this.privatePropsParsed || !this.state.extensionProvider) {
-        return;
-      }
-      this.privatePropsParsed = true;
-      const {
-        extensionType,
-        extensionKey
-      } = this.props.node.attrs;
-
-      /**
-       * getExtensionModuleNodePrivateProps can throw if there are issues in the
-       * manifest
-       */
-      try {
-        const privateProps = await this.getExtensionModuleNodePrivateProps(this.state.extensionProvider, extensionType, extensionKey);
-        this.setState({
-          _privateProps: privateProps
-        });
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('Provided extension handler has thrown an error\n', e);
-        /** We don't want this error to block renderer */
-        /** We keep rendering the default content */
-      }
-    });
-    _defineProperty(this, "handleExtension", (pmNode, actions) => {
-      var _pmNode$marks, _pmNode$marks$find, _pmNode$marks$find$at;
-      const {
-        extensionHandlers,
-        editorView
-      } = this.props;
-      const {
-        extensionType,
-        extensionKey,
-        parameters,
-        text
-      } = pmNode.attrs;
-      const isBodiedExtension = pmNode.type.name === 'bodiedExtension';
-      if (isBodiedExtension) {
-        return;
-      }
-      const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 ? void 0 : (_pmNode$marks$find = _pmNode$marks.find(m => m.type.name === 'fragment')) === null || _pmNode$marks$find === void 0 ? void 0 : (_pmNode$marks$find$at = _pmNode$marks$find.attrs) === null || _pmNode$marks$find$at === void 0 ? void 0 : _pmNode$marks$find$at.localId;
-      const node = {
-        type: pmNode.type.name,
-        extensionType,
-        extensionKey,
-        parameters,
-        content: text,
-        localId: pmNode.attrs.localId,
-        fragmentLocalId
-      };
-      let result;
-      if (extensionHandlers && extensionHandlers[extensionType]) {
-        const render = getExtensionRenderer(extensionHandlers[extensionType]);
-        result = render(node, editorView.state.doc, actions);
-      }
-      if (!result) {
-        const extensionHandlerFromProvider = this.state.extensionProvider && this.getNodeRenderer(this.state.extensionProvider, extensionType, extensionKey);
-        if (extensionHandlerFromProvider) {
-          const NodeRenderer = extensionHandlerFromProvider;
-          if (node.type === 'multiBodiedExtension') {
-            return /*#__PURE__*/React.createElement(NodeRenderer, {
-              node: node,
-              references: this.props.references,
-              actions: actions
-            });
-          } else {
-            return /*#__PURE__*/React.createElement(NodeRenderer, {
-              node: node,
-              references: this.props.references
-            });
-          }
-        }
-      }
-      return result;
-    });
-  }
-  UNSAFE_componentWillMount() {
-    this.mounted = true;
-  }
-  componentDidMount() {
-    const {
-      extensionProvider
-    } = this.props;
-    if (extensionProvider) {
-      this.setStateFromPromise('extensionProvider', extensionProvider);
-    }
-  }
-  componentDidUpdate() {
-    this.parsePrivateNodePropsIfNeeded();
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      extensionProvider
-    } = nextProps;
-    if (extensionProvider && this.props.extensionProvider !== extensionProvider) {
-      this.setStateFromPromise('extensionProvider', extensionProvider);
-    }
-  }
-  render() {
-    var _this$state$_privateP;
-    const {
-      node,
-      handleContentDOMRef,
-      editorView,
-      references,
-      editorAppearance,
-      pluginInjectionApi,
-      getPos,
-      eventDispatcher
-    } = this.props;
-    if (node.type.name === 'multiBodiedExtension') {
-      return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
-        node: node,
-        editorView: editorView,
-        getPos: getPos,
-        handleContentDOMRef: handleContentDOMRef,
-        tryExtensionHandler: this.tryExtensionHandler.bind(this),
-        eventDispatcher: eventDispatcher,
-        pluginInjectionApi: pluginInjectionApi,
-        editorAppearance: editorAppearance
-      });
-    }
-    const extensionHandlerResult = this.tryExtensionHandler(undefined);
-    switch (node.type.name) {
-      case 'extension':
-      case 'bodiedExtension':
-        return /*#__PURE__*/React.createElement(Extension, {
-          node: node,
-          getPos: this.props.getPos,
-          references: references,
-          extensionProvider: this.state.extensionProvider,
-          handleContentDOMRef: handleContentDOMRef,
-          view: editorView,
-          editorAppearance: editorAppearance,
-          hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
-          pluginInjectionApi: pluginInjectionApi
-        }, extensionHandlerResult);
-      case 'inlineExtension':
-        return /*#__PURE__*/React.createElement(InlineExtension, {
-          node: node
-        }, extensionHandlerResult);
-      default:
-        return null;
-    }
-  }
-  tryExtensionHandler(actions) {
-    const {
-      node
-    } = this.props;
-    try {
-      const extensionContent = this.handleExtension(node, actions);
-      if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
-        return extensionContent;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('Provided extension handler has thrown an error\n', e);
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
-
-    return null;
-  }
-}

package/dist/es2019/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
-/**
- * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
- * else wrap with a div (for multi bodied extensions)
- *
- * @param param0
- * @returns
- */
-const ExtensionNodeWrapper = ({
-  children,
-  nodeType
-}) => /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
-export default ExtensionNodeWrapper;

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/index.js

@@ -1,26 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { Component } from 'react';
-import { overlay } from '../styles';
-import ExtensionLozenge from '../Lozenge';
-import { wrapperStyle } from './styles';
-export default class InlineExtension extends Component {
-  render() {
-    const {
-      node,
-      children
-    } = this.props;
-    const hasChildren = !!children;
-    const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-    return jsx("div", {
-      css: wrapperStyle,
-      className: `extension-container inline ${className}`
-    }, jsx("div", {
-      css: overlay,
-      className: "extension-overlay"
-    }), children ? children : jsx(ExtensionLozenge, {
-      node: node
-    }));
-  }
-}

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,26 +0,0 @@
-import { css } from '@emotion/react';
-import { wrapperDefault } from '../styles';
-export const wrapperStyle = css`
-  ${wrapperDefault}
-
-  cursor: pointer;
-  display: inline-flex;
-  margin: 1px 1px ${"var(--ds-space-050, 4px)"};
-
-  > img {
-    border-radius: ${"var(--ds-border-radius, 3px)"};
-  }
-
-  &::after,
-  &::before {
-    vertical-align: text-top;
-    display: inline-block;
-    width: 1px;
-    content: '';
-  }
-
-  &.with-children {
-    padding: 0;
-    background: ${"var(--ds-background-neutral-subtle, white)"};
-  }
-`;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { Component } from 'react';
-import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
-import { getExtensionLozengeData } from '@atlaskit/editor-common/utils';
-import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
-export const capitalizeFirstLetter = str => {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-export const ICON_SIZE = 24;
-export default class ExtensionLozenge extends Component {
-  render() {
-    const {
-      node
-    } = this.props;
-    const imageData = getExtensionLozengeData({
-      node,
-      type: 'image'
-    });
-    if (imageData && node.type.name !== 'extension') {
-      return this.renderImage(imageData);
-    }
-    const iconData = getExtensionLozengeData({
-      node,
-      type: 'icon'
-    });
-    return this.renderFallback(iconData);
-  }
-  renderImage(lozengeData) {
-    const {
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      url,
-      ...rest
-    } = lozengeData;
-    return jsx("img", _extends({
-      css: styledImage,
-      src: url
-    }, rest, {
-      alt: extensionKey
-    }));
-  }
-  renderFallback(lozengeData) {
-    const {
-      parameters,
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      name
-    } = this.props.node.type;
-    const params = parameters && parameters.macroParams;
-    const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-    const isBlockExtension = name === 'extension';
-    return jsx("div", {
-      "data-testid": "lozenge-fallback",
-      css: placeholderFallback
-    }, lozengeData && !isBlockExtension ? this.renderImage({
-      height: ICON_SIZE,
-      width: ICON_SIZE,
-      ...lozengeData
-    }) : jsx(EditorFileIcon, {
-      label: title
-    }), jsx("span", {
-      className: "extension-title"
-    }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
-      css: placeholderFallbackParams
-    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
-  }
-}