@ebl-vue/editor-full 1.0.8

package/src/plugins/code/index.ts

@@ -0,0 +1,530 @@
+//https://github.com/yudaapratama/editorjs-shiki
+import './index.css';
+import type { API, BlockTool, BlockToolConstructorOptions, BlockToolData, PasteConfig, PasteEvent, SanitizerConfig, ToolboxConfig } from '@ebl-vue/editorjs';
+import { codeToHtml, bundledLanguagesInfo as languages } from 'shiki'
+import { getLineStartPosition } from './utils/string';
+
+/**
+ * CodeTool for Editor.js
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/**
+ * Data structure for CodeTool's data
+ */
+export type CodeData = BlockToolData<{
+  /**
+   * The code content input by the user
+   */
+  code: string;
+  lang: string;
+  theme: string;
+}>;
+
+/**
+ * Configuration options for the CodeTool provided by the user
+ */
+export interface CodeConfig {
+  /**
+   * Placeholder text to display in the input field when it's empty
+   */
+  placeholder: string;
+}
+
+/**
+ * Defines the CSS class names used by CodeTool for styling its elements
+ */
+interface CodeToolCSS {
+  /** Block Styling from Editor.js API */
+  baseClass: string;
+  /** Input Styling from Editor.js API */
+  input: string;
+  /** Wrapper styling */
+  wrapper: string;
+  /** Textarea styling */
+  textarea: string;
+  /** Span styling */
+  span: string;
+  /** Selector Language styling */
+  selectorLanguage: string;
+  /** Selector Theme styling */
+  selectorTheme: string;
+}
+
+/**
+ * Holds references to the DOM elements used by CodeTool
+ */
+interface CodeToolNodes {
+  /** Main container or Wrapper for CodeTool */
+  holder: HTMLDivElement | null;
+  /** Textarea where user inputs their code */
+  textarea: HTMLTextAreaElement | null;
+}
+
+/**
+ * Options passed to the constructor of a block tool
+ */
+export type CodeToolConstructorOptions = BlockToolConstructorOptions<CodeData>;
+
+/**
+ * Code Tool for the Editor.js allows to include code examples in your articles.
+ */
+export default class CodeTool implements BlockTool {
+  /**
+   * API provided by Editor.js for interacting with the editor's core functionality
+   */
+  private api: API;
+  /**
+   * Indicates whether the editor is in read-only mode, preventing modifications
+   */
+  private readOnly: boolean;
+  /**
+   * Placeholder text displayed when there is no code content
+   */
+  private placeholder: string;
+  /**
+   * Collection of CSS class names used by CodeTool for styling its elements
+   */
+  private CSS: CodeToolCSS;
+  /**
+   * DOM nodes related to the CodeTool, including containers and other elements
+   */
+  private nodes: CodeToolNodes;
+  /**
+   * Stores the current data (code and other related properties) for the CodeTool
+   */
+  private _data!: CodeData;
+  /**
+   * Default language for the CodeTool
+   */
+  private _selectorLanguage: string = '';
+  /**
+   * Default theme for the CodeTool
+   */
+  private _selectorTheme: string = '';
+  /**
+   * Notify core that read-only mode is supported
+   * @returns true if read-only mode is supported
+   */
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * Allows pressing Enter key to create line breaks inside the CodeTool textarea
+   * This enables multi-line input within the code editor.
+   * @returns true if line breaks are allowed in the textarea
+   */
+  public static get enableLineBreaks(): boolean {
+    return true;
+  }
+
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   * @param options - tool constricting options
+   * @param options.data — previously saved plugin code
+   * @param options.config - user config for Tool
+   * @param options.api - Editor.js API
+   * @param options.readOnly - read only mode flag
+   */
+  constructor({ data, config, api, readOnly }: CodeToolConstructorOptions) {
+    this.api = api;
+    this.readOnly = readOnly;
+
+    this.placeholder = this.api.i18n.t(config.placeholder as string || CodeTool.DEFAULT_PLACEHOLDER);
+
+    this._selectorLanguage = data.lang || config.lang || CodeTool.DEFAULT_LANGUAGE
+    this._selectorTheme = data.theme || config.theme || CodeTool.DEFAULT_THEME
+
+    this.CSS = {
+      baseClass: this.api.styles.block,
+      input: this.api.styles.input,
+      wrapper: 'ce-editorjs-x-shiki',
+      textarea: 'ce-editorjs-x-shiki__textarea',
+      span: 'ce-editorjs-x-shiki__span',
+      selectorLanguage: 'ce-editorjs-x-shiki__selector-language',
+      selectorTheme: 'ce-editorjs-x-shiki__selector-theme',
+    };
+
+    this.nodes = {
+      holder: null,
+      textarea: null,
+    };
+
+    this.data = {
+      code: data.code ?? '',
+      lang: this._selectorLanguage,
+      theme: this._selectorTheme,
+    };
+
+    this.nodes.holder = this.drawView()
+  }
+
+  /**
+   * Return Tool's view
+   * @returns this.nodes.holder - Code's wrapper
+   */
+  public render(): HTMLDivElement {
+    return this.nodes.holder!;
+  }
+
+  /**
+   * Extract Tool's data from the view
+   * @param codeWrapper - CodeTool's wrapper, containing textarea with code
+   * @returns - saved plugin code
+   */
+  public save(codeWrapper: HTMLDivElement): CodeData {
+    return {
+      code: codeWrapper.querySelector('textarea')!.value,
+      lang: this._selectorLanguage,
+      theme: this._selectorTheme
+    };
+  }
+
+  /**
+   * onPaste callback fired from Editor`s core
+   * @param event - event with pasted content
+   */
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if ('data' in detail) {
+      const content = detail.data as string;
+
+      this.data = {
+        code: content || '',
+        lang: this._selectorLanguage,
+        theme: this._selectorTheme
+      };
+    }
+  }
+
+  /**
+   * Returns Tool`s data from private property
+   * @returns
+   */
+  public get data(): CodeData {
+    return this._data;
+  }
+
+  /**
+   * Set Tool`s data to private property and update view
+   * @param data - saved tool data
+   */
+  public set data(data: CodeData) {
+    this._data = data;
+
+    if (this.nodes.textarea) {
+      this.nodes.textarea.value = data.code;
+    }
+  }
+
+  /**
+   * Get Tool toolbox settings.
+   * Provides the icon and title to display in the toolbox for the CodeTool.
+   * @returns An object containing:
+   * - icon: SVG representation of the Tool's icon
+   * - title: Title to show in the toolbox
+   */
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: '<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-linejoin="round" stroke-width="2" d="M9 17C7 17 7 15.2536 7 13.5L5.5 12L7 10.5C7 8.74644 7 7 9 7"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17C17 17 17 15.2536 17 13.5L18.5 12L17 10.5C17 8.74644 17 7 15 7"/></svg>',
+      title: 'Code',
+    };
+  }
+
+  /**
+   * Default placeholder for CodeTool's textarea
+   * @returns
+   */
+  public static get DEFAULT_PLACEHOLDER(): string {
+    return 'Enter your code';
+  }
+
+  /**
+   * Default language for CodeTool's textarea
+   * @returns
+   */
+  public static get DEFAULT_LANGUAGE(): string {
+    return 'javascript';
+  }
+
+  /**
+   * Default theme for CodeTool's textarea
+   * @returns
+   */
+  public static get DEFAULT_THEME(): string {
+    return 'vitesse-dark';
+  }
+
+  /**
+   *  Used by Editor.js paste handling API.
+   *  Provides configuration to handle CODE tag.
+   * @returns
+   */
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['pre'],
+    };
+  }
+
+  /**
+   * Automatic sanitize config
+   * @returns
+   */
+  public static get sanitize(): SanitizerConfig {
+    return {
+      code: true, // Allow HTML tags
+    };
+  }
+
+  /**
+   * Handles Tab key pressing (adds/removes indentations)
+   * @param event - keydown
+   */
+  private tabHandler(event: KeyboardEvent): void {
+    /**
+     * Prevent editor.js tab handler
+     */
+    event.stopPropagation();
+
+    /**
+     * Prevent native tab behaviour
+     */
+    event.preventDefault();
+
+    const textarea = event.target as HTMLTextAreaElement;
+    const isShiftPressed = event.shiftKey;
+    const caretPosition = textarea.selectionStart;
+    const value = textarea.value;
+    const indentation = '  ';
+
+    let newCaretPosition;
+
+    /**
+     * For Tab pressing, just add an indentation to the caret position
+     */
+    if (!isShiftPressed) {
+      newCaretPosition = caretPosition + indentation.length;
+
+      textarea.value = value.substring(0, caretPosition) + indentation + value.substring(caretPosition);
+    } else {
+      /**
+       * For Shift+Tab pressing, remove an indentation from the start of line
+       */
+      const currentLineStart = getLineStartPosition(value, caretPosition);
+      const firstLineChars = value.substr(currentLineStart, indentation.length);
+
+      if (firstLineChars !== indentation) {
+        return;
+      }
+
+      /**
+       * Trim the first two chars from the start of line
+       */
+      textarea.value = value.substring(0, currentLineStart) + value.substring(currentLineStart + indentation.length);
+      newCaretPosition = caretPosition - indentation.length;
+    }
+
+    /**
+     * Restore the caret
+     */
+    textarea.setSelectionRange(newCaretPosition, newCaretPosition);
+  }
+
+  /**
+   * Create Tool's view
+   * @returns
+   */
+  private drawView(): HTMLDivElement {
+    const wrapper = document.createElement('div');
+    const wrapperHolder = document.createElement('div');
+    const wrapperSelectorHolder = document.createElement('div');
+    const wrapperLang = document.createElement('div');
+    const wrapperCopy = document.createElement('div');
+    const wrapperCopyTip = document.createElement('div');
+    
+
+    const selectorLanguage = document.createElement('select');
+    const selectorTheme = document.createElement('select');
+    const span = document.createElement('span');
+    const textarea = document.createElement('textarea');
+
+    wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper);
+    wrapperHolder.classList.add('ce-editorjs-x-shiki__code');
+    wrapperSelectorHolder.classList.add('ce-editorjs-x-shiki__selector');
+    wrapperLang.classList.add('ce-editorjs-x-shiki__lang');
+    wrapperCopy.classList.add('ce-editorjs-x-shiki__copy');
+    wrapperCopyTip.classList.add('ce-editorjs-x-shiki__copy_tip');
+
+    selectorLanguage.classList.add(this.CSS.selectorLanguage);
+    //selectorTheme.classList.add(this.CSS.selectorTheme);
+    textarea.classList.add(this.CSS.textarea, this.CSS.input);
+
+    wrapperLang.innerHTML = this.data.lang
+    wrapperCopy.innerHTML = `<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-linejoin="round" stroke-width="2" d="M17.25 8.5H10.25C9.2835 8.5 8.5 9.2835 8.5 10.25V17.25C8.5 18.2165 9.2835 19 10.25 19H17.25C18.2165 19 19 18.2165 19 17.25V10.25C19 9.2835 18.2165 8.5 17.25 8.5Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 8.5V6.75C15.5 6.28587 15.3156 5.84075 14.9874 5.51256C14.6592 5.18437 14.2141 5 13.75 5H6.75C6.28587 5 5.84075 5.18437 5.51256 5.51256C5.18437 5.84075 5 6.28587 5 6.75V13.75C5 14.2141 5.18437 14.6592 5.51256 14.9874C5.84075 15.3156 6.28587 15.5 6.75 15.5H8.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12L15.5 12"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.5L15.5 15.5"/></svg>`;
+    wrapperCopyTip.innerText=this.api.i18n.t('Copied');
+
+    
+
+    languages.forEach((lang) => {
+      const option = document.createElement('option');
+      option.value = lang.id;
+      option.text = lang.name;
+      selectorLanguage.appendChild(option);
+    });
+    selectorLanguage.value = this.data.lang
+
+    // themes.forEach((theme) => {
+    //   const option = document.createElement('option');
+    //   option.value = theme.id;
+    //   option.text = theme.displayName;
+    //   selectorTheme.appendChild(option);
+    // });
+    // selectorTheme.value = this.data.theme
+
+    textarea.value = this.data.code;
+    textarea.placeholder = this.placeholder;
+    textarea.spellcheck = false;
+    textarea.autocomplete = "off"
+    textarea.autocapitalize = "off"
+
+    if (this.readOnly) {
+      textarea.disabled = true;
+    }
+
+    wrapperHolder.appendChild(span);
+    wrapperHolder.appendChild(textarea);
+   
+    if(!this.readOnly) {
+      wrapperSelectorHolder.appendChild(selectorLanguage);
+      //wrapperSelectorHolder.appendChild(selectorTheme);
+    
+    } else {
+      wrapperSelectorHolder.appendChild(wrapperLang);
+      
+    }
+    wrapperCopy.appendChild(wrapperCopyTip);
+
+    wrapperSelectorHolder.appendChild(wrapperCopy);
+    wrapper.appendChild(wrapperSelectorHolder);
+   
+    wrapper.appendChild(wrapperHolder);
+    //wrapper.appendChild(wrapperLang);
+
+    this.runShiki().then(({ html, preStyle }) => {
+
+      span.innerHTML = html
+      wrapper?.setAttribute('style', preStyle)
+      selectorLanguage.setAttribute('style', preStyle)
+      selectorTheme.setAttribute('style', preStyle)
+    })
+
+    selectorLanguage.addEventListener('change', (event: Event) => {
+      const lang = (event.target as HTMLSelectElement).value
+      this._selectorLanguage = lang
+      this.runShiki().then(({ html, preStyle }) => {
+        span.innerHTML = html
+        wrapperLang.innerHTML = lang
+      })
+    })
+
+    selectorTheme.addEventListener('change', (event: Event) => {
+      const theme = (event.target as HTMLSelectElement).value
+      this._selectorTheme = theme
+      this.runShiki().then(({ html, preStyle }) => {
+        span.innerHTML = html
+        wrapper?.setAttribute('style', preStyle)
+        selectorLanguage.setAttribute('style', preStyle)
+        selectorTheme.setAttribute('style', preStyle)
+      })
+    })
+
+    textarea.addEventListener('input', () => {
+      this.data.code = textarea.value
+      this.runShiki().then(({ html, preStyle }) => {
+        span.innerHTML = html
+        wrapper?.setAttribute('style', preStyle)
+        selectorLanguage.setAttribute('style', preStyle)
+        selectorTheme.setAttribute('style', preStyle)
+      })
+    })
+
+    /**
+     * Enable keydown handlers
+     */
+    textarea.addEventListener('keydown', (event) => {
+      switch (event.code) {
+        case 'Tab':
+          this.tabHandler(event);
+          this.data.code = textarea.value
+          this.runShiki().then(({ html, preStyle }) => {
+            span.innerHTML = html
+          })
+          break;
+      }
+    });
+    wrapperCopy.addEventListener('click', (event: MouseEvent) => {
+      this.copyCode(this.data.code,event);
+    });
+
+    this.nodes.textarea = textarea;
+
+    return wrapper;
+  }
+
+  private async runShiki(): Promise<{ html: string, preStyle: string }> {
+    let preStyle = ''
+
+    const html = await codeToHtml(this.data.code, {
+      lang: this._selectorLanguage,
+      theme: this._selectorTheme,
+      transformers: [
+        {
+          preprocess(code) {
+            // if (code.endsWith('\n'))
+              return `${code}\n`
+          },
+          pre(node) {
+            this.addClassToHast(node, 'ce-editorjs-x-shiki__span')
+            preStyle = node.properties?.style as string || ''
+          },
+        }
+      ]
+    })
+
+    return {
+      html,
+      preStyle
+    }
+
+  }
+
+  private copyCode(code: string, event: MouseEvent) {
+    if (this.data.code) {
+      navigator.clipboard.writeText(code)
+        .then(() => {      
+          if (event.target) {
+            const parentEle = (event.target as HTMLElement).parentElement;
+            if (parentEle) {
+              const tooltip = parentEle.lastChild as HTMLElement;              
+              if (tooltip) {
+                tooltip.classList.add('visible');
+                setTimeout(() => {
+                  tooltip.classList.remove('visible');
+
+                }, 2000);
+              }
+            }
+          }
+
+        
+      })
+        .catch((err) => {
+          console.error(err);
+          alert("Unable to copy");
+        });
+    }
+  }
+}

