@ebl-vue/editor-full 1.1.7 → 2.31.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebl-vue/editor-full",
-  "version": "1.1.7",
+  "version": "2.31.9",
   "type": "module",
   "author": "lrj525@sina.com",
   "description": "结构化编辑器",

package/src/components/Editor/Editor.vue

@@ -18,7 +18,7 @@ import EditorJS from '@ebl-vue/editorjs';
 
 import { onMounted, onUnmounted, ref, inject } from 'vue';
 import { toRaw } from 'vue';
-import { IEblEditorSettings } from '@/types';
+import { IEblEditorSettings } from '../../types';
 
 /**
  * 插件
@@ -144,7 +144,7 @@ onMounted(() => {
         class: Code,
         config: {
           lang: "javascript",
-          theme: "catppuccin-latte"
+          theme: "github-dark-dimmed"//"catppuccin-latte"
         }
       },
       quote: {
@@ -258,4 +258,6 @@ defineExpose({
   getData,
 });
 </script>
-<style scoped></style>
+<style scoped>
+
+</style>

package/src/index.ts

@@ -13,6 +13,9 @@ export const version = installer.version;
 export default installer;
 
 export {
-  zhCn,
-  Editor as EblEditor
+  zhCn
 };
+export type * from "./types";
+export {
+  Editor as EblEditor 
+}

package/src/installer.ts

@@ -2,17 +2,15 @@ import type { App, Plugin } from 'vue'
 import { version } from '../package.json'
 
 import { INSTALLED_KEY } from "./constants";
-import { IEblEditorSettings } from '@/types';
+import type { IEblEditorSettings } from "./types";
 
 export const createInstaller = (components: Plugin[] = []) => {
-  const install = (app: App,config?: IEblEditorSettings) => {
+  const install = (app: App, config: IEblEditorSettings) => {
     if (app[INSTALLED_KEY]) return
 
     app[INSTALLED_KEY] = true
-    components.forEach((c) => app.use(c))  
-    if(config) {
-      app.provide("EblEditorSettings",config);
-    }
+    components.forEach((c) => app.use(c))
+    app.provide("EblEditorSettings", config);    
   
   }
 

package/src/plugins/code/index.css

@@ -14,13 +14,13 @@
 
 .ce-editorjs-x-shiki__selector {
   display: flex;
-  gap: .25rem;
-  /* align-items: center; */
+  gap:15px;
   justify-content: space-between;
   z-index: 12;
   border-bottom-style: solid;
   border-color: #9ca3af0d;
-  padding: .5rem;
+  border-bottom-width: 1px;
+  padding: 8px;
 }
 
 .ce-editorjs-x-shiki__selector-language

package/src/plugins/imageResizeCrop/ImageTune.ts

@@ -61,18 +61,7 @@ export default class ImageToolTune  implements BlockTune {
 
   constructor({ api, data, config, block }: ImageToolTuneConstructor) {
     this.settings = [
-      // {
-      //   name: 'resize',
-      //   icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M29 30l1 90h36V66h26V30H29zm99 0v36h72V30h-72zm108 0v36h72V30h-72zm108 0v36h72V30h-72zm102 0v78h36V30h-36zm-206 80v36h100.543l-118 118H30v218h218V289.457l118-118V272h36V110H240zm206 34v72h36v-72h-36zM30 156v72h36v-72H30zm416 96v72h36v-72h-36zm0 108v72h36v-72h-36zm-166 86v36h72v-36h-72zm108 0v36h72v-36h-72z"></path></svg>',
-      //   label: '',
-      //   group: 'size',
-      // },
-      // {
-      //   name: 'crop',
-      //   icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15h2v2h-2v-2zm0-4h2v2h-2v-2zm2 8h-2v2c1 0 2-1 2-2zM13 3h2v2h-2V3zm8 4h2v2h-2V7zm0-4v2h2c0-1-1-2-2-2zM1 7h2v2H1V7zm16-4h2v2h-2V3zm0 16h2v2h-2v-2zM3 3C2 3 1 4 1 5h2V3zm6 0h2v2H9V3zM5 3h2v2H5V3zm-4 8v8c0 1.1.9 2 2 2h12V11H1zm2 8l2.5-3.21 1.79 2.15 2.5-3.22L13 19H3z"></path></svg>',
-      //   label: '',
-      //   group: 'size',
-      // },
+      
     ];
 
     this.api = api;
@@ -596,7 +585,7 @@ export default class ImageToolTune  implements BlockTune {
     resizerTopRight.addEventListener('mousedown', e => {
       this.resizeClick(
         blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        resizerTopRight,
+        "right",
         e,
       );
     });
@@ -606,13 +595,35 @@ export default class ImageToolTune  implements BlockTune {
     resizerBottomRight.addEventListener('mousedown', e => {
       this.resizeClick(
         blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        resizerBottomRight,
+        "right",
         e,
       );
     });
 
+    const resizerTopLeft = document.createElement('div');
+    resizerTopLeft.classList.add('resizer', 'top-left');
+    resizerTopLeft.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "left",
+        e,
+      );
+    });
+    const resizerBottomLeft = document.createElement('div');
+    resizerBottomLeft.classList.add('resizer', 'bottom-left');
+    resizerBottomLeft.addEventListener('mousedown', e => {
+      this.resizeClick(
+        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
+        "left",
+        e,
+      );
+    });
+
+
     resizers.appendChild(resizerTopRight);
     resizers.appendChild(resizerBottomRight);
+    resizers.appendChild(resizerTopLeft);
+    resizers.appendChild(resizerBottomLeft);
     resizable.appendChild(resizers);
     blockContent.getElementsByClassName('cdx-block')[0].appendChild(resizable);
   }
