@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/core/hooks/Link.js

@@ -0,0 +1,160 @@
+/**
+ * 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 SyntaxBase from '@/core/SyntaxBase';
+import { escapeHTMLSpecialChar as _e, isValidScheme, encodeURIOnce } from '@/utils/sanitize';
+import { compileRegExp, isLookbehindSupported, NOT_ALL_WHITE_SPACES_INLINE } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+import UrlCache from '@/UrlCache';
+
+export default class Link extends SyntaxBase {
+  static HOOK_NAME = 'link';
+
+  constructor({ config, globalConfig }) {
+    super({ config });
+    // eslint-disable-next-line no-nested-ternary
+    this.target = config.target ? `target="${config.target}"` : !!config.openNewPage ? 'target="_blank"' : '';
+    this.rel = config.rel ? `rel="${config.rel}"` : '';
+  }
+
+  /**
+   * 校验link中text的方括号是否符合规则
+   * @param {string} rawText
+   */
+  checkBrackets(rawText) {
+    const stack = [];
+    const text = `[${rawText}]`;
+    // 前方有奇数个\当前字符被转义
+    const checkEscape = (place) => text.slice(0, place).match(/\\*$/)[0].length & 1;
+    for (let i = text.length - 1; text[i]; i--) {
+      if (i === text.length - 1 && checkEscape(i)) break;
+      if (text[i] === ']' && !checkEscape(i)) stack.push(']');
+      if (text[i] === '[' && !checkEscape(i)) {
+        stack.pop();
+        if (!stack.length) {
+          return {
+            isValid: true,
+            coreText: text.slice(i + 1, text.length - 1),
+            extraLeadingChar: text.slice(0, i),
+          };
+        }
+      }
+    }
+    return {
+      isValid: false, // 方括号匹配不上
+      coreText: rawText,
+      extraLeadingChar: '',
+    };
+  }
+
+  /**
+   *
+   * @param {string} match 匹配的完整字符串
+   * @param {string} leadingChar 正则分组一：前置字符
+   * @param {string} text 正则分组二：链接文字
+   * @param {string|undefined} link 正则分组三：链接URL
+   * @param {string|undefined} title 正则分组四：链接title
+   * @param {string|undefined} ref 正则分组五：链接引用
+   * @param {string|undefined} target 正则分组六：新窗口打开
+   * @returns
+   */
+  toHtml(match, leadingChar, text, link, title, ref, target) {
+    const refType = typeof link === 'undefined' ? 'ref' : 'url';
+    let attrs = '';
+    if (refType === 'ref') {
+      // 全局引用，理应在CommentReference中被替换，没有被替换说明没有定义引用项
+      return match;
+    }
+
+    if (refType === 'url') {
+      const { isValid, coreText, extraLeadingChar } = this.checkBrackets(text);
+      if (!isValid) return match;
+      attrs = title && title.trim() !== '' ? ` title="${_e(title.replace(/["']/g, ''))}"` : '';
+      if (target) {
+        attrs += ` target="${target.replace(/{target\s*=\s*(.*?)}/, '$1')}"`;
+      } else if (this.target) {
+        attrs += ` ${this.target}`;
+      }
+      let processedURL = link.trim().replace(/~1D/g, '~D'); // 还原替换的$符号
+      const processedText = coreText.replace(/~1D/g, '~D'); // 还原替换的$符号
+      // text可能是html标签，依赖htmlBlock进行处理
+      if (isValidScheme(processedURL)) {
+        processedURL = this.$engine.urlProcessor(processedURL, 'link');
+        processedURL = encodeURIOnce(processedURL);
+        return `${leadingChar + extraLeadingChar}<a href="${UrlCache.set(processedURL)}" ${
+          this.rel
+        } ${attrs}>${processedText}</a>`;
+      }
+      return `${leadingChar + extraLeadingChar}<span>${text}</span>`;
+    }
+    // should never happen
+    return match;
+  }
+
+  toStdMarkdown(match) {
+    return match;
+  }
+
+  makeHtml(str) {
+    let $str = str.replace(this.RULE.reg, (match) => {
+      return match.replace(/~D/g, '~1D');
+    });
+    if (isLookbehindSupported()) {
+      $str = $str.replace(this.RULE.reg, this.toHtml.bind(this));
+    } else {
+      $str = replaceLookbehind($str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+    }
+    $str = $str.replace(this.RULE.reg, (match) => {
+      return match.replace(/~1D/g, '~D');
+    });
+    return $str;
+  }
+
+  rule() {
+    // (?<protocol>\\w+:)\\/\\/
+    const ret = {
+      // lookbehind启用分组是为了和不兼容lookbehind的场景共用一个回调
+      begin: isLookbehindSupported() ? '((?<!\\\\))' : '(^|[^\\\\])',
+      content: [
+        '\\[([^\\n]*?)\\]', // ?<text>
+        '[ \\t]*', // any spaces
+        `${
+          '(?:' +
+          '\\(' +
+          /**
+           * allow double quotes
+           * e.g.
+           * [link](") ⭕️ valid
+           * [link]("") ⭕️ valid
+           * [link](()) ⭕️ valid
+           * [link](" ") ❌ invalid
+           */
+          '((?:[^\\s()]*\\([^\\s()]*\\)[^\\s()]*)+|[^\\s)]+)' + // ?<link> url
+          '(?:[ \\t]((?:".*?")|(?:\'.*?\')))?' + // ?<title> optional
+          '\\)' +
+          '|' + // or
+          '\\[('
+        }${NOT_ALL_WHITE_SPACES_INLINE})\\]` + // ?<ref> global ref
+          ')',
+        '(\\{target\\s*=\\s*(_blank|_parent|_self|_top)\\})?',
+      ].join(''),
+      end: '',
+    };
+    // let ret = {begin:'((^|[^\\\\])\\*\\*|([\\s]|^)__)',
+    // end:'(\\*\\*([\\s\\S]|$)|__([\\s]|$))', content:'([^\\n]+?)'};
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/List.js

@@ -0,0 +1,264 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+
+const INDENT_SPACE_NUM = 4; // commonmark default use 1~4 spaces for indent
+const TAB_SPACE_NUM = 4; // 1 tab === 4 space
+
+function attrsToAttributeString(object) {
+  if (typeof object !== 'object' && Object.keys(object).length < 1) {
+    return '';
+  }
+  const attrs = ['']; // 为了join一步到位
+  Object.keys(object).forEach((key) => {
+    attrs.push(`${key}="${object[key]}"`);
+  });
+  return attrs.join(' ');
+}
+
+export function makeChecklist(text) {
+  return text.replace(/^((?:|[\t ]+)[*+-]\s+)\[(\s|x)\]/gm, (whole, pre, test) => {
+    const checkHtml = /\s/.test(test)
+      ? '<span class="ch-icon ch-icon-square"></span>'
+      : '<span class="ch-icon ch-icon-check"></span>';
+    return `${pre}${checkHtml}`;
+  });
+}
+
+// 缩进处理
+function handleIndent(str, node) {
+  const indentRegex = /^(\t|[ ])/;
+  let $str = str;
+  while (indentRegex.test($str)) {
+    node.space += $str[0] === '\t' ? TAB_SPACE_NUM : 1;
+    $str = $str.replace(indentRegex, '');
+  }
+  return $str;
+}
+
+// 序号样式处理
+function getListStyle(m2) {
+  if (/^en-[a-z]/.test(m2)) {
+    return 'lower-alpha';
+  }
+  if (/^[a-z]/.test(m2)) {
+    return 'lower-greek';
+  }
+  if (/^[一二三四五六七八九十]/.test(m2)) {
+    return 'cjk-ideographic';
+  }
+  if (/^I/.test(m2)) {
+    return 'upper-roman';
+  }
+  if (/^\+/.test(m2)) {
+    return 'circle';
+  }
+  if (/^\*/.test(m2)) {
+    return 'square';
+  }
+  return 'default';
+}
+
+// 标识符处理
+function handleMark(str, node) {
+  const listRegex =
+    /^((([*+-]|\d+[.]|en-[a-z]\.|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)([^\r]*?)($|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.]|en-[a-z]\.|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)))/;
+  if (!listRegex.test(str)) {
+    node.type = 'blank';
+    return str;
+  }
+  return str.replace(listRegex, (wholeMatch, m1, m2, m3, m4) => {
+    node.type = m2.search(/[*+-]/g) > -1 ? 'ul' : 'ol';
+    node.listStyle = getListStyle(m2);
+    node.start = Number(m2.replace('.', '')) ? Number(m2.replace('.', '')) : 1;
+    return m4;
+  });
+}
+
+class Node {
+  // 列表树节点
+  constructor() {
+    this.index = 0;
+    this.space = 0;
+    this.type = '';
+    this.start = 1;
+    this.listStyle = '';
+    this.strs = [];
+    this.children = [];
+    this.lines = 0;
+  }
+}
+
+export default class List extends ParagraphBase {
+  static HOOK_NAME = 'list';
+
+  constructor({ config }) {
+    super({ needCache: true });
+    this.config = config || {};
+    this.tree = [];
+    this.emptyLines = 0;
+    this.indentSpace = Math.max(this.config.indentSpace, 2);
+  }
+
+  addNode(node, current, parent, last) {
+    if (node.type === 'blank') {
+      this.tree[last].strs.push(node.strs[0]);
+    } else {
+      this.tree[parent].children.push(current);
+      this.tree[current] = {
+        ...node,
+        parent,
+      };
+    }
+  }
+
+  buildTree(html, sentenceMakeFunc) {
+    const items = html.split('\n');
+    this.tree = [];
+    items.unshift('');
+    // 列表结尾换行符个数
+    const endLineFlagLength = html.match(/\n*$/g)[0].length;
+    for (let i = 0; i < items.length - endLineFlagLength; i++) {
+      const node = new Node();
+      items[i] = handleIndent(items[i], node);
+      items[i] = handleMark(items[i], node);
+      node.strs.push(sentenceMakeFunc(items[i]).html);
+      node.index = i;
+      if (i === 0) {
+        // 根节点
+        node.space = -2;
+        this.tree.push(node);
+        continue;
+      }
+      let last = i - 1;
+      while (!this.tree[last]) last -= 1;
+      if (node.type === 'blank') {
+        this.addNode(node, i, this.tree[last].parent, last);
+      } else {
+        while (!this.tree[last] || this.tree[last].space > node.space) last -= 1;
+        const { space } = node;
+        const lastSpace = this.tree[last].space;
+        if (space < lastSpace + this.indentSpace) {
+          // 成为同级节点
+          if (this.config.listNested && this.tree[last].type !== node.type) {
+            this.addNode(node, i, last);
+          } else {
+            this.addNode(node, i, this.tree[last].parent);
+          }
+        } else if (space < lastSpace + this.indentSpace + INDENT_SPACE_NUM) {
+          // 成为子节点
+          this.addNode(node, i, last);
+        } else {
+          // 纯文本
+          node.type = 'blank';
+          this.addNode(node, i, this.tree[last].parent, last);
+        }
+      }
+    }
+  }
+
+  renderSubTree(node, children, type) {
+    let lines = 0;
+    const attr = {};
+    const content = children.reduce((html, item) => {
+      const child = this.tree[item];
+      const itemAttr = {
+        class: 'cherry-list-item',
+      };
+      const str = `<p>${child.strs.join('<br>')}</p>`;
+      child.lines += this.getLineCount(child.strs.join('\n'));
+      const children = child.children.length ? this.renderTree(item) : '';
+      node.lines += child.lines;
+      lines += child.lines;
+      // checklist 样式适配
+      const checklistRegex = /<span class="ch-icon ch-icon-(square|check)"><\/span>/;
+      if (checklistRegex.test(str)) {
+        itemAttr.class += ' check-list-item';
+      }
+      return `${html}<li${attrsToAttributeString(itemAttr)}>${str}${children}</li>`;
+    }, '');
+    if (node.parent === undefined) {
+      // 根节点增加属性
+      attr['data-lines'] = node.index === 0 ? lines + this.emptyLines : lines;
+      attr['data-sign'] = this.sign;
+    }
+    if (children[0] && type === 'ol') {
+      attr.start = this.tree[children[0]].start;
+    }
+    attr.class = `cherry-list__${this.tree[children[0]].listStyle}`;
+    return `<${type}${attrsToAttributeString(attr)}>${content}</${type}>`;
+  }
+
+  renderTree(current) {
+    let from = 0;
+    const node = this.tree[current];
+    const { children } = node;
+    const html = children.reduce((html, item, index) => {
+      if (index === 0) return html;
+      if (this.tree[children[index]].type === this.tree[children[index - 1]].type) {
+        return html;
+      }
+      const subTree = this.renderSubTree(node, children.slice(from, index), this.tree[children[index - 1]].type);
+      from = index;
+      return html + subTree;
+    }, '');
+
+    const childrenHtml = children.length
+      ? this.renderSubTree(node, children.slice(from, children.length), this.tree[children[children.length - 1]].type)
+      : '';
+
+    return html + childrenHtml;
+  }
+
+  toHtml(wholeMatch, sentenceMakeFunc) {
+    // 行数计算吸收的空行
+    this.emptyLines = wholeMatch.match(/^\n\n/)?.length ?? 0;
+    const text = wholeMatch.replace(/~0$/g, '').replace(/^\n+/, '');
+    this.buildTree(makeChecklist(text), sentenceMakeFunc);
+    const result = this.renderTree(0);
+    return this.pushCache(result, this.sign, this.$getLineNum(wholeMatch));
+  }
+
+  $getLineNum(str) {
+    const beginLine = str.match(/^\n\n/)?.length ?? 0;
+    const $str = str.replace(/^\n+/, '').replace(/\n+$/, '\n');
+    return $str.match(/\n/g)?.length ?? 0 + beginLine;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    let $str = `${str}~0`;
+    if (this.test($str)) {
+      $str = $str.replace(this.RULE.reg, (wholeMatch) => {
+        return this.getCacheWithSpace(
+          this.checkCache(wholeMatch, sentenceMakeFunc, this.$getLineNum(wholeMatch)),
+          wholeMatch,
+        );
+      });
+    }
+    $str = $str.replace(/~0$/g, '');
+    return $str;
+  }
+
+  rule() {
+    const ret = {
+      begin: '(?:^|\n)(\n*)(([ ]{0,3}([*+-]|\\d+[.]|en-[a-z]\\.|[a-z]\\.|[I一二三四五六七八九十]+\\.)[ \\t]+)',
+      content: '([^\\r]+?)',
+      end: '(~0|\\n{2,}(?=\\S)(?![ \\t]*(?:[*+-]|\\d+[.]|en-[a-z]\\.|[a-z]\\.|[I一二三四五六七八九十]+\\.)[ \\t]+)))',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'gm');
+    return ret;
+  }
+}

package/src/core/hooks/MathBlock.js

@@ -0,0 +1,103 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import { escapeFormulaPunctuations, LoadMathModule } from '@/utils/mathjax';
+import { getHTML } from '@/utils/dom';
+import { isBrowser } from '@/utils/env';
+import { isLookbehindSupported } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+
+export default class MathBlock extends ParagraphBase {
+  static HOOK_NAME = 'mathBlock';
+  /**
+   * 块级公式语法
+   * 该语法具有排他性，并且需要优先其他段落级语法进行渲染
+   * @type {'katex' | 'MathJax' | 'node'}
+   */
+  engine = 'MathJax'; // 渲染引擎，默认为MathJax，MathJax支持2.x与3.x版本
+  katex;
+  MathJax;
+
+  constructor({ config }) {
+    super({ needCache: true });
+    // 非浏览器环境下配置为 node
+    this.engine = isBrowser() ? config.engine ?? 'MathJax' : 'node';
+  }
+
+  toHtml(wholeMatch, lineSpace, leadingChar, content) {
+    LoadMathModule.bind(this)('engine');
+    // 去掉开头的空字符，去掉结尾的换行符
+    const wholeMatchWithoutSpace = wholeMatch.replace(/^[ \f\r\t\v]*/, '').replace(/\s*$/, '');
+    // 去掉匹配到的第一个换行符
+    const lineSpaceWithoutPreSpace = lineSpace.replace(/^[ \f\r\t\v]*\n/, '');
+    const sign = this.$engine.hash(wholeMatch);
+    let lines = this.getLineCount(wholeMatchWithoutSpace, lineSpaceWithoutPreSpace);
+    // 判断公式是不是新行输入，如果不是新行，则行号减1
+    if (!/\n/.test(lineSpace)) {
+      lines -= 1;
+    }
+    // 判断公式后面有没有尾接内容，如果尾接了内容，则行号减1
+    if (!/\n\s*$/.test(wholeMatch)) {
+      lines -= 1;
+    }
+    // 目前的机制还没有测过lines为负数的情况，先不处理
+    lines = lines > 0 ? lines : 0;
+
+    // 既无MathJax又无katex时，原样输出
+    let result = '';
+
+    if (this.engine === 'katex') {
+      // katex渲染
+      const html = this.katex.renderToString(content, {
+        throwOnError: false,
+        displayMode: true,
+      });
+      result = `<div data-sign="${sign}" class="Cherry-Math" data-type="mathBlock"
+            data-lines="${lines}">${html}</div>`;
+    } else if (this.MathJax?.tex2svg) {
+      // MathJax渲染
+      const svg = getHTML(this.MathJax.tex2svg(content), true);
+      result = `<div data-sign="${sign}" class="Cherry-Math" data-type="mathBlock"
+            data-lines="${lines}">${svg}</div>`;
+    } else {
+      result = `<div data-sign="${sign}" class="Cherry-Math" data-type="mathBlock"
+      data-lines="${lines}">$$${escapeFormulaPunctuations(content)}$$</div>`;
+    }
+
+    return leadingChar + this.getCacheWithSpace(this.pushCache(result, sign, lines), wholeMatch);
+  }
+
+  beforeMakeHtml(str) {
+    if (isLookbehindSupported()) {
+      return str.replace(this.RULE.reg, this.toHtml.bind(this));
+    }
+    return replaceLookbehind(str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+  }
+
+  makeHtml(str) {
+    return str;
+  }
+
+  rule() {
+    const ret = {
+      begin: isLookbehindSupported() ? '(\\s*)((?<!\\\\))~D~D\\s*' : '(\\s*)(^|[^\\\\])~D~D\\s*',
+      content: '([\\w\\W]*?)',
+      end: '(\\s*)~D~D(?:\\s{0,1})',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Panel.js

@@ -0,0 +1,145 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import { prependLineFeedForParagraph } from '@/utils/lineFeed';
+import { getPanelRule } from '@/utils/regexp';
+import { blockNames } from '@/utils/sanitize';
+/**
+ * 面板语法
+ * 例：
+ *  :::tip
+ *  这是一段提示信息
+ *  :::
+ *  :::warning
+ *  这是一段警告信息
+ *  :::
+ *  :::danger
+ *  这是一段危险信息
+ *  :::
+ */
+export default class Panel extends ParagraphBase {
+  static HOOK_NAME = 'panel';
+
+  constructor(options) {
+    super({ needCache: true });
+    this.initBrReg(options.globalConfig.classicBr);
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str.replace(this.RULE.reg, (match, preLines, name, content) => {
+      const lineCount = this.getLineCount(match, preLines);
+      const sign = this.$engine.hash(match);
+      const testHasCache = this.testHasCache(sign);
+      if (testHasCache !== false) {
+        return prependLineFeedForParagraph(match, testHasCache);
+      }
+      const { title, body, appendStyle, className } = this.$getPanelInfo(name, content, sentenceMakeFunc);
+      const ret = this.pushCache(
+        `<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,
+      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>`;
+    const paragraphProcessor = (str) => {
+      if (str.trim() === '') {
+        return '';
+      }
+      // 调用行内语法，获得段落的签名和对应html内容
+      const { html } = sentenceMakeFunc(str);
+      let domName = 'p';
+      // 如果包含html块级标签（比如div、blockquote等），则当前段落外层用div包裹，反之用p包裹
+      const isContainBlockTest = new RegExp(`<(${blockNames})[^>]*>`, 'i');
+      if (isContainBlockTest.test(html)) {
+        domName = 'div';
+      }
+      return `<${domName}>${this.$cleanParagraph(html)}</${domName}>`;
+    };
+    let $body = '';
+    if (this.isContainsCache(ret.body)) {
+      $body = this.makeExcludingCached(ret.body, paragraphProcessor);
+    } else {
+      $body = paragraphProcessor(ret.body);
+    }
+    ret.body = `<div class="cherry-panel--body">${$body}</div>`;
+    return ret;
+  }
+
+  $getTitle(name) {
+    const $name = name.trim();
+    return /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+  }
+
+  $getTargetType(name) {
+    const $name = /\s/.test(name.trim()) ? name.trim().replace(/\s.*$/, '') : name;
+    switch ($name.trim().toLowerCase()) {
+      case 'primary':
+      case 'p':
+        return 'primary';
+      case 'info':
+      case 'i':
+        return 'info';
+      case 'warning':
+      case 'w':
+        return 'warning';
+      case 'danger':
+      case 'd':
+        return 'danger';
+      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';
+    }
+  }
+
+  rule() {
+    return getPanelRule();
+  }
+}