feat: copyright tip

packages/core/src/assets/textarea.less

@@ -61,3 +61,22 @@
   pointer-events: none; // 忽略鼠标行为，重要
   user-select: none;
 }
+
+.w-e-copyright-tip {
+  display: none;
+  position: absolute;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--w-e-textarea-color); // 翻转颜色
+  color: var(--w-e-textarea-slight-bg-color);
+  padding: 5px 10px;
+  font-size: 12px;
+  transition: opacity .5s;
+  .shadowBordered();
+
+  a {
+    color: var(--w-e-textarea-slight-bg-color);
+    text-decoration: none;
+  }
+}

packages/core/src/text-area/TextArea.ts

@@ -7,7 +7,7 @@ import { Range } from 'slate'
 import throttle from 'lodash.throttle'
 import forEach from 'lodash.foreach'
 import $, { Dom7Array, DOMElement } from '../utils/dom'
-import { TEXTAREA_TO_EDITOR } from '../utils/weak-maps'
+import { TEXTAREA_TO_EDITOR, EDITOR_TO_SHOWED_COPYRIGHT_TIP } from '../utils/weak-maps'
 import { IDomEditor } from '../editor/interface'
 import { DomEditor } from '../editor/dom-editor'
 import updateView from './update-view'
@@ -15,6 +15,7 @@ import { handlePlaceholder } from './place-holder'
 import { editorSelectionToDOM, DOMSelectionToEditor } from './syncSelection'
 import { promiseResolveThen } from '../utils/util'
 import eventHandlerConf from './event-handlers/index'
+import { t } from '../i18n'
 
 let ID = 1
 
@@ -26,6 +27,9 @@ class TextArea {
   $textArea: Dom7Array | null = null
   private readonly $progressBar = $('<div class="w-e-progress-bar"></div>')
   private readonly $maxLengthInfo = $('<div class="w-e-max-length-info"></div>')
+  private readonly $copyrightTip = $(
+    `<div class="w-e-copyright-tip">${t('editor.copyright')}</div>`
+  )
   isComposing: boolean = false
   isUpdatingSelection: boolean = false
   isDraggingInternally: boolean = false
@@ -44,6 +48,7 @@ class TextArea {
     const $container = $(`<div class="w-e-text-container"></div>`)
     $container.append(this.$progressBar) // 进度条
     $container.append(this.$maxLengthInfo) // max length 提示信息
+    $container.append(this.$copyrightTip) // copyright 提示
     $box.append($container)
     const $scroll = $(`<div class="w-e-scroll"></div>`)
     $container.append($scroll)
@@ -82,6 +87,9 @@ class TextArea {
 
       // 绑定 DOM 事件
       this.bindEvent()
+
+      // 显示 copyright tip
+      $scroll.on('click keyup', this.showCopyrightTip.bind(this))
     })
   }
 
@@ -175,6 +183,41 @@ class TextArea {
     }
   }
 
+  /**
+   * 显示 copyright 提示
+   */
+  private showCopyrightTip() {
+    // @ts-ignore 标记该网站是否是 vip
+    const flag = window.__wangEditorVipSiteFlag
+    // 是 vip ，或者网络错误无法判断，则不展示
+    if (flag === 102 || flag === 104) return
+
+    // 已经展示过，则不再展示
+    const editor = this.editorInstance
+    if (EDITOR_TO_SHOWED_COPYRIGHT_TIP.get(editor)) return
+
+    // 无选区，不用展示
+    const { selection } = editor
+    if (selection == null) return
+
+    // 展示 tip
+    const { $copyrightTip } = this
+    $copyrightTip.css('opacity', '1')
+    $copyrightTip.show()
+    setTimeout(() => {
+      $copyrightTip.css('opacity', '0') // 降低透明度（ css transition 效果）
+      setTimeout(() => $copyrightTip.hide(), 1000) // 真实隐藏 DOM
+    }, 2000)
+
+    // 提示：成为 vip 免除 tip
+    console.log(
+      'wangEditor: 升级为 VIP 用户，可隐藏版权提示，新用户可免费试用~\nhttps://www.wangeditor.com/v5/VIP.html'
+    )
+
+    // 记录，展示一次即可
+    EDITOR_TO_SHOWED_COPYRIGHT_TIP.set(editor, true)
+  }
+
   /**
    * 修改 view 状态
    */

