@ebl-vue/editor-full 2.31.24 → 2.31.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebl-vue/editor-full",
-  "version": "2.31.24",
+  "version": "2.31.28",
   "type": "module",
   "author": "lrj525@sina.com",
   "description": "结构化编辑器",
@@ -31,6 +31,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@ebl-vue/editor-render": "^2.31.0",
     "@ebl-vue/editorjs": "^2.31.0",
     "vue": "^3.4.0"
   },
@@ -42,8 +43,7 @@
     "@editorjs/caret": "^1.0.3",
     "@editorjs/dom": "^1.0.1",
     "axios": "^1.13.2",
-    "shiki": "^3.20.0",
-    "vanilla-caret-js": "^1.1.0"
+    "shiki": "^3.20.0"
   },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",

package/types/index.d.ts

@@ -14,6 +14,10 @@ declare module 'vue' {
     
   }
 };
-
+declare module '@ebl-vue/editor-full' {
+  export interface EblEditor {
+    configuration: EditorConfiguration
+  }
+}
 
  export {}

package/.postcssrc.yml

@@ -1,33 +0,0 @@
-plugins:
-  # Apply custom property sets via @apply rule
-  # https://github.com/pascalduez/postcss-apply
-  postcss-apply: {}
-
-  # Convert modern CSS into something most browsers can understand
-  # https://github.com/csstools/postcss-preset-env
-  postcss-preset-env:
-    # Polyfill CSS features
-    # https://github.com/csstools/postcss-preset-env#stage
-    #
-    # List of features with levels: https://cssdb.org/
-    stage: 0
-
-    # Define polyfills based on browsers you are supporting
-    # https://github.com/csstools/postcss-preset-env#browsers
-    browsers:
-      - 'last 2 versions'
-      - '> 1%'
-
-    # Instruct all plugins to omit pre-polyfilled CSS
-    # https://github.com/csstools/postcss-preset-env#preserve
-    preserve: false
-
-  # Nested rules unwrapper
-  # https://github.com/postcss/postcss-nested
-  #
-  # As you know 'postcss-preset-env' plugin has an ability to process
-  # 'postcss-nesting' feature but it does not work with BEM
-  # Report: https://github.com/csstools/postcss-preset-env/issues/40
-  postcss-nested: {}
-
-

package/postcss.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-apply': {},
-    'postcss-nested': {},
-    'postcss-preset-env': {
-      stage: 0,
-      browsers: [
-        'last 2 versions',
-        '> 1%'
-      ],
-      preserve:false
-     
-    }
-  }
-};

package/src/components/Editor/Editor.vue

