@ebl-vue/editor-full 1.0.12 → 1.1.1

package/src/plugins/undo/index.ts

@@ -1,5 +1,6 @@
 import VanillaCaret from "vanilla-caret-js";
 import Observer from "./observer";
+import type EditorJS from '@ebl-vue/editorjs';
 
 /**
  * https://github.com/kommitters/editorjs-undo/tree/main
@@ -14,10 +15,23 @@ import Observer from "./observer";
  * @property {Object} initialItem - Initial data object.
  */
 export default class Undo {
+  editor: EditorJS | null;
+  holder: any;
+  defaultBlock: any;
+  blocks: any;
+  caret: any;
+  shouldSaveHistory: boolean;
+  readOnly: any;
+  maxLength: any;
+  onUpdate: any;
+  config: { debounceTimer: any; shortcuts: { undo: any; redo: any; }; };
+  initialItem: any;
+  stack: any;
+  position: number=0;
   /**
    * @param options — Plugin custom options.
    */
-  constructor({ editor, config = {}, onUpdate, maxLength }) {
+  constructor({ editor, config = {}, onUpdate, maxLength }:{ editor: EditorJS, config?: any, onUpdate?: any, maxLength?: any }) {
     const defaultOptions = {
       maxLength: 30,
       onUpdate() {},
@@ -80,7 +94,7 @@ export default class Undo {
    * @param {Object} stack  Changes history stack.
    * @param {Number} stack  Limit of changes recorded by the history stack.
    */
-  truncate(stack, limit) {
+  truncate(stack: any, limit: number) {
     while (stack.length > limit) {
       stack.shift();
     }
@@ -91,7 +105,7 @@ export default class Undo {
    *
    * @param {Object} initialItem  Initial data provided by the user.
    */
-  initialize(initialItem) {
+  initialize(initialItem: any) {
     const initialData =
       "blocks" in initialItem ? initialItem.blocks : initialItem;
     const initialIndex = initialData.length - 1;
@@ -142,7 +156,7 @@ export default class Undo {
    * @param {Object} newData  New data to be saved in the history stack.
    * @returns {Boolean}
    */
-  editorDidUpdate(newData) {
+  editorDidUpdate(newData: any) {
     const { state } = this.stack[this.position];
     if (!newData.length) return false;
     if (newData.length !== state.length) return true;
@@ -153,7 +167,7 @@ export default class Undo {
   /**
    * Adds the saved data in the history stack and updates current position.
    */
-  save(state) {
+  save(state: any) {
     if (this.position >= this.maxLength) {
       this.truncate(this.stack, this.maxLength);
     }
@@ -182,7 +196,7 @@ export default class Undo {
    * @param {Number} index is the block index
    * @returns The caret position
    */
-  getCaretIndex(index) {
+  getCaretIndex(index: number) {
     const blocks = this.holder.getElementsByClassName("ce-block__content");
     const caretBlock = new VanillaCaret(blocks[index].firstChild);
 
@@ -195,7 +209,7 @@ export default class Undo {
    * @param {Array} compState is the state to compare and know the deleted block.
    * @param {Number} index is the block index in state.
    */
-  insertDeletedBlock(state, compState, index) {
+  insertDeletedBlock(state: any, compState: any, index: number) {
     for (let i = 0; i < state.length; i += 1) {
       if (!compState[i] || state[i].id !== compState[i].id) {
         this.blocks.insert(state[i].type, state[i].data, {}, i, true);
@@ -211,9 +225,9 @@ export default class Undo {
    * @param {Array} compState is the state to compare and know the dropped block.
    * @returns {Boolean} true if the block was dropped
    */
-  blockWasDropped(state, compState) {
+  blockWasDropped(state: any, compState: any) {
     if (state.length === compState.length) {
-      return state.some((block, i) => block.id !== compState[i].id);
+      return state.some((block: any, i: number) => block.id !== compState[i].id);
     }
     return false;
   }
@@ -224,7 +238,7 @@ export default class Undo {
    * @param {Array} compState is the state to compare if there was a deleted block.
    * @returns {Boolean} true if a block was inserted previously.
    */
-  blockWasSkipped(state, compState) {
+  blockWasSkipped(state: any, compState: any) {
     return state.length !== compState.length;
   }
 
@@ -234,7 +248,7 @@ export default class Undo {
    * @param {Number} compIndex is the index to compare and know if the block was inserted previously
    * @returns true if the content in a block without the focus was modified.
    */
-  contentChangedInNoFocusBlock(index, compIndex) {
+  contentChangedInNoFocusBlock(index: number, compIndex: number) {
     return index !== compIndex;
   }
 
@@ -244,7 +258,7 @@ export default class Undo {
    * @param {Array} compState is the state to compare and know if a block was deleted.
    * @returns {Boolean} true if a block was deleted previously.
    */
-  blockWasDeleted(state, compState) {
+  blockWasDeleted(state: any, compState: any) {
     return state.length > compState.length;
   }
 
@@ -255,7 +269,7 @@ export default class Undo {
    * @param {Number} index is the block index in state.
    * @returns {Boolean} true if a block was deleted previously.
    */
-  contentWasCopied(state, compState, index) {
+  contentWasCopied(state: any, compState: any, index: number) {
     return Object.keys(state[index].data).length === 0
       && JSON.stringify(compState[index + 1]) !== JSON.stringify(state[index + 1]);
   }
@@ -315,7 +329,7 @@ export default class Undo {
    * @param {Number} caretIndex is the caret position
    * @param {Array} state is the current state according to this.position.
    */
-  setCaretIndex(index, caretIndex) {
+  setCaretIndex(index: number, caretIndex: number) {
     if (caretIndex && caretIndex !== -1) {
       const blocks = this.holder.getElementsByClassName("ce-block__content");
       const caretBlock = new VanillaCaret(blocks[index].firstChild);
@@ -330,7 +344,7 @@ export default class Undo {
    * @param {Array} state is the current state according to this.position.
    * @param {Number} index is the block index
    */
-  async insertBlock(state, index) {
+  async insertBlock(state: any, index: number) {
     await this.blocks.insert(
       state[index].type,
       state[index].data,
@@ -346,7 +360,7 @@ export default class Undo {
    * @param {Array} state is the current state according to this.position.
    * @param {Number} index is the block index.
    */
-  async insertSkippedBlocks(prevState, state, index) {
+  async insertSkippedBlocks(prevState: any, state: any, index: number) {
     for (let i = prevState.length; i < state.length; i += 1) {
       this.insertBlock(state, i);
     }
@@ -361,9 +375,9 @@ export default class Undo {
    * @param {Array} state is the current state according to this.position.
    * @param {Number} index is the block index.
    */
-  async updateModifiedBlock(state, index) {
+  async updateModifiedBlock(state: any, index: number) {
     const block = state[index - 1];
-    if (this.editor.blocks.getById(block.id)) return this.blocks.update(block.id, block.data);
+    if (this.editor!.blocks.getById(block.id)) return this.blocks.update(block.id, block.data);
     return this.blocks.render({ blocks: state });
   }
 
@@ -375,7 +389,7 @@ export default class Undo {
       this.position += 1;
       this.shouldSaveHistory = false;
       const { index, state, caretIndex } = this.stack[(this.position)];
-      const { index: prevIndex, state: prevState } =
+      const { index:prevIndex, state: prevState } =
         this.stack[this.position - 1];
 
       if (this.blockWasDeleted(prevState, state)) {
@@ -432,8 +446,8 @@ export default class Undo {
    * @returns {Array}
    */
 
-  parseKeys(keys) {
-    const specialKeys = {
+  parseKeys(keys: string[]) {
+    const specialKeys: any = {
       CMD: /(Mac)/i.test(navigator.platform) ? "metaKey" : "ctrlKey",
       ALT: "altKey",
       SHIFT: "shiftKey",
@@ -457,23 +471,24 @@ export default class Undo {
     const { holder } = this;
     const { shortcuts } = this.config;
     const { undo, redo } = shortcuts;
-    const keysUndo = undo.map((undoShortcut) => undoShortcut.replace(/ /g, "").split("+"));
-    const keysRedo = redo.map((redoShortcut) => redoShortcut.replace(/ /g, "").split("+"));
+    const keysUndo = undo.map((undoShortcut: string) => undoShortcut.replace(/ /g, "").split("+"));
+    const keysRedo = redo.map((redoShortcut: string) => redoShortcut.replace(/ /g, "").split("+"));
 
     const keysUndoParsed = keysUndo.map((keys: string[]) => this.parseKeys(keys));
     const keysRedoParsed = keysRedo.map((keys: string[]) => this.parseKeys(keys));
 
-    const twoKeysPressed = (e: KeyboardEvent, keys: string[]) =>
-      keys.length === 2 && e[keys[0]] && (e.key.toLowerCase() === keys[1]);
-    const threeKeysPressed = (e: KeyboardEvent, keys: string[]) =>
-      keys.length === 3 && e[keys[0]] && e[keys[1]] && (e.key.toLowerCase() === keys[2]);
-
-    const verifyListTwoKeysPressed = (e: KeyboardEvent, keysList) =>
-      keysList.reduce((result, keys) => result || twoKeysPressed(e, keys), false);
-    const verifyListThreeKeysPressed = (e: KeyboardEvent, keysList) =>
+    const twoKeysPressed = (e: any, keys: any) => {
+      return keys.length === 2 && e[keys[0]] && (e.key.toLowerCase() === keys[1]);
+    }
+    const threeKeysPressed = (e: any, keys: any) => {
+     return keys.length === 3 && e[keys[0]] && e[keys[1]] && (e.key.toLowerCase() === keys[2]);
+    }
+    const verifyListTwoKeysPressed = (e: KeyboardEvent, keysList:string[]) =>
+      keysList.reduce((result, keys:string) => result || twoKeysPressed(e, keys), false);
+    const verifyListThreeKeysPressed = (e: KeyboardEvent, keysList:string[]) =>
       keysList.reduce((result, keys) => result || threeKeysPressed(e, keys), false);
 
-    const pressedKeys = (e: KeyboardEvent, keys, compKeys) => {
+    const pressedKeys = (e: KeyboardEvent, keys: string[], compKeys: string[]) => {
       if (verifyListTwoKeysPressed(e, keys) && !verifyListThreeKeysPressed(e, compKeys)) {
         return true;
       }
@@ -483,7 +498,7 @@ export default class Undo {
       return false;
     };
 
-    const handleUndo = (e) => {
+    const handleUndo = (e: KeyboardEvent) => {
       if (pressedKeys(e, keysUndoParsed, keysRedoParsed)) {
         e.preventDefault();
         this.undo();

package/src/plugins/undo/observer.ts

@@ -10,14 +10,14 @@ export default class Observer {
   private observer: MutationObserver | null;
   private debounceTimer: number;
   private mutationDebouncer: Function;
-  private holder: string;
+  private holder: HTMLElement;
   /**
    * Creates a new instance of the Observer object.
    * @param {Function} registerChange - Function that register a change in the history stack.
    * @param {String} holder - Editor.js holder id.
    * @param {Number} debounceTimer Delay time for the debouncer.
    */
-  constructor(registerChange: Function, holder: string, debounceTimer: number) {
+  constructor(registerChange: Function, holder: HTMLElement, debounceTimer: number) {
 
     this.holder = holder;
     this.observer = null;
@@ -39,7 +39,7 @@ export default class Observer {
       characterDataOldValue: true,
     };
 
-    const target = this.holder.querySelector('.codex-editor__redactor');
+    const target = this.holder.querySelector('.codex-editor__redactor') as HTMLElement;
 
     this.observer = new MutationObserver((mutationList) => {
       this.mutationHandler(mutationList);

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/types/index.d.ts

@@ -11,3 +11,9 @@ declare module 'vue' {
   
 };
 
+
+export interface IEblEditorSettings{
+  fileUploadEndpoint: string;
+  urlUploadEndpoint: string;
+  userStore: any;
+}

package/vite.config.ts

@@ -61,7 +61,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           'shiki',
           '@editorjs/caret',
           '@editorjs/dom',
-          'vanilla-caret-js'
+          'vanilla-caret-js',
+          '@codexteam/ajax',
+          'axios'
          
         ],
         output: [

package/src/plugins/list/styles/icons/index.ts

@@ -1,10 +0,0 @@
-/**
- * This file exports icons needed for Editorjs List plugin, but this icons are not released yet
- * @todo remove this file and use icons from codex-team/icons package, when version with this icons will be released
- */
-export const IconNumber = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 14.2L10 7.4135C10 7.32872 9.90111 7.28241 9.83598 7.33668L7 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
-export const IconLowerRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 9.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 7.01L10 7" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>';
-export const IconUpperRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 7.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
-export const IconUpperAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0087 14.2H16" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M7 14.2L7.78865 12M13 14.2L12.1377 12M7.78865 12C7.78865 12 9.68362 7 10 7C10.3065 7 12.1377 12 12.1377 12M7.78865 12L12.1377 12" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
-export const IconLowerAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2087 14.2H14.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M11.5 14.5C11.5 14.5 11 13.281 11 12.5M7 9.5C7 9.5 7.5 8.5 9 8.5C10.5 8.5 11 9.5 11 10.5L11 11.5M11 11.5L11 12.5M11 11.5C11 11.5 7 11 7 13C7 15.3031 11 15 11 12.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
-export const IconStartWith = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.2L8 7.4135C8 7.32872 7.90111 7.28241 7.83598 7.33668L5 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M14 13L16.4167 10.7778M16.4167 10.7778L14 8.5M16.4167 10.7778H11.6562" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';