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

package/src/utils/config.js

@@ -0,0 +1,174 @@
+/**
+ * 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.
+ */
+
+/**
+ * 用于lodash.mergeWith的customizer
+ * @param {any} objValue
+ * @param {any} srcValue
+ * @returns
+ */
+export function customizer(objValue, srcValue) {
+  if (Array.isArray(srcValue)) {
+    return srcValue;
+  }
+}
+
+/**
+ * 检查本地有没有值
+ * @param {string} key
+ */
+export function testKeyInLocal(key) {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(`cherry-${key}`) !== null;
+  }
+  return false;
+}
+
+/**
+ * 保存是否经典换行
+ * @param {boolean} isClassicBr
+ */
+export function saveIsClassicBrToLocal(isClassicBr) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('cherry-classicBr', isClassicBr ? 'true' : 'false');
+  }
+}
+
+/**
+ * 是否经典换行
+ */
+export function getIsClassicBrFromLocal() {
+  let ret = 'false';
+  if (typeof localStorage !== 'undefined') {
+    ret = localStorage.getItem('cherry-classicBr');
+  }
+  return ret === 'true';
+}
+
+/**
+ * 保存当前主题
+ * @param {string} theme
+ */
+function saveThemeToLocal(nameSpace, theme) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(`${nameSpace}-theme`, theme);
+  }
+}
+
+export function testHasLocal(nameSpace, key) {
+  if (typeof localStorage !== 'undefined') {
+    return !!localStorage.getItem(`${nameSpace}-${key}`);
+  }
+  return false;
+}
+
+/**
+ * 获取当前主题
+ * @returns {string} 主题名
+ */
+export function getThemeFromLocal(fullClass = false, nameSpace = 'cherry') {
+  let ret = 'default';
+  if (typeof localStorage !== 'undefined') {
+    const localTheme = localStorage.getItem(`${nameSpace}-theme`);
+    if (localTheme) {
+      ret = localTheme;
+    }
+  }
+  return fullClass ? `theme__${ret}` : ret;
+}
+
+/**
+ * 修改主题
+ * @param {object} $cherry
+ * @param {string} theme 如果没有传theme，则从本地缓存里取
+ */
+export function changeTheme($cherry, theme = '') {
+  const newTheme = (theme ? theme : getThemeFromLocal(false, $cherry.nameSpace)).replace(/^.*theme__/, '');
+  const newClass = ` theme__${newTheme}`;
+  $cherry.wrapperDom.className = $cherry.wrapperDom.className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
+  $cherry.previewer.getDomContainer().className =
+    $cherry.previewer.getDomContainer().className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
+  saveThemeToLocal($cherry.nameSpace, newTheme);
+}
+
+/**
+ * 保存当前代码主题
+ * @param {string} nameSpace
+ * @param {string} codeTheme
+ */
+function saveCodeThemeToLocal(nameSpace, codeTheme) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(`${nameSpace}-codeTheme`, codeTheme);
+  }
+}
+
+/**
+ * 获取当前代码主题
+ * @param {string} nameSpace
+ * @returns {string} 主题名
+ */
+export function getCodeThemeFromLocal(nameSpace = 'cherry') {
+  let res = 'default';
+  if (typeof localStorage !== 'undefined') {
+    const localTheme = localStorage.getItem(`${nameSpace}-codeTheme`);
+    if (localTheme) {
+      res = localTheme;
+    }
+  }
+  return res;
+}
+
+/**
+ * 修改代码主题
+ * 相同nameSpace的实例有一样的代码主题配置
+ * @param {object} $cherry
+ * @param {string} codeTheme 如果没有传codeTheme，则从本地缓存里取
+ */
+export function changeCodeTheme($cherry, codeTheme) {
+  const newTheme = codeTheme ? codeTheme : getCodeThemeFromLocal($cherry.nameSpace);
+
+  $cherry.wrapperDom.setAttribute('data-code-block-theme', newTheme);
+
+  saveCodeThemeToLocal($cherry.nameSpace, newTheme);
+}
+
+/**
+ * 获取代码块是否换行的配置
+ * @param {string} nameSpace
+ * @param {boolean} defaultWrap
+ * @returns {string} 主题名
+ */
+export function getCodeWrapFromLocal(nameSpace = 'cherry', defaultWrap = true) {
+  let res = defaultWrap ? 'wrap' : 'nowrap';
+  if (typeof localStorage !== 'undefined') {
+    const localTheme = localStorage.getItem(`${nameSpace}-codeWrap`);
+    if (localTheme) {
+      res = localTheme;
+    }
+  }
+  return res;
+}
+
+/**
+ * 保存当前代码主题
+ * @param {string} nameSpace
+ * @param {string} wrap
+ */
+export function saveCodeWrapToLocal(nameSpace, wrap) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(`${nameSpace}-codeWrap`, wrap);
+  }
+}

