浏览代码

feat(Text Editor): Add table support (#6226)

* feat(Text Editor): Add table support

* fix: Table styling
version-14
Faris Ansari 6 年前
committed by Rushabh Mehta
父节点
当前提交
6de4453b23
共有 5 个文件被更改,包括 130 次插入6 次删除
  1. +3
    -3
      frappe/public/js/frappe/form/controls/comment.js
  2. +63
    -1
      frappe/public/js/frappe/form/controls/text_editor.js
  3. +41
    -0
      frappe/public/less/quill.less
  4. +1
    -1
      package.json
  5. +22
    -1
      yarn.lock

+ 3
- 3
frappe/public/js/frappe/form/controls/comment.js 查看文件

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



+ 63
- 1
frappe/public/js/frappe/form/controls/text_editor.js 查看文件

@@ -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']
];
},


+ 41
- 0
frappe/public/less/quill.less 查看文件

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

+ 1
- 1
package.json 查看文件

@@ -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",


+ 22
- 1
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==


正在加载...
取消
保存