@@ -629,16 +640,21 @@ export default class ImageToolTune  implements BlockTune {
    * @public
    * @return {void}
    * */
-  resizeClick(blockContent: HTMLElement, _: HTMLElement, e: MouseEvent): void {
+  resizeClick(blockContent: HTMLElement, handleDirection: String, e: MouseEvent): void {
     const maxWidth =
-      document.getElementsByClassName('codex-editor')[0].clientWidth;
-
+      document.getElementsByClassName('ce-block__content')[0].clientWidth;
     let startX = 0;
     let startWidth = 0;
 
     const mouseMoveHandler = (e: MouseEvent) => {
       const dx = e.clientX - startX;
-      const newWidth = startWidth + dx;
+      let newWidth = startWidth;
+      if (handleDirection === "right") {
+        newWidth += dx;
+      }
+      if (handleDirection === "left") {
+        newWidth -= dx;
+      }
 
       if (newWidth > 50 && newWidth < maxWidth) {
         (

package/src/plugins/imageResizeCrop/index.css

@@ -117,8 +117,8 @@
 }
 
 .cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: var(--primary-content);
   border: 3px solid var(--primary);
@@ -126,8 +126,8 @@
 }
 
 .cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.top-left {
-  left: -5px;
-  top: -5px;
+  left: -8px;
+  top: 2px;
   cursor: nwse-resize;
   /*resizer cursor*/
 }
@@ -137,8 +137,8 @@
   .resizable
   .resizers
   .resizer.top-right {
-  right: -5px;
-  top: -5px;
+  right: -8px;
+  top: 1px;
   cursor: nesw-resize;
 }
 
@@ -147,8 +147,8 @@
   .resizable
   .resizers
   .resizer.bottom-left {
-  left: -5px;
-  bottom: -5px;
+  left: -9px;
+  bottom: 10px;
   cursor: nesw-resize;
 }
 
@@ -157,8 +157,8 @@
   .resizable
   .resizers
   .resizer.bottom-right {
-  right: -5px;
-  bottom: -5px;
+  right: -9px;
+  bottom: 10px;
   cursor: nwse-resize;
 }
 
@@ -211,12 +211,7 @@
   max-height: unset !important;
 }
 
-.ce-block {
-  margin: 0.8em 0;
-}
-.ce-toolbar {
-  z-index: 3;
-}
+
 
 .image-tool__caption {
   background-color: white;

package/src/plugins/imageTool/index.css

@@ -1,7 +1,9 @@
 .image-tool {
   --bg-color: #cdd1e0;
   --front-color: #388ae5;
-  --border-color: #e8e8eb
+  --border-color: #e8e8eb;
+  display: inline-block;
+ 
 }
 
 
@@ -9,13 +11,17 @@
   border-radius: 3px;
   overflow: hidden;
   margin-bottom: 10px;
-  padding-bottom: 0
+  padding-bottom: 0;
+ user-select:none;
+  pointer-events:none;
 }
 
 .image-tool__image-picture {
   max-width: 100%;
   vertical-align: bottom;
-  display: inline-block
+  display: inline-block;
+  user-select:none;
+  pointer-events:none;
 }
 
 .image-tool__image-preloader {

package/src/plugins/table/style.css

@@ -302,7 +302,7 @@
 }
 
 .tc-popover--opened {
-  display: block;
+  display: flex;
   animation: menuShowing .1s cubic-bezier(.215, .61, .355, 1) forwards
 }
 

package/src/plugins/table/utils/dom.ts

@@ -24,8 +24,9 @@ export function make(
       continue;
     }
 
-    //el[attrName] = attributes[attrName];
-    el.setAttribute(attrName, attributes[attrName]);
+    el[attrName] = attributes[attrName];
+    //不能用
+    //el.setAttribute(attrName, attributes[attrName]);
   }
 
   return el;

package/src/style.css

@@ -7,39 +7,7 @@
   font-weight: 400;
   background-color: #fff;
 }
-.ebl-editor-title{
-  min-height: 55px;
-}
-.ebl-editor-title-wrap{
-  min-height: 55px;  
-  margin: 0 auto;
-}
-.ebl-editor-title-input{
-  min-height: 55px;
-  width: 100%;  
-  font-weight: 600;
-  border: none;
-  background-color: transparent;
-  font-size:34px;
-}
-.ebl-editor-title-input:focus{
-  outline: none;
-}
-.ebl-editor-title-input:active{
-   outline: none;
-}
-.ebl-editor-time-wrap{
-  white-space: nowrap;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  padding-top :12px ;
-  padding-bottom: 8px;
-  color: #646a73;
-}
-.ce-block__content{
-  max-width: 650px;
-}
+
 @media (min-width: 1050px) {
     .ce-block__content {
         max-width: 700px;

package/src/types.ts

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

package/types/index.d.ts

@@ -9,15 +9,11 @@ declare module 'vue' {
   export interface App {
     [INSTALLED_KEY]?: boolean
   }
-  //  export interface GlobalComponents {
-  //  EblEditor: typeof import('@ebl-vue/editor-full')['EblEditor'],
+   export interface GlobalComponents {
+   EblEditor: typeof import('@ebl-vue/editor-full')['EblEditor'],
     
-  // }
+  }
 };
 
 
-export interface IEblEditorSettings{
-  fileUploadEndpoint: string;
-  urlUploadEndpoint: string;
-  userStore: any;
-}
+ export {}