@atlaskit/native-embeds-common 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/native-embeds-common
2
2
 
3
+ ## 0.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 0.2.0
4
16
 
5
17
  ### Minor Changes
@@ -0,0 +1,7 @@
1
+ ._1bah1h6o{justify-content:center}
2
+ ._1bsb1osq{width:100%}
3
+ ._1e0c1txw{display:flex}
4
+ ._1tke68cl{min-height:90pt}
5
+ ._4cvr1h6o{align-items:center}
6
+ ._4t3i1osq{height:100%}
7
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -0,0 +1,99 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.NativeEmbedFallbackUI = void 0;
10
+ require("./index.compiled.css");
11
+ var _runtime = require("@compiled/react/runtime");
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _reactIntlNext = require("react-intl-next");
14
+ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
15
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
16
+ var _refresh = _interopRequireDefault(require("@atlaskit/icon/core/refresh"));
17
+ var _compiled = require("@atlaskit/primitives/compiled");
18
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
19
+ var messages = (0, _reactIntlNext.defineMessages)({
20
+ title: {
21
+ id: 'native-embeds-fallback-editor-extension.title',
22
+ defaultMessage: 'Embed failed to load.',
23
+ description: 'Title shown in fallback extension when embedded content cannot be rendered in an editor.'
24
+ },
25
+ description: {
26
+ id: 'native-embeds-fallback-editor-extension.description',
27
+ defaultMessage: 'Something went wrong while loading the content.',
28
+ description: 'Body text shown in fallback extension for failed embedded content in an editor.'
29
+ },
30
+ refresh: {
31
+ id: 'native-embeds-fallback-editor-extension.refresh',
32
+ defaultMessage: 'Refresh',
33
+ description: 'Label for button that retries loading embedded content in an editor.'
34
+ }
35
+ });
36
+ var styles = {
37
+ container: "_1e0c1txw _4cvr1h6o _1bah1h6o _1bsb1osq _4t3i1osq _1tke68cl _bfhkvuon"
38
+ };
39
+ var NativeEmbedFallbackUI = exports.NativeEmbedFallbackUI = function NativeEmbedFallbackUI(_ref) {
40
+ var api = _ref.api,
41
+ localId = _ref.localId,
42
+ url = _ref.url;
43
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
44
+ formatMessage = _useIntl.formatMessage;
45
+ var onConvert = (0, _react.useCallback)(function () {
46
+ var _api$core2, _api$localId2;
47
+ if (!localId) {
48
+ return;
49
+ }
50
+ // If there is no URL, delete the node
51
+ if (!url) {
52
+ var _api$core, _api$core$execute;
53
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || (_api$core = _api$core.actions) === null || _api$core === void 0 || (_api$core$execute = _api$core.execute) === null || _api$core$execute === void 0 || _api$core$execute.call(_api$core, function (_ref2) {
54
+ var _api$localId;
55
+ var tr = _ref2.tr;
56
+ var targetNode = api === null || api === void 0 || (_api$localId = api.localId) === null || _api$localId === void 0 || (_api$localId = _api$localId.actions) === null || _api$localId === void 0 ? void 0 : _api$localId.getNode({
57
+ localId: localId
58
+ });
59
+ if (!targetNode) {
60
+ return tr;
61
+ }
62
+ return tr.delete(targetNode.pos, targetNode.pos + targetNode.node.nodeSize);
63
+ });
64
+ return;
65
+ }
66
+ var schema = api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || (_api$core2 = _api$core2.sharedState.currentState()) === null || _api$core2 === void 0 ? void 0 : _api$core2.schema;
67
+ if (!schema) {
68
+ return;
69
+ }
70
+ // Convert the native embed node to an inline card
71
+ var inlineCard = schema.nodeFromJSON({
72
+ type: 'paragraph',
73
+ content: [{
74
+ type: 'inlineCard',
75
+ attrs: {
76
+ url: url
77
+ }
78
+ }]
79
+ });
80
+ api === null || api === void 0 || (_api$localId2 = api.localId) === null || _api$localId2 === void 0 || (_api$localId2 = _api$localId2.actions) === null || _api$localId2 === void 0 || _api$localId2.replaceNode({
81
+ localId: localId,
82
+ value: inlineCard
83
+ });
84
+ }, [api, localId, url]);
85
+ return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
86
+ testId: "native-embeds-fallback-extension",
87
+ xcss: styles.container
88
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
89
+ space: "space.100",
90
+ alignInline: "center"
91
+ }, /*#__PURE__*/_react.default.createElement(_heading.default, {
92
+ size: "small"
93
+ }, formatMessage(messages.title)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
94
+ color: "color.text.subtle"
95
+ }, formatMessage(messages.description)), /*#__PURE__*/_react.default.createElement(_new.default, {
96
+ iconBefore: _refresh.default,
97
+ onClick: onConvert
98
+ }, formatMessage(messages.refresh))));
99
+ };
@@ -0,0 +1,7 @@
1
+ ._1bah1h6o{justify-content:center}
2
+ ._1bsb1osq{width:100%}
3
+ ._1e0c1txw{display:flex}
4
+ ._1tke68cl{min-height:90pt}
5
+ ._4cvr1h6o{align-items:center}
6
+ ._4t3i1osq{height:100%}
7
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -0,0 +1,93 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import "./index.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
4
+ import React, { useCallback } from 'react';
5
+ import { defineMessages, useIntl } from 'react-intl-next';
6
+ import Button from '@atlaskit/button/new';
7
+ import Heading from '@atlaskit/heading';
8
+ import RefreshIcon from '@atlaskit/icon/core/refresh';
9
+ import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
+ const messages = defineMessages({
11
+ title: {
12
+ id: 'native-embeds-fallback-editor-extension.title',
13
+ defaultMessage: 'Embed failed to load.',
14
+ description: 'Title shown in fallback extension when embedded content cannot be rendered in an editor.'
15
+ },
16
+ description: {
17
+ id: 'native-embeds-fallback-editor-extension.description',
18
+ defaultMessage: 'Something went wrong while loading the content.',
19
+ description: 'Body text shown in fallback extension for failed embedded content in an editor.'
20
+ },
21
+ refresh: {
22
+ id: 'native-embeds-fallback-editor-extension.refresh',
23
+ defaultMessage: 'Refresh',
24
+ description: 'Label for button that retries loading embedded content in an editor.'
25
+ }
26
+ });
27
+ const styles = {
28
+ container: "_1e0c1txw _4cvr1h6o _1bah1h6o _1bsb1osq _4t3i1osq _1tke68cl _bfhkvuon"
29
+ };
30
+ export const NativeEmbedFallbackUI = ({
31
+ api,
32
+ localId,
33
+ url
34
+ }) => {
35
+ const {
36
+ formatMessage
37
+ } = useIntl();
38
+ const onConvert = useCallback(() => {
39
+ var _api$core2, _api$core2$sharedStat, _api$localId2, _api$localId2$actions;
40
+ if (!localId) {
41
+ return;
42
+ }
43
+ // If there is no URL, delete the node
44
+ if (!url) {
45
+ var _api$core, _api$core$actions, _api$core$actions$exe;
46
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : (_api$core$actions = _api$core.actions) === null || _api$core$actions === void 0 ? void 0 : (_api$core$actions$exe = _api$core$actions.execute) === null || _api$core$actions$exe === void 0 ? void 0 : _api$core$actions$exe.call(_api$core$actions, ({
47
+ tr
48
+ }) => {
49
+ var _api$localId, _api$localId$actions;
50
+ const targetNode = api === null || api === void 0 ? void 0 : (_api$localId = api.localId) === null || _api$localId === void 0 ? void 0 : (_api$localId$actions = _api$localId.actions) === null || _api$localId$actions === void 0 ? void 0 : _api$localId$actions.getNode({
51
+ localId
52
+ });
53
+ if (!targetNode) {
54
+ return tr;
55
+ }
56
+ return tr.delete(targetNode.pos, targetNode.pos + targetNode.node.nodeSize);
57
+ });
58
+ return;
59
+ }
60
+ const schema = api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : (_api$core2$sharedStat = _api$core2.sharedState.currentState()) === null || _api$core2$sharedStat === void 0 ? void 0 : _api$core2$sharedStat.schema;
61
+ if (!schema) {
62
+ return;
63
+ }
64
+ // Convert the native embed node to an inline card
65
+ const inlineCard = schema.nodeFromJSON({
66
+ type: 'paragraph',
67
+ content: [{
68
+ type: 'inlineCard',
69
+ attrs: {
70
+ url
71
+ }
72
+ }]
73
+ });
74
+ api === null || api === void 0 ? void 0 : (_api$localId2 = api.localId) === null || _api$localId2 === void 0 ? void 0 : (_api$localId2$actions = _api$localId2.actions) === null || _api$localId2$actions === void 0 ? void 0 : _api$localId2$actions.replaceNode({
75
+ localId,
76
+ value: inlineCard
77
+ });
78
+ }, [api, localId, url]);
79
+ return /*#__PURE__*/React.createElement(Box, {
80
+ testId: "native-embeds-fallback-extension",
81
+ xcss: styles.container
82
+ }, /*#__PURE__*/React.createElement(Stack, {
83
+ space: "space.100",
84
+ alignInline: "center"
85
+ }, /*#__PURE__*/React.createElement(Heading, {
86
+ size: "small"
87
+ }, formatMessage(messages.title)), /*#__PURE__*/React.createElement(Text, {
88
+ color: "color.text.subtle"
89
+ }, formatMessage(messages.description)), /*#__PURE__*/React.createElement(Button, {
90
+ iconBefore: RefreshIcon,
91
+ onClick: onConvert
92
+ }, formatMessage(messages.refresh))));
93
+ };
@@ -0,0 +1,7 @@
1
+ ._1bah1h6o{justify-content:center}
2
+ ._1bsb1osq{width:100%}
3
+ ._1e0c1txw{display:flex}
4
+ ._1tke68cl{min-height:90pt}
5
+ ._4cvr1h6o{align-items:center}
6
+ ._4t3i1osq{height:100%}
7
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -0,0 +1,90 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import "./index.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
4
+ import React, { useCallback } from 'react';
5
+ import { defineMessages, useIntl } from 'react-intl-next';
6
+ import Button from '@atlaskit/button/new';
7
+ import Heading from '@atlaskit/heading';
8
+ import RefreshIcon from '@atlaskit/icon/core/refresh';
9
+ import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
+ var messages = defineMessages({
11
+ title: {
12
+ id: 'native-embeds-fallback-editor-extension.title',
13
+ defaultMessage: 'Embed failed to load.',
14
+ description: 'Title shown in fallback extension when embedded content cannot be rendered in an editor.'
15
+ },
16
+ description: {
17
+ id: 'native-embeds-fallback-editor-extension.description',
18
+ defaultMessage: 'Something went wrong while loading the content.',
19
+ description: 'Body text shown in fallback extension for failed embedded content in an editor.'
20
+ },
21
+ refresh: {
22
+ id: 'native-embeds-fallback-editor-extension.refresh',
23
+ defaultMessage: 'Refresh',
24
+ description: 'Label for button that retries loading embedded content in an editor.'
25
+ }
26
+ });
27
+ var styles = {
28
+ container: "_1e0c1txw _4cvr1h6o _1bah1h6o _1bsb1osq _4t3i1osq _1tke68cl _bfhkvuon"
29
+ };
30
+ export var NativeEmbedFallbackUI = function NativeEmbedFallbackUI(_ref) {
31
+ var api = _ref.api,
32
+ localId = _ref.localId,
33
+ url = _ref.url;
34
+ var _useIntl = useIntl(),
35
+ formatMessage = _useIntl.formatMessage;
36
+ var onConvert = useCallback(function () {
37
+ var _api$core2, _api$localId2;
38
+ if (!localId) {
39
+ return;
40
+ }
41
+ // If there is no URL, delete the node
42
+ if (!url) {
43
+ var _api$core, _api$core$execute;
44
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || (_api$core = _api$core.actions) === null || _api$core === void 0 || (_api$core$execute = _api$core.execute) === null || _api$core$execute === void 0 || _api$core$execute.call(_api$core, function (_ref2) {
45
+ var _api$localId;
46
+ var tr = _ref2.tr;
47
+ var targetNode = api === null || api === void 0 || (_api$localId = api.localId) === null || _api$localId === void 0 || (_api$localId = _api$localId.actions) === null || _api$localId === void 0 ? void 0 : _api$localId.getNode({
48
+ localId: localId
49
+ });
50
+ if (!targetNode) {
51
+ return tr;
52
+ }
53
+ return tr.delete(targetNode.pos, targetNode.pos + targetNode.node.nodeSize);
54
+ });
55
+ return;
56
+ }
57
+ var schema = api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || (_api$core2 = _api$core2.sharedState.currentState()) === null || _api$core2 === void 0 ? void 0 : _api$core2.schema;
58
+ if (!schema) {
59
+ return;
60
+ }
61
+ // Convert the native embed node to an inline card
62
+ var inlineCard = schema.nodeFromJSON({
63
+ type: 'paragraph',
64
+ content: [{
65
+ type: 'inlineCard',
66
+ attrs: {
67
+ url: url
68
+ }
69
+ }]
70
+ });
71
+ api === null || api === void 0 || (_api$localId2 = api.localId) === null || _api$localId2 === void 0 || (_api$localId2 = _api$localId2.actions) === null || _api$localId2 === void 0 || _api$localId2.replaceNode({
72
+ localId: localId,
73
+ value: inlineCard
74
+ });
75
+ }, [api, localId, url]);
76
+ return /*#__PURE__*/React.createElement(Box, {
77
+ testId: "native-embeds-fallback-extension",
78
+ xcss: styles.container
79
+ }, /*#__PURE__*/React.createElement(Stack, {
80
+ space: "space.100",
81
+ alignInline: "center"
82
+ }, /*#__PURE__*/React.createElement(Heading, {
83
+ size: "small"
84
+ }, formatMessage(messages.title)), /*#__PURE__*/React.createElement(Text, {
85
+ color: "color.text.subtle"
86
+ }, formatMessage(messages.description)), /*#__PURE__*/React.createElement(Button, {
87
+ iconBefore: RefreshIcon,
88
+ onClick: onConvert
89
+ }, formatMessage(messages.refresh))));
90
+ };
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import type { CorePlugin } from '@atlaskit/editor-common/types';
3
+ import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
4
+ import type { LocalIdPlugin } from '@atlaskit/editor-plugin-local-id';
5
+ type NativeEmbedsEditorAPI = PublicPluginAPI<[CorePlugin, LocalIdPlugin]>;
6
+ export declare const NativeEmbedFallbackUI: ({ api, localId, url, }: {
7
+ api?: NativeEmbedsEditorAPI;
8
+ localId?: string;
9
+ url?: string;
10
+ }) => React.JSX.Element;
11
+ export {};
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import type { CorePlugin } from '@atlaskit/editor-common/types';
3
+ import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
4
+ import type { LocalIdPlugin } from '@atlaskit/editor-plugin-local-id';
5
+ type NativeEmbedsEditorAPI = PublicPluginAPI<[
6
+ CorePlugin,
7
+ LocalIdPlugin
8
+ ]>;
9
+ export declare const NativeEmbedFallbackUI: ({ api, localId, url, }: {
10
+ api?: NativeEmbedsEditorAPI;
11
+ localId?: string;
12
+ url?: string;
13
+ }) => React.JSX.Element;
14
+ export {};
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/native-embeds-common/fallback-ui",
3
+ "main": "../dist/cjs/ui/index.js",
4
+ "module": "../dist/esm/ui/index.js",
5
+ "module:es2019": "../dist/es2019/ui/index.js",
6
+ "sideEffects": [
7
+ "*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/ui/index.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.9": {
12
+ "*": [
13
+ "../dist/types-ts4.5/ui/index.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }
package/package.json CHANGED
@@ -24,11 +24,17 @@
24
24
  ],
25
25
  "atlaskit:src": "src/index.ts",
26
26
  "dependencies": {
27
- "@atlaskit/editor-common": "^112.13.0",
27
+ "@atlaskit/button": "^23.11.0",
28
+ "@atlaskit/editor-common": "^112.18.0",
29
+ "@atlaskit/editor-plugin-local-id": "^6.0.0",
28
30
  "@atlaskit/editor-prosemirror": "^7.3.0",
29
- "@atlaskit/icon": "^33.1.0",
31
+ "@atlaskit/heading": "^5.4.0",
32
+ "@atlaskit/icon": "^34.0.0",
33
+ "@atlaskit/primitives": "^18.1.0",
34
+ "@atlaskit/tokens": "^12.0.0",
30
35
  "@babel/runtime": "^7.0.0",
31
- "@compiled/react": "^0.20.0"
36
+ "@compiled/react": "^0.20.0",
37
+ "react-intl-next": "npm:react-intl@^5.18.1"
32
38
  },
33
39
  "peerDependencies": {
34
40
  "react": "^18.2.0"
@@ -79,7 +85,7 @@
79
85
  }
80
86
  },
81
87
  "name": "@atlaskit/native-embeds-common",
82
- "version": "0.2.0",
88
+ "version": "0.2.2",
83
89
  "description": "A shared package for native embeds to be used across experiences and plugin",
84
90
  "author": "Atlassian Pty Ltd",
85
91
  "license": "Apache-2.0",