Skip to content

Commit

Permalink
Bug UL and OL list not working corretly with option "enter":"BR" #1178
Browse files Browse the repository at this point in the history 
Issue: #1178
  • Loading branch information
@xdan
xdan committed Oct 14, 2024
1 parent 5b72785 commit 0b91b69
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 44 deletions.
16 changes: 11 additions & 5 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
> - :house: [Internal]
> - :nail_care: [Polish]
## 4.2.34

### :bug: Bug Fix

- [Bug UL and OL list not working corretly with option "enter":"BR" #1178](https://github.com/xdan/jodit/issues/1178)

## 4.2.33

### :bug: Bug Fix
Expand Down Expand Up @@ -2835,11 +2841,11 @@ Related with https://github.com/xdan/jodit/issues/574. In some cases need to lim
- @property {IUIOption[]} link.selectOptionsClassName=[] The list of the option for the select (to use with
modeClassName="select")
- ex: [
- { value: "", text: "" },
- { value: "val1", text: "text1" },
- { value: "val2", text: "text2" },
- { value: "val3", text: "text3" }
- ]
- { value: "", text: "" },
- { value: "val1", text: "text1" },
- { value: "val2", text: "text2" },
- { value: "val3", text: "text3" }
- ]
PR: https://github.com/xdan/jodit/pull/577 Thanks @s-renier-taonix-fr
##### New option `statusbar: boolean = true`
Expand Down
5 changes: 4 additions & 1 deletion public/stand.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,10 @@ <h1>Jodit Test Document</h1>
);
});
}
}
},
"enter": "BR",
"disablePlugins": "wrap-nodes,add-new-line,enter",
"buttons": "ul,ol"
});

