SimonHe
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(fluent-editor): fix tasklist format (#1845)

This commit is contained in:
Kagol 2024-08-07 09:57:42 +08:00 committed by GitHub
parent 59b14b4ce1
commit b7877612e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 133 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/fluent-editor/src/assets/editor.scss
View File

@ -1,5 +1,5 @@
@import './common';
// @import './tasklist';
@import './tasklist';
@import './better-table';
@import './emoji/emoji';
@ -206,8 +206,8 @@
content: counter(list-9, decimal) '. ';
}
// 编辑器外的任务列表
// @include tasklistOutside;
// 任务列表
@include tasklist;
// 图片
.ql-image-container {
@ -356,3 +356,5 @@
@include editor;
// Emoji表情
@include emoji;
// 编辑器外的任务列表
@include tasklistOutside;

78
packages/fluent-editor/src/assets/tasklist.scss Normal file
View File

@ -0,0 +1,78 @@
@mixin tasklist {
li.checked > .ql-ui,
li.unchecked > .ql-ui {
display: inline-block;
width: 16px;
height: 16px;
line-height: 14px;
text-align: right;
margin-left: -26px;
margin-right: 10px;
border: 1px solid #adb0b8;
color: #adb0b8;
cursor: pointer;
}
li.checked > .ql-ui {
border: 1px solid #5e7ce0;
background:
#5e7ce0
url('data:image/svg+xml;base64,PHN2ZyB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNoZWNrYm94LXRpY2sgIiB2ZXJzaW9uPSIxLjEiDQogICAgIHZpZXdCb3g9IjAgMCAyMCAyMCIgeD0iMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHk9IjBweCIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsiPg0KICA8cG9seWxpbmUgc3R5bGU9Ig0KICAgIHN0cm9rZTogI0ZGRkZGRjsNCiAgICBzdHJva2UtZGFzaGFycmF5OiA1MDsNCiAgICBzdHJva2Utd2lkdGg6IDI7DQogICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgIGZpbGw6IG5vbmU7DQogICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7DQoiIGNsYXNzPSJ0aWNrIHBhdGggbm8tYW5pbWF0aW9uIiBwb2ludHM9IjIuNiwxMSA2LjksMTUuMiAxNy40LDQuOCI+PC9wb2x5bGluZT4NCjwvc3ZnPg0K');
transition: all 0.3s ease-in-out;
}
li.checked > .ql-ui::before,
li.unchecked > .ql-ui::before {
content: '';
}
// 样式重置
li.checked,
li.unchecked {
display: block;
width: initial;
height: initial;
margin-left: initial;
color: initial;
border: initial;
cursor: initial;
}
li.checked::before,
li.unchecked::before {
content: initial;
}
li.checked > .ql-ui,
li.unchecked > .ql-ui {
bottom: initial;
}
}
@mixin tasklistOutside {
li.checked::before,
li.unchecked::before {
display: inline-block;
width: 16px;
height: 16px;
text-align: right;
margin-left: -26px;
border: 1px solid #adb0b8;
content: '';
position: absolute;
top: 1px;
margin-right: 0.7em;
}
li.checked::before {
border: 1px solid #5e7ce0;
background:
#5e7ce0
url('data:image/svg+xml;base64,PHN2ZyB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNoZWNrYm94LXRpY2sgIiB2ZXJzaW9uPSIxLjEiDQogICAgIHZpZXdCb3g9IjAgMCAyMCAyMCIgeD0iMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHk9IjBweCIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsiPg0KICA8cG9seWxpbmUgc3R5bGU9Ig0KICAgIHN0cm9rZTogI0ZGRkZGRjsNCiAgICBzdHJva2UtZGFzaGFycmF5OiA1MDsNCiAgICBzdHJva2Utd2lkdGg6IDI7DQogICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgIGZpbGw6IG5vbmU7DQogICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7DQoiIGNsYXNzPSJ0aWNrIHBhdGggbm8tYW5pbWF0aW9uIiBwb2ludHM9IjIuNiwxMSA2LjksMTUuMiAxNy40LDQuOCI+PC9wb2x5bGluZT4NCjwvc3ZnPg0K');
}
li.checked > .ql-ui,
li.unchecked > .ql-ui {
top: 0;
}
}

14
packages/fluent-editor/src/config.ts
View File

@ -188,3 +188,17 @@ export function inputFile(type, accept) {
}
fileInput.click()
}
export function getListValue(value, preListValue) {
let curListValue = value;
if (preListValue && preListValue === value) {
curListValue = false;
} else if (value === 'check') {
if (preListValue === 'checked' || preListValue === 'unchecked') {
curListValue = false;
} else {
curListValue = 'unchecked';
}
}
return curListValue;
}

38
packages/fluent-editor/src/fluent-editor.ts
View File

@ -1,5 +1,5 @@
import Quill from 'quill'
import { FONT_FAMILY_CONFIG, FONT_SIZE_CONFIG, ICONS_CONFIG, TABLE_RIGHT_MENU_CONFIG, inputFile } from './config'
import { FONT_FAMILY_CONFIG, FONT_SIZE_CONFIG, ICONS_CONFIG, TABLE_RIGHT_MENU_CONFIG, inputFile, getListValue } from './config'
import Counter from './counter' // 字符统计
import CustomClipboard from './custom-clipboard' // 粘贴板
import CustomImage from './custom-image/BlotFormatter' // 图片
@ -53,7 +53,41 @@ const registerModules = function () {
const accept = this.quill.options?.uploadOption?.imageAccept
inputFile.call(this, 'image', accept)
},
fullscreen: function() {}
fullscreen: function() {},
list: function (value) {
const range = this.quill.getSelection();
const formats = this.quill.getFormat(range);
const preListValue = Array.isArray(formats.list) ? formats.list[0]?.value : formats.list?.value;
const curListValue = getListValue(value, preListValue);
// 如果设置list的选区中有表格，判断第一个table-col位置，将表格前的内容设置为list格式
const lines = this.quill.getLines(range.index, range.length);
const tableCols = lines.filter((line) => line.statics.blotName === 'table-col' && !line.prev);
if (tableCols.length) {
let start = range.index;
// 遍历table-col群组，以之获取表格，将表格前选区设置为对应list格式
tableCols.forEach((item, index) => {
const table = item.domNode.closest('table.quill-better-table');
const tableBlot = Quill.find(table);
const tableLength = tableBlot.length();
const tableStart = this.quill.getIndex(item);
const tableEnd = tableStart + tableLength;
const beforeTableRangeLength = tableStart - start;
// 在表格前设置列表
this.quill.setSelection(start, beforeTableRangeLength, Quill.sources.SILENT);
this.quill.format('list', curListValue, Quill.sources.USER);
table.parentNode.classList.remove('quill-better-table-selected');
// 当前表格末尾为下一个选取的开始
start = tableEnd;
if (index === tableCols.length - 1) {
// 将最后一个表格之后所有选区内容设置list格式
this.quill.setSelection(tableEnd, range.index + range.length - tableEnd);
this.quill.format('list', curListValue, Quill.sources.USER);
}
});
} else {
this.quill.format('list', curListValue, Quill.sources.USER);
}
},
}
},
'better-table': {