mirror of
https://github.com/docusealco/docuseal
synced 2026-11-04 14:42:32 -05:00
1866 lines
50 KiB
JavaScript
1866 lines
50 KiB
JavaScript
import { Editor, Extension, Node, Mark, ResizableNodeView } from '@tiptap/core'
|
||
import { Plugin, PluginKey, NodeSelection } from '@tiptap/pm/state'
|
||
import { TableMap, CellSelection, tableEditing, findTable, selectedRect, addRowAfter, addRowBefore, addColumnAfter, addColumnBefore, deleteRow, deleteColumn, mergeCells, splitCell } from '@tiptap/pm/tables'
|
||
import { Decoration, DecorationSet } from '@tiptap/pm/view'
|
||
import Document from '@tiptap/extension-document'
|
||
import Text from '@tiptap/extension-text'
|
||
import HardBreak from '@tiptap/extension-hard-break'
|
||
import History from '@tiptap/extension-history'
|
||
import Gapcursor from '@tiptap/extension-gapcursor'
|
||
import Dropcursor from '@tiptap/extension-dropcursor'
|
||
import { createApp, reactive } from 'vue'
|
||
import DynamicArea from './dynamic_area.vue'
|
||
import styles from './dynamic_styles.scss'
|
||
|
||
export const dynamicStylesheet = new CSSStyleSheet()
|
||
|
||
dynamicStylesheet.replaceSync(styles[0][1])
|
||
|
||
export const tiptapStylesheet = new CSSStyleSheet()
|
||
|
||
tiptapStylesheet.replaceSync(
|
||
`.ProseMirror {
|
||
word-wrap: break-word;
|
||
white-space: pre-wrap;
|
||
white-space: break-spaces;
|
||
-webkit-font-variant-ligatures: none;
|
||
font-variant-ligatures: none;
|
||
font-feature-settings: "liga" 0;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
min-height: inherit;
|
||
}
|
||
|
||
.ProseMirror > article {
|
||
margin-bottom: auto;
|
||
}
|
||
|
||
.ProseMirror [contenteditable="false"] {
|
||
white-space: normal;
|
||
}
|
||
|
||
.ProseMirror [contenteditable="false"] [contenteditable="true"] {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.ProseMirror pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
img.ProseMirror-separator {
|
||
display: inline !important;
|
||
border: none !important;
|
||
margin: 0 !important;
|
||
width: 0 !important;
|
||
height: 0 !important;
|
||
}
|
||
|
||
.ProseMirror-gapcursor {
|
||
display: none;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
margin: 0;
|
||
}
|
||
|
||
.ProseMirror-gapcursor:after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: -2px;
|
||
width: 20px;
|
||
border-top: 1px solid black;
|
||
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
|
||
}
|
||
|
||
@keyframes ProseMirror-cursor-blink {
|
||
to {
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
|
||
.ProseMirror-hideselection *::selection {
|
||
background: transparent;
|
||
}
|
||
|
||
.ProseMirror-hideselection *::-moz-selection {
|
||
background: transparent;
|
||
}
|
||
|
||
.ProseMirror-hideselection * {
|
||
caret-color: transparent;
|
||
}
|
||
|
||
.ProseMirror-focused .ProseMirror-gapcursor {
|
||
display: block;
|
||
}
|
||
[data-resize-container][data-node="image"] {
|
||
display: inline-flex !important;
|
||
max-width: 100%;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
[data-resize-container][data-node="image"] [data-resize-wrapper] {
|
||
max-width: 100%;
|
||
text-indent: 0;
|
||
}
|
||
|
||
[data-resize-handle] {
|
||
--handle-size: calc(10px / var(--zoom));
|
||
display: none;
|
||
width: var(--handle-size);
|
||
height: var(--handle-size);
|
||
background: #ffffff;
|
||
border: calc(2px / var(--zoom)) solid #3b82f6;
|
||
border-radius: 2px;
|
||
z-index: 1;
|
||
}
|
||
|
||
@media (pointer: coarse) {
|
||
[data-resize-handle]::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: calc(-8px / var(--zoom));
|
||
}
|
||
}
|
||
|
||
.ProseMirror-selectednode [data-resize-wrapper] {
|
||
outline: 2px solid #3b82f6;
|
||
}
|
||
|
||
.ProseMirror-selectednode [data-resize-handle] {
|
||
display: block;
|
||
}
|
||
|
||
[data-resize-handle="top-left"] { margin: calc(var(--handle-size) / -2) 0 0 calc(var(--handle-size) / -2); cursor: nwse-resize; }
|
||
[data-resize-handle="top-right"] { margin: calc(var(--handle-size) / -2) calc(var(--handle-size) / -2) 0 0; cursor: nesw-resize; }
|
||
[data-resize-handle="bottom-left"] { margin: 0 0 calc(var(--handle-size) / -2) calc(var(--handle-size) / -2); cursor: nesw-resize; }
|
||
[data-resize-handle="bottom-right"] { margin: 0 calc(var(--handle-size) / -2) calc(var(--handle-size) / -2) 0; cursor: nwse-resize; }
|
||
|
||
/* iOS 27 WebKit drops thin collapsed borders when zoomed out */
|
||
[data-zoomed-out] .ProseMirror table {
|
||
border-collapse: separate !important;
|
||
border-spacing: 0 !important;
|
||
}
|
||
|
||
.ProseMirror .selectedCell {
|
||
position: relative;
|
||
}
|
||
|
||
.ProseMirror .selectedCell::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(59, 130, 246, 0.15);
|
||
pointer-events: none;
|
||
}
|
||
|
||
dynamic-variable {
|
||
background-color: #fef3c7;
|
||
word-break: break-all;
|
||
overflow-wrap: anywhere;
|
||
}`)
|
||
|
||
const DROP_ATTRS = [
|
||
'srcdoc', 'xlink:href', 'srcset', 'action', 'formaction', 'poster',
|
||
'background', 'data', 'cite', 'ping', 'longdesc', 'manifest', 'profile'
|
||
]
|
||
|
||
const SAFE_URL_REGEXP = /^(?:https?:\/\/|data:image\/|blob:|mailto:|tel:|\{|#)/i
|
||
|
||
function isSafeAttr (name, value) {
|
||
const lowerName = name.toLowerCase()
|
||
|
||
if (lowerName.startsWith('on') || DROP_ATTRS.includes(lowerName)) return false
|
||
if ((lowerName === 'href' || lowerName === 'src') && !SAFE_URL_REGEXP.test(value.trim())) return false
|
||
|
||
return true
|
||
}
|
||
|
||
function collectDomAttrs (dom) {
|
||
const attrs = {}
|
||
|
||
for (let i = 0; i < dom.attributes.length; i++) {
|
||
const { name, value } = dom.attributes[i]
|
||
|
||
if (isSafeAttr(name, value)) attrs[name] = value
|
||
}
|
||
|
||
return { htmlAttrs: attrs }
|
||
}
|
||
|
||
function collectSpanDomAttrs (dom) {
|
||
const result = collectDomAttrs(dom)
|
||
|
||
if (result.htmlAttrs.style) {
|
||
const temp = document.createElement('span')
|
||
|
||
temp.style.cssText = result.htmlAttrs.style
|
||
|
||
if (['bold', '700'].includes(temp.style.fontWeight)) {
|
||
temp.style.removeProperty('font-weight')
|
||
}
|
||
|
||
if (temp.style.fontStyle === 'italic') {
|
||
temp.style.removeProperty('font-style')
|
||
}
|
||
|
||
if (['underline', 'line-through'].includes(temp.style.textDecoration)) {
|
||
temp.style.removeProperty('text-decoration')
|
||
}
|
||
|
||
if (temp.style.cssText) {
|
||
result.htmlAttrs.style = temp.style.cssText
|
||
} else {
|
||
delete result.htmlAttrs.style
|
||
}
|
||
}
|
||
|
||
return result
|
||
}
|
||
|
||
function createBlockNode (name, tag, content, extra = {}) {
|
||
return Node.create({
|
||
name,
|
||
group: 'block',
|
||
content: content || 'block+',
|
||
...extra,
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [{ tag, getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return [tag, node.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
}
|
||
|
||
const CustomParagraph = Node.create({
|
||
name: 'paragraph',
|
||
group: 'block',
|
||
content: 'inline*',
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'p', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return ['p', node.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const CustomHeading = Node.create({
|
||
name: 'heading',
|
||
group: 'block',
|
||
content: 'inline*',
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} },
|
||
level: { default: 1 }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [1, 2, 3, 4, 5, 6].map((level) => ({
|
||
tag: `h${level}`,
|
||
getAttrs: (dom) => ({ ...collectDomAttrs(dom), level })
|
||
}))
|
||
},
|
||
renderHTML ({ node }) {
|
||
return [`h${node.attrs.level}`, node.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const SectionNode = createBlockNode('section', 'section')
|
||
const ArticleNode = createBlockNode('article', 'article', null, { isolating: true })
|
||
const HeaderNode = createBlockNode('header', 'header', null, { isolating: true })
|
||
const FooterNode = createBlockNode('footer', 'footer', null, { isolating: true })
|
||
const DivNode = createBlockNode('div', 'div')
|
||
const BlockquoteNode = createBlockNode('blockquote', 'blockquote')
|
||
const PreNode = createBlockNode('pre', 'pre')
|
||
const OrderedListNode = createBlockNode('orderedList', 'ol', '(listItem | block)+')
|
||
const BulletListNode = createBlockNode('bulletList', 'ul', '(listItem | block)+')
|
||
|
||
const ListItemNode = Node.create({
|
||
name: 'listItem',
|
||
content: 'block+',
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'li', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return ['li', node.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
function collectCellDomAttrs (dom) {
|
||
const { htmlAttrs } = collectDomAttrs(dom)
|
||
const colspan = parseInt(htmlAttrs.colspan) || 1
|
||
const rowspan = parseInt(htmlAttrs.rowspan) || 1
|
||
|
||
delete htmlAttrs.colspan
|
||
delete htmlAttrs.rowspan
|
||
|
||
return { htmlAttrs, colspan, rowspan }
|
||
}
|
||
|
||
function renderCellAttrs (node) {
|
||
const attrs = { ...node.attrs.htmlAttrs }
|
||
|
||
if (node.attrs.colspan > 1) attrs.colspan = node.attrs.colspan
|
||
if (node.attrs.rowspan > 1) attrs.rowspan = node.attrs.rowspan
|
||
|
||
return attrs
|
||
}
|
||
|
||
function isRemovableHiddenCell (dom) {
|
||
const isHidden = (cell) => cell.style.display === 'none'
|
||
|
||
return isHidden(dom) && [...dom.parentElement.children].some((cell) => !isHidden(cell))
|
||
}
|
||
|
||
function createTableCellNode (name, tag, tableRole) {
|
||
return Node.create({
|
||
name,
|
||
tableRole,
|
||
content: 'block*',
|
||
isolating: true,
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} },
|
||
colspan: { default: 1 },
|
||
rowspan: { default: 1 },
|
||
colwidth: { default: null }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [
|
||
{ tag, priority: 60, ignore: true, getAttrs: (dom) => isRemovableHiddenCell(dom) ? null : false },
|
||
{ tag, getAttrs: collectCellDomAttrs }
|
||
]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return [tag, renderCellAttrs(node), 0]
|
||
}
|
||
})
|
||
}
|
||
|
||
const TableNode = Node.create({
|
||
name: 'table',
|
||
group: 'block',
|
||
tableRole: 'table',
|
||
content: 'tableRow+',
|
||
isolating: true,
|
||
addAttributes () {
|
||
return {
|
||
htmlAttrs: { default: {} },
|
||
colgroupAttrs: { default: null },
|
||
cols: { default: [] }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [
|
||
{
|
||
tag: 'table',
|
||
getAttrs (dom) {
|
||
const colgroup = dom.querySelector(':scope > colgroup')
|
||
|
||
return {
|
||
...collectDomAttrs(dom),
|
||
colgroupAttrs: colgroup ? collectDomAttrs(colgroup).htmlAttrs : null,
|
||
cols: colgroup ? [...colgroup.querySelectorAll(':scope > col')].map((col) => collectDomAttrs(col).htmlAttrs) : []
|
||
}
|
||
}
|
||
},
|
||
{ tag: 'colgroup', ignore: true }
|
||
]
|
||
},
|
||
renderHTML ({ node }) {
|
||
const { htmlAttrs, colgroupAttrs, cols } = node.attrs
|
||
|
||
if (colgroupAttrs || cols.length) {
|
||
return ['table', htmlAttrs, ['colgroup', colgroupAttrs || {}, ...cols.map((col) => ['col', col])], ['tbody', 0]]
|
||
}
|
||
|
||
return ['table', htmlAttrs, ['tbody', 0]]
|
||
}
|
||
})
|
||
|
||
const TableRow = Node.create({
|
||
name: 'tableRow',
|
||
tableRole: 'row',
|
||
content: '(tableCell | tableHeader)+',
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'tr', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return ['tr', node.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const TableCell = createTableCellNode('tableCell', 'td', 'cell')
|
||
const TableHeader = createTableCellNode('tableHeader', 'th', 'header_cell')
|
||
|
||
const ImageNode = Node.create({
|
||
name: 'image',
|
||
inline: true,
|
||
group: 'inline',
|
||
draggable: true,
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'img', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return ['img', node.attrs.htmlAttrs]
|
||
}
|
||
})
|
||
|
||
const CustomBold = Mark.create({
|
||
name: 'bold',
|
||
parseHTML () {
|
||
return [{ tag: 'strong' }, { tag: 'b' }, { style: 'font-weight=bold' }, { style: 'font-weight=700' }]
|
||
},
|
||
renderHTML () {
|
||
return ['strong', 0]
|
||
},
|
||
addCommands () {
|
||
return {
|
||
toggleBold: () => ({ commands }) => commands.toggleMark(this.name)
|
||
}
|
||
},
|
||
addKeyboardShortcuts () {
|
||
return {
|
||
'Mod-b': () => this.editor.commands.toggleBold()
|
||
}
|
||
}
|
||
})
|
||
|
||
const CustomItalic = Mark.create({
|
||
name: 'italic',
|
||
parseHTML () {
|
||
return [{ tag: 'em' }, { tag: 'i' }, { style: 'font-style=italic' }]
|
||
},
|
||
renderHTML () {
|
||
return ['em', 0]
|
||
},
|
||
addCommands () {
|
||
return {
|
||
toggleItalic: () => ({ commands }) => commands.toggleMark(this.name)
|
||
}
|
||
},
|
||
addKeyboardShortcuts () {
|
||
return {
|
||
'Mod-i': () => this.editor.commands.toggleItalic()
|
||
}
|
||
}
|
||
})
|
||
|
||
const CustomUnderline = Mark.create({
|
||
name: 'underline',
|
||
parseHTML () {
|
||
return [{ tag: 'u' }, { style: 'text-decoration=underline' }]
|
||
},
|
||
renderHTML () {
|
||
return ['u', 0]
|
||
},
|
||
addCommands () {
|
||
return {
|
||
toggleUnderline: () => ({ commands }) => commands.toggleMark(this.name)
|
||
}
|
||
},
|
||
addKeyboardShortcuts () {
|
||
return {
|
||
'Mod-u': () => this.editor.commands.toggleUnderline()
|
||
}
|
||
}
|
||
})
|
||
|
||
const CustomStrike = Mark.create({
|
||
name: 'strike',
|
||
parseHTML () {
|
||
return [{ tag: 's' }, { tag: 'del' }, { tag: 'strike' }, { style: 'text-decoration=line-through' }]
|
||
},
|
||
renderHTML () {
|
||
return ['s', 0]
|
||
},
|
||
addCommands () {
|
||
return {
|
||
toggleStrike: () => ({ commands }) => commands.toggleMark(this.name)
|
||
}
|
||
},
|
||
addKeyboardShortcuts () {
|
||
return {
|
||
'Mod-Shift-s': () => this.editor.commands.toggleStrike()
|
||
}
|
||
}
|
||
})
|
||
|
||
const EmptySpanNode = Node.create({
|
||
name: 'emptySpan',
|
||
inline: true,
|
||
group: 'inline',
|
||
atom: true,
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{
|
||
tag: 'span',
|
||
priority: 60,
|
||
getAttrs (dom) {
|
||
if (dom.childNodes.length === 0 && dom.attributes.length > 0) {
|
||
return collectDomAttrs(dom)
|
||
}
|
||
|
||
return false
|
||
}
|
||
}]
|
||
},
|
||
renderHTML ({ node }) {
|
||
return ['span', node.attrs.htmlAttrs]
|
||
}
|
||
})
|
||
|
||
const SpanMark = Mark.create({
|
||
name: 'span',
|
||
excludes: '',
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'span', getAttrs: collectSpanDomAttrs }]
|
||
},
|
||
renderHTML ({ mark }) {
|
||
return ['span', mark.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const LayoutSpanMark = SpanMark.extend({
|
||
name: 'layoutSpan',
|
||
parseHTML () {
|
||
return [{
|
||
tag: 'span',
|
||
priority: 55,
|
||
getAttrs (dom) {
|
||
if (['left', 'right'].includes(dom.style.float) || ['inline-block', 'block'].includes(dom.style.display)) {
|
||
return collectSpanDomAttrs(dom)
|
||
}
|
||
|
||
return false
|
||
}
|
||
}]
|
||
}
|
||
})
|
||
|
||
const LinkMark = Mark.create({
|
||
name: 'link',
|
||
excludes: '',
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'a', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ mark }) {
|
||
return ['a', mark.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const SubscriptMark = Mark.create({
|
||
name: 'subscript',
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'sub', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ mark }) {
|
||
return ['sub', mark.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const SuperscriptMark = Mark.create({
|
||
name: 'superscript',
|
||
addAttributes () {
|
||
return { htmlAttrs: { default: {} } }
|
||
},
|
||
parseHTML () {
|
||
return [{ tag: 'sup', getAttrs: collectDomAttrs }]
|
||
},
|
||
renderHTML ({ mark }) {
|
||
return ['sup', mark.attrs.htmlAttrs, 0]
|
||
}
|
||
})
|
||
|
||
const TabHandler = Extension.create({
|
||
name: 'tabHandler',
|
||
addKeyboardShortcuts () {
|
||
return {
|
||
Tab: () => {
|
||
this.editor.commands.insertContent('\t')
|
||
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
const NumberingKeymap = Extension.create({
|
||
name: 'numberingKeymap',
|
||
priority: 110,
|
||
addKeyboardShortcuts () {
|
||
const numberingAtCursor = () => {
|
||
const { empty, $from } = this.editor.state.selection
|
||
|
||
return empty && $from.parentOffset === 0 && !!findNumbering($from.parent)
|
||
}
|
||
|
||
return {
|
||
Tab: () => {
|
||
const { empty, $from } = this.editor.state.selection
|
||
|
||
return (!empty || $from.parentOffset === 0) && this.editor.commands.shiftNumberingLevel(1)
|
||
},
|
||
'Shift-Tab': () => this.editor.commands.shiftNumberingLevel(-1),
|
||
Enter: () => numberingAtCursor() && !this.editor.state.selection.$from.parent.content.size && this.editor.commands.unsetNumbering(),
|
||
Backspace: () => numberingAtCursor() && this.editor.commands.unsetNumbering()
|
||
}
|
||
}
|
||
})
|
||
|
||
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;
|
||
}
|
||
|
||
[class*="doc-list-"]:has(+ [class*="doc-list-"]) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
[class*="doc-list-"] + [class*="doc-list-"] {
|
||
margin-top: 0 !important;
|
||
}`
|
||
|
||
const NUMBERING_CLASS_REGEXP = /^(doc-num-\d+|doc-list-(?:disc|dash|decimal))-(\d+)$/
|
||
|
||
export function findNumbering (node) {
|
||
for (const className of (node.attrs.htmlAttrs?.class || '').split(' ')) {
|
||
const match = className.match(NUMBERING_CLASS_REGEXP)
|
||
|
||
if (match) return { prefix: match[1], level: parseInt(match[2]) }
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
function withNumberingClass (htmlAttrs, className) {
|
||
const classNames = (htmlAttrs.class || '').split(' ').filter(Boolean)
|
||
const index = classNames.findIndex((name) => NUMBERING_CLASS_REGEXP.test(name))
|
||
|
||
if (index === -1) {
|
||
classNames.push(className)
|
||
} else {
|
||
classNames[index] = className
|
||
}
|
||
|
||
const attrs = { ...htmlAttrs, class: classNames.filter(Boolean).join(' ') }
|
||
|
||
if (!attrs.class) delete attrs.class
|
||
|
||
return attrs
|
||
}
|
||
|
||
function selectedTextblocks (state) {
|
||
const blocks = []
|
||
|
||
state.selection.ranges.forEach(({ $from, $to }) => state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
|
||
if (!node.isTextblock) return
|
||
|
||
blocks.push({ node, pos, numbering: findNumbering(node) })
|
||
|
||
return false
|
||
}))
|
||
|
||
return blocks
|
||
}
|
||
|
||
export function numberingListStyle (view, pos) {
|
||
const { content } = getComputedStyle(view.nodeDOM(pos), '::before')
|
||
|
||
if (content.includes('counter(')) return 'decimal'
|
||
|
||
return /^"[–-]/.test(content) ? 'dash' : 'disc'
|
||
}
|
||
|
||
function hasNumberingLevel (view, { prefix }, level) {
|
||
if (prefix.startsWith('doc-list-')) return level >= 0 && level <= 8
|
||
|
||
const selector = `p.${prefix}-${level}`
|
||
|
||
return [...view.dom.getRootNode().styleSheets].some((sheet) => [...sheet.cssRules].some((rule) => rule.selectorText === selector))
|
||
}
|
||
|
||
function updateStyle (style, property, value) {
|
||
const el = document.createElement('span')
|
||
|
||
el.style.cssText = style || ''
|
||
|
||
if (value) {
|
||
el.style.setProperty(property, value)
|
||
} else {
|
||
el.style.removeProperty(property)
|
||
}
|
||
|
||
return el.style.cssText
|
||
}
|
||
|
||
function withStyle (htmlAttrs, property, value) {
|
||
const style = updateStyle(htmlAttrs.style, property, value)
|
||
const attrs = { ...htmlAttrs, style }
|
||
|
||
if (!style) delete attrs.style
|
||
|
||
return attrs
|
||
}
|
||
|
||
const Formatting = Extension.create({
|
||
name: 'formatting',
|
||
addCommands () {
|
||
return {
|
||
setSpanStyle: (property, value) => ({ state, tr, dispatch }) => {
|
||
const { empty, ranges } = state.selection
|
||
const type = state.schema.marks.span
|
||
|
||
if (empty) return false
|
||
|
||
if (dispatch) {
|
||
ranges.forEach(({ $from: { pos: from }, $to: { pos: to } }) => state.doc.nodesBetween(from, to, (node, pos) => {
|
||
if (!node.isInline) return
|
||
|
||
const start = Math.max(pos, from)
|
||
const end = Math.min(pos + node.nodeSize, to)
|
||
const spans = node.marks.filter((mark) => mark.type === type)
|
||
const hasProperty = (mark) => {
|
||
const el = document.createElement('span')
|
||
|
||
el.style.cssText = mark.attrs.htmlAttrs.style || ''
|
||
|
||
return !!el.style.getPropertyValue(property)
|
||
}
|
||
|
||
const updated = spans.map((mark, index) => {
|
||
let htmlAttrs = hasProperty(mark) ? withStyle(mark.attrs.htmlAttrs, property, null) : mark.attrs.htmlAttrs
|
||
|
||
if (value && index === spans.length - 1) {
|
||
htmlAttrs = withStyle(htmlAttrs, property, value)
|
||
}
|
||
|
||
return htmlAttrs
|
||
})
|
||
|
||
if (value && !spans.length) {
|
||
updated.push({ style: `${property}: ${value}` })
|
||
}
|
||
|
||
if (updated.length === spans.length && updated.every((htmlAttrs, index) => htmlAttrs === spans[index].attrs.htmlAttrs)) return
|
||
|
||
tr.removeMark(start, end, type)
|
||
|
||
updated.forEach((htmlAttrs) => tr.addMark(start, end, type.create({ htmlAttrs })))
|
||
}))
|
||
}
|
||
|
||
return true
|
||
},
|
||
setBlockStyle: (property, value) => ({ state, tr, dispatch }) => {
|
||
if (dispatch) {
|
||
state.selection.ranges.forEach(({ $from, $to }) => state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
|
||
if (!node.isTextblock) return
|
||
|
||
tr.setNodeMarkup(pos, null, { ...node.attrs, htmlAttrs: withStyle(node.attrs.htmlAttrs, property, value) })
|
||
|
||
return false
|
||
}))
|
||
}
|
||
|
||
return true
|
||
},
|
||
shiftNumberingLevel: (delta) => ({ state, tr, dispatch, view }) => {
|
||
if (!findNumbering(state.selection.$from.parent)) return false
|
||
|
||
const blocks = selectedTextblocks(state).filter(({ numbering }) => numbering)
|
||
|
||
if (dispatch && blocks.every(({ numbering }) => hasNumberingLevel(view, numbering, numbering.level + delta))) {
|
||
blocks.forEach(({ node, pos, numbering }) => {
|
||
tr.setNodeMarkup(pos, null, { ...node.attrs, htmlAttrs: withNumberingClass(node.attrs.htmlAttrs, `${numbering.prefix}-${numbering.level + delta}`) })
|
||
})
|
||
}
|
||
|
||
return true
|
||
},
|
||
setListMarkerStyle: (property, value) => ({ state, tr, dispatch }) => {
|
||
const from = Math.min(...state.selection.ranges.map(({ $from }) => $from.pos))
|
||
const to = Math.max(...state.selection.ranges.map(({ $to }) => $to.pos))
|
||
const blocks = selectedTextblocks(state).filter(({ node, pos, numbering }) => numbering && from <= pos + 1 && to >= pos + node.nodeSize - 1)
|
||
|
||
if (!blocks.length) return false
|
||
|
||
if (dispatch) {
|
||
blocks.forEach(({ node, pos }) => tr.setNodeMarkup(pos, null, { ...node.attrs, htmlAttrs: withStyle(node.attrs.htmlAttrs, property, value) }))
|
||
}
|
||
|
||
return true
|
||
},
|
||
unsetNumbering: () => ({ state, tr, dispatch }) => {
|
||
const blocks = selectedTextblocks(state).filter(({ numbering }) => numbering)
|
||
|
||
if (!blocks.length) return false
|
||
|
||
if (dispatch) {
|
||
blocks.forEach(({ node, pos }) => tr.setNodeMarkup(pos, null, { ...node.attrs, htmlAttrs: withNumberingClass(node.attrs.htmlAttrs, null) }))
|
||
}
|
||
|
||
return true
|
||
},
|
||
toggleList: (listStyle) => ({ state, tr, dispatch, view, commands }) => {
|
||
const { $from } = state.selection
|
||
|
||
if (findNumbering($from.parent) && numberingListStyle(view, $from.before()) === listStyle) {
|
||
return commands.unsetNumbering()
|
||
}
|
||
|
||
if (dispatch) {
|
||
const blocks = selectedTextblocks(state)
|
||
const $before = state.doc.resolve(blocks[0].pos)
|
||
const $after = state.doc.resolve(blocks.at(-1).pos + blocks.at(-1).node.nodeSize)
|
||
const adjacent = [[$before.nodeBefore, $before.pos - $before.nodeBefore?.nodeSize], [$after.nodeAfter, $after.pos]]
|
||
.map(([node, pos]) => node && findNumbering(node) && numberingListStyle(view, pos) === listStyle && findNumbering(node).prefix)
|
||
.find(Boolean)
|
||
|
||
blocks.forEach(({ node, pos, numbering }) => {
|
||
const className = numbering ? `doc-list-${listStyle}-${numbering.level}` : `${adjacent || `doc-list-${listStyle}`}-0`
|
||
|
||
tr.setNodeMarkup(pos, null, { ...node.attrs, htmlAttrs: withNumberingClass(node.attrs.htmlAttrs, className) })
|
||
})
|
||
}
|
||
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
function deleteTableNode (tr, table) {
|
||
const $table = tr.doc.resolve(table.pos)
|
||
|
||
if ($table.parent.childCount === 1) {
|
||
tr.replaceWith(table.pos, table.pos + table.node.nodeSize, tr.doc.type.schema.nodes.paragraph.create())
|
||
} else {
|
||
tr.delete(table.pos, table.pos + table.node.nodeSize)
|
||
}
|
||
}
|
||
|
||
export function isRegularTable (table) {
|
||
return !TableMap.get(table).problems
|
||
}
|
||
|
||
function findEditableTable (state) {
|
||
const table = findTable(state.selection.$head)
|
||
|
||
return table && isRegularTable(table.node) ? table : null
|
||
}
|
||
|
||
function tableCellNodes (table) {
|
||
const cells = new Set()
|
||
|
||
table.descendants((node) => {
|
||
if (node.type.spec.tableRole === 'cell' || node.type.spec.tableRole === 'header_cell') {
|
||
cells.add(node)
|
||
|
||
return false
|
||
}
|
||
})
|
||
|
||
return cells
|
||
}
|
||
|
||
function styleNewCells (tr, existingCells) {
|
||
const table = findTable(tr.selection.$head)
|
||
|
||
const map = TableMap.get(table.node)
|
||
const cellPositions = [...new Set(map.map)]
|
||
const isNew = (pos) => !existingCells.has(table.node.nodeAt(pos))
|
||
const findReference = (pos) => {
|
||
const { left, top } = map.findCell(pos)
|
||
|
||
for (let distance = 1; distance < Math.max(map.width, map.height); distance++) {
|
||
const candidates = [
|
||
[top, left - distance], [top, left + distance],
|
||
[top - distance, left], [top + distance, left]
|
||
]
|
||
|
||
for (const [row, col] of candidates) {
|
||
if (row < 0 || col < 0 || row >= map.height || col >= map.width) continue
|
||
|
||
const candidatePos = map.map[row * map.width + col]
|
||
|
||
if (!isNew(candidatePos)) return table.node.nodeAt(candidatePos)
|
||
}
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
cellPositions.filter((pos) => isNew(pos) && !table.node.nodeAt(pos).childCount).sort((a, b) => b - a).forEach((pos) => {
|
||
const cell = table.node.nodeAt(pos)
|
||
const reference = findReference(pos)
|
||
const cellPos = table.start + pos
|
||
|
||
if (!reference) return
|
||
|
||
const paragraph = reference.firstChild?.type.name === 'paragraph' ? reference.firstChild : null
|
||
|
||
tr.insert(cellPos + 1, tr.doc.type.schema.nodes.paragraph.create(paragraph?.attrs))
|
||
tr.setNodeMarkup(cellPos, null, { ...cell.attrs, htmlAttrs: reference.attrs.htmlAttrs })
|
||
})
|
||
}
|
||
|
||
function runTableCommand (command, { state, tr, dispatch }, colsUpdate) {
|
||
const table = findEditableTable(state)
|
||
|
||
if (!table) return false
|
||
|
||
if (!dispatch) return command(state)
|
||
|
||
const rect = selectedRect(state)
|
||
const colsMatch = table.node.attrs.cols.length === rect.map.width
|
||
const existingCells = tableCellNodes(table.node)
|
||
|
||
if (!command(state, () => {})) return false
|
||
|
||
styleNewCells(tr, existingCells)
|
||
|
||
if (colsUpdate && colsMatch) {
|
||
const tablePos = tr.mapping.map(table.pos)
|
||
const { attrs } = tr.doc.nodeAt(tablePos)
|
||
const cols = [...attrs.cols]
|
||
|
||
colsUpdate(cols, rect)
|
||
|
||
tr.setNodeMarkup(tablePos, null, { ...attrs, cols })
|
||
}
|
||
|
||
return true
|
||
}
|
||
|
||
const TableCommands = Extension.create({
|
||
name: 'tableCommands',
|
||
extendNodeSchema (extension) {
|
||
return extension.config.tableRole ? { tableRole: extension.config.tableRole } : {}
|
||
},
|
||
addProseMirrorPlugins () {
|
||
const plugin = tableEditing()
|
||
const { handlePaste } = plugin.props
|
||
|
||
delete plugin.spec.appendTransaction
|
||
|
||
plugin.props.handlePaste = (view, event, slice) => {
|
||
const table = findTable(view.state.selection.$head)
|
||
|
||
if (!table) return false
|
||
if (!isRegularTable(table.node)) return view.state.selection instanceof CellSelection
|
||
|
||
const existingCells = tableCellNodes(table.node)
|
||
|
||
const dispatch = (tr) => {
|
||
styleNewCells(tr, existingCells)
|
||
|
||
view.dispatch(tr)
|
||
}
|
||
|
||
return handlePaste({ state: view.state, dispatch }, event, slice)
|
||
}
|
||
|
||
return [plugin]
|
||
},
|
||
addKeyboardShortcuts () {
|
||
const clearCells = () => {
|
||
const { state, view } = this.editor
|
||
|
||
if (!(state.selection instanceof CellSelection)) return false
|
||
|
||
const tr = state.tr
|
||
|
||
state.selection.forEachCell((cell, pos) => {
|
||
const paragraph = cell.firstChild?.type.name === 'paragraph' ? cell.firstChild : null
|
||
|
||
tr.replaceWith(tr.mapping.map(pos + 1), tr.mapping.map(pos + cell.nodeSize - 1), state.schema.nodes.paragraph.create(paragraph?.attrs))
|
||
})
|
||
|
||
view.dispatch(tr)
|
||
|
||
return true
|
||
}
|
||
|
||
return { Backspace: clearCells, Delete: clearCells, 'Mod-Backspace': clearCells, 'Mod-Delete': clearCells }
|
||
},
|
||
addCommands () {
|
||
return {
|
||
addTableRow: (after) => (props) => runTableCommand(after ? addRowAfter : addRowBefore, props),
|
||
addTableColumn: (after) => (props) => runTableCommand(after ? addColumnAfter : addColumnBefore, props, (cols, rect) => {
|
||
const index = after ? rect.right : rect.left
|
||
|
||
cols.splice(index, 0, { ...cols[after ? index - 1 : index] })
|
||
}),
|
||
deleteTableRow: () => (props) => {
|
||
const table = findEditableTable(props.state)
|
||
|
||
if (!table) return false
|
||
|
||
const rect = selectedRect(props.state)
|
||
|
||
if (rect.top === 0 && rect.bottom === rect.map.height) {
|
||
if (props.dispatch) deleteTableNode(props.tr, table)
|
||
|
||
return true
|
||
}
|
||
|
||
return runTableCommand(deleteRow, props)
|
||
},
|
||
deleteTableColumn: () => (props) => {
|
||
const table = findEditableTable(props.state)
|
||
|
||
if (!table) return false
|
||
|
||
const rect = selectedRect(props.state)
|
||
|
||
if (rect.left === 0 && rect.right === rect.map.width) {
|
||
if (props.dispatch) deleteTableNode(props.tr, table)
|
||
|
||
return true
|
||
}
|
||
|
||
return runTableCommand(deleteColumn, props, (cols, { left, right }) => cols.splice(left, right - left))
|
||
},
|
||
mergeTableCells: () => (props) => runTableCommand(mergeCells, props),
|
||
splitTableCell: () => (props) => runTableCommand(splitCell, props),
|
||
setBlockAlign: (align) => ({ state, tr, dispatch, commands }) => {
|
||
if (state.selection.node?.type.name === 'image') {
|
||
return commands.setBlockStyle('text-align', align)
|
||
}
|
||
|
||
const table = findTable(state.selection.$from)
|
||
|
||
if (!table) return false
|
||
|
||
if (dispatch) {
|
||
const el = document.createElement('table')
|
||
|
||
el.style.cssText = table.node.attrs.htmlAttrs.style || ''
|
||
|
||
const isFloating = ['left', 'right'].includes(el.style.float)
|
||
let margins = { left: ['0', 'auto'], center: ['auto', 'auto'], right: ['auto', '0'] }[align]
|
||
let htmlAttrs = table.node.attrs.htmlAttrs
|
||
|
||
if (isFloating && align !== 'center') {
|
||
const gap = [el.style.marginLeft, el.style.marginRight].find((value) => parseFloat(value)) || '0'
|
||
|
||
margins = align === 'left' ? ['0', gap] : [gap, '0']
|
||
htmlAttrs = withStyle(htmlAttrs, 'float', align)
|
||
} else {
|
||
htmlAttrs = withStyle(htmlAttrs, 'float', null)
|
||
}
|
||
|
||
htmlAttrs = withStyle(withStyle(htmlAttrs, 'margin-left', margins[0]), 'margin-right', margins[1])
|
||
|
||
delete htmlAttrs.align
|
||
|
||
tr.setNodeMarkup(table.pos, null, { ...table.node.attrs, htmlAttrs })
|
||
}
|
||
|
||
return true
|
||
},
|
||
deleteTable: () => ({ state, tr, dispatch }) => {
|
||
const table = findTable(state.selection.$from)
|
||
|
||
if (!table) return false
|
||
|
||
if (dispatch) deleteTableNode(tr, table)
|
||
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
function pxToPt (px) {
|
||
return `${Math.round(px * 0.75 * 10) / 10}pt`
|
||
}
|
||
|
||
function tableColumnsRow (tableDom) {
|
||
const rows = [...tableDom.rows]
|
||
const columnsCount = Math.max(...rows.map((row) => [...row.cells].reduce((acc, cell) => acc + cell.colSpan, 0)))
|
||
|
||
return rows.find((row) => row.cells.length === columnsCount)
|
||
}
|
||
|
||
function tablePosFromDom (view, tableDom) {
|
||
return view.posAtDOM(tableDom.rows[0], 0) - 2
|
||
}
|
||
|
||
function setTableColumnWidths (view, tableDom, widths) {
|
||
const tablePos = tablePosFromDom(view, tableDom)
|
||
const table = view.state.doc.nodeAt(tablePos)
|
||
const cols = widths.map((width) => ({ style: `width: ${pxToPt(width)}` }))
|
||
const tableStyle = updateStyle(updateStyle(table.attrs.htmlAttrs.style, 'table-layout', 'fixed'), 'width', pxToPt(widths.reduce((acc, width) => acc + width, 0)))
|
||
|
||
view.dispatch(view.state.tr.setNodeMarkup(tablePos, null, { ...table.attrs, cols, htmlAttrs: { ...table.attrs.htmlAttrs, style: tableStyle } }))
|
||
}
|
||
|
||
function cellMinHeight (cellDom, zoom, withMargins) {
|
||
const style = getComputedStyle(cellDom)
|
||
const first = cellDom.firstElementChild
|
||
const last = cellDom.lastElementChild
|
||
const chrome = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + (parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)) / 2
|
||
|
||
if (!first) return chrome * zoom
|
||
|
||
const margins = withMargins ? parseFloat(getComputedStyle(first).marginTop) + parseFloat(getComputedStyle(last).marginBottom) : 0
|
||
|
||
return last.getBoundingClientRect().bottom - first.getBoundingClientRect().top + (margins + chrome) * zoom
|
||
}
|
||
|
||
export function tableRowMinHeights (tableDom, zoom, withMargins = true) {
|
||
return [...tableDom.rows].map((row) => Math.max(...[...row.cells].map((cell) => cellMinHeight(cell, zoom, withMargins))))
|
||
}
|
||
|
||
function scaleTableRows (view, tablePos, height, zoom) {
|
||
const tableDom = view.nodeDOM(tablePos)
|
||
const rows = [...tableDom.rows]
|
||
const heights = rows.map((row) => row.getBoundingClientRect().height / zoom)
|
||
const total = heights.reduce((acc, value) => acc + value, 0)
|
||
const tr = view.state.tr
|
||
let newHeights
|
||
|
||
if (height >= total) {
|
||
newHeights = heights.map((value) => value * height / total)
|
||
} else {
|
||
let mins = tableRowMinHeights(tableDom, zoom).map((value, index) => Math.min(value / zoom, heights[index]))
|
||
let minTotal = mins.reduce((acc, value) => acc + value, 0)
|
||
|
||
if (height < minTotal) {
|
||
mins = tableRowMinHeights(tableDom, zoom, false).map((value, index) => Math.min(value / zoom, heights[index]))
|
||
minTotal = mins.reduce((acc, value) => acc + value, 0)
|
||
|
||
tr.doc.nodeAt(tablePos).descendants((node, pos) => {
|
||
if (!node.isTextblock) return
|
||
|
||
const htmlAttrs = withStyle(withStyle(node.attrs.htmlAttrs, 'margin-top', '0'), 'margin-bottom', '0')
|
||
|
||
tr.setNodeMarkup(tablePos + 1 + pos, null, { ...node.attrs, htmlAttrs })
|
||
|
||
return false
|
||
})
|
||
}
|
||
|
||
const ratio = total > minTotal ? Math.max(height - minTotal, 0) / (total - minTotal) : 0
|
||
|
||
newHeights = heights.map((value, index) => mins[index] + (value - mins[index]) * ratio)
|
||
}
|
||
|
||
rows.forEach((rowDom, index) => {
|
||
const rowPos = view.posAtDOM(rowDom, 0) - 1
|
||
const row = tr.doc.nodeAt(rowPos)
|
||
|
||
tr.setNodeMarkup(rowPos, null, { ...row.attrs, htmlAttrs: withStyle(row.attrs.htmlAttrs, 'height', pxToPt(newHeights[index])) })
|
||
})
|
||
|
||
view.dispatch(tr)
|
||
}
|
||
|
||
export function resizeTable (view, tablePos, { width, height }, zoom) {
|
||
const tableDom = view.nodeDOM(tablePos)
|
||
const tableRect = tableDom.getBoundingClientRect()
|
||
|
||
if (Math.round(height) !== Math.round(tableRect.height / zoom)) {
|
||
scaleTableRows(view, tablePos, height, zoom)
|
||
}
|
||
|
||
if (Math.round(width) === Math.round(tableRect.width / zoom)) return
|
||
|
||
const columnsRow = tableColumnsRow(tableDom)
|
||
|
||
if (columnsRow) {
|
||
const widths = [...columnsRow.cells].map((cell) => cell.getBoundingClientRect().width / zoom)
|
||
const scale = width / widths.reduce((acc, value) => acc + value, 0)
|
||
|
||
setTableColumnWidths(view, tableDom, widths.map((value) => value * scale))
|
||
} else {
|
||
const table = view.state.doc.nodeAt(tablePos)
|
||
|
||
view.dispatch(view.state.tr.setNodeMarkup(tablePos, null, { ...table.attrs, htmlAttrs: withStyle(table.attrs.htmlAttrs, 'width', pxToPt(width)) }))
|
||
}
|
||
}
|
||
|
||
function resizeImage (view, pos, width) {
|
||
const image = view.state.doc.nodeAt(pos)
|
||
const htmlAttrs = { ...image.attrs.htmlAttrs }
|
||
|
||
delete htmlAttrs.width
|
||
delete htmlAttrs.height
|
||
|
||
htmlAttrs.style = updateStyle(updateStyle(htmlAttrs.style, 'width', pxToPt(width)), 'height', 'auto')
|
||
|
||
const tr = view.state.tr.setNodeMarkup(pos, null, { ...image.attrs, htmlAttrs })
|
||
|
||
view.dispatch(tr.setSelection(NodeSelection.create(tr.doc, pos)))
|
||
}
|
||
|
||
const variableHighlightKey = new PluginKey('variableHighlight')
|
||
|
||
function buildDecorations (doc) {
|
||
const decorations = []
|
||
const regex = /\[\[[^\]]*\]\]/g
|
||
|
||
doc.descendants((node, pos) => {
|
||
if (!node.isText) return
|
||
|
||
let match
|
||
|
||
while ((match = regex.exec(node.text)) !== null) {
|
||
const from = pos + match.index
|
||
const to = from + match[0].length
|
||
|
||
decorations.push(Decoration.inline(from, to, { nodeName: 'dynamic-variable' }))
|
||
}
|
||
})
|
||
|
||
return DecorationSet.create(doc, decorations)
|
||
}
|
||
|
||
const VariableHighlight = Extension.create({
|
||
name: 'variableHighlight',
|
||
addProseMirrorPlugins () {
|
||
return [
|
||
new Plugin({
|
||
key: variableHighlightKey,
|
||
state: {
|
||
init (_, { doc }) {
|
||
return buildDecorations(doc)
|
||
},
|
||
apply (tr, oldSet) {
|
||
if (tr.docChanged) {
|
||
return buildDecorations(tr.doc)
|
||
}
|
||
|
||
return oldSet
|
||
}
|
||
},
|
||
props: {
|
||
decorations (state) {
|
||
return this.getState(state)
|
||
},
|
||
handleTextInput (view, from, to, text) {
|
||
if (text !== '[') return false
|
||
|
||
const { state } = view
|
||
const charBefore = state.doc.textBetween(Math.max(from - 1, 0), from)
|
||
|
||
if (charBefore !== '[') return false
|
||
|
||
const tr = state.tr.insertText('[]]', from, to)
|
||
|
||
tr.setSelection(state.selection.constructor.create(tr.doc, from + 1))
|
||
|
||
view.dispatch(tr)
|
||
|
||
return true
|
||
}
|
||
}
|
||
})
|
||
]
|
||
}
|
||
})
|
||
|
||
export function buildEditor ({ dynamicAreaProps, attachmentsIndex, renderHtmlForSaveRef, onFieldDrop, onFieldDestroy, editorOptions }) {
|
||
const FieldNode = Node.create({
|
||
name: 'fieldNode',
|
||
inline: true,
|
||
group: 'inline',
|
||
atom: true,
|
||
draggable: true,
|
||
addAttributes () {
|
||
return {
|
||
uuid: { default: null },
|
||
areaUuid: { default: null },
|
||
width: { default: '124px' },
|
||
height: { default: null },
|
||
verticalAlign: { default: 'text-bottom' },
|
||
display: { default: 'inline-flex' }
|
||
}
|
||
},
|
||
parseHTML () {
|
||
return [{
|
||
tag: 'dynamic-field',
|
||
getAttrs (dom) {
|
||
return {
|
||
uuid: dom.getAttribute('uuid'),
|
||
areaUuid: dom.getAttribute('area-uuid'),
|
||
width: dom.style.width,
|
||
height: dom.style.height,
|
||
display: dom.style.display,
|
||
verticalAlign: dom.style.verticalAlign
|
||
}
|
||
}
|
||
}]
|
||
},
|
||
renderHTML ({ node }) {
|
||
const attrs = {
|
||
uuid: node.attrs.uuid,
|
||
'area-uuid': node.attrs.areaUuid,
|
||
style: `width: ${node.attrs.width}; height: ${node.attrs.height}; display: ${node.attrs.display}; vertical-align: ${node.attrs.verticalAlign};`
|
||
}
|
||
|
||
if (!renderHtmlForSaveRef.value) {
|
||
const fieldArea = dynamicAreaProps.findFieldArea(node.attrs.areaUuid)
|
||
|
||
if (fieldArea?.field && fieldArea?.area) {
|
||
const field = JSON.parse(JSON.stringify(fieldArea.field))
|
||
const area = JSON.parse(JSON.stringify(fieldArea.area))
|
||
|
||
delete field.areas
|
||
delete field.uuid
|
||
delete field.submitter_uuid
|
||
delete area.uuid
|
||
delete area.attachment_uuid
|
||
|
||
attrs['data-field'] = JSON.stringify(field)
|
||
attrs['data-area'] = JSON.stringify(area)
|
||
attrs['data-template-id'] = dynamicAreaProps.template.id
|
||
}
|
||
}
|
||
|
||
return ['dynamic-field', attrs]
|
||
},
|
||
addNodeView () {
|
||
return ({ node, getPos, editor }) => {
|
||
const dom = document.createElement('span')
|
||
|
||
const nodeStyle = reactive({
|
||
width: node.attrs.width,
|
||
height: node.attrs.height,
|
||
verticalAlign: node.attrs.verticalAlign,
|
||
display: node.attrs.display
|
||
})
|
||
|
||
dom.dataset.areaUuid = node.attrs.areaUuid
|
||
|
||
const shadow = dom.attachShadow({ mode: 'open' })
|
||
|
||
shadow.adoptedStyleSheets = [dynamicStylesheet]
|
||
|
||
const app = createApp(DynamicArea, {
|
||
fieldUuid: node.attrs.uuid,
|
||
areaUuid: node.attrs.areaUuid,
|
||
nodeStyle,
|
||
getPos,
|
||
editor,
|
||
editable: editorOptions.editable,
|
||
...dynamicAreaProps
|
||
})
|
||
|
||
app.mount(shadow)
|
||
|
||
return {
|
||
dom,
|
||
update (updatedNode) {
|
||
if (updatedNode.attrs.areaUuid === node.attrs.areaUuid) {
|
||
nodeStyle.width = updatedNode.attrs.width
|
||
nodeStyle.height = updatedNode.attrs.height
|
||
nodeStyle.verticalAlign = updatedNode.attrs.verticalAlign
|
||
nodeStyle.display = updatedNode.attrs.display
|
||
}
|
||
},
|
||
destroy () {
|
||
onFieldDestroy(node)
|
||
|
||
app.unmount()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
const FieldDropPlugin = Extension.create({
|
||
name: 'fieldDrop',
|
||
addProseMirrorPlugins () {
|
||
return [
|
||
new Plugin({
|
||
key: new PluginKey('fieldDrop'),
|
||
props: {
|
||
handleDrop: onFieldDrop
|
||
}
|
||
})
|
||
]
|
||
}
|
||
})
|
||
|
||
const RESIZE_HANDLE_PX = 4
|
||
const MIN_SIZE_PX = 16
|
||
|
||
function findResizeTarget (view, event) {
|
||
const cellDom = event.target.closest('td, th')
|
||
|
||
if (!cellDom) return null
|
||
|
||
const rect = cellDom.getBoundingClientRect()
|
||
const isRow = Math.abs(event.clientY - rect.bottom) <= RESIZE_HANDLE_PX
|
||
const isRight = Math.abs(event.clientX - rect.right) <= RESIZE_HANDLE_PX
|
||
const isLeft = Math.abs(event.clientX - rect.left) <= RESIZE_HANDLE_PX
|
||
|
||
if (!isRow && !isRight && !isLeft) return null
|
||
|
||
const tableDom = cellDom.closest('table')
|
||
const tablePos = tablePosFromDom(view, tableDom)
|
||
const cell = TableMap.get(view.state.doc.nodeAt(tablePos)).findCell(view.posAtDOM(cellDom, 0) - tablePos - 2)
|
||
|
||
if (isRow) {
|
||
return { type: 'row', rowDom: tableDom.rows[cell.bottom - 1], tableDom }
|
||
}
|
||
|
||
const columnIndex = isRight ? cell.right - 1 : cell.left - 1
|
||
|
||
if (columnIndex < 0 || !tableColumnsRow(tableDom)) return null
|
||
|
||
return { type: 'column', columnIndex, tableDom }
|
||
}
|
||
|
||
function applyColumnResize (view, { tableDom, columnIndex }, delta) {
|
||
const zoom = dynamicAreaProps.getZoom()
|
||
const widths = [...tableColumnsRow(tableDom).cells].map((cell) => cell.getBoundingClientRect().width / zoom)
|
||
|
||
if (columnIndex + 1 < widths.length) {
|
||
const change = Math.max(Math.min(delta, widths[columnIndex + 1] - MIN_SIZE_PX), MIN_SIZE_PX - widths[columnIndex])
|
||
|
||
widths[columnIndex] += change
|
||
widths[columnIndex + 1] -= change
|
||
} else {
|
||
const maxDelta = (view.dom.parentElement.getBoundingClientRect().right - tableDom.getBoundingClientRect().right) / zoom
|
||
|
||
widths[columnIndex] = Math.max(widths[columnIndex] + Math.min(delta, Math.max(maxDelta, 0)), MIN_SIZE_PX)
|
||
}
|
||
|
||
setTableColumnWidths(view, tableDom, widths)
|
||
}
|
||
|
||
function applyRowResize (view, { rowDom }, delta) {
|
||
const height = Math.max(rowDom.getBoundingClientRect().height / dynamicAreaProps.getZoom() + delta, MIN_SIZE_PX)
|
||
const rowPos = view.posAtDOM(rowDom, 0) - 1
|
||
const row = view.state.doc.nodeAt(rowPos)
|
||
|
||
view.dispatch(view.state.tr.setNodeMarkup(rowPos, null, { ...row.attrs, htmlAttrs: withStyle(row.attrs.htmlAttrs, 'height', pxToPt(height)) }))
|
||
}
|
||
|
||
function startTableResize (view, event, target) {
|
||
const tableRect = target.tableDom.getBoundingClientRect()
|
||
const isColumn = target.type === 'column'
|
||
const guide = document.createElement('div')
|
||
|
||
guide.style.cssText = `position: fixed; z-index: 9999; pointer-events: none; background: #3b82f6; ${isColumn ? `top: ${tableRect.top}px; height: ${tableRect.height}px; width: 1px;` : `left: ${tableRect.left}px; width: ${tableRect.width}px; height: 1px;`}`
|
||
|
||
const moveGuide = (e) => {
|
||
if (isColumn) {
|
||
guide.style.left = `${e.clientX}px`
|
||
} else {
|
||
guide.style.top = `${e.clientY}px`
|
||
}
|
||
}
|
||
|
||
moveGuide(event)
|
||
document.body.appendChild(guide)
|
||
document.body.style.cursor = isColumn ? 'col-resize' : 'row-resize'
|
||
|
||
const onMouseUp = (e) => {
|
||
window.removeEventListener('mousemove', moveGuide)
|
||
window.removeEventListener('mouseup', onMouseUp)
|
||
|
||
guide.remove()
|
||
document.body.style.cursor = ''
|
||
|
||
const delta = (isColumn ? e.clientX - event.clientX : e.clientY - event.clientY) / dynamicAreaProps.getZoom()
|
||
|
||
if (!delta) return
|
||
|
||
if (isColumn) {
|
||
applyColumnResize(view, target, delta)
|
||
} else {
|
||
applyRowResize(view, target, delta)
|
||
}
|
||
}
|
||
|
||
window.addEventListener('mousemove', moveGuide)
|
||
window.addEventListener('mouseup', onMouseUp)
|
||
}
|
||
|
||
const TableResize = Extension.create({
|
||
name: 'tableResize',
|
||
addProseMirrorPlugins () {
|
||
return [
|
||
new Plugin({
|
||
key: new PluginKey('tableResize'),
|
||
props: {
|
||
handleDOMEvents: {
|
||
mousemove (view, event) {
|
||
const target = view.editable && findResizeTarget(view, event)
|
||
|
||
view.dom.style.cursor = target ? (target.type === 'column' ? 'col-resize' : 'row-resize') : ''
|
||
|
||
return false
|
||
},
|
||
mouseleave (view) {
|
||
view.dom.style.cursor = ''
|
||
|
||
return false
|
||
},
|
||
mousedown (view, event) {
|
||
const target = view.editable && event.button === 0 && findResizeTarget(view, event)
|
||
|
||
if (!target) return false
|
||
|
||
event.preventDefault()
|
||
|
||
startTableResize(view, event, target)
|
||
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
]
|
||
}
|
||
})
|
||
|
||
class ZoomedResizableNodeView extends ResizableNodeView {
|
||
constructor (options) {
|
||
super(options)
|
||
|
||
this.wrapper.addEventListener('touchstart', (event) => {
|
||
if (event.target.closest('[data-resize-handle]')) {
|
||
document.addEventListener('touchend', this.handleTouchEnd)
|
||
document.addEventListener('touchcancel', this.handleTouchEnd)
|
||
}
|
||
}, true)
|
||
}
|
||
|
||
handleTouchEnd = () => {
|
||
document.removeEventListener('touchend', this.handleTouchEnd)
|
||
document.removeEventListener('touchcancel', this.handleTouchEnd)
|
||
document.removeEventListener('touchmove', this.handleTouchMove)
|
||
|
||
this.handleMouseUp()
|
||
}
|
||
|
||
handleResize (deltaX, deltaY) {
|
||
const zoom = dynamicAreaProps.getZoom()
|
||
|
||
super.handleResize(deltaX / zoom, deltaY / zoom)
|
||
}
|
||
}
|
||
|
||
const DynamicImageNode = ImageNode.extend({
|
||
addProseMirrorPlugins () {
|
||
return [
|
||
new Plugin({
|
||
props: {
|
||
attributes: (state) => state.selection.node?.type.name === this.name ? { inputmode: 'none', style: 'caret-color: transparent' } : {}
|
||
}
|
||
})
|
||
]
|
||
},
|
||
renderHTML ({ node }) {
|
||
const { loading, ...attrs } = node.attrs.htmlAttrs
|
||
|
||
return ['img', attrs]
|
||
},
|
||
addNodeView () {
|
||
return ({ node, getPos, editor }) => {
|
||
const img = document.createElement('img')
|
||
|
||
const attrs = { ...node.attrs.htmlAttrs }
|
||
|
||
const blobUuid = attrs.src?.startsWith('blob:') && attrs.src.slice(5)
|
||
|
||
if (blobUuid && attachmentsIndex[blobUuid]) {
|
||
attrs.src = attachmentsIndex[blobUuid]
|
||
}
|
||
|
||
img.setAttribute('loading', 'lazy')
|
||
|
||
Object.entries(attrs).forEach(([k, v]) => img.setAttribute(k, v))
|
||
|
||
if (!editorOptions.editable) {
|
||
return { dom: img }
|
||
}
|
||
|
||
return new ZoomedResizableNodeView({
|
||
element: img,
|
||
node,
|
||
editor,
|
||
getPos,
|
||
onCommit: (width) => resizeImage(editor.view, getPos(), width),
|
||
onUpdate: (updatedNode) => updatedNode.attrs.htmlAttrs === node.attrs.htmlAttrs,
|
||
options: {
|
||
directions: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
|
||
min: { width: MIN_SIZE_PX, height: MIN_SIZE_PX },
|
||
preserveAspectRatio: true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
return new Editor({
|
||
extensions: [
|
||
Document,
|
||
Text,
|
||
HardBreak,
|
||
History,
|
||
Gapcursor,
|
||
Dropcursor,
|
||
CustomParagraph,
|
||
CustomHeading,
|
||
SectionNode,
|
||
ArticleNode,
|
||
HeaderNode,
|
||
FooterNode,
|
||
DivNode,
|
||
BlockquoteNode,
|
||
PreNode,
|
||
OrderedListNode,
|
||
BulletListNode,
|
||
ListItemNode,
|
||
TableNode,
|
||
TableRow,
|
||
TableCell,
|
||
TableHeader,
|
||
DynamicImageNode,
|
||
EmptySpanNode,
|
||
LayoutSpanMark,
|
||
LinkMark,
|
||
SpanMark,
|
||
CustomBold,
|
||
CustomItalic,
|
||
CustomUnderline,
|
||
CustomStrike,
|
||
SubscriptMark,
|
||
SuperscriptMark,
|
||
VariableHighlight,
|
||
TabHandler,
|
||
NumberingKeymap,
|
||
Formatting,
|
||
TableCommands,
|
||
FieldNode,
|
||
FieldDropPlugin,
|
||
TableResize
|
||
],
|
||
editorProps: {
|
||
attributes: {
|
||
style: 'outline: none'
|
||
}
|
||
},
|
||
parseOptions: {
|
||
preserveWhitespace: true
|
||
},
|
||
injectCSS: false,
|
||
...editorOptions
|
||
})
|
||
}
|