innov
/
am-editor11212
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
yanmao 2021-12-31 14:59:26 +08:00
parent ff01d7efd6
commit 980d4d2b80
10 changed files with 71 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/react/components/editor/config.tsx
View File

@ -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',

4
packages/toolbar-vue/src/components/group.vue
View File

@ -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>

2
packages/toolbar-vue/src/components/toolbar.vue
View File

@ -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>

16
packages/toolbar-vue/src/plugin/component/index.css
View File

@ -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;
}

13
packages/toolbar-vue/src/plugin/component/popup.ts
View File

@ -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();
}
}

7
packages/toolbar/src/Toolbar.tsx
View File

@ -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>

4
packages/toolbar/src/group/index.tsx
View File

@ -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"

15
packages/toolbar/src/plugin/component/index.css
View File

@ -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;
}

13
packages/toolbar/src/plugin/component/popup.tsx
View File

@ -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 };

6
plugins/mark-range/src/index.ts
View File

@ -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);