@atlaskit/editor-core 187.8.11 → 187.9.0

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -0,0 +1,493 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { getMediaClient } from '@atlaskit/media-client';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { wrapperStyle } from './styled';
+import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import ResizeLabel from '../../../../ui/Resizer/ResizeLabel';
+import { injectIntl } from 'react-intl-next';
+import { messages } from './resizable-media-single-messages';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import classnames from 'classnames';
+import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import { generateDefaultGuidelines, generateDynamicGuidelines } from './guidelines';
+export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
+export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
+  if (wrapper && insideInlineLike && !insideLayout) {
+    const currentNode = wrapper;
+    const boundingRect = currentNode.getBoundingClientRect();
+    return boundingRect.left - pmViewDom.getBoundingClientRect().left;
+  }
+  return 0;
+}
+
+// TODO: Create new fixed image size event
+const getResizeAnalyticsEvent = (type, size, layout) => {
+  const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: ACTION.EDITED,
+    actionSubject,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      size,
+      layout
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+class ResizableMediaSingleNext extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "calcNewSize", (newWidth, stop) => {
+      const {
+        layout,
+        view: {
+          state
+        },
+        containerWidth,
+        lineLength
+      } = this.props;
+      const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
+      this.setState({
+        resizedPctWidth: newPct
+      });
+      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      if (newPct <= 100) {
+        if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
+          newLayout = layout;
+        }
+        return {
+          width: newPct,
+          layout: newLayout
+        };
+      } else {
+        return {
+          width: this.props.pctWidth || null,
+          layout: newLayout
+        };
+      }
+    });
+    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth) => {
+      if (width <= contentWidth) {
+        return 'center';
+      }
+      if (width < Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)) {
+        return 'wide';
+      }
+
+      // set full width to be containerWidth - akEditorGutterPadding * 2
+      // instead of containerWidth - akEditorBreakoutPadding,
+      // so that we have image aligned with text
+      return 'full-width';
+    });
+    _defineProperty(this, "calcColumnLeftOffset", () => {
+      const {
+        offsetLeft
+      } = this.state;
+      return this.insideInlineLike ? calcColumnsFromPx(offsetLeft, this.props.lineLength, this.props.gridSize) : 0;
+    });
+    _defineProperty(this, "calcPxHeight", newWidth => {
+      const {
+        width = newWidth,
+        height
+      } = this.props;
+      return Math.round(height / width * newWidth);
+    });
+    _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
+    _defineProperty(this, "displayGuideline", guidelines => {
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+      const {
+        pluginInjectionApi
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(this.props.view)({
+        guidelines
+      });
+    });
+    _defineProperty(this, "setIsResizing", isResizing => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const tr = state.tr;
+      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      return dispatch(tr);
+    });
+    const initialWidth = props.mediaSingleWidth || this.calcInitialWidth();
+    this.state = {
+      offsetLeft: calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
+      // We default to true until we resolve the file type
+      isVideoFile: true,
+      isResizing: false,
+      size: {
+        width: initialWidth,
+        height: this.calcPxHeight(initialWidth)
+      }
+    };
+  }
+
+  /**
+   * Calculate media single node initial width if props.mediaSingleWidth is undefined
+   * (Mainly when switching from lagacy experience to new experience).
+   *
+   * @returns initial width in pixel
+   */
+  calcInitialWidth() {
+    const {
+      width: origWidth,
+      lineLength: contentWidth,
+      containerWidth
+    } = this.props;
+    return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
+    if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+      this.setState({
+        offsetLeft
+      });
+    }
+
+    // Handle undo, when the actual pctWidth changed,
+    // we sync up with the internal state.
+    if (prevProps.pctWidth !== this.props.pctWidth) {
+      this.setState({
+        resizedPctWidth: this.props.pctWidth
+      });
+    }
+    if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
+      const guidelines = this.getDefaultGuidelines();
+      this.displayGuideline(guidelines);
+    }
+    if (prevProps.lineLength === undefined && this.props.lineLength !== undefined && this.props.mediaSingleWidth === null) {
+      // re-initalises size when lineLength becomes defined later
+      // ensures extended experience renders legacy image with the same size as the legacy experience
+      const initialWidth = this.calcInitialWidth();
+      this.setState({
+        size: {
+          width: initialWidth,
+          height: this.calcPxHeight(initialWidth)
+        }
+      });
+    }
+    return true;
+  }
+
+  // check if is inside of layout, table, expand, nestedExpand and list item
+  isNestedNode() {
+    return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
+  }
+  getDefaultGuidelines() {
+    const {
+      lineLength,
+      containerWidth,
+      fullWidthMode
+    } = this.props;
+
+    // disable guidelines for nested media single node
+    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+  }
+
+  // Calculate width of media nodes for snaps based on dynamic guidelines
+  // TODO:  refactor this later, maybe use state to hold snaps array
+  getSnaps() {
+    const {
+      view
+    } = this.props;
+    const {
+      dom
+    } = view;
+    const defaultGuidelines = this.getDefaultGuidelines();
+    // disable guidelines for nested media single node
+    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view);
+    const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
+    const mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
+    const {
+      width
+    } = dom.getBoundingClientRect();
+    const halfWidth = width / 2;
+    const selectedMedia = dom.querySelector(mediaSingleSelector);
+    if (selectedMedia) {
+      const pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
+      const layout = selectedMedia.getAttribute('layout');
+      let snap = 0;
+      switch (layout) {
+        case 'align-start':
+        case 'wrap-left':
+          snap = pixelWidth - halfWidth;
+          break;
+        case 'align-end':
+        case 'wrap-right':
+          snap = width - pixelWidth - halfWidth;
+          break;
+        case 'center':
+        case 'wide':
+        case 'full-width':
+          snap = -pixelWidth / 2;
+          break;
+        // we ingnore full-width and wide
+        default:
+          snap = 0;
+      }
+      const snapWidths = getSnapWidth(guidelines, pixelWidth, snap, layout);
+      const snapToWidths = snapWidths.map(s => s && s.width);
+
+      // update guidelines
+      if (this.state.isResizing) {
+        const {
+          gap,
+          keys: activeGuidelineKeys
+        } = findClosestSnap(this.state.size.width, snapToWidths, snapWidths, MEDIA_SINGLE_HIGHLIGHT_GAP);
+        this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
+      }
+      return snapToWidths.length > 0 ? {
+        x: snapToWidths
+      } : {};
+    }
+    return {};
+  }
+  get wrappedLayout() {
+    return wrappedLayouts.indexOf(this.props.layout) > -1;
+  }
+  async componentDidMount() {
+    const {
+      viewMediaClientConfig
+    } = this.props;
+    if (viewMediaClientConfig) {
+      await this.checkVideoFile(viewMediaClientConfig);
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.viewMediaClientConfig !== nextProps.viewMediaClientConfig) {
+      this.checkVideoFile(nextProps.viewMediaClientConfig);
+    }
+  }
+  async checkVideoFile(viewMediaClientConfig) {
+    const $pos = this.$pos;
+    if (!$pos || !viewMediaClientConfig) {
+      return;
+    }
+    const mediaNode = this.props.view.state.doc.nodeAt($pos.pos + 1);
+    if (!mediaNode || !mediaNode.attrs.id) {
+      return;
+    }
+    const mediaClient = getMediaClient(viewMediaClientConfig);
+    try {
+      const state = await mediaClient.file.getCurrentState(mediaNode.attrs.id, {
+        collectionName: mediaNode.attrs.collection
+      });
+      if (state && state.status !== 'error' && state.mediaType === 'image') {
+        this.setState({
+          isVideoFile: false
+        });
+      }
+    } catch (err) {
+      this.setState({
+        isVideoFile: false
+      });
+    }
+  }
+  get $pos() {
+    if (typeof this.props.getPos !== 'function') {
+      return null;
+    }
+    const pos = this.props.getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+
+    // need to pass view because we may not get updated props in time
+    return this.props.view.state.doc.resolve(pos);
+  }
+
+  /**
+   * The maxmimum number of grid columns this node can resize to.
+   */
+  get gridWidth() {
+    const {
+      gridSize
+    } = this.props;
+    return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
+  }
+  get insideInlineLike() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      listItem
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }
+  get insideLayout() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      layoutColumn
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
+  }
+  render() {
+    const {
+      width: origWidth,
+      layout,
+      pctWidth,
+      containerWidth,
+      fullWidthMode,
+      selected,
+      children,
+      intl
+    } = this.props;
+    const {
+      isResizing,
+      size
+    } = this.state;
+    const enable = {};
+    handleSides.forEach(side => {
+      const oppositeSide = side === 'left' ? 'right' : 'left';
+      enable[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
+      if (side === 'left' && this.insideInlineLike) {
+        enable[side] = false;
+      }
+    });
+
+    /**
+     * NEW REFACTOR
+     */
+    const roundPixelValue = value => Math.round(value);
+    const getHeightFromNewWidth = (originalWidth, originalHeight, newWidth) => roundPixelValue(originalHeight / originalWidth * newWidth);
+    const calculateSizeState = (size, delta, originalWidth = 0, originalHeight, onResizeStop = false) => {
+      const calculatedWidth = roundPixelValue(size.width + delta.width);
+      const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
+      const calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+      return {
+        width: calculatedWidth,
+        height: calculatedHeightWithLayout,
+        calculatedWidthWithLayout
+      };
+    };
+    const selectCurrentMediaNode = () => {
+      if (!this.props.selected && typeof this.props.getPos === 'function') {
+        const propPos = this.props.getPos();
+        if (propPos !== undefined) {
+          setNodeSelection(this.props.view, propPos);
+        }
+      }
+    };
+    const handleResizeStart = () => {
+      this.setState({
+        isResizing: true
+      });
+      selectCurrentMediaNode();
+      this.setIsResizing(true);
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    };
+    const handleResize = (size, delta) => {
+      const {
+        width: originalWidth,
+        height: originalHeight,
+        layout,
+        updateSize
+      } = this.props;
+      const {
+        width,
+        height,
+        calculatedWidthWithLayout
+      } = calculateSizeState(size, delta, originalWidth, originalHeight);
+      this.setState({
+        size: {
+          width,
+          height
+        }
+      });
+      if (calculatedWidthWithLayout.layout !== layout) {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      }
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    };
+    const handleResizeStop = (size, delta) => {
+      const {
+        width: originalWidth,
+        height: originalHeight,
+        updateSize,
+        dispatchAnalyticsEvent,
+        nodeType
+      } = this.props;
+      const {
+        width,
+        height,
+        calculatedWidthWithLayout
+      } = calculateSizeState(size, delta, originalWidth, originalHeight, true);
+      this.setIsResizing(false);
+      this.displayGuideline([]);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+      }
+      this.setState({
+        isResizing: false,
+        size: {
+          width,
+          height
+        }
+      }, () => {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      });
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    };
+
+    // TODO: Clean up where this lives and how it gets generated
+    const className = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
+      'not-resized': !pctWidth,
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    const resizerNextClassName = classnames(className, resizerStyles);
+    const showSizeGuide = selected || isResizing;
+    const label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : `${this.state.size.width} x ${this.state.size.height}`;
+    return jsx("div", {
+      ref: this.saveWrapper,
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || origWidth,
+        fullWidthMode,
+        mediaSingleWidth: this.state.size.width,
+        isNestedNode: this.isNestedNode(),
+        isExtendedResizeExperienceOn: true
+      })
+    }, jsx(ResizerNext, {
+      minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+      className: resizerNextClassName,
+      snapGap: MEDIA_SINGLE_SNAP_GAP,
+      enable: enable,
+      width: size.width,
+      handleResizeStart: handleResizeStart,
+      handleResize: handleResize,
+      handleResizeStop: handleResizeStop,
+      snap: this.getSnaps(),
+      resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
+      "data-testid": resizerNextTestId
+    }, showSizeGuide && jsx(ResizeLabel, {
+      label: label,
+      containerWidth: this.state.size.width
+    }), children));
+  }
+}
+
+// for testing purpose
+export { ResizableMediaSingleNext as UnwrappedResizableMediaSingleNext };
+export default injectIntl(ResizableMediaSingleNext);

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/guidelines.js

