Skip to content

Commit

Permalink
fix(code): Fix Display Issues with Untitled Notes
Browse files Browse the repository at this point in the history
  • Loading branch information
@obenjiro @3y3
obenjiro authored and 3y3 committed Nov 8, 2024
1 parent 3036e6d commit a053f4c
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 89 deletions.
39 changes: 20 additions & 19 deletions src/scss/_note.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,32 @@
padding: 20px 20px 20px 64px;
border-radius: 10px;

.yfm-note-title {
font-weight: 700;
// First paragraph should show the icon regardless of title presence
> p:first-child {
&::before {
box-sizing: content-box;
display: block;
width: 24px;
height: 24px;
margin-top: -2px;
margin-left: -44px;
padding-right: 20px;
float: left;
}
}

& > p {
.yfm-note-title {
font-weight: 700;
margin: 0 0 10px;
}

&:first-child {
&::before {
box-sizing: content-box;
display: block;
width: 24px;
height: 24px;
margin-top: -2px;
margin-left: -44px;
padding-right: 20px;
float: left;
}
}

&:last-child {
margin-bottom: 0;
}
.yfm-note-content > p:first-child {
margin-top: 0;
}

.yfm-note-content > p:last-child {
margin-bottom: 0;
}

// @todo replace with variables

Expand Down
14 changes: 8 additions & 6 deletions src/transform/plugins/notes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,16 +108,18 @@ const index: MarkdownItPluginCb = (md, {lang, notesAutotitle, path: optPath, log
titleInline.children,
);

const insideTokens = [
newOpenToken,
titleOpen,
titleInline,
titleClose,
const insideTokens = [newOpenToken];
if (titleInline.content) {
insideTokens.push(titleOpen, titleInline, titleClose);
}

insideTokens.push(
contentOpen,
...tokens.slice(i + 3, closeTokenIdx),
contentClose,
newCloseToken,
];
);

tokens.splice(i, closeTokenIdx - i + 3, ...insideTokens);

i++;
Expand Down
39 changes: 39 additions & 0 deletions test/__snapshots__/notes.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,45 @@ exports[`Alerts should render nested notes 1`] = `
</div>
`;

exports[`Alerts should render note with empty string title 1`] = `
<div class="yfm-note yfm-accent-info"
note-type="info"
>
<div class="yfm-note-content">
<p>
Note content with empty string title
</p>
</div>
</div>
`;

exports[`Alerts should render note without title (notesAutotitle: false) 1`] = `
<div class="yfm-note yfm-accent-info"
note-type="info"
>
<div class="yfm-note-content">
<p>
Note content without title
</p>
</div>
</div>
`;

exports[`Alerts should render note without title (notesAutotitle: true) 1`] = `
<div class="yfm-note yfm-accent-info"
note-type="info"
>
<p class="yfm-note-title">
Примечание
</p>
<div class="yfm-note-content">
<p>
Note content without title
</p>
</div>
</div>
`;

exports[`Alerts should render siblings notes 1`] = `
<div class="yfm-note yfm-accent-info"
note-type="info"
Expand Down
128 changes: 65 additions & 63 deletions test/data/alerts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,69 +79,71 @@ const getTokens = (title: string) => {
tag: 'div',
type: 'yfm_note_open',
},
{
attrs: [['class', 'yfm-note-title']],
block: true,
children: null,
content: '',
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 1,
tag: 'p',
type: 'yfm_note_title_open',
},
{
attrs: null,
block: false,
children: title
? [
{
attrs: null,
block: false,
children: null,
content: title,
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 0,
tag: '',
type: 'text',
},
]
: [],
content: title,
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 0,
tag: '',
type: 'inline',
},
{
attrs: null,
block: true,
children: null,
content: '',
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: -1,
tag: 'p',
type: 'yfm_note_title_close',
},
...(title
? [
{
attrs: [['class', 'yfm-note-title']],
block: true,
children: null,
content: '',
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 1,
tag: 'p',
type: 'yfm_note_title_open',
},
{
attrs: null,
block: false,
children: [
{
attrs: null,
block: false,
children: null,
content: title,
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 0,
tag: '',
type: 'text',
},
],
content: title,
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: 0,
tag: '',
type: 'inline',
},
{
attrs: null,
block: true,
children: null,
content: '',
hidden: false,
info: '',
level: 0,
map: null,
markup: '',
meta: null,
nesting: -1,
tag: 'p',
type: 'yfm_note_title_close',
},
]
: []),
{
attrs: [['class', 'yfm-note-content']],
block: false,
Expand Down
42 changes: 41 additions & 1 deletion test/notes.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import transform from '../src/transform';
import {callPlugin, tokenize} from './utils';
import {base, customTitle, emptyTitle} from './data/alerts';

const html = (text: string) => {
const html = (text: string, notesAutotitle = true) => {
const {
result: {html},
} = transform(text, {
notesAutotitle,
plugins: [alerts],
});
return html;
Expand Down Expand Up @@ -150,4 +151,43 @@ describe('Alerts', () => {
`),
).toMatchSnapshot();
});

test('should render note without title (notesAutotitle: true)', () => {
expect(
html(dedent`
{% note info %}
Note content without title
{% endnote %}
`),
).toMatchSnapshot();
});

test('should render note without title (notesAutotitle: false)', () => {
expect(
html(
dedent`
{% note info %}
Note content without title
{% endnote %}
`,
false,
),
).toMatchSnapshot();
});

test('should render note with empty string title', () => {
expect(
html(dedent`
{% note info "" %}
Note content with empty string title
{% endnote %}
`),
).toMatchSnapshot();
});
});

0 comments on commit a053f4c

Please sign in to comment.