@ebl-vue/editor-full 2.31.24 → 2.31.28

package/src/plugins/color-picker/index.ts

@@ -1,130 +0,0 @@
-import { API } from '@ebl-vue/editorjs';
-import { IconColor } from "../../icons";
-
-
-import './styles.css';
-
-import {type InlineToolConstructorOptions} from "@ebl-vue/editorjs/types/tools/inline-tool";
-
-
-
-export default class ColorPicker  {
-	private api: API;
-
-	tag = 'SPAN';
-	class = 'cdx-text-color';
-	defaultColor = '#2644FF';
-
-	lastRange: Range | null = null;
-
-	colors: string[] = [
-		'#182a4e',
-		'#0055cc',
-		'#1f6a83',
-		'#206e4e',
-		'#e56910',
-		'#ae2e24',
-		'#5e4db2',
-		'#758195',
-		'#1e7afd',
-		'#2998bd',
-		'#23a06b',
-		'#fea363',
-		'#c9372c',
-		'#8270db',
-	];
-	columns = 7;
-
-	static get title() {
-		return 'Color';
-	}
-
-	static get isInline() {
-		return true;
-	}
-
-	constructor(args:InlineToolConstructorOptions) {
-		const { api, config } = args;
-		this.api = api;
-
-		if (config.colors) {
-			this.colors = config.colors;
-		}
-		if (config.columns) {
-			this.columns = config.columns;
-		}
-	}
-
-	render() {
-		const button = document.createElement('button');
-
-		button.type = 'button';
-		button.innerHTML = IconColor;
-		button.classList.add(this.api.styles.inlineToolButton);
-
-		button.addEventListener('mousedown', (e) => {
-			// prevent text deselection when clicking the button
-			e.preventDefault();
-		});
-
-		return button;
-	}
-
-	surround(range: Range | null) {
-		this.lastRange = range;
-	}
-
-	wrapAndColor(range: Range | null, color: string) {
-		if (!range) {
-			return;
-		}
-		const selectedText = range.extractContents();
-		const span = document.createElement(this.tag);
-		span.classList.add(this.class);
-		span.appendChild(selectedText);
-		span.style.color = color;
-		span.innerHTML = span.textContent || '';
-		range.insertNode(span);
-
-		this.api.selection.expandToTag(span);
-	}
-
-	renderActions() {
-		const container = document.createElement('div');
-		container.classList.add('editorjs__color-selector-container');
-		container.style.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
-
-		this.colors.forEach((colorValue) => {
-			const color = document.createElement('div');
-			color.classList.add('editorjs__color-selector__container-item');
-			color.style.backgroundColor = colorValue;
-			color.onclick = () => {
-				this.wrapAndColor(this.lastRange, colorValue);
-			};
-			container.append(color);
-		});
-
-		return container;
-	}
-
-	/**
-	 * Sanitizer rules
-	 *
-	 * @returns {object}
-	 */
-	static get sanitize(): any {
-		return {
-			span: {
-				style: {
-					color: true,
-				},
-			},
-		};
-	}
-}
-
-export class ColorPickerWithoutSanitize extends ColorPicker {
-	static override get sanitize() {
-		return undefined;
-	}
-}

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

@@ -1,27 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-.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

@@ -1,121 +0,0 @@
-/**
- * Build styles
- */
-import './index.css';
-import {API, BlockTool, BlockToolConstructorOptions, BlockToolData, ToolboxConfig, PasteConfig, PasteEvent} from "@ebl-vue/editorjs";
-
-import {IconDelimiter} from '../../icons';
-
-
-
-
-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
-  private data: any;
-
-
-  constructor({data, config, api}: BlockToolConstructorOptions) {
-    this.api = api;
-
-    this._CSS = {
-      block: this.api.styles.block,
-      wrapper: 'ce-delimiter'
-    };
-
-    this._element = this.drawView();
-    this.data = data;
-
-  }
-
-  /**
-   * 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 {
-    console.log(this.data);
-    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

@@ -1,19 +0,0 @@
-.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

@@ -1,151 +0,0 @@
-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

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