VladPolskiy/tinymce
1
0
Fork 0
mirror of https://github.com/tinymce/tinymce.git synced 2025-07-30 12:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

TINY-11549: Revert "TINY-11549: improve context toolbar positioning (#10033)" (#10157)

Browse Source 
This reverts commit 8f507e8c19.
This commit is contained in:
lorenzo-pomili
2025-02-13 14:38:43 +01:00
committed by GitHub
parent a98d4e07ee
commit 8ae7594093
4 changed files with 4 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changes/unreleased/tinymce-TINY-11549-2025-02-05.yaml
View File

@ -1,7 +0,0 @@
project: tinymce
kind: Fixed
body: the toolbar did not consider the entire space in some cases if there was a horizontal
scroll.
time: 2025-02-05T08:50:05.34007487+01:00
custom:
Issue: TINY-11549

2
modules/alloy/src/test/ts/browser/position/layout/LayoutInsetTest.ts
View File

@ -8,7 +8,7 @@ import * as Boxes from 'ephox/alloy/alien/Boxes';
import * as Bubble from 'ephox/alloy/positioning/layout/Bubble';
import * as LayoutInset from 'ephox/alloy/positioning/layout/LayoutInset';
import { Placement, setPlacement } from 'ephox/alloy/positioning/layout/Placement';
import { boundsArb, boxArb } from 'ephox/alloy/test/BoundsUtils';
import { boxArb, boundsArb } from 'ephox/alloy/test/BoundsUtils';
describe('LayoutInsetTest', () => {
const placements = [

11
modules/tinymce/src/themes/silver/main/ts/ui/context/ContextToolbarAnchor.ts
View File

@ -92,14 +92,9 @@ const getAnchorSpec = (editor: Editor, mobile: boolean, data: PositionData, posi
const layout = determineInsetLayout(editor, placee, elem, data, bounds);
// Adjust the anchor box to use the passed y bound coords so that we simulate a "docking" type of behaviour
const newAnchor = {
...bounds,
/*
TINY-11549: this is needed because otherwise `LayoutInsert` could not work correctly
when we switch from a short toolbar to a long one, the short one is positioned at the right of the screen
and the content is scrolled horizontally
*/
x: Math.min(anchor.x, bounds.x),
width: Math.min(anchor.width, bounds.width)
...anchor,
y: bounds.y,
height: bounds.height
};
return {
...layout(newAnchor, element, bubbles, placee, bounds),

84
modules/tinymce/src/themes/silver/test/ts/browser/editor/contexttoolbar/ContextToolbarPositionTest.ts
View File

@ -1,84 +0,0 @@
import { UiFinder, Waiter } from '@ephox/agar';
import { describe, it } from '@ephox/bedrock-client';
import { Css, Scroll, SugarBody, SugarDocument, SugarLocation } from '@ephox/sugar';
import { TinyDom, TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
import { assert } from 'chai';
import Editor from 'tinymce/core/api/Editor';
import { getGreenImageDataUrl } from '../../../module/Assets';
describe('browser.tinymce.themes.silver.editor.contexttoolbar.ContextToolbarPositionTest', () => {
const hook = TinyHooks.bddSetup<Editor>({
base_url: '/project/tinymce/js/tinymce',
setup: (editor: Editor) => {
let currentToolbar = 'nothing';
editor.ui.registry.addContextToolbar('custom', {
type: 'contexttoolbar',
predicate: (node) => node.nodeName.toLowerCase() === 'img' && currentToolbar === 'something',
items: 'back undo redo | undo redo | undo redo | undo redo | undo redo | undo redo',
scope: 'node',
position: 'node'
});
editor.ui.registry.addContextToolbar('custom-top', {
type: 'contexttoolbar',
predicate: (node) => node.nodeName.toLowerCase() === 'img' && currentToolbar === 'nothing',
items: 'nested',
scope: 'node',
position: 'node'
});
editor.ui.registry.addButton('nested', {
icon: 'image',
onAction: () => {
editor.focus();
currentToolbar = 'something';
editor.nodeChanged();
}
});
editor.ui.registry.addButton('back', {
icon: 'image',
onAction: () => {
editor.focus();
currentToolbar = 'nothing';
editor.nodeChanged();
}
});
},
width: 725
}, [], true);
const scrollTo = (editor: Editor, x: number, y: number, offset = 0) => {
const editorPos = SugarLocation.absolute(TinyDom.contentAreaContainer(editor));
// Note: Add 100px for the top para
Scroll.to(editorPos.left + x, editorPos.top + offset + y, TinyDom.document(editor));
};
const pAssertPosition = (position: string, direction: string, value: number, diff = 5) => Waiter.pTryUntil('Wait for toolbar to be positioned', () => {
const ele = UiFinder.findIn(SugarBody.body(), '.tox-pop').getOrDie();
const posStyle = Css.get(ele, 'position');
const dirStyle = parseInt(Css.getRaw(ele, direction).getOr('0').replace('px', ''), 10);
assert.equal(posStyle, position, 'Assert toolbar positioning');
assert.approximately(dirStyle, value, diff, `Assert toolbar position - ${direction} ${dirStyle}px ~= ${value}px`);
});
it('TINY-11549: switching between toolbars of different lenghts the available space should be calculate correctly', async () => {
const editor = hook.editor();
editor.setContent(
`<p><img id="myImg" src="${getGreenImageDataUrl()}" style="height: 200px; width: 2000px"></p>`
);
TinySelections.select(editor, 'img', []);
scrollTo(editor, 360, 0);
await UiFinder.pWaitFor('button to active nested toolbar should be visible', SugarDocument.getDocument(), 'button[data-mce-name="nested"]');
await pAssertPosition('absolute', 'left', SugarLocation.absolute(TinyDom.container(editor)).left + 625);
TinyUiActions.clickOnUi(editor, 'button[data-mce-name="nested"]');
const nestedToolbar = await UiFinder.pWaitForState<HTMLDivElement>('nested toolbar should be showed', SugarDocument.getDocument(), 'div.tox-toolbar', (t) => t.dom.clientWidth > 200);
assert.isAtMost(nestedToolbar.dom.clientHeight, 50, 'the nexted toolbar should be on just 1 line');
});
});