@ebl-vue/editor-full 1.0.12 → 1.1.1

package/src/plugins/imageTool/uploader.ts

@@ -0,0 +1,268 @@
+
+import isPromise from './utils/isPromise';
+import type { IUploadResponseFormat, UploadOptions } from './types/types';
+import type { UploadResponseFormat, ImageConfig } from './types/types';
+import axios, { AxiosInstance } from "axios";
+import { selectFiles } from './utils/index';
+/**
+ * Params interface for Uploader constructor
+ */
+interface UploaderParams {
+  /**
+   * Configuration for the uploader
+   */
+  config: ImageConfig;
+
+  /**
+   * Handles the upload response.
+   * @param {UploadResponseFormat} response - Response format expected from the backend on file uploading.
+   * @returns {void}
+   */
+  onUpload: (response: UploadResponseFormat) => void;
+
+  /**
+   *
+   * @param error : error type
+   * @returns void
+   */
+  onError: (error: string) => void;
+}
+
+/**
+ * Module for file uploading. Handle 3 scenarios:
+ *  1. Select file from device and upload
+ *  2. Upload by pasting URL
+ *  3. Upload by pasting file from Clipboard or by Drag'n'Drop
+ */
+export default class Uploader {
+  private config: ImageConfig;
+  private onUpload: (response: UploadResponseFormat) => void;
+  private onError: (error: string) => void;
+  /**
+   * @param params - uploader module params
+   * @param params.config - image tool config
+   * @param params.onUpload - one callback for all uploading (file, url, d-n-d, pasting)
+   * @param params.onError - callback for uploading errors
+   */
+  constructor({ config, onUpload, onError }: UploaderParams) {
+    this.config = config;
+    this.onUpload = onUpload;
+    this.onError = onError;
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.transport()
+   * @param onPreview - callback fired when preview is ready
+   */
+  public async uploadSelectedFile({ onPreview, noSelectedFile }: UploadOptions) {
+
+    const preparePreview = function (file: File): void {
+      const reader = new FileReader();
+
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        onPreview((e.target as FileReader).result as string);
+      };
+    };
+
+    /**
+     * Custom uploading
+     * or default uploading
+     */
+
+    let cdn: string = "";
+    let objectKey: string = "";
+
+
+
+    //选获取上传文件的地址
+    const files = await selectFiles({ accept: this.config.types ?? 'image/*' });
+
+    if (files && files.length > 0) {
+      preparePreview(files[0]);
+    } else {
+      noSelectedFile();
+      return
+    }
+    const file = files[0];
+    const fileTypes = this.config.types.split(",");
+    let suffixIndex = file.name.lastIndexOf(".");
+    let suffix = file.name.slice(suffixIndex);
+
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
+
+    let headers: Record<string, string> = {};
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+    const axiosInstance: AxiosInstance = axios.create({
+      timeout: 1800000,
+      headers: headers,
+    });
+    headers["Content-Type"] = "application/json";
+
+    const uploadBodyRes = await axiosInstance.post(this.config.endpoints.byFile!, {
+      "fileName": file.name,
+      "contentType": file.type
+    })
+    if (uploadBodyRes.status !== 200) {
+      this.onError(uploadBodyRes.statusText);
+      return;
+    }
+    const uploadRes = uploadBodyRes.data;
+    if (!uploadRes.success) {
+      this.onError(uploadRes.message!);
+      return;
+    }
+    console.log(uploadRes);
+    cdn = uploadRes.data.cdn;
+    objectKey = uploadRes.data.objectKey;
+
+
+    headers["Content-Type"] = file.type;
+
+    let upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
+
+
+
+
+    upload.then((response) => {
+      if (response.status === 200) {
+        response = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      }
+      this.onUpload(response);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param url - image source url
+   */
+  public uploadByUrl(url: string): void {
+    let upload;
+          let headers: Record<string, string> = { "Content-Type": "application/json" };
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+     const axiosInstance: AxiosInstance = axios.create({
+        timeout: 1800000,
+        headers: headers,
+      });
+    upload = axiosInstance.post(this.config.endpoints.byUrl!, {
+      "url": url,
+       "accept": ".jpg,.jpeg,.gif,.png,.webp"
+    })
+
+
+
+
+    upload.then((response) => {
+      
+      if(response.status !== 200||response.data.success===false){
+        this.onError(response.data.message!);
+        return;
+      }
+      
+      let cdn = response.data.data.cdn;
+      let objectKey = response.data.data.objectKey;
+
+      let res = {
+        success: 1,
+        file: { url: cdn + objectKey }
+      };
+      this.onUpload(res);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param file - file pasted by drag-n-drop
+   * @param onPreview - file pasted by drag-n-drop
+   */
+  public async uploadByFile(file: Blob, { onPreview }: UploadOptions) {
+
+
+    const fileTypes = this.config.types.split(",");
+
+    let suffixIndex = file.name.lastIndexOf(".");
+    let suffix = file.name.slice(suffixIndex);
+
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
+
+
+
+    let headers: Record<string, string> = {};
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+    const axiosInstance: AxiosInstance = axios.create({
+      timeout: 1800000,
+      headers: headers,
+    });
+    headers["Content-Type"] = "application/json";
+
+    const uploadBodyRes = await axiosInstance.post(this.config.endpoints.byFile!, {
+      "fileName": file.name,
+      "contentType": file.type
+    })
+    if (uploadBodyRes.status !== 200) {
+      this.onError(uploadBodyRes.statusText);
+      return;
+    }
+    const uploadRes = uploadBodyRes.data;
+    if (!uploadRes.success) {
+      this.onError(uploadRes.message!);
+      return;
+    }
+    console.log(uploadRes);
+    let cdn = uploadRes.data.cdn;
+    let objectKey = uploadRes.data.objectKey;
+
+
+    headers["Content-Type"] = file.type;
+    let upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
+    upload.then((response) => {
+      if (response.status === 200) {
+        response = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      }
+      this.onUpload(response);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+}

package/src/plugins/imageTool/utils/dom.ts

@@ -0,0 +1,24 @@
+/**
+ * Helper for making Elements with attributes
+ * @param tagName           - new Element tag name
+ * @param classNames  - list or name of CSS class
+ * @param attributes        - any attributes
+ * @returns
+ */
+export function make(tagName: string, classNames: string[] | string | null = null, attributes: { [key: string]: string | boolean } = {}): HTMLElement {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames !== null) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    if (attributes.hasOwnProperty(attrName)) {
+      (el as unknown as { [key: string]: string | boolean })[attrName] = attributes[attrName];
+    }
+  }
+
+  return el;
+}

package/src/plugins/imageTool/utils/index.ts

@@ -0,0 +1,73 @@
+ interface IConfig {
+    multiple?: boolean;
+    accept?: string;
+ }
+export function selectFiles(config = {} as IConfig): Promise<File[]> {
+  let fileCancle = true;
+    return new Promise((resolve, reject) => {
+      /**
+       * Create a new INPUT element
+       * @type {HTMLElement}
+       */
+      let inputElement = document.createElement('INPUT');
+
+      /**
+       * Set a 'FILE' type for this input element
+       * @type {string}
+       */
+      inputElement.type = 'file';
+
+      if (config.multiple) {
+        inputElement.setAttribute('multiple', 'multiple');
+      }
+
+      if (config.accept) {
+        inputElement.setAttribute('accept', config.accept);
+      }
+
+      /**
+       * Do not show element
+       */
+      inputElement.style.display = 'none';
+
+      /**
+       * Append element to the body
+       * Fix using module on mobile devices
+       */
+      document.body.appendChild(inputElement);
+
+      /**
+       * Add onchange listener for «choose file» pop-up
+       */
+      inputElement.addEventListener('change', event => {
+        console.log("选中文件")
+        fileCancle = false;
+        /**
+         * Get files from input field
+         */
+        const files = event.target.files;
+
+        /**
+         * Return ready to be uploaded files array
+         */
+        resolve(files);
+
+        /**
+         * Remove element from a DOM
+         */
+        document.body.removeChild(inputElement);
+      }, false);
+      window.addEventListener("focus", () => {        
+        setTimeout(() => {
+          if (fileCancle) {
+            console.log("取消选择文件")
+            resolve([]);
+          }
+        }, 1000)
+      },{once: true})
+      /**
+       * Fire click event on «input file» field
+       */
+      inputElement.click();
+    });
+  };

package/src/plugins/imageTool/utils/isPromise.ts

@@ -0,0 +1,10 @@
+import type { UploadResponseFormat } from '../types/types';
+
+/**
+ * Check if passed object is a Promise
+ * @param  object - object to check
+ * @returns
+ */
+export default function isPromise(object: Promise<UploadResponseFormat>): object is Promise<UploadResponseFormat> {
+  return object !== undefined && typeof object.then === 'function';
+}

package/src/plugins/indent/index.ts

@@ -1,13 +1,11 @@
 import  type {  BlockTune,  API,  BlockAPI,  BlockAddedEvent,ToolConfig } from '@ebl-vue/editorjs/types'
 
 import type { MenuConfig } from '@ebl-vue/editorjs/types/tools'
-
+import { IconIndentLeft,IconIndentRight } from '../../icons';
 
 import './index.css'
 
-const IconChevronLeft = `<svg t="1763708081701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2604" width="24" height="24"><path d="M469.3330000000001 725.333H896V640H469.3330000000001v85.333zM128 512l170.667 170.667V341.3330000000001L128 512z m0 384h768v-85.333H128V896z m0-768v85.333h768V128H128z m341.333 256H896v-85.333H469.3330000000001V384z m0 170.667H896v-85.334H469.3330000000001v85.334z" p-id="2605" fill="#000000"></path></svg>`;
 
-const IconChevronRight = `<svg t="1763708124227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" width="24" height="24"><path d="M128 896h768v-85.333H128V896z m0-554.667v341.334L298.667 512 128 341.333z m341.333 384H896V640H469.333v85.333zM128 128v85.333h768V128H128z m341.333 256H896v-85.333H469.333V384z m0 170.667H896v-85.334H469.333v85.334z" p-id="2789" fill="#000000"></path></svg>`;
 
 interface ConstructorArgs {
   data: IndentData;
@@ -196,7 +194,7 @@ export default class IndentTune implements BlockTune {
             //@ts-ignore
             item.title = this.rightText;
           },
-          icon: IconChevronRight,
+          icon: IconIndentRight,
           name: rightElementName,
         },
         {
@@ -209,7 +207,7 @@ export default class IndentTune implements BlockTune {
             //@ts-ignore
             item.title = this.leftText;
           },
-          icon: IconChevronLeft,
+          icon: IconIndentLeft,
           name: leftElementName,
         },
       ]
@@ -217,9 +215,9 @@ export default class IndentTune implements BlockTune {
 
     const html = /*html*/ `
 			<div class="${this.CSS.popoverItem} ${this.CSS.customPopoverItem}" data-item-name='indent' version=${this.config.version}>
-				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentLeft}>${IconChevronLeft}</button>
+				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentLeft}>${IconIndentLeft}</button>
 				<span class="${this.CSS.popoverItemTitle}">${this.api.sanitizer.clean(this.api.i18n.t('Indent'), {})}</span>
-				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentRight} style="margin-left:10px;">${IconChevronRight}</button>
+				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentRight} style="margin-left:10px;">${IconIndentRight}</button>
 			</div>
 		`
 

package/src/plugins/inline-code/index.ts

@@ -2,11 +2,8 @@
  * Build styles
  */
 import './index.css';
-const IconBrackets = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 8L5 12L9 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15 8L19 12L15 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+import {IconBrackets} from '../../icons';
+
 import { API, InlineTool, InlineToolConstructorOptions, SanitizerConfig } from "@editorjs/editorjs";
 
 interface IconClasses {

package/src/plugins/list/ListRenderer/ChecklistRenderer.ts

@@ -4,10 +4,7 @@ import { isEmpty, make } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 import { CssPrefix } from '../styles/CssPrefix';
-const IconCheck = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 12L10.4884 15.8372C10.5677 15.9245 10.705 15.9245 10.7844 15.8372L17 9" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
+import { IconCheck } from "../../../icons"; 
 
 /**
  * Interface that represents all list used only in unordered list rendering

package/src/plugins/list/index.ts

@@ -1,46 +1,28 @@
 import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@ebl-vue/editorjs';
 import type {
   BlockToolConstructorOptions,
-  MenuConfigItem,
+  
   ToolConfig
 } from '@editorjs/editorjs/types/tools';
 
-import { IconStartWith } from './styles/icons/index.js';
+
 import type { ListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
 import ListTabulator from './ListTabulator';
 import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
 import type { ListRenderer } from './types/ListRenderer';
-import { renderToolboxInput } from './utils/renderToolboxInput';
-import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
-
-const IconListBulleted = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="9" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="9" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="9" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 17H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 12H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 7H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
-const IconListNumbered = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="12" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="12" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="12" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M7.79999 14L7.79999 7.2135C7.79999 7.12872 7.7011 7.0824 7.63597 7.13668L4.79999 9.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
-const IconChecklist = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.2 12L11.0586 13.8586C11.1367 13.9367 11.2633 13.9367 11.3414 13.8586L14.7 10.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<rect x="5" y="5" width="14" height="14" rx="4" stroke="black" stroke-width="2"/>
-</svg>
-`;
+
+import {  type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
+
+import { IconListBulleted, IconListNumbered, IconChecklist } from "../../icons"; 
+
+
 
 /**
  * Build styles
  */
 import './styles/list.css';
 import './styles/input.css';
-import stripNumbers from './utils/stripNumbers';
+
 import normalizeData from './utils/normalizeData';
 import type { PasteEvent } from './types';
 import type { OrderedListItemMeta } from './types/ItemMeta';
@@ -54,6 +36,7 @@ export type ListParams = BlockToolConstructorOptions<ListData | OldListData, Lis
  * Default class of the component used in editor
  */
 export default class EditorjsList {
+  defaultCounterTypes: OlCounterType[];
   /**
    * Notify core that read-only mode is supported
    */
@@ -196,7 +179,7 @@ export default class EditorjsList {
   /**
    * Default Counter type of the ordered list
    */
-  private defaultCounterTypes: OlCounterType[];
+  //private defaultCounterTypes: OlCounterType[];
 
   /**
    * Tool's data
@@ -438,21 +421,21 @@ export default class EditorjsList {
    * Changes ordered list counterType property value
    * @param counterType - new value of the counterType value
    */
-  private changeCounters(counterType: OlCounterType): void {
-    this.list?.changeCounters(counterType);
+  // private changeCounters(counterType: OlCounterType): void {
+  //   this.list?.changeCounters(counterType);
 
-    (this.data.meta as OrderedListItemMeta).counterType = counterType;
-  }
+  //   (this.data.meta as OrderedListItemMeta).counterType = counterType;
+  // }
 
   /**
    * Changes ordered list start property value
    * @param index - new value of the start property
-   */
-  private changeStartWith(index: number): void {
-    this.list?.changeStartWith(index);
+  //  */
+  // private changeStartWith(index: number): void {
+  //   this.list?.changeStartWith(index);
 
-    (this.data.meta as OrderedListItemMeta).start = index;
-  }
+  //   (this.data.meta as OrderedListItemMeta).start = index;
+  // }
 
   /**
    * This method allows changing tabulator respectfully to passed style

package/src/plugins/list/types/OlCounterType.ts

@@ -1,4 +1,4 @@
-import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../styles/icons/index.js';
+import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../../../icons';
 
 export type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';
 

package/src/plugins/marker/index.ts

@@ -2,15 +2,23 @@
  * 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>`;
+import type { API } from '@ebl-vue/editorjs';
+import { IconMarker } from '../../icons';
 
 /**
  * Marker Tool for the Editor.js
  *
  * Allows to wrap inline fragment and style it somehow.
  */
- export default class Marker {
+export default class Marker {
+  private api: API;
+  private button: HTMLElement | null;
+  private tag: string;
+  private iconClasses: {base: string; active: string};
+
+  static get toolboxIcon() {
+    return IconMarker;
+  }
   /**
    * Class name for term-tag
    *
@@ -23,7 +31,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
   /**
    * @param {{api: object}}  - Editor.js API
    */
-  constructor({api}) {
+  constructor({api}: {api: any}) {
     this.api = api;
 
     /**
@@ -65,7 +73,8 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    */
   render() {
     this.button = document.createElement('button');
-    this.button.type = 'button';
+    //this.button.type = 'button';
+    this.button.setAttribute("type", "button");
     this.button.classList.add(this.iconClasses.base);
     this.button.innerHTML = this.toolboxIcon;
 
@@ -77,7 +86,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {Range} range - selected fragment
    */
-  surround(range) {
+  surround(range:Range) {
     if (!range) {
       return;
     }
@@ -99,7 +108,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {Range} range - selected fragment
    */
-  wrap(range) {
+  wrap(range:Range) {
     /**
      * Create a wrapper for highlighting
      */
@@ -127,32 +136,35 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {HTMLElement} termWrapper - term wrapper tag
    */
-  unwrap(termWrapper) {
+  unwrap(termWrapper: HTMLElement) {
     /**
      * Expand selection to all term-tag
      */
     this.api.selection.expandToTag(termWrapper);
 
     let sel = window.getSelection();
-    let range = sel.getRangeAt(0);
+    let range = sel?.getRangeAt(0);
 
-    let unwrappedContent = range.extractContents();
+    let unwrappedContent = range?.extractContents();
 
     /**
      * Remove empty term-tag
      */
-    termWrapper.parentNode.removeChild(termWrapper);
+    termWrapper?.parentNode?.removeChild(termWrapper);
 
     /**
      * Insert extracted content
      */
-    range.insertNode(unwrappedContent);
-
+    if (unwrappedContent) {
+      range?.insertNode(unwrappedContent);
+    }
     /**
      * Restore selection
      */
-    sel.removeAllRanges();
-    sel.addRange(range);
+    sel?.removeAllRanges();
+    if (range) {
+      sel?.addRange(range);
+    }
   }
 
   /**
@@ -161,7 +173,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
   checkState() {
     const termTag = this.api.selection.findParentTag(this.tag, Marker.CSS);
 
-    this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    this.button?.classList.toggle(this.iconClasses.active, !!termTag);
   }
 
   /**