fix: table to html
This commit is contained in:
parent
c67f1bc250
commit
6a87ef0e30
|
@ -12,7 +12,6 @@ import {
|
|||
DATA_ELEMENT,
|
||||
DATA_ID,
|
||||
DATA_TRANSIENT_ELEMENT,
|
||||
EDITABLE_SELECTOR,
|
||||
UI,
|
||||
} from './constants/root';
|
||||
import Selection from './selection';
|
||||
|
|
|
@ -17,6 +17,7 @@ import { DATA_ID } from './constants';
|
|||
/**
|
||||
* 标签规则
|
||||
*/
|
||||
const SCHEMA_KEYS = ['blocks', 'inlines', 'marks', 'globals'];
|
||||
class Schema implements SchemaInterface {
|
||||
private _all: Array<SchemaRule> = [];
|
||||
private _typeMap: {
|
||||
|
@ -150,7 +151,7 @@ class Schema implements SchemaInterface {
|
|||
*/
|
||||
find(callback: (rule: SchemaRule) => boolean): Array<SchemaRule> {
|
||||
const schemas: Array<SchemaRule> = [];
|
||||
Object.keys(this.data).forEach((key) => {
|
||||
SCHEMA_KEYS.forEach((key) => {
|
||||
if (key !== 'globals') {
|
||||
const rules = (this.data[key] as Array<SchemaRule>).filter(
|
||||
callback,
|
||||
|
@ -368,9 +369,7 @@ class Schema implements SchemaInterface {
|
|||
const rule = this.getRule(node);
|
||||
if (!rule) return;
|
||||
const { globals } = this.data;
|
||||
const globalRule = Object.keys(globals).find(
|
||||
(dataType) => rule.type === dataType,
|
||||
);
|
||||
const globalRule = globals[rule.type] ? rule.type : undefined;
|
||||
const allRule = {
|
||||
...omit(rule, 'attributes'),
|
||||
attributes: merge(
|
||||
|
|
|
@ -469,8 +469,8 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
|
|||
}
|
||||
|
||||
.table-wrapper .table-main-content {
|
||||
margin: 4px 4px;
|
||||
padding: 0 2px;
|
||||
margin: 2px 2px;
|
||||
padding: 4px 4px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -377,54 +377,52 @@ class Table<T extends TableOptions = TableOptions> extends Plugin<T> {
|
|||
`[${CARD_KEY}="${TableComponent.cardName}"],[${READY_CARD_KEY}="${TableComponent.cardName}"]`,
|
||||
).each((tableNode) => {
|
||||
const node = $(tableNode);
|
||||
const value = decodeCardValue<TableValue>(
|
||||
node.attributes(CARD_VALUE_KEY),
|
||||
);
|
||||
if (value && value.html) {
|
||||
let table = node.find('table');
|
||||
let table = node.find('table');
|
||||
if (table.length === 0) {
|
||||
const value = decodeCardValue<TableValue>(
|
||||
node.attributes(CARD_VALUE_KEY),
|
||||
);
|
||||
if (!value || !value.html) return;
|
||||
// 表格值里面的卡片都是没有被转换过的,所以需要先把卡片转换过来
|
||||
table = $(value.html);
|
||||
if (table.length === 0) {
|
||||
// 表格值里面的卡片都是没有被转换过的,所以需要先把卡片转换过来
|
||||
table = $(value.html);
|
||||
if (table.length === 0) {
|
||||
node.remove();
|
||||
return;
|
||||
} else {
|
||||
const cards = table.find(CARD_SELECTOR).toArray();
|
||||
cards.forEach((componentNode) => {
|
||||
this.editor.trigger('parse:html', componentNode);
|
||||
});
|
||||
}
|
||||
}
|
||||
const width = table.attributes('width') || table.css('width');
|
||||
table.css({
|
||||
outline: 'none',
|
||||
'border-collapse': 'collapse',
|
||||
width: '100%',
|
||||
});
|
||||
table.attributes('data-width', width);
|
||||
const tds = table.find('td');
|
||||
tds.each((_, index) => {
|
||||
const tdElement = tds.eq(index);
|
||||
tdElement?.css({
|
||||
'min-width': 'auto',
|
||||
'white-space': 'flat',
|
||||
'word-wrap': 'break-word',
|
||||
margin: '4px 8px',
|
||||
border: !!table.attributes('data-table-no-border')
|
||||
? '0 none'
|
||||
: '1px solid #d9d9d9',
|
||||
padding: '4px 8px',
|
||||
cursor: 'default',
|
||||
'vertical-align':
|
||||
tdElement.css('vertical-align') || 'top',
|
||||
node.remove();
|
||||
return;
|
||||
} else {
|
||||
const cards = table.find(CARD_SELECTOR).toArray();
|
||||
cards.forEach((componentNode) => {
|
||||
this.editor.trigger('parse:html', componentNode);
|
||||
});
|
||||
});
|
||||
table.find(Template.TABLE_TD_BG_CLASS).remove();
|
||||
table.find(Template.TABLE_TD_CONTENT_CLASS).each((content) => {
|
||||
this.editor.node.unwrap($(content));
|
||||
});
|
||||
node.replaceWith(table);
|
||||
}
|
||||
}
|
||||
const width = table.attributes('width') || table.css('width');
|
||||
table.css({
|
||||
outline: 'none',
|
||||
'border-collapse': 'collapse',
|
||||
width: '100%',
|
||||
});
|
||||
table.attributes('data-width', width);
|
||||
const tds = table.find('td');
|
||||
tds.each((_, index) => {
|
||||
const tdElement = tds.eq(index);
|
||||
tdElement?.css({
|
||||
'min-width': 'auto',
|
||||
'white-space': 'flat',
|
||||
'word-wrap': 'break-word',
|
||||
margin: '4px 8px',
|
||||
border: !!table.attributes('data-table-no-border')
|
||||
? '0 none'
|
||||
: '1px solid #d9d9d9',
|
||||
padding: '4px 8px',
|
||||
cursor: 'default',
|
||||
'vertical-align': tdElement.css('vertical-align') || 'top',
|
||||
});
|
||||
});
|
||||
table.find(Template.TABLE_TD_BG_CLASS).remove();
|
||||
table.find(Template.TABLE_TD_CONTENT_CLASS).each((content) => {
|
||||
this.editor.node.unwrap($(content));
|
||||
});
|
||||
node.replaceWith(table);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue