@atlaskit/editor-plugin-insert-block 1.9.2 → 1.10.1

package/dist/esm/assets/decision-matrix.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useIconThemed } from './use-icon-themed';
+export default function DecisionMatrixIcon() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "41",
+    viewBox: "0 0 40 41",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_138_1296)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0.5",
+    y: "0.759766",
+    width: "39",
+    height: "39",
+    rx: "2.5",
+    stroke: "var(--ds-border, #091E42)",
+    strokeOpacity: "0.14"
+  }), /*#__PURE__*/React.createElement("rect", {
+    width: "40",
+    height: "40",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    })
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 22.2598C10.4087 22.2598 8.88258 21.6276 7.75736 20.5024C6.63214 19.3772 6 17.8511 6 16.2598C6 14.6685 6.63214 13.1423 7.75736 12.0171C8.88258 10.8919 10.4087 10.2598 12 10.2598C13.5913 10.2598 15.1174 10.8919 16.2426 12.0171C17.3679 13.1423 18 14.6685 18 16.2598C18 17.8511 17.3679 19.3772 16.2426 20.5024C15.1174 21.6276 13.5913 22.2598 12 22.2598ZM13.023 14.0368L11.409 17.1193L10.2517 16.0768C10.1785 16.0109 10.093 15.9601 10.0002 15.9272C9.90729 15.8943 9.80886 15.8801 9.71049 15.8853C9.61212 15.8905 9.51573 15.915 9.42683 15.9574C9.33793 15.9999 9.25827 16.0594 9.19238 16.1326C9.12648 16.2059 9.07566 16.2914 9.04281 16.3842C9.00996 16.4771 8.99572 16.5755 9.00091 16.6739C9.0061 16.7723 9.03061 16.8687 9.07305 16.9576C9.11549 17.0465 9.17502 17.1261 9.24825 17.192L11.1233 18.8795C11.2082 18.956 11.3095 19.0121 11.4195 19.0435C11.5294 19.0748 11.6451 19.0806 11.7576 19.0604C11.8701 19.0402 11.9766 18.9946 12.0687 18.927C12.1609 18.8593 12.2364 18.7715 12.2895 18.6703L14.352 14.7328C14.4443 14.5565 14.4628 14.3508 14.4034 14.161C14.3441 13.9711 14.2117 13.8126 14.0355 13.7203C13.8593 13.628 13.6536 13.6095 13.4637 13.6688C13.2738 13.7282 13.1153 13.8605 13.023 14.0368Z",
+    fill: "var(--ds-background-accent-green-subtle, #4BCE97)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "26.2598",
+    width: "12",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "29.2598",
+    width: "12",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.1137 16.2065L30.7052 14.6158C30.846 14.475 30.925 14.2842 30.925 14.0851C30.925 13.8861 30.846 13.6952 30.7052 13.5545C30.5645 13.4138 30.3736 13.3347 30.1746 13.3347C29.9756 13.3347 29.7847 13.4138 29.644 13.5545L28.054 15.146L26.4625 13.5545C26.3218 13.4139 26.1309 13.3349 25.932 13.335C25.733 13.3351 25.5423 13.4142 25.4016 13.5549C25.261 13.6956 25.182 13.8865 25.1821 14.0854C25.1822 14.2844 25.2613 14.4751 25.402 14.6158L26.992 16.2058L25.402 17.7973C25.2654 17.9387 25.1898 18.1282 25.1915 18.3248C25.1932 18.5215 25.2721 18.7096 25.4111 18.8486C25.5502 18.9877 25.7383 19.0666 25.9349 19.0683C26.1316 19.07 26.321 18.9944 26.4625 18.8578L28.0533 17.2678L29.644 18.8578C29.7136 18.9274 29.7963 18.9827 29.8873 19.0205C29.9783 19.0582 30.0758 19.0776 30.1744 19.0777C30.2729 19.0777 30.3704 19.0583 30.4615 19.0207C30.5525 18.983 30.6352 18.9278 30.7049 18.8581C30.7746 18.7885 30.8298 18.7058 30.8676 18.6148C30.9053 18.5238 30.9247 18.4263 30.9248 18.3278C30.9248 18.2293 30.9054 18.1317 30.8678 18.0407C30.8301 17.9497 30.7749 17.8669 30.7052 17.7973L29.1137 16.2065ZM28 22.2598C26.4087 22.2598 24.8826 21.6276 23.7574 20.5024C22.6321 19.3772 22 17.8511 22 16.2598C22 14.6685 22.6321 13.1423 23.7574 12.0171C24.8826 10.8919 26.4087 10.2598 28 10.2598C29.5913 10.2598 31.1174 10.8919 32.2426 12.0171C33.3679 13.1423 34 14.6685 34 16.2598C34 17.8511 33.3679 19.3772 32.2426 20.5024C31.1174 21.6276 29.5913 22.2598 28 22.2598Z",
+    fill: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "22",
+    y: "26.2598",
+    width: "12",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "22",
+    y: "29.2598",
+    width: "12",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_138_1296"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "40",
+    height: "40",
+    fill: "var(--ds-icon-inverse, #FFFFFF)",
+    transform: "translate(0 0.259766)"
+  }))));
+}

