@ebl-vue/editor-full 2.31.34 → 2.31.36

package/src/plugins/code/index.ts

@@ -0,0 +1,619 @@
+//https://github.com/yudaapratama/editorjs-shiki
+import '@ebl-vue/editor-render/styles/code.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';
+import { IconCode ,IconCopy} from "../../icons";
+
+/**
+ * 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;
+  resizeSize?: number;
+}>;
+
+/**
+ * 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,
+      resizeSize: data.resizeSize || 0
+    };
+
+    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,
+      resizeSize: this.data.resizeSize || 0
+    };
+  }
+
+  /**
+   * 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: IconCode,
+      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');
+    const dragHandle = document.createElement('div');
+    dragHandle.classList.add('ce-editorjs-x-shiki__code__dragHandler');
+    wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper);
+    if(this.readOnly){
+      wrapper.classList.add('read-only');
+    }else{
+      wrapper.classList.add('editable');
+    }
+    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 = IconCopy;
+    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);
+    wrapper.appendChild(dragHandle);
+    
+
+    if(this.data.resizeSize&&this.data.resizeSize>0){
+      wrapperHolder.style.height = this.data.resizeSize + 'px';
+    }
+
+    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;
+      }
+    });
+    textarea.addEventListener('scroll', () => {
+      //span.scrollTop = textarea.scrollTop
+      span.style=`display:block;transform: translateY(-${textarea.scrollTop}px)`
+    })
+    wrapperCopy.addEventListener('click', (event: MouseEvent) => {
+      this.copyCode(this.data.code, event);
+    });
+    //调整窗口大小
+    dragHandle.addEventListener('mousedown', (event: MouseEvent) => {
+      this.resizeClick(wrapperHolder, event);
+    });
+    this.nodes.textarea = textarea;
+
+    return wrapper;
+  }
+  private resizeClick(codeElement: HTMLElement, event: MouseEvent) {
+    
+    let startY = event.clientY;
+    let startHeight = parseInt(window.getComputedStyle(codeElement).height, 10);
+    const mouseMoveHandler = (e: MouseEvent) => {
+      const dY = e.clientY - startY;
+      let newHeight = startHeight + dY;
+      
+
+      if (newHeight < 100) {
+        newHeight = 100;        
+      }
+      codeElement.style.height = newHeight + 'px';
+    };
+    const mouseUpHandler = () => {
+      const blockHeight = parseInt(
+        window.getComputedStyle(codeElement).height,
+        10,
+      );
+      this.data.resizeSize = blockHeight;
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
+  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 || ''
+          },
+          line(node, line) {
+            node.properties = node.properties || {};
+            node.properties['data-line'] = line;
+
+          }
+
+        }
+      ]
+    })
+
+    return {
+      html,
+      preStyle
+    }
+
+  }
+  private showCopyTip(msg: string,event: MouseEvent) {
+    const tip = this.api.i18n.t(msg);
+    if (event.target) {
+              const parentEle = (event.target as HTMLElement).parentElement;
+              if (parentEle) {
+                const tooltip = parentEle.lastChild as HTMLElement;
+                if (tooltip) {
+                  tooltip.innerHTML = tip;
+                  tooltip.classList.add('visible');
+                  setTimeout(() => {
+                    tooltip.classList.remove('visible');
+
+                  }, 2000);
+                }
+              }
+            }
+  }
+  private copyCode(code: string, event: MouseEvent) {    
+    if (this.data.code) {
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          navigator.clipboard.writeText(code).then(() => {
+            this.showCopyTip('Copied',event);
+          }).catch((err) => {
+            console.error(err);            
+            this.showCopyTip('Unable to copy',event);
+          });
+       
+        } catch (err) {
+          this.showCopyTip('Unable to copy',event);
+        }
+      } else {
+        // 传统方法：使用 textarea 和 execCommand
+      
+          const textArea = document.createElement('textarea');
+          textArea.value = code;
+    
+          // 避免滚动到底部
+          textArea.style.top = '0';
+          textArea.style.left = '0';
+          textArea.style.position = 'fixed';
+          textArea.style.opacity = '0';
+          textArea.style.pointerEvents = 'none';
+          textArea.style.zIndex = '-1000';
+    
+          document.body.appendChild(textArea);
+          textArea.focus();
+          textArea.select();    
+          try {
+            document.execCommand('copy');
+            document.body.removeChild(textArea);   
+            this.showCopyTip('Copied',event);
+          } catch (err) {
+           this.showCopyTip('Unable to copy',event);
+            document.body.removeChild(textArea);
+            
+          }
+        
+      }
+    }
+    
+  }
+}

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;
+}