mirror of
https://github.com/marktext/marktext.git
synced 2025-05-02 15:21:33 +08:00
16bb1de82e
* change another way to render math * open\save\edit multiple lines math block * rewrite header label style * inline code style update * update dark theme style * update change log * typo error * update webpack to v4 * update license * fix unexpected to delete math preview block * fix cursor error when change mode
87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
import { CLASS_OR_ID } from '../../../config'
|
|
import { h } from '../snabbdom'
|
|
|
|
export default function renderContainerBlock (block, cursor, activeBlocks, matches, useCache = false) {
|
|
let selector = this.getSelector(block, cursor, activeBlocks)
|
|
const data = {
|
|
attrs: {},
|
|
dataset: {}
|
|
}
|
|
// handle `div` block
|
|
if (/div/.test(block.type)) {
|
|
if (block.toolBarType) {
|
|
selector += `.${'ag-tool-' + block.toolBarType}.${CLASS_OR_ID['AG_TOOL_BAR']}`
|
|
}
|
|
if (block.functionType) {
|
|
selector += `.${'ag-function-' + block.functionType}`
|
|
}
|
|
if (block.editable !== undefined && !block.editable) {
|
|
Object.assign(data.attrs, { contenteditable: 'false' })
|
|
}
|
|
}
|
|
// handle `figure` block
|
|
if (block.type === 'figure') {
|
|
if (block.functionType === 'html') { // HTML Block
|
|
Object.assign(data.dataset, { role: block.functionType.toUpperCase() })
|
|
}
|
|
if (block.functionType === 'multiplemath') {
|
|
selector += `.${CLASS_OR_ID['AG_MULTIPLE_MATH_BLOCK']}`
|
|
}
|
|
}
|
|
// hanle list block
|
|
if (/ul|ol/.test(block.type) && block.listType) {
|
|
switch (block.listType) {
|
|
case 'order':
|
|
selector += `.${CLASS_OR_ID['AG_ORDER_LIST']}`
|
|
break
|
|
case 'bullet':
|
|
selector += `.${CLASS_OR_ID['AG_BULLET_LIST']}`
|
|
break
|
|
case 'task':
|
|
selector += `.${CLASS_OR_ID['AG_TASK_LIST']}`
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
if (block.type === 'li' && block.label) {
|
|
const { label } = block
|
|
const { align } = activeBlocks[0]
|
|
|
|
if (align && block.label === align) {
|
|
selector += '.active'
|
|
}
|
|
Object.assign(data.dataset, { label })
|
|
}
|
|
if (block.type === 'li' && block.listItemType) {
|
|
switch (block.listItemType) {
|
|
case 'order':
|
|
selector += `.${CLASS_OR_ID['AG_ORDER_LIST_ITEM']}`
|
|
break
|
|
case 'bullet':
|
|
selector += `.${CLASS_OR_ID['AG_BULLET_LIST_ITEM']}`
|
|
break
|
|
case 'task':
|
|
selector += `.${CLASS_OR_ID['AG_TASK_LIST_ITEM']}`
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
if (block.bulletListItemMarker) {
|
|
Object.assign(data.dataset, { marker: block.bulletListItemMarker })
|
|
}
|
|
selector += block.isLooseListItem ? `.${CLASS_OR_ID['AG_LOOSE_LIST_ITEM']}` : `.${CLASS_OR_ID['AG_TIGHT_LIST_ITEM']}`
|
|
}
|
|
if (block.type === 'ol') {
|
|
Object.assign(data.attrs, { start: block.start })
|
|
}
|
|
if (block.type === 'pre' && /frontmatter|multiplemath/.test(block.functionType)) {
|
|
const role = block.functionType === 'frontmatter' ? 'YAML' : 'MATH'
|
|
const className = block.functionType === 'frontmatter' ? CLASS_OR_ID['AG_FRONT_MATTER'] : CLASS_OR_ID['AG_MULTIPLE_MATH']
|
|
Object.assign(data.dataset, { role })
|
|
selector += `.${className}`
|
|
}
|
|
|
|
return h(selector, data, block.children.map(child => this.renderBlock(child, cursor, activeBlocks, matches, useCache)))
|
|
}
|