@ebl-vue/editor-full 2.31.11 → 2.31.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebl-vue/editor-full",
-  "version": "2.31.11",
+  "version": "2.31.12",
   "type": "module",
   "author": "lrj525@sina.com",
   "description": "结构化编辑器",

package/src/components/Editor/Editor.vue

@@ -16,7 +16,7 @@ import EditorJS from '@ebl-vue/editorjs';
 //import EditorJS from '../../../../editorjs/src/codex';
 //window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
 
-import { onMounted, onUnmounted, ref, inject } from 'vue';
+import { onMounted, onUnmounted, watch, inject } from 'vue';
 import { toRaw } from 'vue';
 import { IEblEditorSettings } from '../../types';
 
@@ -71,13 +71,13 @@ const props = withDefaults(defineProps<Props>(), {
   }),
   locale:{}
 });
-
-
+let editorData=toRaw(props.data);
+let editorIsReady = false;
 
 let editor: EditorJS | null = null;
 const tunes = ['indent', 'blockAlignment'];
 onMounted(() => {
-  const editorData=toRaw(props.data);
+  
   editor = new EditorJS({
     minHeight:100,
     holder: 'holder',
@@ -105,7 +105,9 @@ onMounted(() => {
         class: List,
         inlineToolbar: true,
         config: {
-          defaultStyle: 'unordered',
+          defaultStyle: 'checklist',
+          
+            maxLevel: 4,
         }
       },
       h1: {
@@ -170,7 +172,7 @@ onMounted(() => {
           userStore: props.userStore,
           endpoints: {
             byFile: EblEditorSettings?.fileUploadEndpoint,
-            byUrl: EblEditorSettings?.urlUploadEndpoint
+            //byUrl: EblEditorSettings?.urlUploadEndpoint
           },
           features: {
             caption: false,
@@ -201,6 +203,7 @@ onMounted(() => {
       emits("onChange", api, event);
     },
     onReady: () => {
+      editorIsReady = true;
       new DragDrop("holder", props.readOnly, editor!, '1px solid #999');
       const undoConfig = {
         debounceTimer: 200,
@@ -214,6 +217,10 @@ onMounted(() => {
       });
        undo.initialize(editorData);
       emits("onReady");
+      if (props.data && props.data.blocks && props.data.blocks.length > 0) {
+         editorData=toRaw(props.data);
+        editor!.render(editorData);
+      }
     },
 
   })
@@ -225,6 +232,15 @@ onUnmounted(() => {
   }
 });
 
+watch(()=>props.data, (newVal, oldVal) => { 
+  if (editor != null && editorIsReady) {
+    editorData=toRaw(newVal);
+    editor.render(editorData);
+  }
+},{
+  deep:true
+});
+
 /**
  * 验证是否为空 */
 function validate() {

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

@@ -1,10 +1,10 @@
+import { IconCheck } from '../../../icons';
 import type { ChecklistItemMeta } from '../types/ItemMeta';
 import type { ListConfig } from '../types/ListParams';
 import { isEmpty, make } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 import { CssPrefix } from '../styles/CssPrefix';
-import { IconCheck } from "../../../icons"; 
 
 /**
  * Interface that represents all list used only in unordered list rendering

package/src/plugins/list/ListTabulator/index.ts

@@ -7,7 +7,7 @@ import { isHtmlElement } from '../utils/type-guards';
 import { getContenteditableSlice, getCaretNodeAndOffset, isCaretAtStartOfInput } from '@editorjs/caret';
 import { DefaultListCssClasses } from '../ListRenderer';
 import type { PasteEvent } from '../types';
-import type { API, BlockAPI, PasteConfig } from '@editorjs/editorjs';
+import type { API, BlockAPI, PasteConfig } from '@ebl-vue/editorjs';
 import type { ListParams } from '..';
 import type { ChecklistItemMeta, ItemMeta, OrderedListItemMeta, UnorderedListItemMeta } from '../types/ItemMeta';
 import type { ListRenderer } from '../types/ListRenderer';

package/src/plugins/list/index.ts

@@ -1,28 +1,24 @@
 import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@ebl-vue/editorjs';
 import type {
   BlockToolConstructorOptions,
-  
+  MenuConfigItem,
   ToolConfig
-} from '@editorjs/editorjs/types/tools';
-
-
+} from '@ebl-vue/editorjs/types/tools';
+import { IconListBulleted, IconListNumbered, IconChecklist } from '../../icons';
+import { IconStartWith } from '../../icons';
 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 {  type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
-
-import { IconListBulleted, IconListNumbered, IconChecklist } from "../../icons"; 
-
-
+import { renderToolboxInput } from './utils/renderToolboxInput';
+import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
 
 /**
  * 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';
@@ -36,7 +32,6 @@ 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
    */
@@ -179,7 +174,7 @@ export default class EditorjsList {
   /**
    * Default Counter type of the ordered list
    */
-  //private defaultCounterTypes: OlCounterType[];
+  private defaultCounterTypes: OlCounterType[];
 
   /**
    * Tool's data
@@ -286,107 +281,107 @@ export default class EditorjsList {
    * Creates Block Tune allowing to change the list style
    * @returns array of tune configs
    */
-  // public renderSettings(): MenuConfigItem[] {
-  //   const defaultTunes: MenuConfigItem[] = [
-  //     {
-  //       label: this.api.i18n.t('Unordered'),
-  //       icon: IconListBulleted,
-  //       closeOnActivate: true,
-  //       isActive: this.listStyle == 'unordered',
-  //       onActivate: () => {
-  //         this.listStyle = 'unordered';
-  //       },
-  //     },
-  //     {
-  //       label: this.api.i18n.t('Ordered'),
-  //       icon: IconListNumbered,
-  //       closeOnActivate: true,
-  //       isActive: this.listStyle == 'ordered',
-  //       onActivate: () => {
-  //         this.listStyle = 'ordered';
-  //       },
-  //     },
-  //     {
-  //       label: this.api.i18n.t('Checklist'),
-  //       icon: IconChecklist,
-  //       closeOnActivate: true,
-  //       isActive: this.listStyle == 'checklist',
-  //       onActivate: () => {
-  //         this.listStyle = 'checklist';
-  //       },
-  //     },
-  //   ];
-
-  //   if (this.listStyle === 'ordered') {
-  //     const startWithElement = renderToolboxInput(
-  //       (index: string) => this.changeStartWith(Number(index)),
-  //       {
-  //         value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
-  //         placeholder: '',
-  //         attributes: {
-  //           required: 'true',
-  //         },
-  //         sanitize: input => stripNumbers(input),
-  //       });
-
-  //     const orderedListTunes: MenuConfigItem[] = [
-  //       {
-  //         label: this.api.i18n.t('Start with'),
-  //         icon: IconStartWith,
-  //         children: {
-  //           items: [
-  //             {
-  //               element: startWithElement,
-  //               // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
-  //               type: 'html',
-  //             },
-  //           ],
-  //         },
-  //       },
-  //     ];
-
-  //     const orderedListCountersTunes: MenuConfigItem = {
-  //       label: this.api.i18n.t('Counter type'),
-  //       icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
-  //       children: {
-  //         items: [],
-  //       },
-  //     };
-
-  //     /**
-  //      * For each counter type in OlCounterType create toolbox item
-  //      */
-  //     OlCounterTypesMap.forEach((_, counterType: string) => {
-  //       const counterTypeValue = OlCounterTypesMap.get(counterType)! as OlCounterType;
-
-  //       if (!this.defaultCounterTypes.includes(counterTypeValue)) {
-  //         return;
-  //       }
-
-  //       orderedListCountersTunes.children.items!.push({
-  //         title: this.api.i18n.t(counterType),
-  //         icon: OlCounterIconsMap.get(counterTypeValue),
-  //         isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
-  //         closeOnActivate: true,
-  //         onActivate: () => {
-  //           this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
-  //         },
-  //       });
-  //     });
-
-  //     /**
-  //      * Dont show Counter type tune if there is no valid counter types
-  //      */
-  //     if (orderedListCountersTunes.children.items!.length > 1) {
-  //       orderedListTunes.push(orderedListCountersTunes);
-  //     }
-
-  //     // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
-  //     defaultTunes.push({ type: 'separator' }, ...orderedListTunes);
-  //   }
-
-  //   return defaultTunes;
-  // }
+  public renderSettings(): MenuConfigItem[] {
+    const defaultTunes: MenuConfigItem[] = [
+      {
+        label: this.api.i18n.t('Unordered'),
+        icon: IconListBulleted,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'unordered',
+        onActivate: () => {
+          this.listStyle = 'unordered';
+        },
+      },
+      {
+        label: this.api.i18n.t('Ordered'),
+        icon: IconListNumbered,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'ordered',
+        onActivate: () => {
+          this.listStyle = 'ordered';
+        },
+      },
+      {
+        label: this.api.i18n.t('Checklist'),
+        icon: IconChecklist,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'checklist',
+        onActivate: () => {
+          this.listStyle = 'checklist';
+        },
+      },
+    ];
+
+    if (this.listStyle === 'ordered') {
+      const startWithElement = renderToolboxInput(
+        (index: string) => this.changeStartWith(Number(index)),
+        {
+          value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
+          placeholder: '',
+          attributes: {
+            required: 'true',
+          },
+          sanitize: input => stripNumbers(input),
+        });
+
+      const orderedListTunes: MenuConfigItem[] = [
+        {
+          label: this.api.i18n.t('Start with'),
+          icon: IconStartWith,
+          children: {
+            items: [
+              {
+                element: startWithElement,
+                // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+                type: 'html',
+              },
+            ],
+          },
+        },
+      ];
+
+      const orderedListCountersTunes: MenuConfigItem = {
+        label: this.api.i18n.t('Counter type'),
+        icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
+        children: {
+          items: [],
+        },
+      };
+
+      /**
+       * For each counter type in OlCounterType create toolbox item
+       */
+      OlCounterTypesMap.forEach((_, counterType: string) => {
+        const counterTypeValue = OlCounterTypesMap.get(counterType)! as OlCounterType;
+
+        if (!this.defaultCounterTypes.includes(counterTypeValue)) {
+          return;
+        }
+
+        orderedListCountersTunes.children.items!.push({
+          title: this.api.i18n.t(counterType),
+          icon: OlCounterIconsMap.get(counterTypeValue),
+          isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
+          closeOnActivate: true,
+          onActivate: () => {
+            this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
+          },
+        });
+      });
+
+      /**
+       * Dont show Counter type tune if there is no valid counter types
+       */
+      if (orderedListCountersTunes.children.items!.length > 1) {
+        orderedListTunes.push(orderedListCountersTunes);
+      }
+
+      // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+      defaultTunes.push({ type: 'separator' }, ...orderedListTunes);
+    }
+
+    return defaultTunes;
+  }
 
   /**
    * On paste callback that is fired from Editor.
@@ -421,21 +416,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/styles/.cdx-list .css

@@ -0,0 +1,168 @@
+.cdx-list {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  display: grid;
+  counter-reset: item;
+  grid-gap: var(--spacing-s);
+  padding: var(--spacing-xs);
+  --spacing-s: 8px;
+  --spacing-xs: 6px;
+  --list-counter-type: numeric;
+  --radius-border: 5px;
+  --checkbox-background: #fff;
+  --color-border: #C9C9C9;
+  --color-bg-checked: #369FFF;
+  --line-height: 1.45em;
+  --color-bg-checked-hover: #0059AB;
+  --color-tick: #fff;
+  --size-checkbox: 1.2em;
+}
+
+  .cdx-list__item {
+    line-height: var(--line-height);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "checkbox content"
+      ". child";
+  }
+
+  .cdx-list__item-children {
+      display: grid;
+      grid-area: child;
+      grid-gap: var(--spacing-s);
+      padding-top: var(--spacing-s);
+    }
+
+  .cdx-list__item [contenteditable]{
+      outline: none;
+    }
+
+  .cdx-list__item-content {
+      word-break: break-word;
+      white-space: pre-wrap;
+      grid-area: content;
+      padding-left: var(--spacing-s);
+    }
+
+  .cdx-list__item::before {
+      counter-increment: item;
+
+      white-space: nowrap;
+    }
+
+  .cdx-list-ordered .cdx-list__item::before {
+    content: counters(item, ".", var(--list-counter-type)) ".";
+  }
+
+  .cdx-list-ordered {
+    counter-reset: item;
+  }
+
+  .cdx-list-unordered .cdx-list__item::before {
+    content: "•";
+  }
+
+  .cdx-list-checklist .cdx-list__item::before {
+    content: "";
+  }
+
+  .cdx-list__settings .cdx-settings-button {
+      width: 50%;
+    }
+
+  .cdx-list__checkbox {
+    padding-top: calc((var(--line-height) - var(--size-checkbox)) / 2);
+    grid-area: checkbox;
+    width: var(--size-checkbox);
+    height: var(--size-checkbox);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    cursor: pointer;
+  }
+
+  .cdx-list__checkbox svg {
+      opacity: 0;
+      height: var(--size-checkbox);
+      width: var(--size-checkbox);
+      left: -1px;
+      top: -1px;
+      position: absolute;
+    }
+
+  @media (hover: hover) {
+          ^.cdx-list__checkbox:not(.cdx-list__checkbox--no-hover):hover-check svg {
+            opacity: 1;
+          }
+    }
+
+  .cdx-list__checkbox--checked {
+      line-height: var(--line-height);
+    }
+
+  @media (hover: hover) {
+          .cdx-list__checkbox--checked:not(.cdx-list__checkbox--checked--no-hover):hover .cdx-checklist__checkbox-check {
+            background: var(--color-bg-checked-hover);
+            border-color: var(--color-bg-checked-hover);
+          }
+      }
+
+  ^.cdx-list__checkbox--checked-check {
+        background: var(--color-bg-checked);
+        border-color: var(--color-bg-checked);
+      }
+
+  ^.cdx-list__checkbox--checked-check svg {
+          opacity: 1;
+        }
+
+  ^.cdx-list__checkbox--checked-check svg path {
+            stroke: var(--color-tick);
+          }
+
+  ^.cdx-list__checkbox--checked-check::before {
+          opacity: 0;
+          visibility: visible;
+          -webkit-transform: scale(2.5);
+                  transform: scale(2.5);
+        }
+
+  .cdx-list__checkbox-check {
+      cursor: pointer;
+      display: inline-block;
+      position: relative;
+      margin: 0 auto;
+      width: var(--size-checkbox);
+      height: var(--size-checkbox);
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      border-radius: var(--radius-border);
+      border: 1px solid var(--color-border);
+      background: var(--checkbox-background);
+    }
+
+  .cdx-list__checkbox-check::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 100%;
+        background-color: var(--color-bg-checked);
+        visibility: hidden;
+        pointer-events: none;
+        -webkit-transform: scale(1);
+                transform: scale(1);
+        -webkit-transition: opacity 400ms, -webkit-transform 400ms ease-out;
+        transition: opacity 400ms, -webkit-transform 400ms ease-out;
+        transition: transform 400ms ease-out, opacity 400ms;
+        transition: transform 400ms ease-out, opacity 400ms, -webkit-transform 400ms ease-out;
+      }
+
+  .cdx-list__checkbox-check--disabled {
+        pointer-events: none;
+      }

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

@@ -39,7 +39,6 @@ function instanceOfChecklistData(data: ListData | OldListData | OldChecklistData
  * @returns - normalized data, ready to be used by Editorjs List tool
  */
 export default function normalizeData(data: ListData | OldListData | OldChecklistData): ListData {
-
   const normalizedDataItems: ListItem[] = [];
 
   if (instanceOfOldListData(data)) {