.gitignore

@@ -1,4 +1,93 @@
-node_modules
-cypress/build
-cypress/videos
-*.log
+
+# Created by https://www.gitignore.io/api/webstorm+all
+# Edit at https://www.gitignore.io/?templates=webstorm+all
+
+### WebStorm+all ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### WebStorm+all Patch ###
+# Ignores the whole .idea folder and all .iml files
+# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
+
+.idea/
+
+# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
+
+*.iml
+modules.xml
+.idea/misc.xml
+*.ipr
+
+# Sonarlint plugin
+.idea/sonarlint
+
+# End of https://www.gitignore.io/api/webstorm+all
+node_modules/
+package-lock.json

README.md

@@ -49,11 +49,11 @@
 
 4. 待视频上传完毕后, 将视频网络地址连同刚才的唯一标识(id)再次发送给 webview
 
-   调用 webview 的以下方法传递上传后的视频, 编辑器会在提交时进行替换
+   调用 webview 的以下方法传递上传后的视频, 编辑器会在提交时进行替换, node 为可选
 
    ```js
    window.videoUrlReceiver(
-     '{ "id": "unique-id", "url": "newwork-file-url", "poster": "newwork-file-url" }',
+     '{ "id": "unique-id", "url": "newwork-file-url", "urlNode": "xxx", "poster": "newwork-file-url", "posterNode": "xxx" }',
    )
    ```
 

dist/index.css

@@ -938,6 +938,24 @@
   border: 1px solid #ccc;
 }
 
+:root {
+  color-scheme: light dark;
+  --background: transparent;
+  --content-color: #15171a;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222;
+    --content-color: #dfdfdf;
+  }
+  .ql-toolbar {
+    background-color: #868686 !important;
+    border-top-color: #000 !important;
+  }
+  .ql-editor {
+    color: #868686 !important;
+  }
+}
 html,
 body {
   margin: 0;
@@ -1156,6 +1174,24 @@ body {
   content: '移除';
 }
 
+:root {
+  color-scheme: light dark;
+  --background-color: #fff;
+  --content-color: #15171a;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222;
+    --content-color: #dfdfdf;
+  }
+  .ql-editor {
+    color: #fff !important;
+  }
+}
+.ql-editor {
+  background: var(--background-color);
+  color: var(--content-color);
+}
 html,
 body {
   margin: 0;
@@ -1179,6 +1215,7 @@ body {
   margin: auto;
   display: block;
   max-width: 100%;
+  height: auto !important;
 }
 .ql-editor video {
   margin: auto;

dist/preview.css

@@ -938,6 +938,24 @@
   border: 1px solid #ccc;
 }
 
+:root {
+  color-scheme: light dark;
+  --background-color: #fff;
+  --content-color: #15171a;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222;
+    --content-color: #dfdfdf;
+  }
+  .ql-editor {
+    color: #fff !important;
+  }
+}
+.ql-editor {
+  background: var(--background-color);
+  color: var(--content-color);
+}
 html,
 body {
   margin: 0;
@@ -961,6 +979,7 @@ body {
   margin: auto;
   display: block;
   max-width: 100%;
+  height: auto !important;
 }
 .ql-editor video {
   margin: auto;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimkit/plus-editor",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "rich-text editor for plus",
   "main": "dist/main.bundle.js",
   "repository": "git@github.com:mutoe/plus-editor.git",

src/index.styl

@@ -1,3 +1,21 @@
+:root {
+  color-scheme: light dark;
+  --background: transparent;
+  --content-color: #15171a;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222;
+    --content-color: #dfdfdf;
+  }
+  .ql-toolbar {
+    background-color: #868686!important;
+      border-top-color: #000!important;
+  }
+  .ql-editor {
+    color: #868686 !important;
+  }
+}
 html
 body {
   margin: 0;

src/preview.styl

@@ -1,4 +1,24 @@
 // 这里的样式也会影响到移动端的展示, 谨慎修改
+:root {
+	color-scheme: light dark;
+	--background-color: #FFFFFF;
+	--content-color: #15171A;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-color: #222;
+		--content-color: #dfdfdf;
+	}
+	.ql-editor {
+		color: #fff!important;
+	}
+}
+
+.ql-editor {
+	background: var(--background-color);
+	color: var(--content-color);
+}
 html, body {
 	margin: 0;
 }
@@ -24,6 +44,7 @@ html, body {
 		margin: auto;
 		display: block;
 		max-width: 100%;
+		height: auto!important;
 	}
 
 	video {

src/preview.ts

@@ -48,6 +48,16 @@ const onReady = () => {
       height: Number(img.dataset.height) || 0,
     })
 
+    const imgWidth = Number(img.dataset.width) || 0
+    const imgHeight = Number(img.dataset.height) || 0
+
+    if (imgWidth && imgHeight) {
+      if (imgWidth > document.body.offsetWidth) {
+        img.style.width = `${document.body.offsetWidth}px`
+        img.style.height = `${imgHeight * (document.body.offsetWidth / imgWidth)}px`
+      }
+    }
+
     img.addEventListener('click', () => {
       callMethod('clickImage', { src: img.src, arr: images, index })
     })
@@ -67,7 +77,7 @@ const onReady = () => {
   })
 }
 
-if (document.readyState === 'loading') {
+if (document.readyState !== 'complete') {
   document.addEventListener('DOMContentLoaded', onReady)
 } else {
   onReady()

src/uploader.ts

@@ -4,6 +4,7 @@ import Spark from 'spark-md5'
 let userToken: string = ''
 let apiV2BaseUrl: string = ''
 let storage = { channel: 'public' }
+let crawlerUrl: string = ''
 
 try {
   const sp = new URL(window.location.href).searchParams
@@ -23,6 +24,7 @@ window.setUploaderOptions = options => {
     options = JSON.parse(options)
   }
 
+  crawlerUrl = ''
   userToken = options.userToken || ''
   apiV2BaseUrl = options.apiV2BaseUrl || ''
 
@@ -282,6 +284,26 @@ async function getMediaInfo(file: File) {
   return mf
 }
 
+let crawlerUrlPromise: Promise<string> | null
+async function getCrawlerUrl() {
+  if (!crawlerUrl) {
+    if (!crawlerUrlPromise) {
+      const url = `${apiV2BaseUrl.replace(/\/+$/, '')}/crawl`
+      crawlerUrlPromise = axios
+        .head(url)
+        .then(() => (crawlerUrl = url))
+        .catch(() => (crawlerUrl = 'https://thinksns.zhibocloud.cn/api/v2/crawl'))
+        .finally(() => {
+          crawlerUrlPromise = null
+        })
+    }
+
+    return await crawlerUrlPromise
+  }
+
+  return crawlerUrl
+}
+
 async function uploadRemoteImage(params: {
   src: string
   remoteId: string
@@ -301,6 +323,7 @@ async function uploadRemoteImage(params: {
   try {
     const contentType = 'image/png'
     const filename = `${Date.now()}.png`
+    const crawlerUrl = await getCrawlerUrl()
     const { blob, file, buff } = await new Promise((resolve, reject) => {
       const img = document.createElement('img')
       img.addEventListener('load', () => {
@@ -327,7 +350,7 @@ async function uploadRemoteImage(params: {
       })
       img.addEventListener('error', () => reject())
       img.crossOrigin = 'anonymous'
-      img.src = `${apiV2BaseUrl.replace(/\/+/, '')}/crawl?url=${encodeURIComponent(params.src)}`
+      img.src = `${crawlerUrl}?url=${encodeURIComponent(params.src)}`
     })
 
     const spark = new Spark.ArrayBuffer()