WIP: image width 30%

wangeditor-team · Jun 30, 2021 · 84be24e · 84be24e
1 parent 86c9375
commit 84be24e
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 24 deletions.
diff --git a/packages/basic-modules/src/modules/image/index.ts b/packages/basic-modules/src/modules/image/index.ts
@@ -12,12 +12,19 @@ import {
   deleteImageMenuConf,
   editImageMenuConf,
   viewImageLinkMenuConf,
+  imageWidth30MenuConf,
 } from './menu/index'
 
 const image: IModuleConf = {
   renderElems: [renderImageConf],
   elemsToHtml: [imageToHtmlConf],
-  menus: [insertImageMenuConf, deleteImageMenuConf, editImageMenuConf, viewImageLinkMenuConf],
+  menus: [
+    insertImageMenuConf,
+    deleteImageMenuConf,
+    editImageMenuConf,
+    viewImageLinkMenuConf,
+    imageWidth30MenuConf,
+  ],
   editorPlugin: withImage,
 }
 

diff --git a/packages/basic-modules/src/modules/image/menu/EditImage.ts b/packages/basic-modules/src/modules/image/menu/EditImage.ts
@@ -114,7 +114,6 @@ class EditImage implements IModalMenu {
     $inputSrc.val(src)
     $inputAlt.val(alt)
     $inputUrl.val(url)
-    // TODO 宽度 30% 50% 100%
 
     // focus 一个 input（异步，此时 DOM 尚未渲染）
     setTimeout(() => {

diff --git a/packages/basic-modules/src/modules/image/menu/Width30.ts b/packages/basic-modules/src/modules/image/menu/Width30.ts
@@ -0,0 +1,68 @@
+/**
+ * @description image width 30%
+ * @author wangfupeng
+ */
+
+import { Transforms, Node } from 'slate'
+import { IButtonMenu, IDomEditor } from '@wangeditor/core'
+import { checkNodeType, getSelectedNodeByType } from '../../_helpers/node'
+
+// TODO 宽度 30% 50% 100%
+// 抽离一个 baseClass
+
+class ImageWidth implements IButtonMenu {
+  title = '30%'
+  tag = 'button'
+  private value = '30%'
+
+  getValue(editor: IDomEditor): string | boolean {
+    // 无需获取 val
+    return ''
+  }
+
+  isActive(editor: IDomEditor): boolean {
+    // 无需 active
+    return false
+  }
+
+  private getSelectedNode(editor: IDomEditor): Node | null {
+    return getSelectedNodeByType(editor, 'image')
+  }
+
+  isDisabled(editor: IDomEditor): boolean {
+    if (editor.selection == null) return true
+
+    const imageNode = this.getSelectedNode(editor)
+    if (imageNode == null) {
+      // 选区未处于 image node ，则禁用
+      return true
+    }
+    return false
+  }
+
+  exec(editor: IDomEditor, value: string | boolean) {
+    if (this.isDisabled(editor)) return
+
+    const imageNode = this.getSelectedNode(editor)
+    if (imageNode == null) return
+
+    // @ts-ignore
+    const { style = {} } = imageNode
+    const newStyle = {
+      ...style,
+      width: this.value, // 修改 width
+      height: '', // 清空 height
+    }
+
+    Transforms.setNodes(
+      editor,
+      // @ts-ignore
+      { style: newStyle },
+      {
+        match: n => checkNodeType(n, 'image'),
+      }
+    )
+  }
+}
+
+export default ImageWidth
diff --git a/packages/basic-modules/src/modules/image/menu/index.ts b/packages/basic-modules/src/modules/image/menu/index.ts
@@ -7,11 +7,12 @@ import InsertImage from './InsertImage'
 import DeleteImage from './DeleteImage'
 import EditImage from './EditImage'
 import ViewImageLink from './ViewImageLink'
+import ImageWidth30 from './Width30'
 import { genImageMenuConfig } from './config'
 
 const config = genImageMenuConfig() // menu config
 
-const insertImageMenuConf = {
+export const insertImageMenuConf = {
   key: 'insertImage',
   factory() {
     return new InsertImage()
@@ -22,26 +23,31 @@ const insertImageMenuConf = {
   config,
 }
 
-const deleteImageMenuConf = {
+export const deleteImageMenuConf = {
   key: 'deleteImage',
   factory() {
     return new DeleteImage()
   },
 }
 
-const editImageMenuConf = {
+export const editImageMenuConf = {
   key: 'editImage',
   factory() {
     return new EditImage()
   },
   config,
 }
 
-const viewImageLinkMenuConf = {
+export const viewImageLinkMenuConf = {
   key: 'viewImageLink',
   factory() {
     return new ViewImageLink()
   },
 }
 
-export { insertImageMenuConf, deleteImageMenuConf, editImageMenuConf, viewImageLinkMenuConf }
+export const imageWidth30MenuConf = {
+  key: 'imageWidth30',
+  factory() {
+    return new ImageWidth30()
+  },
+}
diff --git a/packages/core/src/editor/with-dom.ts b/packages/core/src/editor/with-dom.ts
@@ -62,8 +62,6 @@ export const withDOM = <T extends Editor>(editor: T) => {
       }
 
       case 'move_node': {
-        // TODO
-        // 这里是否可以执行 NODE_TO_KEY.delete(node) ？？？
         break
       }
     }

diff --git a/packages/core/src/menus/bar-item/BaseButton.ts b/packages/core/src/menus/bar-item/BaseButton.ts
@@ -24,14 +24,20 @@ abstract class BaseButton implements IBarItem {
     if (tag !== 'button') throw new Error(`Invalid tag '${tag}', expected 'button'`)
 
     // ----------------- 初始化 dom -----------------
-    const { title, hotkey = '', iconSvg } = menu
-    const $svg = $(iconSvg)
-    clearSvgStyle($svg) // 清理 svg 样式（扩展的菜单，svg 是不可控的，所以要清理一下）
+    const { title, hotkey = '', iconSvg = '' } = menu
     const $button = $(`<button></button>`)
-    addTooltip($button, title, hotkey, inGroup) // 设置 tooltip
-    $button.append($svg)
-    if (inGroup) {
-      // in groupButton ，显示 menu title
+    if (iconSvg) {
+      const $svg = $(iconSvg)
+      clearSvgStyle($svg) // 清理 svg 样式（扩展的菜单，svg 是不可控的，所以要清理一下）
+      $button.append($svg)
+    } else {
+      // 无 icon 则显示 title
+      $button.text(title)
+    }
+    addTooltip($button, iconSvg, title, hotkey, inGroup) // 设置 tooltip
+    if (inGroup && iconSvg) {
+      // in groupButton（且有 icon），显示 menu title
+      // 如果没有 icon ，上面已添加 title ，不用重复添加
       $button.append($(`<span class="title">${title}</span>`))
     }
     if (width) {

diff --git a/packages/core/src/menus/bar-item/GroupButton.ts b/packages/core/src/menus/bar-item/GroupButton.ts
@@ -14,13 +14,18 @@ class GroupButton {
   $button = $(`<button></button>`)
 
   constructor(menu: IMenuGroup) {
-    const { iconSvg /*, title, menuKeys = [] */ } = menu
+    const { iconSvg, title /*, menuKeys = [] */ } = menu
     const { $elem, $button } = this
 
     // button
-    const $svg = $(iconSvg)
-    clearSvgStyle($svg) // 清理 svg 样式（扩展的菜单，svg 是不可控的，所以要清理一下）
-    $button.append($svg)
+    if (iconSvg) {
+      const $svg = $(iconSvg)
+      clearSvgStyle($svg) // 清理 svg 样式（扩展的菜单，svg 是不可控的，所以要清理一下）
+      $button.append($svg)
+    } else {
+      // 无 icon 则显示 title
+      $button.text(title)
+    }
 
     const $arrow = gen$downArrow()
     $button.append($arrow)

diff --git a/packages/core/src/menus/bar-item/tooltip.ts b/packages/core/src/menus/bar-item/tooltip.ts
@@ -6,7 +6,18 @@
 import { Dom7Array } from '../../utils/dom'
 import { IS_APPLE } from '../../utils/ua'
 
-export function addTooltip($button: Dom7Array, title: string, hotkey: string, inGroup = false) {
+export function addTooltip(
+  $button: Dom7Array,
+  iconSvg: string,
+  title: string,
+  hotkey: string,
+  inGroup = false
+) {
+  if (!iconSvg) {
+    // 没有 icon 直接显示 title ，不用 tooltip
+    return
+  }
+
   if (hotkey) {
     const fnKey = IS_APPLE ? 'cmd' : 'ctrl' // mac OS 转换为 cmd ，windows 转换为 ctrl
     hotkey = hotkey.replace('mod', fnKey)

diff --git a/packages/core/src/menus/interface.ts b/packages/core/src/menus/interface.ts
@@ -9,7 +9,7 @@ import { Dom7Array } from '../utils/dom'
 
 export interface IMenuGroup {
   title: string
-  iconSvg: string
+  iconSvg?: string
   menuKeys: string[]
 }
 
@@ -29,7 +29,7 @@ export interface IOption {
 
 interface IBaseMenu {
   title: string
-  iconSvg: string
+  iconSvg?: string
   hotkey?: string // 快捷键，使用 https://www.npmjs.com/package/is-hotkey
 
   tag: string // 'button' | 'select'
@@ -42,7 +42,9 @@ interface IBaseMenu {
   exec: (editor: IDomEditor, value: string | boolean) => void // button click 或 select change 时触发
 }
 
-export interface IButtonMenu extends IBaseMenu {}
+export interface IButtonMenu extends IBaseMenu {
+  /* 其他属性 */
+}
 
 export interface ISelectMenu extends IBaseMenu {
   getOptions: (editor: IDomEditor) => IOption[] // select -> options
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,8 +62,6 @@ export const withDOM = <T extends Editor>(editor: T) => { @@
           }
           case 'move_node': {
-            // TODO
-            // 这里是否可以执行 NODE_TO_KEY.delete(node) ？？？
             break
           }
         }
@@ Expand Down @@