package/src/plugins/code/utils/string.ts

@@ -0,0 +1,34 @@
+/**
+ * Return the position of line starting from passed point
+ *
+ * ┌───────────────┐
+ * │1234\n         │
+ * │2eda | dadd\n  │ <-- returns 5
+ * └───────────────┘
+ * @param string - string to process
+ * @param position - search starting position
+ * @returns
+ */
+export function getLineStartPosition(string: string, position: number): number {
+  const charLength = 1;
+  let char = '';
+
+  /**
+   * Iterate through all the chars before the position till the
+   * - end of line (\n)
+   * - or start of string (position === 0)
+   */
+  while (char !== '\n' && position > 0) {
+    position = position - charLength;
+    char = string.substr(position, charLength);
+  }
+
+  /**
+   * Do not count the linebreak symbol because it is related to the previous line
+   */
+  if (char === '\n') {
+    position += 1;
+  }
+
+  return position;
+}

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

@@ -0,0 +1,138 @@
+import { API } from '@ebl-vue/editorjs';
+import type { InlineTool } from "@ebl-vue/editorjs/types/inline-tool";
+const IconColor = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.24296 11.4075C5.23167 10.6253 5.52446 9.8395 6.12132 9.24264L9.65686 5.70711C10.0474 5.31658 10.6809 5.31693 11.0714 5.70745L16.0205 10.6565C16.2268 10.8629 16.3243 11.1371 16.3126 11.4075M5.24296 11.4075C5.25382 12.1607 5.54661 12.9106 6.12132 13.4853L8 15.364M5.24296 11.4075H11.9565M16.3126 11.4075C16.3022 11.6487 16.205 11.8869 16.0208 12.0711L12.4853 15.6066C11.3137 16.7782 9.41421 16.7782 8.24264 15.6066L8 15.364M16.3126 11.4075H11.9565M8 15.364L11.9565 11.4075" stroke="black" stroke-width="2"/>
+<path d="M20 17.4615C20 18.3112 19.3284 19 18.5 19C17.6716 19 17 18.3112 17 17.4615C17 16.6119 17.9 15.6154 18.5 15C19.1 15.6154 20 16.6119 20 17.4615Z" stroke="black" stroke-width="2"/></svg>`;
+import './styles.css';
+
+import {type InlineToolConstructorOptions} from "@ebl-vue/editorjs/types/tools/inline-tool";
+
+type ColorPickerConfig = {
+	colors: string[];
+	columns: number;
+};
+
+// interface ConstructorArgs {
+// 	api: API;
+// 	config: ColorPickerConfig;
+// }
+
+export default class ColorPicker  {
+	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;
+	}
+
+	/**
+	 * Sanitizer rules
+	 *
+	 * @returns {object}
+	 */
+	static get sanitize(): any {
+		return {
+			span: {
+				style: {
+					color: true,
+				},
+			},
+		};
+	}
+}
+
+export class ColorPickerWithoutSanitize extends ColorPicker {
+	static override get sanitize() {
+		return undefined;
+	}
+}