@ebl-vue/editor-full 2.31.35 → 2.31.36

package/src/plugins/alert/index.ts

@@ -0,0 +1,455 @@
+/**
+ * Alert block for the Editor.js.
+ *
+ * @author Vishal Telangre
+ * @license MIT
+ */
+
+/**
+ * Build styles
+ */
+import "@ebl-vue/editor-render/styles/alert.css"
+import type { API,BlockTool,BlockToolConstructorOptions } from "@ebl-vue/editorjs/types";
+import type {  HTMLPasteEvent } from '@ebl-vue/editorjs';
+import { IconToolboxAlert as ToolboxIcon   } 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 as any)[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.ts

@@ -0,0 +1,117 @@
+import "@ebl-vue/editor-render/styles/block-alignment.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

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

package/src/plugins/code/LICENSE

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