editor-svg 1.0.0

package/src/utils/index.ts

@@ -0,0 +1,45 @@
+export function debounce<T extends unknown[]>(
+  func: (...arg: T) => unknown,
+  delay: number
+) {
+  let timer: number
+  return function (this: unknown, ...args: T) {
+    if (timer) {
+      window.clearTimeout(timer)
+    }
+    timer = window.setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
+  }
+}
+
+export function scrollIntoView(container: HTMLElement, selected: HTMLElement) {
+  if (!selected) {
+    container.scrollTop = 0
+    return
+  }
+  const offsetParents: HTMLElement[] = []
+  let pointer = <HTMLElement>selected.offsetParent
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer)
+    pointer = <HTMLElement>pointer.offsetParent
+  }
+  const top =
+    selected.offsetTop +
+    offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0)
+  const bottom = top + selected.offsetHeight
+  const viewRectTop = container.scrollTop
+  const viewRectBottom = viewRectTop + container.clientHeight
+  if (top < viewRectTop) {
+    container.scrollTop = top
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight
+  }
+}
+
+export function nextTick(fn: Function) {
+  const callback = window.requestIdleCallback || window.setTimeout
+  callback(() => {
+    fn()
+  })
+}

package/src/utils/prism.ts

@@ -0,0 +1,89 @@
+interface IPrismKindStyle {
+  color?: string
+  italic?: boolean
+  opacity?: number
+  bold?: boolean
+}
+
+export function getPrismKindStyle(payload: string): IPrismKindStyle | null {
+  switch (payload) {
+    case 'comment':
+    case 'prolog':
+    case 'doctype':
+    case 'cdata':
+      return { color: '#008000', italic: true }
+    case 'namespace':
+      return { opacity: 0.7 }
+    case 'string':
+      return { color: '#A31515' }
+    case 'punctuation':
+    case 'operator':
+      return { color: '#393A34' }
+    case 'url':
+    case 'symbol':
+    case 'number':
+    case 'boolean':
+    case 'variable':
+    case 'constant':
+    case 'inserted':
+      return { color: '#36acaa' }
+    case 'atrule':
+    case 'keyword':
+    case 'attr-value':
+      return { color: '#0000ff' }
+    case 'function':
+      return { color: '#b9a40a' }
+    case 'deleted':
+    case 'tag':
+      return { color: '#9a050f' }
+    case 'selector':
+      return { color: '#00009f' }
+    case 'important':
+      return { color: '#e90', bold: true }
+    case 'italic':
+      return { italic: true }
+    case 'class-name':
+    case 'property':
+      return { color: '#2B91AF' }
+    case 'attr-name':
+    case 'regex':
+    case 'entity':
+      return { color: '#ff0000' }
+    default:
+      return null
+  }
+}
+
+type IFormatPrismToken = {
+  type?: string
+  content: string
+} & IPrismKindStyle
+
+export function formatPrismToken(
+  payload: (Prism.Token | string)[]
+): IFormatPrismToken[] {
+  const formatTokenList: IFormatPrismToken[] = []
+  function format(tokenList: (Prism.Token | string)[]) {
+    for (let i = 0; i < tokenList.length; i++) {
+      const element = tokenList[i]
+      if (typeof element === 'string') {
+        formatTokenList.push({
+          content: element
+        })
+      } else if (Array.isArray(element.content)) {
+        format(element.content)
+      } else {
+        const { type, content } = element
+        if (typeof content === 'string') {
+          formatTokenList.push({
+            type,
+            content,
+            ...getPrismKindStyle(type)
+          })
+        }
+      }
+    }
+  }
+  format(payload)
+  return formatTokenList
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "ignoreDeprecations": "6.0",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "outDir": "dist",
+    "rootDir": "",
+  },
+  "include": ["./src/"],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+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 = 'canvas-editor'
+  if (mode === 'lib') {
+    return {
+      plugins: [
+        cssInjectedByJsPlugin({
+          styleId: `${name}-style`,
+          topExecutionPriority: true
+        }),
+        {
+          ...typescript({
+            tsconfig: './tsconfig.json',
+            include: ['./src/editor/**']
+          }),
+          apply: 'build',
+          declaration: true,
+          declarationDir: 'types/',
+          rootDir: '/'
+        }
+      ],
+      build: {
+        lib: {
+          name,
+          fileName: name,
+          entry: path.resolve(__dirname, 'src/editor/index.ts')
+        },
+        rollupOptions: {
+          output: {
+            sourcemap: true
+          }
+        }
+      }
+    }
+  }
+  return {
+    base: `/${name}/`,
+    server: {
+      host: '0.0.0.0'
+    }
+  }
+})