@atlaskit/renderer 109.0.5 → 109.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 109.1.0
+
+### Minor Changes
+
+- [#61685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61685) [`ac1ec9ea4cd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac1ec9ea4cd3) - [ux] Add border mark support to mediaInline in Editor/Renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.0.5
 
 ### Patch Changes

package/dist/cjs/react/marks/border.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Border;
+var _react = require("@emotion/react");
+var _editorPalette = require("@atlaskit/editor-palette");
+/** @jsx jsx */
+
+function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  return (0, _react.jsx)("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/cjs/react/marks/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "Annotation", {
     return _annotation.default;
   }
 });
+Object.defineProperty(exports, "Border", {
+  enumerable: true,
+  get: function get() {
+    return _border.default;
+  }
+});
 Object.defineProperty(exports, "Breakout", {
   enumerable: true,
   get: function get() {
@@ -112,6 +118,7 @@ var _unsupportedNodeAttribute = _interopRequireDefault(require("./unsupportedNod
 var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 var _fragment = _interopRequireDefault(require("./fragment"));
 var _annotation = _interopRequireWildcard(require("./annotation"));
+var _border = _interopRequireDefault(require("./border"));
 var _confluenceInlineComment = _interopRequireDefault(require("./confluence-inline-comment"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -127,6 +134,7 @@ var markToReact = exports.markToReact = {
   textColor: _textColor.default,
   underline: _underline.default,
   annotation: _annotation.default,
+  border: _border.default,
   // Stage0
   confluenceInlineComment: _confluenceInlineComment.default,
   breakout: _breakout.default,

package/dist/cjs/react/nodes/mediaInline.js

@@ -34,7 +34,9 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -139,7 +141,11 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -175,6 +181,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -184,7 +191,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -194,6 +202,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -210,7 +223,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/cjs/ui/Renderer/index.js

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.5";
+var packageVersion = "109.1.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  const borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  const borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/es2019/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export const markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export const markToReact = {
 export const toReact = mark => {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

package/dist/es2019/react/nodes/mediaInline.js

@@ -18,7 +18,9 @@ export const RenderMediaInline = ({
   alt,
   width,
   height,
-  type
+  type,
+  borderSize,
+  borderColor
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
   const [fileState, setFileState] = useState();
@@ -84,7 +86,11 @@ export const RenderMediaInline = ({
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize,
+        borderColor
+      }
     });
   }
   const handleMediaInlineClick = result => {
@@ -124,6 +130,7 @@ export const RenderMediaInline = ({
   }));
 };
 const MediaInline = props => {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   const {
     collection,
     id,
@@ -134,7 +141,8 @@ const MediaInline = props => {
     type: fileType,
     alt,
     width,
-    height
+    height,
+    marks
   } = props;
   const clipboardAttrs = {
     id,
@@ -145,6 +153,9 @@ const MediaInline = props => {
     mediaItemType: 'file',
     collectionName: collection
   };
+  const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
+  const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  const borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -161,7 +172,9 @@ const MediaInline = props => {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.0.5";
+const packageVersion = "109.1.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/esm/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export var markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export var markToReact = {
 export var toReact = function toReact(mark) {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

package/dist/esm/react/nodes/mediaInline.js

@@ -24,7 +24,9 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -129,7 +131,11 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -165,6 +171,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -174,7 +181,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -184,6 +192,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -200,7 +213,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/esm/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.5";
+var packageVersion = "109.1.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/marks/border.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

package/dist/types/react/marks/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types/react/nodes/mediaInline.d.ts

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

package/dist/types-ts4.5/react/marks/border.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

package/dist/types-ts4.5/react/marks/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types-ts4.5/react/nodes/mediaInline.d.ts

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.0.5",
+  "version": "109.1.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.1.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.28.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "1.1.0",