fix: table to html

This commit is contained in:
yanmao 2022-01-05 00:41:46 +08:00
parent c67f1bc250
commit 6a87ef0e30
4 changed files with 48 additions and 52 deletions

View File

@ -12,7 +12,6 @@ import {
DATA_ELEMENT,
DATA_ID,
DATA_TRANSIENT_ELEMENT,
EDITABLE_SELECTOR,
UI,
} from './constants/root';
import Selection from './selection';

View File

@ -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(

View File

@ -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;

View File

@ -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);
});
}