From 0b91b69b474ae112735f5ef8e0bf5f65f19229f0 Mon Sep 17 00:00:00 2001 From: xdan Date: Mon, 14 Oct 2024 10:10:00 +0300 Subject: [PATCH] Bug UL and OL list not working corretly with option "enter":"BR" #1178 Issue: https://github.com/xdan/jodit/issues/1178 --- CHANGELOG.md | 16 ++- public/stand.html | 5 +- .../style/api/list/toggle-ordered-list.ts | 11 +- .../selection/style/api/list/wrap-list.ts | 2 +- src/core/selection/style/style.test.js | 14 +++ src/plugins/ordered-list/ordered-list.test.js | 105 ++++++++++++------ 6 files changed, 109 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03fb06605..6d734f5bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 @@ -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` diff --git a/public/stand.html b/public/stand.html index 4108dc97c..f9081eb9e 100644 --- a/public/stand.html +++ b/public/stand.html @@ -136,7 +136,10 @@

Jodit Test Document

); }); } - } + }, + "enter": "BR", + "disablePlugins": "wrap-nodes,add-new-line,enter", + "buttons": "ul,ol" }); editor.value = '

TadaBody Subtitle

\n' + diff --git a/src/core/selection/style/api/list/toggle-ordered-list.ts b/src/core/selection/style/api/list/toggle-ordered-list.ts index aa4215ba5..0c6dbeeeb 100644 --- a/src/core/selection/style/api/list/toggle-ordered-list.ts +++ b/src/core/selection/style/api/list/toggle-ordered-list.ts @@ -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) { @@ -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 + ); } diff --git a/src/core/selection/style/api/list/wrap-list.ts b/src/core/selection/style/api/list/wrap-list.ts index 0380d521b..e7cbc7b27 100644 --- a/src/core/selection/style/api/list/wrap-list.ts +++ b/src/core/selection/style/api/list/wrap-list.ts @@ -25,7 +25,7 @@ import { */ export function wrapList( commitStyle: ICommitStyle, - wrapper: HTMLElement, + wrapper: HTMLElement | DocumentFragment, jodit: IJodit ): HTMLElement { const result = jodit.e.fire( diff --git a/src/core/selection/style/style.test.js b/src/core/selection/style/style.test.js index 8a24c4cd4..4f9341c71 100644 --- a/src/core/selection/style/style.test.js +++ b/src/core/selection/style/style.test.js @@ -30,6 +30,20 @@ describe('Apply style', () => { '' ], // Lists + [ + '
to text', + { element: 'ul' }, + '|test
Text|
to text', + { + enter: 'BR', + disablePlugins: [ + 'wrap-nodes', + 'add-new-line', + 'enter' + ], + buttons: ['ul', 'ol'] + } + ], [ '
  1. ordered
  2. |list
  3. pop
', { element: 'ul' }, diff --git a/src/plugins/ordered-list/ordered-list.test.js b/src/plugins/ordered-list/ordered-list.test.js index ea2aefca3..a6f939856 100644 --- a/src/plugins/ordered-list/ordered-list.test.js +++ b/src/plugins/ordered-list/ordered-list.test.js @@ -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 = '

test

test

test

'; @@ -20,7 +20,7 @@ describe('Test orderedList plugin', function () { ); }); - it('If press Enter inside
  • in the end it should create new
  • and cursor must be in it', function () { + it('If press Enter inside
  • in the end it should create new
  • and cursor must be in it', () => { const editor = getJodit(); editor.value = ''; setCursorToChar(editor); @@ -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); @@ -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( @@ -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 = '

    |Hello world|

    '; setCursorToChar(editor); @@ -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); @@ -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 = '

    test

    '; editor.s.setCursorIn(editor.editor.firstChild); @@ -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 = ''; editor.s.select(editor.editor.firstChild); @@ -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 = ''; editor.s.select(editor.editor.firstChild); @@ -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 = ''; @@ -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