@@ -1,293 +0,0 @@
-<template>
-  <div class="ebl-editor" id="holder"></div>
-</template>
-<script lang="ts" setup>
-
-import EditorJS from '@ebl-vue/editorjs';
-// import EditorJS from '../../../../editorjs/src/codex';
-// window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
-
-import { onMounted, onUnmounted, watch, inject } from 'vue';
-import { toRaw } from 'vue';
-import { IEblEditorSettings } from '../../types';
-
-/**
- * 插件
- */
-
-import DragDrop from '../../plugins/drag-drop';
-import { H1, H2, H3, H4, H5, H6 } from '../../plugins/header';
-import BlockAlignment from '../../plugins/block-alignment';
-import Paragraph from '../../plugins/paragraph';
-import Code from '../../plugins/code';
-import type { OutputData } from '@ebl-vue/editorjs';
-import Quote from "../../plugins/quote/";
-import Delimiter from '../../plugins/delimiter';
-import List from '../../plugins/list';
-import Undo from '../../plugins/undo';
-import Alert from '../../plugins/alert';
-import IndentTune from '../../plugins/indent';
-import Marker from "../../plugins/marker";
-import { ColorPickerWithoutSanitize } from "../../plugins/color-picker";
-import Underline from "../../plugins/underline";
-import InlineCode from "../../plugins/inline-code";
-import Table from '../../plugins/table';
-import ImageTool from "../../plugins/imageTool";
-import { ImageToolTune } from "../../plugins/imageResizeCrop";
-import Outline from '../../plugins/outline';
-
-const EblEditorSettings: IEblEditorSettings | undefined = inject("EblEditorSettings");
-defineOptions({
-  name: 'EblEditor',
-  inheritAttrs: false
-})
-
-
-let emits = defineEmits(["onReady", "onChange"]);
-
-
-interface Props {
-  readOnly: boolean,
-  placeholder: string,
-  data: OutputData,
-  locale: any,
-  userStore: any,
-  showOutline?: boolean,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readOnly: false,
-  placeholder: "Enter something",
-  data: ()=>({
-    blocks: []
-  }),
-  locale: {},
-  showOutline:false
-});
-let editorData=toRaw(props.data);
-let editorIsReady = false;
-
-let editor: EditorJS | null = null;
-let undo: Undo | null = null;
-let outline: Outline | null = null;
-const tunes = ['indent', 'blockAlignment'];
-onMounted(() => {
-
-  editor = new EditorJS({
-    minHeight: 300,
-    holder: 'holder',
-    autofocus: true,
-    defaultBlock: 'paragraph',
-    placeholder: props.placeholder,
-    tunes: tunes,
-    tools: {
-      inlineCode: InlineCode,
-      underline: Underline,
-      Color: {
-        class: ColorPickerWithoutSanitize
-      },
-      marker: {
-        class: Marker
-      },
-      indent: {
-        class: IndentTune,
-      },
-      alert: {
-        class: Alert,
-        inlineToolbar: true
-      },
-      List: {
-        class: List,
-        inlineToolbar: true,
-        config: {
-          defaultStyle: 'checklist',
-
-          maxLevel: 4,
-        }
-      },
-      h1: {
-        class: H1,
-        inlineToolbar: true
-      },
-      h2: {
-        class: H2,
-        inlineToolbar: true,
-
-      },
-      h3: {
-        class: H3,
-        inlineToolbar: true
-      },
-      h4: {
-        class: H4,
-        inlineToolbar: true
-      },
-      h5: {
-        class: H5,
-        inlineToolbar: true
-      },
-      h6: {
-        class: H6,
-        inlineToolbar: true
-      },
-      paragraph: {
-        class: Paragraph,
-        inlineToolbar: true
-      },
-      blockAlignment: {
-        class: BlockAlignment,
-        inlineToolbar: true
-      },
-      code: {
-        class: Code,
-        config: {
-          lang: "javascript",
-          theme: "github-dark-dimmed"//"catppuccin-latte"
-        }
-      },
-      quote: {
-        class: Quote,
-        inlineToolbar: true
-      },
-      delimiter: Delimiter,
-      table: {
-        class: Table,
-        inlineToolbar: true,
-        config: {
-          rows: 2,
-          cols: 3,
-        }
-      },
-      image: {
-        class: ImageTool,
-        inlineToolbar: true,
-        tunes: tunes.concat(['imageResize']),
-        config: {
-          types: ".png,.jpeg,.jpg,.gif,.webp",
-          userStore: props.userStore,
-          endpoints: {
-            byFile: EblEditorSettings?.fileUploadEndpoint,
-            //byUrl: EblEditorSettings?.urlUploadEndpoint
-          },
-          features: {
-            caption: false,
-            stretch: false,
-            border: false,
-            background: false,
-          }
-
-
-        }
-      },
-      imageResize: {
-        class: ImageToolTune,
-        config: {
-          resize: true,
-          crop: false
-        }
-      },
-
-
-
-    },
-
-    data: editorData,
-    readOnly: props.readOnly,
-    i18n: props.locale,
-    onChange: (api, event) => {
-      emits("onChange", api, event);
-    },
-    onReady: () => {
-      editorIsReady = true;
-      new DragDrop("holder", props.readOnly, editor!, '1px solid #999');
-      const undoConfig = {
-        debounceTimer: 200,
-        maxLength: 100
-      }
-      undo = new Undo({
-        editor: editor!,
-        config: undoConfig,
-        onUpdate: () => {
-        }
-      });
-      editorData = toRaw(props.data);
-      undo.initialize(editorData);
-
-      if (props.data && props.data.blocks && props.data.blocks.length > 0) {
-        editor!.render(editorData);
-      }
-      //文档大纲
-      if(props.showOutline){
-        outline = new Outline("holder",editor!);
-        outline.render(editorData);
-      }
-
-      emits("onReady");
-    },
-
-  })
-});
-onUnmounted(() => {
-  if (editor !== null) {
-    editor.destroy();
-    editor = null;
-  }
-});
-
-watch(() => props.data, (newVal, oldVal) => { 
-  editorData = toRaw(newVal);
-  if (editor != null && editorIsReady) {
-    editor.render(editorData).then(() => {
-      if (outline != null && props.showOutline) {
-        outline.render(editorData);
-      }
-    });
-  }
-  if (undo != null) {
-    undo.clear();
-    undo.initialize(editorData);
-  }
-  
-
-},{
-  deep:true
-});
-
-
-/**
- * 验证是否为空 */
-function validate() {
-  return new Promise((resolve, reject) => {
-    if (editor !== null) {
-      editor.save().then((outputData: OutputData) => {
-        if (outputData.blocks.length > 0) {
-          return resolve(true);
-
-        }
-        return resolve(false);
-      });
-    } else {
-      return resolve(false);
-    }
-  });
-}
-function getData() {
-  return new Promise((resolve, reject) => {
-    if (editor !== null) {
-      editor.save().then((outputData: OutputData) => {
-        return resolve(outputData);
-      });
-    } else {
-      return resolve(null);
-    }
-  });
-}
-
-defineExpose({
-  validate,
-  getData,
-});
-</script>
-<style scoped>
-
-</style>

