feat(Text Editor): Add table support (#6226)
* feat(Text Editor): Add table support * fix: Table styling
This commit is contained in:
Faris Ansari
Rushabh Mehta
parent
278dfe44f5
commit
6de4453b23
5 changed files with 130 additions and 6 deletions
|
|
@ -68,9 +68,9 @@ frappe.ui.form.ControlComment = frappe.ui.form.ControlTextEditor.extend({
|
|||
const options = this._super();
|
||||
return Object.assign(options, {
|
||||
theme: 'bubble',
|
||||
modules: Object.assign(options.modules, {
|
||||
mention: this.get_mention_options()
|
||||
})
|
||||
// modules: Object.assign(options.modules, {
|
||||
// mention: this.get_mention_options()
|
||||
// })
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,25 @@ const Block = Quill.import('blots/block');
|
|||
Block.tagName = 'DIV';
|
||||
Quill.register(Block, true);
|
||||
|
||||
// table
|
||||
const Table = Quill.import('formats/table-container');
|
||||
Table.className = 'table';
|
||||
Quill.register(Table, true);
|
||||
|
||||
// inline style
|
||||
const BackgroundStyle = Quill.import('attributors/style/background');
|
||||
const ColorStyle = Quill.import('attributors/style/color');
|
||||
const SizeStyle = Quill.import('attributors/style/size');
|
||||
const FontStyle = Quill.import('attributors/style/font');
|
||||
const AlignStyle = Quill.import('attributors/style/align');
|
||||
const DirectionStyle = Quill.import('attributors/style/direction');
|
||||
Quill.register(BackgroundStyle, true);
|
||||
Quill.register(ColorStyle, true);
|
||||
Quill.register(SizeStyle, true);
|
||||
Quill.register(FontStyle, true);
|
||||
Quill.register(AlignStyle, true);
|
||||
Quill.register(DirectionStyle, true);
|
||||
|
||||
frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
|
||||
make_input() {
|
||||
this.has_input = true;
|
||||
|
|
@ -63,6 +82,38 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
// table commands
|
||||
this.$wrapper.on('click', '.ql-table .ql-picker-item', (e) => {
|
||||
const $target = $(e.currentTarget);
|
||||
const action = $target.data().value;
|
||||
e.preventDefault();
|
||||
|
||||
const table = this.quill.getModule('table');
|
||||
if (action === 'insert-table') {
|
||||
table.insertTable(2, 2);
|
||||
} else if (action === 'insert-row-above') {
|
||||
table.insertRowAbove();
|
||||
} else if (action === 'insert-row-below') {
|
||||
table.insertRowBelow();
|
||||
} else if (action === 'insert-column-left') {
|
||||
table.insertColumnLeft();
|
||||
} else if (action === 'insert-column-right') {
|
||||
table.insertColumnRight();
|
||||
} else if (action === 'delete-row') {
|
||||
table.deleteRow();
|
||||
} else if (action === 'delete-column') {
|
||||
table.deleteColumn();
|
||||
} else if (action === 'delete-table') {
|
||||
table.deleteTable();
|
||||
}
|
||||
|
||||
if (action !== 'delete-row') {
|
||||
table.balanceTables();
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
},
|
||||
|
||||
is_quill_dirty(source) {
|
||||
|
|
@ -75,7 +126,8 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
|
|||
return {
|
||||
modules: {
|
||||
toolbar: this.get_toolbar_options(),
|
||||
imageDrop: true
|
||||
imageDrop: true,
|
||||
table: true
|
||||
},
|
||||
theme: 'snow'
|
||||
};
|
||||
|
|
@ -90,6 +142,16 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
|
|||
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
||||
[{ 'align': [] }],
|
||||
[{ 'indent': '-1'}, { 'indent': '+1' }],
|
||||
[{'table': [
|
||||
'insert-table',
|
||||
'insert-row-above',
|
||||
'insert-row-below',
|
||||
'insert-column-right',
|
||||
'insert-column-left',
|
||||
'delete-row',
|
||||
'delete-column',
|
||||
'delete-table',
|
||||
]}],
|
||||
['clean']
|
||||
];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -70,4 +70,45 @@
|
|||
border: 1px solid @light-border-color;
|
||||
padding: 2px 3px;
|
||||
background-color: @btn-bg;
|
||||
}
|
||||
|
||||
// table
|
||||
|
||||
.ql-table {
|
||||
width: 66px;
|
||||
|
||||
.ql-picker-label::before {
|
||||
content: 'Table';
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
[data-value='insert-table']::before {
|
||||
content: 'Insert Table';
|
||||
}
|
||||
[data-value='insert-row-above']::before {
|
||||
content: 'Insert Row Above';
|
||||
}
|
||||
[data-value='insert-row-below']::before {
|
||||
content: 'Insert Row Below';
|
||||
}
|
||||
[data-value='insert-column-right']::before {
|
||||
content: 'Insert Column Right';
|
||||
}
|
||||
[data-value='insert-column-left']::before {
|
||||
content: 'Insert Column Left';
|
||||
}
|
||||
[data-value='delete-row']::before {
|
||||
content: 'Delete Row';
|
||||
}
|
||||
[data-value='delete-column']::before {
|
||||
content: 'Delete Column';
|
||||
}
|
||||
[data-value='delete-table']::before {
|
||||
content: 'Delete Table';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-editor td {
|
||||
border: 1px solid @border-color;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
"jsbarcode": "^3.9.0",
|
||||
"moment": "^2.20.1",
|
||||
"moment-timezone": "^0.5.21",
|
||||
"quill": "^1.3.6",
|
||||
"quill": "2.0.0-dev.2",
|
||||
"quill-image-drop-module": "^1.0.3",
|
||||
"quill-mention": "^2.0.2",
|
||||
"redis": "^2.8.0",
|
||||
|
|
|
|||
23
yarn.lock
23
yarn.lock
|
|
@ -1006,6 +1006,11 @@ eventemitter3@^2.0.3:
|
|||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
|
||||
integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
|
||||
|
||||
eventemitter3@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
|
||||
integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
|
||||
|
||||
execa@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
|
||||
|
|
@ -2459,6 +2464,10 @@ parchment@^1.1.4:
|
|||
resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
|
||||
integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
|
||||
|
||||
parchment@quilljs/parchment#487850f7eb030a6c4e750ba809e58b09444e0bdb:
|
||||
version "2.0.0-dev"
|
||||
resolved "https://codeload.github.com/quilljs/parchment/tar.gz/487850f7eb030a6c4e750ba809e58b09444e0bdb"
|
||||
|
||||
parse-glob@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
|
||||
|
|
@ -3034,7 +3043,19 @@ quill-mention@^2.0.2:
|
|||
dependencies:
|
||||
quill "^1.3.4"
|
||||
|
||||
quill@^1.2.2, quill@^1.3.4, quill@^1.3.6:
|
||||
quill@2.0.0-dev.2:
|
||||
version "2.0.0-dev.2"
|
||||
resolved "https://registry.yarnpkg.com/quill/-/quill-2.0.0-dev.2.tgz#0f8bc962da28e3ebbb856f246200e7d32e39fc9f"
|
||||
integrity sha512-jqP2ar0EaPZLLyeYmyJ01l07+l3NKjUiq79i7OQiYv7Rm3wHTaejgq2oIqmXUCZjGQd2f5jlFUABkf8quZVcIw==
|
||||
dependencies:
|
||||
clone "^2.1.1"
|
||||
deep-equal "^1.0.1"
|
||||
eventemitter3 "^3.1.0"
|
||||
extend "^3.0.1"
|
||||
parchment quilljs/parchment#487850f7eb030a6c4e750ba809e58b09444e0bdb
|
||||
quill-delta "^3.6.2"
|
||||
|
||||
quill@^1.2.2, quill@^1.3.4:
|
||||
version "1.3.6"
|
||||
resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d"
|
||||
integrity sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue