@atlaskit/editor-plugin-native-embeds 0.0.0

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.
Files changed (30) hide show
  1. package/LICENSE.md +11 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/index.js +12 -0
  4. package/dist/cjs/nativeEmbedsPlugin.js +20 -0
  5. package/dist/cjs/nativeEmbedsPluginType.js +5 -0
  6. package/dist/cjs/pm-plugins/ui/floating-toolbar.js +98 -0
  7. package/dist/cjs/pm-plugins/utils/getSelectedNativeEmbedExtension.js +36 -0
  8. package/dist/es2019/index.js +4 -0
  9. package/dist/es2019/nativeEmbedsPlugin.js +13 -0
  10. package/dist/es2019/nativeEmbedsPluginType.js +1 -0
  11. package/dist/es2019/pm-plugins/ui/floating-toolbar.js +88 -0
  12. package/dist/es2019/pm-plugins/utils/getSelectedNativeEmbedExtension.js +33 -0
  13. package/dist/esm/index.js +4 -0
  14. package/dist/esm/nativeEmbedsPlugin.js +14 -0
  15. package/dist/esm/nativeEmbedsPluginType.js +1 -0
  16. package/dist/esm/pm-plugins/ui/floating-toolbar.js +91 -0
  17. package/dist/esm/pm-plugins/utils/getSelectedNativeEmbedExtension.js +31 -0
  18. package/dist/types/index.d.ts +3 -0
  19. package/dist/types/nativeEmbedsPlugin.d.ts +2 -0
  20. package/dist/types/nativeEmbedsPluginType.d.ts +22 -0
  21. package/dist/types/pm-plugins/ui/floating-toolbar.d.ts +8 -0
  22. package/dist/types/pm-plugins/utils/getSelectedNativeEmbedExtension.d.ts +6 -0
  23. package/dist/types-ts4.5/index.d.ts +3 -0
  24. package/dist/types-ts4.5/nativeEmbedsPlugin.d.ts +2 -0
  25. package/dist/types-ts4.5/nativeEmbedsPluginType.d.ts +26 -0
  26. package/dist/types-ts4.5/pm-plugins/ui/floating-toolbar.d.ts +8 -0
  27. package/dist/types-ts4.5/pm-plugins/utils/getSelectedNativeEmbedExtension.d.ts +6 -0
  28. package/docs/0-intro.tsx +70 -0
  29. package/package.json +82 -0
  30. package/tsconfig.json +7 -0
