Skip to content

Commit

Permalink
Merge pull request #107 from editor-js/rename-to-list
Browse files Browse the repository at this point in the history
Chore (): rename Nested List tool to the Editorjs List tool
  • Loading branch information
e11sy authored Nov 6, 2024
2 parents eedac68 + 40ad72f commit 0cdea32
Show file tree
Hide file tree
Showing 15 changed files with 63 additions and 65 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
![](https://badgen.net/badge/Editor.js/v2.19.2/blue)

# Nested List Tool for Editor.js
# Editorjs List Tool

Multi-leveled lists for the [Editor.js](https://editorjs.io).

Expand All @@ -24,31 +24,31 @@ Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
Get the package

```shell
yarn add @editorjs/nested-list
yarn add @editorjs/list
```

Include module at your application

```javascript
import NestedList from '@editorjs/nested-list';
import List from '@editorjs/list';
```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest)
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/list@latest)

## Usage

Add the NestedList Tool to the `tools` property of the Editor.js initial config.
Add the List Tool to the `tools` property of the Editor.js initial config.

```javascript
import EditorJS from '@editorjs/editorjs';
import NestedList from '@editorjs/nested-list';
import List from '@editorjs/list';

var editor = EditorJS({
// ...
tools: {
...
list: {
class: NestedList,
class: List,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
Expand Down
2 changes: 1 addition & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default [
* Redefine language oprions and some of the rules of the CodeX eslint config for typescript config
*/
{
name: 'editorjs-nested-list',
name: 'editorjs-list',
ignores: ['vite.config.js', 'eslint.config.mjs', 'postcss.config.js', '**/json-preview.js'],
plugins: {
'@typescript-eslint': TsPlugin,
Expand Down
8 changes: 4 additions & 4 deletions example/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>&lt;!&ndash; List &ndash;&gt;-->
<script src="../dist/nested-list.js"></script><!-- Nested List -->
<script src="../dist/editorjs-list.js"></script><!-- Editorjs List -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
Expand Down Expand Up @@ -120,8 +120,8 @@
*/
image: SimpleImage,

nestedList: {
class: NestedList,
List: {
class: List,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+L'
},
Expand Down Expand Up @@ -189,7 +189,7 @@
data: {
blocks: [
{
type : 'nestedList',
type : 'List',
data : {
items : [
{
Expand Down
6 changes: 3 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,9 @@
data : {
style : "checklist",
items : [
"This is List tool data",
"This is old List tool data",
"That would be displayed",
"In Nested List tool"
"In new List tool"
],
},
},
Expand All @@ -216,7 +216,7 @@
checked: false
},
{
text: "In Nested List tool",
text: "In new List tool",
checked: true
}
]
Expand Down
18 changes: 9 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
{
"name": "@editorjs/nested-list",
"version": "1.4.3",
"name": "@editorjs/list",
"version": "2.0.0",
"keywords": [
"codex editor",
"nested-list",
"list",
"editor.js",
"editorjs"
],
"description": "Nested list Tool for EditorJS",
"repository": "https://github.com/editor-js/nested-list.git",
"description": "List Tool for EditorJS",
"repository": "https://github.com/editor-js/list.git",
"author": "CodeX <[email protected]>",
"license": "MIT",
"files": [
"dist"
],
"main": "./dist/nested-list.umd.js",
"module": "./dist/nested-list.mjs",
"main": "./dist/editorjs-list.umd.js",
"module": "./dist/editorjs-list.mjs",
"exports": {
".": {
"import": "./dist/nested-list.mjs",
"require": "./dist/nested-list.umd.js",
"import": "./dist/editorjs-list.mjs",
"require": "./dist/editorjs-list.umd.js",
"types": "./dist/index.d.ts"
}
},
Expand Down
6 changes: 3 additions & 3 deletions src/ListRenderer/ChecklistRenderer.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IconCheck } from '@codexteam/icons';
import type { ChecklistItemMeta } from '../types/ItemMeta';
import type { NestedListConfig } from '../types/ListParams';
import type { ListConfig } from '../types/ListParams';
import { isEmpty, make } from '@editorjs/dom';
import { DefaultListCssClasses } from './ListRenderer';
import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
Expand Down Expand Up @@ -43,7 +43,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
/**
* Tool's configuration
*/
protected config?: NestedListConfig;
protected config?: ListConfig;

/**
* Is NestedList Tool read-only option
Expand All @@ -69,7 +69,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
* @param readonly - read-only mode flag
* @param config - user config for Tool
*/
constructor(readonly: boolean, config?: NestedListConfig) {
constructor(readonly: boolean, config?: ListConfig) {
this.config = config;
this.readOnly = readonly;
}
Expand Down
6 changes: 3 additions & 3 deletions src/ListRenderer/ListRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ export const DefaultListCssClasses = {
*/
export interface ListCssClasses {
/**
* CSS class of the whole nested list wrapper
* CSS class of the whole list wrapper
*/
wrapper: string;

/**
* CSS class of the nested list item
* CSS class of the list item
*/
item: string;

/**
* CSS class of the nested list item content element
* CSS class of the list item content element
*/
itemContent: string;

Expand Down
8 changes: 4 additions & 4 deletions src/ListRenderer/OrderedListRenderer.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { OrderedListItemMeta } from '../types/ItemMeta';
import type { NestedListConfig } from '../types/ListParams';
import type { ListConfig } from '../types/ListParams';
import { isEmpty, make } from '@editorjs/dom';
import { DefaultListCssClasses } from './ListRenderer';
import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
Expand All @@ -22,10 +22,10 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
/**
* Tool's configuration
*/
protected config?: NestedListConfig;
protected config?: ListConfig;

/**
* Is NestedList Tool read-only option
* Is Editorjs List Tool read-only option
*/
private readOnly: boolean;

Expand All @@ -44,7 +44,7 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
* @param readonly - read-only mode flag
* @param config - user config for Tool
*/
constructor(readonly: boolean, config?: NestedListConfig) {
constructor(readonly: boolean, config?: ListConfig) {
this.config = config;
this.readOnly = readonly;
}
Expand Down
8 changes: 4 additions & 4 deletions src/ListRenderer/UnorderedListRenderer.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { UnorderedListItemMeta } from '../types/ItemMeta';
import type { NestedListConfig } from '../types/ListParams';
import type { ListConfig } from '../types/ListParams';
import { make, isEmpty } from '@editorjs/dom';
import { DefaultListCssClasses } from './ListRenderer';
import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
Expand All @@ -22,10 +22,10 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
/**
* Tool's configuration
*/
protected config?: NestedListConfig;
protected config?: ListConfig;

/**
* Is NestedList Tool read-only option
* Is Editorjs List Tool read-only option
*/
private readOnly: boolean;

Expand All @@ -44,7 +44,7 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
* @param readonly - read-only mode flag
* @param config - user config for Tool
*/
constructor(readonly: boolean, config?: NestedListConfig) {
constructor(readonly: boolean, config?: ListConfig) {
this.config = config;
this.readOnly = readonly;
}
Expand Down
14 changes: 7 additions & 7 deletions src/ListTabulator/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { OrderedListRenderer } from '../ListRenderer/OrderedListRenderer';
import { UnorderedListRenderer } from '../ListRenderer/UnorderedListRenderer';
import type { NestedListConfig, ListData, ListDataStyle } from '../types/ListParams';
import type { ListConfig, ListData, ListDataStyle } from '../types/ListParams';
import type { ListItem } from '../types/ListParams';
import type { ItemElement, ItemChildWrapperElement } from '../types/Elements';
import { isHtmlElement } from '../utils/type-guards';
Expand Down Expand Up @@ -31,14 +31,14 @@ export default class ListTabulator<Renderer extends ListRenderer> {
private api: API;

/**
* Is NestedList Tool read-only option
* Is Editorjs List Tool read-only option
*/
private readOnly: boolean;

/**
* Tool's configuration
*/
private config?: NestedListConfig;
private config?: ListConfig;

/**
* Full content of the list
Expand Down Expand Up @@ -138,7 +138,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
}

/**
* Function that is responsible for rendering nested list with contents
* Function that is responsible for rendering list with contents
* @returns Filled with content wrapper element of the list
*/
public render(): ItemChildWrapperElement {
Expand Down Expand Up @@ -252,7 +252,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
/**
* On paste sanitzation config. Allow only tags that are allowed in the Tool.
* @returns - config that determines tags supposted by paste handler
* @todo - refactor and move to nested list instance
* @todo - refactor and move to list instance
*/
public static get pasteConfig(): PasteConfig {
return {
Expand Down Expand Up @@ -340,7 +340,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
/**
* On paste callback that is fired from Editor.
* @param event - event with pasted data
* @todo - refactor and move to nested list instance
* @todo - refactor and move to list instance
*/
public onPaste(event: PasteEvent): void {
const list = event.detail.data;
Expand All @@ -358,7 +358,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
/**
* Handle UL, OL and LI tags paste and returns List data
* @param element - html element that contains whole list
* @todo - refactor and move to nested list instance
* @todo - refactor and move to list instance
*/
public pasteHandler(element: PasteEvent['detail']['data']): ListData {
const { tagName: tag } = element;
Expand Down
22 changes: 10 additions & 12 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type {
ToolConfig
} from '@editorjs/editorjs/types/tools';
import { IconListBulleted, IconListNumbered, IconChecklist } from '@codexteam/icons';
import type { NestedListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
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';
Expand All @@ -22,14 +22,14 @@ import normalizeData from './utils/normalizeData';
import type { PasteEvent } from './types';

/**
* Constructor Params for Nested List Tool, use to pass initial data and settings
* Constructor Params for Editorjs List Tool, use to pass initial data and settings
*/
export type ListParams = BlockToolConstructorOptions<ListData | OldListData, NestedListConfig>;
export type ListParams = BlockToolConstructorOptions<ListData | OldListData, ListConfig>;

/**
* Default class of the component used in editor
*/
export default class NestedList {
export default class EditorjsList {
/**
* Notify core that read-only mode is supported
*/
Expand Down Expand Up @@ -101,11 +101,11 @@ export default class NestedList {
* @param content - contents string
* @returns - list data formed from contents string
*/
import: (content: string, config: ToolConfig<NestedListConfig>) => ListData;
import: (content: string, config: ToolConfig<ListConfig>) => ListData;
} {
return {
export: (data) => {
return NestedList.joinRecursive(data);
return EditorjsList.joinRecursive(data);
},
import: (content, config) => {
return {
Expand Down Expand Up @@ -154,19 +154,19 @@ export default class NestedList {
private api: API;

/**
* Is NestedList Tool read-only
* Is Ediotrjs List Tool read-only
*/
private readOnly: boolean;

/**
* Tool's configuration
*/
private config: NestedListConfig | undefined;
private config: ListConfig | undefined;

/**
* Default list style formes as passed default list style from config or 'ordered' as default
*/
private defaultListStyle?: NestedListConfig['defaultStyle'];
private defaultListStyle?: ListConfig['defaultStyle'];

/**
* Tool's data
Expand Down Expand Up @@ -231,7 +231,7 @@ export default class NestedList {
*/
private static joinRecursive(data: ListData | ListItem): string {
return data.items
.map(item => `${item.content} ${NestedList.joinRecursive(item)}`)
.map(item => `${item.content} ${EditorjsList.joinRecursive(item)}`)
.join('');
}

Expand Down Expand Up @@ -356,7 +356,6 @@ export default class NestedList {
/**
* On paste callback that is fired from Editor.
* @param event - event with pasted data
* @todo - refactor and move to nested list instance
*/
public onPaste(event: PasteEvent): void {
const { tagName: tag } = event.detail.data;
Expand All @@ -376,7 +375,6 @@ export default class NestedList {
/**
* Handle UL, OL and LI tags paste and returns List data
* @param element - html element that contains whole list
* @todo - refactor and move to nested list instance
*/
public pasteHandler(element: PasteEvent['detail']['data']): ListData {
const data = this.list!.pasteHandler(element);
Expand Down
Loading

0 comments on commit 0cdea32

Please sign in to comment.