@atlaskit/editor-plugin-native-embeds 0.0.0 → 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @atlaskit/editor-plugin-native-embeds
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies

package/dist/cjs/pm-plugins/ui/floating-toolbar.js

@@ -5,28 +5,88 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarConfig = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
+var _alignTextLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-text-left"));
+var _alignTextRight = _interopRequireDefault(require("@atlaskit/icon/core/align-text-right"));
 var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
+var _contentWrapLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-left"));
+var _contentWrapRight = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-right"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _page = _interopRequireDefault(require("@atlaskit/icon/core/page"));
 var _refresh = _interopRequireDefault(require("@atlaskit/icon/core/refresh"));
-var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _alignment = require("../../types/alignment");
 var _getSelectedNativeEmbedExtension = require("../utils/getSelectedNativeEmbedExtension");
+var _moreOptionsDropdown = require("./more-options-dropdown");
+// TODO: CNS-23819 - Add i18n and finalise whether these should show as just icons with tooltips or text labels.
+var ALIGNMENT_LABELS = {
+  left: 'Align left',
+  center: 'Align center',
+  right: 'Align right',
+  'wrap-left': 'Wrap left',
+  'wrap-right': 'Wrap right'
+};
+var ALIGNMENT_ICONS = {
+  left: _alignTextLeft.default,
+  center: _alignTextCenter.default,
+  right: _alignTextRight.default,
+  'wrap-left': _contentWrapLeft.default,
+  'wrap-right': _contentWrapRight.default
+};
+var getAlignmentIcon = function getAlignmentIcon(alignment) {
+  var IconComponent = ALIGNMENT_ICONS[alignment];
+  return /*#__PURE__*/_react.default.createElement(IconComponent, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: ALIGNMENT_LABELS[alignment]
+  });
+};
 var createHandlerCommand = function createHandlerCommand(handler) {
   return function () {
     handler === null || handler === void 0 || handler();
     return true;
   };
 };
+var createUpdateAlignmentCommand = function createUpdateAlignmentCommand(api, alignment) {
+  return function (state, _dispatch, _view) {
+    var _api$extension, _extensionApi$doc;
+    var selectedNativeEmbed = (0, _getSelectedNativeEmbedExtension.getSelectedNativeEmbedExtension)(state);
+    var localId = selectedNativeEmbed === null || selectedNativeEmbed === void 0 ? void 0 : selectedNativeEmbed.node.attrs.localId;
+    if (!localId) {
+      return false;
+    }
+    var extensionApi = api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 || (_api$extension = _api$extension.actions) === null || _api$extension === void 0 ? void 0 : _api$extension.api();
+    if (!(extensionApi !== null && extensionApi !== void 0 && (_extensionApi$doc = extensionApi.doc) !== null && _extensionApi$doc !== void 0 && _extensionApi$doc.update)) {
+      return false;
+    }
+    extensionApi.doc.update(localId, function (current) {
+      return (0, _alignment.createAlignmentUpdate)(current, alignment);
+    });
+    return true;
+  };
+};
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref) {
-  var _api = _ref.api,
+  var api = _ref.api,
     handlers = _ref.handlers;
   return function (state, _intl, _providerFactory, _activeConfigs) {
+    var _ref2, _selectedNativeEmbed$;
     var selectedNativeEmbed = (0, _getSelectedNativeEmbedExtension.getSelectedNativeEmbedExtension)(state);
     if (!selectedNativeEmbed) {
       return undefined;
     }
+    var currentAlignment = (_ref2 = (_selectedNativeEmbed$ = selectedNativeEmbed.node.attrs.parameters) === null || _selectedNativeEmbed$ === void 0 ? void 0 : _selectedNativeEmbed$.alignment) !== null && _ref2 !== void 0 ? _ref2 : _alignment.DEFAULT_ALIGNMENT;
+    var alignmentOptions = _alignment.ALIGNMENT_VALUES.map(function (alignment) {
+      return {
+        id: "native-embed-alignment-".concat(alignment),
+        title: ALIGNMENT_LABELS[alignment],
+        onClick: createUpdateAlignmentCommand(api, alignment),
+        selected: currentAlignment === alignment,
+        icon: getAlignmentIcon(alignment)
+      };
+    });
+    var alignmentDropdownTitle = ALIGNMENT_LABELS[currentAlignment];
+    var AlignmentIconComponent = ALIGNMENT_ICONS[currentAlignment];
     var getDomRef = function getDomRef(view) {
       try {
         var node = (0, _utils.findDomRefAtPos)(selectedNativeEmbed.pos, view.domAtPos.bind(view));
@@ -49,7 +109,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
         focusEditoronEnter: true,
         tabIndex: null
       }, {
-        type: 'separator'
+        type: 'separator',
+        fullHeight: true
       }, {
         id: 'native-embed-embed-dropdown',
         type: 'dropdown',
@@ -68,11 +129,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
         id: 'native-embed-alignment-dropdown',
         type: 'dropdown',
         title: '',
-        iconBefore: _alignTextCenter.default,
-        options: [],
-        onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
+        iconBefore: function iconBefore() {
+          return /*#__PURE__*/_react.default.createElement(AlignmentIconComponent, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: alignmentDropdownTitle
+          });
+        },
+        options: alignmentOptions,
+        showSelected: true
       }, {
-        type: 'separator'
+        type: 'separator',
+        fullHeight: true
       }, {
         id: 'native-embed-open-new-window-button',
         type: 'button',
@@ -83,16 +151,9 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
         focusEditoronEnter: true,
         tabIndex: null
       }, {
-        type: 'separator'
-      }, {
-        id: 'native-embed-more-options-button',
-        type: 'dropdown',
-        title: 'More options',
-        icon: _showMoreHorizontal.default,
-        hideExpandIcon: true,
-        options: [],
-        onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
-      }]
+        type: 'separator',
+        fullHeight: true
+      }, (0, _moreOptionsDropdown.getMoreOptionsDropdown)()]
     };
   };
 };

