From ed7109bfc6b0923d86eb4ffa7f720a043f6d18ae Mon Sep 17 00:00:00 2001 From: Alex Turchyn Date: Mon, 28 Sep 2026 03:03:17 +0300 Subject: [PATCH] store list styles in dynamic document --- .../template_builder/dynamic_document.vue | 27 ++- .../template_builder/dynamic_editor.js | 179 ++++++++++++++++ .../template_builder/dynamic_lists.css | 196 ------------------ .../template_builder/dynamic_styles.scss | 1 - 4 files changed, 205 insertions(+), 198 deletions(-) delete mode 100644 app/javascript/template_builder/dynamic_lists.css diff --git a/app/javascript/template_builder/dynamic_document.vue b/app/javascript/template_builder/dynamic_document.vue index 5eff88816..b576999fb 100644 --- a/app/javascript/template_builder/dynamic_document.vue +++ b/app/javascript/template_builder/dynamic_document.vue @@ -22,6 +22,12 @@ v-if="shadow" :to="shadow" > + + {{ listsStyle }} + import { ref, computed } from 'vue' import DynamicSection from './dynamic_section.vue' -import { dynamicStylesheet, tiptapStylesheet } from './dynamic_editor.js' +import { dynamicStylesheet, tiptapStylesheet, listsCss } from './dynamic_editor.js' import { buildVariablesSchema, mergeSchemaProperties } from './dynamic_variables_schema.js' export default { @@ -112,6 +118,7 @@ export default { return { containerWidth: 1040, isMounted: false, + listsStyle: null, sectionRefs: [] } }, @@ -186,6 +193,10 @@ export default { this.shadow.adoptedStyleSheets.push(dynamicStylesheet, tiptapStylesheet) + this.listsStyle = this.bodyDom.querySelector('body > style[data-lists]')?.textContent || null + + this.ensureListsStyle(this.bodyDom) + this.containerWidth = this.$refs.container.clientWidth this.resizeObserver = new ResizeObserver(() => { @@ -248,6 +259,8 @@ export default { }) }, onSectionUpdate (section, { editor }) { + this.ensureListsStyle(editor.view.dom) + clearTimeout(this.saveTimer) this.saveTimer = setTimeout(async () => { @@ -256,6 +269,18 @@ export default { delete this.saveTimer }, 1000) }, + ensureListsStyle (root) { + if (this.listsStyle || !root.querySelector('[class*="doc-list-"]')) return + + const style = this.bodyDom.createElement('style') + + style.dataset.lists = '' + style.textContent = listsCss + + this.bodyDom.body.append(style) + + this.listsStyle = listsCss + }, updateVariablesSchema () { this.document.variables_schema = buildVariablesSchema(this.bodyDom.body) }, diff --git a/app/javascript/template_builder/dynamic_editor.js b/app/javascript/template_builder/dynamic_editor.js index df7f760a5..c1475fd64 100644 --- a/app/javascript/template_builder/dynamic_editor.js +++ b/app/javascript/template_builder/dynamic_editor.js @@ -626,6 +626,185 @@ const NumberingKeymap = Extension.create({ } }) +export const listsCss = `[class*="doc-list-"]::before { + display: inline-block; + min-width: 0.25in; + text-indent: 0; + text-align: left; +} + +.doc-list-disc-0, +.doc-list-dash-0, +.doc-list-decimal-0 { + margin-left: 0.5in !important; + text-indent: -0.25in !important; + counter-set: doc-list-1 0; +} + +.doc-list-disc-1, +.doc-list-dash-1, +.doc-list-decimal-1 { + margin-left: 0.75in !important; + text-indent: -0.25in !important; + counter-set: doc-list-2 0; +} + +.doc-list-disc-2, +.doc-list-dash-2, +.doc-list-decimal-2 { + margin-left: 1in !important; + text-indent: -0.25in !important; + counter-set: doc-list-3 0; +} + +.doc-list-disc-3, +.doc-list-dash-3, +.doc-list-decimal-3 { + margin-left: 1.25in !important; + text-indent: -0.25in !important; + counter-set: doc-list-4 0; +} + +.doc-list-disc-4, +.doc-list-dash-4, +.doc-list-decimal-4 { + margin-left: 1.5in !important; + text-indent: -0.25in !important; + counter-set: doc-list-5 0; +} + +.doc-list-disc-5, +.doc-list-dash-5, +.doc-list-decimal-5 { + margin-left: 1.75in !important; + text-indent: -0.25in !important; + counter-set: doc-list-6 0; +} + +.doc-list-disc-6, +.doc-list-dash-6, +.doc-list-decimal-6 { + margin-left: 2in !important; + text-indent: -0.25in !important; + counter-set: doc-list-7 0; +} + +.doc-list-disc-7, +.doc-list-dash-7, +.doc-list-decimal-7 { + margin-left: 2.25in !important; + text-indent: -0.25in !important; + counter-set: doc-list-8 0; +} + +.doc-list-disc-8, +.doc-list-dash-8, +.doc-list-decimal-8 { + margin-left: 2.5in !important; + text-indent: -0.25in !important; +} + +.doc-list-disc-0::before, +.doc-list-disc-3::before, +.doc-list-disc-6::before { + content: "•"; +} + +.doc-list-disc-1::before, +.doc-list-disc-4::before, +.doc-list-disc-7::before { + content: "◦"; +} + +.doc-list-disc-2::before, +.doc-list-disc-5::before, +.doc-list-disc-8::before { + content: "▪"; +} + +[class*="doc-list-dash-"]::before { + content: "–"; +} + +.doc-list-decimal-0 { + counter-increment: doc-list-0; +} + +.doc-list-decimal-1 { + counter-increment: doc-list-1; +} + +.doc-list-decimal-2 { + counter-increment: doc-list-2; +} + +.doc-list-decimal-3 { + counter-increment: doc-list-3; +} + +.doc-list-decimal-4 { + counter-increment: doc-list-4; +} + +.doc-list-decimal-5 { + counter-increment: doc-list-5; +} + +.doc-list-decimal-6 { + counter-increment: doc-list-6; +} + +.doc-list-decimal-7 { + counter-increment: doc-list-7; +} + +.doc-list-decimal-8 { + counter-increment: doc-list-8; +} + +.doc-list-decimal-0::before { + content: counter(doc-list-0) "."; +} + +.doc-list-decimal-1::before { + content: counter(doc-list-1, lower-alpha) "."; +} + +.doc-list-decimal-2::before { + content: counter(doc-list-2, lower-roman) "."; +} + +.doc-list-decimal-3::before { + content: counter(doc-list-3) "."; +} + +.doc-list-decimal-4::before { + content: counter(doc-list-4, lower-alpha) "."; +} + +.doc-list-decimal-5::before { + content: counter(doc-list-5, lower-roman) "."; +} + +.doc-list-decimal-6::before { + content: counter(doc-list-6) "."; +} + +.doc-list-decimal-7::before { + content: counter(doc-list-7, lower-alpha) "."; +} + +.doc-list-decimal-8::before { + content: counter(doc-list-8, lower-roman) "."; +} + +:not([class*="doc-list-"]) + .doc-list-decimal-0, +.doc-list-decimal-0:first-child, +.doc-list-disc-0 + .doc-list-decimal-0, +.doc-list-dash-0 + .doc-list-decimal-0 { + counter-set: doc-list-0 1 doc-list-1 0; +}` + const NUMBERING_CLASS_REGEXP = /^(doc-num-\d+|doc-list-(?:disc|dash|decimal))-(\d+)$/ export function findNumbering (node) { diff --git a/app/javascript/template_builder/dynamic_lists.css b/app/javascript/template_builder/dynamic_lists.css deleted file mode 100644 index a377bd7ab..000000000 --- a/app/javascript/template_builder/dynamic_lists.css +++ /dev/null @@ -1,196 +0,0 @@ -[class*="doc-list-"]::before { - display: inline-block; - min-width: 0.25in; - text-indent: 0; - text-align: left; -} - -[class*="doc-list-dash-"]::before { - content: "–"; -} - -.doc-list-disc-0, -.doc-list-dash-0, -.doc-list-decimal-0 { - margin-left: 0.5in !important; - text-indent: -0.25in !important; - counter-set: doc-list-1 0; -} - -.doc-list-disc-0::before { - content: "•"; -} - -.doc-list-decimal-0 { - counter-increment: doc-list-0; -} - -.doc-list-decimal-0::before { - content: counter(doc-list-0) "."; -} - -.doc-list-disc-1, -.doc-list-dash-1, -.doc-list-decimal-1 { - margin-left: 0.75in !important; - text-indent: -0.25in !important; - counter-set: doc-list-2 0; -} - -.doc-list-disc-1::before { - content: "◦"; -} - -.doc-list-decimal-1 { - counter-increment: doc-list-1; -} - -.doc-list-decimal-1::before { - content: counter(doc-list-1, lower-alpha) "."; -} - -.doc-list-disc-2, -.doc-list-dash-2, -.doc-list-decimal-2 { - margin-left: 1in !important; - text-indent: -0.25in !important; - counter-set: doc-list-3 0; -} - -.doc-list-disc-2::before { - content: "▪"; -} - -.doc-list-decimal-2 { - counter-increment: doc-list-2; -} - -.doc-list-decimal-2::before { - content: counter(doc-list-2, lower-roman) "."; -} - -.doc-list-disc-3, -.doc-list-dash-3, -.doc-list-decimal-3 { - margin-left: 1.25in !important; - text-indent: -0.25in !important; - counter-set: doc-list-4 0; -} - -.doc-list-disc-3::before { - content: "•"; -} - -.doc-list-decimal-3 { - counter-increment: doc-list-3; -} - -.doc-list-decimal-3::before { - content: counter(doc-list-3) "."; -} - -.doc-list-disc-4, -.doc-list-dash-4, -.doc-list-decimal-4 { - margin-left: 1.5in !important; - text-indent: -0.25in !important; - counter-set: doc-list-5 0; -} - -.doc-list-disc-4::before { - content: "◦"; -} - -.doc-list-decimal-4 { - counter-increment: doc-list-4; -} - -.doc-list-decimal-4::before { - content: counter(doc-list-4, lower-alpha) "."; -} - -.doc-list-disc-5, -.doc-list-dash-5, -.doc-list-decimal-5 { - margin-left: 1.75in !important; - text-indent: -0.25in !important; - counter-set: doc-list-6 0; -} - -.doc-list-disc-5::before { - content: "▪"; -} - -.doc-list-decimal-5 { - counter-increment: doc-list-5; -} - -.doc-list-decimal-5::before { - content: counter(doc-list-5, lower-roman) "."; -} - -.doc-list-disc-6, -.doc-list-dash-6, -.doc-list-decimal-6 { - margin-left: 2in !important; - text-indent: -0.25in !important; - counter-set: doc-list-7 0; -} - -.doc-list-disc-6::before { - content: "•"; -} - -.doc-list-decimal-6 { - counter-increment: doc-list-6; -} - -.doc-list-decimal-6::before { - content: counter(doc-list-6) "."; -} - -.doc-list-disc-7, -.doc-list-dash-7, -.doc-list-decimal-7 { - margin-left: 2.25in !important; - text-indent: -0.25in !important; - counter-set: doc-list-8 0; -} - -.doc-list-disc-7::before { - content: "◦"; -} - -.doc-list-decimal-7 { - counter-increment: doc-list-7; -} - -.doc-list-decimal-7::before { - content: counter(doc-list-7, lower-alpha) "."; -} - -.doc-list-disc-8, -.doc-list-dash-8, -.doc-list-decimal-8 { - margin-left: 2.5in !important; - text-indent: -0.25in !important; -} - -.doc-list-disc-8::before { - content: "▪"; -} - -.doc-list-decimal-8 { - counter-increment: doc-list-8; -} - -.doc-list-decimal-8::before { - content: counter(doc-list-8, lower-roman) "."; -} - -:not([class*="doc-list-"]) + .doc-list-decimal-0, -.doc-list-decimal-0:first-child, -.doc-list-disc-0 + .doc-list-decimal-0, -.doc-list-dash-0 + .doc-list-decimal-0 { - counter-set: doc-list-0 1 doc-list-1 0; -} diff --git a/app/javascript/template_builder/dynamic_styles.scss b/app/javascript/template_builder/dynamic_styles.scss index 252d0926d..0fc2c96d0 100644 --- a/app/javascript/template_builder/dynamic_styles.scss +++ b/app/javascript/template_builder/dynamic_styles.scss @@ -2,7 +2,6 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; -@import "dynamic_lists"; *, ::before,