package/dist/esm/assets/discussion-notes.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useIconThemed } from './use-icon-themed';
+export default function DiscussionNotesIcon() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "41",
+    viewBox: "0 0 40 41",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_138_1334)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    y: "0.259766",
+    width: "40",
+    height: "40",
+    rx: "3",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    })
+  }), /*#__PURE__*/React.createElement("rect", {
+    y: "0.259766",
+    width: "40",
+    height: "40",
+    rx: "3",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    })
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "0.5",
+    y: "0.759766",
+    width: "39",
+    height: "39",
+    rx: "2.5",
+    stroke: "var(--ds-border, #091E4224)",
+    strokeOpacity: "0.14"
+  })), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.5 6.25977H13.5C13.8978 6.25977 14.2794 6.4178 14.5607 6.69911C14.842 6.98041 15 7.36194 15 7.75977V16.7598C15 17.1576 14.842 17.5391 14.5607 17.8204C14.2794 18.1017 13.8978 18.2598 13.5 18.2598H7.5C7.10218 18.2598 6.72064 18.1017 6.43934 17.8204C6.15804 17.5391 6 17.1576 6 16.7598V7.75977C6 7.36194 6.15804 6.98041 6.43934 6.69911C6.72064 6.4178 7.10218 6.25977 7.5 6.25977ZM8.625 9.25977C8.52554 9.25977 8.43016 9.29927 8.35983 9.3696C8.28951 9.43993 8.25 9.53531 8.25 9.63477V10.3848C8.25 10.4842 8.28951 10.5796 8.35983 10.6499C8.43016 10.7203 8.52554 10.7598 8.625 10.7598H12.375C12.4745 10.7598 12.5698 10.7203 12.6402 10.6499C12.7105 10.5796 12.75 10.4842 12.75 10.3848V9.63477C12.75 9.53531 12.7105 9.43993 12.6402 9.3696C12.5698 9.29927 12.4745 9.25977 12.375 9.25977H8.625ZM8.625 12.2598C8.52554 12.2598 8.43016 12.2993 8.35983 12.3696C8.28951 12.4399 8.25 12.5353 8.25 12.6348V13.3848C8.25 13.4842 8.28951 13.5796 8.35983 13.6499C8.43016 13.7203 8.52554 13.7598 8.625 13.7598H10.875C10.9745 13.7598 11.0698 13.7203 11.1402 13.6499C11.2105 13.5796 11.25 13.4842 11.25 13.3848V12.6348C11.25 12.5353 11.2105 12.4399 11.1402 12.3696C11.0698 12.2993 10.9745 12.2598 10.875 12.2598H8.625Z",
+    fill: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "22.2598",
+    width: "28",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "25.2598",
+    width: "28",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "28.2598",
+    width: "14",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_138_1334"
+  }, /*#__PURE__*/React.createElement("rect", {
+    y: "0.259766",
+    width: "40",
+    height: "40",
+    rx: "3",
+    fill: "var(--ds-surface, #FFFFFF)"
+  }))));
+}

package/dist/esm/assets/expand.js

