From b0f25db03af466514fe4e27dfb2f7c42c1f40257 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?sunsonliu=28=E5=88=98=E9=98=B3=29?= Date: Mon, 24 Apr 2023 11:18:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20#424=20=E5=A2=9E=E5=8A=A0=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=E6=96=B9=E5=BC=8F=E8=AF=AD=E6=B3=95=E5=92=8C=E5=AF=B9?= =?UTF-8?q?=E5=BA=94=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/scripts/index-demo.js | 1 + src/Cherry.config.js | 1 + src/core/hooks/Panel.js | 32 +++++++++++++++-- src/sass/ch-icon.scss | 6 +++- src/sass/icons/uEA6C-justify.svg | 19 ++++++++++ src/sass/icons/uEA6D-justifyCenter.svg | 19 ++++++++++ src/sass/icons/uEA6E-justifyLeft.svg | 19 ++++++++++ src/sass/icons/uEA6F-justifyRight.svg | 19 ++++++++++ src/sass/markdown.scss | 13 +++++++ src/toolbars/HookCenter.js | 2 ++ src/toolbars/hooks/Justify.js | 48 ++++++++++++++++++++++++++ 11 files changed, 175 insertions(+), 4 deletions(-) create mode 100644 src/sass/icons/uEA6C-justify.svg create mode 100644 src/sass/icons/uEA6D-justifyCenter.svg create mode 100644 src/sass/icons/uEA6E-justifyLeft.svg create mode 100644 src/sass/icons/uEA6F-justifyRight.svg create mode 100644 src/toolbars/hooks/Justify.js diff --git a/examples/scripts/index-demo.js b/examples/scripts/index-demo.js index 462980cd..bfa2fbd0 100644 --- a/examples/scripts/index-demo.js +++ b/examples/scripts/index-demo.js @@ -157,6 +157,7 @@ var basicConfig = { 'ul', 'checklist', 'panel', + 'justify', 'detail', '|', 'formula', diff --git a/src/Cherry.config.js b/src/Cherry.config.js index 578d3908..7520c5a5 100644 --- a/src/Cherry.config.js +++ b/src/Cherry.config.js @@ -223,6 +223,7 @@ const defaultConfig = { '|', 'list', 'panel', + // 'justify', // 对齐方式，默认不推荐这么“复杂”的样式要求 'detail', { insert: [ diff --git a/src/core/hooks/Panel.js b/src/core/hooks/Panel.js index 2a62353a..6d377ff5 100644 --- a/src/core/hooks/Panel.js +++ b/src/core/hooks/Panel.js @@ -42,9 +42,9 @@ export default class Panel extends ParagraphBase { return str.replace(this.RULE.reg, (match, preLines, name, content) => { const lineCount = this.getLineCount(match, preLines); const sign = this.$engine.md5(match); - const { type, title, body } = this.$getPanelInfo(name, content, sentenceMakeFunc); + const { title, body, appendStyle, className } = this.$getPanelInfo(name, content, sentenceMakeFunc); const ret = this.pushCache( - `
${title}${body}
`, + `
${title}${body}
`, sign, lineCount, ); @@ -52,8 +52,25 @@ export default class Panel extends ParagraphBase { }); } + $getClassByType(type) { + if (/(left|right|center)/i.test(type)) { + return `cherry-text-align cherry-text-align__${type}`; + } + return `cherry-panel cherry-panel__${type}`; + } + $getPanelInfo(name, str, sentenceMakeFunc) { - const ret = { type: this.$getTargetType(name), title: sentenceMakeFunc(this.$getTitle(name)).html, body: str }; + const ret = { + type: this.$getTargetType(name), + title: sentenceMakeFunc(this.$getTitle(name)).html, + body: str, + appendStyle: '', + className: '', + }; + ret.className = this.$getClassByType(ret.type); + if (/(left|right|center)/i.test(ret.type)) { + ret.appendStyle = `style="text-align:${ret.type};"`; + } ret.title = `
${ ret.title }
`; @@ -104,6 +121,15 @@ export default class Panel extends ParagraphBase { case 'success': case 's': return 'success'; + case 'right': + case 'r': + return 'right'; + case 'center': + case 'c': + return 'center'; + case 'left': + case 'l': + return 'left'; default: return 'primary'; } diff --git a/src/sass/ch-icon.scss b/src/sass/ch-icon.scss index 3fd06873..b6949c88 100644 --- a/src/sass/ch-icon.scss +++ b/src/sass/ch-icon.scss @@ -20,6 +20,10 @@ -moz-osx-font-smoothing: grayscale; } +.ch-icon-justify:before { content: "\EA6C" } +.ch-icon-justifyCenter:before { content: "\EA6D" } +.ch-icon-justifyLeft:before { content: "\EA6E" } +.ch-icon-justifyRight:before { content: "\EA6F" } .ch-icon-list:before { content: "\EA03" } .ch-icon-check:before { content: "\EA04" } .ch-icon-square:before { content: "\EA09" } @@ -101,4 +105,4 @@ .ch-icon-danger:before { content: "\EA68" } .ch-icon-info:before { content: "\EA69" } .ch-icon-primary:before { content: "\EA6A" } -.ch-icon-warning:before { content: "\EA6B" } \ No newline at end of file +.ch-icon-warning:before { content: "\EA6B" } \ No newline at end of file diff --git a/src/sass/icons/uEA6C-justify.svg b/src/sass/icons/uEA6C-justify.svg new file mode 100644 index 00000000..9f375259 --- /dev/null +++ b/src/sass/icons/uEA6C-justify.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/src/sass/icons/uEA6D-justifyCenter.svg b/src/sass/icons/uEA6D-justifyCenter.svg new file mode 100644 index 00000000..3eb4c907 --- /dev/null +++ b/src/sass/icons/uEA6D-justifyCenter.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/src/sass/icons/uEA6E-justifyLeft.svg b/src/sass/icons/uEA6E-justifyLeft.svg new file mode 100644 index 00000000..9f375259 --- /dev/null +++ b/src/sass/icons/uEA6E-justifyLeft.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/src/sass/icons/uEA6F-justifyRight.svg b/src/sass/icons/uEA6F-justifyRight.svg new file mode 100644 index 00000000..fb6a746d --- /dev/null +++ b/src/sass/icons/uEA6F-justifyRight.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/src/sass/markdown.scss b/src/sass/markdown.scss index 4f071173..8acac2fb 100644 --- a/src/sass/markdown.scss +++ b/src/sass/markdown.scss @@ -503,6 +503,19 @@ div[data-type='codeBlock'] { } } +.cherry-text-align__center { + table { + margin-left: auto; + margin-right: auto; + } +} + +.cherry-text-align__right { + table { + margin-left: auto; + } +} + .cherry-panel { margin: 10px 0; overflow: hidden; diff --git a/src/toolbars/HookCenter.js b/src/toolbars/HookCenter.js index caf0c632..30401644 100644 --- a/src/toolbars/HookCenter.js +++ b/src/toolbars/HookCenter.js @@ -66,6 +66,7 @@ import Theme from './hooks/Theme'; import MobilePreview from './hooks/MobilePreview'; import Copy from './hooks/Copy'; import Panel from './hooks/Panel'; +import Justify from './hooks/Justify'; import Detail from './hooks/Detail'; import DrawIo from './hooks/DrawIo'; @@ -122,6 +123,7 @@ const HookList = { theme: Theme, file: File, panel: Panel, + justify: Justify, detail: Detail, drawIo: DrawIo, }; diff --git a/src/toolbars/hooks/Justify.js b/src/toolbars/hooks/Justify.js new file mode 100644 index 00000000..c2d8a76f --- /dev/null +++ b/src/toolbars/hooks/Justify.js @@ -0,0 +1,48 @@ +/** + * Copyright (C) 2021 THL A29 Limited, a Tencent company. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import Panel from './Panel'; +import { getPanelRule } from '@/utils/regexp'; +/** + * 插入对齐方式 + */ +export default class Justify extends Panel { + constructor($cherry) { + super($cherry); + this.setName('justify', 'justify'); + this.panelRule = getPanelRule().reg; + this.subMenuConfig = [ + { + iconName: 'justifyLeft', + name: '左对齐', + onclick: this.bindSubClick.bind(this, 'left'), + }, + { + iconName: 'justifyCenter', + name: '居中', + onclick: this.bindSubClick.bind(this, 'center'), + }, + { + iconName: 'justifyRight', + name: '右对齐', + onclick: this.bindSubClick.bind(this, 'right'), + }, + ]; + } + + $getTitle() { + return ' '; + } +}