@ebl-vue/editor-full 1.0.8

package/src/plugins/color-picker/styles.css

@@ -0,0 +1,27 @@
+.ce-popover--inline .ce-popover--nested .ce-popover__container {
+	width: min-content !important;
+	min-width: unset !important;
+}
+
+.ce-popover--inline .ce-popover--nested .ce-popover__items {
+	width: max-content;
+}
+
+.editorjs__color-selector-container {
+	display: grid;
+	gap: 10px;
+	padding: 4px;
+}
+
+.editorjs__color-selector__container-item {
+	width: 30px;
+	height: 30px;
+	display: block;
+	cursor: pointer;
+	border-radius: 100%;
+	transition: transform 0.2s ease;
+}
+
+.editorjs__color-selector__container-item:hover {
+	transform: scale(1.1);
+}

package/src/plugins/delimiter/index.css

@@ -0,0 +1,14 @@
+.ce-delimiter {
+    
+}
+.ce-delimiter__line__wrapper{
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ce-delimiter__line{
+  flex:1;
+  height: 2px;
+  background-color: #EFF0F1;
+}

package/src/plugins/delimiter/index.ts

@@ -0,0 +1,122 @@
+/**
+ * Build styles
+ */
+import './index.css';
+import {API, BlockTool, BlockToolConstructorOptions, BlockToolData, ToolboxConfig, PasteConfig, PasteEvent} from "@ebl-vue/editorjs";
+
+
+const IconDelimiter = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6" y1="12" x2="10" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="14" y1="12" x2="18" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`;
+
+
+export default class Delimiter implements BlockTool {
+
+  static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+
+  static get contentless(): boolean {
+    return true;
+  }
+
+  private api: API
+
+  private _CSS: {
+    block: string
+    wrapper: string
+  }
+
+
+
+  private _element: HTMLDivElement
+
+
+  constructor({data, config, api}: BlockToolConstructorOptions) {
+    this.api = api;
+
+    this._CSS = {
+      block: this.api.styles.block,
+      wrapper: 'ce-delimiter'
+    };
+
+    this._element = this.drawView();
+
+
+  }
+
+  /**
+   * Create Tool's view
+   * @return {HTMLDivElement}
+   * @private
+   */
+  drawView(): HTMLDivElement {
+    let wrapper = document.createElement('div');
+    let lineWrapper = document.createElement('div');
+    let lineDiv = document.createElement('div');
+    
+    wrapper.classList.add(this._CSS.wrapper, this._CSS.block);
+    lineWrapper.classList.add('ce-delimiter__line__wrapper');
+    lineDiv.classList.add('ce-delimiter__line');
+
+    lineWrapper.appendChild(lineDiv);
+    wrapper.appendChild(lineWrapper);
+
+    return wrapper;
+  }
+
+  /**
+   * Return Tool's view
+   * @returns {HTMLDivElement}
+   * @public
+   */
+  render(): HTMLDivElement {
+    return this._element;
+  }
+
+  /**
+   * Extract Tool's data from the view
+   * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
+   * @returns {DelimiterData} - saved data
+   * @public
+   */
+  save(toolsContent: HTMLElement): BlockToolData {
+    return {};
+  }
+
+  /**
+   * Get Tool toolbox settings
+   * icon - Tool icon's SVG
+   * title - title to show in toolbox
+   *
+   * @return {{icon: string, title: string}}
+   */
+  static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconDelimiter,
+      title: 'Delimiter'
+    };
+  }
+
+  /**
+   * Delimiter onPaste configuration
+   *
+   * @public
+   */
+  static get pasteConfig(): PasteConfig {
+    return { tags: ['HR'] };
+  }
+
+  /**
+   * On paste callback that is fired from Editor
+   *
+   * @param {PasteEvent} event - event with pasted data
+   */
+  onPaste(event: PasteEvent): void {
+    this.data = {};
+  }
+}
+

package/src/plugins/drag-drop/index.css

@@ -0,0 +1,19 @@
+.ce-block--drop-target .ce-block__content:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -20px;
+  margin-top: -1px;
+  height: 8px;
+  width: 8px;
+  border: solid #a0a0a0;
+  border-width: 1px 1px 0 0;
+  -webkit-transform-origin: right;
+  transform-origin: right;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.ce-block--drop-target .ce-block__content:after {
+  background: none;
+}

package/src/plugins/drag-drop/index.ts

