list icon indicating copy to clipboard operation
list copied to clipboard

How to make unordered list as default?

Open brc-dd opened this issue 4 years ago • 3 comments

I am using the following editorjs config:

tools: {
     list: { 
          class: require('@editorjs/list'),
          shortcut: 'CMD+SHIFT+L' 
     }
},
inlineToolbar: true

Now when I use shortcut CMD+SHIFT+L on the app, it generates an ordered list block. The same behavior is when I add a list block.

But when I manually use "Convert To", it changes block to an unordered list. I want to default the behavior of previous two methods to generate an unordered list. Is is possible?

Maybe some parameter like defaultStyle: "unordered" similar to defaultLevel in @editorjs/header?

brc-dd avatar Dec 11 '20 11:12 brc-dd

I second this. It would be nice to configure the default list type: ordered/unordered.

90% of my lists are unordered, so this could be really useful.

horizon89 avatar Dec 18 '20 08:12 horizon89

Bump for this feature. Most editors I've ever used have unordered as the default.

For those who have to have it- you can always fork the repo and change this line: https://github.com/editor-js/list/blob/2f67e1200ab45789780e2ffb3f45ca128f426883/src/index.js#L77 and point the npm package to your fork

0xc00010ff avatar Feb 22 '21 07:02 0xc00010ff

A quick workaround until the pull request is merged https://github.com/editor-js/list/pull/51. Create a custom class that extends the base class.

import EditorJS from '@editorjs/editorjs';
const EditorJSList = require('@editorjs/list');

class MyList extends EditorJSList {
    constructor({ data, config, api, readOnly }) {
        super({ data, config, api, readOnly });

        this.settings = [
            {
                name: 'unordered',
                title: this.api.i18n.t('Unordered'),
                icon: '<svg width="17" height="13" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg"> <path d="M5.625 4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0-4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0 9.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm-4.5-5a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0-4.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0 9.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25z"/></svg>',
                default: true,
            },
            {
                name: 'ordered',
                title: this.api.i18n.t('Ordered'),
                icon: '<svg width="17" height="13" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg"><path d="M5.819 4.607h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 1 1 0-2.138zm0-4.607h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 1 1 0-2.138zm0 9.357h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 0 1 0-2.137zM1.468 4.155V1.33c-.554.404-.926.606-1.118.606a.338.338 0 0 1-.244-.104A.327.327 0 0 1 0 1.59c0-.107.035-.184.105-.234.07-.05.192-.114.369-.192.264-.118.475-.243.633-.373.158-.13.298-.276.42-.438a3.94 3.94 0 0 1 .238-.298C1.802.019 1.872 0 1.975 0c.115 0 .208.042.277.127.07.085.105.202.105.351v3.556c0 .416-.15.624-.448.624a.421.421 0 0 1-.32-.127c-.08-.085-.121-.21-.121-.376zm-.283 6.664h1.572c.156 0 .275.03.358.091a.294.294 0 0 1 .123.25.323.323 0 0 1-.098.238c-.065.065-.164.097-.296.097H.629a.494.494 0 0 1-.353-.119.372.372 0 0 1-.126-.28c0-.068.027-.16.081-.273a.977.977 0 0 1 .178-.268c.267-.264.507-.49.722-.678.215-.188.368-.312.46-.371.165-.11.302-.222.412-.334.109-.112.192-.226.25-.344a.786.786 0 0 0 .085-.345.6.6 0 0 0-.341-.553.75.75 0 0 0-.345-.08c-.263 0-.47.11-.62.329-.02.029-.054.107-.101.235a.966.966 0 0 1-.16.295c-.059.069-.145.103-.26.103a.348.348 0 0 1-.25-.094.34.34 0 0 1-.099-.258c0-.132.031-.27.093-.413.063-.143.155-.273.279-.39.123-.116.28-.21.47-.282.189-.072.411-.107.666-.107.307 0 .569.045.786.137a1.182 1.182 0 0 1 .618.623 1.18 1.18 0 0 1-.096 1.083 2.03 2.03 0 0 1-.378.457c-.128.11-.344.282-.646.517-.302.235-.509.417-.621.547a1.637 1.637 0 0 0-.148.187z"/></svg>',
                default: false,
            },
        ];
        this._data = {
            style: this.settings.find((tune) => tune.default === true).name,
            items: [],
        };
        this.data = data;
    }
}

/**
 * Init editor
 */
const editor = new EditorJS({
    // ...
    tools: {
        list: MyList
    }
});



adam-riha avatar Jan 06 '22 20:01 adam-riha