@ebl-vue/editor-full 2.31.25 → 2.31.31

package/src/plugins/alert/index.ts

@@ -1,456 +0,0 @@
-/**
- * Alert block for the Editor.js.
- *
- * @author Vishal Telangre
- * @license MIT
- */
-
-/**
- * Build styles
- */
-
-import type { API,BlockTool,BlockToolConstructorOptions } from "@ebl-vue/editorjs/types";
-import './index.css';
-import type {  HTMLPasteEvent } from '@ebl-vue/editorjs';
-import { IconToolboxAlert as ToolboxIcon,IconAlignLeft as AlignLeftIcon,IconAlignCenter as AlignCenterIcon,IconAlignRight as AlignRightIcon   } from "../../icons";
-
-
-/**
- * @class Alert
- * @classdesc Alert Tool for Editor.js
- * @property {AlertData} data - Alert Tool`s input and output data
- * @property {object} api - Editor.js API instance
- *
- * @typedef {object} AlertData
- * @description Alert Tool`s input and output data
- * @property {string} type - Alert type
- * @property {string} alignType - Alert align type
- * @property {string} message - Alert message
- *
- * @typedef {object} AlertConfig
- * @description Alert Tool`s initial configuration
- * @property {string} defaultType - default Alert type
- * @property {string} defaultAlignType - default align Alert type
- * @property {string} messagePlaceholder - placeholder to show in Alert`s message input
- */
-export default class Alert implements BlockTool{
-  /**
-   * Get Toolbox settings
-   *
-   * @public
-   * @returns {string}
-   */
-  static get toolbox() {
-    return {
-      icon: ToolboxIcon,
-      title: 'Alert',
-    };
-  }
-
-  /**
-   * Allow to press Enter inside the Alert block
-   * @public
-   * @returns {boolean}
-   */
-  static get enableLineBreaks() {
-    return true;
-  }
-
-  /**
-   * Default Alert type
-   *
-   * @public
-   * @returns {string}
-   */
-  static get DEFAULT_TYPE() {
-    return 'info';
-  }
-
-  /**
-   * Default Alert align type
-   *
-   * @public
-   * @returns {string}
-   */
-  static get DEFAULT_ALIGN_TYPE() {
-    return 'left';
-  }
-
-  /**
-   * Default placeholder for Alert message
-   *
-   * @public
-   * @returns {string}
-   */
-  static get DEFAULT_MESSAGE_PLACEHOLDER() {
-    return 'Type here...';
-  }
-
-  /**
-   * Supported Alert types
-   *
-   * @public
-   * @returns {array}
-   */
-  static get ALERT_TYPES() {
-    return [
-      'primary',
-      'secondary',
-      'info',
-      'success',
-      'warning',
-      'danger',
-      'light',
-      'dark',
-    ];
-  }
-
-  /**
-   * Supported Align types
-   *
-   * @public
-   * @returns {array}
-   */
-  static get ALIGN_TYPES() {
-    return ['left', 'center', 'right'];
-  }
-
-  /**
-   * Alert Tool`s styles
-   *
-   * @returns {Object}
-   */
-  get CSS() {
-    return {
-      wrapper: 'cdx-alert',
-      wrapperForType: (type:string) => `cdx-alert-${type}`,
-      wrapperForAlignType: (alignType:string) => `cdx-alert-align-${alignType}`,
-      message: 'cdx-alert__message',
-    };
-  }
-  private alertTypes: string[];
-  private defaultType: string;
-  private defaultAlign: string;
-  private messagePlaceholder: string;
-  private data: any;
-  private api: API;
-  private container: any;
-  private readOnly: boolean;
-
-  /**
-   * Render plugin`s main Element and fill it with saved data
-   *
-   * @param {AlertData} data — previously saved data
-   * @param {AlertConfig} config — user config for Tool
-   * @param {Object} api - Editor.js API
-   * @param {boolean} readOnly - read only mode flag
-   */
-  constructor({ data, config, api, readOnly }:BlockToolConstructorOptions) {
-    this.api = api;
-
-    this.alertTypes = config.alertTypes || Alert.ALERT_TYPES;
-    this.defaultType = config.defaultType || Alert.DEFAULT_TYPE;
-    this.defaultAlign = config.defaultAlign || Alert.DEFAULT_ALIGN_TYPE;
-    this.messagePlaceholder =
-      this.api.i18n.t(config.messagePlaceholder || Alert.DEFAULT_MESSAGE_PLACEHOLDER);
-
-    this.data = {
-      type: this.alertTypes.includes(data.type)
-        ? data.type
-        : this.defaultType,
-      align: Alert.ALIGN_TYPES.includes(data.align)
-        ? data.align
-        : this.defaultAlign,
-      message: data.message || '',
-    };
-
-    this.container = undefined;
-
-    this.readOnly = readOnly;
-  }
-
-  /**
-   * Returns true to notify the core that read-only mode is supported
-   *
-   * @return {boolean}
-   */
-  static get isReadOnlySupported() {
-    return true;
-  }
-
-  /**
-   * Create Alert Tool container
-   *
-   * @returns {Element}
-   */
-  render() {
-    const containerClasses = [
-      this.CSS.wrapper,
-      this.CSS.wrapperForType(this.data.type),
-      this.CSS.wrapperForAlignType(this.data.align),
-    ];
-
-    this.container = this._make('div', containerClasses);
-
-    const messageEl = this._make('div', [this.CSS.message], {
-      contentEditable: !this.readOnly,
-      innerHTML: this.data.message,
-    });
-
-    messageEl.dataset.placeholder = this.messagePlaceholder;
-
-    this.container.appendChild(messageEl);
-
-    return this.container;
-  }
-  _getSettingIconStyle(type: string) {
-    let classname = "";
-    switch (type) {
-      case 'primary':
-        classname = "cdx-alert-primary";
-        break;
-      case 'secondary':
-        classname = "cdx-alert-secondary";
-        break;
-      case 'info':
-        classname = "cdx-alert-info";
-        break;
-      case 'success':
-        classname = "cdx-alert-success";
-        break;
-      case 'warning':
-        classname = "cdx-alert-warning";
-        break;
-      case 'danger':
-        classname = "cdx-alert-danger";
-        break;
-      case 'light':
-        classname = "cdx-alert-light";
-        break;
-      case 'dark':
-        classname = "cdx-alert-dark";
-        break;
-    }
-    const iconWrap = this._make('div', ['cdx-alert_setting__icon',classname], {});
-    return iconWrap;
-  }
-  
-  /**
-   * Create Block's settings block
-   *
-   * @returns {array}
-   */
-  renderSettings() {
-    const wrapper = document.createElement('div');
-    const alertWrapper = document.createElement('div');
-    const alignWrapper= document.createElement('div');
-    alertWrapper.classList.add('cdx-alert_setting__icon_wrapper');
-    alignWrapper.classList.add('cdx-alert_setting__icon_wrapper');
-    alignWrapper.classList.add("cdx-alert_setting__icon_wrapper_align");
-
-    this.alertTypes.map((type) => {
-      let button = this._getSettingIconStyle(type);
-      button.setAttribute('data-type', type);
-
-      this.api.tooltip.onHover(button, this.api.i18n.t(`alert-${type}`), {
-        placement: 'top',
-      });     
-      button.innerText = "A";
-      alertWrapper.appendChild(button);
-      return button;
-    }).forEach((button, index, buttons) => {      
-      const type: string = button.getAttribute('data-type') || "";
-      button.addEventListener('click', () => {
-        this._changeAlertType(type);
-        buttons.forEach((el, index) => {
-          const elType= el.getAttribute('data-type');
-          el.classList.toggle("cdx-alert_setting__icon_active", elType === this.data.type);
-        });
-      });
-     
-
-    });
-
-
-    Alert.ALIGN_TYPES.map((align) => {
-      let button;
-      if (align === "left") {
-        button = document.createElement("div");
-        button.classList.add("cdx-alert_setting__icon");
-        button.innerHTML = AlignLeftIcon;
-      }
-      if (align === "right") {
-        button = document.createElement("div");
-        button.classList.add("cdx-alert_setting__icon");
-        button.innerHTML = AlignRightIcon;
-
-      }
-      if (align === "center") {
-        button = document.createElement("div");
-        button.classList.add("cdx-alert_setting__icon");
-        button.innerHTML = AlignCenterIcon;
-
-
-      }
-
-      button?.setAttribute("data-align", align);
-      this.api.tooltip.onHover(button!, this.api.i18n.t(`align-${align}`), {
-        placement: 'top',
-      });
-      alignWrapper.appendChild(button!);
-      return button;
-    }).forEach((button, index, buttons) => {
-      const align: string = button!.getAttribute('data-align') || "";
-      button!.addEventListener('click', () => {
-        this._changeAlignType(align);
-        buttons.forEach((el, index) => {
-          const elAlign = el?.getAttribute('data-align');
-          el?.classList.toggle("cdx-alert_setting__icon_active", elAlign === this.data.align);
-        });
-      });
-    });
-
-    wrapper.appendChild(alertWrapper);
-    wrapper.appendChild(alignWrapper);
-    return wrapper;
-  }
-
-  /**
-   * Helper for formatting Alert Type / Align Type
-   *
-   * @param {string} type - Alert type or Align type
-   * @returns {string}
-   */
-  _getFormattedName(name: string) {
-    return this.api.i18n.t(name.charAt(0).toUpperCase() + name.slice(1));
-  }
-
-  /**
-   * Helper for changing style of Alert block with the selected Alert type
-   *
-   * @param {string} newType - new Alert type to be applied to the block
-   * @private
-   */
-  _changeAlertType(newType: string) {
-    // Save new type
-    this.data.type = newType;
-
-    this.alertTypes.forEach((type) => {
-      const alertClass = this.CSS.wrapperForType(type);
-
-      // Remove the old Alert type class
-      this.container.classList.remove(alertClass);
-
-      if (newType === type) {
-        // Add an Alert class for the selected Alert type
-        this.container.classList.add(alertClass);
-      }
-    });
-  }
-
-  /**
-   * Helper for changing align of Alert block with the selected Align type
-   *
-   * @param {string} newAlign - new align type to be applied to the block
-   * @private
-   */
-  _changeAlignType(newAlign: string) {
-    // Save new type
-    this.data.align = newAlign;
-
-    Alert.ALIGN_TYPES.forEach((align) => {
-      const alignClass = this.CSS.wrapperForAlignType(align);
-
-      // Remove the old Alert type class
-      this.container.classList.remove(alignClass);
-
-      if (newAlign === align) {
-        // Add an Alert class for the selected Alert type
-        this.container.classList.add(alignClass);
-      }
-    });
-  }
-
-  /**
-   * Extract Alert data from Alert Tool element
-   *
-   * @param {HTMLDivElement} alertElement - element to save
-   * @returns {AlertData}
-   */
-  save(alertElement: HTMLElement) {
-    const messageEl = alertElement.querySelector(`.${this.CSS.message}`);
-
-    const data = { ...this.data, message: messageEl?.innerHTML || '' };
-    console.log('save', data);
-    return data;
-  }
-
-  /**
-   * Helper for making Elements with attributes
-   *
-   * @param  {string} tagName           - new Element tag name
-   * @param  {array|string} classNames  - list or name of CSS classname(s)
-   * @param  {Object} attributes        - any attributes
-   * @returns {Element}
-   * @private
-   */
-  _make(tagName:string, classNames:string[]|string|null, attributes:Record<string, any> = {}) {
-    let el: HTMLElement = document.createElement(tagName);
-
-    if (Array.isArray(classNames)) {
-      el.classList.add(...classNames);
-    } else if (classNames) {
-      el.classList.add(classNames);
-    }
-
-    for (let attrName in attributes) {
-      el[attrName] = attributes[attrName];
-    }
-
-    return el;
-  }
-
-  /**
-   * Fill Alert's message with the pasted content
-   *
-   * @param {PasteEvent} event - event with pasted content
-   */
-  onPaste(event:HTMLPasteEvent) {
-    const { data } = event.detail;
-
-    this.data = {
-      type: this.defaultType,
-      message: data.innerHTML || '',
-    };
-  }
-
-  /**
-   * Allow Alert to be converted to/from other blocks
-   */
-  static get conversionConfig() {
-    return {
-      // export Alert's message for other blocks
-      export: (data:any) => data.message,
-      // fill Alert's message from other block's export string
-      import: (string:string) => {
-        return {
-          message: string,
-          type: this.DEFAULT_TYPE,
-          alignType: this.DEFAULT_ALIGN_TYPE,
-        };
-      },
-    };
-  }
-
-  /**
-   * Sanitizer config for Alert Tool saved data
-   * @returns {Object}
-   */
-  static get sanitize() {
-    return {
-      message: true,
-      type: false,
-      alignType: false,
-    };
-  }
-}