@@ -0,0 +1,108 @@
+import memoizeOne from 'memoize-one';
+import { akEditorGutterPadding, akEditorFullWidthLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from '@atlaskit/editor-common/guideline';
+const mediaSingleSelector = 'div.mediaSingleView-content-wrap:not(.ProseMirror-selectednode)';
+const getDefaultGuidelines = memoizeOne(editorWidth => {
+  return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map((val, index) => ({
+    key: `grid_${index}`,
+    position: {
+      x: val / 12 * editorWidth
+    }
+  }));
+});
+const getWideGuidelines = memoizeOne(editorWidth => {
+  const wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
+  return [{
+    key: `wide_left`,
+    position: {
+      x: -wideSpacing
+    }
+  }, {
+    key: `wide_right`,
+    position: {
+      x: wideSpacing
+    }
+  }];
+});
+const getFullWidthGuidelines = memoizeOne(containerWidth => {
+  const fullWidth = Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
+  return [{
+    key: `full_width_left`,
+    position: {
+      x: -fullWidth
+    }
+  }, {
+    key: `full_width_right`,
+    position: {
+      x: fullWidth
+    }
+  }];
+});
+export const generateDefaultGuidelines = (editorWidth, containerWidth, isFullWidthMode = false) => {
+  const innerGrids = getDefaultGuidelines(editorWidth);
+  const wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
+  const fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
+  return [...innerGrids, ...wideGuidelines, ...fullWidthGuidelines];
+};
+export const generateDynamicGuidelines = view => {
+  const {
+    dom
+  } = view;
+  const {
+    width
+  } = dom.getBoundingClientRect();
+  const halfWidth = width / 2;
+  let keyIdx = 0;
+  const dynamicGuidelines = [...dom.querySelectorAll(mediaSingleSelector)].map((elem, _index) => {
+    const pixelWidthAttr = elem.getAttribute('widthType') === 'pixel' ? elem.getAttribute('width') : '';
+    const pixelWidth = parseFloat(pixelWidthAttr || '');
+    if (Number.isNaN(pixelWidth)) {
+      return [];
+    }
+    const commonStyles = {
+      styles: {
+        lineStyle: 'dashed'
+      },
+      show: false
+    };
+    const key = `${MEDIA_DYNAMIC_GUIDELINE_PREFIX}${++keyIdx}`;
+    switch (elem.getAttribute('layout')) {
+      case 'align-start':
+      case 'wrap-left':
+        return {
+          position: {
+            x: pixelWidth - halfWidth
+          },
+          key,
+          ...commonStyles
+        };
+      case 'align-end':
+      case 'wrap-right':
+        return {
+          position: {
+            x: width - pixelWidth - halfWidth
+          },
+          key,
+          ...commonStyles
+        };
+      case 'center':
+        return [{
+          position: {
+            x: pixelWidth / 2
+          },
+          key,
+          ...commonStyles
+        }, {
+          position: {
+            x: -pixelWidth / 2
+          },
+          key,
+          ...commonStyles
+        }];
+      // we ignore full-width and wide
+      default:
+        return [];
+    }
+  }).flat();
+  return dynamicGuidelines;
+};

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/resizable-media-single-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  fullWidthImage: {
+    id: 'fabric.editor.image.fullWidthImage',
+    defaultMessage: 'Full width image',
+    description: 'The image has reached its full width'
+  }
+});

