@ebl-vue/editor-full 1.0.8

package/src/index.ts

@@ -0,0 +1,11 @@
+
+
+import './style.css'
+import { createInstaller } from './installer'
+import Components from './components';
+
+const installer = createInstaller(Components)
+export const install = installer.install
+export const version = installer.version
+export default installer;
+export * from "./components";

package/src/installer.ts

@@ -0,0 +1,22 @@
+import type { App, Plugin } from 'vue'
+import { version } from '../package.json'
+
+import { INSTALLED_KEY } from "./constants";
+
+export const createInstaller = (components: Plugin[] = []) => {
+  const install = (app: App,iconfig?: any) => {
+    if (app[INSTALLED_KEY]) return
+
+    app[INSTALLED_KEY] = true
+    components.forEach((c) => app.use(c))  
+    if(iconfig) {
+      app.provide("locale",iconfig.locale);
+    }
+  
+  }
+
+  return {
+    version,
+    install,
+  }
+}

package/src/plugins/alert/index.css

@@ -0,0 +1,150 @@
+.cdx-alert {
+	position: relative;
+	padding: 10px;
+	border-radius: 5px;
+	margin-bottom: 10px;
+}
+.cdx-alert-primary {
+	background-color: #ebf8ff;
+	border: 1px solid #4299e1;
+	color: #2b6cb0;
+}
+.cdx-alert-secondary {
+	background-color: #f7fafc;
+	border: 1px solid #cbd5e0;
+	color: #222731;
+}
+.cdx-alert-info {
+	background-color: #e6fdff;
+	border: 1px solid #4cd4ce;
+	color: #00727c;
+}
+.cdx-alert-success {
+	background-color: #f0fff4;
+	border: 1px solid #68d391;
+	color: #2f855a;
+}
+.cdx-alert-warning {
+	background-color: #fffaf0;
+	border: 1px solid #ed8936;
+	color: #c05621;
+}
+.cdx-alert-danger {
+	background-color: #fff5f5;
+	border: 1px solid #fc8181;
+	color: #c53030;
+}
+.cdx-alert-light {
+	background-color: #fff;
+	border: 1px solid #edf2f7;
+	color: #1a202c;
+}
+.cdx-alert-dark {
+	background-color: #2d3748;
+	border: 1px solid #1a202c;
+	color: #d3d3d3;
+}
+.cdx-alert-align-left {
+	text-align: left;
+}
+.cdx-alert-align-center {
+	text-align: center;
+}
+.cdx-alert-align-right {
+	text-align: right;
+}
+.cdx-alert__message {
+	outline: none;
+}
+.cdx-alert [contentEditable='true'][data-placeholder]::before {
+	position: absolute;
+	content: attr(data-placeholder);
+	color: #707684;
+	font-weight: normal;
+	opacity: 0;
+}
+.cdx-alert [contentEditable='true'][data-placeholder]:empty::before {
+	opacity: 1;
+}
+.cdx-alert [contentEditable='true'][data-placeholder]:empty:focus::before {
+	opacity: 0;
+}
+.ce-popover__item[data-item-name='alert-primary'] .ce-popover__item-icon svg #background {
+	fill: #ebf8ff;
+	stroke: #4299e1;
+}
+.ce-popover__item[data-item-name='alert-primary'] .ce-popover__item-icon svg #content {
+	fill: #2b6cb0;
+}
+.ce-popover__item[data-item-name='alert-secondary'] .ce-popover__item-icon svg #background {
+	fill: #f7fafc;
+	stroke: #cbd5e0;
+}
+.ce-popover__item[data-item-name='alert-secondary'] .ce-popover__item-icon svg #content {
+	fill: #222731;
+}
+.ce-popover__item[data-item-name='alert-info'] .ce-popover__item-icon svg #background {
+	fill: #e6fdff;
+	stroke: #4cd4ce;
+}
+.ce-popover__item[data-item-name='alert-info'] .ce-popover__item-icon svg #content {
+	fill: #00727c;
+}
+.ce-popover__item[data-item-name='alert-success'] .ce-popover__item-icon svg #background {
+	fill: #f0fff4;
+	stroke: #68d391;
+}
+.ce-popover__item[data-item-name='alert-success'] .ce-popover__item-icon svg #content {
+	fill: #2f855a;
+}
+.ce-popover__item[data-item-name='alert-warning'] .ce-popover__item-icon svg #background {
+	fill: #fffaf0;
+	stroke: #ed8936;
+}
+.ce-popover__item[data-item-name='alert-warning'] .ce-popover__item-icon svg #content {
+	fill: #c05621;
+}
+.ce-popover__item[data-item-name='alert-danger'] .ce-popover__item-icon svg #background {
+	fill: #fff5f5;
+	stroke: #fc8181;
+}
+.ce-popover__item[data-item-name='alert-danger'] .ce-popover__item-icon svg #content {
+	fill: #c53030;
+}
+.ce-popover__item[data-item-name='alert-light'] .ce-popover__item-icon svg #background {
+	fill: #fff;
+	stroke: #edf2f7;
+}
+.ce-popover__item[data-item-name='alert-light'] .ce-popover__item-icon svg #content {
+	fill: #1a202c;
+}
+.ce-popover__item[data-item-name='alert-dark'] .ce-popover__item-icon svg #background {
+	fill: #2d3748;
+	stroke: #1a202c;
+}
+.ce-popover__item[data-item-name='alert-dark'] .ce-popover__item-icon svg #content {
+	fill: #d3d3d3;
+}
+
+.cdx-alert_setting__icon_wrapper {
+	display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+
+}
+.cdx-alert_setting__icon_wrapper_align{
+  margin-top: 10px;
+}
+.cdx-alert_setting__icon {
+	display: inline-block;
+	width: 24px;
+  height: 24px;
+  text-align: center;
+  line-height: 24px;
+  cursor: pointer;
+}
+
+.cdx-alert_setting__icon_active{
+  opacity: 0.3;
+}