package/dist/cjs/pm-plugins/ui/more-options-dropdown.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMoreOptionsDropdown = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _database = _interopRequireDefault(require("@atlaskit/icon/core/database"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _eyeOpen = _interopRequireDefault(require("@atlaskit/icon/core/eye-open"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+/**
+ * No-op command that returns true without dispatching any action.
+ * Used as a placeholder for menu items that don't have functionality yet.
+ */
+var noopCommand = function noopCommand() {
+  return true;
+};
+
+/**
+ * Returns the "More options" overflow dropdown configuration for the native embed floating toolbar.
+ */
+var getMoreOptionsDropdown = exports.getMoreOptionsDropdown = function getMoreOptionsDropdown() {
+  return {
+    id: 'native-embed-more-options-button',
+    type: 'overflow-dropdown',
+    dropdownWidth: 250,
+    options: [{
+      id: 'native-embed-always-show-title',
+      title: 'Always show title',
+      icon: /*#__PURE__*/_react.default.createElement(_eyeOpen.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      elemAfter: /*#__PURE__*/_react.default.createElement(_toggle.default, {
+        isChecked: true,
+        label: "Always show title"
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-set-embed-type',
+      title: 'Set embed type',
+      icon: /*#__PURE__*/_react.default.createElement(_database.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      type: 'separator'
+    }, {
+      id: 'native-embed-copy-link',
+      title: 'Copy link',
+      icon: /*#__PURE__*/_react.default.createElement(_link.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-delete',
+      title: 'Delete',
+      icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }]
+  };
+};

package/dist/cjs/types/alignment.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_ALIGNMENT = exports.ALIGNMENT_VALUES = void 0;
+exports.createAlignmentUpdate = createAlignmentUpdate;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * All alignment values (for dropdowns / iteration). Single source of truth for alignment options.
+ */
+var ALIGNMENT_VALUES = exports.ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
+
+/**
+ * Alignment value for native embed extension parameters.
+ * Used by the editor floating toolbar when the user changes alignment;
+ * the editor calls extensionApi.doc.update(localId, (current) => createAlignmentUpdate(current, alignment)).
+ */
+
+/** Default alignment when not set in parameters. */
+var DEFAULT_ALIGNMENT = exports.DEFAULT_ALIGNMENT = 'center';
+
+/**
+ * Builds the attrs update for setting alignment on a native embed extension node.
+ */
+function createAlignmentUpdate(current, alignment) {
+  var _current$attrs;
+  var existingParams = current.attrs && 'parameters' in current.attrs && (0, _typeof2.default)(current.attrs.parameters) === 'object' ? current.attrs.parameters : {};
+  return {
+    attrs: _objectSpread(_objectSpread({}, (_current$attrs = current.attrs) !== null && _current$attrs !== void 0 ? _current$attrs : {}), {}, {
+      parameters: _objectSpread(_objectSpread({}, existingParams), {}, {
+        alignment: alignment
+      })
+    })
+  };
+}

package/dist/es2019/pm-plugins/ui/floating-toolbar.js

@@ -1,23 +1,78 @@
+import React from 'react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
+import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
+import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
 import BorderIcon from '@atlaskit/icon/core/border';
+import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
+import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import PageIcon from '@atlaskit/icon/core/page';
 import RefreshIcon from '@atlaskit/icon/core/refresh';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { ALIGNMENT_VALUES, createAlignmentUpdate, DEFAULT_ALIGNMENT } from '../../types/alignment';
 import { getSelectedNativeEmbedExtension } from '../utils/getSelectedNativeEmbedExtension';
+import { getMoreOptionsDropdown } from './more-options-dropdown';
+
+// TODO: CNS-23819 - Add i18n and finalise whether these should show as just icons with tooltips or text labels.
+const ALIGNMENT_LABELS = {
+  left: 'Align left',
+  center: 'Align center',
+  right: 'Align right',
+  'wrap-left': 'Wrap left',
+  'wrap-right': 'Wrap right'
+};
+const ALIGNMENT_ICONS = {
+  left: AlignTextLeftIcon,
+  center: AlignTextCenterIcon,
+  right: AlignTextRightIcon,
+  'wrap-left': ContentWrapLeftIcon,
+  'wrap-right': ContentWrapRightIcon
+};
+const getAlignmentIcon = alignment => {
+  const IconComponent = ALIGNMENT_ICONS[alignment];
+  return /*#__PURE__*/React.createElement(IconComponent, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: ALIGNMENT_LABELS[alignment]
+  });
+};
 const createHandlerCommand = handler => () => {
   handler === null || handler === void 0 ? void 0 : handler();
   return true;
 };
+const createUpdateAlignmentCommand = (api, alignment) => (state, _dispatch, _view) => {
+  var _api$extension, _api$extension$action, _extensionApi$doc;
+  const selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
+  const localId = selectedNativeEmbed === null || selectedNativeEmbed === void 0 ? void 0 : selectedNativeEmbed.node.attrs.localId;
+  if (!localId) {
+    return false;
+  }
+  const extensionApi = api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : (_api$extension$action = _api$extension.actions) === null || _api$extension$action === void 0 ? void 0 : _api$extension$action.api();
+  if (!(extensionApi !== null && extensionApi !== void 0 && (_extensionApi$doc = extensionApi.doc) !== null && _extensionApi$doc !== void 0 && _extensionApi$doc.update)) {
+    return false;
+  }
+  extensionApi.doc.update(localId, current => createAlignmentUpdate(current, alignment));
+  return true;
+};
 export const getToolbarConfig = ({
-  api: _api,
+  api,
   handlers
 }) => (state, _intl, _providerFactory, _activeConfigs) => {
+  var _ref, _selectedNativeEmbed$;
   const selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
   if (!selectedNativeEmbed) {
     return undefined;
   }
+  const currentAlignment = (_ref = (_selectedNativeEmbed$ = selectedNativeEmbed.node.attrs.parameters) === null || _selectedNativeEmbed$ === void 0 ? void 0 : _selectedNativeEmbed$.alignment) !== null && _ref !== void 0 ? _ref : DEFAULT_ALIGNMENT;
+  const alignmentOptions = ALIGNMENT_VALUES.map(alignment => ({
+    id: `native-embed-alignment-${alignment}`,
+    title: ALIGNMENT_LABELS[alignment],
+    onClick: createUpdateAlignmentCommand(api, alignment),
+    selected: currentAlignment === alignment,
+    icon: getAlignmentIcon(alignment)
+  }));
+  const alignmentDropdownTitle = ALIGNMENT_LABELS[currentAlignment];
+  const AlignmentIconComponent = ALIGNMENT_ICONS[currentAlignment];
   const getDomRef = view => {
     try {
       const node = findDomRefAtPos(selectedNativeEmbed.pos, view.domAtPos.bind(view));
@@ -40,7 +95,8 @@ export const getToolbarConfig = ({
       focusEditoronEnter: true,
       tabIndex: null
     }, {
-      type: 'separator'
+      type: 'separator',
+      fullHeight: true
     }, {
       id: 'native-embed-embed-dropdown',
       type: 'dropdown',
@@ -59,11 +115,16 @@ export const getToolbarConfig = ({
       id: 'native-embed-alignment-dropdown',
       type: 'dropdown',
       title: '',
-      iconBefore: AlignTextCenterIcon,
-      options: [],
-      onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
+      iconBefore: () => /*#__PURE__*/React.createElement(AlignmentIconComponent, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: alignmentDropdownTitle
+      }),
+      options: alignmentOptions,
+      showSelected: true
     }, {
-      type: 'separator'
+      type: 'separator',
+      fullHeight: true
     }, {
       id: 'native-embed-open-new-window-button',
       type: 'button',
@@ -74,15 +135,8 @@ export const getToolbarConfig = ({
       focusEditoronEnter: true,
       tabIndex: null
     }, {
-      type: 'separator'
-    }, {
-      id: 'native-embed-more-options-button',
-      type: 'dropdown',
-      title: 'More options',
-      icon: ShowMoreHorizontalIcon,
-      hideExpandIcon: true,
-      options: [],
-      onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
-    }]
+      type: 'separator',
+      fullHeight: true
+    }, getMoreOptionsDropdown()]
   };
 };

package/dist/es2019/pm-plugins/ui/more-options-dropdown.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import DatabaseIcon from '@atlaskit/icon/core/database';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import EyeOpenIcon from '@atlaskit/icon/core/eye-open';
+import LinkIcon from '@atlaskit/icon/core/link';
+import Toggle from '@atlaskit/toggle';
+
+/**
+ * No-op command that returns true without dispatching any action.
+ * Used as a placeholder for menu items that don't have functionality yet.
+ */
+const noopCommand = () => {
+  return true;
+};
+
+/**
+ * Returns the "More options" overflow dropdown configuration for the native embed floating toolbar.
+ */
+export const getMoreOptionsDropdown = () => {
+  return {
+    id: 'native-embed-more-options-button',
+    type: 'overflow-dropdown',
+    dropdownWidth: 250,
+    options: [{
+      id: 'native-embed-always-show-title',
+      title: 'Always show title',
+      icon: /*#__PURE__*/React.createElement(EyeOpenIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+        isChecked: true,
+        label: "Always show title"
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-set-embed-type',
+      title: 'Set embed type',
+      icon: /*#__PURE__*/React.createElement(DatabaseIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      type: 'separator'
+    }, {
+      id: 'native-embed-copy-link',
+      title: 'Copy link',
+      icon: /*#__PURE__*/React.createElement(LinkIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-delete',
+      title: 'Delete',
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }]
+  };
+};

package/dist/es2019/types/alignment.js

@@ -0,0 +1,30 @@
+/**
+ * All alignment values (for dropdowns / iteration). Single source of truth for alignment options.
+ */
+export const ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
+
+/**
+ * Alignment value for native embed extension parameters.
+ * Used by the editor floating toolbar when the user changes alignment;
+ * the editor calls extensionApi.doc.update(localId, (current) => createAlignmentUpdate(current, alignment)).
+ */
+
+/** Default alignment when not set in parameters. */
+export const DEFAULT_ALIGNMENT = 'center';
+
+/**
+ * Builds the attrs update for setting alignment on a native embed extension node.
+ */
+export function createAlignmentUpdate(current, alignment) {
+  var _current$attrs;
+  const existingParams = current.attrs && 'parameters' in current.attrs && typeof current.attrs.parameters === 'object' ? current.attrs.parameters : {};
+  return {
+    attrs: {
+      ...((_current$attrs = current.attrs) !== null && _current$attrs !== void 0 ? _current$attrs : {}),
+      parameters: {
+        ...existingParams,
+        alignment
+      }
+    }
+  };
+}

package/dist/esm/pm-plugins/ui/floating-toolbar.js

@@ -1,25 +1,86 @@
+import React from 'react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
+import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
+import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
 import BorderIcon from '@atlaskit/icon/core/border';
+import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
+import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import PageIcon from '@atlaskit/icon/core/page';
 import RefreshIcon from '@atlaskit/icon/core/refresh';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { ALIGNMENT_VALUES, createAlignmentUpdate, DEFAULT_ALIGNMENT } from '../../types/alignment';
 import { getSelectedNativeEmbedExtension } from '../utils/getSelectedNativeEmbedExtension';
+import { getMoreOptionsDropdown } from './more-options-dropdown';
+
+// TODO: CNS-23819 - Add i18n and finalise whether these should show as just icons with tooltips or text labels.
+var ALIGNMENT_LABELS = {
+  left: 'Align left',
+  center: 'Align center',
+  right: 'Align right',
+  'wrap-left': 'Wrap left',
+  'wrap-right': 'Wrap right'
+};
+var ALIGNMENT_ICONS = {
+  left: AlignTextLeftIcon,
+  center: AlignTextCenterIcon,
+  right: AlignTextRightIcon,
+  'wrap-left': ContentWrapLeftIcon,
+  'wrap-right': ContentWrapRightIcon
+};
+var getAlignmentIcon = function getAlignmentIcon(alignment) {
+  var IconComponent = ALIGNMENT_ICONS[alignment];
+  return /*#__PURE__*/React.createElement(IconComponent, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: ALIGNMENT_LABELS[alignment]
+  });
+};
 var createHandlerCommand = function createHandlerCommand(handler) {
   return function () {
     handler === null || handler === void 0 || handler();
     return true;
   };
 };
+var createUpdateAlignmentCommand = function createUpdateAlignmentCommand(api, alignment) {
+  return function (state, _dispatch, _view) {
+    var _api$extension, _extensionApi$doc;
+    var selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
+    var localId = selectedNativeEmbed === null || selectedNativeEmbed === void 0 ? void 0 : selectedNativeEmbed.node.attrs.localId;
+    if (!localId) {
+      return false;
+    }
+    var extensionApi = api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 || (_api$extension = _api$extension.actions) === null || _api$extension === void 0 ? void 0 : _api$extension.api();
+    if (!(extensionApi !== null && extensionApi !== void 0 && (_extensionApi$doc = extensionApi.doc) !== null && _extensionApi$doc !== void 0 && _extensionApi$doc.update)) {
+      return false;
+    }
+    extensionApi.doc.update(localId, function (current) {
+      return createAlignmentUpdate(current, alignment);
+    });
+    return true;
+  };
+};
 export var getToolbarConfig = function getToolbarConfig(_ref) {
-  var _api = _ref.api,
+  var api = _ref.api,
     handlers = _ref.handlers;
   return function (state, _intl, _providerFactory, _activeConfigs) {
+    var _ref2, _selectedNativeEmbed$;
     var selectedNativeEmbed = getSelectedNativeEmbedExtension(state);
     if (!selectedNativeEmbed) {
       return undefined;
     }
+    var currentAlignment = (_ref2 = (_selectedNativeEmbed$ = selectedNativeEmbed.node.attrs.parameters) === null || _selectedNativeEmbed$ === void 0 ? void 0 : _selectedNativeEmbed$.alignment) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_ALIGNMENT;
+    var alignmentOptions = ALIGNMENT_VALUES.map(function (alignment) {
+      return {
+        id: "native-embed-alignment-".concat(alignment),
+        title: ALIGNMENT_LABELS[alignment],
+        onClick: createUpdateAlignmentCommand(api, alignment),
+        selected: currentAlignment === alignment,
+        icon: getAlignmentIcon(alignment)
+      };
+    });
+    var alignmentDropdownTitle = ALIGNMENT_LABELS[currentAlignment];
+    var AlignmentIconComponent = ALIGNMENT_ICONS[currentAlignment];
     var getDomRef = function getDomRef(view) {
       try {
         var node = findDomRefAtPos(selectedNativeEmbed.pos, view.domAtPos.bind(view));
@@ -42,7 +103,8 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
         focusEditoronEnter: true,
         tabIndex: null
       }, {
-        type: 'separator'
+        type: 'separator',
+        fullHeight: true
       }, {
         id: 'native-embed-embed-dropdown',
         type: 'dropdown',
@@ -61,11 +123,18 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
         id: 'native-embed-alignment-dropdown',
         type: 'dropdown',
         title: '',
-        iconBefore: AlignTextCenterIcon,
-        options: [],
-        onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onAlignmentClick
+        iconBefore: function iconBefore() {
+          return /*#__PURE__*/React.createElement(AlignmentIconComponent, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: alignmentDropdownTitle
+          });
+        },
+        options: alignmentOptions,
+        showSelected: true
       }, {
-        type: 'separator'
+        type: 'separator',
+        fullHeight: true
       }, {
         id: 'native-embed-open-new-window-button',
         type: 'button',
@@ -76,16 +145,9 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
         focusEditoronEnter: true,
         tabIndex: null
       }, {
-        type: 'separator'
-      }, {
-        id: 'native-embed-more-options-button',
-        type: 'dropdown',
-        title: 'More options',
-        icon: ShowMoreHorizontalIcon,
-        hideExpandIcon: true,
-        options: [],
-        onClick: handlers === null || handlers === void 0 ? void 0 : handlers.onMoreOptionsClick
-      }]
+        type: 'separator',
+        fullHeight: true
+      }, getMoreOptionsDropdown()]
     };
   };
 };

package/dist/esm/pm-plugins/ui/more-options-dropdown.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import DatabaseIcon from '@atlaskit/icon/core/database';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import EyeOpenIcon from '@atlaskit/icon/core/eye-open';
+import LinkIcon from '@atlaskit/icon/core/link';
+import Toggle from '@atlaskit/toggle';
+
+/**
+ * No-op command that returns true without dispatching any action.
+ * Used as a placeholder for menu items that don't have functionality yet.
+ */
+var noopCommand = function noopCommand() {
+  return true;
+};
+
+/**
+ * Returns the "More options" overflow dropdown configuration for the native embed floating toolbar.
+ */
+export var getMoreOptionsDropdown = function getMoreOptionsDropdown() {
+  return {
+    id: 'native-embed-more-options-button',
+    type: 'overflow-dropdown',
+    dropdownWidth: 250,
+    options: [{
+      id: 'native-embed-always-show-title',
+      title: 'Always show title',
+      icon: /*#__PURE__*/React.createElement(EyeOpenIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      elemAfter: /*#__PURE__*/React.createElement(Toggle, {
+        isChecked: true,
+        label: "Always show title"
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-set-embed-type',
+      title: 'Set embed type',
+      icon: /*#__PURE__*/React.createElement(DatabaseIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      type: 'separator'
+    }, {
+      id: 'native-embed-copy-link',
+      title: 'Copy link',
+      icon: /*#__PURE__*/React.createElement(LinkIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }, {
+      id: 'native-embed-delete',
+      title: 'Delete',
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: ""
+      }),
+      onClick: noopCommand
+    }]
+  };
+};

package/dist/esm/types/alignment.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * All alignment values (for dropdowns / iteration). Single source of truth for alignment options.
+ */
+export var ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
+
+/**
+ * Alignment value for native embed extension parameters.
+ * Used by the editor floating toolbar when the user changes alignment;
+ * the editor calls extensionApi.doc.update(localId, (current) => createAlignmentUpdate(current, alignment)).
+ */
+
+/** Default alignment when not set in parameters. */
+export var DEFAULT_ALIGNMENT = 'center';
+
+/**
+ * Builds the attrs update for setting alignment on a native embed extension node.
+ */
+export function createAlignmentUpdate(current, alignment) {
+  var _current$attrs;
+  var existingParams = current.attrs && 'parameters' in current.attrs && _typeof(current.attrs.parameters) === 'object' ? current.attrs.parameters : {};
+  return {
+    attrs: _objectSpread(_objectSpread({}, (_current$attrs = current.attrs) !== null && _current$attrs !== void 0 ? _current$attrs : {}), {}, {
+      parameters: _objectSpread(_objectSpread({}, existingParams), {}, {
+        alignment: alignment
+      })
+    })
+  };
+}

package/dist/types/pm-plugins/ui/floating-toolbar.d.ts

@@ -4,5 +4,5 @@ interface GetToolbarConfigProps {
     api?: ExtractInjectionAPI<EditorPluginNativeEmbedsPlugin>;
     handlers?: EditorPluginNativeEmbedsToolbarHandlers;
 }
-export declare const getToolbarConfig: ({ api: _api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
+export declare const getToolbarConfig: ({ api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
 export {};

package/dist/types/pm-plugins/ui/more-options-dropdown.d.ts

@@ -0,0 +1,5 @@
+import type { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+/**
+ * Returns the "More options" overflow dropdown configuration for the native embed floating toolbar.
+ */
+export declare const getMoreOptionsDropdown: () => FloatingToolbarOverflowDropdown<Command>;

package/dist/types/types/alignment.d.ts

@@ -0,0 +1,20 @@
+/**
+ * All alignment values (for dropdowns / iteration). Single source of truth for alignment options.
+ */
+export declare const ALIGNMENT_VALUES: readonly ["left", "center", "right", "wrap-left", "wrap-right"];
+/**
+ * Alignment value for native embed extension parameters.
+ * Used by the editor floating toolbar when the user changes alignment;
+ * the editor calls extensionApi.doc.update(localId, (current) => createAlignmentUpdate(current, alignment)).
+ */
+export type AlignmentValue = (typeof ALIGNMENT_VALUES)[number];
+/** Default alignment when not set in parameters. */
+export declare const DEFAULT_ALIGNMENT: AlignmentValue;
+/**
+ * Builds the attrs update for setting alignment on a native embed extension node.
+ */
+export declare function createAlignmentUpdate(current: {
+    attrs?: Record<string, unknown>;
+}, alignment: AlignmentValue): {
+    attrs: Record<string, unknown>;
+};

package/dist/types-ts4.5/pm-plugins/ui/floating-toolbar.d.ts

@@ -4,5 +4,5 @@ interface GetToolbarConfigProps {
     api?: ExtractInjectionAPI<EditorPluginNativeEmbedsPlugin>;
     handlers?: EditorPluginNativeEmbedsToolbarHandlers;
 }
-export declare const getToolbarConfig: ({ api: _api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
+export declare const getToolbarConfig: ({ api, handlers }: GetToolbarConfigProps) => FloatingToolbarHandler;
 export {};

package/dist/types-ts4.5/pm-plugins/ui/more-options-dropdown.d.ts

@@ -0,0 +1,5 @@
+import type { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+/**
+ * Returns the "More options" overflow dropdown configuration for the native embed floating toolbar.
+ */
+export declare const getMoreOptionsDropdown: () => FloatingToolbarOverflowDropdown<Command>;

package/dist/types-ts4.5/types/alignment.d.ts

@@ -0,0 +1,26 @@
+/**
+ * All alignment values (for dropdowns / iteration). Single source of truth for alignment options.
+ */
+export declare const ALIGNMENT_VALUES: readonly [
+    "left",
+    "center",
+    "right",
+    "wrap-left",
+    "wrap-right"
+];
+/**
+ * Alignment value for native embed extension parameters.
+ * Used by the editor floating toolbar when the user changes alignment;
+ * the editor calls extensionApi.doc.update(localId, (current) => createAlignmentUpdate(current, alignment)).
+ */
+export type AlignmentValue = (typeof ALIGNMENT_VALUES)[number];
+/** Default alignment when not set in parameters. */
+export declare const DEFAULT_ALIGNMENT: AlignmentValue;
+/**
+ * Builds the attrs update for setting alignment on a native embed extension node.
+ */
+export declare function createAlignmentUpdate(current: {
+    attrs?: Record<string, unknown>;
+}, alignment: AlignmentValue): {
+    attrs: Record<string, unknown>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-native-embeds",
-	"version": "0.0.0",
+	"version": "0.0.1",
 	"description": "EditorPluginNativeEmbeds plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,15 +32,25 @@
 		"@atlaskit/editor-plugin-decorations": "^7.0.0",
 		"@atlaskit/editor-plugin-extension": "^10.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/icon": "^31.0.0",
+		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/toggle": "^15.2.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.16.0",
+		"@atlaskit/editor-common": "^111.20.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
+		"@af/editor-examples-helpers": "workspace:*",
+		"@atlaskit/adf-schema": "^51.5.0",
+		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/editor-core": "^216.12.0",
+		"@atlaskit/editor-test-helpers": "workspace:^",
+		"@atlaskit/link-provider": "^4.2.0",
+		"@atlaskit/logo": "^19.10.0",
+		"@atlaskit/synchrony-test-helpers": "workspace:^",
+		"@atlaskit/tmp-editor-statsig": "^29.6.0",
 		"typescript": "5.9.2"
 	},
 	"techstack": {