mirror of
https://github.com/docusealco/docuseal
synced 2026-11-04 06:42:32 -05:00
store list styles in dynamic document
This commit is contained in:
Alex Turchyn authored and 
Pete Matsyburka committed
1 parent
9e2590489b
commit
ed7109bfc6
4 files changed
+205
-198
No files matched your search
@@ -22,6 +22,12 @@
|
|||||||
v-if="shadow"
|
v-if="shadow"
|
||||||
:to="shadow"
|
:to="shadow"
|
||||||
>
|
>
|
||||||
|
<component
|
||||||
|
:is="'style'"
|
||||||
|
v-if="listsStyle"
|
||||||
|
>
|
||||||
|
{{ listsStyle }}
|
||||||
|
</component>
|
||||||
<DynamicSection
|
<DynamicSection
|
||||||
v-for="section in sections"
|
v-for="section in sections"
|
||||||
:ref="setSectionRefs"
|
:ref="setSectionRefs"
|
||||||
@@ -52,7 +58,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import DynamicSection from './dynamic_section.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'
|
import { buildVariablesSchema, mergeSchemaProperties } from './dynamic_variables_schema.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -112,6 +118,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
containerWidth: 1040,
|
containerWidth: 1040,
|
||||||
isMounted: false,
|
isMounted: false,
|
||||||
|
listsStyle: null,
|
||||||
sectionRefs: []
|
sectionRefs: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -186,6 +193,10 @@ export default {
|
|||||||
|
|
||||||
this.shadow.adoptedStyleSheets.push(dynamicStylesheet, tiptapStylesheet)
|
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.containerWidth = this.$refs.container.clientWidth
|
||||||
|
|
||||||
this.resizeObserver = new ResizeObserver(() => {
|
this.resizeObserver = new ResizeObserver(() => {
|
||||||
@@ -248,6 +259,8 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
onSectionUpdate (section, { editor }) {
|
onSectionUpdate (section, { editor }) {
|
||||||
|
this.ensureListsStyle(editor.view.dom)
|
||||||
|
|
||||||
clearTimeout(this.saveTimer)
|
clearTimeout(this.saveTimer)
|
||||||
|
|
||||||
this.saveTimer = setTimeout(async () => {
|
this.saveTimer = setTimeout(async () => {
|
||||||
@@ -256,6 +269,18 @@ export default {
|
|||||||
delete this.saveTimer
|
delete this.saveTimer
|
||||||
}, 1000)
|
}, 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 () {
|
updateVariablesSchema () {
|
||||||
this.document.variables_schema = buildVariablesSchema(this.bodyDom.body)
|
this.document.variables_schema = buildVariablesSchema(this.bodyDom.body)
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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+)$/
|
const NUMBERING_CLASS_REGEXP = /^(doc-num-\d+|doc-list-(?:disc|dash|decimal))-(\d+)$/
|
||||||
|
|
||||||
export function findNumbering (node) {
|
export function findNumbering (node) {
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
@import "tailwindcss/components";
|
@import "tailwindcss/components";
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
@import "dynamic_lists";
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
::before,
|
::before,
|
||||||
|
|||||||
Reference in new issue
Block a user