@atlaskit/editor-common 76.34.0 → 76.36.0

package/dist/es2019/core-utils/document-logger.js

@@ -0,0 +1,161 @@
+const hash = {
+  nodes: {
+    doc: 'doc',
+    paragraph: 'p',
+    text: 't',
+    bulletList: 'ul',
+    orderedList: 'ol',
+    listItem: 'li',
+    heading: 'h',
+    blockquote: 'blockq',
+    codeBlock: 'codebl',
+    panel: 'pnl',
+    rule: 'rl',
+    hardBreak: 'br',
+    mention: 'ment',
+    emoji: 'emj',
+    image: 'img',
+    caption: 'cap',
+    media: 'media',
+    mediaGroup: 'mediag',
+    mediaSingle: 'medias',
+    plain: 'pln',
+    table: 'table',
+    tableCell: 'td',
+    tableHeader: 'th',
+    tableRow: 'tr',
+    decisionList: 'dl',
+    decisionItem: 'di',
+    taskList: 'tl',
+    taskItem: 'ti',
+    extension: 'ext',
+    inlineExtension: 'exti',
+    bodiedExtension: 'extb',
+    multiBodiedExtension: 'extmbe',
+    extensionFrame: 'extfrm',
+    status: 'sts',
+    placeholder: 'plh',
+    inlineCard: 'cardi',
+    blockCard: 'cardb',
+    embedCard: 'carde',
+    expand: 'exp',
+    nestedExpand: 'expn',
+    unsupportedBlock: 'unsupb',
+    unsupportedInline: 'unsupi',
+    unknownBlock: 'unkb',
+    date: 'date'
+  },
+  marks: {
+    em: 'em',
+    strong: 'strong',
+    code: 'code',
+    strike: 'strike',
+    underline: 'undline',
+    link: 'lnk',
+    subsup: 'subsup',
+    textColor: 'txtclr',
+    unsupportedMark: 'unsupmrk',
+    unsupportedNodeAttribute: 'unsupnattr',
+    annotation: 'anno'
+  }
+};
+function shortHash(type, isMark) {
+  const code = hash[isMark ? 'marks' : 'nodes'][type];
+  return code ? code : type;
+}
+function compactStringifier(node) {
+  var _node$marks;
+  const isContentEmpty = !node.content;
+  const isTextNode = (node === null || node === void 0 ? void 0 : node.type) === 'text';
+  const hasMarks = (_node$marks = node.marks) === null || _node$marks === void 0 ? void 0 : _node$marks.length;
+  const isContentArray = Array.isArray(node.content);
+  const marks = child => {
+    if (hasMarks) {
+      return node.marks.reduce((str, mark) => `${shortHash(mark, true)}(${str})`, child);
+    }
+    return child;
+  };
+  let content;
+  if (isTextNode) {
+    content = String(node.nodeSize);
+  } else if (isContentEmpty) {
+    content = '';
+  } else if (isContentArray) {
+    content = node.content.map(node => compactStringifier(node)).join(',');
+  }
+  return marks(`${shortHash(node.type, false)}(${content})`);
+}
+export const getDocStructure = (doc, options) => {
+  try {
+    const result = getBlockNode(doc, 0);
+    if (options !== null && options !== void 0 && options.compact) {
+      return compactStringifier(result);
+    }
+    return result;
+  } catch (error) {
+    return `Error logging document structure: ${error}`;
+  }
+};
+const getBlockNode = (node, pos) => {
+  const blockNode = {
+    type: node.type.name,
+    pos,
+    nodeSize: node.nodeSize
+  };
+  const content = getBlockNodeContent(node.content, pos);
+  if (content.length > 0) {
+    blockNode.content = content;
+  }
+  const marks = getMarks(node);
+  if (marks.length > 0) {
+    blockNode.marks = marks;
+  }
+  return blockNode;
+};
+const getBlockNodeContent = (node, pos) => {
+  if (!node || !node.content || !node.content.length) {
+    return [];
+  }
+  let blockNodeContent = [];
+  const {
+    content
+  } = node;
+  if (content[0].isBlock) {
+    // children are block nodes
+    let prevNode;
+    blockNodeContent = content.map(node => {
+      pos += prevNode ? prevNode.nodeSize : 1;
+      prevNode = node;
+      return getBlockNode(node, pos);
+    });
+  } else {
+    // children are inline nodes .
+    const result = getInlineNodes(content, pos);
+    blockNodeContent = result.inlineNodes;
+    pos = result.pos;
+  }
+  return blockNodeContent;
+};
+const getInlineNodes = (nodes, pos) => {
+  let inlineNodes = nodes.map(node => {
+    const {
+      nodeSize
+    } = node;
+    const inlineNode = {
+      type: node.type.name,
+      pos,
+      nodeSize
+    };
+    const marks = getMarks(node);
+    if (marks.length > 0) {
+      inlineNode.marks = marks;
+    }
+    pos += nodeSize;
+    return inlineNode;
+  });
+  return {
+    inlineNodes,
+    pos
+  };
+};
+const getMarks = node => node.marks.map(mark => mark.type.name);

