fix(mark-range): filtering or setting a mark causes the card size to change

examples/react/components/editor/config.tsx

@@ -368,12 +368,12 @@ export const toolbarOptions: ToolbarOptions = {
 	// 				{
 	// 					type: 'button',
 	// 					name: 'orderedlist',
-	// 					icon: 'orderedlist',
+	// 					icon: 'ordered-list',
 	// 				},
 	// 				{
 	// 					type: 'button',
-	// 					name: 'unorderedlist',
+	// 					name: 'unordered-list',
-	// 					icon: 'unorderedlist',
+	// 					icon: 'unordered-list',
 	// 				},
 	// 				{
 	// 					type: 'button',

packages/toolbar-vue/src/components/group.vue

@@ -5,7 +5,7 @@
         trigger="click"
         overlay-class-name="editor-toolbar-popover"
         :arrow-point-at-center="true"
-        :placement="isMobile ? 'topRight' : 'bottom'"
+        :placement="isMobile ? 'topRight' : undefined"
         >
             <template #content>
                 <div :class="['editor-toolbar', {'editor-toolbar-mobile': isMobile && !popup,
@@ -58,7 +58,7 @@ export default defineComponent({
         }
     },
     methods:{
-        getPopupContainer:() => document.querySelector('.editor-toolbar') || document.body
+        getPopupContainer:() => document.querySelector('.data-toolbar-popup-wrapper') || document.querySelector('.editor-toolbar') || document.body
     }
 })
 </script>

packages/toolbar-vue/src/components/toolbar.vue

@@ -11,7 +11,7 @@
     @contextmenu="triggerContextMenu"
     >
         <div class="editor-toolbar-content">
-            <am-group v-for="(group,index) in groups" :key="index" :engine="engine" v-bind="group" />
+            <am-group v-for="(group,index) in groups" :key="index" :engine="engine" :popup="popup" v-bind="group" />
         </div>
     </div>
 </template>

packages/toolbar-vue/src/plugin/component/index.css

@@ -33,6 +33,7 @@
     overflow: auto;
 }
 /** ------------------- popup ---------------------- **/
+/** ------------------- popup ---------------------- **/
 .data-toolbar-popup-wrapper {
     position: absolute;
     z-index: 9999;
@@ -42,3 +43,18 @@
     border: 1px solid #dee0e3;
     box-shadow: 0 4px 8px 0 rgba(31, 35, 41, 0.1);
 }
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover {
+    width: max-content;
+}
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-inner-content {
+    padding: 4px 0;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #dee0e3;
+}
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-arrow {
+    display: none;
+}

packages/toolbar-vue/src/plugin/component/popup.ts

@@ -29,6 +29,7 @@ export default class Popup {
 		if (!isMobile) window.addEventListener('scroll', this.onSelect);
 		window.addEventListener('resize', this.onSelect);
 		this.#editor.scrollNode?.on('scroll', this.onSelect);
+		document.addEventListener('mousedown', this.hide);
 	}
 
 	onSelect = () => {
@@ -140,12 +141,19 @@ export default class Popup {
 		}, 200);
 	}
 
-	hide() {
+	hide = (event?: MouseEvent) => {
+		if (event?.target) {
+			if (
+				$(event.target).closest('.data-toolbar-popup-wrapper').length >
+				0
+			)
+				return;
+		}
 		this.#root.css({
 			left: '0px',
 			top: '-9999px',
 		});
-	}
+	};
 
 	destroy() {
 		this.#root.remove();
@@ -157,6 +165,7 @@ export default class Popup {
 		if (!isMobile) window.removeEventListener('scroll', this.onSelect);
 		window.removeEventListener('resize', this.onSelect);
 		this.#editor.scrollNode?.off('scroll', this.onSelect);
+		document.removeEventListener('mousedown', this.hide);
 		if (this.#vm) this.#vm.unmount();
 	}
 }

packages/toolbar/src/Toolbar.tsx

@@ -322,7 +322,12 @@ const Toolbar: React.FC<ToolbarProps> = ({
 		>
 			<div className="editor-toolbar-content">
 				{data.map((group, index) => (
-					<ToolbarGroup key={index} engine={engine} {...group} />
+					<ToolbarGroup
+						key={index}
+						engine={engine}
+						popup={popup}
+						{...group}
+					/>
 				))}
 			</div>
 		</div>

packages/toolbar/src/group/index.tsx

@@ -70,10 +70,10 @@ const ToolbarGroup: React.FC<GroupProps> = ({
 			return (
 				<Popover
 					getPopupContainer={() =>
+						document.querySelector('.data-toolbar-popup-wrapper') ||
 						document.querySelector('.editor-toolbar') ||
 						document.body
 					}
-					trigger="click"
 					overlayClassName="editor-toolbar-popover"
 					content={
 						<div
@@ -87,7 +87,7 @@ const ToolbarGroup: React.FC<GroupProps> = ({
 						</div>
 					}
 					arrowPointAtCenter
-					placement={isMobile ? 'topRight' : 'bottom'}
+					placement={isMobile ? 'topRight' : undefined}
 				>
 					<Button
 						name="group-popover"

packages/toolbar/src/plugin/component/index.css

@@ -42,3 +42,18 @@
     border: 1px solid #dee0e3;
     box-shadow: 0 4px 8px 0 rgba(31, 35, 41, 0.1);
 }
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover {
+    width: max-content;
+}
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-inner-content {
+    padding: 4px 0;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #dee0e3;
+}
+
+.data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-arrow {
+    display: none;
+}

packages/toolbar/src/plugin/component/popup.tsx

@@ -29,6 +29,7 @@ export default class Popup {
 		if (!isMobile) window.addEventListener('scroll', this.onSelect);
 		window.addEventListener('resize', this.onSelect);
 		this.#editor.scrollNode?.on('scroll', this.onSelect);
+		document.addEventListener('mousedown', this.hide);
 	}
 
 	onSelect = () => {
@@ -146,12 +147,19 @@ export default class Popup {
 		);
 	}
 
-	hide() {
+	hide = (event?: MouseEvent) => {
+		if (event?.target) {
+			if (
+				$(event.target).closest('.data-toolbar-popup-wrapper').length >
+				0
+			)
+				return;
+		}
 		this.#root.css({
 			left: '0px',
 			top: '-9999px',
 		});
-	}
+	};
 
 	destroy() {
 		this.#root.remove();
@@ -163,6 +171,7 @@ export default class Popup {
 		if (!isMobile) window.removeEventListener('scroll', this.onSelect);
 		window.removeEventListener('resize', this.onSelect);
 		this.#editor.scrollNode?.off('scroll', this.onSelect);
+		document.removeEventListener('mousedown', this.hide);
 	}
 }
 export type { GroupItemProps };

plugins/mark-range/src/index.ts

@@ -641,7 +641,8 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		const container = this.editor.container.clone(value ? false : true);
 		container.css({
 			position: 'fixed',
-			top: 0,
+			top: '-999px',
+			width: '100%',
 			clip: 'rect(0, 0, 0, 0)',
 		});
 		$(document.body).append(container);
@@ -745,7 +746,8 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		if (value) value = Selection.removeTags(value);
 		container.css({
 			position: 'fixed',
-			top: 0,
+			top: '-999px',
+			width: '100%',
 			clip: 'rect(0, 0, 0, 0)',
 		});
 		$(document.body).append(container);