@ebl-vue/editor-full 2.31.34 → 2.31.36

package/src/plugins/undo/vanilla-caret-js.ts

@@ -0,0 +1,102 @@
+export default class VanillaCaret {
+  target: any;
+  isContentEditable: any;
+  /**
+   * Create a new caret helper.
+   *
+   * @param {HTMLElement} target element to read or set the caret position on
+   */
+  constructor(target: any) {
+    this.target = target
+    this.isContentEditable = target && target.contentEditable
+  }
+
+  /**
+   * Return the current caret position.
+   *
+   * @returns {number} -1 if element is not in focus
+   */
+  getPos() {
+    // for contenteditable field
+    if (document.activeElement !== this.target) {
+      return -1
+    }
+    if (this.isContentEditable === 'true') {
+      this.target.focus()
+      const selection = document.getSelection();
+      if(!selection) {
+        return -1
+      }
+      let _range = selection.getRangeAt(0)
+      let range = _range.cloneRange()
+      range.selectNodeContents(this.target)
+      range.setEnd(_range.endContainer, _range.endOffset)
+      return range.toString().length
+    }
+    // for textarea/input element
+    return this.target.selectionStart
+  }
+
+  /**
+   * Set the caret position.
+   *
+   * @param {number} position caret position to set
+   */
+  setPos(position:number) {
+    if (this.isContentEditable === 'true') {
+      if (position >= 0) {
+        const selection = window.getSelection();
+        if (!selection) {
+          return;
+        }
+        const range = this.createRange(this.target, {
+          count: position
+        })
+        if (range) {
+          range.collapse(false)
+          selection.removeAllRanges()
+          selection.addRange(range)
+        }
+      }
+    } else {
+      this.target.focus();
+      this.target.setSelectionRange(position, position)
+    }
+  }
+
+  /**
+   * Helper used to create a range for a given position.
+   *
+   * @param {Node} node  node to inspect
+   * @param {{count: number}} chars current characters left
+   * @param {Range} [range] working range
+   * @returns {Range}
+   */
+  createRange(node: Node, chars: { count: number }, range?: Range) : Range {
+    if (!range) {
+      range = document.createRange()
+      range.selectNode(node)
+      range.setStart(node, 0)
+    }
+    if (chars.count === 0) {
+      range.setEnd(node, chars.count)
+    } else if (node && chars.count > 0) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.textContent && node.textContent.length < chars.count) {
+          chars.count -= node.textContent.length
+        } else {
+          range.setEnd(node, chars.count)
+          chars.count = 0
+        }
+      } else {
+        for (let lp = 0; lp < node.childNodes.length; lp++) {
+          range = this.createRange(node.childNodes[lp], chars, range)
+          if (chars.count === 0) {
+            break
+          }
+        }
+      }
+    }
+    return range
+  }
+}

package/src/style.css