@@ -11,7 +11,8 @@ var iconContainer = css({
   width: '24px',
   height: '24px'
 });
-export default function ExpandIcon() {
+export default function ExpandIcon(_ref) {
+  var disabled = _ref.disabled;
   return jsx("span", {
     css: iconContainer
   }, jsx("svg", {
@@ -22,11 +23,11 @@ export default function ExpandIcon() {
     fill: "none"
   }, jsx("path", {
     d: "M2 2V14H16V2H2ZM2 0H16C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V14C18 14.5304 17.7893 15.0391 17.4142 15.4142C17.0391 15.7893 16.5304 16 16 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0Z",
-    fill: "var(--ds-icon, #44546F)"
+    fill: disabled ? "var(--ds-icon-disabled, #B3B9C4)" : "var(--ds-icon, #44546F)"
   }), jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M5.29158 6.29294C5.10477 6.48183 5 6.73678 5 7.00244C5 7.2681 5.10477 7.52305 5.29158 7.71194L8.23058 10.6769C8.44858 10.8919 8.73058 10.9989 9.00958 10.9989C9.28858 10.9989 9.56558 10.8919 9.77858 10.6769L12.7086 7.72194C12.8951 7.53292 12.9998 7.27803 12.9998 7.01244C12.9998 6.74686 12.8951 6.49196 12.7086 6.30294C12.6167 6.20976 12.5073 6.13576 12.3866 6.08525C12.2659 6.03474 12.1364 6.00873 12.0056 6.00873C11.8748 6.00873 11.7452 6.03474 11.6245 6.08525C11.5039 6.13576 11.3944 6.20976 11.3026 6.30294L9.00458 8.61994L6.69758 6.29294C6.60554 6.20012 6.49604 6.12644 6.37538 6.07617C6.25472 6.02589 6.1253 6 5.99458 6C5.86386 6 5.73444 6.02589 5.61378 6.07617C5.49312 6.12644 5.38362 6.20012 5.29158 6.29294Z",
-    fill: "var(--ds-icon, #44546F)"
+    fill: disabled ? "var(--ds-icon-disabled, #B3B9C4)" : "var(--ds-icon, #44546F)"
   })));
 }

package/dist/esm/assets/instructions-outline.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useIconThemed } from './use-icon-themed';
+export default function InstructionsOutlineIcon() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "41",
+    viewBox: "0 0 40 41",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_138_1254)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    y: "0.259766",
+    width: "40",
+    height: "40",
+    rx: "3",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    })
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "0.5",
+    y: "0.759766",
+    width: "39",
+    height: "39",
+    rx: "2.5",
+    stroke: "var(--ds-border, #091E42)",
+    strokeOpacity: "0.14"
+  })), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 18.2598C10.4087 18.2598 8.88258 17.6276 7.75736 16.5024C6.63214 15.3772 6 13.8511 6 12.2598C6 10.6685 6.63214 9.14234 7.75736 8.01713C8.88258 6.89191 10.4087 6.25977 12 6.25977C13.5913 6.25977 15.1174 6.89191 16.2426 8.01713C17.3679 9.14234 18 10.6685 18 12.2598C18 13.8511 17.3679 15.3772 16.2426 16.5024C15.1174 17.6276 13.5913 18.2598 12 18.2598ZM12 11.8848C11.8011 11.8848 11.6103 11.9638 11.4697 12.1044C11.329 12.2451 11.25 12.4359 11.25 12.6348V14.5098C11.25 14.7087 11.329 14.8994 11.4697 15.0401C11.6103 15.1807 11.8011 15.2598 12 15.2598C12.1989 15.2598 12.3897 15.1807 12.5303 15.0401C12.671 14.8994 12.75 14.7087 12.75 14.5098V12.6348C12.75 12.4359 12.671 12.2451 12.5303 12.1044C12.3897 11.9638 12.1989 11.8848 12 11.8848ZM12 11.041C12.2735 11.041 12.5358 10.9324 12.7292 10.739C12.9226 10.5456 13.0312 10.2833 13.0312 10.0098C13.0312 9.73626 12.9226 9.47396 12.7292 9.28056C12.5358 9.08716 12.2735 8.97852 12 8.97852C11.7265 8.97852 11.4642 9.08716 11.2708 9.28056C11.0774 9.47396 10.9688 9.73626 10.9688 10.0098C10.9688 10.2833 11.0774 10.5456 11.2708 10.739C11.4642 10.9324 11.7265 11.041 12 11.041Z",
+    fill: "#4D8CED"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "22.2598",
+    width: "28",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "25.2598",
+    width: "28",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "28.2598",
+    width: "14",
+    height: "1",
+    rx: "0.5",
+    fill: "var(--ds-text-disabled, #A5ADBA)"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_138_1254"
+  }, /*#__PURE__*/React.createElement("rect", {
+    y: "0.259766",
+    width: "40",
+    height: "40",
+    rx: "3",
+    fill: "var(--ds-surface, #FFFFFF)"
+  }))));
+}

