From 2517e5c640c2fb386f30a74cabe1fcbb6b15fb4a Mon Sep 17 00:00:00 2001 From: shonen7 <83808926@qq.com> Date: Sun, 15 Oct 2023 20:30:23 -0700 Subject: [PATCH 1/3] Fix rich-text-edtior functionality and style issues --- .../webdoc/rich-text-editor.js | 32 +++++++++---------- .../renderless/src/rich-text-edtior/index.ts | 4 +++ .../renderless/src/rich-text-edtior/vue.ts | 2 +- .../theme/src/rich-text-editor/index.less | 12 +++++++ 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js b/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js index 14ac0a5839..ce55cbcb1e 100644 --- a/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js +++ b/examples/sites/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js @@ -8,12 +8,12 @@ export default { 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' }, 'codeFiles': ['basic-usage.vue'] }, - { - 'demoId': 'collaboration-usage', - 'name': { 'zh-CN': '协同编辑用法', 'en-US': 'Basic Usage' }, - 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' }, - 'codeFiles': ['collaboration-usage.vue'] - }, + // { + // 'demoId': 'collaboration-usage', + // 'name': { 'zh-CN': '协同编辑用法', 'en-US': 'Basic Usage' }, + // 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' }, + // 'codeFiles': ['collaboration-usage.vue'] + // }, { 'demoId': 'custom-bar-usage', 'name': { 'zh-CN': '自定义工具栏用法', 'en-US': 'Basic Usage' }, @@ -54,16 +54,16 @@ export default { }, demoId: 'basic-usage' }, - { - 'name': 'collaboration', - 'type': 'Boolean', - 'defaultValue': 'false', - desc: { - 'zh-CN': '是否开启协同编辑，默认不开启', - 'en-US': 'Whether to enable collaborative editing. It is disabled by default' - }, - demoId: 'basic-usage' - }, + // { + // 'name': 'collaboration', + // 'type': 'Boolean', + // 'defaultValue': 'false', + // desc: { + // 'zh-CN': '是否开启协同编辑，默认不开启', + // 'en-US': 'Whether to enable collaborative editing. It is disabled by default' + // }, + // demoId: 'basic-usage' + // }, { 'name': 'customToolBar', 'type': 'Array', diff --git a/packages/renderless/src/rich-text-edtior/index.ts b/packages/renderless/src/rich-text-edtior/index.ts index 8db7b91dc6..c4d7c0f7b9 100644 --- a/packages/renderless/src/rich-text-edtior/index.ts +++ b/packages/renderless/src/rich-text-edtior/index.ts @@ -41,6 +41,10 @@ export const handleChange = (editor) => { export const setLink = (editor) => { return () => { const previousUrl = editor.getAttributes('link').href + if (previousUrl) { + editor.chain().focus().toggleMark('link').run() + return + } const url = window.prompt('URL', previousUrl) if (url === null) { return diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts index 75db4b1f39..32c185bac3 100644 --- a/packages/renderless/src/rich-text-edtior/vue.ts +++ b/packages/renderless/src/rich-text-edtior/vue.ts @@ -149,7 +149,7 @@ export const renderless = ( const CustomSize = Paragraph.extend({ addOptions() { return { - size: [12, 14, 16, 18, 20] + size: [12, 14, 16, 18, 20, 24, 30] } }, addAttributes() { diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less index 75bbadb800..712a1ccf37 100644 --- a/packages/theme/src/rich-text-editor/index.less +++ b/packages/theme/src/rich-text-editor/index.less @@ -3,6 +3,18 @@ .tiny-rich-text-editor { .component-css-vars-rich-text-editor(); + strong { + font-weight: bold; + } + + em { + font-style: italic; + } + + a, a:hover { + text-decoration: underline; + } + height: 100%; &__toolbar { From 5b5cf6f397e924cf32305904aea51daaefd2c379 Mon Sep 17 00:00:00 2001 From: shonen7 <83808926@qq.com> Date: Sun, 22 Oct 2023 23:57:29 -0700 Subject: [PATCH 2/3] fix(Rich Text Editor): Fix bugs in the Rich Text Editor --- .../renderless/src/rich-text-edtior/vue.ts | 26 +++--- .../theme/src/rich-text-editor/index.less | 83 ++++++++++++++++--- packages/theme/src/rich-text-editor/vars.less | 5 ++ packages/vue-locale/src/lang/zh-CN.ts | 2 +- packages/vue/src/rich-text-editor/src/pc.vue | 8 +- 5 files changed, 97 insertions(+), 27 deletions(-) diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts index 32c185bac3..59a0313b86 100644 --- a/packages/renderless/src/rich-text-edtior/vue.ts +++ b/packages/renderless/src/rich-text-edtior/vue.ts @@ -67,33 +67,33 @@ export const renderless = ( let toolBar = [ 'bold', 'italic', - 'link', - 'unlink', - 'highlight', 'underline', 'strike', - 'subscript', - 'superscript', + 'quote', 'code', + 'codeBlock', 'unorderedlist', 'orderedlist', 'taskList', - 'quote', - 'codeBlock', - 'formatClear', - 'nodeDelete', + 'subscript', + 'superscript', + // 'nodeDelete', 'undo', 'redo', 'left', 'center', 'right', + 'h-box', 'font-size', 'line-height', - 'h-box', - 'img', + 'highlight', 'color', - 'table', - 'backgroundColor' + 'backgroundColor', + 'formatClear', + 'link', + 'unlink', + 'img', + 'table' ] if (props.customToolBar) { toolBar = props.customToolBar diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less index 712a1ccf37..6718720bbb 100644 --- a/packages/theme/src/rich-text-editor/index.less +++ b/packages/theme/src/rich-text-editor/index.less @@ -15,6 +15,45 @@ text-decoration: underline; } + h1 { + font-size: 2em; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + font-weight: bold; + } + + h2 { + font-size: 1.5em; + margin-block-start: 0.83em; + margin-block-end: 0.83em; + font-weight: bold; + } + + h3 { + font-size: 1.17em; + margin-block-start: 1em; + margin-block-end: 1em; + font-weight: bold; + } + + h4 { + margin-block-start: 1.33em; + margin-block-end: 1.33em; + font-weight: bold; + } + + h5 { + font-size: 0.83em; + margin-block-start: 1.67em; + margin-block-end: 1.67em; + } + + h6 { + font-size: 0.83em; + margin-block-start: 1.67em; + margin-block-end: 1.67em; + } + height: 100%; &__toolbar { @@ -71,20 +110,32 @@ .h-options { position: absolute; - background-color: #dfdede; padding: .15rem; + background-color: var(--ti-rich-text-edito-options-bg-color); left: 0px; display: none; - border-radius: .4rem; + border-radius: var(--ti-rich-text-edito-options-border-radius); + box-shadow: var(--ti-rich-text-edito-options-box-shadow); z-index: 999; button { + color: black; margin: 0; + text-align: center; + line-height: var(--ti-common-line-height-3); + svg, path { + fill: black; + } + &:hover { + background-color: var(--ti-rich-text-edito-options-item-bg-color); + svg, path { + fill: var(--ti-rich-text-edito-options-item-hover-color); + } + } } } &:hover { - background-color: #d2e4ff; .h-options { display: flex; @@ -92,7 +143,6 @@ button { width: auto; - color: black; } } } @@ -223,15 +273,23 @@ .line-height-options { position: absolute; - background-color: #dfdede; padding: .15rem; + background-color: var(--ti-rich-text-edito-options-bg-color); left: 0px; display: none; - border-radius: .4rem; + border-radius: var(--ti-rich-text-edito-options-border-radius); + box-shadow: var(--ti-rich-text-edito-options-box-shadow); z-index: 999; button { + color: black; margin: 0; + text-align: center; + line-height: var(--ti-common-line-height-3); + &:hover { + background-color: var(--ti-rich-text-edito-options-item-bg-color); + color: var(--ti-rich-text-edito-options-item-hover-color); + } } } @@ -242,7 +300,6 @@ button { width: auto; - color: black; } } } @@ -265,19 +322,25 @@ .font-size-options { display: none; position: absolute; - border-radius: 0.4rem; - background-color: #dfdede; + border-radius: var(--ti-rich-text-edito-options-border-radius); + background-color: var(--ti-rich-text-edito-options-bg-color); + box-shadow: var(--ti-rich-text-edito-options-box-shadow); z-index: 99; button { color: black; margin: 0; text-align: center; + line-height: var(--ti-common-line-height-3); + &:hover { + background-color: var(--ti-rich-text-edito-options-item-bg-color); + color: var(--ti-rich-text-edito-options-item-hover-color); + } } } &:hover { - background-color: #d2e4ff; + background-color: var(--ti-rich-text-edito-options-item-bg-color); .font-size-options { display: flex; diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less index 5cbc0f6765..a3ce718d3f 100644 --- a/packages/theme/src/rich-text-editor/vars.less +++ b/packages/theme/src/rich-text-editor/vars.less @@ -6,4 +6,9 @@ --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled); --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background); --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color); + --ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal); + --ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down); + --ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal); + --ti-rich-text-edito-options-item-padding: var(--ti-common-space-6) var(--ti-common-space-5x); + --ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover); } diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts index aac3a61afd..99940a1812 100644 --- a/packages/vue-locale/src/lang/zh-CN.ts +++ b/packages/vue-locale/src/lang/zh-CN.ts @@ -172,7 +172,7 @@ export default { taskList: '任务列表', quote: '引用', codeBlock: '代码块', - formatClear: '清楚标记', + formatClear: '清除标记', nodeDelete: '删除节点', undo: '回退', redo: '前进', diff --git a/packages/vue/src/rich-text-editor/src/pc.vue b/packages/vue/src/rich-text-editor/src/pc.vue index d32211dbab..70889edfcc 100644 --- a/packages/vue/src/rich-text-editor/src/pc.vue +++ b/packages/vue/src/rich-text-editor/src/pc.vue @@ -91,7 +91,7 @@ class="color-button" > Date: Tue, 24 Oct 2023 04:55:28 -0700 Subject: [PATCH 3/3] fix(rich-text-editor): Change the display of event triggered Demo, fix style issues, and fix component errors --- .../event-usage-composition-api.vue | 56 +++---------------- .../pc/app/rich-text-editor/event-usage.vue | 56 +++---------------- .../renderless/src/rich-text-edtior/vue.ts | 3 +- .../theme/src/rich-text-editor/index.less | 41 +++++++++++++- 4 files changed, 58 insertions(+), 98 deletions(-) diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue index 474fc68632..a1d9f3f2d1 100644 --- a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue +++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue @@ -7,67 +7,27 @@ \ No newline at end of file diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue index 917dbdca1a..ff361b912b 100644 --- a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue +++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue @@ -13,68 +13,28 @@ export default { }, methods: { beforeCreate(editor) { - Notify({ - type: 'info', - message: 'beforeCreate', - position: 'top', - duration: 3000, - }) + console.log('beforeCreate') }, create(editor) { - Notify({ - type: 'info', - message: 'create', - position: 'top', - duration: 3000, - }) + console.log('create') }, focus(editor) { - Notify({ - type: 'info', - message: 'focus', - position: 'top', - duration: 3000, - }) + console.log('focus') }, blur(editor) { - Notify({ - type: 'info', - message: 'blur', - position: 'top', - duration: 3000, - }) + console.log('blur') }, selectionUpdate(editor) { - Notify({ - type: 'info', - message: 'selectionUpdate', - position: 'top', - duration: 3000, - }) + console.log('selectionUpdate') }, transaction(editor) { - Notify({ - type: 'info', - message: 'transaction', - position: 'top', - duration: 3000, - }) + console.log('transaction') }, destroy(editor) { - Notify({ - type: 'info', - message: 'destroy', - position: 'top', - duration: 3000, - }) + console.log('destroy') }, update(editor) { - Notify({ - type: 'info', - message: 'update', - position: 'top', - duration: 3000, - }) + console.log('update') }, }, } diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts index 59a0313b86..7b60e779aa 100644 --- a/packages/renderless/src/rich-text-edtior/vue.ts +++ b/packages/renderless/src/rich-text-edtior/vue.ts @@ -293,7 +293,8 @@ export const renderless = ( }), ) } - const editor = new Editor(props.options ? props.options : defaultOptions) + let options = props.options ? Object.assign(defaultOptions, props.options) : defaultOptions + const editor = new Editor(options) const box = ref(null) const fontSize = ref('16px') diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less index 6718720bbb..41d46ebb1f 100644 --- a/packages/theme/src/rich-text-editor/index.less +++ b/packages/theme/src/rich-text-editor/index.less @@ -70,6 +70,10 @@ background: transparent; cursor: pointer; + svg, input { + cursor: pointer; + } + &:not(:disabled):hover, &.is-active { background-color: #d2e4ff; @@ -101,6 +105,20 @@ overflow: hidden; display: inline-block; } + + .tippy-box { + .tippy-content { + .bubble-menu { + button { + border-width: 1px; + border-left: none; + } + &:nth-child(1) { + border-left-width: 1px; + } + } + } + } } // p-h1~6 @@ -353,7 +371,7 @@ // 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体 .tiny-rich-text-editor__container { overflow: auto; - padding: 0 10px; + padding: 10px; height: 100%; border: 1px solid var(--ti-rich-text-editor-box-outline-color); border-top: 0; @@ -401,6 +419,27 @@ line-height: 1.1; } + p { + margin: 0; + line-height: 1; + + &[level='1'] { + line-height: 1; + } + + &[level='1.5'] { + line-height: 1.5; + } + + &[level='2'] { + line-height: 2; + } + + &[level='2.5'] { + line-height: 2.5; + } + } + code { background-color: rgba(#616161, 0.1); color: #616161;