Skip to content

Commit

Permalink
pref: add additional attributes and colgroup for tables (halo-dev#5176)
Browse files Browse the repository at this point in the history 
/kind improvmenet
/area editor
/milestone 2.12.x

为默认编辑器 table 组件渲染后的结果中增加 `colgroup`，并为 table 增加 `width` 与 `minWidth` 属性。
用于解决渲染完成之后的 table html 宽度与编辑时不一致的问题。

拖拽修改默认编辑器表格列宽，查看生成后的 html 列宽是否同样发生了变化，并且查看生成的 html 结构下是否具有 `colgroup` html 元素。

Fixes halo-dev#5138

```release-note
为默认富文本编辑器 table 组件渲染后的 html 增加 colgroup 元素与 width 属性
```

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace
  • Loading branch information
@LIlGG
LIlGG committed Jan 19, 2024
1 parent 7dadb85 commit 29a87a8
Show file tree
Hide file tree
Showing 7 changed files with 207 additions and 115 deletions.
2 changes: 1 addition & 1 deletion console/packages/editor/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"@tiptap/extension-strike": "^2.1.15",
"@tiptap/extension-subscript": "^2.1.15",
"@tiptap/extension-superscript": "^2.1.15",
"@tiptap/extension-table": "^2.1.15",
"@tiptap/extension-table": "2.2.0-rc.8",
"@tiptap/extension-table-row": "^2.1.15",
"@tiptap/extension-task-item": "^2.1.15",
"@tiptap/extension-task-list": "^2.1.15",
Expand Down
39 changes: 18 additions & 21 deletions console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,10 @@ const findState = computed(() => {
};
});
// 查找下一个搜索结果
const findNextSearchResult = () => {
props.editor.commands.findNext();
};
// 查找上一个搜索结果
const findPreviousSearchResult = () => {
props.editor.commands.findPrevious();
};
Expand All @@ -71,7 +69,6 @@ const updateSearchReplace = (value: any) => {
flag.value = !flag.value;
};
// 替换当前搜索结果
const replace = () => {
props.editor.commands.replace();
flag.value = !flag.value;
Expand Down Expand Up @@ -153,7 +150,7 @@ watch(
<template>
<Transition v-show="visible" appear name="slide">
<div
class="absolute float-right top-0 right-5 z-50 flex justify-end bg-white shadow p-1 rounded min-w-[500px]"
class="absolute float-right top-0 right-5 z-50 flex justify-end bg-white shadow p-1 !pt-2 rounded min-w-[500px]"
@keydown.escape.prevent="handleCloseSearch"
>
<section class="w-full flex flex-col gap-1">
Expand All @@ -163,7 +160,7 @@ watch(
ref="searchInput"
v-model="searchTerm"
type="text"
class="block w-full p-1 ps-2 pr-24 bg-gray-50 rounded-sm text-sm border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
class="block w-full p-1 ps-2 pr-24 bg-gray-50 rounded-sm border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
:placeholder="
i18n.global.t(
'editor.extensions.search_and_replace.search_placeholder'
Expand All @@ -180,9 +177,9 @@ watch(
)
"
type="button"
class="p-1 rounded-sm hover:bg-gray-200"
class="p-0.5 rounded-sm hover:bg-gray-200"
:class="{
'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
'!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
caseSensitive,
}"
@click="caseSensitive = !caseSensitive"
Expand All @@ -196,9 +193,9 @@ watch(
)
"
type="button"
class="p-1 rounded-sm hover:bg-gray-200"
class="p-0.5 rounded-sm hover:bg-gray-200"
:class="{
'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
'!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
matchWord,
}"
@click="matchWord = !matchWord"
Expand All @@ -212,9 +209,9 @@ watch(
)
"
type="button"
class="p-1 rounded-sm hover:bg-gray-200"
class="p-0.5 rounded-sm hover:bg-gray-200"
:class="{
'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
'!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
regex,
}"
@click="regex = !regex"
Expand Down Expand Up @@ -251,9 +248,9 @@ watch(
)
"
type="button"
class="p-1 rounded-sm opacity-50"
class="p-0.5 rounded-sm opacity-50"
:class="{
'hover:bg-gray-200 opacity-100': findState.findCount > 0,
'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
}"
:disabled="findState.findCount === 0"
@click="findPreviousSearchResult"
Expand All @@ -265,9 +262,9 @@ watch(
i18n.global.t('editor.extensions.search_and_replace.find_next')
"
type="button"
class="p-1 rounded-sm opacity-50"
class="p-0.5 rounded-sm opacity-50"
:class="{
'hover:bg-gray-200 opacity-100': findState.findCount > 0,
'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
}"
:disabled="findState.findCount === 0"
@click="findNextSearchResult"
Expand All @@ -279,7 +276,7 @@ watch(
i18n.global.t('editor.extensions.search_and_replace.close')
"
type="button"
class="p-1 rounded-sm hover:bg-gray-200"
class="p-0.5 rounded-sm hover:bg-gray-200"
@click="handleCloseSearch"
>
<MdiClose></MdiClose>
Expand All @@ -292,7 +289,7 @@ watch(
<input
v-model="replaceTerm"
type="text"
class="block w-full p-1 ps-2 rounded-sm bg-gray-50 border text-sm border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
class="block w-full p-1 ps-2 rounded-sm bg-gray-50 border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
:placeholder="
i18n.global.t(
'editor.extensions.search_and_replace.replace_placeholder'
Expand All @@ -308,9 +305,9 @@ watch(
i18n.global.t('editor.extensions.search_and_replace.replace')
"
type="button"
class="p-1 rounded-sm opacity-50"
class="p-0.5 rounded-sm opacity-50"
:class="{
'hover:bg-gray-200 opacity-100': findState.findCount > 0,
'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
}"
:disabled="findState.findCount === 0"
@click="replace"
Expand All @@ -324,9 +321,9 @@ watch(
)
"
type="button"
class="p-1 rounded-sm opacity-50"
class="p-0.5 rounded-sm opacity-50"
:class="{
'hover:bg-gray-200 opacity-100': findState.findCount > 0,
'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
}"
:disabled="findState.findCount === 0"
@click="replaceAll"
Expand Down
Loading

0 comments on commit 29a87a8

Please sign in to comment.