@ebl-vue/editor-full 2.31.35 → 2.31.37

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

@@ -0,0 +1,132 @@
+import { API } from '@ebl-vue/editorjs';
+import { IconColor } from "../../icons";
+import type {SanitizerConfig,InlineTool,InlineToolConstructorOptions} from "@ebl-vue/editorjs/types";
+
+
+import '@ebl-vue/editor-render/styles/color.css';
+
+
+
+
+
+export default class ColorPicker implements InlineTool  {
+	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;
+	}
+  static get CSS() :string{
+    return ColorPicker.CSS;
+  }
+	/**
+	 * Sanitizer rules
+	 *
+	 * @returns {object}
+	 */
+	static get sanitize(): SanitizerConfig {
+    return {
+      span: {
+        style: true,
+        class:true
+      },
+    } as SanitizerConfig;
+	}
+}
+
+export class ColorPickerWithoutSanitize extends ColorPicker {
+	// static override get sanitize() {
+	// 	return undefined;
+	// }
+}

package/src/plugins/delimiter/index.ts

@@ -0,0 +1,121 @@
+/**
+ * Build styles
+ */
+import '@ebl-vue/editor-render/styles/delimiter.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

@@ -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 @@
+# 拖拽块插件