@ebl-vue/editor-full 1.0.8

package/src/plugins/list/utils/renderToolboxInput.ts

@@ -0,0 +1,105 @@
+import * as Dom from '@editorjs/dom';
+import { CssPrefix } from '../styles/CssPrefix';
+
+/**
+ * Options used in input rendering
+ */
+interface InputOptions {
+  /**
+   * Placeholder, that will be displayed in input
+   */
+  placeholder: string;
+  /**
+   * Input will be rendered with this value inside
+   */
+  value?: string;
+  /**
+   * Html attributes, that would be added to the input element
+   */
+  attributes?: {
+    [key: string]: string;
+  };
+  /**
+   * Flag that represents special behavior that prevents you from entering anything other than numbers
+   */
+  sanitize?: (value: string) => string;
+}
+
+const css = {
+  wrapper: `${CssPrefix}-start-with-field`,
+  input: `${CssPrefix}-start-with-field__input`,
+  startWithElementWrapperInvalid: `${CssPrefix}-start-with-field--invalid`,
+};
+
+/**
+ * Method that renders html element for popover start with item
+ * @param inputCallback - callback method that could change list attributes on input
+ * @param inputOptions - options used in input rendering
+ * @param inputOptions.value - input will be rendered with this value inside
+ * @param inputOptions.placeholder - placeholder, that will be displayed in input
+ * @param inputOptions.attributes - html attributes, that would be added to the input element
+ * @returns - rendered html element
+ */
+export function renderToolboxInput(inputCallback: (index: string) => void,
+  { value, placeholder, attributes, sanitize }: InputOptions): HTMLElement {
+  const startWithElementWrapper = Dom.make('div', css.wrapper);
+
+  const input = Dom.make('input', css.input, {
+    placeholder,
+    /**
+     * Used to prevent focusing on the input by Tab key
+     * (Popover in the Toolbar lays below the blocks,
+     * so Tab in the last block will focus this hidden input if this property is not set)
+     */
+    tabIndex: -1,
+    /**
+     * Value of the start property, if it is not specified, then it is set to one
+     */
+    value,
+  }) as HTMLInputElement;
+
+  /**
+   * Add passed attributes to the input
+   */
+  for (const attribute in attributes) {
+    input.setAttribute(attribute, attributes[attribute]);
+  }
+
+  startWithElementWrapper.appendChild(input);
+
+  input.addEventListener('input', () => {
+    /**
+     * If input sanitizer specified, then sanitize input value
+     */
+    if (sanitize !== undefined) {
+      input.value = sanitize(input.value);
+    }
+
+    const validInput = input.checkValidity();
+
+    /**
+     * If input is invalid and classlist does not contain invalid class, add it
+     */
+    if (!validInput && !startWithElementWrapper.classList.contains(css.startWithElementWrapperInvalid)) {
+      startWithElementWrapper.classList.add(css.startWithElementWrapperInvalid);
+    }
+
+    /**
+     * If input is valid and classlist contains invalid class, remove it
+     */
+    if (validInput && startWithElementWrapper.classList.contains(css.startWithElementWrapperInvalid)) {
+      startWithElementWrapper.classList.remove(css.startWithElementWrapperInvalid);
+    }
+
+    /**
+     * If input is invalid, than do not change start with attribute
+     */
+    if (!validInput) {
+      return;
+    }
+
+    inputCallback(input.value);
+  });
+
+  return startWithElementWrapper;
+}

package/src/plugins/list/utils/stripNumbers.ts

@@ -0,0 +1,7 @@
+/**
+ * Removes everything except numbers in passed string
+ * @param input - string to be striped
+ */
+export default function stripNumbers(input: string): string {
+  return input.replace(/\D+/g, '');
+}

package/src/plugins/list/utils/type-guards.ts

@@ -0,0 +1,8 @@
+/**
+ * Type guard to check if a node is an HTMLElement, then we can safely use it as an HTMLElement
+ * @param node - Node to be checked, wherever it is an HTMLElement
+ */
+export function isHtmlElement(node: Node): node is HTMLElement {
+  // node is an HTMLElement if it is an element node
+  return node.nodeType === Node.ELEMENT_NODE;
+}

package/src/plugins/list.md

@@ -0,0 +1,15 @@
+# 插件清单
+ - 标题
+ - 通用对齐
+ - 拖拽排序
+ - 代码
+ 
+
+## 待实现
+- 引用
+- 表格
+- media 
+- editorjs-toggle-block https://github.com/kommitters/editorjs-toggle-block
+- 字体颜色  https://github.com/Matergi/editorjs-color-picker
+- 字体样式 https://github.com/skchawala/editorjs-text-style
+

package/src/plugins/marker/index.css

@@ -0,0 +1,4 @@
+.cdx-marker {
+  background: rgba(245,235,111,0.29);
+  padding: 3px 0;
+}

package/src/plugins/marker/index.ts