package/dist/esm/assets/switch.js

@@ -1,23 +1,18 @@
-import React from 'react';
-import SVG from '@atlaskit/icon/svg';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import RefreshIcon from '@atlaskit/icon/glyph/refresh';
+var iconStyle = css({
+  transform: 'rotate(-90deg)'
+});
 export default function SwitchIcon() {
-  return /*#__PURE__*/React.createElement(SVG, {
+  return jsx("span", {
+    css: iconStyle
+  }, jsx(RefreshIcon, {
     label: ""
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6.003 16H8.998C9.26322 16 9.51757 15.8947 9.70511 15.7071C9.89264 15.5196 9.998 15.2652 9.998 15C9.998 14.7348 9.89264 14.4805 9.70511 14.2929C9.51757 14.1054 9.26322 14 8.998 14H5.102C4.494 14 4 14.493 4 15.1V19C4 19.2656 4.10551 19.5204 4.29333 19.7082C4.48115 19.896 4.73589 20.0015 5.0015 20.0015C5.26711 20.0015 5.52185 19.896 5.70967 19.7082C5.89748 19.5204 6.003 19.2656 6.003 19V16Z",
-    fill: "var(--ds-icon, #44546F)"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M18.018 14.572C16.989 16.649 14.807 18 12.37 18C10.104 18 8.051 16.833 6.945 14.98C6.659 14.5 6.023 14.334 5.524 14.609C5.40677 14.6709 5.30331 14.7559 5.21991 14.8589C5.13651 14.9619 5.0749 15.0808 5.0388 15.2083C5.00271 15.3359 4.99289 15.4694 5.00994 15.6009C5.027 15.7323 5.07056 15.8589 5.138 15.973C6.611 18.443 9.35 20 12.37 20C15.618 20 18.528 18.198 19.899 15.43C20.146 14.932 19.925 14.335 19.406 14.098C18.886 13.861 18.265 14.073 18.018 14.572Z",
-    fill: "var(--ds-icon, #44546F)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M15.002 10L18.898 10C19.506 10 20 9.50703 20 8.90003V5.00003C20 4.73441 19.8945 4.47968 19.7067 4.29186C19.5188 4.10404 19.2641 3.99853 18.9985 3.99853C18.7329 3.99853 18.4782 4.10404 18.2903 4.29186C18.1025 4.47968 17.997 4.73441 17.997 5.00003V8.00003H15.002C14.7368 8.00003 14.4824 8.10538 14.2949 8.29292C14.1074 8.48046 14.002 8.73481 14.002 9.00003C14.002 9.26524 14.1074 9.5196 14.2949 9.70713C14.4824 9.89467 14.7368 10 15.002 10Z",
-    fill: "var(--ds-icon, #44546F)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.596 9.90303C5.116 10.14 5.736 9.92803 5.983 9.42903C7.012 7.35203 9.193 6.00103 11.63 6.00103C13.896 6.00103 15.95 7.16803 17.055 9.02203C17.1988 9.25438 17.4265 9.42245 17.6909 9.49135C17.9553 9.56024 18.2361 9.52468 18.475 9.39203C18.975 9.11803 19.148 8.50703 18.862 8.02803C17.389 5.55803 14.65 4.00103 11.63 4.00103C8.382 4.00103 5.472 5.80303 4.102 8.57103C4.03537 8.70353 4.00045 8.84971 4 8.99803C4.00188 9.1902 4.05909 9.37775 4.16479 9.53825C4.27049 9.69875 4.4202 9.8254 4.596 9.90303Z",
-    fill: "var(--ds-icon, #44546F)"
   }));
 }

package/dist/esm/assets/use-icon-themed.js

@@ -0,0 +1,14 @@
+import { useThemeObserver } from '@atlaskit/tokens';
+
+// Copy of platform/packages/editor/editor-common/src/quick-insert/use-icon-themed.tsx
+// As per warning in the original file, this hook may not be suitable to be exported
+// and we want to avoid making experiment-only icons public (i.e. move to @atlaskit/editor-common/quick-insert)
+export var useIconThemed = function useIconThemed() {
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  return {
+    iconThemed: function iconThemed(colors) {
+      return colorMode && colorMode === 'dark' ? colors['dark'] : colors['light'];
+    }
+  };
+};

package/dist/esm/plugin.js

@@ -1,12 +1,15 @@
 import React, { useLayoutEffect } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { getWrappingOptions } from '@atlaskit/editor-common/utils';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import SwitchIcon from './assets/switch';
+import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
@@ -116,10 +119,8 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3931754727/Experiment+Elements+Basic+Text+Transformations
       selectionToolbar: function selectionToolbar(state, intl) {
         var _api$featureFlags;
-        var $from = state.selection.$from;
-        var isEligible =
-        // basicTextTransformations is used to present AI enablement status to avoid adding editor props
-        (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 || (_api$featureFlags = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.basicTextTransformations) && $from.depth === 1;
+        var isEligible = // basicTextTransformations is used to present AI enablement status to avoid adding editor props
+        api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 || (_api$featureFlags = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.basicTextTransformations;
         if (!isEligible) {
           return;
         }
@@ -127,13 +128,29 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
           exposure: true
         })) {
           var formatMessage = intl.formatMessage;
-          var _options = transformationOptions(api).map(function (option) {
+          var _options = transformationOptions(api, state.schema).map(function (option) {
+            var canWrap;
+            if (option.type.name === 'codeBlock') {
+              var _$from$node;
+              var $from = state.selection.$from;
+              var grandParentNodeType = (_$from$node = $from.node(-1)) === null || _$from$node === void 0 ? void 0 : _$from$node.type;
+              var parentNodeType = $from.parent.type;
+              canWrap = shouldSplitSelectedNodeOnNodeInsertion({
+                parentNodeType: parentNodeType,
+                grandParentNodeType: grandParentNodeType,
+                content: option.type.createAndFill()
+              }) && contentAllowedInCodeBlock(state);
+            } else {
+              canWrap = !!getWrappingOptions(state, option.type).wrapping;
+            }
             var IconBefore = option.icon;
             return {
               title: formatMessage(option.title),
               icon: /*#__PURE__*/React.createElement(IconBefore, {
-                label: ""
+                label: "",
+                disabled: !canWrap
               }),
+              disabled: !canWrap,
               onClick: function onClick(state, dispatch) {
                 var _option$command;
                 (_option$command = option.command) === null || _option$command === void 0 || _option$command.call(option, INPUT_METHOD.FLOATING_TB)(state, dispatch);
@@ -151,6 +168,18 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
             rank: -9
           };
         }
+      },
+      // This is temporarily added for element level templates experiment.
+      // This is not the most ideal plugin to add this to, but it is suitable for experiment purpose
+      // If we decide to ship the feature, we will consider a separate plugin if needed.
+      // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
+      quickInsert: function quickInsert() {
+        if (editorExperiment('element-level-templates', true, {
+          exposure: true
+        })) {
+          return templateOptions;
+        }
+        return [];
       }
     },
     usePluginHook: function usePluginHook() {

package/dist/esm/ui/ToolbarInsertBlock/dropdown-button.js

@@ -7,37 +7,23 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { expandWrapperStyle, triggerWrapper } from './styles';
+import { triggerWrapper } from './styles';
 var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
       css: triggerWrapper
-    }, fg('platform_editor_migration_icon_and_typography') ? jsx(AddIcon, {
+    }, jsx(AddIcon, {
       label: props.label,
-      color: "currentColor"
-    }) : jsx(AddIconLegacy, {
-      label: props.label
-    }), fg('platform_editor_migration_icon_and_typography') ?
-    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: expandWrapperStyle
-    }, jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious"
+    }), jsx("span", null, jsx(ChevronDownIcon, {
       label: "",
-      color: "currentColor"
-    })) :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: expandIconWrapperStyle
-    }, jsx(ExpandIcon, {
-      label: ""
+      color: "currentColor",
+      LEGACY_margin: "0 0 0 -8px"
     })))
   );
 });