@@ -0,0 +1,139 @@
+:root{
+    --color-border: #EFF0F1;
+}
+.ebl-editor{
+  cursor:text;
+  font-size: 16px;
+  font-weight: 400;
+  background-color: #fff;
+
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  padding-top:15px;
+
+}
+/* .codex-editor{
+  height: 100%;
+  overflow: auto;
+    
+} */
+.ebl-editor.outline{
+  padding-right: 280px;
+}
+.ebl-editor.outline .codex-editor{flex:1;}
+
+
+@media(max-width:1240px){
+  .ebl-outline{
+    display: none;
+    
+  }
+  .ebl-editor.outline{
+    padding-right: 0;
+  }
+}
+@media(min-width:1240px){
+  .ebl-editor.readonly .ce-block__content{
+    max-width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    
+  }
+ 
+}
+
+
+
+.ce-toolbar,.ce-inline-toolbar{
+  z-index: 1000;
+}
+.ce-toolbar__plus{
+  border: 1px solid var(--color-border);
+}
+.ce-toolbar {
+  .ce-popover__items{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+  }
+
+
+  .ce-popover__items .ce-popover-item{
+    position: relative;
+  }
+
+  .ce-popover__items .ce-popover-item__title{
+    display: none;
+  }
+
+  .ce-popover-item-html,
+  .ce-popover-item-separator,
+  .ce-popover-item[data-item-name="convert-to"]
+  {
+    width: 100%;
+  }
+  .ce-popover-item-html[data-item-name="list-setting"]{
+    width: auto;
+    overflow: hidden;
+  }
+  .ce-popover-item-html[data-item-name="list-setting-start-with"]{
+    border-radius: 6px;
+    padding: 3px;
+  }
+  .ce-popover-item-html[data-item-name="list-setting-start-with"]:hover{
+    background-color: #f8f8f8;
+  }
+  .ce-popover-item[data-item-name="convert-to"] .ce-popover-item__title{
+    display: block;
+  }
+  .ce-popover-item[data-item-name="add-below"]{
+    width: 100%;
+  }
+  .ce-popover-item[data-item-name="add-below"] .ce-popover-item__title{
+    display: block;
+  }
+
+  .ce-popover-item[data-item-name="list-setting"]{
+    width: 100%;
+  }
+  .ce-popover-item[data-item-name="list-setting"] .ce-popover-item__title{
+    display: block;
+  }
+}
+
+.ce-inline-toolbar .ce-popover__items{
+    display: flex!important;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .ce-inline-toolbar .ce-popover__items .ce-popover-item__title{
+    display: none
+  }
+
+
+  
+/* 滚动条整体部分 */
+.ebl-editor ::-webkit-scrollbar {
+    width: 6px;               /* 滚动条的宽度 */
+    height: 6px;              /* 滚动条的高度 */
+}
+
+/* 滚动条轨道 */
+.ebl-editor ::-webkit-scrollbar-track {
+    background: #f1f1f1;       /* 轨道颜色 */
+    border-radius: 1px;       /* 轨道圆角 */
+}
+
+/* 滚动条滑块 */
+.ebl-editor ::-webkit-scrollbar-thumb {
+    background: #C0C0C0;         /* 滑块颜色 */
+    border-radius: 10px;      /* 滑块圆角 */
+    border: 1px solid #fff;   /* 滑块边框 */
+}
+
+/* 滑块悬停时 */
+.ebl-editor ::-webkit-scrollbar-thumb:hover {
+    background: #555;         /* 滑块悬停时的颜色 */
+}

package/src/types.ts

@@ -0,0 +1,3 @@
+export interface IEblEditorSettings{
+  fileUploadEndpoint: string;
+}

package/src/utils/AxiosService.ts

@@ -0,0 +1,87 @@
+import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import { ElMessage } from "element-plus"
+
+
+interface IAxiosServiceConstructorParams{
+  appBaseApi?: string,
+  timeout?:number,
+  eblStoreUser?: any|undefined
+}
+
+class AxiosService {
+  appBaseApi: string = "";
+  timeout: number = 30000;
+  eblStoreUser: any|undefined;
+  axiosInstance: AxiosInstance | undefined;
+
+  constructor(params?: IAxiosServiceConstructorParams | undefined ) {
+    if (typeof params !== "undefined") {
+      if (params.appBaseApi) {
+        this.appBaseApi = params.appBaseApi;
+      }
+  
+      if (params.timeout) {
+        this.timeout = params.timeout;
+      }
+      if (params.eblStoreUser) {
+        this.eblStoreUser = params.eblStoreUser;
+      }
+      
+      
+    }    
+  }
+  createAxios():AxiosInstance {
+    //创建实例
+    this.axiosInstance = axios.create({
+      baseURL: this.appBaseApi,
+      timeout: this.timeout,
+      headers: { "Content-Type": "application/json;charset=utf-8" },
+    });
+    //请求拦截
+    this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+      
+      if (this.eblStoreUser) {
+        const token = this.eblStoreUser.token;
+        const tokenName = this.eblStoreUser.tokenName;
+        const tokenPrefix = this.eblStoreUser.tokenPrefix;
+        if (token && tokenName) {
+          config.headers[tokenName] = tokenPrefix + " " + token;
+        }
+      }      
+      return config;
+    }, (error: any) => {
+      return Promise.reject(error);
+    });
+    
+    // 响应拦截器
+    this.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
+      const { code, message } = response.data;
+      if (code === 1) {
+        return response.data;
+      }
+      ElMessage.error(message || "系统出错");
+      return response.data;
+    }, (error: any) => {
+      if (error) {
+        const { message } = error;
+        ElMessage.error(message || "系统出错");
+      }
+      return Promise.reject(error.message);
+    });
+    return this.axiosInstance;
+  }
+
+  static instance(appBaseApi: string|undefined, timeout: number, eblStoreUser?: any) {
+    let options:any = { appBaseApi: appBaseApi, timeout: timeout };
+    if (eblStoreUser) {
+      options.eblStoreUser = eblStoreUser;
+    }
+    let service = new AxiosService(options);
+    return service.createAxios();
+  }
+
+
+}
+export default AxiosService;
+type IAxiosService = InstanceType<typeof AxiosService>;
+export { IAxiosService }

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+
+
+export default {
+  copy: (o: any) => {
+    return JSON.parse(JSON.stringify(o));
+  },
+  createUniqueString: () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0;
+      const v = c === 'x' ? r : (r & 0x3 | 0x8);
+      console.log(v)
+      return v.toString(16);
+    });
+  }
+}

