scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-11 00:41:41 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #8815 from andrej-scinote/aj_SCI_12192

Browse source 
[DRAFT] Add nested lists for TinyMCE fields [SCI-11979]
This commit is contained in:
andrej-scinote 2025-10-27 09:46:41 +01:00 • committed by GitHub
commit c37bca24af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 59 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.tailwind.css
View file

@ -5,6 +5,7 @@
@import "tailwind/radio";
@import "tailwind/loader.css";
@import "tailwind/tags.css";
@import "tailwind/lists.css";
@tailwind base;
@tailwind components;

14
app/assets/stylesheets/tailwind/lists.css Normal file
View file

@ -0,0 +1,14 @@
@layer components {
.numerical-nested-list ol:not([style*="list-style-type"]) {
counter-reset: item;
}
.numerical-nested-list ol:not([style*="list-style-type"]) li {
@apply block
}
.numerical-nested-list ol:not([style*="list-style-type"]) li::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
}

13
app/assets/stylesheets/tiny_mce.scss
View file

@ -21,6 +21,19 @@
margin: 0;
padding: 0;
}
ol:not([style*="list-style-type"]) {
counter-reset: item;
}
ol:not([style*="list-style-type"]) li {
display: block;
}
ol:not([style*="list-style-type"]) li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}
}
.mce-tinymce {

16
app/javascript/packs/tiny_mce.js vendored
View file

@ -42,7 +42,21 @@ import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.cs
const contentPStyle = `p { margin: 0; padding: 0;}`;
const contentBodyStyle = `body { font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif }`;
const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle].map((s) => s.toString()).join('\n');
const contentListStyle = `
ol:not([style*="list-style-type"]) {
counter-reset: item;
}
ol:not([style*="list-style-type"]) li {
display: block;
}
ol:not([style*="list-style-type"]) li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}
`;
const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle, contentListStyle].map((s) => s.toString()).join('\n');
// Optional pre-initialization method
if (typeof(window.preTinyMceInit) === 'function') {

2
app/javascript/vue/shared/datatable/modals/description.vue
View file

@ -18,7 +18,7 @@
textareaId="descriptionModelInput"
></TinymceEditor>
</div>
<span v-else v-html="description"></span>
<span v-else v-html="description" class="numerical-nested-list"></span>
</div>
<div class="modal-footer">
<button v-if="editMode" type="button" @click="cancelEdit" class="btn btn-secondary">{{ i18n.t('general.cancel') }}</button>

16
app/javascript/vue/shared/tinymce_editor.vue
View file

@ -48,7 +48,21 @@ import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.cs
const contentPStyle = 'p { margin: 0; padding: 0;}';
const contentBodyStyle = 'body { font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif }';
const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle].map((s) => s.toString()).join('\n');
const contentListStyle = `
ol:not([style*="list-style-type"]) {
counter-reset: item;
}
ol:not([style*="list-style-type"]) li {
display: block;
}
ol:not([style*="list-style-type"]) li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}
`;
const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle, contentListStyle].map((s) => s.toString()).join('\n');
export default {
name: 'TinemcyEditor',