@opentiny/fluent-editor 3.20.2-alpha.0 → 3.20.2

package/src/utils/image.ts

@@ -0,0 +1,22 @@
+export function imgToBase64(imageUrl: string) {
+  return new Promise<string>((resolve, reject) => {
+    const canvas = document.createElement('canvas')
+    const img = new Image()
+    img.crossOrigin = 'Anonymous'
+    img.src = imageUrl
+    img.onload = function () {
+      const ctx = canvas.getContext('2d')
+      if (ctx) {
+        canvas.height = img.height
+        canvas.width = img.width
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        ctx.drawImage(img, 0, 0)
+        const dataURL = canvas.toDataURL('image/png', 1)
+        resolve(dataURL)
+      }
+    }
+    img.onerror = function () {
+      reject(new Error(`Could not load image at ${imageUrl}`))
+    }
+  })
+}

package/src/utils/method.ts

@@ -0,0 +1,82 @@
+/** Detect free variable `global` from Node.js. */
+const freeGlobal
+  = typeof global === 'object'
+  && global !== null
+  && global.Object === Object
+  && global
+
+/** Detect free variable `globalThis` */
+const freeGlobalThis
+  = typeof globalThis === 'object'
+  && globalThis !== null
+  && globalThis.Object == Object
+  && globalThis
+
+/** Detect free variable `self`. */
+const freeSelf
+  = typeof self === 'object' && self !== null && self.Object === Object && self
+
+/** Used as a reference to the global object. */
+export const root
+  = freeGlobalThis || freeGlobal || freeSelf || new Function('return this')()
+
+export function isObject(value) {
+  const type = typeof value
+  return value != null && (type === 'object' || type === 'function')
+}
+
+export function compareArray(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+export function compareObject(object1, object2) {
+  const o1keys = Object.keys(object1)
+  const o2keys = Object.keys(object2)
+  if (o2keys.length !== o1keys.length) return false
+  for (let i = 0; i <= o1keys.length - 1; i++) {
+    const key = o1keys[i]
+    if (!o2keys.includes(key)) return false
+    if (!compare(object2[key], object1[key])) return false
+  }
+  return true
+}
+
+export function compare(value, other) {
+  if (value === other) {
+    return true
+  }
+  if (Array.isArray(value) && Array.isArray(other)) {
+    return compareArray(value, other)
+  }
+  if (value instanceof Function || other instanceof Function) {
+    return false
+  }
+  if (value instanceof Object && other instanceof Object) {
+    return compareObject(value, other)
+  }
+  return false
+}
+
+export function unshiftString(str: string, targetLength: number, addString: string): string {
+  targetLength = targetLength > 0 ? targetLength : 0
+  addString = String((typeof addString !== 'undefined' && typeof addString !== 'object') ? addString : ' ')
+  str = (str === undefined || str === null) ? '' : String(str)
+  if (str.length >= targetLength) {
+    return String(str)
+  }
+  else {
+    targetLength = targetLength - str.length
+    if (targetLength > addString.length) {
+      addString += addString.repeat(targetLength / addString.length)
+    }
+    return addString.slice(0, targetLength) + String(str)
+  }
+}

package/src/utils/scroll-lock.ts

@@ -0,0 +1,52 @@
+let scrollBarWidth: number
+export function getScrollBarWidth({ target = document.body } = {}): number {
+  if (scrollBarWidth !== undefined) return scrollBarWidth
+
+  const outer = document.createElement('div')
+  outer.className = 'scroll__wrap'
+  outer.style.visibility = 'hidden'
+  outer.style.width = '100px'
+  outer.style.position = 'absolute'
+  outer.style.top = '-9999px'
+  target.appendChild(outer)
+
+  const widthNoScroll = outer.offsetWidth
+  outer.style.overflow = 'scroll'
+
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  const widthWithScroll = inner.offsetWidth
+  outer.parentNode?.removeChild(outer)
+  scrollBarWidth = widthNoScroll - widthWithScroll
+
+  return scrollBarWidth
+}
+
+export function lockScroll({ target = document.body } = {}) {
+  let scrollBarWidth = 0
+  let originWidth = '0'
+
+  const clockClass = 'scroll--lock'
+
+  const cleanLock = () => {
+    target && (target.style.width = originWidth)
+    target.classList.remove(clockClass)
+  }
+
+  const hasHiddenClass = target.classList.contains(clockClass)
+  if (!hasHiddenClass) {
+    originWidth = target.style.width
+  }
+  scrollBarWidth = getScrollBarWidth({ target })
+  const hasOverflow = (target === document.body ? document.documentElement : target).clientHeight < target.scrollHeight
+  const overflowY = window.getComputedStyle(target).overflowY
+  // only when the scrollbar exists needs to reduce width
+  if (scrollBarWidth > 0 && (hasOverflow || overflowY === 'scroll') && !hasHiddenClass) {
+    target.style.width = `calc(100% - ${scrollBarWidth}px)`
+  }
+  target.classList.add(clockClass)
+
+  return cleanLock
+}

package/src/video/index.ts

@@ -0,0 +1,62 @@
+import type { Parchment as TypeParchment } from 'quill'
+import Quill from 'quill'
+import { sanitize } from '../config/editor.utils'
+
+const BlockEmbed = Quill.imports['blots/block/embed'] as TypeParchment.BlotConstructor
+const VIDEO_ATTRIBUTES = ['id', 'title', 'src']
+
+class Video extends BlockEmbed {
+  static blotName: string
+  static tagName: string
+  static SANITIZED_URL: string
+  static PROTOCOL_WHITELIST: string[]
+  static className: string
+  statics: any
+  domNode: any
+
+  static sanitize(url) {
+    return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL
+  }
+
+  static create(value) {
+    const node = super.create(value) as HTMLElement
+    node.setAttribute('contenteditable', 'false')
+    node.setAttribute('controls', 'controls')
+    VIDEO_ATTRIBUTES.forEach((key) => {
+      if (value[key]) {
+        switch (key) {
+          case 'src':{ const src = Video.sanitize(value[key])
+            node.setAttribute(key, src)
+            break
+          }
+          case 'title': {
+            node.setAttribute(key, value[key])
+            break
+          }
+          default: {
+            node.dataset[key] = value[key]
+          }
+        }
+      }
+    })
+    return node
+  }
+
+  static value(domNode) {
+    const formats: any = {}
+    VIDEO_ATTRIBUTES.forEach((key) => {
+      const value = domNode.getAttribute(key) || domNode.dataset[key]
+      if (value) {
+        formats[key] = value
+      }
+    })
+    return formats
+  }
+}
+Video.blotName = 'video'
+Video.tagName = 'VIDEO'
+Video.SANITIZED_URL = 'about:blank'
+Video.PROTOCOL_WHITELIST = ['http', 'https']
+Video.className = 'ql-video-item'
+
+export default Video

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+
+    "experimentalDecorators": true,
+    "baseUrl": "./",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["vite/client", "@types/node", "@types/jest", "quill/quill.d.ts", "quill/core.d.ts"],
+    "strict": true,
+    // 不允许this有隐式的any类型
+    "strictNullChecks": false,
+    "noImplicitAny": false, // 不允许隐式的any类型
+    "noImplicitThis": false,
+    // "outDir": "./dist/out-tsc",
+    "declaration": false,
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true // 不允许把null、undefined赋值给其他类型的变量
+  }
+}