@@ -0,0 +1,187 @@
+/**
+ * Build styles
+ */
+import './index.css';
+
+const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3535 9.31802L12.7678 7.90381C13.5488 7.12276 14.8151 7.12276 15.5962 7.90381C16.3772 8.68486 16.3772 9.95119 15.5962 10.7322L14.182 12.1464M11.3535 9.31802L7.96729 12.7043C7.40889 13.2627 7.02826 13.9739 6.87339 14.7482L6.69798 15.6253C6.55803 16.325 7.17495 16.942 7.87467 16.802L8.75175 16.6266C9.52612 16.4717 10.2373 16.0911 10.7957 15.5327L14.182 12.1464M11.3535 9.31802L14.182 12.1464" stroke="black" stroke-width="2"/><line x1="15" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>`;
+
+/**
+ * Marker Tool for the Editor.js
+ *
+ * Allows to wrap inline fragment and style it somehow.
+ */
+ export default class Marker {
+  /**
+   * Class name for term-tag
+   *
+   * @type {string}
+   */
+  static get CSS() {
+    return 'cdx-marker';
+  };
+
+  /**
+   * @param {{api: object}}  - Editor.js API
+   */
+  constructor({api}) {
+    this.api = api;
+
+    /**
+     * Toolbar Button
+     *
+     * @type {HTMLElement|null}
+     */
+    this.button = null;
+
+    /**
+     * Tag represented the term
+     *
+     * @type {string}
+     */
+    this.tag = 'MARK';
+
+    /**
+     * CSS classes
+     */
+    this.iconClasses = {
+      base: this.api.styles.inlineToolButton,
+      active: this.api.styles.inlineToolButtonActive
+    };
+  }
+
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   *
+   * @return {boolean}
+   */
+  static get isInline() {
+    return true;
+  }
+
+  /**
+   * Create button element for Toolbar
+   *
+   * @return {HTMLElement}
+   */
+  render() {
+    this.button = document.createElement('button');
+    this.button.type = 'button';
+    this.button.classList.add(this.iconClasses.base);
+    this.button.innerHTML = this.toolboxIcon;
+
+    return this.button;
+  }
+
+  /**
+   * Wrap/Unwrap selected fragment
+   *
+   * @param {Range} range - selected fragment
+   */
+  surround(range) {
+    if (!range) {
+      return;
+    }
+
+    let termWrapper = this.api.selection.findParentTag(this.tag, Marker.CSS);
+
+    /**
+     * If start or end of selection is in the highlighted block
+     */
+    if (termWrapper) {
+      this.unwrap(termWrapper);
+    } else {
+      this.wrap(range);
+    }
+  }
+
+  /**
+   * Wrap selection with term-tag
+   *
+   * @param {Range} range - selected fragment
+   */
+  wrap(range) {
+    /**
+     * Create a wrapper for highlighting
+     */
+    let marker = document.createElement(this.tag);
+
+    marker.classList.add(Marker.CSS);
+
+    /**
+     * SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
+     *
+     * // range.surroundContents(span);
+     */
+    marker.appendChild(range.extractContents());
+    range.insertNode(marker);
+
+    /**
+     * Expand (add) selection to highlighted block
+     */
+    this.api.selection.expandToTag(marker);
+  }
+
+  /**
+   * Unwrap term-tag
+   *
+   * @param {HTMLElement} termWrapper - term wrapper tag
+   */
+  unwrap(termWrapper) {
+    /**
+     * Expand selection to all term-tag
+     */
+    this.api.selection.expandToTag(termWrapper);
+
+    let sel = window.getSelection();
+    let range = sel.getRangeAt(0);
+
+    let unwrappedContent = range.extractContents();
+
+    /**
+     * Remove empty term-tag
+     */
+    termWrapper.parentNode.removeChild(termWrapper);
+
+    /**
+     * Insert extracted content
+     */
+    range.insertNode(unwrappedContent);
+
+    /**
+     * Restore selection
+     */
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  /**
+   * Check and change Term's state for current selection
+   */
+  checkState() {
+    const termTag = this.api.selection.findParentTag(this.tag, Marker.CSS);
+
+    this.button.classList.toggle(this.iconClasses.active, !!termTag);
+  }
+
+  /**
+   * Get Tool icon's SVG
+   * @return {string}
+   */
+  get toolboxIcon() {
+    return IconMarker;
+  }
+
+  /**
+   * Sanitizer rule
+   * @return {{mark: {class: string}}}
+   */
+  static get sanitize() {
+    return {
+      mark: {
+        class: Marker.CSS
+      }
+    };
+  }
+}
+

package/src/plugins/paragraph/index.css

@@ -0,0 +1,23 @@
+.ce-paragraph {
+    line-height: 1.6em;
+    outline: none;
+}
+
+/**
+ * Normally paragraph placeholder is shown only for the focused block (thanks to "data-placeholder-active").
+ *
+ * But there is a special case when the paragraph is the only block in the empty editor.
+ * When editor autofocus=false, there will be no focus. We need to show the placeholder anyway.
+ */
+.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before,
+.ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
+  content: attr(data-placeholder-active);
+}
+
+.ce-paragraph p:first-of-type{
+    margin-top: 0;
+}
+
+.ce-paragraph p:last-of-type{
+    margin-bottom: 0;
+}