package/src/plugins/alert/index.ts

@@ -0,0 +1,463 @@
+/**
+ * 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 Tool's icons
+ */
+const ToolboxIcon = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763693072662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2633" id="mx_n_1763693072663" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M83.2 147.2V448c0 25.6 19.2 44.8 44.8 44.8h768c25.6 0 44.8-19.2 44.8-44.8V147.2c0-25.6-19.2-44.8-44.8-44.8H128c-25.6 6.4-44.8 25.6-44.8 44.8z m89.6 256V192h684.8v211.2H172.8zM810.24 642.56c0-25.6-19.2-44.8-44.8-44.8h-640c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h640c25.6 6.4 44.8-12.8 44.8-44.8zM554.56 866.24c0-25.6-19.2-44.8-44.8-44.8h-384c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h384c25.6 6.4 44.8-12.8 44.8-44.8z" fill="#262626" p-id="2634"></path></svg>`;
+
+
+const AlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 7L5 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 17H5"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13 12L5 12"/></svg>`;
+
+const AlignCenterIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 7L6 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 17H6"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 12L8 12"/></svg>`;
+
+const  AlignRightIcon =`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 7L7 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 17H7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 12L11 12"/></svg>`;
+
+/**
+ * @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) => `cdx-alert-${type}`,
+      wrapperForAlignType: (alignType) => `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;
+
+  /**
+   * 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 =
+      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 = 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 = 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) {
+    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) {
+    // 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) {
+    // 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) {
+    const messageEl = alertElement.querySelector(`.${this.CSS.message}`);
+
+    return { ...this.data, message: messageEl.innerHTML };
+  }
+
+  /**
+   * 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, classNames = null, attributes = {}) {
+    let el = 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) {
+    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) => data.message,
+      // fill Alert's message from other block's export string
+      import: (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

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