feat: Tencent#424 增加对齐方式语法和对应按钮

examples/scripts/index-demo.js

@@ -157,6 +157,7 @@ var basicConfig = {
       'ul',
       'checklist',
       'panel',
+      'justify',
       'detail',
       '|',
       'formula',

src/Cherry.config.js

@@ -223,6 +223,7 @@ const defaultConfig = {
       '|',
       'list',
       'panel',
+      // 'justify', // 对齐方式，默认不推荐这么“复杂”的样式要求
       'detail',
       {
         insert: [

src/core/hooks/Panel.js

@@ -42,18 +42,35 @@ 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(
-        `<div class="cherry-panel cherry-panel__${type}" data-sign="${sign}" data-lines="${lineCount}" >${title}${body}</div>`,
+        `<div class="${className}" data-sign="${sign}" data-lines="${lineCount}" ${appendStyle}>${title}${body}</div>`,
         sign,
         lineCount,
       );
       return prependLineFeedForParagraph(match, ret);
     });
   }
 
+  $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 = `<div class="cherry-panel--title ${ret.title ? 'cherry-panel--title__not-empty' : ''}">${
       ret.title
     }</div>`;
@@ -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';
     }

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" }
+.ch-icon-warning:before { content: "\EA6B" }

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;

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

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 ' ';
+  }
+}