package/dist/es2019/core-utils/index.js

@@ -1 +1,2 @@
-export { insideTable } from './inside';
+export { insideTable } from './inside';
+export { getDocStructure } from './document-logger';

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import React from 'react';
+import { jsx } from '@emotion/react';
+import classnames from 'classnames';
+import { WithPluginState } from '../../..//with-plugin-state';
+import { useSharedPluginState } from '../../../hooks';
+import { overflowShadow } from '../../../ui';
+import { calculateBreakoutStyles } from '../../../utils';
+import ExtensionLozenge from '../Lozenge';
+import { overlay } from '../styles';
+import { content, contentWrapper, header, widerLayoutClassName, wrapperStyle } from './styles';
+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));
+};
+
+// 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/extensibility/Extension/Extension/styles.js

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+import { N30 } from '@atlaskit/theme/colors';
+import { padding, wrapperDefault } 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/extensibility/Extension/InlineExtension/index.js

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import React from 'react';
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import ExtensionLozenge from '../Lozenge';
+import { overlay } from '../styles';
+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/extensibility/Extension/InlineExtension/styles.js

@@ -0,0 +1,26 @@
+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/extensibility/Extension/Lozenge.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { getExtensionLozengeData } from '../../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}`)));
+  }
+}

package/dist/es2019/extensibility/Extension/styles.js

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
+import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
+export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
+export const wrapperDefault = css`
+  background: ${`var(--ds-background-neutral, ${N20})`};
+  border-radius: ${"var(--ds-border-radius, 3px)"};
+  position: relative;
+  vertical-align: middle;
+
+  .ProseMirror-selectednode > span > & > .extension-overlay {
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`};
+    opacity: 1;
+  }
+
+  &.with-overlay {
+    .extension-overlay {
+      background: ${`var(--ds-background-neutral-hovered, ${N20A})`};
+      color: transparent;
+    }
+
+    &:hover .extension-overlay {
+      opacity: 1;
+    }
+  }
+`;
+export const overlay = css`
+  border-radius: ${"var(--ds-border-radius, 3px)"};
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+`;
+export const placeholderFallback = css`
+  display: inline-flex;
+  align-items: center;
+
+  & > img {
+    margin: 0 ${"var(--ds-space-050, 4px)"};
+  }
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: placeholder-fallback;
+`;
+export const placeholderFallbackParams = css`
+  display: inline-block;
+  max-width: 200px;
+  margin-left: 5px;
+  color: ${`var(--ds-text-subtlest, ${N70})`};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+export const styledImage = css`
+  max-height: 16px;
+  max-width: 16px;
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: lozenge-image;
+`;

package/dist/es2019/extensibility/Extension.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { ProviderFactory, WithProviders } from '../provider-factory';
+import { ExtensionComponent } from './ExtensionComponent';
+export class Extension extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "renderWithProvider", ({
+      extensionProvider
+    }) => {
+      const {
+        node,
+        getPos,
+        editorView,
+        handleContentDOMRef,
+        extensionHandlers,
+        references,
+        editorAppearance,
+        pluginInjectionApi,
+        eventDispatcher
+      } = this.props;
+      return /*#__PURE__*/React.createElement(ExtensionComponent, {
+        editorView: editorView,
+        node: node,
+        getPos: getPos,
+        references: references,
+        extensionProvider: extensionProvider,
+        handleContentDOMRef: handleContentDOMRef,
+        extensionHandlers: extensionHandlers,
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi,
+        eventDispatcher: eventDispatcher
+      });
+    });
+    this.providerFactory = props.providerFactory || new ProviderFactory();
+  }
+  componentWillUnmount() {
+    if (!this.props.providerFactory) {
+      // new ProviderFactory is created if no `providers` has been set
+      // in this case when component is unmounted it's safe to destroy this providerFactory
+      this.providerFactory.destroy();
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['extensionProvider'],
+      providerFactory: this.providerFactory,
+      renderNode: this.renderWithProvider
+    });
+  }
+}
+_defineProperty(Extension, "displayName", 'Extension');