package/src/utils/copy.js

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+/**
+ * 复制内容到剪贴板
+ * @returns null
+ */
+export function copyToClip(str) {
+  function listener(e) {
+    e.clipboardData.setData('text/html', str);
+    e.clipboardData.setData('text/plain', str);
+    e.preventDefault();
+  }
+  document.addEventListener('copy', listener);
+  document.execCommand('copy');
+  document.removeEventListener('copy', listener);
+}
+
+/**
+ * 复制文本内容到剪贴板
+ * @param {string} str 复制文本
+ */
+export function copyByInput(str) {
+  const input = document.createElement('input');
+  input.value = str;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+}
+
+/**
+ * 复制文本
+ * @param {string} str 复制文本
+ * @returns
+ */
+export async function copyTextByClipboard(str) {
+  if (!navigator.clipboard) {
+    copyByInput(str);
+    return;
+  }
+  return await navigator.clipboard.writeText(str);
+}

package/src/utils/dialog.js

@@ -0,0 +1,214 @@
+/**
+ * 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 { createElement } from './dom';
+
+const clamp = (num, min, max) => {
+  return Math.min(Math.max(num, min), max);
+};
+
+/**
+ * 对话框基操集合
+ */
+const dialog = {
+  open() {
+    this.resetStyle();
+    this.dom.style.display = 'block';
+    this.postMessage('ready?');
+  },
+
+  close() {
+    this.dom.style.display = 'none';
+  },
+
+  postMessage(messageName, value = '') {
+    this.iframeDom?.contentWindow?.postMessage({ eventName: messageName, value }, '*');
+  },
+
+  resetStyle() {
+    const { dom } = this;
+    dom.style.left = '10%';
+    dom.style.top = '10%';
+  },
+
+  bindEvents() {
+    this.bindClickEvents();
+    this.bindDNDEvents();
+  },
+
+  bindClickEvents() {
+    this.headCloseButton.addEventListener('click', () => {
+      this.close();
+    });
+
+    this.footSureButton.addEventListener('click', () => {
+      this.postMessage('getData');
+    });
+  },
+
+  bindDNDEvents() {
+    const { dom, head, body } = this;
+
+    let offsetX;
+    let offsetY;
+
+    const handleMouseMove = function (e) {
+      e.preventDefault();
+      const left = clamp(e.clientX - offsetX, 0, window.innerWidth - 16);
+      const top = clamp(e.clientY - offsetY, 0, window.innerHeight - 16);
+      dom.style.left = `${left}px`;
+      dom.style.top = `${top}px`;
+    };
+
+    const handleMouseUp = function (e) {
+      head.style.cursor = 'grab';
+      body.style.pointerEvents = null;
+
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mousemove', handleMouseUp);
+    };
+
+    head.addEventListener('mousedown', function (e) {
+      if (e.target.classList.contains('cherry-dialog--close')) {
+        return;
+      }
+      offsetX = e.clientX - dom.offsetLeft;
+      offsetY = e.clientY - dom.offsetTop;
+      head.style.cursor = 'grabbing';
+      body.style.pointerEvents = 'none';
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    });
+  },
+
+  draw(params, onReady, onSubmit) {
+    const { iframeSrc, iframeStyle, title } = params;
+    this.onSubmit = onSubmit;
+    this.onReady = onReady;
+
+    if (this.dom) {
+      const test = new RegExp(`${iframeSrc}$`, 'i');
+      if (!test.test(this.iframeDom.src)) {
+        this.iframeDom.src = iframeSrc;
+      }
+      this.open();
+      return;
+    }
+    // 添加通信事件
+    window.addEventListener('message', (event) => {
+      // @ts-ignore
+      if (!event.data || !event.data.eventName) {
+        return;
+      }
+      // @ts-ignore
+      switch (event.data.eventName) {
+        case 'getData:success':
+          // @ts-ignore
+          this.onSubmit(event.data.value);
+          this.close();
+        case 'ready':
+          this.onReady();
+      }
+    });
+    // 构造页面元素
+    this.iframeDom = createElement('iframe', 'cherry-dialog-iframe', { src: iframeSrc, style: iframeStyle });
+    this.dom = createElement('div', 'cherry-dialog', {
+      style: [
+        'z-index:9999',
+        'display: block',
+        'position: absolute',
+        'top: 10%;left: 10%;width: 80%;height: 80%;',
+        'background-color: #FFF',
+        'box-shadow: 0px 50px 100px -12px rgba(0,0,0,.05),0px 30px 60px -30px rgba(0,0,0,.1)',
+        'border-radius: 6px',
+        'border: 1px solid #ddd;',
+      ].join(';'),
+    });
+    this.head = createElement('div', 'cherry-dialog--head', {
+      style: ['height: 30px', 'line-height: 30px', 'padding-left: 10px', 'padding-right: 10px', 'cursor: grab;'].join(
+        ';',
+      ),
+    });
+    this.body = createElement('div', 'cherry-dialog--body', {
+      style: ['position: absolute', 'bottom: 30px', 'top: 30px', 'left: 0', 'right: 0', 'overflow: hidden'].join(';'),
+    });
+    this.foot = createElement('div', 'cherry-dialog--foot', {
+      style: [
+        'height: 30px',
+        'line-height: 30px',
+        'padding-left: 10px',
+        'padding-right: 10px',
+        'position: absolute',
+        'bottom: 0',
+        'left: 0',
+        'right: 0',
+      ].join(';'),
+    });
+    this.headTitle = createElement('span', 'cherry-dialog--title', { style: 'user-select:none;' });
+    this.headCloseButton = createElement('i', 'cherry-dialog--close ch-icon ch-icon-close', {
+      style: 'float: right;font-size: 12px;cursor: pointer;',
+    });
+    this.footSureButton = createElement('button', 'cherry-dialog--sure', {
+      style: [
+        'float: right',
+        'cursor: pointer',
+        'margin: 3px',
+        'background-color: #4d90fe',
+        'color: #FFF',
+        'border: 1px solid #4d90fe',
+        'border-radius: 2px',
+        'padding: 2px 15px',
+        'user-select:none',
+      ].join(';'),
+    });
+
+    this.headCloseButton.title = '关闭';
+    this.footSureButton.textContent = '确定';
+
+    this.headTitle.textContent = title;
+    this.head.appendChild(this.headTitle);
+    this.head.appendChild(this.headCloseButton);
+    this.foot.appendChild(this.footSureButton);
+
+    this.body.appendChild(this.iframeDom);
+    this.dom.appendChild(this.head);
+    this.dom.appendChild(this.body);
+    this.dom.appendChild(this.foot);
+
+    this.bindEvents();
+
+    document.body.appendChild(this.dom);
+  },
+};
+
+/**
+ * draw.io的对话框
+ * @param {string} xml draw.io的xml格式的字符串数据
+ * @param {*} callback 回调
+ */
+export function drawioDialog(iframeSrc = '', iframeStyle = '', xml = '', callback = null) {
+  const dialogParam = { iframeSrc, iframeStyle, title: 'draw.io' };
+  dialog.draw(
+    dialogParam,
+    () => {
+      dialog.postMessage('setData', xml);
+    },
+    (data) => {
+      callback(data);
+    },
+  );
+}