@@ -0,0 +1,151 @@
+import './index.css';
+
+import type EditorJS from '@ebl-vue/editorjs/types';
+
+export default class DragDrop {
+  private toolbar: any;
+  private borderStyle: string;
+  private api: any;
+  private holder:  HTMLElement;
+  private readOnly: boolean | undefined;
+  private startBlock: number | null;
+  private endBlock: number | null;
+
+  constructor(
+    holderId: string,
+    readonly: boolean,
+    editor: EditorJS,  
+    borderStyle: string) {
+    const {
+      blocks,
+      toolbar,
+    } = editor;
+    this.toolbar = toolbar;
+    this.borderStyle = borderStyle || '1px dashed #aaa';
+    this.api = blocks;
+    this.holder =  document.getElementById(holderId) as HTMLElement;
+    this.readOnly =readonly;
+    this.startBlock = null;
+    this.endBlock = null;
+
+
+    this.setDragListener();
+    this.setDropListener();
+  }
+
+
+  setElementCursor(element: HTMLElement|null) {
+    if (!element) return;
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.setStart(element.childNodes[0], 0);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    element.focus();
+  }
+
+
+  setDragListener() {
+    if (!this.readOnly) {
+      const settingsButton = this.holder?.querySelector<HTMLElement>('.ce-toolbar__settings-btn');
+      if (settingsButton) {
+        this.initializeDragListener(settingsButton);
+      } else {
+        const observer = new MutationObserver((mutations, obs) => {
+          const settingsButton = this.holder?.querySelector<HTMLElement>(
+            ".ce-toolbar__settings-btn"
+          );
+          if (settingsButton) {
+            this.initializeDragListener(settingsButton);
+            obs.disconnect();
+          }
+        });
+
+        observer.observe(this.holder, {
+          childList: true,
+          subtree: true,
+        });
+      }
+    }
+  }
+
+  initializeDragListener(settingsButton: HTMLElement) {
+    settingsButton.setAttribute("draggable", "true");
+    settingsButton.addEventListener("dragstart", () => {
+      this.startBlock = this.api.getCurrentBlockIndex();
+    });
+      settingsButton.addEventListener('drag', () => {
+      this.toolbar.close(); 
+      if (!this.isTheOnlyBlock()) {
+          const allBlocks = this.holder.querySelectorAll('.ce-block') as NodeListOf<HTMLElement>;
+          const blockFocused = this.holder.querySelector<HTMLElement>('.ce-block--drop-target');
+          this.setElementCursor(blockFocused);
+          this.setBorderBlocks(allBlocks, blockFocused);
+        }
+      });
+    }
+     
+
+
+  setBorderBlocks(allBlocks: NodeListOf<HTMLElement>, blockFocused: HTMLElement|null) {
+    Object.values(allBlocks).forEach((block: HTMLElement) => {
+      const blockContent = block.querySelector<HTMLElement>('.ce-block__content');
+      if (block !== blockFocused) {
+        blockContent?.style.removeProperty('border-top');
+        blockContent?.style.removeProperty('border-bottom');
+      } else {
+        const index = Object.keys(allBlocks).find((key) => allBlocks[Number(key)] === blockFocused);
+        if (index && Number(index) > this.startBlock!) blockContent!.style.borderBottom = this.borderStyle;
+        else blockContent!.style.borderTop = this.borderStyle;
+      }
+    });
+  }
+
+
+  setDropListener() {
+    document.addEventListener('drop', (event: DragEvent) => {
+      const { target } = event;
+      if (this.holder.contains(target as HTMLElement) && this.startBlock !== null) {
+        const dropTarget = this.getDropTarget(target as HTMLElement);
+        if (dropTarget) {
+          const blockContent = dropTarget.querySelector<HTMLElement>('.ce-block__content');
+          blockContent?.style.removeProperty('border-top');
+          blockContent?.style.removeProperty('border-bottom');
+          this.endBlock = this.getTargetPosition(dropTarget as HTMLElement);
+          this.moveBlocks();
+        }
+      }
+      this.startBlock = null;
+    });
+  }
+
+ 
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+ 
+  getDropTarget(target: HTMLElement) {
+    return target.classList.contains('ce-block')
+      ? target
+      : target.closest('.ce-block');
+  }
+
+
+  getTargetPosition(target: HTMLElement) {
+    return Array.from(target.parentNode!.children).indexOf(target);
+  }
+
+  isTheOnlyBlock() {
+    return this.api.getBlocksCount() === 1;
+  }
+
+
+  moveBlocks() {
+    if (!this.isTheOnlyBlock()) {
+      this.api.move(this.endBlock, this.startBlock);
+    }
+  }
+}

package/src/plugins/drag-drop/readme.md

@@ -0,0 +1 @@
+# 拖拽块插件