package/dist/esm/ui/ToolbarInsertBlock/item.js

@@ -14,32 +14,19 @@ import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
 import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
 import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
 import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
+import GridIcon from '@atlaskit/icon/core/migration/grid--editor-table';
 import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
 import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
 import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
 import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
 import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
-import CodeIcon from '@atlaskit/icon/glyph/editor/code';
-import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
-import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
 import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
-import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
-import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
-import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
-import TableIcon from '@atlaskit/icon/glyph/editor/table';
-import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
-import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import StatusIcon from '@atlaskit/icon/glyph/status';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { fg } from '@atlaskit/platform-feature-flags';
+import ExpandNodeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle';
 import { shallowEquals } from './shallow-equals';
 var from = function from(init) {
   return {
@@ -49,7 +36,9 @@ var from = function from(init) {
       name: init.name
     },
     elemBefore: jsx(init.Icon, {
-      label: ""
+      label: "",
+      color: "currentColor",
+      spacing: "spacious"
     }),
     elemAfter: init.shortcut ?
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -73,7 +62,7 @@ export var action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? CheckboxCheckedIcon : TaskIcon,
+    Icon: CheckboxCheckedIcon,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -84,7 +73,7 @@ export var link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: tooltip(addLink),
-    Icon: fg('platform_editor_migration_icon_and_typography') ? LinkIcon : LinkIconLegacy,
+    Icon: LinkIcon,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
   });
