Build split code (#55)

* build: change bundle dependencies

* build: split code chunk

* docs: update style import

* docs: syntax module usage

* refactor: change theme name to style.css

* fix: syntax module type

README.md

@@ -42,6 +42,7 @@ Initialize the Fluent Editor editor:
 
 ```javascript
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 const editor = new FluentEditor('#editor', {
   theme: 'snow'

README.zh-CN.md

@@ -42,6 +42,7 @@ npm i @opentiny/fluent-editor
 
 ```javascript
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 const editor = new FluentEditor('#editor', {
   theme: 'snow'

packages/docs/fluent-editor/demos/basic-usage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/code-block-highlight.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
+import hljs from 'highlight.js'
+// import the highlight.js theme you want
+import 'highlight.js/styles/atom-one-dark.css'
+// config extra languages
+import go from 'highlight.js/lib/languages/go'
+hljs.registerLanguage('go', go)
 
 let editor
 
@@ -21,7 +28,12 @@ onMounted(() => {
       theme: 'snow',
       modules: {
         toolbar: TOOLBAR_CONFIG,
-        syntax: true,
+        syntax: {
+          hljs,
+          languages: [
+            { key: 'go', label: 'Golang' },
+          ],
+        },
       },
     })
   })

packages/docs/fluent-editor/demos/counter-count.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/counter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/custom-toolbar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/emoji.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/file-upload.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/format-painter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/formula.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
 window.katex = katex

packages/docs/fluent-editor/demos/get-html.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
 window.katex = katex
+window.hljs = hljs
 
 let editor
 

packages/docs/fluent-editor/demos/image-upload-to-server.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/image-upload.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/markdown.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 import MarkdownShortcuts from 'quill-markdown-shortcuts'
 
 let editor

packages/docs/fluent-editor/demos/mention-custom-list.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/mention.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/table.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/demos/video.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.scss'
 
 let editor
 

packages/docs/fluent-editor/docs/code-block-highlight.md

@@ -1,6 +1,12 @@
 # 代码块高亮
 
-通过设置 `syntax` 模块为 true，可以开启代码块高亮功能。
+使用代码块高亮需要安装 [`highlight.js`](https://highlightjs.org/) 插件。
+
+如果 highlight.js 暴露在 `window` 上，你可以设置 `syntax` 模块为 `true` 可开启代码块高亮功能。
+
+如果 highlight.js 没有暴露在 `window` 上，你需要将导入的 highlight.js 传递给 `syntax` 模块的 `hljs` 选项。
 
 :::demo src=demos/code-block-highlight.vue
 :::
+
+

packages/docs/fluent-editor/docs/quick-start.md

@@ -24,6 +24,7 @@ npm i @opentiny/fluent-editor
 
 ```javascript
 import FluentEditor from '@opentiny/fluent-editor'
+import '@opentiny/fluent-editor/style.css'
 
 // 执行初始化时，请确保能获取到 DOM 元素，如果是在 Vue 项目中，需要在 onMounted 事件中执行。
 const editor = new FluentEditor('#editor', {
@@ -58,6 +59,7 @@ const editor = new FluentEditor('#editor', {
   <script type="module">
     // 引入 @opentiny/fluent-editor
     import FluentEditor from '@opentiny/fluent-editor'
+    import '@opentiny/fluent-editor/style.css'
 
     // 初始化 Fluent Editor 富文本编辑器
     const editor = new FluentEditor('#editor', {

packages/docs/fluent-editor/vite.config.ts

@@ -1,6 +1,20 @@
 import { defineConfig } from 'vite'
 import { viteDemoPreviewPlugin } from '@vitepress-code-preview/plugin'
+import path from 'path'
 
+const fluentEditorRoot = path.resolve(__dirname, '../../fluent-editor')
 export default defineConfig({
   plugins: [viteDemoPreviewPlugin()],
+  resolve: {
+    alias: [
+      {
+        find: /^@opentiny\/fluent-editor(\/(es|lib))?$/,
+        replacement: path.resolve(fluentEditorRoot, 'src/index.ts'),
+      },
+      {
+        find: /^@opentiny\/fluent-editor\/(theme)\/(.*)$/,
+        replacement: `${path.resolve(fluentEditorRoot, 'src/assets')}/$1/$2`,
+      },
+    ],
+  },
 })

packages/docs/package.json

@@ -20,9 +20,12 @@
     "vitepress": "^1.3.2"
   },
   "dependencies": {
+    "quill":"^2.0.0",
     "@opentiny/fluent-editor": "workspace:^",
     "vue": "^3.4.38",
     "katex": "^0.16.11",
+    "highlight.js": "^10.2.0",
+    "html2canvas": "^1.0.0-rc.7",
     "quill-markdown-shortcuts": "^0.0.10"
   }
 }

packages/fluent-editor/package.json

@@ -29,38 +29,36 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./style.css": {
-      "import": "./style.css",
-      "require": "./style.css"
-    }
+    "./style.scss": "./src/assets/style.scss"
   },
   "scripts": {
     "start": "vite build && vite",
     "dev": "vite",
-    "build": "vite build && node scripts/pre-release.js",
+    "build": "vite build && pnpm build:theme && node scripts/pre-release.js",
+    "build:theme": "vite build --config vite.config.theme.ts",
     "test": "jest",
     "format": "prettier './{src,test}/**/*.{js,ts,tsx,vue}' --write"
   },
-
+  "peerDependencies": {
+    "quill": "^2.0.0"
+  },
   "devDependencies": {
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.2",
-    "@types/quill": "^2.0.9",
     "commander": "^6.2.0",
+    "glob": "^11.0.0",
+    "highlight.js": "^10.2.0",
+    "html2canvas": "^1.0.0-rc.7",
     "jest": "^26.6.3",
-    "lodash-es": "^4.17.15",
     "prettier": "^2.3.0",
     "sass": "^1.47.0",
     "shelljs": "^0.8.4",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.4",
-    "vite": "^2.3.0"
+    "vite": "^5.0.0"
   },
   "dependencies": {
-    "highlight.js": "^10.2.0",
-    "html2canvas": "^1.0.0-rc.7",
-    "quill": "^2.0.0",
-    "quill-delta": "^5.1.0"
+    "lodash-es": "^4.17.15"
   }
 }

packages/fluent-editor/scripts/pre-release.js

@@ -28,10 +28,11 @@ console.log('newVersion:', newVersion)
 
 function preRelease() {
   shelljs.sed('-i', `"version": "${currentVersion}"`, `"version": "${newVersion}"`, targetFile)
-  shelljs.sed('-i', `"main": "src/index.ts"`, `"main": "index.cjs.js"`, targetFile)
-  shelljs.sed('-i', `"module": "src/index.ts"`, `"module": "index.es.js"`, targetFile)
-  shelljs.sed('-i', `"import": "./src/index.ts"`, `"import": "./index.es.js"`, targetFile)
-  shelljs.sed('-i', `"require": "./src/index.ts"`, `"require": "./index.cjs.js"`, targetFile)
+  shelljs.sed('-i', `"main": "src/index.ts"`, `"main": "lib/index.cjs.js"`, targetFile)
+  shelljs.sed('-i', `"module": "src/index.ts"`, `"module": "es/index.es.js"`, targetFile)
+  shelljs.sed('-i', `"import": "./src/index.ts"`, `"import": "./es/index.es.js"`, targetFile)
+  shelljs.sed('-i', `"require": "./src/index.ts"`, `"require": "./lib/index.cjs.js"`, targetFile)
+  shelljs.sed('-i', `"./style.scss": "./src/assets/style.scss"`, `"./style.css": "./theme/style.css"`, targetFile)
   shelljs.cp('-rf', '../../README.md', 'dist')
 }
 

packages/fluent-editor/src/assets/style.scss

@@ -0,0 +1,37 @@
+@font-face {
+    font-family: "iconfont"; /* Project id 3231649 */
+    src: url('./iconfont/iconfont.woff2') format('woff2'),
+         url('./iconfont/iconfont.woff') format('woff'),
+         url('./iconfont/iconfont.ttf') format('truetype');
+}
+@import 'quill/dist/quill.snow';
+
+@import './common';
+@import './mention';
+@import './toolbar';
+@import './editor';
+@import './counter';
+@import './size';
+@import './font';
+@import './lineHeight';
+@import './better-table';
+@import './custom-image';
+@import './fileBar';
+@import './link';
+@import './fullscreen';
+
+// 模块：字数统计 counter
+@include counter;
+
+// 模块：@提醒 mention
+@include mention;
+
+// 模块：工具栏 toolbar
+@include toolbar;
+
+// @include lineHeightList;
+
+// 图片预览
+@include imagePreview;
+
+@include fontFamilyContent;

packages/fluent-editor/src/config/types/editor-modules.interface.ts

@@ -20,7 +20,13 @@ export interface IEditorModules {
       bindings?: any
     }
     | boolean
-  syntax?: boolean
+  syntax?:
+    | {
+      interval?: number
+      languages?: { key: string, label: string }[]
+      hljs?: any
+    }
+    | boolean
   toolbar?:
     | (string | string[])[][]
     | ToolbarOption

packages/fluent-editor/src/index.ts

@@ -1,4 +1,3 @@
-import './styles.scss'
 // 后面合并两个配置
 // export * from './config/editor.config'
 // export * from './config'