Skip to content

Commit

Permalink
fix(addon-editor): support long words inside bulleted or ordered list (…
Browse files Browse the repository at this point in the history 
…#3038)
  • Loading branch information
@splincode
splincode authored Nov 10, 2022
1 parent 02da697 commit c93ae27
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 2 deletions.
7 changes: 6 additions & 1 deletion projects/addon-editor/components/editor-socket/editor-socket.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,13 @@
}

.tui-editor-socket li p {
display: inline-block;
display: inline;
margin: 0 auto;
word-break: break-word;
}

.tui-editor-socket ul li p {
display: inline-block;
}

.tui-editor-socket ul > li:before {
Expand Down
2 changes: 2 additions & 0 deletions projects/demo-integrations/cypress/support/editor/html.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ export const HTML_EDITOR_EXAMPLE_TABLE = `<p><%2Fp><table><tbody><tr><th%20colsp

export const HTML_EDITOR_EXAMPLE_NESTED_UL = `<ul><li>1<ul><li>2<ul><li>3</li><li>4</li></ul></li></ul></li><li>5</li></ul><ol><li>1<ol><li>2<ol><li>3</li><li>4</li></ol></li></ol></li><li>5</li></ol>`;

export const HTML_EDITOR_EXAMPLE_LONG_WORD_UL = `<p></p><ul><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><p></p></li></ul><hr><ol><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><p></p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><ol><li><p>2</p><ol><li><p>123</p><ol><li><p>23</p><ol><li><p>213</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li></ol></li></ol></li></ol></li></ol></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li></ol><p></p>`;

export const HTML_EDITOR_EXAMPLE_NESTED_OL_UL = `<ul><li><p>Lorem</p><ol><li><p>Ipsum</p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">is simply</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">dummy text of</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the printing</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">and typesetting</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">industry</span></p><p></p></li></ul></li></ul></li></ul></li></ol></li></ul><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Lorem</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Ipsum</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">has been</span></p><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the industry's</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">standard dummy</span></p></li></ol></li></ul></li></ul></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">text ever since the 1500s</span></p></li></ol>`;
10 changes: 10 additions & 0 deletions projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-api.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@demo-integrations/support/editor/helpers';
import {
HTML_EDITOR_EXAMPLE_BLOCKQUOTE,
HTML_EDITOR_EXAMPLE_LONG_WORD_UL,
HTML_EDITOR_EXAMPLE_NESTED_OL_UL,
HTML_EDITOR_EXAMPLE_NESTED_UL,
HTML_EDITOR_EXAMPLE_PRE_CODE,
Expand Down Expand Up @@ -106,6 +107,15 @@ describe(`Editor API`, () => {
.matchImageSnapshot(`5-1-bullet-and-ordered-nested-list`);
});

it(`long words`, () => {
tuiVisitEditorApiPage({content: HTML_EDITOR_EXAMPLE_LONG_WORD_UL});

tuiGetDemoContent()
.find(`tui-editor-socket.tui-example`)
.wait(WAIT_BEFORE_SCREENSHOT)
.matchImageSnapshot(`5-1-bullet-and-ordered-list-with-long-word`);
});

it(`nested ol and ul`, () => {
tuiVisitEditorApiPage({content: HTML_EDITOR_EXAMPLE_NESTED_OL_UL});

Expand Down
2 changes: 1 addition & 1 deletion projects/demo/src/modules/components/editor/examples/8/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,6 @@ export class TuiEditorExample8 {
];

control = new FormControl(
`<p><strong><em>War and Peace</em></strong> (<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_language">Russian</a>: Война и мир, <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Romanization_of_Russian">romanized</a>:&nbsp;<em>Voyna i mir</em>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Reforms_of_Russian_orthography">pre-reform Russian</a>: <strong>Война и миръ</strong>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Help:IPA/Russian">[vɐjˈna i ˈmʲir]</a>) is a literary work by the Russian author <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Leo_Tolstoy">Leo Tolstoy</a> that mixes fictional narrative with chapters on history and philosophy. It was first published serially, then published in its entirety in 1869. It is regarded as Tolstoy's finest literary achievement and remains an internationally praised classic of <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/World_literature">world literature</a>.<a target="_blank" rel="noopener noreferrer nofollow" href="#moser">[1]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#thirlwell">[2]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#briggs">[3]</a></p><p>The novel chronicles the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/French_invasion_of_Russia">French invasion of Russia</a> and the impact of the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Napoleonic_era">Napoleonic era</a> on <a target="_blank" rel="noopener noreferrer nofollow" class="my-custom-class mw-redirect" href="https://en.wikipedia.org/wiki/Tsarist">Tsarist</a> society through the stories of five Russian <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Aristocracy_(class)">aristocratic</a> families. Portions of an earlier version, titled <em>The Year 1805</em>,<a target="_blank" rel="noopener noreferrer nofollow" href="#introduction">[4] </a>were serialized in <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/The_Russian_Messenger"><em>The Russian Messenger</em></a> from 1865 to 1867 before the novel was published in its entirety in 1869.<a target="_blank" rel="noopener noreferrer nofollow" href="#knowles">[5]</a></p><p>Tolstoy said that the best <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_literature">Russian literature</a> does not conform to standards and hence hesitated to classify <em>War and Peace</em>, saying it is "not a novel, even less is it a poem, and still less a historical chronicle". Large sections, especially the later chapters, are philosophical discussions rather than narrative.<a target="_blank" rel="noopener noreferrer nofollow" href="#war">[6]</a> He regarded <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Anna_Karenina"><em>Anna Karenina</em></a> as his first true novel.</p><p></p><img src="./assets/images/piece-and-war.jpg" width="732" alt="" title="" data-type="image-editor"><p></p><p><strong>References</strong>:</p><ol><li><p><a data-type="jump-anchor" id="moser">Moser</a>, Charles. 1992. <em>Encyclopedia of Russian Literature</em>. Cambridge University Press, pp. 298–300.</p></li><li><p><a data-type="jump-anchor" id="thirlwell">Thirlwell</a>, Adam <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://www.theguardian.com/books/2005/oct/08/classics.leonikolaevichtolstoy">"A masterpiece in miniature"</a>. <em>The Guardian</em> (London, UK) October 8, 2005</p></li><li><p><a data-type="jump-anchor" id="briggs">Briggs</a>, Anthony. 2005. "Introduction" to <em>War and Peace</em>. Penguin Classics.</p><p></p><p></p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Pevear, Richard</a> (2008). "<a data-type="jump-anchor" id="introduction">Introduction</a>". <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://archive.org/details/warpeace00tols_1"><em>War and Peace</em></a>. Trans. Pevear; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Volokhonsky, Larissa</a>. New York: Vintage Books. pp.&nbsp;VIII–IX. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-4000-7998-8">978-1-4000-7998-8</a>.</p><p></p></li><li><p><a data-type="jump-anchor" id="knowles">Knowles</a>, A. V. <em>Leo Tolstoy</em>, Routledge 1997.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://books.google.com/books?id=c4HEAN-ti1MC&amp;pg=PR10">"Introduction?"</a>. <a data-type="jump-anchor" id="war"><em>War and Peace</em></a>. Wordsworth Editions. 1993. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-85326-062-9">978-1-85326-062-9</a>. Retrieved 2009-03-24.</p></li></ol>`,
`<p><strong><em>War and Peace</em></strong> (<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_language">Russian</a>: Война и мир, <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Romanization_of_Russian">romanized</a>:&nbsp;<em>Voyna i mir</em>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Reforms_of_Russian_orthography">pre-reform Russian</a>: <strong>Война и миръ</strong>; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Help:IPA/Russian">[vɐjˈna i ˈmʲir]</a>) is a literary work by the Russian author <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Leo_Tolstoy">Leo Tolstoy</a> that mixes fictional narrative with chapters on history and philosophy. It was first published serially, then published in its entirety in 1869. It is regarded as Tolstoy's finest literary achievement and remains an internationally praised classic of <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/World_literature">world literature</a>.<a target="_blank" rel="noopener noreferrer nofollow" href="#moser">[1]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#thirlwell">[2]</a><a target="_blank" rel="noopener noreferrer nofollow" href="#briggs">[3]</a></p><p>The novel chronicles the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/French_invasion_of_Russia">French invasion of Russia</a> and the impact of the <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Napoleonic_era">Napoleonic era</a> on <a target="_blank" rel="noopener noreferrer nofollow" class="my-custom-class mw-redirect" href="https://en.wikipedia.org/wiki/Tsarist">Tsarist</a> society through the stories of five Russian <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Aristocracy_(class)">aristocratic</a> families. Portions of an earlier version, titled <em>The Year 1805</em>,<a target="_blank" rel="noopener noreferrer nofollow" href="#introduction">[4] </a>were serialized in <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/The_Russian_Messenger"><em>The Russian Messenger</em></a> from 1865 to 1867 before the novel was published in its entirety in 1869.<a target="_blank" rel="noopener noreferrer nofollow" href="#knowles">[5]</a></p><p>Tolstoy said that the best <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Russian_literature">Russian literature</a> does not conform to standards and hence hesitated to classify <em>War and Peace</em>, saying it is "not a novel, even less is it a poem, and still less a historical chronicle". Large sections, especially the later chapters, are philosophical discussions rather than narrative.<a target="_blank" rel="noopener noreferrer nofollow" href="#war">[6]</a> He regarded <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Anna_Karenina"><em>Anna Karenina</em></a> as his first true novel.</p><p></p><img src="./assets/images/piece-and-war.jpg" width="732" alt="" title="" data-type="image-editor"><p></p><p><strong>References</strong>:</p><ol><li><p><a data-type="jump-anchor" id="moser">Moser</a>, Charles. 1992. <em>Encyclopedia of Russian Literature</em>. Cambridge University Press, pp. 298–300.</p></li><li><p><a data-type="jump-anchor" id="thirlwell">Thirlwell</a>, Adam <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://www.theguardian.com/books/2005/oct/08/classics.leonikolaevichtolstoy">"A masterpiece in miniature"</a>. <em>The Guardian</em> (London, UK) October 8, 2005</p></li><li><p><a data-type="jump-anchor" id="briggs">Briggs</a>, Anthony. 2005. "Introduction" to <em>War and Peace</em>. Penguin Classics.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Pevear, Richard</a> (2008). "<a data-type="jump-anchor" id="introduction">Introduction</a>". <a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://archive.org/details/warpeace00tols_1"><em>War and Peace</em></a>. Trans. Pevear; <a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Richard_Pevear_and_Larissa_Volokhonsky">Volokhonsky, Larissa</a>. New York: Vintage Books. pp.&nbsp;VIII–IX. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-4000-7998-8">978-1-4000-7998-8</a>.</p><p></p></li><li><p><a data-type="jump-anchor" id="knowles">Knowles</a>, A. V. <em>Leo Tolstoy</em>, Routledge 1997.</p><p></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" class="external text" href="https://books.google.com/books?id=c4HEAN-ti1MC&amp;pg=PR10">"Introduction?"</a>. <a data-type="jump-anchor" id="war"><em>War and Peace</em></a>. Wordsworth Editions. 1993. <a target="_blank" rel="noopener noreferrer nofollow" class="mw-redirect" href="https://en.wikipedia.org/wiki/ISBN_(identifier)">ISBN</a>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Special:BookSources/978-1-85326-062-9">978-1-85326-062-9</a>. Retrieved 2009-03-24.</p></li></ol>`,
);
}

0 comments on commit c93ae27

Please sign in to comment.