package/src/components/Editor/EditorRender.vue

@@ -1,274 +0,0 @@
-<template>
-  <div class="ebl-editor readonly" id="holder"></div>
-</template>
-<script lang="ts" setup>
-
-import EditorJS from '@ebl-vue/editorjs';
-// import EditorJS from '../../../../editorjs/src/codex';
-// window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
-
-import { onMounted, onUnmounted, watch, inject } from 'vue';
-import { toRaw } from 'vue';
-
-
-/**
- * 插件
- */
-
-
-import { H1, H2, H3, H4, H5, H6 } from '../../plugins/header';
-import BlockAlignment from '../../plugins/block-alignment';
-import Paragraph from '../../plugins/paragraph';
-import Code from '../../plugins/code';
-import type { OutputData } from '@ebl-vue/editorjs';
-import Quote from "../../plugins/quote";
-import Delimiter from '../../plugins/delimiter';
-import List from '../../plugins/list';
-import Undo from '../../plugins/undo';
-import Alert from '../../plugins/alert';
-import IndentTune from '../../plugins/indent';
-import Marker from "../../plugins/marker";
-import { ColorPickerWithoutSanitize } from "../../plugins/color-picker";
-import Underline from "../../plugins/underline";
-import InlineCode from "../../plugins/inline-code";
-import Table from '../../plugins/table';
-import ImageTool from "../../plugins/imageTool";
-import { ImageToolTune } from "../../plugins/imageResizeCrop";
-import Outline from '../../plugins/outline';
-
-
-defineOptions({
-  name: 'EblEditorRender',
-  inheritAttrs: false
-})
-
-
-let emits = defineEmits(["onReady", "onChange"]);
-
-
-interface Props {
-  data: OutputData,
-  locale: any,
-  showOutline?: boolean,
-
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  data: ()=>({
-    blocks: []
-  }),
-  locale: {},
-  showOutline: false,
-
-});
-let editorData=toRaw(props.data);
-let editorIsReady = false;
-
-let editor: EditorJS | null = null;
-let undo: Undo | null = null;
-let outline: Outline | null = null;
-const tunes = ['indent', 'blockAlignment'];
-onMounted(() => {
-
-  editor = new EditorJS({
-    minHeight: 50,
-    holder: 'holder',
-    autofocus: true,
-    defaultBlock: 'paragraph',
-    placeholder: props.placeholder,
-    tunes: tunes,
-    tools: {
-      inlineCode: InlineCode,
-      underline: Underline,
-      Color: {
-        class: ColorPickerWithoutSanitize
-      },
-      marker: {
-        class: Marker
-      },
-      indent: {
-        class: IndentTune,
-      },
-      alert: {
-        class: Alert,
-        inlineToolbar: true
-      },
-      List: {
-        class: List,
-        inlineToolbar: true,
-        config: {
-          defaultStyle: 'checklist',
-
-          maxLevel: 4,
-        }
-      },
-      h1: {
-        class: H1,
-        inlineToolbar: true
-      },
-      h2: {
-        class: H2,
-        inlineToolbar: true,
-
-      },
-      h3: {
-        class: H3,
-        inlineToolbar: true
-      },
-      h4: {
-        class: H4,
-        inlineToolbar: true
-      },
-      h5: {
-        class: H5,
-        inlineToolbar: true
-      },
-      h6: {
-        class: H6,
-        inlineToolbar: true
-      },
-      paragraph: {
-        class: Paragraph,
-        inlineToolbar: true
-      },
-      blockAlignment: {
-        class: BlockAlignment,
-        inlineToolbar: true
-      },
-      code: {
-        class: Code,
-        config: {
-          lang: "javascript",
-          theme: "github-dark-dimmed"//"catppuccin-latte"
-        }
-      },
-      quote: {
-        class: Quote,
-        inlineToolbar: true
-      },
-      delimiter: Delimiter,
-      table: {
-        class: Table,
-        inlineToolbar: true,
-        config: {
-          rows: 2,
-          cols: 3,
-        }
-      },
-      image: {
-        class: ImageTool,
-        inlineToolbar: true,
-        tunes: tunes.concat(['imageResize']),
-        config: {
-          types: ".png,.jpeg,.jpg,.gif,.webp",
-          
-          endpoints: {
-            byFile: '',
-            
-          },
-          features: {
-            caption: false,
-            stretch: false,
-            border: false,
-            background: false,
-          }
-
-
-        }
-      },
-      imageResize: {
-        class: ImageToolTune,
-        config: {
-          resize: true,
-          crop: false
-        }
-      },
-
-
-
-    },
-
-    data: editorData,
-    readOnly: true,
-    i18n: props.locale,
-    onChange: (api, event) => {
-      emits("onChange", api, event);
-    },
-    onReady: () => {
-      editorIsReady = true;
-      editorData = toRaw(props.data);
-      if (props.data && props.data.blocks && props.data.blocks.length > 0) {
-        editor!.render(editorData);
-      }
-      //文档大纲
-      if(props.showOutline){
-        outline = new Outline("holder",editor!);
-        outline.render(editorData);
-      }
-
-      emits("onReady");
-    },
-
-  })
-});
-onUnmounted(() => {
-  if (editor !== null) {
-    editor.destroy();
-    editor = null;
-  }
-});
-
-watch(() => props.data, (newVal, oldVal) => { 
-  editorData = toRaw(newVal);
-  if (editor != null && editorIsReady) {
-    editor.render(editorData).then(() => {
-      if (outline != null && props.showOutline) {
-        outline.render(editorData);
-      }
-    });
-  }
-  
-  
-
-},{
-  deep:true
-});
-
-
-/**
- * 验证是否为空 */
-function validate() {
-  return new Promise((resolve, reject) => {
-    if (editor !== null) {
-      editor.save().then((outputData: OutputData) => {
-        if (outputData.blocks.length > 0) {
-          return resolve(true);
-
-        }
-        return resolve(false);
-      });
-    } else {
-      return resolve(false);
-    }
-  });
-}
-function getData() {
-  return new Promise((resolve, reject) => {
-    if (editor !== null) {
-      editor.save().then((outputData: OutputData) => {
-        return resolve(outputData);
-      });
-    } else {
-      return resolve(null);
-    }
-  });
-}
-
-defineExpose({
-  validate,
-  getData,
-});
-</script>
-<style scoped>
-
-</style>

package/src/components/index.ts

@@ -1,29 +0,0 @@
-
-import type { Plugin } from "vue";
-import { withInstall } from "../utils/install" 
-import type { SFCWithInstall } from 'types'
-
-
-import Editor from "./Editor/Editor.vue"
-import EditorRender from "./Editor/EditorRender.vue"
-
-
-
-const items = [ 
-  Editor,
-  EditorRender
-];
-
-let PluginList: Plugin[] = [];
-for (let key in items) {  
-  const ele = items[key];
-  const EblEle: SFCWithInstall<typeof ele> = withInstall(ele);
-  
-  PluginList.push(EblEle);
-}
-
-export default PluginList;
-export {
-  Editor as EblEditor,
-  EditorRender as EblEditorRender
- };

package/src/constants/index.ts

@@ -1 +0,0 @@
-export const INSTALLED_KEY = Symbol('INSTALLED_KEY')