@@ -95,7 +84,7 @@ export var media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
+    Icon: ImageIcon
   });
 });
 export var imageUpload = mem(function (init) {
@@ -104,7 +93,7 @@ export var imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
+    Icon: ImageIcon
   });
 });
 export var mention = mem(function (init) {
@@ -113,7 +102,7 @@ export var mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? MentionIcon : MentionIconLegacy,
+    Icon: MentionIcon,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -125,7 +114,7 @@ export var emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? EmojiIcon : EmojiIconLegacy,
+    Icon: EmojiIcon,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -137,7 +126,7 @@ export var table = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table',
-    Icon: TableIcon,
+    Icon: GridIcon,
     shortcut: tooltip(toggleTable),
     'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
   });
@@ -148,12 +137,12 @@ export var tableSelector = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table selector',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? function () {
+    Icon: function Icon() {
       return jsx(ChevronDownIcon, {
         label: "",
         color: "currentColor"
       });
-    } : ExpandIcon
+    }
   });
 });
 export var layout = mem(function (init) {
@@ -171,7 +160,7 @@ export var codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? AngleBracketsIcon : CodeIcon,
+    Icon: AngleBracketsIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -182,7 +171,7 @@ export var panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? InformationIcon : InfoIcon,
+    Icon: InformationIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -193,7 +182,7 @@ export var blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? QuotationMarkIcon : QuoteIcon,
+    Icon: QuotationMarkIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -204,7 +193,7 @@ export var decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? DecisionIcon : DecisionIconLegacy,
+    Icon: DecisionIcon,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -235,7 +224,7 @@ export var date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: fg('platform_editor_migration_icon_and_typography') ? CalendarIcon : DateIcon,
+    Icon: CalendarIcon,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -269,11 +258,9 @@ export var more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return fg('platform_editor_migration_icon_and_typography') ? jsx(ShowMoreHorizontalIcon, {
+      return jsx(ShowMoreHorizontalIcon, {
         label: "",
         color: "currentColor"
-      }) : jsx(EditorMoreIcon, {
-        label: ""
       });
     }
   });