From 980d4d2b80f8eccbe6a37c0c9009129b022b3ff0 Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Fri, 31 Dec 2021 14:59:26 +0800
Subject: [PATCH] fix(mark-range): filtering or setting a mark causes the card
 size to change

---
 examples/react/components/editor/config.tsx      |  6 +++---
 packages/toolbar-vue/src/components/group.vue    |  4 ++--
 packages/toolbar-vue/src/components/toolbar.vue  |  2 +-
 .../toolbar-vue/src/plugin/component/index.css   | 16 ++++++++++++++++
 .../toolbar-vue/src/plugin/component/popup.ts    | 13 +++++++++++--
 packages/toolbar/src/Toolbar.tsx                 |  7 ++++++-
 packages/toolbar/src/group/index.tsx             |  4 ++--
 packages/toolbar/src/plugin/component/index.css  | 15 +++++++++++++++
 packages/toolbar/src/plugin/component/popup.tsx  | 13 +++++++++++--
 plugins/mark-range/src/index.ts                  |  6 ++++--
 10 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/examples/react/components/editor/config.tsx b/examples/react/components/editor/config.tsx
index 1a0a9b95..0d98a393 100644
--- a/examples/react/components/editor/config.tsx
+++ b/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',
-	// 					icon: 'unorderedlist',
+	// 					name: 'unordered-list',
+	// 					icon: 'unordered-list',
 	// 				},
 	// 				{
 	// 					type: 'button',
diff --git a/packages/toolbar-vue/src/components/group.vue b/packages/toolbar-vue/src/components/group.vue
index f94a053b..af3be3ad 100644
--- a/packages/toolbar-vue/src/components/group.vue
+++ b/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>
diff --git a/packages/toolbar-vue/src/components/toolbar.vue b/packages/toolbar-vue/src/components/toolbar.vue
index f7515150..b2049839 100644
--- a/packages/toolbar-vue/src/components/toolbar.vue
+++ b/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>
diff --git a/packages/toolbar-vue/src/plugin/component/index.css b/packages/toolbar-vue/src/plugin/component/index.css
index 87600bd1..0a9bd71e 100644
--- a/packages/toolbar-vue/src/plugin/component/index.css
+++ b/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;
@@ -41,4 +42,19 @@
     border-radius: 4px;
     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;
 }
\ No newline at end of file
diff --git a/packages/toolbar-vue/src/plugin/component/popup.ts b/packages/toolbar-vue/src/plugin/component/popup.ts
index f686adfb..a30a62fb 100644
--- a/packages/toolbar-vue/src/plugin/component/popup.ts
+++ b/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();
 	}
 }
diff --git a/packages/toolbar/src/Toolbar.tsx b/packages/toolbar/src/Toolbar.tsx
index 80a91c79..55191573 100644
--- a/packages/toolbar/src/Toolbar.tsx
+++ b/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>
diff --git a/packages/toolbar/src/group/index.tsx b/packages/toolbar/src/group/index.tsx
index df2eb722..c4602258 100644
--- a/packages/toolbar/src/group/index.tsx
+++ b/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"
diff --git a/packages/toolbar/src/plugin/component/index.css b/packages/toolbar/src/plugin/component/index.css
index 87600bd1..84abf6dd 100644
--- a/packages/toolbar/src/plugin/component/index.css
+++ b/packages/toolbar/src/plugin/component/index.css
@@ -41,4 +41,19 @@
     border-radius: 4px;
     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;
 }
\ No newline at end of file
diff --git a/packages/toolbar/src/plugin/component/popup.tsx b/packages/toolbar/src/plugin/component/popup.tsx
index 7f0b0e70..2314af23 100644
--- a/packages/toolbar/src/plugin/component/popup.tsx
+++ b/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 };
diff --git a/plugins/mark-range/src/index.ts b/plugins/mark-range/src/index.ts
index df5a7698..e30baa85 100644
--- a/plugins/mark-range/src/index.ts
+++ b/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);