package/src/plugins/block-alignment/index.css

@@ -1,9 +0,0 @@
-.ce-tune-alignment--right {
-    text-align: right;
-}
-.ce-tune-alignment--center {
-    text-align: center;
-}
-.ce-tune-alignment--left {
-    text-align: left;
-}

package/src/plugins/block-alignment/index.ts

@@ -1,117 +0,0 @@
-import "./index.css"
-import type { API, BlockTune, ToolConfig } from "@ebl-vue/editorjs/types";
-import { IconAlignLeft,IconAlignCenter,IconAlignRight } from "../../icons";
-
-interface ConstructorArgs {
-  data: AlignmentData;
-  config?: ToolConfig;
-  api: API;
-  block?: any;
-}
-export interface AlignmentData {
-  text?: string;
-  alignment: string
-}
-
-export default class BlockAlignment implements BlockTune{
-  private settings: ToolConfig;
-  private block: any;
-  private api: API;
-  private data: AlignmentData;
-  private alignmentSettings: any[];
-  private _CSS: any;
-  private wrapper: HTMLElement | undefined;
-
-
-  static get DEFAULT_ALIGNMENT() {
-    return 'left';
-  }
-
-  static get isTune() {
-    return true;
-  }
-
-  getAlignment() {
-    if (!!this.settings?.blocks && this.settings.blocks.hasOwnProperty(this.block.name)) {
-      return this.settings.blocks[this.block.name]
-    }
-    if (!!this.settings?.default) {
-      return this.settings.default
-    }
-    return BlockAlignment.DEFAULT_ALIGNMENT
-  }
-
-  constructor({ api, data, config, block }: ConstructorArgs) {
-    this.api = api;
-    this.block = block;
-
-    this.settings = config;
-    this.data = data || { alignment: this.getAlignment() }
-    this.alignmentSettings = [
-      {
-        name: 'left',
-        icon: IconAlignLeft
-      },
-      {
-        name: 'center',
-        icon: IconAlignCenter
-      },
-      {
-        name: 'right',
-        icon: IconAlignRight
-      }
-    ];
-    this._CSS = {
-      alignment: {
-        left: 'ce-tune-alignment--left',
-        center: 'ce-tune-alignment--center',
-        right: 'ce-tune-alignment--right',
-      }
-    }
-  }
-
-
-  wrap(blockContent: HTMLElement) {
-    this.wrapper = document.createElement("div");
-    this.wrapper!.classList.toggle(this._CSS.alignment[this.data.alignment])
-    this.wrapper!.append(blockContent)
-    return this.wrapper
-  }
-
-
-  render() {
-    const wrapper = document.createElement("div");
-    this.alignmentSettings.map(align => {
-      const button = document.createElement('button');
-      button.classList.add(this.api.styles.settingsButton);
-      button.innerHTML = align.icon;
-      button.type = 'button';
-
-      button.classList.toggle(this.api.styles.settingsButtonActive, align.name === this.data.alignment);
-      const buttonTooltip = this.api.i18n.t(align.name + " align");
-      this.api.tooltip.onHover(button, buttonTooltip, {
-        placement: 'top',
-      });
-      wrapper.appendChild(button);
-      return button
-    }).forEach((element, index, elements) => {
-      element.addEventListener('click', () => {
-        this.data = {
-          alignment: this.alignmentSettings[index].name
-        }
-        elements.forEach((el, i) => {
-          const { name } = this.alignmentSettings[i];
-          el.classList.toggle(this.api.styles.settingsButtonActive, name === this.data.alignment);
-          this.wrapper!.classList.toggle(this._CSS.alignment[name], name === this.data.alignment)
-        });
-      });
-    });
-    return wrapper;
-  }
-
-
-  save() {
-    return this.data;
-  }
-}
-

package/src/plugins/block-alignment/readme.md

@@ -1 +0,0 @@
-# 通用的对齐插件

package/src/plugins/code/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 CodeX
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.