editor.value = '<p style="font-size: 16.5pt; margin: 0"><a href="stand.html"><img src="https://xdsoft.net/jodit/finder/files/pexels-arianna-jade-4006617.jpg" id="lio" alt="Tada" style="margin: 1px 2px 3px 4px; border: 2px solid #f00;" title="Ola ha" width="300"></a>Body Subtitle</p>\n' +
Expand Down
11 changes: 9 additions & 2 deletions src/core/selection/style/api/list/toggle-ordered-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function unwrapList(
li: HTMLElement,
jodit: IJodit,
cs: ICommitStyle
): HTMLElement {
): HTMLElement | DocumentFragment {
const result = jodit.e.fire(`${_PREFIX}BeforeUnwrapList`, mode, list, cs);

if (result) {
Expand All @@ -103,5 +103,12 @@ function unwrapList(
'Element should be inside the list'
);
Dom.unwrap(li.parentElement);
return Dom.replace(li, jodit.o.enter, jodit.createInside);

return Dom.replace(
li,
jodit.o.enter.toLowerCase() !== 'br'
? jodit.o.enter
: jodit.createInside.fragment(),
jodit.createInside
);
}
2 changes: 1 addition & 1 deletion src/core/selection/style/api/list/wrap-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
*/
export function wrapList(
commitStyle: ICommitStyle,
wrapper: HTMLElement,
wrapper: HTMLElement | DocumentFragment,
jodit: IJodit
): HTMLElement {
const result = jodit.e.fire(
Expand Down
14 changes: 14 additions & 0 deletions src/core/selection/style/style.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@ describe('Apply style', () => {
'<ul><li>|1</li><li>2</li><li>3|</li></ul>'
],
// Lists
[
'<ul><li>|test<br>Text|</li></ul><br>to text',
{ element: 'ul' },
'|test<br>Text|<br>to text',
{
enter: 'BR',
disablePlugins: [
'wrap-nodes',
'add-new-line',
'enter'
],
buttons: ['ul', 'ol']
}
],
[
'<ol><li>ordered</li><li>|list</li><li>pop</li></ol>',
{ element: 'ul' },
Expand Down
105 changes: 70 additions & 35 deletions src/plugins/ordered-list/ordered-list.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
* Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
*/

describe('Test orderedList plugin', function () {
describe('Commands', function () {
describe('Unordered', function () {
describe('insertUnorderedList', function () {
it('Run command insertUnorderedList should wrap or replace all paragraphs and headings to ul>li', function () {
describe('Test orderedList plugin', () => {
describe('Commands', () => {
describe('Unordered', () => {
describe('insertUnorderedList', () => {
it('Run command insertUnorderedList should wrap or replace all paragraphs and headings to ul>li', () => {
const editor = getJodit();
editor.value = '<h1>test</h1><h2>test</h2><p>test</p>';

Expand All @@ -20,7 +20,7 @@ describe('Test orderedList plugin', function () {
);
});

it('If press Enter inside <li> in the end it should create new <li> and cursor must be in it', function () {
it('If press Enter inside <li> in the end it should create new <li> and cursor must be in it', () => {
const editor = getJodit();
editor.value = '<ul><li>test|</li></ul>';
setCursorToChar(editor);
Expand Down Expand Up @@ -55,8 +55,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('Exec command on selected text', function () {
it('Should wrap this text in ul/li', function () {
describe('Exec command on selected text', () => {
it('Should wrap this text in ul/li', () => {
const editor = getJodit();
editor.value = 'Hello world';
editor.s.select(editor.editor.firstChild);
Expand All @@ -69,8 +69,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('Exec command on collapsed cursor', function () {
it('Should wrap whole text in ul/li', function () {
describe('Exec command on collapsed cursor', () => {
it('Should wrap whole text in ul/li', () => {
const editor = getJodit();
editor.value = 'Hello world';
editor.s.setCursorAfter(
Expand All @@ -85,8 +85,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('With second argument', function () {
it('Should wrap this text in styled ul/li', function () {
describe('With second argument', () => {
it('Should wrap this text in styled ul/li', () => {
const editor = getJodit();
editor.value = '<p>|Hello world|</p>';
setCursorToChar(editor);
Expand All @@ -100,9 +100,9 @@ describe('Test orderedList plugin', function () {
});
});

describe('Ordered', function () {
describe('Exec command on selected text', function () {
it('Should wrap this text inside ol/li', function () {
describe('Ordered', () => {
describe('Exec command on selected text', () => {
it('Should wrap this text inside ol/li', () => {
const editor = getJodit();
editor.value = 'Hello world';
editor.s.select(editor.editor.firstChild);
Expand All @@ -116,9 +116,9 @@ describe('Test orderedList plugin', function () {
});
});

describe('Run second time', function () {
describe('On same place', function () {
it('Should unwrap source elements', function () {
describe('Run second time', () => {
describe('On same place', () => {
it('Should unwrap source elements', () => {
const editor = getJodit();
editor.value = '<p>test</p>';
editor.s.setCursorIn(editor.editor.firstChild);
Expand Down Expand Up @@ -157,8 +157,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('Unordered after Unordered', function () {
it('Should unwrap selected ul/li', function () {
describe('Unordered after Unordered', () => {
it('Should unwrap selected ul/li', () => {
const editor = getJodit();
editor.value = '<ul><li>Hello world</li></ul>';
editor.s.select(editor.editor.firstChild);
Expand All @@ -171,8 +171,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('Ordered after Unordered', function () {
it('Should replace selected ul/li to ol/li', function () {
describe('Ordered after Unordered', () => {
it('Should replace selected ul/li to ol/li', () => {
const editor = getJodit();
editor.value = '<ul><li>Hello world</li></ul>';
editor.s.select(editor.editor.firstChild);
Expand All @@ -185,8 +185,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('With another second argument', function () {
it('Should change style.listStyleType', function () {
describe('With another second argument', () => {
it('Should change style.listStyleType', () => {
const editor = getJodit();
editor.value =
'<ul style="list-style-type: circle"><li>Hello world</li></ul>';
Expand All @@ -202,10 +202,10 @@ describe('Test orderedList plugin', function () {
});
});

describe('UI', function () {
describe('Click on unordered list button', function () {
describe('when selection is collapsed', function () {
it('should wrap current box in new <ul><li> element', function () {
describe('UI', () => {
describe('Click on unordered list button', () => {
describe('when selection is collapsed', () => {
it('should wrap current box in new <ul><li> element', () => {
const editor = getJodit();

editor.value = '<p>|Text to text</p>';
Expand All @@ -221,11 +221,46 @@ describe('Test orderedList plugin', function () {
);
});
});

describe('when selection is not collapsed', () => {
let editor;
beforeEach(() => {
editor = getJodit({
enter: 'BR',
disablePlugins: ['wrap-nodes', 'add-new-line', 'enter'],
buttons: ['ul', 'ol']
});

editor.value = '|test<br>Text|<br>to text';
setCursorToChar(editor);
});

describe('Enter mode: BR', () => {
it('Should wrap selected text in new <ul><li> element', () => {
clickButton('ul', editor);
expect(sortAttributes(editor.value)).equals(
'<ul><li>test<br>Text</li></ul><br>to text'
);
});

describe('Click second time', () => {
it('Should unwrap selected text', () => {
editor.value =
'<ul><li>|test<br>Text|</li></ul><br>to text';
setCursorToChar(editor);
clickButton('ul', editor);
expect(sortAttributes(editor.value)).equals(
'test<br>Text<br>to text'
);
});
});
});
});
});

describe('Click on trigger and click on some element', function () {
describe('when selection is collapsed', function () {
it('should wrap current box in new <ul><li> element with list-style-type', function () {
describe('Click on trigger and click on some element', () => {
describe('when selection is collapsed', () => {
it('should wrap current box in new <ul><li> element with list-style-type', () => {
const editor = getJodit();

editor.value = '<p>|Text to text</p>';
Expand All @@ -241,8 +276,8 @@ describe('Test orderedList plugin', function () {
);
});

describe('click on default after this', function () {
it('should remove extra list style', function () {
describe('click on default after this', () => {
it('should remove extra list style', () => {
const editor = getJodit();

editor.value = '<p>|Text to text</p>';
Expand All @@ -267,8 +302,8 @@ describe('Test orderedList plugin', function () {
});
});

describe('Click on same element inside popup two times', function () {
it('should return ul to first state', function () {
describe('Click on same element inside popup two times', () => {
it('should return ul to first state', () => {
const editor = getJodit();

editor.value = '<p>|Text to text</p>';
Expand Down

0 comments on commit 0b91b69

Please sign in to comment.