packages/core/src/utils/weak-maps.ts

@@ -80,3 +80,6 @@ export const EDITOR_TO_EMITTER: WeakMap<Editor, Emitter> = new WeakMap()
 
 // editor 是否可执行粘贴
 export const EDITOR_TO_CAN_PASTE: WeakMap<Editor, boolean> = new WeakMap()
+
+// editor 是否已展示了 copyright tip
+export const EDITOR_TO_SHOWED_COPYRIGHT_TIP: WeakMap<Editor, boolean> = new WeakMap()

packages/editor/src/index.ts

@@ -10,6 +10,9 @@ import '@wangeditor/core/dist/css/style.css'
 import './utils/browser-polyfill'
 import './utils/node-polyfill'
 
+// 尝试注册 vip
+import './utils/register-vip-site'
+
 // 配置多语言
 import './locale/index'
 

packages/editor/src/locale/en.ts

@@ -10,5 +10,7 @@ export default {
     indent: 'Indent',
     image: 'Image',
     video: 'Video',
+    copyright:
+      'Rich-text edit provided by <a href="https://www.wangeditor.com/" target="_blank">wangEditor</a>',
   },
 }

packages/editor/src/locale/zh-CN.ts

@@ -10,5 +10,7 @@ export default {
     indent: '缩进',
     image: '图片',
     video: '视频',
+    copyright:
+      '富文本编辑由 <a href="https://www.wangeditor.com/" target="_blank">wangEditor</a> 提供',
   },
 }

packages/editor/src/utils/register-vip-site.ts

@@ -0,0 +1,67 @@
+/**
+ * @description 注册 vip site
+ * @author wangfupeng
+ */
+
+interface IVipSiteInfo {
+  hostname: string
+  expire: string
+  desc?: string
+}
+
+function main() {
+  // nodejs 环境下不执行
+  if (typeof global === 'object') return
+
+  // @ts-ignore 标记是否是 vip    // 100 未知；   101 不是；    102 是；    103 已过期；    104 网络错误；
+  window.__wangEditorVipSiteFlag = 100
+
+  // @ts-ignore 注册 vip 回调函数
+  window.__wangEditorRegisterVipSite = (vipSites: Array<IVipSiteInfo>) => {
+    for (const siteInfo of vipSites) {
+      const { hostname, expire } = siteInfo
+
+      // hostname 不匹配，则继续下一个
+      if (hostname !== location.hostname) continue
+
+      // 判断有效期是否过期
+      const now = Date.now()
+      const expireDt = new Date(expire)
+      // @ts-ignore 对比时间
+      if (now - expireDt < 0) {
+        // @ts-ignore 在有效期之内，设置为 vip
+        window.__wangEditorVipSiteFlag = 102
+        console.log(
+          `wangEditor: 您是 VIP ，到期时间是 ${expire}，提前续费有优惠~\nhttps://www.wangeditor.com/v5/VIP.html`
+        )
+      } else {
+        // @ts-ignore 过期了
+        window.__wangEditorVipSiteFlag = 103
+        console.log(
+          `wangEditor: VIP 已过期，最后时间是 ${expire}，请续费~\nhttps://www.wangeditor.com/v5/VIP.html`
+        )
+      }
+      break
+    }
+    // @ts-ignore
+    if (window.__wangEditorVipSiteFlag === 100) {
+      // @ts-ignore 未找到，设置标记 非 vip
+      window.__wangEditorVipSiteFlag = 101
+      console.log(
+        `wangEditor: 您还不是 VIP 用户，新用户可免费试用~\nhttps://www.wangeditor.com/v5/VIP.html`
+      )
+    }
+  }
+
+  // 尝试注册 vip
+  const script = document.createElement('script')
+  script.type = 'text/javascript'
+  script.src = 'https://www.wangeditor.com/vip/register-site.js' // 配置在 https://github.com/wangEditor/vip
+  script.onerror = () => {
+    // @ts-ignore 加载错误，可能是网络原因
+    window.__wangEditorVipSiteFlag = 104
+  }
+  document.getElementsByTagName('head')[0].appendChild(script)
+}
+
+main()