package/vite.config.theme.ts

@@ -0,0 +1,20 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    sourcemap: false,
+    minify: false,
+    rollupOptions: {
+      input: 'src/assets/style.scss',
+      treeshake: false,
+      preserveEntrySignatures: 'strict',
+      output: {
+        dir: resolve(__dirname, 'dist'),
+        assetFileNames: 'style.css',
+        preserveModules: true,
+        preserveModulesRoot: resolve(__dirname, 'src/assets'),
+      },
+    },
+  },
+})

package/vite.config.ts

@@ -0,0 +1,56 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import * as glob from 'glob'
+import { defineConfig } from 'vite'
+
+interface Manifest {
+  version: string
+  dependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+}
+export function getPackageManifest(pkgPath: string): Manifest {
+  return JSON.parse(readFileSync(pkgPath, 'utf8')) as Manifest
+}
+export function rollupExternalFromPackage(pkgPath: string) {
+  const { dependencies, peerDependencies } = getPackageManifest(pkgPath)
+  const dependenciesKeys = Object.keys(dependencies ?? {})
+  const peerDependenciesKeys = Object.keys(peerDependencies ?? {})
+
+  return (id: string) => {
+    const packages = new Set([...peerDependenciesKeys, ...dependenciesKeys])
+    return Array.from(packages).some(pkg => id === pkg || id.startsWith(`${pkg}/`))
+  }
+}
+
+function rollupOutput(target: string, format: string): any {
+  return {
+    format: target,
+    entryFileNames: `[name].${target}.js`,
+    preserveModules: true,
+    dir: resolve(__dirname, 'dist', format),
+    preserveModulesRoot: resolve(__dirname, 'src'),
+    exports: 'named',
+  }
+}
+
+const input = glob.sync('./src/**/*.ts', {
+  cwd: __dirname,
+  absolute: true,
+})
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    minify: false,
+    rollupOptions: {
+      input,
+      treeshake: false,
+      preserveEntrySignatures: 'allow-extension',
+      external: rollupExternalFromPackage(resolve(__dirname, 'package.json')),
+      output: [
+        rollupOutput('es', 'es'),
+        rollupOutput('cjs', 'lib'),
+      ],
+    },
+  }
+})