feat(case): add case plugin

Hufe921 · Hufe921 · commit e483c172a2aa · 2024-09-06T20:56:25.000+08:00
diff --git a/README.md b/README.md
@@ -107,3 +107,17 @@ command.executeLoadDiagram({
   onDestroy?: (message?: any) => void
 })
 ```
+
+- @hufe921/canvas-editor-plugin-case
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import casePlugin from '@hufe921/canvas-editor-plugin-case'
+
+const instance = new Editor()
+instance.use(casePlugin)
+
+command.executeUpperCase()
+
+command.executeLowerCase()
+```
diff --git a/packages/case/LICENSE b/packages/case/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-present, hufe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/packages/case/README.md b/packages/case/README.md
@@ -0,0 +1,21 @@
+<h1 align="center">canvas-editor-plugin-case</h1>
+
+<p align="center">uppercase and lowercase plugin for canvas-editor</p>
+
+## usage
+
+```bash
+npm i @hufe921/canvas-editor-plugin-case --save
+```
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import casePlugin from '@hufe921/canvas-editor-plugin-case'
+
+const instance = new Editor()
+instance.use(casePlugin)
+
+command.executeUpperCase()
+
+command.executeLowerCase()
+```
diff --git a/packages/case/index.html b/packages/case/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>canvas-editor-plugin-case</title>
+</head>
+
+<body>
+  <div id="app">
+    <div id="editor"></div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/packages/case/package.json b/packages/case/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@hufe921/canvas-editor-plugin-case",
+  "author": "Hufe",
+  "license": "MIT",
+  "version": "0.0.1",
+  "description": "uppercase and lowercase plugin for canvas-editor",
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "typings": "./dist/src/case/index.d.ts",
+  "main": "./dist/case.umd.cjs",
+  "module": "./dist/case.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Hufe921/canvas-editor-plugin.git"
+  },
+  "keywords": [
+    "canvas-editor",
+    "case"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode lib",
+    "release": "node scripts/release.js",
+    "type:check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@hufe921/canvas-editor": ">=0.9.88"
+  },
+  "devDependencies": {
+    "@hufe921/canvas-editor": "0.9.88",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@types/color": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "eslint": "7.32.0",
+    "simple-git-hooks": "^2.8.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
+  }
+}
diff --git a/packages/case/src/case/index.ts b/packages/case/src/case/index.ts
@@ -0,0 +1,53 @@
+import { Command, Editor, ElementType } from '@hufe921/canvas-editor'
+
+declare module '@hufe921/canvas-editor' {
+  interface Command {
+    executeUpperCase(): void
+    executeLowerCase(): void
+  }
+}
+
+const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
+  ElementType.TEXT,
+  ElementType.SUBSCRIPT,
+  ElementType.SUPERSCRIPT
+]
+
+enum CaseType {
+  UPPER = 'upper',
+  LOWER = 'lower'
+}
+
+function toCase(command: Command, type: CaseType) {
+  const rangeContext = command.getRangeContext()
+  if (!rangeContext?.selectionElementList?.length) return
+  const selectionElementList = rangeContext.selectionElementList
+  const isExistNonTextElement = selectionElementList.some(
+    element => element.type && !TEXTLIKE_ELEMENT_TYPE.includes(element.type)
+  )
+  if (isExistNonTextElement) return
+  // 缓存旧光标数据
+  const oldRange = command.getRange()
+  // 修改选中元素大小写
+  selectionElementList.forEach(element => {
+    element.value =
+      type === CaseType.UPPER
+        ? element.value.toUpperCase()
+        : element.value.toLowerCase()
+  })
+  // 插入后进行光标选择
+  command.executeInsertElementList(selectionElementList)
+  command.executeReplaceRange(oldRange)
+}
+
+export default function casePlugin(editor: Editor) {
+  const command = editor.command
+
+  command.executeUpperCase = () => {
+    toCase(command, CaseType.UPPER)
+  }
+
+  command.executeLowerCase = () => {
+    toCase(command, CaseType.LOWER)
+  }
+}
diff --git a/packages/case/src/main.ts b/packages/case/src/main.ts
@@ -0,0 +1,30 @@
+import Editor, { Command } from '@hufe921/canvas-editor'
+import casePlugin from './case'
+
+window.onload = function () {
+  const container = document.querySelector<HTMLDivElement>('#editor')!
+  const instance = new Editor(container, {
+    main: []
+  })
+  instance.use(casePlugin)
+  instance.register.contextMenuList([
+    {
+      name: '转成大写',
+      when: payload => {
+        return !payload.isReadonly && payload.editorHasSelection
+      },
+      callback: (command: Command) => {
+        command.executeUpperCase()
+      }
+    },
+    {
+      name: '转成小写',
+      when: payload => {
+        return !payload.isReadonly && payload.editorHasSelection
+      },
+      callback: (command: Command) => {
+        command.executeLowerCase()
+      }
+    }
+  ])
+}
diff --git a/packages/case/src/vite-env.d.ts b/packages/case/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/case/tsconfig.json b/packages/case/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["../../tsconfig.json"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": ""
+  },
+  "include": [
+    "./src/**/*.ts"
+  ]
+}
diff --git a/packages/case/vite.config.ts b/packages/case/vite.config.ts
@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite'
+import typescript from '@rollup/plugin-typescript'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+import * as path from 'path'
+
+export default defineConfig(({ mode }) => {
+  const name = 'case'
+  if (mode === 'lib') {
+    return {
+      plugins: [
+        cssInjectedByJsPlugin({
+          styleId: `${name}-style`,
+          topExecutionPriority: true
+        }),
+        {
+          ...typescript({
+            tsconfig: './tsconfig.json',
+            include: ['./src/case/**']
+          }),
+          apply: 'build',
+          declaration: true,
+          declarationDir: 'types/',
+          rootDir: '/'
+        }
+      ],
+      build: {
+        lib: {
+          name,
+          fileName: name,
+          entry: path.resolve(__dirname, 'src/case/index.ts')
+        },
+        rollupOptions: {
+          output: {
+            sourcemap: true
+          },
+          external: ['@hufe921/canvas-editor']
+        }
+      }
+    }
+  }
+  return {
+    base: `/${name}/`,
+    server: {
+      host: '0.0.0.0'
+    }
+  }
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