package/src/utils/install.ts

@@ -0,0 +1,19 @@
+import type { SFCWithInstall } from 'types'
+import type {App} from 'vue'
+export const withInstall = <T, E extends Record<string, any>>(
+  main: T,
+  extra?: E
+) => {
+  ;(main as SFCWithInstall<T>).install = (app:App): void => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp)
+    }
+  }
+
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      ;(main as any)[key] = comp
+    }
+  }
+  return main as SFCWithInstall<T> & E
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": false,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "jsx": "preserve",    
+    "baseUrl": "./",
+    "declaration":true,
+    "declarationDir": "./types",
+    "skipLibCheck":true,
+    "rootDir": ".",
+    "lib": [
+      "ES2017",
+      "ES2018",
+      "ES2019",
+      "DOM"
+    ],
+    "paths": {
+     "@/*": ["./src/*"],
+     "@/types": [ "./types/" ],
+     "@/types/*": [ "./types/*" ],
+    }
+  },
+  "include": [
+    "./src/index.ts",
+    "./src/**/*",   
+    "./types/index.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,81 @@
+
+
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig, UserConfig, ConfigEnv } from 'vite'
+import path from 'path';
+import dts from "vite-plugin-dts";
+import terser from '@rollup/plugin-terser'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+
+  return {
+    plugins: [
+      cssInjectedByJsPlugin(),
+      vue(),
+      vueJsx(),      
+      dts({
+        rollupTypes: true,
+        tsconfigPath: "./tsconfig.json",
+        insertTypesEntry: true,
+        pathsToAliases:true
+       })
+      
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+        '@/types': path.resolve(__dirname, './types'),
+      },
+    },
+    build: {
+      copyPublicDir: false,
+      target: 'es2018',
+      emptyOutDir: true,
+      sourcemap:true,
+      lib: {
+        entry: path.resolve(__dirname,"src","index.ts"),     
+        name: '@ebl-vue/editor-full',
+        formats:['es'],
+        fileName: format => `index.mjs`,
+        cssFileName: 'style',
+      },
+      rollupOptions: {
+        plugins: [
+          terser({
+            compress: {
+              drop_console:true,
+              drop_debugger: true
+            },
+            format: {
+              comments:false
+            }
+          }),
+         
+        ],
+        external: [
+          'vue',
+          '@ebl-vue/editorjs',
+          '@ebl-vue/editor-render',
+          'shiki',
+          '@editorjs/caret',
+          '@editorjs/dom',
+          '@codexteam/ajax',
+          'axios'
+         
+        ],
+        output: [
+          {
+            exports: 'named',            
+            globals: {
+              vue: 'Vue'       
+            }
+          }
+        ],
+      },
+
+    }
+  }
+});