package/LICENSE.md ADDED
@@ -0,0 +1,11 @@
1
+ Copyright 2019 Atlassian Pty Ltd
2
+
3
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
4
+ compliance with the License. You may obtain a copy of the License at
5
+
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+
8
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
9
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10
+ implied. See the License for the specific language governing permissions and limitations under the
11
+ License.
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # Editor plugin editor plugin-native-embeds
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "nativeEmbedsPlugin", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _nativeEmbedsPlugin.nativeEmbedsPlugin;
10
+ }
11
+ });
12
+ var _nativeEmbedsPlugin = require("./nativeEmbedsPlugin");
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.nativeEmbedsPlugin = void 0;
7
+ var _floatingToolbar = require("./pm-plugins/ui/floating-toolbar");
8
+ var nativeEmbedsPlugin = exports.nativeEmbedsPlugin = function nativeEmbedsPlugin(_ref) {
9
+ var api = _ref.api,
10
+ config = _ref.config;
11
+ return {
12
+ name: 'editorPluginNativeEmbeds',
13
+ pluginsOptions: {
14
+ floatingToolbar: (0, _floatingToolbar.getToolbarConfig)({
15
+ api: api,
16
+ handlers: config === null || config === void 0 ? void 0 : config.handlers
17
+ })
18
+ }
19
+ };
20
+ };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getToolbarConfig = void 0;
8
+ var _utils = require("@atlaskit/editor-prosemirror/utils");
9
+ var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
10
+ var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
11
+ var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
12
+ var _page = _interopRequireDefault(require("@atlaskit/icon/core/page"));
13
+ var _refresh = _interopRequireDefault(require("@atlaskit/icon/core/refresh"));
14
+ var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
15
+ var _getSelectedNativeEmbedExtension = require("../utils/getSelectedNativeEmbedExtension");
16
+ var createHandlerCommand = function createHandlerCommand(handler) {
17
+ return function () {
18
+ handler === null || handler === void 0 || handler();
19
+ return true;
20
+ };
21
+ };
22
+ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref) {
23
+ var _api = _ref.api,
24
+ handlers = _ref.handlers;
25
+ return function (state, _intl, _providerFactory, _activeConfigs) {
26
+ var selectedNativeEmbed = (0, _getSelectedNativeEmbedExtension.getSelectedNativeEmbedExtension)(state);
27
+ if (!selectedNativeEmbed) {
28
+ return undefined;
29
+ }
30
+ var getDomRef = function getDomRef(view) {
31
+ try {
32
+ var node = (0, _utils.findDomRefAtPos)(selectedNativeEmbed.pos, view.domAtPos.bind(view));
33
+ return node instanceof HTMLElement ? node : undefined;
34
+ } catch (_unused) {
35
+ return undefined;
36
+ }
37
+ };
38
+ return {
39
+ title: 'Native Embed floating toolbar',
40
+ getDomRef: getDomRef,
41
+ nodeType: state.schema.nodes.extension,
42
+ items: [{
43
+ id: 'native-embed-refresh-button',
44
+ type: 'button',
45
+ title: 'Refresh',
46
+ showTitle: true,
47
+ icon: _refresh.default,
48
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onRefreshClick),
49
+ focusEditoronEnter: true,
50
+ tabIndex: null
51
+ }, {
52
+ type: 'separator'
53
+ }, {
54
+ id: 'native-embed-embed-dropdown',
55
+ type: 'dropdown',
56
+ title: 'Embed',
57
+ iconBefore: _page.default,
58
+ options: [],
59
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onEmbedClick
60
+ }, {
61
+ id: 'native-embed-change-border-dropdown',
62
+ type: 'dropdown',
63
+ title: '',
64
+ iconBefore: _border.default,
65
+ options: [],
66
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onChangeBorderClick
67
+ }, {
68
+ id: 'native-embed-alignment-dropdown',
69
+ type: 'dropdown',
70
+ title: '',
71
+ iconBefore: _alignTextCenter.default,
72
+ options: [],
73
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
74
+ }, {
75
+ type: 'separator'
76
+ }, {
77
+ id: 'native-embed-open-new-window-button',
78
+ type: 'button',
79
+ title: 'Open in new window',
80
+ icon: _linkExternal.default,
81
+ iconFallback: _linkExternal.default,
82
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onOpenInNewWindowClick),
83
+ focusEditoronEnter: true,
84
+ tabIndex: null
85
+ }, {
86
+ type: 'separator'
87
+ }, {
88
+ id: 'native-embed-more-options-button',
89
+ type: 'dropdown',
90
+ title: 'More options',
91
+ icon: _showMoreHorizontal.default,
92
+ hideExpandIcon: true,
93
+ options: [],
94
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
95
+ }]
96
+ };
97
+ };
98
+ };
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getSelectedNativeEmbedExtension = void 0;
7
+ var _extensions = require("@atlaskit/editor-common/extensions");
8
+ var _utils = require("@atlaskit/editor-prosemirror/utils");
9
+ /**
10
+ * Returns the currently selected extension node, if any.
11
+ */
12
+ var getSelectedExtension = function getSelectedExtension(state) {
13
+ var schema = state.schema,
14
+ selection = state.selection;
15
+ return (0, _utils.findSelectedNodeOfType)(schema.nodes.extension)(selection) || undefined;
16
+ };
17
+
18
+ /**
19
+ * Checks whether a given ProseMirror node is a native-embed extension.
20
+ */
21
+ var isNativeEmbedExtension = function isNativeEmbedExtension(node) {
22
+ var _node$attrs;
23
+ return ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionType) === _extensions.NATIVE_EMBED_EXTENSION_TYPE;
24
+ };
25
+
26
+ /**
27
+ * Returns the currently selected native-embed extension node, or undefined
28
+ * if the selection is not inside a native-embed extension.
29
+ */
30
+ var getSelectedNativeEmbedExtension = exports.getSelectedNativeEmbedExtension = function getSelectedNativeEmbedExtension(state) {
31
+ var selected = getSelectedExtension(state);
32
+ if (selected && isNativeEmbedExtension(selected.node)) {
33
+ return selected;
34
+ }
35
+ return undefined;
36
+ };
@@ -0,0 +1,4 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ // Entry file in package.json
3
+
4
+ export { nativeEmbedsPlugin } from './nativeEmbedsPlugin';
@@ -0,0 +1,13 @@
1
+ import { getToolbarConfig } from './pm-plugins/ui/floating-toolbar';
2
+ export const nativeEmbedsPlugin = ({
3
+ api,
4
+ config
5
+ }) => ({
6
+ name: 'editorPluginNativeEmbeds',
7
+ pluginsOptions: {
8
+ floatingToolbar: getToolbarConfig({
9
+ api,
10
+ handlers: config === null || config === void 0 ? void 0 : config.handlers
11
+ })
12
+ }
13
+ });
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,88 @@
1
+ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
2
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
3
+ import BorderIcon from '@atlaskit/icon/core/border';
4
+ import LinkExternalIcon from '@atlaskit/icon/core/link-external';
5
+ import PageIcon from '@atlaskit/icon/core/page';
6
+ import RefreshIcon from '@atlaskit/icon/core/refresh';
7
+ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
8
+ import { getSelectedNativeEmbedExtension } from '../utils/getSelectedNativeEmbedExtension';
9
+ const createHandlerCommand = handler => () => {
10
+ handler === null || handler === void 0 ? void 0 : handler();
11
+ return true;
12
+ };
13
+ export const getToolbarConfig = ({
14
+ api: _api,
15
+ handlers
16
+ }) => (state, _intl, _providerFactory, _activeConfigs) => {
17
+ const selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
18
+ if (!selectedNativeEmbed) {
19
+ return undefined;
20
+ }
21
+ const getDomRef = view => {
22
+ try {
23
+ const node = findDomRefAtPos(selectedNativeEmbed.pos, view.domAtPos.bind(view));
24
+ return node instanceof HTMLElement ? node : undefined;
25
+ } catch {
26
+ return undefined;
27
+ }
28
+ };
29
+ return {
30
+ title: 'Native Embed floating toolbar',
31
+ getDomRef,
32
+ nodeType: state.schema.nodes.extension,
33
+ items: [{
34
+ id: 'native-embed-refresh-button',
35
+ type: 'button',
36
+ title: 'Refresh',
37
+ showTitle: true,
38
+ icon: RefreshIcon,
39
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onRefreshClick),
40
+ focusEditoronEnter: true,
41
+ tabIndex: null
42
+ }, {
43
+ type: 'separator'
44
+ }, {
45
+ id: 'native-embed-embed-dropdown',
46
+ type: 'dropdown',
47
+ title: 'Embed',
48
+ iconBefore: PageIcon,
49
+ options: [],
50
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onEmbedClick
51
+ }, {
52
+ id: 'native-embed-change-border-dropdown',
53
+ type: 'dropdown',
54
+ title: '',
55
+ iconBefore: BorderIcon,
56
+ options: [],
57
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onChangeBorderClick
58
+ }, {
59
+ id: 'native-embed-alignment-dropdown',
60
+ type: 'dropdown',
61
+ title: '',
62
+ iconBefore: AlignTextCenterIcon,
63
+ options: [],
64
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
65
+ }, {
66
+ type: 'separator'
67
+ }, {
68
+ id: 'native-embed-open-new-window-button',
69
+ type: 'button',
70
+ title: 'Open in new window',
71
+ icon: LinkExternalIcon,
72
+ iconFallback: LinkExternalIcon,
73
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onOpenInNewWindowClick),
74
+ focusEditoronEnter: true,
75
+ tabIndex: null
76
+ }, {
77
+ type: 'separator'
78
+ }, {
79
+ id: 'native-embed-more-options-button',
80
+ type: 'dropdown',
81
+ title: 'More options',
82
+ icon: ShowMoreHorizontalIcon,
83
+ hideExpandIcon: true,
84
+ options: [],
85
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
86
+ }]
87
+ };
88
+ };
@@ -0,0 +1,33 @@
1
+ import { NATIVE_EMBED_EXTENSION_TYPE } from '@atlaskit/editor-common/extensions';
2
+ import { findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
+
4
+ /**
5
+ * Returns the currently selected extension node, if any.
6
+ */
7
+ const getSelectedExtension = state => {
8
+ const {
9
+ schema,
10
+ selection
11
+ } = state;
12
+ return findSelectedNodeOfType(schema.nodes.extension)(selection) || undefined;
13
+ };
14
+
15
+ /**
16
+ * Checks whether a given ProseMirror node is a native-embed extension.
17
+ */
18
+ const isNativeEmbedExtension = node => {
19
+ var _node$attrs;
20
+ return ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionType) === NATIVE_EMBED_EXTENSION_TYPE;
21
+ };
22
+
23
+ /**
24
+ * Returns the currently selected native-embed extension node, or undefined
25
+ * if the selection is not inside a native-embed extension.
26
+ */
27
+ export const getSelectedNativeEmbedExtension = state => {
28
+ const selected = getSelectedExtension(state);
29
+ if (selected && isNativeEmbedExtension(selected.node)) {
30
+ return selected;
31
+ }
32
+ return undefined;
33
+ };
@@ -0,0 +1,4 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ // Entry file in package.json
3
+
4
+ export { nativeEmbedsPlugin } from './nativeEmbedsPlugin';
@@ -0,0 +1,14 @@
1
+ import { getToolbarConfig } from './pm-plugins/ui/floating-toolbar';
2
+ export var nativeEmbedsPlugin = function nativeEmbedsPlugin(_ref) {
3
+ var api = _ref.api,
4
+ config = _ref.config;
5
+ return {
6
+ name: 'editorPluginNativeEmbeds',
7
+ pluginsOptions: {
8
+ floatingToolbar: getToolbarConfig({
9
+ api: api,
10
+ handlers: config === null || config === void 0 ? void 0 : config.handlers
11
+ })
12
+ }
13
+ };
14
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,91 @@
1
+ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
2
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
3
+ import BorderIcon from '@atlaskit/icon/core/border';
4
+ import LinkExternalIcon from '@atlaskit/icon/core/link-external';
5
+ import PageIcon from '@atlaskit/icon/core/page';
6
+ import RefreshIcon from '@atlaskit/icon/core/refresh';
7
+ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
8
+ import { getSelectedNativeEmbedExtension } from '../utils/getSelectedNativeEmbedExtension';
9
+ var createHandlerCommand = function createHandlerCommand(handler) {
10
+ return function () {
11
+ handler === null || handler === void 0 || handler();
12
+ return true;
13
+ };
14
+ };
15
+ export var getToolbarConfig = function getToolbarConfig(_ref) {
16
+ var _api = _ref.api,
17
+ handlers = _ref.handlers;
18
+ return function (state, _intl, _providerFactory, _activeConfigs) {
19
+ var selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
20
+ if (!selectedNativeEmbed) {
21
+ return undefined;
22
+ }
23
+ var getDomRef = function getDomRef(view) {
24
+ try {
25
+ var node = findDomRefAtPos(selectedNativeEmbed.pos, view.domAtPos.bind(view));
26
+ return node instanceof HTMLElement ? node : undefined;
27
+ } catch (_unused) {
28
+ return undefined;
29
+ }
30
+ };
31
+ return {
32
+ title: 'Native Embed floating toolbar',
33
+ getDomRef: getDomRef,
34
+ nodeType: state.schema.nodes.extension,
35
+ items: [{
36
+ id: 'native-embed-refresh-button',
37
+ type: 'button',
38
+ title: 'Refresh',
39
+ showTitle: true,
40
+ icon: RefreshIcon,
41
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onRefreshClick),
42
+ focusEditoronEnter: true,
43
+ tabIndex: null
44
+ }, {
45
+ type: 'separator'
46
+ }, {
47
+ id: 'native-embed-embed-dropdown',
48
+ type: 'dropdown',
49
+ title: 'Embed',
50
+ iconBefore: PageIcon,
51
+ options: [],
52
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onEmbedClick
53
+ }, {
54
+ id: 'native-embed-change-border-dropdown',
55
+ type: 'dropdown',
56
+ title: '',
57
+ iconBefore: BorderIcon,
58
+ options: [],
59
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onChangeBorderClick
60
+ }, {
61
+ id: 'native-embed-alignment-dropdown',
62
+ type: 'dropdown',
63
+ title: '',
64
+ iconBefore: AlignTextCenterIcon,
65
+ options: [],
66
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
67
+ }, {
68
+ type: 'separator'
69
+ }, {
70
+ id: 'native-embed-open-new-window-button',
71
+ type: 'button',
72
+ title: 'Open in new window',
73
+ icon: LinkExternalIcon,
74
+ iconFallback: LinkExternalIcon,
75
+ onClick: createHandlerCommand(handlers === null || handlers === void 0 ? void 0 : handlers.onOpenInNewWindowClick),
76
+ focusEditoronEnter: true,
77
+ tabIndex: null
78
+ }, {
79
+ type: 'separator'
80
+ }, {
81
+ id: 'native-embed-more-options-button',
82
+ type: 'dropdown',
83
+ title: 'More options',
84
+ icon: ShowMoreHorizontalIcon,
85
+ hideExpandIcon: true,
86
+ options: [],
87
+ onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
88
+ }]
89
+ };
90
+ };
91
+ };
@@ -0,0 +1,31 @@
1
+ import { NATIVE_EMBED_EXTENSION_TYPE } from '@atlaskit/editor-common/extensions';
2
+ import { findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
+
4
+ /**
5
+ * Returns the currently selected extension node, if any.
6
+ */
7
+ var getSelectedExtension = function getSelectedExtension(state) {
8
+ var schema = state.schema,
9
+ selection = state.selection;
10
+ return findSelectedNodeOfType(schema.nodes.extension)(selection) || undefined;
11
+ };
12
+
13
+ /**
14
+ * Checks whether a given ProseMirror node is a native-embed extension.
15
+ */
16
+ var isNativeEmbedExtension = function isNativeEmbedExtension(node) {
17
+ var _node$attrs;
18
+ return ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionType) === NATIVE_EMBED_EXTENSION_TYPE;
19
+ };
20
+
21
+ /**
22
+ * Returns the currently selected native-embed extension node, or undefined
23
+ * if the selection is not inside a native-embed extension.
24
+ */
25
+ export var getSelectedNativeEmbedExtension = function getSelectedNativeEmbedExtension(state) {
26
+ var selected = getSelectedExtension(state);
27
+ if (selected && isNativeEmbedExtension(selected.node)) {
28
+ return selected;
29
+ }
30
+ return undefined;
31
+ };
@@ -0,0 +1,3 @@
1
+ export { nativeEmbedsPlugin } from './nativeEmbedsPlugin';
2
+ export type { EditorPluginNativeEmbedsPlugin } from './nativeEmbedsPluginType';
3
+ export type { EditorPluginNativeEmbedsToolbarHandlers } from './nativeEmbedsPluginType';
@@ -0,0 +1,2 @@
1
+ import type { EditorPluginNativeEmbedsPlugin } from './nativeEmbedsPluginType';
2
+ export declare const nativeEmbedsPlugin: EditorPluginNativeEmbedsPlugin;
@@ -0,0 +1,22 @@
1
+ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
+ import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
4
+ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
5
+ /**
6
+ * Handlers for native embed floating toolbar actions.
7
+ * Consumers can provide these to hook into toolbar button clicks.
8
+ */
9
+ export interface EditorPluginNativeEmbedsToolbarHandlers {
10
+ onAlignmentClick?: () => void;
11
+ onChangeBorderClick?: () => void;
12
+ onEmbedClick?: () => void;
13
+ onMoreOptionsClick?: () => void;
14
+ onOpenInNewWindowClick?: () => void;
15
+ onRefreshClick?: () => void;
16
+ }
17
+ export type EditorPluginNativeEmbedsPlugin = NextEditorPlugin<'editorPluginNativeEmbeds', {
18
+ dependencies: [OptionalPlugin<AnalyticsPlugin>, DecorationsPlugin, ExtensionPlugin];
19
+ pluginConfiguration: {
20
+ handlers?: EditorPluginNativeEmbedsToolbarHandlers;
21
+ } | undefined;
22
+ }>;
@@ -0,0 +1,8 @@
1
+ import type { ExtractInjectionAPI, FloatingToolbarHandler } from '@atlaskit/editor-common/types';
2
+ import type { EditorPluginNativeEmbedsPlugin, EditorPluginNativeEmbedsToolbarHandlers } from '../../nativeEmbedsPluginType';
3
+ interface GetToolbarConfigProps {
4
+ api?: ExtractInjectionAPI<EditorPluginNativeEmbedsPlugin>;
5
+ handlers?: EditorPluginNativeEmbedsToolbarHandlers;
6
+ }
7
+ export declare const getToolbarConfig: ({ api: _api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
2
+ /**
3
+ * Returns the currently selected native-embed extension node, or undefined
4
+ * if the selection is not inside a native-embed extension.
5
+ */
6
+ export declare const getSelectedNativeEmbedExtension: (state: EditorState) => import("prosemirror-utils").ContentNodeWithPos | undefined;
@@ -0,0 +1,3 @@
1
+ export { nativeEmbedsPlugin } from './nativeEmbedsPlugin';
2
+ export type { EditorPluginNativeEmbedsPlugin } from './nativeEmbedsPluginType';
3
+ export type { EditorPluginNativeEmbedsToolbarHandlers } from './nativeEmbedsPluginType';
@@ -0,0 +1,2 @@
1
+ import type { EditorPluginNativeEmbedsPlugin } from './nativeEmbedsPluginType';
2
+ export declare const nativeEmbedsPlugin: EditorPluginNativeEmbedsPlugin;
@@ -0,0 +1,26 @@
1
+ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
+ import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
4
+ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
5
+ /**
6
+ * Handlers for native embed floating toolbar actions.
7
+ * Consumers can provide these to hook into toolbar button clicks.
8
+ */
9
+ export interface EditorPluginNativeEmbedsToolbarHandlers {
10
+ onAlignmentClick?: () => void;
11
+ onChangeBorderClick?: () => void;
12
+ onEmbedClick?: () => void;
13
+ onMoreOptionsClick?: () => void;
14
+ onOpenInNewWindowClick?: () => void;
15
+ onRefreshClick?: () => void;
16
+ }
17
+ export type EditorPluginNativeEmbedsPlugin = NextEditorPlugin<'editorPluginNativeEmbeds', {
18
+ dependencies: [
19
+ OptionalPlugin<AnalyticsPlugin>,
20
+ DecorationsPlugin,
21
+ ExtensionPlugin
22
+ ];
23
+ pluginConfiguration: {
24
+ handlers?: EditorPluginNativeEmbedsToolbarHandlers;
25
+ } | undefined;
26
+ }>;
@@ -0,0 +1,8 @@
1
+ import type { ExtractInjectionAPI, FloatingToolbarHandler } from '@atlaskit/editor-common/types';
2
+ import type { EditorPluginNativeEmbedsPlugin, EditorPluginNativeEmbedsToolbarHandlers } from '../../nativeEmbedsPluginType';
3
+ interface GetToolbarConfigProps {
4
+ api?: ExtractInjectionAPI<EditorPluginNativeEmbedsPlugin>;
5
+ handlers?: EditorPluginNativeEmbedsToolbarHandlers;
6
+ }
7
+ export declare const getToolbarConfig: ({ api: _api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
2
+ /**
3
+ * Returns the currently selected native-embed extension node, or undefined
4
+ * if the selection is not inside a native-embed extension.
5
+ */
6
+ export declare const getSelectedNativeEmbedExtension: (state: EditorState) => import("prosemirror-utils").ContentNodeWithPos | undefined;
@@ -0,0 +1,70 @@
1
+ import React from 'react';
2
+
3
+ import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
4
+ // eslint-disable-next-line @atlassian/tangerine/import/entry-points
5
+ import { createEditorUseOnlyNotice } from '@atlaskit/editor-common/doc-utils';
6
+ import { token } from '@atlaskit/tokens';
7
+
8
+ export default md`
9
+
10
+ ${createEditorUseOnlyNotice('Editor Plugin Native Embeds', [
11
+ { name: 'Editor Core', link: '/packages/editor/editor-core' },
12
+ ])}
13
+
14
+
15
+ ${
16
+ (
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
18
+ <div style={{ marginTop: token('space.100', '8px') }}>
19
+ <AtlassianInternalWarning />
20
+ </div>
21
+ )
22
+ }
23
+
24
+ This package includes the editor plugin native embeds plugin used by \`@atlaskit/editor-core\`.
25
+
26
+ ## Usage
27
+ ---
28
+
29
+ The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\` of the plugin are defined
30
+ below:
31
+
32
+ ${code`
33
+ type EditorPluginNativeEmbedsPlugin = NextEditorPlugin<
34
+ 'editorPluginNativeEmbeds',
35
+ {
36
+ dependencies: [OptionalPlugin<AnalyticsPlugin>, DecorationsPlugin, ExtensionPlugin];
37
+ pluginConfiguration: { handlers?: EditorPluginNativeEmbedsToolbarHandlers } | undefined;
38
+ }
39
+ >
40
+ `}
41
+
42
+ To use the plugin with optional toolbar handlers:
43
+
44
+ ${code`
45
+ import {
46
+ nativeEmbedsPlugin,
47
+ type EditorPluginNativeEmbedsToolbarHandlers,
48
+ } from '@atlaskit/editor-plugin-native-embeds';
49
+
50
+ const handlers: EditorPluginNativeEmbedsToolbarHandlers = {
51
+ onRefreshClick: () => { /* handle refresh */ },
52
+ onEmbedClick: () => { /* handle embed */ },
53
+ onChangeBorderClick: () => { /* handle border change */ },
54
+ onAlignmentClick: () => { /* handle alignment */ },
55
+ onOpenInNewWindowClick: () => { /* handle open in new window */ },
56
+ onMoreOptionsClick: () => { /* handle more options */ },
57
+ };
58
+
59
+ new EditorPresetBuilder()
60
+ .add([nativeEmbedsPlugin, { handlers }]);
61
+ `}
62
+
63
+
64
+ ## Support
65
+ ---
66
+ For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
67
+ ## License
68
+ ---
69
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.
70
+ `;
package/package.json ADDED
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "@atlaskit/editor-plugin-native-embeds",
3
+ "version": "0.0.0",
4
+ "description": "EditorPluginNativeEmbeds plugin for @atlaskit/editor-core",
5
+ "author": "Atlassian Pty Ltd",
6
+ "license": "Apache-2.0",
7
+ "publishConfig": {
8
+ "registry": "https://registry.npmjs.org/"
9
+ },
10
+ "atlassian": {
11
+ "team": "Confluence Content Types",
12
+ "releaseModel": "continuous",
13
+ "singleton": true
14
+ },
15
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
16
+ "main": "dist/cjs/index.js",
17
+ "module": "dist/esm/index.js",
18
+ "module:es2019": "dist/es2019/index.js",
19
+ "types": "dist/types/index.d.ts",
20
+ "typesVersions": {
21
+ ">=4.5 <4.9": {
22
+ "*": [
23
+ "dist/types-ts4.5/*",
24
+ "dist/types-ts4.5/index.d.ts"
25
+ ]
26
+ }
27
+ },
28
+ "sideEffects": false,
29
+ "atlaskit:src": "src/index.ts",
30
+ "dependencies": {
31
+ "@atlaskit/editor-plugin-analytics": "^7.0.0",
32
+ "@atlaskit/editor-plugin-decorations": "^7.0.0",
33
+ "@atlaskit/editor-plugin-extension": "^10.1.0",
34
+ "@atlaskit/editor-prosemirror": "^7.3.0",
35
+ "@atlaskit/icon": "^31.0.0",
36
+ "@babel/runtime": "^7.0.0",
37
+ "react-intl-next": "npm:react-intl@^5.18.1"
38
+ },
39
+ "peerDependencies": {
40
+ "@atlaskit/editor-common": "^111.16.0",
41
+ "react": "^18.2.0"
42
+ },
43
+ "devDependencies": {
44
+ "typescript": "5.9.2"
45
+ },
46
+ "techstack": {
47
+ "@atlassian/frontend": {
48
+ "code-structure": [
49
+ "editor-plugin"
50
+ ],
51
+ "import-structure": [
52
+ "atlassian-conventions"
53
+ ],
54
+ "circular-dependencies": [
55
+ "file-and-folder-level"
56
+ ]
57
+ },
58
+ "@repo/internal": {
59
+ "dom-events": "use-bind-event-listener",
60
+ "analytics": [
61
+ "analytics-next"
62
+ ],
63
+ "design-tokens": [
64
+ "color"
65
+ ],
66
+ "theming": [
67
+ "react-context"
68
+ ],
69
+ "ui-components": [
70
+ "lite-mode"
71
+ ],
72
+ "deprecation": "no-deprecated-imports",
73
+ "styling": [
74
+ "emotion",
75
+ "emotion"
76
+ ],
77
+ "imports": [
78
+ "import-no-extraneous-disable-for-examples-and-docs"
79
+ ]
80
+ }
81
+ }
82
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "extends": "../../../tsconfig.json",
3
+ "include": [
4
+ "src/**/*.ts",
5
+ "src/**/*.tsx"
6
+ ]
7
+ }