@ebl-vue/editor-full 2.31.23 → 2.31.25

package/package.json

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

package/src/components/Editor/EditorRender.vue

@@ -50,7 +50,7 @@ interface Props {
   data: OutputData,
   locale: any,
   showOutline?: boolean,
-  scrollWrap:string
+
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   }),
   locale: {},
   showOutline: false,
-  scrollWrap:''
+
 });
 let editorData=toRaw(props.data);
 let editorIsReady = false;
@@ -202,7 +202,7 @@ onMounted(() => {
       }
       //文档大纲
       if(props.showOutline){
-        outline = new Outline("holder",props.scrollWrap,editor!);
+        outline = new Outline("holder",editor!);
         outline.render(editorData);
       }
 

package/src/plugins/code/index.css

@@ -3,13 +3,44 @@
   display: flex;
   flex-direction: column;
   margin: 10px 0;
+  border: 2px solid transparent;
+  position: relative;
+
+}
+.ce-editorjs-x-shiki.editable:hover {
+  border:2px solid #C0C0C0;
+}
+
+
+
+.ce-editorjs-x-shiki__lang {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
 }
 
 .ce-editorjs-x-shiki__code {
   position: relative;
   float: left;
   min-width: 100%;
-  overflow-x: auto;
+  overflow: hidden;
+  height: auto;
+}
+.ce-editorjs-x-shiki__code__dragHandler {
+  position: absolute;
+  left:50%;
+  transform: translateX(-50%);
+  bottom: -5px;
+  cursor: ns-resize;
+  user-select:none;
+  height: 8px;
+  width: 60px;
+  background-color: #C0C0C0;
+  border-radius: 5px;
+  display: none;
+}
+.ce-editorjs-x-shiki:hover  .ce-editorjs-x-shiki__code__dragHandler{
+  display: block;
 }
 
 .ce-editorjs-x-shiki__selector {
@@ -57,10 +88,9 @@
 .ce-editorjs-x-shiki__textarea {
   all:unset;
   white-space: pre;
-  overflow: hidden;
+
   background-color: transparent;
-  position: absolute;
-  /* padding: 20px; */
+  position: absolute;  
   padding-top: 20px;
   padding-bottom: 20px;
   padding-right: 20px;
@@ -155,4 +185,30 @@
   /* padding-left: 10px; */
   position:absolute;
   left: 0;
+}
+
+
+ 
+/* 滚动条整体部分 */
+.ce-editorjs-x-shiki__code ::-webkit-scrollbar {
+    width: 8px;               /* 滚动条的宽度 */
+    height: 8px;              /* 滚动条的高度 */
+}
+
+/* 滚动条轨道 */
+.ce-editorjs-x-shiki__code ::-webkit-scrollbar-track {
+    background: #22272e;       /* 轨道颜色 */
+    border-radius: 1px;       /* 轨道圆角 */
+}
+
+/* 滚动条滑块 */
+.ce-editorjs-x-shiki__code ::-webkit-scrollbar-thumb {
+    background: #C0C0C0;         /* 滑块颜色 */
+    border-radius: 10px;      /* 滑块圆角 */
+    border:  2px solid #22272e;
+}
+
+/* 滑块悬停时 */
+.ce-editorjs-x-shiki__code ::-webkit-scrollbar-thumb:hover {
+    background: #555555;         /* 滑块悬停时的颜色 */
 }

package/src/plugins/code/index.ts

@@ -21,6 +21,7 @@ export type CodeData = BlockToolData<{
   code: string;
   lang: string;
   theme: string;
+  resizeSize: number;
 }>;
 
 /**
@@ -157,6 +158,7 @@ export default class CodeTool implements BlockTool {
       code: data.code ?? '',
       lang: this._selectorLanguage,
       theme: this._selectorTheme,
+      resizeSize: data.resizeSize || 0
     };
 
     this.nodes.holder = this.drawView()
@@ -179,7 +181,8 @@ export default class CodeTool implements BlockTool {
     return {
       code: codeWrapper.querySelector('textarea')!.value,
       lang: this._selectorLanguage,
-      theme: this._selectorTheme
+      theme: this._selectorTheme,
+      resizeSize: this.data.resizeSize || 0
     };
   }
 
@@ -351,8 +354,14 @@ export default class CodeTool implements BlockTool {
     const selectorTheme = document.createElement('select');
     const span = document.createElement('span');
     const textarea = document.createElement('textarea');
-
+    const dragHandle = document.createElement('div');
+    dragHandle.classList.add('ce-editorjs-x-shiki__code__dragHandler');
     wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper);
+    if(this.readOnly){
+      wrapper.classList.add('read-only');
+    }else{
+      wrapper.classList.add('editable');
+    }
     wrapperHolder.classList.add('ce-editorjs-x-shiki__code');
     wrapperSelectorHolder.classList.add('ce-editorjs-x-shiki__selector');
     wrapperLang.classList.add('ce-editorjs-x-shiki__lang');
@@ -397,7 +406,13 @@ export default class CodeTool implements BlockTool {
 
     wrapperHolder.appendChild(span);
     wrapperHolder.appendChild(textarea);
-   
+    wrapper.appendChild(dragHandle);
+    
+
+    if(this.data.resizeSize>0){
+      wrapperHolder.style.height = this.data.resizeSize + 'px';
+    }
+
     if (!this.readOnly) {
       wrapperSelectorHolder.appendChild(selectorLanguage);
       //wrapperSelectorHolder.appendChild(selectorTheme);
@@ -466,15 +481,48 @@ export default class CodeTool implements BlockTool {
           break;
       }
     });
+    textarea.addEventListener('scroll', () => {
+      //span.scrollTop = textarea.scrollTop
+      span.style=`display:block;transform: translateY(-${textarea.scrollTop}px)`
+    })
     wrapperCopy.addEventListener('click', (event: MouseEvent) => {
       this.copyCode(this.data.code, event);
     });
-
+    //调整窗口大小
+    dragHandle.addEventListener('mousedown', (event: MouseEvent) => {
+      this.resizeClick(wrapperHolder, event);
+    });
     this.nodes.textarea = textarea;
 
     return wrapper;
   }
+  private resizeClick(codeElement: HTMLElement, event: MouseEvent) {
+    
+    let startY = event.clientY;
+    let startHeight = parseInt(window.getComputedStyle(codeElement).height, 10);
+    const mouseMoveHandler = (e: MouseEvent) => {
+      const dY = e.clientY - startY;
+      let newHeight = startHeight + dY;
+      
 
+      if (newHeight < 100) {
+        newHeight = 100;        
+      }
+      codeElement.style.height = newHeight + 'px';
+    };
+    const mouseUpHandler = () => {
+      const blockHeight = parseInt(
+        window.getComputedStyle(codeElement).height,
+        10,
+      );
+      this.data.resizeSize = blockHeight;
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
   private async runShiki(): Promise<{ html: string, preStyle: string }> {
     let preStyle = ''
 

package/src/plugins/outline/index.css

@@ -1,6 +1,9 @@
 .ebl-outline{
+  background-color: #fff;
+  box-sizing: border-box;
   position:fixed;
-  top:0;
+  top:var(--header-height,84px);
+
   right:0;
   padding: 15px 12px;
   width:280px;
@@ -10,7 +13,7 @@
   color: #606266;
   font-size: 14px;
   padding-bottom: 50px;
-  height: calc(100vh - var(--header-height));
+  max-height: calc(100vh - var(--header-height,84px));
 }
 .ebl-outline:hover{
   overflow: auto;

package/src/plugins/outline/index.ts

@@ -8,15 +8,15 @@ import { OutputData } from '@ebl-vue/editorjs';
 export default class Outline{
   private editor: EditorJS;
   private holder: HTMLElement;
-  private scrollWrap: HTMLElement;
+  
   /**
    * 初始化插件
    * @param {EditorJS} editor - 编辑器实例
    */
-  constructor(holderId: string,scrollWrap:string,editor: EditorJS) {
+  constructor(holderId: string,editor: EditorJS) {
     this.editor = editor;
     this.holder = document.getElementById(holderId) as HTMLElement;
-    this.scrollWrap = (document.getElementById(scrollWrap) ||document.getElementsByTagName(scrollWrap)[0] || document.querySelector(scrollWrap)) as HTMLElement;
+    
   }
 
   public render(data: OutputData) {
@@ -26,7 +26,6 @@ export default class Outline{
     this.holder.classList.add("outline");
   }
 
-
   private createUI(data: OutputData): HTMLElement {
     
     const ui = document.createElement('div');
@@ -51,13 +50,7 @@ export default class Outline{
           const block = document.querySelector<HTMLElement>('.codex-editor .ce-block[data-id="' + blockData.id + '"]');
           if (block) {
             const top = block.offsetTop;
-    
-            if (!this.scrollWrap) {
-              document.querySelector<HTMLElement>('.codex-editor')?.scrollTo(0, top);
-            } else {
-              window.scrollTo(0,top)
-              //this.scrollWrap.scrollTo(0, top);
-            }
+            window.scrollTo(0, top);             
           }
           
         });