package/src/utils/dom.js

@@ -0,0 +1,163 @@
+/**
+ * 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.
+ */
+function mergeMarginBottom(bottom, top) {
+  const currentBottom = parseFloat(bottom);
+  const nextTop = parseFloat(top);
+  if (nextTop >= 0) {
+    // 不受合并影响
+    return currentBottom;
+  }
+  if (currentBottom >= 0) {
+    return currentBottom + nextTop;
+  }
+  // 同时为负数，取最小的
+  return Math.min(currentBottom, nextTop);
+}
+
+function mergeMarginTop(bottom, top) {
+  const prevBottom = parseFloat(bottom);
+  const currentTop = parseFloat(top);
+  if (currentTop < 0) {
+    // 负数的margin都被上一个区块吸收了
+    return 0;
+  }
+  if (prevBottom >= 0) {
+    // 如果当前margin-top比上一个margin-bottom要大，则只合并部分；反之合并全部，归属于上一个区块
+    return Math.max(currentTop - prevBottom, 0);
+  }
+  // 上一个margin-bottom为负数不受影响
+  return currentTop;
+}
+/**
+ * 用于解决块级元素边距合并问题
+ * @param {HTMLElement} element
+ */
+export function getBlockTopAndHeightWithMargin(element) {
+  const prevSibling = element.previousElementSibling;
+  const nextSibling = element.nextElementSibling;
+  if (!prevSibling) {
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    if (!nextSibling) {
+      return {
+        // marginBottom可能为负数
+        height: Math.max(parseFloat(style.marginTop) + rect.height + parseFloat(style.marginBottom), 0),
+        offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+      };
+    }
+    const nextSibStyle = getComputedStyle(nextSibling);
+    const marginBottom = mergeMarginBottom(style.marginBottom, nextSibStyle.marginTop);
+    return {
+      height: Math.max(parseFloat(style.marginTop) + rect.height + marginBottom, 0), // marginBottom可能为负数
+      offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+    };
+  }
+  const style = getComputedStyle(element);
+  const rect = element.getBoundingClientRect();
+  const prevSibStyle = getComputedStyle(prevSibling);
+  const marginTop = mergeMarginTop(prevSibStyle.marginBottom, style.marginTop);
+  if (!nextSibling) {
+    return {
+      height: Math.max(marginTop + rect.height + parseFloat(style.marginBottom), 0), // marginBottom可能为负数
+      offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+    };
+  }
+  const nextSibStyle = getComputedStyle(nextSibling);
+  const marginBottom = mergeMarginBottom(style.marginBottom, nextSibStyle.marginTop);
+  return {
+    height: Math.max(marginTop + rect.height + marginBottom, 0), // marginBottom可能为负数
+    offsetTop: element.offsetTop - Math.abs(marginTop),
+  };
+}
+
+/**
+ * document.elementsFromPoint polyfill
+ * ref: https://github.com/JSmith01/elementsfrompoint-polyfill/blob/master/index.js
+ * @deprecated 这个方法有问题，输入目标坐标如果介于两个子元素中间，则会返回最外层父元素
+ * @param {number} x
+ * @param {number} y
+ */
+export function elementsFromPoint(x, y) {
+  // see https://caniuse.com/#search=elementsFromPoint
+  if (typeof document.elementsFromPoint === 'function') {
+    return document.elementsFromPoint(x, y);
+  }
+
+  if (typeof (/** @type {any}*/ (document).msElementsFromPoint) === 'function') {
+    const nodeList = /** @type {any}*/ (document).msElementsFromPoint(x, y);
+    return nodeList !== null ? Array.from(nodeList) : nodeList;
+  }
+  const elements = [];
+  const pointerEvents = [];
+  /** @type {HTMLElement} */
+  let ele;
+  do {
+    const currentElement = /** @type {HTMLElement} */ (document.elementFromPoint(x, y));
+    if (ele !== currentElement) {
+      ele = currentElement;
+      elements.push(ele);
+      pointerEvents.push(ele.style.pointerEvents);
+      ele.style.pointerEvents = 'none';
+    } else {
+      ele = null;
+    }
+  } while (ele);
+  elements.forEach((e, index) => {
+    e.style.pointerEvents = pointerEvents[index];
+  });
+  return elements;
+}
+
+export function getHTML(who, deep) {
+  if (!who || !who.tagName) {
+    return '';
+  }
+  let txt;
+  let ax;
+  let el = document.createElement('div');
+  el.appendChild(who.cloneNode(false));
+  txt = el.innerHTML;
+  if (deep) {
+    ax = txt.indexOf('>') + 1;
+    txt = txt.substring(0, ax) + who.innerHTML + txt.substring(ax);
+  }
+  el = null;
+  return txt;
+}
+
+/**
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tagName 标签名
+ * @param {string} className 元素类名
+ * @param {Record<string,string>} attributes 附加属性
+ * @returns {HTMLElementTagNameMap[K]}
+ */
+export function createElement(tagName, className = '', attributes = {}) {
+  const element = document.createElement(tagName);
+  element.className = className;
+  if (typeof attributes !== 'undefined') {
+    Object.keys(attributes).forEach((key) => {
+      const value = attributes[key];
+      if (key.startsWith('data-')) {
+        const dataName = key.replace(/^data-/, '');
+        element.dataset[dataName] = value;
+        return;
+      }
+      element.setAttribute(key, value);
+    });
+  }
+  return element;
+}

package/src/utils/downloadUtil.js

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+export function downloadByATag(url, fileName) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  a.remove();
+}

package/src/utils/env.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+/**
+ * 判断当前是否浏览器环境
+ * @returns
+ */
+export function isBrowser() {
+  return typeof window === 'object';
+}