package/dist/es2019/ui/ElementBrowser/components/ElementSearch.js

@@ -19,6 +19,7 @@ function ElementSearch({
   },
   focus,
   onClick,
+  onKeyDown,
   searchTerm
 }) {
   const ref = useFocus(focus);
@@ -38,6 +39,7 @@ function ElementSearch({
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
+    onKeyDown: onKeyDown,
     onBlur: onBlur,
     elemBeforeInput: jsx("div", {
       css: elementBeforeInput,
@@ -82,7 +84,7 @@ const wrapper = css`
     & > [data-ds--text-field--input] {
       margin-bottom: 3px;
       font-size: ${relativeFontSizeToBase16(14)};
-      padding: ${GRID_SIZE}px 6px ${GRID_SIZE}px 0;
+      padding: ${GRID_SIZE}px ${"var(--ds-space-075, 6px)"} ${GRID_SIZE}px 0;
     }
   }
 `;
@@ -94,7 +96,7 @@ const wrapperInline = css`
   }
 `;
 const elementBeforeInput = css`
-  margin: 1px 6px 0 8px;
+  margin: 1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"};
   color: ${`var(--ds-icon, ${N200})`};
 
   // Custom SearchIcon style
@@ -105,7 +107,7 @@ const elementBeforeInput = css`
   }
 `;
 const elementAfterInput = css`
-  margin: 0 8px;
+  margin: 0 ${"var(--ds-space-100, 8px)"};
   height: ${SEARCH_ITEM_HEIGHT_WIDTH};
   text-align: center;
 `;